@memberjunction/ng-explorer-core 6.2.0-edge.0 → 6.2.0-edge.2

package/dist/lib/resource-wrappers/dashboard-resource.component.js

@@ -144,24 +144,72 @@ let DashboardResource = class DashboardResource extends BaseResourceComponent {
         this.rehomeChildToTab(this.componentRef?.instance, tabId);
     }
     dataLoaded = false;
-    containerElement;
+    ContainerElement;
+    /** @deprecated Use {@link ContainerElement}. */
+    get containerElement() {
+        return this.ContainerElement;
+    }
+    /** @deprecated Use {@link ContainerElement}. */
+    set containerElement(value) {
+        this.ContainerElement = value;
+    }
     /** Error message to display when dashboard fails to load */
     errorMessage = null;
     /** Technical error details (shown in expandable section) */
-    errorDetails = null;
+    ErrorDetails = null;
+    /** @deprecated Use {@link ErrorDetails}. */
+    get errorDetails() {
+        return this.ErrorDetails;
+    }
+    /** @deprecated Use {@link ErrorDetails}. */
+    set errorDetails(value) {
+        this.ErrorDetails = value;
+    }
     /** Cached dashboard categories for breadcrumb navigation */
     categories = [];
     /** Reference to the dashboard viewer component (for config-based dashboards) */
     viewerInstance = null;
     /** The config-based dashboard entity (null for code-based dashboards) */
-    configDashboard = null;
+    ConfigDashboard = null;
+    /** @deprecated Use {@link ConfigDashboard}. */
+    get configDashboard() {
+        return this.ConfigDashboard;
+    }
+    /** @deprecated Use {@link ConfigDashboard}. */
+    set configDashboard(value) {
+        this.ConfigDashboard = value;
+    }
     /** Whether we're in edit mode */
-    isEditMode = false;
+    IsEditMode = false;
+    /** @deprecated Use {@link IsEditMode}. */
+    get isEditMode() {
+        return this.IsEditMode;
+    }
+    /** @deprecated Use {@link IsEditMode}. */
+    set isEditMode(value) {
+        this.IsEditMode = value;
+    }
     /** Editing fields */
-    editingName = '';
-    editingDescription = '';
+    EditingName = '';
+    /** @deprecated Use {@link EditingName}. */
+    get editingName() {
+        return this.EditingName;
+    }
+    /** @deprecated Use {@link EditingName}. */
+    set editingName(value) {
+        this.EditingName = value;
+    }
+    EditingDescription = '';
+    /** @deprecated Use {@link EditingDescription}. */
+    get editingDescription() {
+        return this.EditingDescription;
+    }
+    /** @deprecated Use {@link EditingDescription}. */
+    set editingDescription(value) {
+        this.EditingDescription = value;
+    }
     /** Current user's permissions for this dashboard */
