lazy panel content (#309)

* lazy panel content

* fix

src/app/sections/payment-section/integrations/shops/shops-panels-list/shops-panels-list.component.html

@@ -24,58 +24,65 @@
                 </div>
             </dsh-expand-panel-more-header>
 
-            <dsh-details-item [title]="p.name">
-                {{ shop?.details?.name }}
-            </dsh-details-item>
-            <dsh-details-item [title]="p.url">
-                {{ shop?.location?.url }}
-            </dsh-details-item>
-            <div fxLayout fxLayoutGap="10px" fxLayout.lt-md="column" fxLayoutGap.lt-md="20px">
-                <!--                <div fxFlex>-->
-                <!--                    <dsh-details-item [title]="p.balance">-->
-                <!--                        <dsh-shop-balance [shopID]="shop?.id"></dsh-shop-balance>-->
-                <!--                    </dsh-details-item>-->
-                <!--                </div>-->
-                <div fxFlex>
-                    <dsh-details-item [title]="p.createdAt">
-                        {{ shop?.createdAt | date: 'd MMMM y, HH:mm:ss' }}
-                    </dsh-details-item>
+            <ng-template dshLazyPanelContent>
+                <dsh-details-item [title]="p.name">
+                    {{ shop?.details?.name }}
+                </dsh-details-item>
+                <dsh-details-item [title]="p.url">
+                    {{ shop?.location?.url }}
+                </dsh-details-item>
+                <div fxLayout fxLayoutGap="10px" fxLayout.lt-md="column" fxLayoutGap.lt-md="20px">
+                    <div fxFlex>
+                        <dsh-details-item [title]="p.balance">
+                            <dsh-shop-balance [shopID]="shop?.id"></dsh-shop-balance>
+                        </dsh-details-item>
+                    </div>
+                    <div fxFlex>
+                        <dsh-details-item [title]="p.createdAt">
+                            {{ shop?.createdAt | date: 'd MMMM y, HH:mm:ss' }}
+                        </dsh-details-item>
+                    </div>
+                    <div fxFlex>
+                        <dsh-details-item [title]="p.category">
+                            {{ (shop?.categoryID | category)?.name }}
+                        </dsh-details-item>
+                    </div>
                 </div>
-                <div fxFlex>
-                    <dsh-details-item [title]="p.category">
-                        {{ (shop?.categoryID | category)?.name }}
-                    </dsh-details-item>
-                </div>
-            </div>
-            <mat-divider></mat-divider>
-
-            <div class="mat-title">{{ p.id }}</div>
-            <div class="mat-subheading-2">{{ shop?.id }}</div>
-            <div>
-                <button dsh-button [cdkCopyToClipboard]="shop?.id" (cdkCopyToClipboardCopied)="copied($event)">
-                    {{ p.copy }}
-                </button>
-            </div>
-            <mat-divider></mat-divider>
-            <dsh-shop-contract-details [contractID]="shop?.contractID"></dsh-shop-contract-details>
-            <mat-divider></mat-divider>
-            <dsh-shop-payout-tool-details
-                [payoutToolParams]="{ contractID: shop?.contractID, payoutToolID: shop?.payoutToolID }"
-            ></dsh-shop-payout-tool-details>
-
-            <ng-container *ngIf="!shop?.isBlocked">
                 <mat-divider></mat-divider>
 
-                <div class="mat-title">{{ p.actions }}</div>
+                <div class="mat-title">{{ p.id }}</div>
+                <div class="mat-subheading-2">{{ shop?.id }}</div>
                 <div>
-                    <button *ngIf="!shop?.isSuspended" dsh-stroked-button color="warn" (click)="suspend(shop?.id)">
-                        {{ p.suspend }}
-                    </button>
-                    <button *ngIf="shop?.isSuspended" dsh-stroked-button color="accent" (click)="activate(shop?.id)">
-                        {{ p.activate }}
+                    <button dsh-button [cdkCopyToClipboard]="shop?.id" (cdkCopyToClipboardCopied)="copied($event)">
+                        {{ p.copy }}
                     </button>
                 </div>
-            </ng-container>
+                <mat-divider></mat-divider>
+                <dsh-shop-contract-details [contractID]="shop?.contractID"></dsh-shop-contract-details>
+                <mat-divider></mat-divider>
+                <dsh-shop-payout-tool-details
+                    [payoutToolParams]="{ contractID: shop?.contractID, payoutToolID: shop?.payoutToolID }"
+                ></dsh-shop-payout-tool-details>
+
+                <ng-container *ngIf="!shop?.isBlocked">
+                    <mat-divider></mat-divider>
+
+                    <div class="mat-title">{{ p.actions }}</div>
+                    <div>
+                        <button *ngIf="!shop?.isSuspended" dsh-stroked-button color="warn" (click)="suspend(shop?.id)">
+                            {{ p.suspend }}
+                        </button>
+                        <button
+                            *ngIf="shop?.isSuspended"
+                            dsh-stroked-button
+                            color="accent"
+                            (click)="activate(shop?.id)"
+                        >
+                            {{ p.activate }}
+                        </button>
+                    </div>
+                </ng-container>
+            </ng-template>
         </dsh-expand-panel-more>
     </dsh-expand-panel>
     <dsh-show-more-panel *ngIf="hasMore$ | async" (showMore)="showMore()"></dsh-show-more-panel>

src/components/layout/accordion/accordion-item/accordion-item.component.html

@@ -3,11 +3,16 @@
     (click)="expand()"
     [ngClass]="{ 'dsh-accordion-item-expanded': expandedChange | async }"
 >
-    <div class="dsh-accordion-item-expand" *ngIf="expandedChange | async; else panelBase" [@expand]="expandTrigger">
-        <div (dshResized)="setExpandedContentHeight($event)" fxLayout>
-            <ng-container *ngTemplateOutlet="accordionItemContent?.templateRef"></ng-container>
+    <div *ngIf="expandedChange | async; then content; else panelBase"></div>
+    <ng-template #content>
+        <div class="dsh-accordion-item-expand" [@expand]="expandTrigger">
+            <div (dshResized)="setExpandedContentHeight($event)" fxLayout>
+                <ng-container
+                    *ngTemplateOutlet="accordionItemContent?.templateRef || lazyContent?._template"
+                ></ng-container>
+            </div>
         </div>
-    </div>
+    </ng-template>
     <ng-template #panelBase>
         <div class="dsh-accordion-item-base" [@expand]="collapseTrigger">
             <div (dshResized)="setBaseContentHeight($event)">

src/components/layout/accordion/accordion-item/accordion-item.component.ts

@@ -1,6 +1,8 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, Output } from '@angular/core';
 
