@meshmakers/octo-meshboard 3.3.700 → 3.3.720

package/fesm2022/meshmakers-octo-meshboard.mjs

@@ -40,7 +40,7 @@ import { LabelModule, KENDO_LABELS } from '@progress/kendo-angular-label';
 import { DomSanitizer } from '@angular/platform-browser';
 import { GetProcessDiagramDtoGQL, GetProcessDiagramsDtoGQL, CreateProcessDiagramDtoGQL, UpdateProcessDiagramDtoGQL, SymbolLibraryService, ExpressionEvaluatorService, renderAnimations, getFlowParticlesAnimation, renderFlowParticles } from '@meshmakers/octo-process-diagrams';
 import * as i5 from '@progress/kendo-angular-layout';
-import { LayoutModule, TabStripModule, TileLayoutModule } from '@progress/kendo-angular-layout';
+import { LayoutModule, TabStripModule, TileLayoutModule, TileLayoutComponent } from '@progress/kendo-angular-layout';
 import * as i4$2 from '@progress/kendo-angular-dateinputs';
 import { DatePickerModule, DateTimePickerModule } from '@progress/kendo-angular-dateinputs';
 import { BreadCrumbService } from '@meshmakers/shared-services';
@@ -1121,6 +1121,9 @@ class WidgetRegistryService {
      */
     buildBaseConfig(data) {
         const parsedConfig = data.config ? (typeof data.config === 'string' ? JSON.parse(data.config) : data.config) : {};
+        const chromeless = parsedConfig['chromeless'] === true;
+        // Migration: if chromeless is set but no zone, infer zone from chromeless (legacy data)
+        const zone = parsedConfig['zone'] ?? (chromeless ? 'banner' : undefined);
         return {
             id: data.rtId,
             title: data.name,
@@ -1129,7 +1132,8 @@ class WidgetRegistryService {
             colSpan: data.colSpan,
             rowSpan: data.rowSpan,
             configurable: true,
-            chromeless: parsedConfig['chromeless'] === true ? true : undefined
+            chromeless: chromeless || undefined,
+            zone
         };
     }
     /**
@@ -1553,7 +1557,8 @@ class MeshBoardPersistenceService {
             dataSourceRtId: persistenceData.dataSourceRtId ?? '',
             config: JSON.stringify({
                 ...persistenceData.config,
-                ...(widget.chromeless ? { chromeless: true } : {})
+                ...(widget.chromeless ? { chromeless: true } : {}),
+                ...(widget.zone && widget.zone !== 'grid' ? { zone: widget.zone } : {})
             })
         };
         // Only include parent if there are association changes
@@ -1733,7 +1738,7 @@ class MeshBoardGridService {
     wouldCauseOverlap(widgets, widgetId, col, row, colSpan, rowSpan) {
         const widgetCells = this.getCells(col, row, colSpan, rowSpan);
         for (const other of widgets) {
-            if (other.id === widgetId)
+            if (other.id === widgetId || other.zone === 'banner')
                 continue;
             const otherCells = this.getCells(other.col, other.row, other.colSpan, other.rowSpan);
             for (const cell of widgetCells) {
@@ -1778,6 +1783,10 @@ class MeshBoardGridService {
         const movedWidgets = [];
         const occupiedCells = new Set();
         for (const widget of widgets) {
+            // Skip banner-zone widgets — they are rendered outside the grid
+            // and should not participate in grid overlap detection.
+            if (widget.zone === 'banner')
+                continue;
             const cells = this.getCells(widget.col, widget.row, widget.colSpan, widget.rowSpan);
             const hasOverlap = cells.some(c => occupiedCells.has(`${c.row},${c.col}`));
             if (hasOverlap) {
@@ -27806,6 +27815,11 @@ class EditWidgetDialogComponent {
     gridService;
     save = new EventEmitter();
     cancelled = new EventEmitter();
+    zoneOptions = [
+        { text: 'Grid', value: 'grid' },
+        { text: 'Banner', value: 'banner' }
+    ];
+    selectedZoneOption = this.zoneOptions[0];
     form = {
         id: '',
         title: '',
@@ -27816,7 +27830,7 @@ class EditWidgetDialogComponent {
     };
     error = '';
     ngOnInit() {
-        // Copy widget data to form
+        const zone = this.widget.zone ?? 'grid';
         this.form = {
             id: this.widget.id,
             title: this.widget.title,
@@ -27824,20 +27838,30 @@ class EditWidgetDialogComponent {
             row: this.widget.row,
             colSpan: this.widget.colSpan,
             rowSpan: this.widget.rowSpan,
-            chromeless: this.widget.chromeless ?? false
+            chromeless: this.widget.chromeless ?? false,
+            zone
         };
+        this.selectedZoneOption = this.zoneOptions.find(o => o.value === zone) ?? this.zoneOptions[0];
+    }
+    onZoneChange(option) {
+        this.selectedZoneOption = option;
+        this.form.zone = option.value;
+        this.error = '';
     }
     onSave() {
-        // Validate: check for overlaps
-        const wouldOverlap = this.gridService.wouldCauseOverlap(this.widgets, this.form.id, this.form.col, this.form.row, this.form.colSpan, this.form.rowSpan);
-        if (wouldOverlap) {
-            this.error = 'Position overlaps with another widget. Please choose a different position.';
-            return;
-        }
-        // Validate: check bounds
-        if (this.gridService.isOutOfBounds(this.form.col, this.form.colSpan, this.maxColumns)) {
-            this.error = 'Widget extends beyond the grid. Reduce column or width.';
-            return;
+        // Skip grid validation for banner zone widgets
+        if (this.form.zone !== 'banner') {
+            // Validate: check for overlaps
+            const wouldOverlap = this.gridService.wouldCauseOverlap(this.widgets, this.form.id, this.form.col, this.form.row, this.form.colSpan, this.form.rowSpan);
+            if (wouldOverlap) {
+                this.error = 'Position overlaps with another widget. Please choose a different position.';
+                return;
+            }
+            // Validate: check bounds
+            if (this.gridService.isOutOfBounds(this.form.col, this.form.colSpan, this.maxColumns)) {
+                this.error = 'Widget extends beyond the grid. Reduce column or width.';
+                return;
+            }
         }
         this.save.emit(this.form);
     }
@@ -27862,57 +27886,75 @@ class EditWidgetDialogComponent {
           </kendo-textbox>
         </div>
 
-        <div class="form-row">
-          <div class="form-field">
-            <label for="editWidgetCol">Column</label>
-            <kendo-numerictextbox
-              id="editWidgetCol"
-              [(value)]="form.col"
-              [min]="1"
-              [max]="maxColumns"
-              [decimals]="0"
-              [format]="'n0'">
-            </kendo-numerictextbox>
-          </div>
-          <div class="form-field">
-            <label for="editWidgetRow">Row</label>
-            <kendo-numerictextbox
-              id="editWidgetRow"
-              [(value)]="form.row"
-              [min]="1"
-              [decimals]="0"
-              [format]="'n0'">
-            </kendo-numerictextbox>
-          </div>
+        <div class="form-field">
+          <label for="editWidgetZone">Zone</label>
+          <kendo-dropdownlist
+            id="editWidgetZone"
+            [data]="zoneOptions"
+            textField="text"
+            valueField="value"
+            [value]="selectedZoneOption"
+            (valueChange)="onZoneChange($event)">
+          </kendo-dropdownlist>
         </div>
 
-        <div class="form-row">
-          <div class="form-field">
-            <label for="editWidgetColSpan">Width (columns)</label>
-            <kendo-numerictextbox
-              id="editWidgetColSpan"
-              [(value)]="form.colSpan"
-              [min]="1"
-              [max]="maxColumns"
-              [decimals]="0"
-              [format]="'n0'">
-            </kendo-numerictextbox>
+        @if (form.zone !== 'banner') {
+          <div class="form-row">
+            <div class="form-field">
+              <label for="editWidgetCol">Column</label>
+              <kendo-numerictextbox
+                id="editWidgetCol"
+                [(value)]="form.col"
+                [min]="1"
+                [max]="maxColumns"
+                [decimals]="0"
+                [format]="'n0'">
+              </kendo-numerictextbox>
+            </div>
+            <div class="form-field">
+              <label for="editWidgetRow">Row</label>
+              <kendo-numerictextbox
+                id="editWidgetRow"
+                [(value)]="form.row"
+                [min]="1"
+                [decimals]="0"
+                [format]="'n0'">
+              </kendo-numerictextbox>
+            </div>
           </div>
-          <div class="form-field">
-            <label for="editWidgetRowSpan">Height (rows)</label>
-            <kendo-numerictextbox
-              id="editWidgetRowSpan"
-              [(value)]="form.rowSpan"
-              [min]="1"
-              [decimals]="0"
-              [format]="'n0'">
-            </kendo-numerictextbox>
+
+          <div class="form-row">
+            <div class="form-field">
+              <label for="editWidgetColSpan">Width (columns)</label>
+              <kendo-numerictextbox
+                id="editWidgetColSpan"
+                [(value)]="form.colSpan"
+                [min]="1"
+                [max]="maxColumns"
+                [decimals]="0"
+                [format]="'n0'">
+              </kendo-numerictextbox>
+            </div>
+            <div class="form-field">
+              <label for="editWidgetRowSpan">Height (rows)</label>
+              <kendo-numerictextbox
+                id="editWidgetRowSpan"
+                [(value)]="form.rowSpan"
+                [min]="1"
+                [decimals]="0"
+                [format]="'n0'">
+              </kendo-numerictextbox>
+            </div>
           </div>
-        </div>
+        } @else {
+          <div class="form-hint">
+            Banner widgets are rendered as a full-width stack above the grid.
+          </div>
+        }
 
         <div class="form-field form-field-checkbox">
           <input type="checkbox" id="editWidgetChromeless" [(ngModel)]="form.chromeless" />
-          <label for="editWidgetChromeless">Chromeless (hide title bar and border in view mode)</label>
+          <label for="editWidgetChromeless">Hide title bar and border in view mode</label>
         </div>
 
         @if (error) {
@@ -27931,7 +27973,7 @@ class EditWidgetDialogComponent {
       </kendo-dialog-actions>
 
     </kendo-dialog>
-  `, isInline: true, styles: [".edit-widget-form{display:flex;flex-direction:column;gap:16px;padding:8px 0}.form-field{display:flex;flex-direction:column;gap:4px}.form-field label{font-weight:500;font-size:.875rem;color:var(--kendo-color-on-app-surface, #212529)}.form-row{display:flex;gap:16px}.form-row .form-field{flex:1}.form-field-checkbox{flex-direction:row;align-items:center;gap:8px}.form-field-checkbox label{font-weight:400}.form-error{color:var(--kendo-color-error, #dc3545);font-size:.875rem;padding:8px;background:var(--kendo-color-error-subtle, rgba(220, 53, 69, .1));border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$5.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i1$5.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+  `, isInline: true, styles: [".edit-widget-form{display:flex;flex-direction:column;gap:16px;padding:8px 0}.form-field{display:flex;flex-direction:column;gap:4px}.form-field label{font-weight:500;font-size:.875rem;color:var(--kendo-color-on-app-surface, #212529)}.form-row{display:flex;gap:16px}.form-row .form-field{flex:1}.form-field-checkbox{flex-direction:row;align-items:center;gap:8px}.form-field-checkbox label{font-weight:400}.form-hint{font-size:.8rem;opacity:.7;padding:8px 12px;border-left:3px solid var(--kendo-color-primary, #0d6efd);background:var(--kendo-color-surface-alt, rgba(0, 0, 0, .05));border-radius:2px}.form-error{color:var(--kendo-color-error, #dc3545);font-size:.875rem;padding:8px;background:var(--kendo-color-error-subtle, rgba(220, 53, 69, .1));border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$5.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i1$5.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EditWidgetDialogComponent, decorators: [{
             type: Component,
@@ -27940,7 +27982,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         FormsModule,
                         DialogModule,
                         InputsModule,
-                        ButtonsModule
+                        ButtonsModule,
+                        DropDownsModule
                     ], template: `
     <kendo-dialog
       title="Edit Widget"
@@ -27958,57 +28001,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
           </kendo-textbox>
         </div>
 
-        <div class="form-row">
-          <div class="form-field">
-            <label for="editWidgetCol">Column</label>
-            <kendo-numerictextbox
-              id="editWidgetCol"
-              [(value)]="form.col"
-              [min]="1"
-              [max]="maxColumns"
-              [decimals]="0"
-              [format]="'n0'">
-            </kendo-numerictextbox>
-          </div>
-          <div class="form-field">
-            <label for="editWidgetRow">Row</label>
-            <kendo-numerictextbox
-              id="editWidgetRow"
-              [(value)]="form.row"
-              [min]="1"
-              [decimals]="0"
-              [format]="'n0'">
-            </kendo-numerictextbox>
-          </div>
+        <div class="form-field">
+          <label for="editWidgetZone">Zone</label>
+          <kendo-dropdownlist
+            id="editWidgetZone"
+            [data]="zoneOptions"
+            textField="text"
+            valueField="value"
+            [value]="selectedZoneOption"
+            (valueChange)="onZoneChange($event)">
+          </kendo-dropdownlist>
         </div>
 
-        <div class="form-row">
-          <div class="form-field">
-            <label for="editWidgetColSpan">Width (columns)</label>
-            <kendo-numerictextbox
-              id="editWidgetColSpan"
-              [(value)]="form.colSpan"
-              [min]="1"
-              [max]="maxColumns"
-              [decimals]="0"
-              [format]="'n0'">
-            </kendo-numerictextbox>
+        @if (form.zone !== 'banner') {
+          <div class="form-row">
+            <div class="form-field">
+              <label for="editWidgetCol">Column</label>
+              <kendo-numerictextbox
+                id="editWidgetCol"
+                [(value)]="form.col"
+                [min]="1"
+                [max]="maxColumns"
+                [decimals]="0"
+                [format]="'n0'">
+              </kendo-numerictextbox>
+            </div>
+            <div class="form-field">
+              <label for="editWidgetRow">Row</label>
+              <kendo-numerictextbox
+                id="editWidgetRow"
+                [(value)]="form.row"
+                [min]="1"
+                [decimals]="0"
+                [format]="'n0'">
+              </kendo-numerictextbox>
+            </div>
           </div>
-          <div class="form-field">
-            <label for="editWidgetRowSpan">Height (rows)</label>
-            <kendo-numerictextbox
-              id="editWidgetRowSpan"
-              [(value)]="form.rowSpan"
-              [min]="1"
-              [decimals]="0"
-              [format]="'n0'">
-            </kendo-numerictextbox>
+
+          <div class="form-row">
+            <div class="form-field">
+              <label for="editWidgetColSpan">Width (columns)</label>
+              <kendo-numerictextbox
+                id="editWidgetColSpan"
+                [(value)]="form.colSpan"
+                [min]="1"
+                [max]="maxColumns"
+                [decimals]="0"
+                [format]="'n0'">
+              </kendo-numerictextbox>
+            </div>
+            <div class="form-field">
+              <label for="editWidgetRowSpan">Height (rows)</label>
+              <kendo-numerictextbox
+                id="editWidgetRowSpan"
+                [(value)]="form.rowSpan"
+                [min]="1"
+                [decimals]="0"
+                [format]="'n0'">
+              </kendo-numerictextbox>
+            </div>
           </div>
-        </div>
+        } @else {
+          <div class="form-hint">
+            Banner widgets are rendered as a full-width stack above the grid.
+          </div>
+        }
 
         <div class="form-field form-field-checkbox">
           <input type="checkbox" id="editWidgetChromeless" [(ngModel)]="form.chromeless" />
-          <label for="editWidgetChromeless">Chromeless (hide title bar and border in view mode)</label>
+          <label for="editWidgetChromeless">Hide title bar and border in view mode</label>
         </div>
 
         @if (error) {
@@ -28027,7 +28088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       </kendo-dialog-actions>
 
     </kendo-dialog>
-  `, styles: [".edit-widget-form{display:flex;flex-direction:column;gap:16px;padding:8px 0}.form-field{display:flex;flex-direction:column;gap:4px}.form-field label{font-weight:500;font-size:.875rem;color:var(--kendo-color-on-app-surface, #212529)}.form-row{display:flex;gap:16px}.form-row .form-field{flex:1}.form-field-checkbox{flex-direction:row;align-items:center;gap:8px}.form-field-checkbox label{font-weight:400}.form-error{color:var(--kendo-color-error, #dc3545);font-size:.875rem;padding:8px;background:var(--kendo-color-error-subtle, rgba(220, 53, 69, .1));border-radius:4px}\n"] }]
+  `, styles: [".edit-widget-form{display:flex;flex-direction:column;gap:16px;padding:8px 0}.form-field{display:flex;flex-direction:column;gap:4px}.form-field label{font-weight:500;font-size:.875rem;color:var(--kendo-color-on-app-surface, #212529)}.form-row{display:flex;gap:16px}.form-row .form-field{flex:1}.form-field-checkbox{flex-direction:row;align-items:center;gap:8px}.form-field-checkbox label{font-weight:400}.form-hint{font-size:.8rem;opacity:.7;padding:8px 12px;border-left:3px solid var(--kendo-color-primary, #0d6efd);background:var(--kendo-color-surface-alt, rgba(0, 0, 0, .05));border-radius:2px}.form-error{color:var(--kendo-color-error, #dc3545);font-size:.875rem;padding:8px;background:var(--kendo-color-error-subtle, rgba(220, 53, 69, .1));border-radius:4px}\n"] }]
         }], propDecorators: { widget: [{
                 type: Input
             }], widgets: [{
@@ -28078,6 +28139,9 @@ class MeshBoardViewComponent {
     undoIcon = undoIcon;
     copyIcon = copyIcon;
     infoCircleIcon = infoCircleIcon;
+    arrowUpIcon = arrowUpIcon;
+    arrowDownIcon = arrowDownIcon;
+    tileLayout;
     // Edit widget dialog state
     showEditWidgetDialog = false;
     editingWidget = null;
@@ -28110,8 +28174,8 @@ class MeshBoardViewComponent {
     }, ...(ngDevMode ? [{ debugName: "meshBoardPageLink" }] : /* istanbul ignore next */ []));
     // Computed
     hasWidgets = computed(() => this.config().widgets.length > 0, ...(ngDevMode ? [{ debugName: "hasWidgets" }] : /* istanbul ignore next */ []));