-    dashboardPermissions = {
+    DashboardPermissions = {
         DashboardID: '',
         CanRead: true,
         CanEdit: true,
@@ -170,21 +218,37 @@ let DashboardResource = class DashboardResource extends BaseResourceComponent {
         IsOwner: true,
         PermissionSource: 'owner'
     };
+    /** @deprecated Use {@link DashboardPermissions}. */
+    get dashboardPermissions() {
+        return this.DashboardPermissions;
+    }
+    /** @deprecated Use {@link DashboardPermissions}. */
+    set dashboardPermissions(value) {
+        this.DashboardPermissions = value;
+    }
     /** Whether the share dialog is visible */
-    showShareDialog = false;
+    ShowShareDialog = false;
+    /** @deprecated Use {@link ShowShareDialog}. */
+    get showShareDialog() {
+        return this.ShowShareDialog;
+    }
+    /** @deprecated Use {@link ShowShareDialog}. */
+    set showShareDialog(value) {
+        this.ShowShareDialog = value;
+    }
     /**
      * Sets the error state with a user-friendly message and optional technical details
      */
     setError(message, error) {
         this.errorMessage = message;
         if (error instanceof Error) {
-            this.errorDetails = error.message;
+            this.ErrorDetails = error.message;
             if (error.stack) {
-                this.errorDetails += '\n\nStack trace:\n' + error.stack;
+                this.ErrorDetails += '\n\nStack trace:\n' + error.stack;
             }
         }
         else if (error) {
-            this.errorDetails = String(error);
+            this.ErrorDetails = String(error);
         }
     }
     /**
@@ -192,7 +256,7 @@ let DashboardResource = class DashboardResource extends BaseResourceComponent {
      */
     clearError() {
         this.errorMessage = null;
-        this.errorDetails = null;
+        this.ErrorDetails = null;
     }
     constructor(viewContainer, cdr) {
         super();
@@ -212,7 +276,7 @@ let DashboardResource = class DashboardResource extends BaseResourceComponent {
                 this.componentRef = null;
             }
             this.clearError();
-            this.configDashboard = null;
+            this.ConfigDashboard = null;
             this.viewerInstance = null;
             this.loadDashboard();
         }
@@ -233,23 +297,27 @@ let DashboardResource = class DashboardResource extends BaseResourceComponent {
     /**
      * Toggle between view and edit mode
      */
-    toggleEditMode() {
-        if (this.isEditMode) {
-            this.cancelEdit();
+    ToggleEditMode() {
+        if (this.IsEditMode) {
+            this.CancelEdit();
         }
         else {
             this.enterEditMode();
         }
     }
+    /** @deprecated Use {@link ToggleEditMode}. */
+    toggleEditMode() {
+        return this.ToggleEditMode();
+    }
     /**
      * Enter edit mode
      */
     enterEditMode() {
-        if (!this.configDashboard)
+        if (!this.ConfigDashboard)
             return;
-        this.isEditMode = true;
-        this.editingName = this.configDashboard.Name;
-        this.editingDescription = this.configDashboard.Description || '';
+        this.IsEditMode = true;
+        this.EditingName = this.ConfigDashboard.Name;
+        this.EditingDescription = this.ConfigDashboard.Description || '';
         // Tell the viewer to enter edit mode
         if (this.viewerInstance) {
             this.viewerInstance.isEditing = true;
@@ -259,28 +327,32 @@ let DashboardResource = class DashboardResource extends BaseResourceComponent {
     /**
      * Cancel edit mode and discard changes
      */
-    cancelEdit() {
-        this.isEditMode = false;
+    CancelEdit() {
+        this.IsEditMode = false;
         // Tell the viewer to exit edit mode
         if (this.viewerInstance) {
             this.viewerInstance.isEditing = false;
         }
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link CancelEdit}. */
+    cancelEdit() {
+        return this.CancelEdit();
+    }
     /**
      * Save dashboard changes
      */
-    async saveDashboard() {
-        if (!this.configDashboard || !this.viewerInstance)
+    async SaveDashboard() {
+        if (!this.ConfigDashboard || !this.viewerInstance)
             return;
         try {
             // Update dashboard name and description
-            this.configDashboard.Name = this.editingName;
-            this.configDashboard.Description = this.editingDescription;
+            this.ConfigDashboard.Name = this.EditingName;
+            this.ConfigDashboard.Description = this.EditingDescription;
             // Save via the viewer (which handles layout saving)
             await this.viewerInstance.save();
             // Exit edit mode
-            this.isEditMode = false;
+            this.IsEditMode = false;
             this.viewerInstance.isEditing = false;
             this.cdr.detectChanges();
         }
@@ -288,41 +360,61 @@ let DashboardResource = class DashboardResource extends BaseResourceComponent {
             console.error('Error saving dashboard:', error);
         }
     }
+    /** @deprecated Use {@link SaveDashboard}. */
+    async saveDashboard() {
+        return this.SaveDashboard();
+    }
     /**
      * Open the add panel dialog
      */
-    openAddPartDialog() {
+    OpenAddPartDialog() {
         if (this.viewerInstance) {
             // Trigger the viewer's add panel flow
             this.viewerInstance.onAddPanelClick();
         }
     }
+    /** @deprecated Use {@link OpenAddPartDialog}. */
+    openAddPartDialog() {
+        return this.OpenAddPartDialog();
+    }
     /**
      * Open the share dialog for this dashboard
      */
-    openShareDialog() {
-        this.showShareDialog = true;
+    OpenShareDialog() {
+        this.ShowShareDialog = true;
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link OpenShareDialog}. */
+    openShareDialog() {
+        return this.OpenShareDialog();
+    }
     /**
      * Close the share dialog
      */
-    closeShareDialog() {
-        this.showShareDialog = false;
+    CloseShareDialog() {
+        this.ShowShareDialog = false;
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link CloseShareDialog}. */
+    closeShareDialog() {
+        return this.CloseShareDialog();
+    }
     /**
      * Handle share dialog result
      */
-    onShareDialogResult(result) {
-        this.showShareDialog = false;
-        if (result.Action === 'save' && this.configDashboard) {
+    OnShareDialogResult(result) {
+        this.ShowShareDialog = false;
+        if (result.Action === 'save' && this.ConfigDashboard) {
             // Recompute permissions after sharing changes
             const md = this.ProviderToUse;
-            this.dashboardPermissions = DashboardEngine.Instance.GetDashboardPermissions(this.configDashboard.ID, md.CurrentUser.ID);
+            this.DashboardPermissions = DashboardEngine.Instance.GetDashboardPermissions(this.ConfigDashboard.ID, md.CurrentUser.ID);
         }
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link OnShareDialogResult}. */
+    onShareDialogResult(result) {
+        return this.OnShareDialogResult(result);
+    }
     /**
      * Load the appropriate dashboard component based on dashboard type
      * Routes between code-based dashboards (registered classes) and config-based dashboards
@@ -376,7 +468,7 @@ let DashboardResource = class DashboardResource extends BaseResourceComponent {
         try {
             // Lazy-load the Data Explorer component to keep it out of the initial bundle
             const { DataExplorerDashboardComponent } = await import('@memberjunction/ng-dashboards/data-explorer-dashboards.module');
-            this.containerElement.nativeElement.innerHTML = '';
+            this.ContainerElement.nativeElement.innerHTML = '';
             const componentRef = this.viewContainer.createComponent(DataExplorerDashboardComponent);
             this.componentRef = componentRef;
             const instance = componentRef.instance;
@@ -402,7 +494,7 @@ let DashboardResource = class DashboardResource extends BaseResourceComponent {
             const nativeElement = componentRef.hostView.rootNodes[0];
             nativeElement.style.width = '100%';
             nativeElement.style.height = '100%';
-            this.containerElement.nativeElement.appendChild(nativeElement);
+            this.ContainerElement.nativeElement.appendChild(nativeElement);
             // Handle open entity record events
             instance.OpenEntityRecord.subscribe((eventData) => {
                 if (eventData && eventData.EntityName && eventData.RecordPKey) {
@@ -455,7 +547,7 @@ let DashboardResource = class DashboardResource extends BaseResourceComponent {
                 throw new Error(`Dashboard class '${dashboard.DriverClass}' is not registered. Please check the class registration.`);
             }
             // Create the component instance
-            this.containerElement.nativeElement.innerHTML = '';
+            this.ContainerElement.nativeElement.innerHTML = '';
             this.componentRef = this.viewContainer.createComponent(classReg.SubClass);
             const instance = this.componentRef.instance;
             // Scope the child's query-param reads/writes to THIS tab. Code dashboards resolved via
@@ -496,7 +588,7 @@ let DashboardResource = class DashboardResource extends BaseResourceComponent {
             const nativeElement = this.componentRef.hostView.rootNodes[0];
             nativeElement.style.width = '100%';
             nativeElement.style.height = '100%';
-            this.containerElement.nativeElement.appendChild(nativeElement);
+            this.ContainerElement.nativeElement.appendChild(nativeElement);
             // handle open entity record events in MJ Explorer with routing
             instance.OpenEntityRecord.subscribe((data) => {
                 // check to see if the data has entityname/pkey
@@ -548,21 +640,21 @@ let DashboardResource = class DashboardResource extends BaseResourceComponent {
      */
     async loadConfigBasedDashboard(dashboard) {
         try {
-            this.containerElement.nativeElement.innerHTML = '';
+            this.ContainerElement.nativeElement.innerHTML = '';
             const componentRef = this.viewContainer.createComponent(DashboardViewerComponent);
             this.componentRef = componentRef;
             const instance = componentRef.instance;
             // Store references for external toolbar control
             this.viewerInstance = instance;
-            this.configDashboard = dashboard;
+            this.ConfigDashboard = dashboard;
             // Compute user permissions for this dashboard
             const md = this.ProviderToUse;
-            this.dashboardPermissions = DashboardEngine.Instance.GetDashboardPermissions(dashboard.ID, md.CurrentUser.ID);
+            this.DashboardPermissions = DashboardEngine.Instance.GetDashboardPermissions(dashboard.ID, md.CurrentUser.ID);
             // Manually append the component's native element inside the div
             const nativeElement = this.componentRef.hostView.rootNodes[0];
             nativeElement.style.width = '100%';
             nativeElement.style.height = '100%';
-            this.containerElement.nativeElement.appendChild(nativeElement);
+            this.ContainerElement.nativeElement.appendChild(nativeElement);
             // Load categories for breadcrumb navigation (if not already loaded)
             if (this.categories.length === 0) {
                 this.categories = DashboardEngine.Instance.DashboardCategories;
@@ -680,7 +772,7 @@ let DashboardResource = class DashboardResource extends BaseResourceComponent {
             i0.ɵɵviewQuery(_c0, 7);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.containerElement = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ContainerElement = _t.first);
         } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 4, consts: [["container", ""], [1, "dashboard-resource-wrapper"], [1, "error-state"], [1, "viewer-toolbar"], [1, "viewer-header", "editing"], [1, "dashboard-resource-container"], [3, "Visible", "Dashboard"], [1, "error-icon"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "error-title"], [1, "error-message"], [1, "error-details"], [1, "toolbar-left"], [1, "dashboard-title"], [1, "fa-solid", "fa-chart-line"], ["title", "Shared with you", 1, "shared-indicator"], [1, "toolbar-actions"], ["title", "Share Dashboard", 1, "btn-icon"], ["title", "Edit Dashboard", 1, "btn-icon"], [1, "fa-solid", "fa-share-nodes"], ["title", "Share Dashboard", 1, "btn-icon", 3, "click"], ["title", "Edit Dashboard", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-edit"], [1, "header-left"], [1, "btn-add-part", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "header-separator"], [1, "dashboard-info-edit"], ["type", "text", "placeholder", "Dashboard name", 1, "dashboard-name-input", 3, "ngModelChange", "ngModel"], ["type", "text", "placeholder", "Add a description...", 1, "dashboard-description-input", 3, "ngModelChange", "ngModel"], [1, "header-right"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-save"], [1, "btn-cancel", 3, "click"], [3, "Result", "Visible", "Dashboard"]], template: function DashboardResource_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵconditionalCreate(1, DashboardResource_Conditional_1_Template, 8, 2, "div", 2);
@@ -807,7 +899,7 @@ export { DashboardResource };
             }
         </div>
     `, styles: ["\n        :host {\n            display: block;\n            width: 100%;\n            height: 100%;\n            position: relative;\n            overflow: hidden;\n        }\n        .dashboard-resource-wrapper {\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            width: 100%;\n        }\n        .dashboard-resource-container {\n            flex: 1;\n            overflow: hidden;\n            min-height: 0;\n        }\n\n        /* View Mode Toolbar */\n        .viewer-toolbar {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 12px 24px;\n            background: var(--mj-bg-surface-card);\n            border-bottom: 1px solid var(--mj-border-default);\n            gap: 16px;\n        }\n        .viewer-toolbar .toolbar-left {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n        }\n        .viewer-toolbar .dashboard-title {\n            font-size: 16px;\n            font-weight: 500;\n            color: var(--mj-text-primary);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        .viewer-toolbar .dashboard-title i {\n            color: var(--mj-brand-primary);\n        }\n        .shared-indicator {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 24px;\n            height: 24px;\n            border-radius: 50%;\n            background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n            font-size: 11px;\n        }\n        .viewer-toolbar .toolbar-actions {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n        }\n\n        /* Edit Mode Header */\n        .viewer-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 12px 24px;\n            background: var(--mj-bg-surface-card);\n            border-bottom: 1px solid var(--mj-border-default);\n            transition: background 0.2s, border-color 0.2s;\n        }\n        .viewer-header.editing {\n            background: linear-gradient(135deg, color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)) 0%, color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface)) 100%);\n            border-bottom: 2px solid var(--mj-brand-primary);\n        }\n        .viewer-header .header-left {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            flex: 1;\n        }\n        .viewer-header .header-right {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        /* Add Part button */\n        .btn-add-part {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 8px 16px;\n            border: none;\n            border-radius: 6px;\n            background: var(--mj-brand-primary);\n            color: var(--mj-text-inverse);\n            font-size: 13px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: background 0.2s, transform 0.1s;\n            box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n        }\n        .btn-add-part:hover {\n            background: var(--mj-brand-primary-hover);\n            transform: translateY(-1px);\n            box-shadow: 0 3px 6px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n        }\n        .btn-add-part i { font-size: 12px; }\n\n        /* Header separator */\n        .header-separator {\n            width: 1px;\n            height: 28px;\n            background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n            margin: 0 4px;\n        }\n\n        /* Buttons */\n        .btn-primary {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 10px 18px;\n            border: none;\n            border-radius: 6px;\n            background: var(--mj-brand-primary);\n            color: var(--mj-text-inverse);\n            font-size: 14px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: background 0.2s;\n        }\n        .btn-primary:hover { background: var(--mj-brand-primary-hover); }\n\n        .btn-icon {\n            width: 36px;\n            height: 36px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 1px solid var(--mj-border-default);\n            border-radius: 6px;\n            background: var(--mj-bg-surface-card);\n            color: var(--mj-text-secondary);\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n        .btn-icon:hover { background: var(--mj-bg-surface-sunken); }\n\n        .btn-cancel {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 10px 18px;\n            border: 1px solid var(--mj-border-default);\n            border-radius: 6px;\n            background: var(--mj-bg-surface-card);\n            color: var(--mj-text-secondary);\n            font-size: 14px;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n        .btn-cancel:hover {\n            background: var(--mj-bg-surface-sunken);\n            border-color: var(--mj-border-default);\n            color: var(--mj-text-primary);\n        }\n\n        /* Dashboard info inputs */\n        .dashboard-info-edit {\n            display: flex;\n            align-items: center;\n            gap: 16px;\n            flex: 1;\n        }\n        .dashboard-name-input {\n            border: 1px solid transparent;\n            border-radius: 4px;\n            padding: 6px 12px;\n            font-size: 16px;\n            font-weight: 500;\n            color: var(--mj-text-primary);\n            background: rgba(255, 255, 255, 0.7);\n            outline: none;\n            min-width: 200px;\n            max-width: 300px;\n            transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;\n        }\n        .dashboard-name-input:hover { background: rgba(255, 255, 255, 0.9); }\n        .dashboard-name-input:focus {\n            background: var(--mj-bg-surface-card);\n            border-color: var(--mj-brand-primary);\n            box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n        }\n        .dashboard-description-input {\n            border: 1px solid transparent;\n            border-radius: 4px;\n            padding: 6px 12px;\n            font-size: 13px;\n            color: var(--mj-text-secondary);\n            background: rgba(255, 255, 255, 0.5);\n            outline: none;\n            flex: 1;\n            min-width: 150px;\n            max-width: 400px;\n            transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;\n        }\n        .dashboard-description-input:hover { background: rgba(255, 255, 255, 0.8); }\n        .dashboard-description-input:focus {\n            background: var(--mj-bg-surface-card);\n            border-color: var(--mj-brand-primary);\n            box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n        }\n        .dashboard-description-input::placeholder {\n            color: var(--mj-text-muted);\n            font-style: normal;\n        }\n\n        /* Error state */\n        .error-state {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            height: 100%;\n            padding: 40px;\n            text-align: center;\n            color: var(--mj-text-secondary);\n        }\n        .error-icon {\n            font-size: 64px;\n            color: var(--mj-status-error);\n            margin-bottom: 24px;\n            opacity: 0.8;\n        }\n        .error-title {\n            font-size: 24px;\n            font-weight: 500;\n            margin: 0 0 12px 0;\n            color: var(--mj-text-primary);\n        }\n        .error-message {\n            font-size: 16px;\n            color: var(--mj-text-muted);\n            margin: 0 0 24px 0;\n            max-width: 500px;\n            line-height: 1.5;\n        }\n        .error-details {\n            background: var(--mj-bg-surface-sunken);\n            border-radius: 8px;\n            padding: 12px 16px;\n            max-width: 600px;\n            text-align: left;\n            font-size: 13px;\n        }\n        .error-details summary {\n            cursor: pointer;\n            font-weight: 500;\n            color: var(--mj-text-muted);\n            margin-bottom: 8px;\n        }\n        .error-details pre {\n            margin: 0;\n            white-space: pre-wrap;\n            word-break: break-word;\n            color: var(--mj-status-error-text);\n            font-family: 'Consolas', 'Monaco', monospace;\n            font-size: 12px;\n        }\n\n        /* Responsive */\n        @media (max-width: 768px) {\n            .viewer-header {\n                flex-direction: column;\n                gap: 12px;\n                align-items: stretch;\n            }\n            .viewer-header .header-left { flex-wrap: wrap; }\n            .dashboard-info-edit {\n                flex-direction: column;\n                align-items: stretch;\n            }\n            .dashboard-name-input,\n            .dashboard-description-input { max-width: none; }\n        }\n    "] }]
-    }], () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], { containerElement: [{
+    }], () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], { ContainerElement: [{
             type: ViewChild,
             args: ['container', { static: true }]
         }] }); })();