+import { LazyPanelContentDirective } from '@dsh/components/layout/expand-panel/lazy-panel-content.directive';
+
 import { coerce } from '../../../../utils';
 import { ResizedEvent } from '../../../indicators';
 import { AccordionItemContentComponent } from '../accordion-item-content';
@@ -22,6 +24,9 @@ export class AccordionItemComponent {
     @ContentChild(AccordionItemContentComponent)
     accordionItemContent: AccordionItemContentComponent;
 
+    @ContentChild(LazyPanelContentDirective)
+    lazyContent: LazyPanelContentDirective;
+
     expandTrigger: { value: ExpandState; params: { height: number } } | ExpandState = ExpandState.collapsed;
     collapseTrigger: { value: ExpandState; params: { height: number } } | ExpandState;
 

src/components/layout/expand-panel/expand-panel-more/expand-panel-more-template.component.html

@@ -1,6 +1,12 @@
 <ng-template>
     <div class="dsh-expand-panel-more" fxLayout="column" [fxLayoutGap]="fxLayoutGap">
         <ng-container *ngTemplateOutlet="expandPanelMoreHeader?.templateRef"></ng-container>
-        <ng-content></ng-content>
+        <div *ngIf="lazyContent?._template; then lazy; else content"></div>
+        <ng-template #lazy>
+            <ng-container *ngTemplateOutlet="lazyContent?._template"></ng-container>
+        </ng-template>
+        <ng-template #content>
+            <ng-content></ng-content>
+        </ng-template>
     </div>
 </ng-template>

src/components/layout/expand-panel/expand-panel-more/expand-panel-more-template.component.ts

@@ -1,6 +1,8 @@
 import { Component, ContentChild, Input, TemplateRef, ViewChild } from '@angular/core';
 import { Subject } from 'rxjs';
 
+import { LazyPanelContentDirective } from '@dsh/components/layout/expand-panel/lazy-panel-content.directive';
+
 import { coerce } from '../../../../utils';
 import { ExpandPanelMoreHeaderTemplateComponent } from './expand-panel-more-header-template';
 
@@ -23,4 +25,7 @@ export class ExpandPanelMoreTemplateComponent {
             v && v.collapse$.subscribe((e) => self.collapse$.next(e))
     )
     expandPanelMoreHeader: ExpandPanelMoreHeaderTemplateComponent;
+
+    @ContentChild(LazyPanelContentDirective)
+    lazyContent: LazyPanelContentDirective;
 }

src/components/layout/expand-panel/expand-panel.module.ts

@@ -10,12 +10,14 @@ import { CardModule } from '../card';
 import { ExpandPanelAccordionComponent } from './expand-panel-accordion.component';
 import { ExpandPanelMoreHeaderTemplateComponent, ExpandPanelMoreTemplateComponent } from './expand-panel-more';
 import { ExpandPanelComponent } from './expand-panel.component';
+import { LazyPanelContentDirective } from './lazy-panel-content.directive';
 
 const EXPORTED_DECLARATIONS = [
     ExpandPanelComponent,
     ExpandPanelMoreTemplateComponent,
     ExpandPanelMoreHeaderTemplateComponent,
     ExpandPanelAccordionComponent,
+    LazyPanelContentDirective,
 ];
 
 @NgModule({

src/components/layout/expand-panel/lazy-panel-content.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+    selector: 'ng-template[dshLazyPanelContent]',
+})
+export class LazyPanelContentDirective {
+    constructor(public _template: TemplateRef<any>) {}
+}