-    bannerWidgets = computed(() => this.config().widgets.filter(w => w.chromeless), ...(ngDevMode ? [{ debugName: "bannerWidgets" }] : /* istanbul ignore next */ []));
-    gridWidgets = computed(() => this.config().widgets.filter(w => !w.chromeless), ...(ngDevMode ? [{ debugName: "gridWidgets" }] : /* istanbul ignore next */ []));
+    bannerWidgets = computed(() => this.config().widgets.filter(w => w.zone === 'banner'), ...(ngDevMode ? [{ debugName: "bannerWidgets" }] : /* istanbul ignore next */ []));
+    gridWidgets = computed(() => this.config().widgets.filter(w => w.zone !== 'banner'), ...(ngDevMode ? [{ debugName: "gridWidgets" }] : /* istanbul ignore next */ []));
     hasGridWidgets = computed(() => this.gridWidgets().length > 0, ...(ngDevMode ? [{ debugName: "hasGridWidgets" }] : /* istanbul ignore next */ []));
     canSave = computed(() => this.isEditMode() && !this.isSaving(), ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
     // Time Filter computed signals
@@ -28778,6 +28842,50 @@ class MeshBoardViewComponent {
             this.editModeService.enterEditMode(this.stateService.getConfig());
         }
     }
+    /**
+     * Moves a banner widget up (earlier) in the widgets array.
+     */
+    moveBannerUp(widgetId) {
+        this.stateService.updateConfig(config => {
+            const widgets = [...config.widgets];
+            const index = widgets.findIndex(w => w.id === widgetId);
+            if (index <= 0)
+                return config;
+            // Find previous banner widget
+            for (let i = index - 1; i >= 0; i--) {
+                if (widgets[i].zone === 'banner') {
+                    [widgets[i], widgets[index]] = [widgets[index], widgets[i]];
+                    return { ...config, widgets };
+                }
+            }
+            return config;
+        });
+        if (!this.isEditMode()) {
+            this.editModeService.enterEditMode(this.stateService.getConfig());
+        }
+    }
+    /**
+     * Moves a banner widget down (later) in the widgets array.
+     */
+    moveBannerDown(widgetId) {
+        this.stateService.updateConfig(config => {
+            const widgets = [...config.widgets];
+            const index = widgets.findIndex(w => w.id === widgetId);
+            if (index === -1)
+                return config;
+            // Find next banner widget
+            for (let i = index + 1; i < widgets.length; i++) {
+                if (widgets[i].zone === 'banner') {
+                    [widgets[i], widgets[index]] = [widgets[index], widgets[i]];
+                    return { ...config, widgets };
+                }
+            }
+            return config;
+        });
+        if (!this.isEditMode()) {
+            this.editModeService.enterEditMode(this.stateService.getConfig());
+        }
+    }
     /**
      * Opens the configuration dialog for a widget.
      * Uses the WidgetRegistryService to open a resizable Kendo Window.
@@ -28814,12 +28922,16 @@ class MeshBoardViewComponent {
      * Handles TileLayout reorder events.
      */
     onReorder(event) {
-        // TileLayout handles the DOM reordering, we just need to update our state
-        const config = this.stateService.getConfig();
-        const widgets = [...config.widgets];
-        const [movedWidget] = widgets.splice(event.oldIndex, 1);
-        widgets.splice(event.newIndex, 0, movedWidget);
-        this.stateService.updateConfig(c => ({ ...c, widgets }));
+        // The event provides the new position of the reordered item explicitly,
+        // because the @Input() properties on TileLayoutItemComponent still reflect
+        // the old Angular binding values at event time.
+        // We use event.newCol/newRow for the moved item and read other items'
+        // positions from the TileLayout after Angular has processed the change.
+        this.syncWidgetPositionsFromEvent({
+            movedItemIndex: event.oldIndex,
+            newCol: event.newCol,
+            newRow: event.newRow
+        });
         // Enter edit mode if not already in it
         if (!this.isEditMode()) {
             this.editModeService.enterEditMode(this.stateService.getConfig());
@@ -28829,26 +28941,85 @@ class MeshBoardViewComponent {
      * Handles TileLayout resize events.
      */
     onResize(event) {
-        // Extract the resized item from the event
-        const item = event.item;
-        // Find the widget in our config that matches this item
-        const config = this.stateService.getConfig();
-        const widgetIndex = config.widgets.findIndex(w => w.col === item.col && w.row === item.row);
-        if (widgetIndex !== -1) {
-            const widget = config.widgets[widgetIndex];
-            // Update the widget configuration with new size
-            this.stateService.updateWidget(widget.id, w => ({
-                ...w,
-                col: item.col,
-                row: item.row,
-                colSpan: item.colSpan,
-                rowSpan: item.rowSpan
-            }));
-            // Enter edit mode if not already in it
-            if (!this.isEditMode()) {
-                this.editModeService.enterEditMode(this.stateService.getConfig());
-            }
+        // The event provides the new spans of the resized item explicitly.
+        // We find the resized item by matching its old col/row position.
+        const currentGridWidgets = this.gridWidgets();
+        const resizedIndex = currentGridWidgets.findIndex(w => w.col === event.item.col && w.row === event.item.row);
+        this.syncWidgetPositionsFromEvent({
+            movedItemIndex: resizedIndex,
+            newCol: event.item.col,
+            newRow: event.item.row,
+            newColSpan: event.newColSpan,
+            newRowSpan: event.newRowSpan
+        });
+        // Enter edit mode if not already in it
+        if (!this.isEditMode()) {
+            this.editModeService.enterEditMode(this.stateService.getConfig());
+        }
+    }
+    /**
+     * Syncs widget positions from a TileLayout reorder or resize event.
+     *
+     * At event time, the @Input() properties on TileLayoutItemComponent still
+     * hold their old Angular binding values. The only reliable source for the
+     * changed item's new position are the explicit event properties
+     * (newCol/newRow for reorder, newColSpan/newRowSpan for resize).
+     *
+     * After updating the changed item, we schedule a deferred read of all
+     * item positions from the TileLayout ViewChild (after Angular has processed
+     * the change) to pick up any reflow of other widgets.
+     */
+    syncWidgetPositionsFromEvent(change) {
+        const currentGridWidgets = this.gridWidgets();
+        if (change.movedItemIndex < 0 || change.movedItemIndex >= currentGridWidgets.length) {
+            console.warn('Could not find moved/resized widget at index', change.movedItemIndex);
+            return;
         }
+        const movedWidget = currentGridWidgets[change.movedItemIndex];
+        // Update the moved/resized widget with the explicit event values
+        this.stateService.updateWidget(movedWidget.id, w => ({
+            ...w,
+            col: change.newCol ?? w.col,
+            row: change.newRow ?? w.row,
+            colSpan: change.newColSpan ?? w.colSpan,
+            rowSpan: change.newRowSpan ?? w.rowSpan
+        }));
+        // After Angular processes the change and Kendo re-renders,
+        // read back all item positions to catch any reflow of other widgets.
+        setTimeout(() => this.syncAllWidgetPositionsFromTileLayout(), 0);
+    }
+    /**
+     * Reads the current col/row/colSpan/rowSpan from all TileLayout items
+     * and updates the widget state accordingly.
+     * Called after Angular change detection so @Input() values are current.
+     */
+    syncAllWidgetPositionsFromTileLayout() {
+        if (!this.tileLayout)
+            return;
+        const tileItems = this.tileLayout.items?.toArray();
+        if (!tileItems)
+            return;
+        const currentGridWidgets = this.gridWidgets();
+        if (tileItems.length !== currentGridWidgets.length)
+            return;
+        this.stateService.updateConfig(config => ({
+            ...config,
+            widgets: config.widgets.map(widget => {
+                if (widget.zone === 'banner')
+                    return widget;
+                const gridIndex = currentGridWidgets.findIndex(gw => gw.id === widget.id);
+                if (gridIndex === -1 || gridIndex >= tileItems.length)
+                    return widget;
+                const tileItem = tileItems[gridIndex];
+                return {
+                    ...widget,
+                    col: tileItem.col,
+                    row: tileItem.row,
+                    colSpan: tileItem.colSpan,
+                    rowSpan: tileItem.rowSpan
+                };
+            })
+        }));
     }
     /**
      * Track by function for widget rendering.
@@ -28898,7 +29069,8 @@ class MeshBoardViewComponent {
             row: update.row,
             colSpan: update.colSpan,
             rowSpan: update.rowSpan,
-            chromeless: update.chromeless
+            chromeless: update.chromeless,
+            zone: update.zone
         }));
         this.closeEditWidgetDialog();
         // Enter edit mode if not already in it
@@ -29060,7 +29232,7 @@ class MeshBoardViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MeshBoardViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MeshBoardViewComponent, isStandalone: true, selector: "mm-meshboard-view", providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: MeshBoardViewComponent }], hostDirectives: [{ directive: i1$8.UnsavedChangesDirective }], ngImport: i0, template: "<div class=\"meshboard-view\">\n  @if (isLoading()) {\n    <div class=\"loading-container\">\n      <div class=\"k-loading-mask\">\n        <span class=\"k-loading-text\">Loading MeshBoard...</span>\n        <div class=\"k-loading-image\"></div>\n        <div class=\"k-loading-color\"></div>\n      </div>\n    </div>\n  } @else if (isModelAvailable() === false) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Available</h2>\n        <p>The MeshBoard feature requires the CK model 'System.UI' version 1.0.1 or higher.</p>\n        <p>Please install the required model in your tenant to use this feature.</p>\n      </div>\n    </div>\n  } @else if (notFoundError()) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Found</h2>\n        <p>{{ notFoundError() }}</p>\n        <p>To create a MeshBoard with a Well-Known Name:</p>\n        <ol>\n          <li>Go to the <a [routerLink]=\"meshBoardPageLink()\">MeshBoard</a> page</li>\n          <li>Open Settings</li>\n          <li>Set the \"Well-Known Name\" field</li>\n          <li>Save the MeshBoard</li>\n        </ol>\n      </div>\n    </div>\n  } @else if (isInitialized()) {\n    <!-- Toolbar -->\n    <div class=\"meshboard-toolbar\">\n      <div class=\"toolbar-left\">\n        <h2 class=\"meshboard-title\">{{ config().name }}</h2>\n        @if (config().description) {\n          <span class=\"meshboard-description\">{{ config().description }}</span>\n        }\n      </div>\n\n      <!-- Time Filter (center) -->\n      @if (isTimeFilterEnabled()) {\n        <div class=\"toolbar-center\">\n          <mm-time-range-picker\n            [config]=\"timeFilterConfig()?.pickerConfig ?? {}\"\n            [labels]=\"timeRangeLabels()\"\n            [initialSelection]=\"initialTimeSelection()\"\n            (rangeChange)=\"onTimeRangeChange($event)\"\n            (selectionChange)=\"onTimeSelectionChange($event)\">\n          </mm-time-range-picker>\n          @if (canResetTimeFilter()) {\n            <button\n              kendoButton\n              [svgIcon]=\"undoIcon\"\n              (click)=\"resetTimeFilterToDefault()\"\n              title=\"Reset to default time filter\"\n              fillMode=\"flat\"\n              size=\"small\">\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Entity Selectors -->\n      @if (hasEntitySelectors()) {\n        @if (isTimeFilterEnabled()) {\n          <div class=\"toolbar-separator\"></div>\n        }\n        <div class=\"toolbar-entity-selectors\">\n          <mm-entity-selector-toolbar\n            [entitySelectors]=\"entitySelectorsConfig()\"\n            (entitySelected)=\"onEntitySelectorSelected($event)\"\n            (entityCleared)=\"onEntitySelectorCleared($event)\">\n          </mm-entity-selector-toolbar>\n        </div>\n      }\n\n      @if (isTimeFilterEnabled() || hasEntitySelectors()) {\n        <div class=\"toolbar-separator\"></div>\n      }\n      <div class=\"toolbar-right mm-toolbar-actions\">\n        @if (!isReadonly()) {\n          <!-- Manager Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gridLayoutIcon\"\n            (click)=\"openManager()\"\n            title=\"Manage MeshBoards\"\n            fillMode=\"flat\">\n          </button>\n\n          <!-- Settings Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gearIcon\"\n            (click)=\"openSettings()\"\n            title=\"MeshBoard Settings\"\n            fillMode=\"flat\">\n          </button>\n        }\n\n        <!-- Refresh Button (icon only) -->\n        <button\n          kendoButton\n          [svgIcon]=\"arrowRotateCwIcon\"\n          (click)=\"refresh()\"\n          title=\"Refresh All Widgets\"\n          fillMode=\"flat\">\n        </button>\n\n        @if (!isReadonly()) {\n          <!-- Edit Mode Toggle (icon only) -->\n          @if (!isEditMode()) {\n            <button\n              kendoButton\n              [svgIcon]=\"pencilIcon\"\n              (click)=\"toggleEditMode()\"\n              title=\"Enter Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          } @else {\n            <button\n              kendoButton\n              [svgIcon]=\"xIcon\"\n              (click)=\"cancelEdit()\"\n              title=\"Cancel Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          }\n\n          <!-- Add Widget Button (with text) -->\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            title=\"Add Widget\"\n            themeColor=\"primary\">\n            Add Widget\n          </button>\n\n          <!-- Save Button (with text) -->\n          @if (canSave()) {\n            <button\n              kendoButton\n              [svgIcon]=\"saveIcon\"\n              (click)=\"save()\"\n              [disabled]=\"isSaving()\"\n              title=\"Save MeshBoard\"\n              themeColor=\"primary\">\n              {{ isSaving() ? 'Saving...' : 'Save' }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n\n    <!-- Entity Selector Hint -->\n    @if (unselectedToolbarSelectors().length > 0) {\n      <div class=\"entity-selector-hint\">\n        <kendo-svg-icon [icon]=\"infoCircleIcon\" size=\"medium\"></kendo-svg-icon>\n        <span>\n          Please select\n          @for (selector of unselectedToolbarSelectors(); track selector.id; let last = $last) {\n            <strong>{{ selector.label }}</strong>@if (!last) {, }\n          }\n          to display dashboard data.\n        </span>\n      </div>\n    }\n\n    <!-- Variable Resolution Errors -->\n    @if (variableResolutionErrors().length > 0) {\n      <div class=\"variable-resolution-errors\">\n        <strong>Variable resolution errors:</strong>\n        @for (error of variableResolutionErrors(); track error.variableName) {\n          <span class=\"error-item\">{{ error.variableName }}: {{ error.message }}</span>\n        }\n      </div>\n    }\n\n    <!-- Banner Zone: chromeless widgets rendered outside the grid -->\n    @for (widget of bannerWidgets(); track trackByWidgetId($index, widget)) {\n      <div class=\"banner-zone-item\" [class.banner-edit]=\"isEditMode()\">\n        @if (isEditMode()) {\n          <div class=\"banner-edit-header\">\n            <span class=\"widget-title\">{{ widget.title }}</span>\n            <div class=\"widget-actions\">\n              @if (supportsConfiguration(widget)) {\n                <button\n                  kendoButton\n                  [svgIcon]=\"linkIcon\"\n                  (click)=\"openWidgetConfig(widget)\"\n                  fillMode=\"flat\"\n                  size=\"small\"\n                  class=\"config-widget-btn\"\n                  [class.needs-config]=\"isWidgetUnconfigured(widget)\"\n                  [title]=\"isWidgetUnconfigured(widget) ? 'Configure data source (required)' : 'Configure data source'\">\n                </button>\n              }\n              <button\n                kendoButton\n                [svgIcon]=\"gearIcon\"\n                (click)=\"openEditWidgetDialog(widget)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                class=\"edit-widget-btn\"\n                title=\"Edit position\">\n              </button>\n              <button\n                kendoButton\n                [svgIcon]=\"trashIcon\"\n                (click)=\"removeWidget(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                class=\"remove-widget-btn\"\n                title=\"Delete widget\">\n              </button>\n            </div>\n          </div>\n        }\n        @if (getWidgetComponentType(widget.type); as componentType) {\n          <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n        }\n      </div>\n    }\n\n    <!-- MeshBoard Grid -->\n    @if (hasGridWidgets()) {\n      <kendo-tilelayout\n        [columns]=\"config().columns\"\n        [rowHeight]=\"config().rowHeight\"\n        [gap]=\"config().gap\"\n        [class.has-banners]=\"bannerWidgets().length > 0 && !isEditMode()\"\n        [resizable]=\"isEditMode()\"\n        [reorderable]=\"isEditMode()\"\n        (reorder)=\"onReorder($event)\"\n        (resize)=\"onResize($event)\">\n        @for (widget of gridWidgets(); track trackByWidgetId($index, widget)) {\n          <kendo-tilelayout-item\n            [col]=\"widget.col\"\n            [row]=\"widget.row\"\n            [colSpan]=\"widget.colSpan\"\n            [rowSpan]=\"widget.rowSpan\">\n            <kendo-tilelayout-item-header>\n              <div class=\"widget-header\" [class.unconfigured]=\"isWidgetUnconfigured(widget)\">\n                <span class=\"widget-title\">{{ widget.title }}</span>\n                @if (isWidgetUnconfigured(widget) && !isEditMode()) {\n                  <span class=\"unconfigured-badge\" title=\"Widget needs configuration\">!</span>\n                }\n                @if (isEditMode()) {\n                  <div class=\"widget-actions\" (pointerdown)=\"$event.stopPropagation()\">\n                    @if (supportsConfiguration(widget)) {\n                      <button\n                        kendoButton\n                        [svgIcon]=\"linkIcon\"\n                        (click)=\"openWidgetConfig(widget)\"\n                        fillMode=\"flat\"\n                        size=\"small\"\n                        class=\"config-widget-btn\"\n                        [class.needs-config]=\"isWidgetUnconfigured(widget)\"\n                        [title]=\"isWidgetUnconfigured(widget) ? 'Configure data source (required)' : 'Configure data source'\">\n                      </button>\n                    }\n                    <button\n                      kendoButton\n                      [svgIcon]=\"gearIcon\"\n                      (click)=\"openEditWidgetDialog(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"edit-widget-btn\"\n                      title=\"Edit position\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"copyIcon\"\n                      (click)=\"duplicateWidget(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"duplicate-widget-btn\"\n                      title=\"Duplicate widget\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"trashIcon\"\n                      (click)=\"removeWidget(widget.id)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"remove-widget-btn\"\n                      title=\"Delete widget\">\n                    </button>\n                  </div>\n                }\n              </div>\n            </kendo-tilelayout-item-header>\n            <kendo-tilelayout-item-body>\n              @if (getWidgetComponentType(widget.type); as componentType) {\n                <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n              } @else {\n                <div class=\"widget-error\">\n                  <p>Unknown widget type: {{ widget.type }}</p>\n                </div>\n              }\n            </kendo-tilelayout-item-body>\n          </kendo-tilelayout-item>\n        }\n      </kendo-tilelayout>\n    } @else {\n      <div class=\"empty-state\">\n        <div class=\"empty-state-content\">\n          <kendo-svg-icon [icon]=\"plusIcon\" size=\"xlarge\"></kendo-svg-icon>\n          <h3>No Widgets</h3>\n          <p>Get started by adding widgets to your MeshBoard.</p>\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            themeColor=\"primary\">\n            Add Your First Widget\n          </button>\n        </div>\n      </div>\n    }\n\n    <!-- Edit Widget Dialog -->\n    @if (showEditWidgetDialog && editingWidget) {\n      <mm-edit-widget-dialog\n        [widget]=\"editingWidget\"\n        [widgets]=\"config().widgets\"\n        [maxColumns]=\"config().columns\"\n        [gridService]=\"gridService\"\n        (save)=\"onEditWidgetSave($event)\"\n        (cancelled)=\"closeEditWidgetDialog()\">\n      </mm-edit-widget-dialog>\n    }\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;width:100%}.meshboard-view{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;background-color:var(--kendo-color-surface, #f5f5f5)}.loading-container{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.entity-selector-hint{display:flex;align-items:center;gap:8px;padding:10px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-info, #2196f3) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid color-mix(in srgb,var(--kendo-color-info, #2196f3) 40%,transparent);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.entity-selector-hint strong{color:var(--kendo-color-info, #2196f3)}.variable-resolution-errors{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid var(--kendo-color-error, #f44336);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.variable-resolution-errors strong{color:var(--kendo-color-error, #f44336)}.variable-resolution-errors .error-item{padding:2px 8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 8%,transparent);border-radius:3px;font-family:Consolas,Monaco,monospace;font-size:12px}.model-unavailable{display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:2rem;overflow:hidden;box-sizing:border-box}.model-unavailable .message-card{text-align:center;max-width:500px;padding:2rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:8px;overflow:hidden}.model-unavailable .message-card kendo-svg-icon{color:var(--kendo-color-warning, #ff9800);margin-bottom:1rem}.model-unavailable .message-card h2{margin:1rem 0;color:var(--kendo-color-on-app-surface, #424242)}.model-unavailable .message-card p{margin:.5rem 0;color:var(--kendo-color-subtle, #757575);line-height:1.5}.model-unavailable .message-card ol{text-align:left;margin:1rem 0;padding-left:1.5rem;color:var(--kendo-color-subtle, #757575);line-height:1.8}.model-unavailable .message-card ol li{margin:.25rem 0}.model-unavailable .message-card ol a{color:var(--kendo-color-primary, #3f51b5);text-decoration:none}.model-unavailable .message-card ol a:hover{text-decoration:underline}.meshboard-toolbar{display:flex;justify-content:space-between;align-items:flex-end;padding:1rem 1.5rem;background-color:var(--kendo-color-surface-alt, white);border-bottom:1px solid var(--kendo-color-border, #e0e0e0);gap:1rem;flex-shrink:0}.meshboard-toolbar .toolbar-left{display:flex;align-items:baseline;gap:1rem;flex:1;min-width:0;align-self:center}.meshboard-toolbar .toolbar-left .meshboard-title{margin:0;font-size:1.5rem;font-weight:500;color:var(--kendo-color-on-app-surface, #212121);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-left .meshboard-description{color:var(--kendo-color-subtle, #757575);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-center{display:flex;justify-content:center;align-items:flex-end;flex-shrink:0}.meshboard-toolbar .toolbar-center mm-time-range-picker ::ng-deep .time-range-picker{gap:.5rem}.meshboard-toolbar .toolbar-separator{width:1px;align-self:stretch;background-color:var(--kendo-color-border, #e0e0e0);flex-shrink:0}.meshboard-toolbar .toolbar-entity-selectors{display:flex;align-items:flex-end;flex-shrink:0}.meshboard-toolbar .toolbar-right{display:flex;gap:.5rem;align-items:center;flex-shrink:0}.empty-state{display:flex;align-items:flex-start;justify-content:center;height:calc(100% - 80px);width:100%;padding-top:4rem}.empty-state .empty-state-content{text-align:center;padding:2rem}.empty-state .empty-state-content kendo-svg-icon{color:var(--kendo-color-subtle, #9e9e9e);margin-bottom:1rem}.empty-state .empty-state-content h3{margin:1rem 0 .5rem;color:var(--kendo-color-on-app-surface, #424242);font-size:1.25rem;font-weight:500}.empty-state .empty-state-content p{margin:0 0 1.5rem;color:var(--kendo-color-subtle, #757575)}kendo-tilelayout{padding:1.5rem;overflow:auto;flex:1;min-height:0}.widget-header{display:flex;justify-content:space-between;align-items:center;width:100%;gap:.5rem}.widget-header.unconfigured{background-color:#ff98001a}.widget-header .widget-title{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-header .unconfigured-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background-color:var(--kendo-color-warning, #ff9800);color:#fff;font-size:12px;font-weight:700;flex-shrink:0}.widget-header .widget-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.widget-header .config-widget-btn,.widget-header .edit-widget-btn,.widget-header .remove-widget-btn{opacity:.6;transition:opacity .2s}.widget-header .config-widget-btn:hover,.widget-header .edit-widget-btn:hover,.widget-header .remove-widget-btn:hover{opacity:1}.widget-header .config-widget-btn.needs-config{color:var(--kendo-color-warning, #ff9800);opacity:1}.widget-header .remove-widget-btn{color:var(--kendo-color-error, #f44336)}.widget-error{display:flex;align-items:center;justify-content:center;height:100%;padding:1rem;color:var(--kendo-color-error, #f44336);text-align:center}.meshboard-view.edit-mode kendo-tilelayout-item:hover{box-shadow:0 0 0 2px var(--kendo-color-primary, #3f51b5)}@media(max-width:768px){.meshboard-toolbar{flex-direction:column;align-items:stretch;gap:.75rem}.meshboard-toolbar .toolbar-left{flex-direction:column;align-items:flex-start;gap:.25rem}.meshboard-toolbar .toolbar-right{flex-wrap:wrap;justify-content:flex-end}kendo-tilelayout{padding:1rem}}:host ::ng-deep kendo-tilelayout.has-banners{padding-top:0!important}:host ::ng-deep kendo-tilelayout{padding-bottom:1.5rem!important}.banner-zone-item{margin:0;padding:8px 1rem}.banner-zone-item.banner-edit{border:1px dashed var(--kendo-color-border, rgba(255, 255, 255, .2));border-radius:4px;margin:0 1rem 12px;padding:4px 0}.banner-edit-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;opacity:.7}.banner-edit-header .widget-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}.banner-edit-header .widget-actions{display:flex;gap:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TileLayoutModule }, { kind: "component", type: i5.TileLayoutComponent, selector: "kendo-tilelayout", inputs: ["columns", "columnWidth", "gap", "reorderable", "resizable", "rowHeight", "autoFlow", "navigable"], outputs: ["reorder", "resize"] }, { kind: "component", type: i5.TileLayoutItemBodyComponent, selector: "kendo-tilelayout-item-body" }, { kind: "component", type: i5.TileLayoutItemComponent, selector: "kendo-tilelayout-item", inputs: ["title", "rowSpan", "colSpan", "order", "col", "row", "reorderable", "resizable"] }, { kind: "component", type: i5.TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i1$4.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: EditWidgetDialogComponent, selector: "mm-edit-widget-dialog", inputs: ["widget", "widgets", "maxColumns", "gridService"], outputs: ["save", "cancelled"] }, { kind: "component", type: TimeRangePickerComponent, selector: "mm-time-range-picker", inputs: ["config", "labels", "initialSelection"], outputs: ["rangeChange", "rangeChangeISO", "selectionChange"] }, { kind: "component", type: EntitySelectorToolbarComponent, selector: "mm-entity-selector-toolbar", inputs: ["entitySelectors"], outputs: ["entitySelected", "entityCleared"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MeshBoardViewComponent, isStandalone: true, selector: "mm-meshboard-view", providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: MeshBoardViewComponent }], viewQueries: [{ propertyName: "tileLayout", first: true, predicate: TileLayoutComponent, descendants: true }], hostDirectives: [{ directive: i1$8.UnsavedChangesDirective }], ngImport: i0, template: "<div class=\"meshboard-view\">\n  @if (isLoading()) {\n    <div class=\"loading-container\">\n      <div class=\"k-loading-mask\">\n        <span class=\"k-loading-text\">Loading MeshBoard...</span>\n        <div class=\"k-loading-image\"></div>\n        <div class=\"k-loading-color\"></div>\n      </div>\n    </div>\n  } @else if (isModelAvailable() === false) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Available</h2>\n        <p>The MeshBoard feature requires the CK model 'System.UI' version 1.0.1 or higher.</p>\n        <p>Please install the required model in your tenant to use this feature.</p>\n      </div>\n    </div>\n  } @else if (notFoundError()) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Found</h2>\n        <p>{{ notFoundError() }}</p>\n        <p>To create a MeshBoard with a Well-Known Name:</p>\n        <ol>\n          <li>Go to the <a [routerLink]=\"meshBoardPageLink()\">MeshBoard</a> page</li>\n          <li>Open Settings</li>\n          <li>Set the \"Well-Known Name\" field</li>\n          <li>Save the MeshBoard</li>\n        </ol>\n      </div>\n    </div>\n  } @else if (isInitialized()) {\n    <!-- Toolbar -->\n    <div class=\"meshboard-toolbar\">\n      <div class=\"toolbar-left\">\n        <h2 class=\"meshboard-title\">{{ config().name }}</h2>\n        @if (config().description) {\n          <span class=\"meshboard-description\">{{ config().description }}</span>\n        }\n      </div>\n\n      <!-- Time Filter (center) -->\n      @if (isTimeFilterEnabled()) {\n        <div class=\"toolbar-center\">\n          <mm-time-range-picker\n            [config]=\"timeFilterConfig()?.pickerConfig ?? {}\"\n            [labels]=\"timeRangeLabels()\"\n            [initialSelection]=\"initialTimeSelection()\"\n            (rangeChange)=\"onTimeRangeChange($event)\"\n            (selectionChange)=\"onTimeSelectionChange($event)\">\n          </mm-time-range-picker>\n          @if (canResetTimeFilter()) {\n            <button\n              kendoButton\n              [svgIcon]=\"undoIcon\"\n              (click)=\"resetTimeFilterToDefault()\"\n              title=\"Reset to default time filter\"\n              fillMode=\"flat\"\n              size=\"small\">\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Entity Selectors -->\n      @if (hasEntitySelectors()) {\n        @if (isTimeFilterEnabled()) {\n          <div class=\"toolbar-separator\"></div>\n        }\n        <div class=\"toolbar-entity-selectors\">\n          <mm-entity-selector-toolbar\n            [entitySelectors]=\"entitySelectorsConfig()\"\n            (entitySelected)=\"onEntitySelectorSelected($event)\"\n            (entityCleared)=\"onEntitySelectorCleared($event)\">\n          </mm-entity-selector-toolbar>\n        </div>\n      }\n\n      @if (isTimeFilterEnabled() || hasEntitySelectors()) {\n        <div class=\"toolbar-separator\"></div>\n      }\n      <div class=\"toolbar-right mm-toolbar-actions\">\n        @if (!isReadonly()) {\n          <!-- Manager Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gridLayoutIcon\"\n            (click)=\"openManager()\"\n            title=\"Manage MeshBoards\"\n            fillMode=\"flat\">\n          </button>\n\n          <!-- Settings Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gearIcon\"\n            (click)=\"openSettings()\"\n            title=\"MeshBoard Settings\"\n            fillMode=\"flat\">\n          </button>\n        }\n\n        <!-- Refresh Button (icon only) -->\n        <button\n          kendoButton\n          [svgIcon]=\"arrowRotateCwIcon\"\n          (click)=\"refresh()\"\n          title=\"Refresh All Widgets\"\n          fillMode=\"flat\">\n        </button>\n\n        @if (!isReadonly()) {\n          <!-- Edit Mode Toggle (icon only) -->\n          @if (!isEditMode()) {\n            <button\n              kendoButton\n              [svgIcon]=\"pencilIcon\"\n              (click)=\"toggleEditMode()\"\n              title=\"Enter Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          } @else {\n            <button\n              kendoButton\n              [svgIcon]=\"xIcon\"\n              (click)=\"cancelEdit()\"\n              title=\"Cancel Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          }\n\n          <!-- Add Widget Button (with text) -->\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            title=\"Add Widget\"\n            themeColor=\"primary\">\n            Add Widget\n          </button>\n\n          <!-- Save Button (with text) -->\n          @if (canSave()) {\n            <button\n              kendoButton\n              [svgIcon]=\"saveIcon\"\n              (click)=\"save()\"\n              [disabled]=\"isSaving()\"\n              title=\"Save MeshBoard\"\n              themeColor=\"primary\">\n              {{ isSaving() ? 'Saving...' : 'Save' }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n\n    <!-- Entity Selector Hint -->\n    @if (unselectedToolbarSelectors().length > 0) {\n      <div class=\"entity-selector-hint\">\n        <kendo-svg-icon [icon]=\"infoCircleIcon\" size=\"medium\"></kendo-svg-icon>\n        <span>\n          Please select\n          @for (selector of unselectedToolbarSelectors(); track selector.id; let last = $last) {\n            <strong>{{ selector.label }}</strong>@if (!last) {, }\n          }\n          to display dashboard data.\n        </span>\n      </div>\n    }\n\n    <!-- Variable Resolution Errors -->\n    @if (variableResolutionErrors().length > 0) {\n      <div class=\"variable-resolution-errors\">\n        <strong>Variable resolution errors:</strong>\n        @for (error of variableResolutionErrors(); track error.variableName) {\n          <span class=\"error-item\">{{ error.variableName }}: {{ error.message }}</span>\n        }\n      </div>\n    }\n\n    <!-- Banner Zone: widgets placed in the banner stack above the grid -->\n    @if (isEditMode()) {\n      <div class=\"zone-label banner-zone-label\">Banner Zone</div>\n    }\n    @for (widget of bannerWidgets(); track trackByWidgetId($index, widget); let first = $first; let last = $last) {\n      <div class=\"banner-zone-item\" [class.banner-edit]=\"isEditMode()\">\n        @if (isEditMode()) {\n          <div class=\"banner-edit-header\">\n            <span class=\"widget-title\">{{ widget.title }}</span>\n            <div class=\"widget-actions\">\n              <button\n                kendoButton\n                [svgIcon]=\"arrowUpIcon\"\n                (click)=\"moveBannerUp(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                [disabled]=\"first\"\n                title=\"Move up\">\n              </button>\n              <button\n                kendoButton\n                [svgIcon]=\"arrowDownIcon\"\n                (click)=\"moveBannerDown(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                [disabled]=\"last\"\n                title=\"Move down\">\n              </button>\n              @if (supportsConfiguration(widget)) {\n                <button\n                  kendoButton\n                  [svgIcon]=\"linkIcon\"\n                  (click)=\"openWidgetConfig(widget)\"\n                  fillMode=\"flat\"\n                  size=\"small\"\n                  class=\"config-widget-btn\"\n                  [class.needs-config]=\"isWidgetUnconfigured(widget)\"\n                  [title]=\"isWidgetUnconfigured(widget) ? 'Configure data source (required)' : 'Configure data source'\">\n                </button>\n              }\n              <button\n                kendoButton\n                [svgIcon]=\"gearIcon\"\n                (click)=\"openEditWidgetDialog(widget)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                class=\"edit-widget-btn\"\n                title=\"Edit widget\">\n              </button>\n              <button\n                kendoButton\n                [svgIcon]=\"trashIcon\"\n                (click)=\"removeWidget(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                class=\"remove-widget-btn\"\n                title=\"Delete widget\">\n              </button>\n            </div>\n          </div>\n        }\n        @if (getWidgetComponentType(widget.type); as componentType) {\n          <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n        }\n      </div>\n    }\n\n    <!-- MeshBoard Grid -->\n    @if (isEditMode()) {\n      <div class=\"zone-label grid-zone-label\">Grid Zone</div>\n    }\n    @if (hasGridWidgets()) {\n      <kendo-tilelayout\n        [columns]=\"config().columns\"\n        [rowHeight]=\"config().rowHeight\"\n        [gap]=\"config().gap\"\n        [class.has-banners]=\"bannerWidgets().length > 0 && !isEditMode()\"\n        [resizable]=\"isEditMode()\"\n        [reorderable]=\"isEditMode()\"\n        (reorder)=\"onReorder($event)\"\n        (resize)=\"onResize($event)\">\n        @for (widget of gridWidgets(); track trackByWidgetId($index, widget)) {\n          <kendo-tilelayout-item\n            [col]=\"widget.col\"\n            [row]=\"widget.row\"\n            [colSpan]=\"widget.colSpan\"\n            [rowSpan]=\"widget.rowSpan\">\n            <kendo-tilelayout-item-header>\n              <div class=\"widget-header\"\n                   [class.unconfigured]=\"isWidgetUnconfigured(widget)\"\n                   [class.chromeless-header]=\"widget.chromeless && !isEditMode()\">\n                @if (!(widget.chromeless && !isEditMode())) {\n                  <span class=\"widget-title\">{{ widget.title }}</span>\n                  @if (isWidgetUnconfigured(widget)) {\n                    <span class=\"unconfigured-badge\" title=\"Widget needs configuration\">!</span>\n                  }\n                }\n                @if (isEditMode()) {\n                  <div class=\"widget-actions\" (pointerdown)=\"$event.stopPropagation()\">\n                    @if (supportsConfiguration(widget)) {\n                      <button\n                        kendoButton\n                        [svgIcon]=\"linkIcon\"\n                        (click)=\"openWidgetConfig(widget)\"\n                        fillMode=\"flat\"\n                        size=\"small\"\n                        class=\"config-widget-btn\"\n                        [class.needs-config]=\"isWidgetUnconfigured(widget)\"\n                        [title]=\"isWidgetUnconfigured(widget) ? 'Configure data source (required)' : 'Configure data source'\">\n                      </button>\n                    }\n                    <button\n                      kendoButton\n                      [svgIcon]=\"gearIcon\"\n                      (click)=\"openEditWidgetDialog(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"edit-widget-btn\"\n                      title=\"Edit position\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"copyIcon\"\n                      (click)=\"duplicateWidget(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"duplicate-widget-btn\"\n                      title=\"Duplicate widget\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"trashIcon\"\n                      (click)=\"removeWidget(widget.id)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"remove-widget-btn\"\n                      title=\"Delete widget\">\n                    </button>\n                  </div>\n                }\n              </div>\n            </kendo-tilelayout-item-header>\n            <kendo-tilelayout-item-body>\n              @if (getWidgetComponentType(widget.type); as componentType) {\n                <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n              } @else {\n                <div class=\"widget-error\">\n                  <p>Unknown widget type: {{ widget.type }}</p>\n                </div>\n              }\n            </kendo-tilelayout-item-body>\n          </kendo-tilelayout-item>\n        }\n      </kendo-tilelayout>\n    } @else {\n      <div class=\"empty-state\">\n        <div class=\"empty-state-content\">\n          <kendo-svg-icon [icon]=\"plusIcon\" size=\"xlarge\"></kendo-svg-icon>\n          <h3>No Widgets</h3>\n          <p>Get started by adding widgets to your MeshBoard.</p>\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            themeColor=\"primary\">\n            Add Your First Widget\n          </button>\n        </div>\n      </div>\n    }\n\n    <!-- Edit Widget Dialog -->\n    @if (showEditWidgetDialog && editingWidget) {\n      <mm-edit-widget-dialog\n        [widget]=\"editingWidget\"\n        [widgets]=\"config().widgets\"\n        [maxColumns]=\"config().columns\"\n        [gridService]=\"gridService\"\n        (save)=\"onEditWidgetSave($event)\"\n        (cancelled)=\"closeEditWidgetDialog()\">\n      </mm-edit-widget-dialog>\n    }\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;width:100%}.meshboard-view{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;background-color:var(--kendo-color-surface, #f5f5f5)}.loading-container{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.entity-selector-hint{display:flex;align-items:center;gap:8px;padding:10px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-info, #2196f3) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid color-mix(in srgb,var(--kendo-color-info, #2196f3) 40%,transparent);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.entity-selector-hint strong{color:var(--kendo-color-info, #2196f3)}.variable-resolution-errors{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid var(--kendo-color-error, #f44336);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.variable-resolution-errors strong{color:var(--kendo-color-error, #f44336)}.variable-resolution-errors .error-item{padding:2px 8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 8%,transparent);border-radius:3px;font-family:Consolas,Monaco,monospace;font-size:12px}.model-unavailable{display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:2rem;overflow:hidden;box-sizing:border-box}.model-unavailable .message-card{text-align:center;max-width:500px;padding:2rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:8px;overflow:hidden}.model-unavailable .message-card kendo-svg-icon{color:var(--kendo-color-warning, #ff9800);margin-bottom:1rem}.model-unavailable .message-card h2{margin:1rem 0;color:var(--kendo-color-on-app-surface, #424242)}.model-unavailable .message-card p{margin:.5rem 0;color:var(--kendo-color-subtle, #757575);line-height:1.5}.model-unavailable .message-card ol{text-align:left;margin:1rem 0;padding-left:1.5rem;color:var(--kendo-color-subtle, #757575);line-height:1.8}.model-unavailable .message-card ol li{margin:.25rem 0}.model-unavailable .message-card ol a{color:var(--kendo-color-primary, #3f51b5);text-decoration:none}.model-unavailable .message-card ol a:hover{text-decoration:underline}.meshboard-toolbar{display:flex;justify-content:space-between;align-items:flex-end;padding:1rem 1.5rem;background-color:var(--kendo-color-surface-alt, white);border-bottom:1px solid var(--kendo-color-border, #e0e0e0);gap:1rem;flex-shrink:0}.meshboard-toolbar .toolbar-left{display:flex;align-items:baseline;gap:1rem;flex:1;min-width:0;align-self:center}.meshboard-toolbar .toolbar-left .meshboard-title{margin:0;font-size:1.5rem;font-weight:500;color:var(--kendo-color-on-app-surface, #212121);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-left .meshboard-description{color:var(--kendo-color-subtle, #757575);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-center{display:flex;justify-content:center;align-items:flex-end;flex-shrink:0}.meshboard-toolbar .toolbar-center mm-time-range-picker ::ng-deep .time-range-picker{gap:.5rem}.meshboard-toolbar .toolbar-separator{width:1px;align-self:stretch;background-color:var(--kendo-color-border, #e0e0e0);flex-shrink:0}.meshboard-toolbar .toolbar-entity-selectors{display:flex;align-items:flex-end;flex-shrink:0}.meshboard-toolbar .toolbar-right{display:flex;gap:.5rem;align-items:center;flex-shrink:0}.empty-state{display:flex;align-items:flex-start;justify-content:center;height:calc(100% - 80px);width:100%;padding-top:4rem}.empty-state .empty-state-content{text-align:center;padding:2rem}.empty-state .empty-state-content kendo-svg-icon{color:var(--kendo-color-subtle, #9e9e9e);margin-bottom:1rem}.empty-state .empty-state-content h3{margin:1rem 0 .5rem;color:var(--kendo-color-on-app-surface, #424242);font-size:1.25rem;font-weight:500}.empty-state .empty-state-content p{margin:0 0 1.5rem;color:var(--kendo-color-subtle, #757575)}kendo-tilelayout{padding:1.5rem;overflow:auto;flex:1;min-height:0}.widget-header{display:flex;justify-content:space-between;align-items:center;width:100%;gap:.5rem}.widget-header.unconfigured{background-color:#ff98001a}.widget-header .widget-title{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-header .unconfigured-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background-color:var(--kendo-color-warning, #ff9800);color:#fff;font-size:12px;font-weight:700;flex-shrink:0}.widget-header .widget-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.widget-header .config-widget-btn,.widget-header .edit-widget-btn,.widget-header .remove-widget-btn{opacity:.6;transition:opacity .2s}.widget-header .config-widget-btn:hover,.widget-header .edit-widget-btn:hover,.widget-header .remove-widget-btn:hover{opacity:1}.widget-header .config-widget-btn.needs-config{color:var(--kendo-color-warning, #ff9800);opacity:1}.widget-header .remove-widget-btn{color:var(--kendo-color-error, #f44336)}.widget-error{display:flex;align-items:center;justify-content:center;height:100%;padding:1rem;color:var(--kendo-color-error, #f44336);text-align:center}.meshboard-view.edit-mode kendo-tilelayout-item:hover{box-shadow:0 0 0 2px var(--kendo-color-primary, #3f51b5)}@media(max-width:768px){.meshboard-toolbar{flex-direction:column;align-items:stretch;gap:.75rem}.meshboard-toolbar .toolbar-left{flex-direction:column;align-items:flex-start;gap:.25rem}.meshboard-toolbar .toolbar-right{flex-wrap:wrap;justify-content:flex-end}kendo-tilelayout{padding:1rem}}:host ::ng-deep kendo-tilelayout.has-banners{padding-top:0!important}:host ::ng-deep kendo-tilelayout{padding-bottom:1.5rem!important}.widget-header.chromeless-header{display:none}:host ::ng-deep .k-tilelayout-item-header:has(.chromeless-header){display:none}:host ::ng-deep kendo-tilelayout-item:has(.chromeless-header).k-tilelayout-item,:host ::ng-deep kendo-tilelayout-item:has(.chromeless-header).k-card{border:none;box-shadow:none;background:transparent}.zone-label{font-size:.65rem;text-transform:uppercase;letter-spacing:1.5px;opacity:.4;padding:6px 1rem 2px;font-weight:600}.banner-zone-item{margin:0;padding:8px 1rem}.banner-zone-item.banner-edit{border:1px dashed var(--kendo-color-border, rgba(255, 255, 255, .2));border-radius:4px;margin:0 1rem 12px;padding:4px 0}.banner-edit-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;opacity:.7}.banner-edit-header .widget-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}.banner-edit-header .widget-actions{display:flex;gap:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TileLayoutModule }, { kind: "component", type: i5.TileLayoutComponent, selector: "kendo-tilelayout", inputs: ["columns", "columnWidth", "gap", "reorderable", "resizable", "rowHeight", "autoFlow", "navigable"], outputs: ["reorder", "resize"] }, { kind: "component", type: i5.TileLayoutItemBodyComponent, selector: "kendo-tilelayout-item-body" }, { kind: "component", type: i5.TileLayoutItemComponent, selector: "kendo-tilelayout-item", inputs: ["title", "rowSpan", "colSpan", "order", "col", "row", "reorderable", "resizable"] }, { kind: "component", type: i5.TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i1$4.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: EditWidgetDialogComponent, selector: "mm-edit-widget-dialog", inputs: ["widget", "widgets", "maxColumns", "gridService"], outputs: ["save", "cancelled"] }, { kind: "component", type: TimeRangePickerComponent, selector: "mm-time-range-picker", inputs: ["config", "labels", "initialSelection"], outputs: ["rangeChange", "rangeChangeISO", "selectionChange"] }, { kind: "component", type: EntitySelectorToolbarComponent, selector: "mm-entity-selector-toolbar", inputs: ["entitySelectors"], outputs: ["entitySelected", "entityCleared"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MeshBoardViewComponent, decorators: [{
             type: Component,
@@ -29074,8 +29246,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         EditWidgetDialogComponent,
                         TimeRangePickerComponent,
                         EntitySelectorToolbarComponent
-                    ], hostDirectives: [UnsavedChangesDirective], providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: MeshBoardViewComponent }], template: "<div class=\"meshboard-view\">\n  @if (isLoading()) {\n    <div class=\"loading-container\">\n      <div class=\"k-loading-mask\">\n        <span class=\"k-loading-text\">Loading MeshBoard...</span>\n        <div class=\"k-loading-image\"></div>\n        <div class=\"k-loading-color\"></div>\n      </div>\n    </div>\n  } @else if (isModelAvailable() === false) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Available</h2>\n        <p>The MeshBoard feature requires the CK model 'System.UI' version 1.0.1 or higher.</p>\n        <p>Please install the required model in your tenant to use this feature.</p>\n      </div>\n    </div>\n  } @else if (notFoundError()) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Found</h2>\n        <p>{{ notFoundError() }}</p>\n        <p>To create a MeshBoard with a Well-Known Name:</p>\n        <ol>\n          <li>Go to the <a [routerLink]=\"meshBoardPageLink()\">MeshBoard</a> page</li>\n          <li>Open Settings</li>\n          <li>Set the \"Well-Known Name\" field</li>\n          <li>Save the MeshBoard</li>\n        </ol>\n      </div>\n    </div>\n  } @else if (isInitialized()) {\n    <!-- Toolbar -->\n    <div class=\"meshboard-toolbar\">\n      <div class=\"toolbar-left\">\n        <h2 class=\"meshboard-title\">{{ config().name }}</h2>\n        @if (config().description) {\n          <span class=\"meshboard-description\">{{ config().description }}</span>\n        }\n      </div>\n\n      <!-- Time Filter (center) -->\n      @if (isTimeFilterEnabled()) {\n        <div class=\"toolbar-center\">\n          <mm-time-range-picker\n            [config]=\"timeFilterConfig()?.pickerConfig ?? {}\"\n            [labels]=\"timeRangeLabels()\"\n            [initialSelection]=\"initialTimeSelection()\"\n            (rangeChange)=\"onTimeRangeChange($event)\"\n            (selectionChange)=\"onTimeSelectionChange($event)\">\n          </mm-time-range-picker>\n          @if (canResetTimeFilter()) {\n            <button\n              kendoButton\n              [svgIcon]=\"undoIcon\"\n              (click)=\"resetTimeFilterToDefault()\"\n              title=\"Reset to default time filter\"\n              fillMode=\"flat\"\n              size=\"small\">\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Entity Selectors -->\n      @if (hasEntitySelectors()) {\n        @if (isTimeFilterEnabled()) {\n          <div class=\"toolbar-separator\"></div>\n        }\n        <div class=\"toolbar-entity-selectors\">\n          <mm-entity-selector-toolbar\n            [entitySelectors]=\"entitySelectorsConfig()\"\n            (entitySelected)=\"onEntitySelectorSelected($event)\"\n            (entityCleared)=\"onEntitySelectorCleared($event)\">\n          </mm-entity-selector-toolbar>\n        </div>\n      }\n\n      @if (isTimeFilterEnabled() || hasEntitySelectors()) {\n        <div class=\"toolbar-separator\"></div>\n      }\n      <div class=\"toolbar-right mm-toolbar-actions\">\n        @if (!isReadonly()) {\n          <!-- Manager Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gridLayoutIcon\"\n            (click)=\"openManager()\"\n            title=\"Manage MeshBoards\"\n            fillMode=\"flat\">\n          </button>\n\n          <!-- Settings Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gearIcon\"\n            (click)=\"openSettings()\"\n            title=\"MeshBoard Settings\"\n            fillMode=\"flat\">\n          </button>\n        }\n\n        <!-- Refresh Button (icon only) -->\n        <button\n          kendoButton\n          [svgIcon]=\"arrowRotateCwIcon\"\n          (click)=\"refresh()\"\n          title=\"Refresh All Widgets\"\n          fillMode=\"flat\">\n        </button>\n\n        @if (!isReadonly()) {\n          <!-- Edit Mode Toggle (icon only) -->\n          @if (!isEditMode()) {\n            <button\n              kendoButton\n              [svgIcon]=\"pencilIcon\"\n              (click)=\"toggleEditMode()\"\n              title=\"Enter Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          } @else {\n            <button\n              kendoButton\n              [svgIcon]=\"xIcon\"\n              (click)=\"cancelEdit()\"\n              title=\"Cancel Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          }\n\n          <!-- Add Widget Button (with text) -->\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            title=\"Add Widget\"\n            themeColor=\"primary\">\n            Add Widget\n          </button>\n\n          <!-- Save Button (with text) -->\n          @if (canSave()) {\n            <button\n              kendoButton\n              [svgIcon]=\"saveIcon\"\n              (click)=\"save()\"\n              [disabled]=\"isSaving()\"\n              title=\"Save MeshBoard\"\n              themeColor=\"primary\">\n              {{ isSaving() ? 'Saving...' : 'Save' }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n\n    <!-- Entity Selector Hint -->\n    @if (unselectedToolbarSelectors().length > 0) {\n      <div class=\"entity-selector-hint\">\n        <kendo-svg-icon [icon]=\"infoCircleIcon\" size=\"medium\"></kendo-svg-icon>\n        <span>\n          Please select\n          @for (selector of unselectedToolbarSelectors(); track selector.id; let last = $last) {\n            <strong>{{ selector.label }}</strong>@if (!last) {, }\n          }\n          to display dashboard data.\n        </span>\n      </div>\n    }\n\n    <!-- Variable Resolution Errors -->\n    @if (variableResolutionErrors().length > 0) {\n      <div class=\"variable-resolution-errors\">\n        <strong>Variable resolution errors:</strong>\n        @for (error of variableResolutionErrors(); track error.variableName) {\n          <span class=\"error-item\">{{ error.variableName }}: {{ error.message }}</span>\n        }\n      </div>\n    }\n\n    <!-- Banner Zone: chromeless widgets rendered outside the grid -->\n    @for (widget of bannerWidgets(); track trackByWidgetId($index, widget)) {\n      <div class=\"banner-zone-item\" [class.banner-edit]=\"isEditMode()\">\n        @if (isEditMode()) {\n          <div class=\"banner-edit-header\">\n            <span class=\"widget-title\">{{ widget.title }}</span>\n            <div class=\"widget-actions\">\n              @if (supportsConfiguration(widget)) {\n                <button\n                  kendoButton\n                  [svgIcon]=\"linkIcon\"\n                  (click)=\"openWidgetConfig(widget)\"\n                  fillMode=\"flat\"\n                  size=\"small\"\n                  class=\"config-widget-btn\"\n                  [class.needs-config]=\"isWidgetUnconfigured(widget)\"\n                  [title]=\"isWidgetUnconfigured(widget) ? 'Configure data source (required)' : 'Configure data source'\">\n                </button>\n              }\n              <button\n                kendoButton\n                [svgIcon]=\"gearIcon\"\n                (click)=\"openEditWidgetDialog(widget)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                class=\"edit-widget-btn\"\n                title=\"Edit position\">\n              </button>\n              <button\n                kendoButton\n                [svgIcon]=\"trashIcon\"\n                (click)=\"removeWidget(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                class=\"remove-widget-btn\"\n                title=\"Delete widget\">\n              </button>\n            </div>\n          </div>\n        }\n        @if (getWidgetComponentType(widget.type); as componentType) {\n          <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n        }\n      </div>\n    }\n\n    <!-- MeshBoard Grid -->\n    @if (hasGridWidgets()) {\n      <kendo-tilelayout\n        [columns]=\"config().columns\"\n        [rowHeight]=\"config().rowHeight\"\n        [gap]=\"config().gap\"\n        [class.has-banners]=\"bannerWidgets().length > 0 && !isEditMode()\"\n        [resizable]=\"isEditMode()\"\n        [reorderable]=\"isEditMode()\"\n        (reorder)=\"onReorder($event)\"\n        (resize)=\"onResize($event)\">\n        @for (widget of gridWidgets(); track trackByWidgetId($index, widget)) {\n          <kendo-tilelayout-item\n            [col]=\"widget.col\"\n            [row]=\"widget.row\"\n            [colSpan]=\"widget.colSpan\"\n            [rowSpan]=\"widget.rowSpan\">\n            <kendo-tilelayout-item-header>\n              <div class=\"widget-header\" [class.unconfigured]=\"isWidgetUnconfigured(widget)\">\n                <span class=\"widget-title\">{{ widget.title }}</span>\n                @if (isWidgetUnconfigured(widget) && !isEditMode()) {\n                  <span class=\"unconfigured-badge\" title=\"Widget needs configuration\">!</span>\n                }\n                @if (isEditMode()) {\n                  <div class=\"widget-actions\" (pointerdown)=\"$event.stopPropagation()\">\n                    @if (supportsConfiguration(widget)) {\n                      <button\n                        kendoButton\n                        [svgIcon]=\"linkIcon\"\n                        (click)=\"openWidgetConfig(widget)\"\n                        fillMode=\"flat\"\n                        size=\"small\"\n                        class=\"config-widget-btn\"\n                        [class.needs-config]=\"isWidgetUnconfigured(widget)\"\n                        [title]=\"isWidgetUnconfigured(widget) ? 'Configure data source (required)' : 'Configure data source'\">\n                      </button>\n                    }\n                    <button\n                      kendoButton\n                      [svgIcon]=\"gearIcon\"\n                      (click)=\"openEditWidgetDialog(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"edit-widget-btn\"\n                      title=\"Edit position\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"copyIcon\"\n                      (click)=\"duplicateWidget(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"duplicate-widget-btn\"\n                      title=\"Duplicate widget\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"trashIcon\"\n                      (click)=\"removeWidget(widget.id)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"remove-widget-btn\"\n                      title=\"Delete widget\">\n                    </button>\n                  </div>\n                }\n              </div>\n            </kendo-tilelayout-item-header>\n            <kendo-tilelayout-item-body>\n              @if (getWidgetComponentType(widget.type); as componentType) {\n                <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n              } @else {\n                <div class=\"widget-error\">\n                  <p>Unknown widget type: {{ widget.type }}</p>\n                </div>\n              }\n            </kendo-tilelayout-item-body>\n          </kendo-tilelayout-item>\n        }\n      </kendo-tilelayout>\n    } @else {\n      <div class=\"empty-state\">\n        <div class=\"empty-state-content\">\n          <kendo-svg-icon [icon]=\"plusIcon\" size=\"xlarge\"></kendo-svg-icon>\n          <h3>No Widgets</h3>\n          <p>Get started by adding widgets to your MeshBoard.</p>\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            themeColor=\"primary\">\n            Add Your First Widget\n          </button>\n        </div>\n      </div>\n    }\n\n    <!-- Edit Widget Dialog -->\n    @if (showEditWidgetDialog && editingWidget) {\n      <mm-edit-widget-dialog\n        [widget]=\"editingWidget\"\n        [widgets]=\"config().widgets\"\n        [maxColumns]=\"config().columns\"\n        [gridService]=\"gridService\"\n        (save)=\"onEditWidgetSave($event)\"\n        (cancelled)=\"closeEditWidgetDialog()\">\n      </mm-edit-widget-dialog>\n    }\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;width:100%}.meshboard-view{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;background-color:var(--kendo-color-surface, #f5f5f5)}.loading-container{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.entity-selector-hint{display:flex;align-items:center;gap:8px;padding:10px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-info, #2196f3) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid color-mix(in srgb,var(--kendo-color-info, #2196f3) 40%,transparent);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.entity-selector-hint strong{color:var(--kendo-color-info, #2196f3)}.variable-resolution-errors{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid var(--kendo-color-error, #f44336);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.variable-resolution-errors strong{color:var(--kendo-color-error, #f44336)}.variable-resolution-errors .error-item{padding:2px 8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 8%,transparent);border-radius:3px;font-family:Consolas,Monaco,monospace;font-size:12px}.model-unavailable{display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:2rem;overflow:hidden;box-sizing:border-box}.model-unavailable .message-card{text-align:center;max-width:500px;padding:2rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:8px;overflow:hidden}.model-unavailable .message-card kendo-svg-icon{color:var(--kendo-color-warning, #ff9800);margin-bottom:1rem}.model-unavailable .message-card h2{margin:1rem 0;color:var(--kendo-color-on-app-surface, #424242)}.model-unavailable .message-card p{margin:.5rem 0;color:var(--kendo-color-subtle, #757575);line-height:1.5}.model-unavailable .message-card ol{text-align:left;margin:1rem 0;padding-left:1.5rem;color:var(--kendo-color-subtle, #757575);line-height:1.8}.model-unavailable .message-card ol li{margin:.25rem 0}.model-unavailable .message-card ol a{color:var(--kendo-color-primary, #3f51b5);text-decoration:none}.model-unavailable .message-card ol a:hover{text-decoration:underline}.meshboard-toolbar{display:flex;justify-content:space-between;align-items:flex-end;padding:1rem 1.5rem;background-color:var(--kendo-color-surface-alt, white);border-bottom:1px solid var(--kendo-color-border, #e0e0e0);gap:1rem;flex-shrink:0}.meshboard-toolbar .toolbar-left{display:flex;align-items:baseline;gap:1rem;flex:1;min-width:0;align-self:center}.meshboard-toolbar .toolbar-left .meshboard-title{margin:0;font-size:1.5rem;font-weight:500;color:var(--kendo-color-on-app-surface, #212121);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-left .meshboard-description{color:var(--kendo-color-subtle, #757575);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-center{display:flex;justify-content:center;align-items:flex-end;flex-shrink:0}.meshboard-toolbar .toolbar-center mm-time-range-picker ::ng-deep .time-range-picker{gap:.5rem}.meshboard-toolbar .toolbar-separator{width:1px;align-self:stretch;background-color:var(--kendo-color-border, #e0e0e0);flex-shrink:0}.meshboard-toolbar .toolbar-entity-selectors{display:flex;align-items:flex-end;flex-shrink:0}.meshboard-toolbar .toolbar-right{display:flex;gap:.5rem;align-items:center;flex-shrink:0}.empty-state{display:flex;align-items:flex-start;justify-content:center;height:calc(100% - 80px);width:100%;padding-top:4rem}.empty-state .empty-state-content{text-align:center;padding:2rem}.empty-state .empty-state-content kendo-svg-icon{color:var(--kendo-color-subtle, #9e9e9e);margin-bottom:1rem}.empty-state .empty-state-content h3{margin:1rem 0 .5rem;color:var(--kendo-color-on-app-surface, #424242);font-size:1.25rem;font-weight:500}.empty-state .empty-state-content p{margin:0 0 1.5rem;color:var(--kendo-color-subtle, #757575)}kendo-tilelayout{padding:1.5rem;overflow:auto;flex:1;min-height:0}.widget-header{display:flex;justify-content:space-between;align-items:center;width:100%;gap:.5rem}.widget-header.unconfigured{background-color:#ff98001a}.widget-header .widget-title{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-header .unconfigured-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background-color:var(--kendo-color-warning, #ff9800);color:#fff;font-size:12px;font-weight:700;flex-shrink:0}.widget-header .widget-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.widget-header .config-widget-btn,.widget-header .edit-widget-btn,.widget-header .remove-widget-btn{opacity:.6;transition:opacity .2s}.widget-header .config-widget-btn:hover,.widget-header .edit-widget-btn:hover,.widget-header .remove-widget-btn:hover{opacity:1}.widget-header .config-widget-btn.needs-config{color:var(--kendo-color-warning, #ff9800);opacity:1}.widget-header .remove-widget-btn{color:var(--kendo-color-error, #f44336)}.widget-error{display:flex;align-items:center;justify-content:center;height:100%;padding:1rem;color:var(--kendo-color-error, #f44336);text-align:center}.meshboard-view.edit-mode kendo-tilelayout-item:hover{box-shadow:0 0 0 2px var(--kendo-color-primary, #3f51b5)}@media(max-width:768px){.meshboard-toolbar{flex-direction:column;align-items:stretch;gap:.75rem}.meshboard-toolbar .toolbar-left{flex-direction:column;align-items:flex-start;gap:.25rem}.meshboard-toolbar .toolbar-right{flex-wrap:wrap;justify-content:flex-end}kendo-tilelayout{padding:1rem}}:host ::ng-deep kendo-tilelayout.has-banners{padding-top:0!important}:host ::ng-deep kendo-tilelayout{padding-bottom:1.5rem!important}.banner-zone-item{margin:0;padding:8px 1rem}.banner-zone-item.banner-edit{border:1px dashed var(--kendo-color-border, rgba(255, 255, 255, .2));border-radius:4px;margin:0 1rem 12px;padding:4px 0}.banner-edit-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;opacity:.7}.banner-edit-header .widget-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}.banner-edit-header .widget-actions{display:flex;gap:2px}\n"] }]
-        }], ctorParameters: () => [] });
+                    ], hostDirectives: [UnsavedChangesDirective], providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: MeshBoardViewComponent }], template: "<div class=\"meshboard-view\">\n  @if (isLoading()) {\n    <div class=\"loading-container\">\n      <div class=\"k-loading-mask\">\n        <span class=\"k-loading-text\">Loading MeshBoard...</span>\n        <div class=\"k-loading-image\"></div>\n        <div class=\"k-loading-color\"></div>\n      </div>\n    </div>\n  } @else if (isModelAvailable() === false) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Available</h2>\n        <p>The MeshBoard feature requires the CK model 'System.UI' version 1.0.1 or higher.</p>\n        <p>Please install the required model in your tenant to use this feature.</p>\n      </div>\n    </div>\n  } @else if (notFoundError()) {\n    <div class=\"model-unavailable\">\n      <div class=\"message-card\">\n        <kendo-svg-icon [icon]=\"xIcon\" size=\"xlarge\"></kendo-svg-icon>\n        <h2>MeshBoard Not Found</h2>\n        <p>{{ notFoundError() }}</p>\n        <p>To create a MeshBoard with a Well-Known Name:</p>\n        <ol>\n          <li>Go to the <a [routerLink]=\"meshBoardPageLink()\">MeshBoard</a> page</li>\n          <li>Open Settings</li>\n          <li>Set the \"Well-Known Name\" field</li>\n          <li>Save the MeshBoard</li>\n        </ol>\n      </div>\n    </div>\n  } @else if (isInitialized()) {\n    <!-- Toolbar -->\n    <div class=\"meshboard-toolbar\">\n      <div class=\"toolbar-left\">\n        <h2 class=\"meshboard-title\">{{ config().name }}</h2>\n        @if (config().description) {\n          <span class=\"meshboard-description\">{{ config().description }}</span>\n        }\n      </div>\n\n      <!-- Time Filter (center) -->\n      @if (isTimeFilterEnabled()) {\n        <div class=\"toolbar-center\">\n          <mm-time-range-picker\n            [config]=\"timeFilterConfig()?.pickerConfig ?? {}\"\n            [labels]=\"timeRangeLabels()\"\n            [initialSelection]=\"initialTimeSelection()\"\n            (rangeChange)=\"onTimeRangeChange($event)\"\n            (selectionChange)=\"onTimeSelectionChange($event)\">\n          </mm-time-range-picker>\n          @if (canResetTimeFilter()) {\n            <button\n              kendoButton\n              [svgIcon]=\"undoIcon\"\n              (click)=\"resetTimeFilterToDefault()\"\n              title=\"Reset to default time filter\"\n              fillMode=\"flat\"\n              size=\"small\">\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Entity Selectors -->\n      @if (hasEntitySelectors()) {\n        @if (isTimeFilterEnabled()) {\n          <div class=\"toolbar-separator\"></div>\n        }\n        <div class=\"toolbar-entity-selectors\">\n          <mm-entity-selector-toolbar\n            [entitySelectors]=\"entitySelectorsConfig()\"\n            (entitySelected)=\"onEntitySelectorSelected($event)\"\n            (entityCleared)=\"onEntitySelectorCleared($event)\">\n          </mm-entity-selector-toolbar>\n        </div>\n      }\n\n      @if (isTimeFilterEnabled() || hasEntitySelectors()) {\n        <div class=\"toolbar-separator\"></div>\n      }\n      <div class=\"toolbar-right mm-toolbar-actions\">\n        @if (!isReadonly()) {\n          <!-- Manager Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gridLayoutIcon\"\n            (click)=\"openManager()\"\n            title=\"Manage MeshBoards\"\n            fillMode=\"flat\">\n          </button>\n\n          <!-- Settings Button (icon only) -->\n          <button\n            kendoButton\n            [svgIcon]=\"gearIcon\"\n            (click)=\"openSettings()\"\n            title=\"MeshBoard Settings\"\n            fillMode=\"flat\">\n          </button>\n        }\n\n        <!-- Refresh Button (icon only) -->\n        <button\n          kendoButton\n          [svgIcon]=\"arrowRotateCwIcon\"\n          (click)=\"refresh()\"\n          title=\"Refresh All Widgets\"\n          fillMode=\"flat\">\n        </button>\n\n        @if (!isReadonly()) {\n          <!-- Edit Mode Toggle (icon only) -->\n          @if (!isEditMode()) {\n            <button\n              kendoButton\n              [svgIcon]=\"pencilIcon\"\n              (click)=\"toggleEditMode()\"\n              title=\"Enter Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          } @else {\n            <button\n              kendoButton\n              [svgIcon]=\"xIcon\"\n              (click)=\"cancelEdit()\"\n              title=\"Cancel Edit Mode\"\n              fillMode=\"flat\">\n            </button>\n          }\n\n          <!-- Add Widget Button (with text) -->\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            title=\"Add Widget\"\n            themeColor=\"primary\">\n            Add Widget\n          </button>\n\n          <!-- Save Button (with text) -->\n          @if (canSave()) {\n            <button\n              kendoButton\n              [svgIcon]=\"saveIcon\"\n              (click)=\"save()\"\n              [disabled]=\"isSaving()\"\n              title=\"Save MeshBoard\"\n              themeColor=\"primary\">\n              {{ isSaving() ? 'Saving...' : 'Save' }}\n            </button>\n          }\n        }\n      </div>\n    </div>\n\n    <!-- Entity Selector Hint -->\n    @if (unselectedToolbarSelectors().length > 0) {\n      <div class=\"entity-selector-hint\">\n        <kendo-svg-icon [icon]=\"infoCircleIcon\" size=\"medium\"></kendo-svg-icon>\n        <span>\n          Please select\n          @for (selector of unselectedToolbarSelectors(); track selector.id; let last = $last) {\n            <strong>{{ selector.label }}</strong>@if (!last) {, }\n          }\n          to display dashboard data.\n        </span>\n      </div>\n    }\n\n    <!-- Variable Resolution Errors -->\n    @if (variableResolutionErrors().length > 0) {\n      <div class=\"variable-resolution-errors\">\n        <strong>Variable resolution errors:</strong>\n        @for (error of variableResolutionErrors(); track error.variableName) {\n          <span class=\"error-item\">{{ error.variableName }}: {{ error.message }}</span>\n        }\n      </div>\n    }\n\n    <!-- Banner Zone: widgets placed in the banner stack above the grid -->\n    @if (isEditMode()) {\n      <div class=\"zone-label banner-zone-label\">Banner Zone</div>\n    }\n    @for (widget of bannerWidgets(); track trackByWidgetId($index, widget); let first = $first; let last = $last) {\n      <div class=\"banner-zone-item\" [class.banner-edit]=\"isEditMode()\">\n        @if (isEditMode()) {\n          <div class=\"banner-edit-header\">\n            <span class=\"widget-title\">{{ widget.title }}</span>\n            <div class=\"widget-actions\">\n              <button\n                kendoButton\n                [svgIcon]=\"arrowUpIcon\"\n                (click)=\"moveBannerUp(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                [disabled]=\"first\"\n                title=\"Move up\">\n              </button>\n              <button\n                kendoButton\n                [svgIcon]=\"arrowDownIcon\"\n                (click)=\"moveBannerDown(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                [disabled]=\"last\"\n                title=\"Move down\">\n              </button>\n              @if (supportsConfiguration(widget)) {\n                <button\n                  kendoButton\n                  [svgIcon]=\"linkIcon\"\n                  (click)=\"openWidgetConfig(widget)\"\n                  fillMode=\"flat\"\n                  size=\"small\"\n                  class=\"config-widget-btn\"\n                  [class.needs-config]=\"isWidgetUnconfigured(widget)\"\n                  [title]=\"isWidgetUnconfigured(widget) ? 'Configure data source (required)' : 'Configure data source'\">\n                </button>\n              }\n              <button\n                kendoButton\n                [svgIcon]=\"gearIcon\"\n                (click)=\"openEditWidgetDialog(widget)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                class=\"edit-widget-btn\"\n                title=\"Edit widget\">\n              </button>\n              <button\n                kendoButton\n                [svgIcon]=\"trashIcon\"\n                (click)=\"removeWidget(widget.id)\"\n                fillMode=\"flat\"\n                size=\"small\"\n                class=\"remove-widget-btn\"\n                title=\"Delete widget\">\n              </button>\n            </div>\n          </div>\n        }\n        @if (getWidgetComponentType(widget.type); as componentType) {\n          <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n        }\n      </div>\n    }\n\n    <!-- MeshBoard Grid -->\n    @if (isEditMode()) {\n      <div class=\"zone-label grid-zone-label\">Grid Zone</div>\n    }\n    @if (hasGridWidgets()) {\n      <kendo-tilelayout\n        [columns]=\"config().columns\"\n        [rowHeight]=\"config().rowHeight\"\n        [gap]=\"config().gap\"\n        [class.has-banners]=\"bannerWidgets().length > 0 && !isEditMode()\"\n        [resizable]=\"isEditMode()\"\n        [reorderable]=\"isEditMode()\"\n        (reorder)=\"onReorder($event)\"\n        (resize)=\"onResize($event)\">\n        @for (widget of gridWidgets(); track trackByWidgetId($index, widget)) {\n          <kendo-tilelayout-item\n            [col]=\"widget.col\"\n            [row]=\"widget.row\"\n            [colSpan]=\"widget.colSpan\"\n            [rowSpan]=\"widget.rowSpan\">\n            <kendo-tilelayout-item-header>\n              <div class=\"widget-header\"\n                   [class.unconfigured]=\"isWidgetUnconfigured(widget)\"\n                   [class.chromeless-header]=\"widget.chromeless && !isEditMode()\">\n                @if (!(widget.chromeless && !isEditMode())) {\n                  <span class=\"widget-title\">{{ widget.title }}</span>\n                  @if (isWidgetUnconfigured(widget)) {\n                    <span class=\"unconfigured-badge\" title=\"Widget needs configuration\">!</span>\n                  }\n                }\n                @if (isEditMode()) {\n                  <div class=\"widget-actions\" (pointerdown)=\"$event.stopPropagation()\">\n                    @if (supportsConfiguration(widget)) {\n                      <button\n                        kendoButton\n                        [svgIcon]=\"linkIcon\"\n                        (click)=\"openWidgetConfig(widget)\"\n                        fillMode=\"flat\"\n                        size=\"small\"\n                        class=\"config-widget-btn\"\n                        [class.needs-config]=\"isWidgetUnconfigured(widget)\"\n                        [title]=\"isWidgetUnconfigured(widget) ? 'Configure data source (required)' : 'Configure data source'\">\n                      </button>\n                    }\n                    <button\n                      kendoButton\n                      [svgIcon]=\"gearIcon\"\n                      (click)=\"openEditWidgetDialog(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"edit-widget-btn\"\n                      title=\"Edit position\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"copyIcon\"\n                      (click)=\"duplicateWidget(widget)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"duplicate-widget-btn\"\n                      title=\"Duplicate widget\">\n                    </button>\n                    <button\n                      kendoButton\n                      [svgIcon]=\"trashIcon\"\n                      (click)=\"removeWidget(widget.id)\"\n                      fillMode=\"flat\"\n                      size=\"small\"\n                      class=\"remove-widget-btn\"\n                      title=\"Delete widget\">\n                    </button>\n                  </div>\n                }\n              </div>\n            </kendo-tilelayout-item-header>\n            <kendo-tilelayout-item-body>\n              @if (getWidgetComponentType(widget.type); as componentType) {\n                <ng-container *ngComponentOutlet=\"componentType; inputs: { config: widget }\"></ng-container>\n              } @else {\n                <div class=\"widget-error\">\n                  <p>Unknown widget type: {{ widget.type }}</p>\n                </div>\n              }\n            </kendo-tilelayout-item-body>\n          </kendo-tilelayout-item>\n        }\n      </kendo-tilelayout>\n    } @else {\n      <div class=\"empty-state\">\n        <div class=\"empty-state-content\">\n          <kendo-svg-icon [icon]=\"plusIcon\" size=\"xlarge\"></kendo-svg-icon>\n          <h3>No Widgets</h3>\n          <p>Get started by adding widgets to your MeshBoard.</p>\n          <button\n            kendoButton\n            [svgIcon]=\"plusIcon\"\n            (click)=\"openAddWidget()\"\n            themeColor=\"primary\">\n            Add Your First Widget\n          </button>\n        </div>\n      </div>\n    }\n\n    <!-- Edit Widget Dialog -->\n    @if (showEditWidgetDialog && editingWidget) {\n      <mm-edit-widget-dialog\n        [widget]=\"editingWidget\"\n        [widgets]=\"config().widgets\"\n        [maxColumns]=\"config().columns\"\n        [gridService]=\"gridService\"\n        (save)=\"onEditWidgetSave($event)\"\n        (cancelled)=\"closeEditWidgetDialog()\">\n      </mm-edit-widget-dialog>\n    }\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;width:100%}.meshboard-view{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;background-color:var(--kendo-color-surface, #f5f5f5)}.loading-container{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.entity-selector-hint{display:flex;align-items:center;gap:8px;padding:10px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-info, #2196f3) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid color-mix(in srgb,var(--kendo-color-info, #2196f3) 40%,transparent);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.entity-selector-hint strong{color:var(--kendo-color-info, #2196f3)}.variable-resolution-errors{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;margin-bottom:8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 10%,var(--kendo-color-surface-alt, #fafafa));border:1px solid var(--kendo-color-error, #f44336);border-radius:4px;font-size:13px;color:var(--kendo-color-on-app-surface, #424242)}.variable-resolution-errors strong{color:var(--kendo-color-error, #f44336)}.variable-resolution-errors .error-item{padding:2px 8px;background:color-mix(in srgb,var(--kendo-color-error, #f44336) 8%,transparent);border-radius:3px;font-family:Consolas,Monaco,monospace;font-size:12px}.model-unavailable{display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:2rem;overflow:hidden;box-sizing:border-box}.model-unavailable .message-card{text-align:center;max-width:500px;padding:2rem;background:var(--kendo-color-surface-alt, #fafafa);border:1px solid var(--kendo-color-border, #e0e0e0);border-radius:8px;overflow:hidden}.model-unavailable .message-card kendo-svg-icon{color:var(--kendo-color-warning, #ff9800);margin-bottom:1rem}.model-unavailable .message-card h2{margin:1rem 0;color:var(--kendo-color-on-app-surface, #424242)}.model-unavailable .message-card p{margin:.5rem 0;color:var(--kendo-color-subtle, #757575);line-height:1.5}.model-unavailable .message-card ol{text-align:left;margin:1rem 0;padding-left:1.5rem;color:var(--kendo-color-subtle, #757575);line-height:1.8}.model-unavailable .message-card ol li{margin:.25rem 0}.model-unavailable .message-card ol a{color:var(--kendo-color-primary, #3f51b5);text-decoration:none}.model-unavailable .message-card ol a:hover{text-decoration:underline}.meshboard-toolbar{display:flex;justify-content:space-between;align-items:flex-end;padding:1rem 1.5rem;background-color:var(--kendo-color-surface-alt, white);border-bottom:1px solid var(--kendo-color-border, #e0e0e0);gap:1rem;flex-shrink:0}.meshboard-toolbar .toolbar-left{display:flex;align-items:baseline;gap:1rem;flex:1;min-width:0;align-self:center}.meshboard-toolbar .toolbar-left .meshboard-title{margin:0;font-size:1.5rem;font-weight:500;color:var(--kendo-color-on-app-surface, #212121);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-left .meshboard-description{color:var(--kendo-color-subtle, #757575);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meshboard-toolbar .toolbar-center{display:flex;justify-content:center;align-items:flex-end;flex-shrink:0}.meshboard-toolbar .toolbar-center mm-time-range-picker ::ng-deep .time-range-picker{gap:.5rem}.meshboard-toolbar .toolbar-separator{width:1px;align-self:stretch;background-color:var(--kendo-color-border, #e0e0e0);flex-shrink:0}.meshboard-toolbar .toolbar-entity-selectors{display:flex;align-items:flex-end;flex-shrink:0}.meshboard-toolbar .toolbar-right{display:flex;gap:.5rem;align-items:center;flex-shrink:0}.empty-state{display:flex;align-items:flex-start;justify-content:center;height:calc(100% - 80px);width:100%;padding-top:4rem}.empty-state .empty-state-content{text-align:center;padding:2rem}.empty-state .empty-state-content kendo-svg-icon{color:var(--kendo-color-subtle, #9e9e9e);margin-bottom:1rem}.empty-state .empty-state-content h3{margin:1rem 0 .5rem;color:var(--kendo-color-on-app-surface, #424242);font-size:1.25rem;font-weight:500}.empty-state .empty-state-content p{margin:0 0 1.5rem;color:var(--kendo-color-subtle, #757575)}kendo-tilelayout{padding:1.5rem;overflow:auto;flex:1;min-height:0}.widget-header{display:flex;justify-content:space-between;align-items:center;width:100%;gap:.5rem}.widget-header.unconfigured{background-color:#ff98001a}.widget-header .widget-title{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-header .unconfigured-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background-color:var(--kendo-color-warning, #ff9800);color:#fff;font-size:12px;font-weight:700;flex-shrink:0}.widget-header .widget-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.widget-header .config-widget-btn,.widget-header .edit-widget-btn,.widget-header .remove-widget-btn{opacity:.6;transition:opacity .2s}.widget-header .config-widget-btn:hover,.widget-header .edit-widget-btn:hover,.widget-header .remove-widget-btn:hover{opacity:1}.widget-header .config-widget-btn.needs-config{color:var(--kendo-color-warning, #ff9800);opacity:1}.widget-header .remove-widget-btn{color:var(--kendo-color-error, #f44336)}.widget-error{display:flex;align-items:center;justify-content:center;height:100%;padding:1rem;color:var(--kendo-color-error, #f44336);text-align:center}.meshboard-view.edit-mode kendo-tilelayout-item:hover{box-shadow:0 0 0 2px var(--kendo-color-primary, #3f51b5)}@media(max-width:768px){.meshboard-toolbar{flex-direction:column;align-items:stretch;gap:.75rem}.meshboard-toolbar .toolbar-left{flex-direction:column;align-items:flex-start;gap:.25rem}.meshboard-toolbar .toolbar-right{flex-wrap:wrap;justify-content:flex-end}kendo-tilelayout{padding:1rem}}:host ::ng-deep kendo-tilelayout.has-banners{padding-top:0!important}:host ::ng-deep kendo-tilelayout{padding-bottom:1.5rem!important}.widget-header.chromeless-header{display:none}:host ::ng-deep .k-tilelayout-item-header:has(.chromeless-header){display:none}:host ::ng-deep kendo-tilelayout-item:has(.chromeless-header).k-tilelayout-item,:host ::ng-deep kendo-tilelayout-item:has(.chromeless-header).k-card{border:none;box-shadow:none;background:transparent}.zone-label{font-size:.65rem;text-transform:uppercase;letter-spacing:1.5px;opacity:.4;padding:6px 1rem 2px;font-weight:600}.banner-zone-item{margin:0;padding:8px 1rem}.banner-zone-item.banner-edit{border:1px dashed var(--kendo-color-border, rgba(255, 255, 255, .2));border-radius:4px;margin:0 1rem 12px;padding:4px 0}.banner-edit-header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;opacity:.7}.banner-edit-header .widget-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}.banner-edit-header .widget-actions{display:flex;gap:2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tileLayout: [{
+                type: ViewChild,
+                args: [TileLayoutComponent]
+            }] } });
 
 /*
  * Public API Surface of @meshmakers/octo-meshboard