monkey-style-guide 21.2.23 → 21.2.24

package/fesm2022/monkey-style-guide.mjs

@@ -987,6 +987,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
             }], enableAutofocus: [{
                 type: Input
             }] } });
+function closeOnClickAttribute(value) {
+    if (value === '' || value === true || value === 'true') {
+        return true;
+    }
+    if (value == null || value === false || value === 'false') {
+        return false;
+    }
+    return String(value);
+}
 class MonkeyPopoverDirective {
     set popover(show) {
         if (this._show === show) {
@@ -1026,6 +1035,8 @@ class MonkeyPopoverDirective {
         this.watch = false;
         this.dir = 'ltr';
         this.contextmenu = false;
+        this.closeOnClick = false;
+        this.itemClick = new EventEmitter();
         this._router.events
             .pipe(filter((event) => {
             return event instanceof NavigationStart;
@@ -1038,6 +1049,9 @@ class MonkeyPopoverDirective {
         this.disposePopover();
         this._resizeObserver?.disconnect();
     }
+    close(event) {
+        this.closePopover(event);
+    }
     closePopover(event) {
         if (this._show) {
             this._show = false;
@@ -1050,6 +1064,8 @@ class MonkeyPopoverDirective {
     disposePopover() {
         this._resizeObserver?.disconnect();
         this._resizeObserver = undefined;
+        this._removeContentClick?.();
+        this._removeContentClick = undefined;
         if (this._overlayRef) {
             this._overlayRef.dispose();
             this._overlayRef = undefined;
@@ -1134,6 +1150,42 @@ class MonkeyPopoverDirective {
                 return [];
         }
     }
+    resolveItem(target) {
+        if (!(target instanceof HTMLElement)) {
+            return null;
+        }
+        const content = target.closest('.mecx-popover-content');
+        if (!content) {
+            return null;
+        }
+        const selector = typeof this.closeOnClick === 'string' ? this.closeOnClick : null;
+        const item = selector ? target.closest(selector) : target;
+        return item && content.contains(item) ? item : null;
+    }
+    listenContentClicks() {
+        if (!this._overlayRef || (!this.closeOnClick && !this.itemClick.observed)) {
+            return;
+        }
+        const { overlayElement } = this._overlayRef;
+        const handler = (event) => {
+            const item = this.resolveItem(event.target);
+            if (!item) {
+                return;
+            }
+            this._zone.run(() => {
+                this.itemClick.emit({ event, item });
+                if (this.closeOnClick) {
+                    this.closePopover(event);
+                }
+            });
+        };
+        this._zone.runOutsideAngular(() => {
+            overlayElement.addEventListener('click', handler);
+        });
+        this._removeContentClick = () => {
+            overlayElement.removeEventListener('click', handler);
+        };
+    }
     createPopover(origin, options) {
         if (!this.target) {
             // eslint-disable-next-line no-console
@@ -1179,6 +1231,7 @@ class MonkeyPopoverDirective {
                 this.closePopover();
             });
         }
+        this.listenContentClicks();
         if (this.watch && 'ResizeObserver' in window) {
             this._resizeObserver = new ResizeObserver(() => {
                 this._overlayRef?.updatePosition();
@@ -1187,12 +1240,13 @@ class MonkeyPopoverDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.23", type: MonkeyPopoverDirective, isStandalone: true, selector: "[monkeyPopover]", inputs: { popover: ["monkeyPopover", "popover"], closed: ["monkeyPopoverClosed", "closed"], target: ["monkeyPopoverTarget", "target"], minwidth: ["monkeyPopoverMinwidth", "minwidth"], backdrop: ["monkeyPopoverBackdrop", "backdrop"], watch: ["monkeyPopoverWatch", "watch"], dir: ["monkeyPopoverDir", "dir"], contextmenu: ["monkeyPopoverContextmenu", "contextmenu"], height: ["monkeyPopoverHeight", "height"], title: ["monkeyPopoverTitle", "title"], actions: ["monkeyPopoverActions", "actions"], hideClose: ["monkeyPopoverHideClose", "hideClose", booleanAttribute], hideHeader: ["monkeyPopoverHideHeader", "hideHeader", booleanAttribute], hideActions: ["monkeyPopoverHideActions", "hideActions", booleanAttribute], enableAutofocus: ["monkeyPopoverEnableAutofocus", "enableAutofocus", booleanAttribute] }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.23", type: MonkeyPopoverDirective, isStandalone: true, selector: "[monkeyPopover]", inputs: { popover: ["monkeyPopover", "popover"], closed: ["monkeyPopoverClosed", "closed"], target: ["monkeyPopoverTarget", "target"], minwidth: ["monkeyPopoverMinwidth", "minwidth"], backdrop: ["monkeyPopoverBackdrop", "backdrop"], watch: ["monkeyPopoverWatch", "watch"], dir: ["monkeyPopoverDir", "dir"], contextmenu: ["monkeyPopoverContextmenu", "contextmenu"], height: ["monkeyPopoverHeight", "height"], title: ["monkeyPopoverTitle", "title"], actions: ["monkeyPopoverActions", "actions"], hideClose: ["monkeyPopoverHideClose", "hideClose", booleanAttribute], hideHeader: ["monkeyPopoverHideHeader", "hideHeader", booleanAttribute], hideActions: ["monkeyPopoverHideActions", "hideActions", booleanAttribute], enableAutofocus: ["monkeyPopoverEnableAutofocus", "enableAutofocus", booleanAttribute], closeOnClick: ["monkeyPopoverCloseOnClick", "closeOnClick", closeOnClickAttribute] }, outputs: { itemClick: "monkeyPopoverItemClick" }, exportAs: ["monkeyPopover"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyPopoverDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[monkeyPopover]'
+                    selector: '[monkeyPopover]',
+                    exportAs: 'monkeyPopover'
                 }]
         }], ctorParameters: () => [], propDecorators: { _options: [{
                 type: Optional
@@ -1244,6 +1298,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
             }], enableAutofocus: [{
                 type: Input,
                 args: [{ alias: 'monkeyPopoverEnableAutofocus', transform: booleanAttribute }]
+            }], closeOnClick: [{
+                type: Input,
+                args: [{ alias: 'monkeyPopoverCloseOnClick', transform: closeOnClickAttribute }]
+            }], itemClick: [{
+                type: Output,
+                args: ['monkeyPopoverItemClick']
             }] } });
 
 class MonkeyEcxAddressService {
@@ -3949,7 +4009,7 @@ class MonkeyAutocompleteComponent {
         </monkey-option>
       </ng-template>
     </ng-template>
-  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host input{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "size", "selected"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host input{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus", "monkeyPopoverCloseOnClick"], outputs: ["monkeyPopoverItemClick"], exportAs: ["monkeyPopover"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "size", "selected"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyAutocompleteComponent, decorators: [{
             type: Component,
@@ -4316,7 +4376,7 @@ class MonkeyAutocompleteAddressComponent {
         </div>
       </div>
     </ng-template>
-  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host input{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "size", "selected"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host input{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus", "monkeyPopoverCloseOnClick"], outputs: ["monkeyPopoverItemClick"], exportAs: ["monkeyPopover"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "size", "selected"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyAutocompleteAddressComponent, decorators: [{
             type: Component,
@@ -6717,7 +6777,7 @@ class MonkeyComplexFilterBarComponent {
         </div>
       </div>
     </ng-template>
-  `, isInline: true, styles: [":host{width:100%;display:flex;flex-direction:column;gap:0}:host .complex-filter-bar-row{display:flex;align-items:flex-start;gap:8px;width:100%}:host .complex-filter-bar-row monkey-button{flex-shrink:0;max-height:32px}:host .complex-filter-bar-row monkey-icon-button{flex-shrink:0}:host .complex-filter-bar-row .complex-filter-bar-extra-actions{margin-left:auto}:host .complex-filter-bar-input-wrap{flex:1;min-width:0;position:relative}:host .complex-filter-bar-field{width:100%}:host .complex-filter-bar-input{font-family:monospace!important;font-size:13px!important;resize:none;overflow:hidden;line-height:1.5;min-height:20px;max-height:200px;overflow-y:auto;padding:0}:host .complex-filter-bar-field--textarea .mecx-form-field-body{height:auto;min-height:32px;align-items:flex-start;padding-top:6px;padding-bottom:6px}:host .complex-filter-bar-field--invalid .mecx-form-field-body{border-color:var(--mecx-color-error-700)!important}:host .complex-filter-bar-error-msg{margin:3px 0 0;padding:0 4px;font-size:11px;line-height:1.4;color:var(--mecx-color-error-500, #ef4444)}:host .complex-filter-bar-autocomplete{position:absolute;left:0;right:0;top:calc(100% + 2px);background:#fff;border:1px solid var(--mecx-color-gray-200);border-radius:6px;box-shadow:0 4px 16px #0000001a;z-index:200;max-height:220px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--mecx-color-gray-300) transparent;margin-top:-18px}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;font-size:13px;transition:background-color .1s ease}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item:hover,:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item.active{background:var(--mecx-color-primary-50, #eef2ff)}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge{flex-shrink:0;font-size:10px;font-weight:600;padding:1px 5px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge--field{background:var(--mecx-color-gray-100);color:var(--mecx-color-gray-600)}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge--logical{background:var(--mecx-color-primary-100, #e0e7ff);color:var(--mecx-color-primary-700, #4338ca)}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge--value{background:#d1fae5;color:#065f46}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-label{font-weight:500;color:var(--mecx-color-gray-900);flex-shrink:0}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-sublabel{font-family:monospace;font-size:12px;color:var(--mecx-color-gray-500)}.complex-filter-bar-docs-panel{min-width:360px;max-width:480px;display:flex;flex-direction:column}.complex-filter-bar-docs-panel .complex-filter-bar-docs-header{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--mecx-color-gray-200);font-size:14px;font-weight:600;line-height:24px;color:var(--mecx-color-gray-700)}.complex-filter-bar-docs-panel .complex-filter-bar-docs-body{max-height:420px;overflow-y:auto;padding:8px 0;scrollbar-width:thin;scrollbar-color:var(--mecx-color-gray-300) transparent}.complex-filter-bar-docs-panel .complex-filter-bar-docs-field{padding:8px 16px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-field+.complex-filter-bar-docs-field{border-top:1px solid var(--mecx-color-gray-100)}.complex-filter-bar-docs-panel .complex-filter-bar-docs-field-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.complex-filter-bar-docs-panel .complex-filter-bar-docs-key{font-family:monospace;font-size:12px;background:var(--mecx-color-gray-100);color:var(--mecx-color-gray-800);padding:2px 6px;border-radius:4px;flex-shrink:0}.complex-filter-bar-docs-panel .complex-filter-bar-docs-label{font-size:13px;font-weight:600;color:var(--mecx-color-gray-800)}.complex-filter-bar-docs-panel .complex-filter-bar-docs-operators{display:flex;gap:4px;margin-left:auto;flex-shrink:0}.complex-filter-bar-docs-panel .complex-filter-bar-docs-op{font-family:monospace;font-size:12px;font-weight:700;background:var(--mecx-color-primary-50, #eef2ff);color:var(--mecx-color-primary-600, #4f46e5);padding:1px 5px;border-radius:4px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-explanation{margin:4px 0 0;font-size:12px;color:var(--mecx-color-gray-500);line-height:1.5}.complex-filter-bar-docs-panel .complex-filter-bar-docs-values{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-value-badge{font-family:monospace;font-size:11px;background:#d1fae5;color:#065f46;padding:1px 6px;border-radius:4px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-actions{display:flex;justify-content:flex-end;padding:8px 12px;border-top:1px solid var(--mecx-color-gray-200)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "directive", type: MonkeyPrefixDirective, selector: "monkey-prefix" }, { kind: "directive", type: MonkeyInfoDirective, selector: "monkey-info" }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus"] }] }); }
+  `, isInline: true, styles: [":host{width:100%;display:flex;flex-direction:column;gap:0}:host .complex-filter-bar-row{display:flex;align-items:flex-start;gap:8px;width:100%}:host .complex-filter-bar-row monkey-button{flex-shrink:0;max-height:32px}:host .complex-filter-bar-row monkey-icon-button{flex-shrink:0}:host .complex-filter-bar-row .complex-filter-bar-extra-actions{margin-left:auto}:host .complex-filter-bar-input-wrap{flex:1;min-width:0;position:relative}:host .complex-filter-bar-field{width:100%}:host .complex-filter-bar-input{font-family:monospace!important;font-size:13px!important;resize:none;overflow:hidden;line-height:1.5;min-height:20px;max-height:200px;overflow-y:auto;padding:0}:host .complex-filter-bar-field--textarea .mecx-form-field-body{height:auto;min-height:32px;align-items:flex-start;padding-top:6px;padding-bottom:6px}:host .complex-filter-bar-field--invalid .mecx-form-field-body{border-color:var(--mecx-color-error-700)!important}:host .complex-filter-bar-error-msg{margin:3px 0 0;padding:0 4px;font-size:11px;line-height:1.4;color:var(--mecx-color-error-500, #ef4444)}:host .complex-filter-bar-autocomplete{position:absolute;left:0;right:0;top:calc(100% + 2px);background:#fff;border:1px solid var(--mecx-color-gray-200);border-radius:6px;box-shadow:0 4px 16px #0000001a;z-index:200;max-height:220px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--mecx-color-gray-300) transparent;margin-top:-18px}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;font-size:13px;transition:background-color .1s ease}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item:hover,:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item.active{background:var(--mecx-color-primary-50, #eef2ff)}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge{flex-shrink:0;font-size:10px;font-weight:600;padding:1px 5px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge--field{background:var(--mecx-color-gray-100);color:var(--mecx-color-gray-600)}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge--logical{background:var(--mecx-color-primary-100, #e0e7ff);color:var(--mecx-color-primary-700, #4338ca)}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-badge--value{background:#d1fae5;color:#065f46}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-label{font-weight:500;color:var(--mecx-color-gray-900);flex-shrink:0}:host .complex-filter-bar-autocomplete .complex-filter-bar-autocomplete-item .complex-filter-bar-autocomplete-sublabel{font-family:monospace;font-size:12px;color:var(--mecx-color-gray-500)}.complex-filter-bar-docs-panel{min-width:360px;max-width:480px;display:flex;flex-direction:column}.complex-filter-bar-docs-panel .complex-filter-bar-docs-header{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--mecx-color-gray-200);font-size:14px;font-weight:600;line-height:24px;color:var(--mecx-color-gray-700)}.complex-filter-bar-docs-panel .complex-filter-bar-docs-body{max-height:420px;overflow-y:auto;padding:8px 0;scrollbar-width:thin;scrollbar-color:var(--mecx-color-gray-300) transparent}.complex-filter-bar-docs-panel .complex-filter-bar-docs-field{padding:8px 16px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-field+.complex-filter-bar-docs-field{border-top:1px solid var(--mecx-color-gray-100)}.complex-filter-bar-docs-panel .complex-filter-bar-docs-field-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.complex-filter-bar-docs-panel .complex-filter-bar-docs-key{font-family:monospace;font-size:12px;background:var(--mecx-color-gray-100);color:var(--mecx-color-gray-800);padding:2px 6px;border-radius:4px;flex-shrink:0}.complex-filter-bar-docs-panel .complex-filter-bar-docs-label{font-size:13px;font-weight:600;color:var(--mecx-color-gray-800)}.complex-filter-bar-docs-panel .complex-filter-bar-docs-operators{display:flex;gap:4px;margin-left:auto;flex-shrink:0}.complex-filter-bar-docs-panel .complex-filter-bar-docs-op{font-family:monospace;font-size:12px;font-weight:700;background:var(--mecx-color-primary-50, #eef2ff);color:var(--mecx-color-primary-600, #4f46e5);padding:1px 5px;border-radius:4px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-explanation{margin:4px 0 0;font-size:12px;color:var(--mecx-color-gray-500);line-height:1.5}.complex-filter-bar-docs-panel .complex-filter-bar-docs-values{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-value-badge{font-family:monospace;font-size:11px;background:#d1fae5;color:#065f46;padding:1px 6px;border-radius:4px}.complex-filter-bar-docs-panel .complex-filter-bar-docs-actions{display:flex;justify-content:flex-end;padding:8px 12px;border-top:1px solid var(--mecx-color-gray-200)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "directive", type: MonkeyPrefixDirective, selector: "monkey-prefix" }, { kind: "directive", type: MonkeyInfoDirective, selector: "monkey-info" }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus", "monkeyPopoverCloseOnClick"], outputs: ["monkeyPopoverItemClick"], exportAs: ["monkeyPopover"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyComplexFilterBarComponent, decorators: [{
             type: Component,
@@ -8633,7 +8693,7 @@ class MonkeyInputDateRangeComponent {
       >
       </monkey-date-range>
     </ng-template>
-  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host.mecx-input-date-range-disabled{pointer-events:none;color:var(--mecx-color-gray-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus"] }, { kind: "component", type: MonkeyDateRangeComponent, selector: "monkey-date-range", inputs: ["startDate", "endDate", "hideQuickAction", "hideHeader", "hideActions", "hideSecondCalendar", "allowFastActionOnHeader", "minDate", "maxDate", "id"], outputs: ["onCancel", "onDate"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
+  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host.mecx-input-date-range-disabled{pointer-events:none;color:var(--mecx-color-gray-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus", "monkeyPopoverCloseOnClick"], outputs: ["monkeyPopoverItemClick"], exportAs: ["monkeyPopover"] }, { kind: "component", type: MonkeyDateRangeComponent, selector: "monkey-date-range", inputs: ["startDate", "endDate", "hideQuickAction", "hideHeader", "hideActions", "hideSecondCalendar", "allowFastActionOnHeader", "minDate", "maxDate", "id"], outputs: ["onCancel", "onDate"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyInputDateRangeComponent, decorators: [{
             type: Component,
@@ -12013,7 +12073,7 @@ class MonkeyTableComponent {
                 useFactory: (table) => table.virtualStrategy,
                 deps: [MonkeyTableComponent]
             }
-        ], queries: [{ propertyName: "_columns", predicate: (MonkeyTableColumnDirective), isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: MonkeyTableEmptyDirective, descendants: true, isSignal: true }, { propertyName: "loadingTemplate", first: true, predicate: MonkeyTableLoadingDirective, descendants: true, isSignal: true }, { propertyName: "rowDetailTemplate", first: true, predicate: (MonkeyTableRowDetailDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "plainScroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "headClip", first: true, predicate: ["headClip"], descendants: true, isSignal: true }, { propertyName: "virtualViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mecx-table-main\">\n  <div class=\"mecx-table-viewport\">\n    @if (virtual()) {\n      <div #headClip class=\"mecx-table-head-clip\">\n        <table\n          class=\"mecx-table-grid mecx-table-grid--head\"\n          [style.width.px]=\"totalWidth() || null\"\n        >\n          <ng-container [ngTemplateOutlet]=\"tableHead\" />\n        </table>\n      </div>\n\n      <cdk-virtual-scroll-viewport\n        class=\"mecx-table-scroll mecx-table-scroll--virtual\"\n        [itemSize]=\"rowHeight()\"\n        [minBufferPx]=\"rowHeight() * 6\"\n        [maxBufferPx]=\"rowHeight() * 12\"\n        [style.height]=\"effectiveHeight()\"\n        role=\"region\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.tabindex]=\"overflowing() ? 0 : null\"\n      >\n        <table\n          class=\"mecx-table-grid\"\n          [attr.aria-rowcount]=\"rows().length + 1\"\n          [style.width.px]=\"totalWidth() || null\"\n        >\n          <ng-container [ngTemplateOutlet]=\"colGroup\" />\n          <tbody class=\"mecx-table-body\">\n            <ng-container\n              *cdkVirtualFor=\"\n                let view of renderRows();\n                trackBy: trackKey;\n                templateCacheSize: 30\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"dataRow\"\n                [ngTemplateOutletContext]=\"{ $implicit: view }\"\n              />\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    } @else {\n      <div\n        #scroller\n        class=\"mecx-table-scroll\"\n        [class.mecx-table-scroll--vertical]=\"!!effectiveHeight()\"\n        [style.max-height]=\"effectiveHeight() || null\"\n        role=\"region\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.tabindex]=\"overflowing() ? 0 : null\"\n      >\n        <table class=\"mecx-table-grid\">\n          <ng-container [ngTemplateOutlet]=\"tableHead\" />\n          <tbody class=\"mecx-table-body\">\n            @if (loading()) {\n              @if (loadingTemplate(); as tpl) {\n                <tr class=\"mecx-table-row\">\n                  <td\n                    class=\"mecx-table-cell mecx-table-cell--wide\"\n                    [attr.colspan]=\"slots().length\"\n                  >\n                    <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n                  </td>\n                </tr>\n              } @else {\n                @for (line of skeletonRange(); track line) {\n                  <tr class=\"mecx-table-row\" aria-hidden=\"true\">\n                    @for (slot of slots(); track slot.key) {\n                      <td\n                        class=\"mecx-table-cell\"\n                        [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n                        [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n                        [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n                        [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n                        [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n                      >\n                        <span class=\"mecx-table-skeleton\"></span>\n                      </td>\n                    }\n                  </tr>\n                }\n              }\n            } @else if (rows().length === 0) {\n              <tr class=\"mecx-table-row\">\n                <td\n                  class=\"mecx-table-cell mecx-table-cell--wide\"\n                  [attr.colspan]=\"slots().length\"\n                >\n                  @if (emptyTemplate(); as tpl) {\n                    <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n                  } @else {\n                    <p class=\"mecx-table-empty\">{{ labels().empty }}</p>\n                  }\n                </td>\n              </tr>\n            } @else {\n              @for (view of renderRows(); track view.key) {\n                <ng-container\n                  [ngTemplateOutlet]=\"dataRow\"\n                  [ngTemplateOutletContext]=\"{ $implicit: view }\"\n                />\n              }\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n\n    @if (pinnedStartWidth() > 0) {\n      <div\n        class=\"mecx-table-pinned-shadow\"\n        [class.mecx-table-pinned-shadow--visible]=\"!atStart()\"\n        [style.left.px]=\"0\"\n        [style.width.px]=\"pinnedStartWidth()\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n    @if (pinnedEndWidth() > 0) {\n      <div\n        class=\"mecx-table-pinned-shadow mecx-table-pinned-shadow--end\"\n        [class.mecx-table-pinned-shadow--visible]=\"!atEnd()\"\n        [style.right.px]=\"0\"\n        [style.width.px]=\"pinnedEndWidth()\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n\n    @if (pinnedStartWidth() === 0) {\n      <div\n        class=\"mecx-table-fade mecx-table-fade--start\"\n        [class.mecx-table-fade--visible]=\"!atStart()\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n    <div\n      class=\"mecx-table-fade\"\n      [class.mecx-table-fade--visible]=\"!atEnd()\"\n      [style.right.px]=\"pinnedEndWidth()\"\n      aria-hidden=\"true\"\n    ></div>\n  </div>\n\n  @if (effectiveHeight() && scrollTarget(); as target) {\n    <div class=\"mecx-table-scrollbar-vertical\">\n      <monkey-scrollbar orientation=\"vertical\" [target]=\"target\" />\n    </div>\n  }\n</div>\n\n@if (scrollTarget(); as target) {\n  <div class=\"mecx-table-scrollbar\">\n    <monkey-scrollbar orientation=\"horizontal\" [target]=\"target\" />\n  </div>\n}\n\n<div class=\"mecx-table-footer\">\n  <ng-content select=\"monkey-pagination-size\"></ng-content>\n  <div class=\"mecx-table-footer-actions\">\n    <ng-content select=\"monkey-pagination-label\"></ng-content>\n    <ng-content select=\"monkey-pagination-action\"></ng-content>\n  </div>\n</div>\n\n<ng-template #colGroup>\n  <colgroup>\n    @for (slot of slots(); track slot.key) {\n      <col [style.width]=\"slot.width\" />\n    }\n  </colgroup>\n</ng-template>\n\n<ng-template #tableHead>\n  @if (caption()) {\n    <caption class=\"mecx-table-caption\">\n      {{\n        caption()\n      }}\n    </caption>\n  }\n\n  <ng-container [ngTemplateOutlet]=\"colGroup\" />\n\n  <thead>\n    <tr class=\"mecx-table-row\">\n      @for (slot of slots(); track slot.key) {\n        <th\n          scope=\"col\"\n          class=\"mecx-table-cell mecx-table-cell--head\"\n          [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n          [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n          [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n          [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n          [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n          [class.mecx-table-cell--active]=\"openMenu() === slot.key\"\n          [attr.aria-sort]=\"ariaSortFor(slot.column)\"\n        >\n          @switch (slot.kind) {\n            @case ('selection') {\n              <label class=\"mecx-table-select-all\">\n                <span class=\"mecx-sr-only\">{{ labels().selectAll }}</span>\n                <monkey-checkbox\n                  size=\"sm\"\n                  [value]=\"allSelected()\"\n                  [indeterminate]=\"someSelected()\"\n                  [disabled]=\"loading() || !hasSelectable()\"\n                  (onChange)=\"toggleAllRows()\"\n                />\n              </label>\n            }\n            @case ('expand') {\n              <span class=\"mecx-sr-only\">{{ labels().detail }}</span>\n            }\n            @default {\n              @if (hasMenu(slot.column)) {\n                <button\n                  #trigger\n                  type=\"button\"\n                  class=\"mecx-table-heading mecx-table-trigger\"\n                  aria-haspopup=\"menu\"\n                  [attr.aria-expanded]=\"openMenu() === slot.key\"\n                  (click)=\"toggleMenu(slot.column)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"heading\"\n                    [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n                  />\n                </button>\n\n                <ng-template\n                  [monkeyPopover]=\"openMenu() === slot.key\"\n                  [monkeyPopoverTarget]=\"trigger\"\n                  [monkeyPopoverClosed]=\"closeMenu\"\n                  monkeyPopoverDir=\"ltr\"\n                  [monkeyPopoverHideHeader]=\"true\"\n                >\n                  <div class=\"mecx-table-menu\" (click)=\"openMenu.set(null)\">\n                    @if (slot.column.sortable()) {\n                      @let sortText = sortLabels(slot.column);\n                      <monkey-option\n                        [selected]=\"isSortedBy(slot.column, 'ascending')\"\n                        (click)=\"sortBy(slot.column, 'ascending')\"\n                      >\n                        <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n                        {{ sortText.asc }}\n                      </monkey-option>\n                      <monkey-option\n                        [selected]=\"isSortedBy(slot.column, 'descending')\"\n                        (click)=\"sortBy(slot.column, 'descending')\"\n                      >\n                        <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n                        {{ sortText.desc }}\n                      </monkey-option>\n                    }\n\n                    @if (canReorder(slot.column)) {\n                      @if (slot.column.sortable()) {\n                        <monkey-divider />\n                      }\n                      <monkey-option\n                        [disabled]=\"!canMove(slot.column, -1)\"\n                        (click)=\"move(slot.column, -1)\"\n                      >\n                        <i class=\"mk-i mk-i-arrow-line-left sm\" aria-hidden=\"true\"></i>\n                        {{ labels().moveLeft }}\n                      </monkey-option>\n                      <monkey-option\n                        [disabled]=\"!canMove(slot.column, 1)\"\n                        (click)=\"move(slot.column, 1)\"\n                      >\n                        <i class=\"mk-i mk-i-arrow-line-right sm\" aria-hidden=\"true\"></i>\n                        {{ labels().moveRight }}\n                      </monkey-option>\n                    }\n\n                    @if (canHide(slot.column) || canPin(slot.column)) {\n                      @if (slot.column.sortable() || canReorder(slot.column)) {\n                        <monkey-divider />\n                      }\n                      @if (canHide(slot.column)) {\n                        <monkey-option [disabled]=\"isLastColumn()\" (click)=\"hide(slot.column)\">\n                          <i class=\"mk-i mk-i-eye-closed sm\" aria-hidden=\"true\"></i>\n                          {{ labels().hide }}\n                        </monkey-option>\n                      }\n                      @if (canPin(slot.column)) {\n                        <monkey-option (click)=\"togglePin(slot.column)\">\n                          <i class=\"mk-i mk-i-pin-navigation sm\" aria-hidden=\"true\"></i>\n                          {{ slot.column.pinned() !== 'none' ? labels().unpin : labels().pin }}\n                        </monkey-option>\n                      }\n                    }\n                  </div>\n                </ng-template>\n              } @else {\n                <div class=\"mecx-table-heading\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"heading\"\n                    [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n                  />\n                </div>\n              }\n            }\n          }\n        </th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #dataRow let-view>\n  <tr\n    class=\"mecx-table-row mecx-table-row--data\"\n    [class.mecx-table-row--odd]=\"view.index % 2 === 1\"\n    [class.mecx-table-row--selected]=\"view.selected\"\n    [attr.aria-rowindex]=\"virtual() ? view.index + 2 : null\"\n    [style.height.px]=\"virtual() ? rowHeight() : null\"\n  >\n    @for (slot of slots(); track slot.key) {\n      <td\n        class=\"mecx-table-cell\"\n        [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n        [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n        [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n        [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n        [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n      >\n        @switch (slot.kind) {\n          @case ('selection') {\n            <label class=\"mecx-table-select-row\" [attr.title]=\"view.blockedReason\">\n              <span class=\"mecx-sr-only\">{{ view.selectLabel }}</span>\n              <monkey-checkbox\n                size=\"sm\"\n                [value]=\"view.selected\"\n                [disabled]=\"!!view.blockedReason\"\n                (onChange)=\"toggleRow(view)\"\n              />\n            </label>\n          }\n          @case ('expand') {\n            <monkey-icon-button\n              type=\"tertiary\"\n              size=\"sm\"\n              icon=\"arrow-right\"\n              class=\"mecx-table-expand-toggle\"\n              [class.mecx-table-expand-toggle--open]=\"view.open\"\n              [attr.aria-expanded]=\"view.open\"\n              [attr.aria-label]=\"view.expandLabel\"\n              (click)=\"toggleOpen(view)\"\n            />\n          }\n          @default {\n            @if (slot.column.cell(); as cell) {\n              <ng-container\n                [ngTemplateOutlet]=\"cell.template\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: view.row,\n                  row: view.row,\n                  index: view.index,\n                  first: view.index === 0,\n                  last: view.index === rows().length - 1\n                }\"\n              />\n            }\n          }\n        }\n      </td>\n    }\n  </tr>\n\n  @if (expandable() && view.open) {\n    @if (rowDetailTemplate(); as tpl) {\n      <tr\n        class=\"mecx-table-row mecx-table-row--detail\"\n        [class.mecx-table-row--selected]=\"view.selected\"\n      >\n        <td class=\"mecx-table-cell mecx-table-cell--wide\" [attr.colspan]=\"slots().length\">\n          <ng-container\n            [ngTemplateOutlet]=\"tpl.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: view.row, row: view.row }\"\n          />\n        </td>\n      </tr>\n    }\n  }\n</ng-template>\n\n<ng-template #heading let-column>\n  @if (column.headerCell(); as tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n  } @else {\n    @if (column.labelHidden()) {\n      <span class=\"mecx-sr-only\">{{ column.label() }}</span>\n    } @else {\n      <span class=\"mecx-table-label\">{{ column.label() }}</span>\n      @if (column.unit()) {\n        <span class=\"mecx-table-unit\">{{ column.unit() }}</span>\n      }\n    }\n  }\n</ng-template>\n", styles: [".mecx-table{box-sizing:border-box;display:flex;flex-direction:column;width:100%;overflow:clip;background:var(--mecx-color-white);border:2px solid var(--mecx-color-gray-200);border-radius:16px}.mecx-table-main{display:flex;min-width:0}.mecx-table-viewport{position:relative;flex:1;min-width:0;overflow:clip}.mecx-table-scrollbar-vertical{display:flex;padding:var(--mecx-spaces-xs)}.mecx-table-scroll{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll::-webkit-scrollbar{display:none}.mecx-table-scroll--vertical{overflow-y:auto}.mecx-table-scroll--virtual{display:block;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll--virtual::-webkit-scrollbar{display:none}.mecx-table-head-clip{overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-head-clip::-webkit-scrollbar{display:none}.mecx-table-scrollbar{padding:var(--mecx-spaces-xs)}.mecx-table-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.mecx-table-scroll--virtual .mecx-table-grid,.mecx-table-grid--head{width:max-content;min-width:100%}.mecx-table-scroll--virtual .cdk-virtual-scroll-content-wrapper{min-width:100%}.mecx-table-grid--head .mecx-table-cell--head{position:static}.mecx-table-grid--head .mecx-table-cell--head.mecx-table-cell--pinned{position:sticky}.mecx-table-caption{padding:var(--mecx-spaces-small);color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em;text-align:left}.mecx-table-cell{padding:var(--mecx-spaces-small);vertical-align:middle;text-align:left;color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);letter-spacing:.01em;background:var(--mecx-color-white);border-bottom:1px solid var(--mecx-color-gray-200);transition:background-color .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-cell--end{--mecx-table-cell-x: flex-end;text-align:right}.mecx-table-cell--control{padding:var(--mecx-spaces-small);text-align:center}.mecx-table-cell--head{position:sticky;top:0;z-index:3;background:var(--mecx-color-gray-50);border-bottom-width:2px}.mecx-table-cell--head:not(.mecx-table-cell--control){padding:0}.mecx-table-cell--wide{padding:var(--mecx-spaces-small)}.mecx-table-cell--pinned{position:sticky;z-index:2}.mecx-table-cell--head.mecx-table-cell--pinned{z-index:4;background:var(--mecx-color-gray-50)}.mecx-table-pinned-shadow{position:absolute;top:0;bottom:0;z-index:5;opacity:0;pointer-events:none;box-shadow:2px 0 4px #4b4a5326,8px 0 18px #4b4a5352;transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-pinned-shadow--end{box-shadow:-2px 0 4px #4b4a5326,-8px 0 18px #4b4a5352}.mecx-table-pinned-shadow--visible{opacity:1}.mecx-table--striped .mecx-table-row--odd .mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-row--detail>.mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-body .mecx-table-row--selected>.mecx-table-cell{background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell{--mecx-table-cell-lift: var(--mecx-color-gray-200);background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell monkey-icon-button .mecx-icon-button:is(:hover){background:var(--mecx-table-cell-lift)}.mecx-table-heading{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;padding:var(--mecx-spaces-cozy) var(--mecx-spaces-small);text-align:left}.mecx-table-cell--end .mecx-table-heading{justify-content:flex-end}.mecx-table-label{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-unit{color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-12);font-weight:var(--mecx-fw-medium);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-trigger{appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-trigger:active{transform:scale(.995)}.mecx-table-trigger:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:-2px}.mecx-table-cell--head:has(.mecx-table-trigger:hover),.mecx-table-cell--active{background:var(--mecx-color-gray-300)}.mecx-table-menu{display:flex;flex-direction:column;gap:4px;min-width:190px;padding:var(--mecx-spaces-xs);background:var(--mecx-color-white);border:1px solid var(--mecx-color-gray-200);border-radius:12px;box-shadow:0 4px 16px #4b4a5326}.mecx-table-menu monkey-option{padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-radius:8px;font-size:var(--mecx-fs-13);line-height:var(--mecx-lh-16);white-space:nowrap}.mecx-table-menu monkey-option>div{align-items:center;gap:var(--mecx-spaces-xs);word-break:normal}.mecx-table-cell--control:has(.mecx-table-expand-toggle){padding-inline:0}.mecx-table-expand-toggle{margin:0}.mecx-table-select-all,.mecx-table-select-row,.mecx-table-expand-toggle{display:inline-flex;align-items:center;justify-content:center;height:32px;vertical-align:middle}.mecx-table-expand-toggle .mk-i{transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-expand-toggle--open .mk-i{transform:rotate(90deg)}.mecx-table-select-all,.mecx-table-select-row{cursor:pointer}.mecx-table-empty{margin:0;color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);text-align:center}.mecx-table-skeleton{display:block;height:var(--mecx-spaces-cozy);border-radius:4px;background:var(--mecx-color-gray-100)}.mecx-table-fade{position:absolute;top:0;right:0;bottom:0;z-index:5;width:48px;opacity:0;pointer-events:none;background:linear-gradient(to right,transparent,rgba(84,90,99,.34));transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-fade--start{right:auto;left:0;background:linear-gradient(to left,transparent,rgba(84,90,99,.34))}.mecx-table-fade--visible{opacity:1}.mecx-table-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-top:2px solid var(--mecx-color-gray-200)}.mecx-table-footer .mecx-table-footer-actions{display:flex;align-items:center;gap:var(--mecx-spaces-xs)}.mecx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["disabled", "indeterminate", "required", "showFooter", "size", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyDividerComponent, selector: "monkey-divider", inputs: ["size", "vertical", "id"] }, { kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "loading", "color", "id"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "size", "selected"] }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus"] }, { kind: "component", type: MonkeyScrollbarComponent, selector: "monkey-scrollbar", inputs: ["orientation", "size", "target"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "_columns", predicate: (MonkeyTableColumnDirective), isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: MonkeyTableEmptyDirective, descendants: true, isSignal: true }, { propertyName: "loadingTemplate", first: true, predicate: MonkeyTableLoadingDirective, descendants: true, isSignal: true }, { propertyName: "rowDetailTemplate", first: true, predicate: (MonkeyTableRowDetailDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "plainScroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "headClip", first: true, predicate: ["headClip"], descendants: true, isSignal: true }, { propertyName: "virtualViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mecx-table-main\">\n  <div class=\"mecx-table-viewport\">\n    @if (virtual()) {\n      <div #headClip class=\"mecx-table-head-clip\">\n        <table\n          class=\"mecx-table-grid mecx-table-grid--head\"\n          [style.width.px]=\"totalWidth() || null\"\n        >\n          <ng-container [ngTemplateOutlet]=\"tableHead\" />\n        </table>\n      </div>\n\n      <cdk-virtual-scroll-viewport\n        class=\"mecx-table-scroll mecx-table-scroll--virtual\"\n        [itemSize]=\"rowHeight()\"\n        [minBufferPx]=\"rowHeight() * 6\"\n        [maxBufferPx]=\"rowHeight() * 12\"\n        [style.height]=\"effectiveHeight()\"\n        role=\"region\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.tabindex]=\"overflowing() ? 0 : null\"\n      >\n        <table\n          class=\"mecx-table-grid\"\n          [attr.aria-rowcount]=\"rows().length + 1\"\n          [style.width.px]=\"totalWidth() || null\"\n        >\n          <ng-container [ngTemplateOutlet]=\"colGroup\" />\n          <tbody class=\"mecx-table-body\">\n            <ng-container\n              *cdkVirtualFor=\"\n                let view of renderRows();\n                trackBy: trackKey;\n                templateCacheSize: 30\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"dataRow\"\n                [ngTemplateOutletContext]=\"{ $implicit: view }\"\n              />\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    } @else {\n      <div\n        #scroller\n        class=\"mecx-table-scroll\"\n        [class.mecx-table-scroll--vertical]=\"!!effectiveHeight()\"\n        [style.max-height]=\"effectiveHeight() || null\"\n        role=\"region\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.tabindex]=\"overflowing() ? 0 : null\"\n      >\n        <table class=\"mecx-table-grid\">\n          <ng-container [ngTemplateOutlet]=\"tableHead\" />\n          <tbody class=\"mecx-table-body\">\n            @if (loading()) {\n              @if (loadingTemplate(); as tpl) {\n                <tr class=\"mecx-table-row\">\n                  <td\n                    class=\"mecx-table-cell mecx-table-cell--wide\"\n                    [attr.colspan]=\"slots().length\"\n                  >\n                    <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n                  </td>\n                </tr>\n              } @else {\n                @for (line of skeletonRange(); track line) {\n                  <tr class=\"mecx-table-row\" aria-hidden=\"true\">\n                    @for (slot of slots(); track slot.key) {\n                      <td\n                        class=\"mecx-table-cell\"\n                        [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n                        [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n                        [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n                        [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n                        [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n                      >\n                        <span class=\"mecx-table-skeleton\"></span>\n                      </td>\n                    }\n                  </tr>\n                }\n              }\n            } @else if (rows().length === 0) {\n              <tr class=\"mecx-table-row\">\n                <td\n                  class=\"mecx-table-cell mecx-table-cell--wide\"\n                  [attr.colspan]=\"slots().length\"\n                >\n                  @if (emptyTemplate(); as tpl) {\n                    <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n                  } @else {\n                    <p class=\"mecx-table-empty\">{{ labels().empty }}</p>\n                  }\n                </td>\n              </tr>\n            } @else {\n              @for (view of renderRows(); track view.key) {\n                <ng-container\n                  [ngTemplateOutlet]=\"dataRow\"\n                  [ngTemplateOutletContext]=\"{ $implicit: view }\"\n                />\n              }\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n\n    @if (pinnedStartWidth() > 0) {\n      <div\n        class=\"mecx-table-pinned-shadow\"\n        [class.mecx-table-pinned-shadow--visible]=\"!atStart()\"\n        [style.left.px]=\"0\"\n        [style.width.px]=\"pinnedStartWidth()\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n    @if (pinnedEndWidth() > 0) {\n      <div\n        class=\"mecx-table-pinned-shadow mecx-table-pinned-shadow--end\"\n        [class.mecx-table-pinned-shadow--visible]=\"!atEnd()\"\n        [style.right.px]=\"0\"\n        [style.width.px]=\"pinnedEndWidth()\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n\n    @if (pinnedStartWidth() === 0) {\n      <div\n        class=\"mecx-table-fade mecx-table-fade--start\"\n        [class.mecx-table-fade--visible]=\"!atStart()\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n    <div\n      class=\"mecx-table-fade\"\n      [class.mecx-table-fade--visible]=\"!atEnd()\"\n      [style.right.px]=\"pinnedEndWidth()\"\n      aria-hidden=\"true\"\n    ></div>\n  </div>\n\n  @if (effectiveHeight() && scrollTarget(); as target) {\n    <div class=\"mecx-table-scrollbar-vertical\">\n      <monkey-scrollbar orientation=\"vertical\" [target]=\"target\" />\n    </div>\n  }\n</div>\n\n@if (scrollTarget(); as target) {\n  <div class=\"mecx-table-scrollbar\">\n    <monkey-scrollbar orientation=\"horizontal\" [target]=\"target\" />\n  </div>\n}\n\n<div class=\"mecx-table-footer\">\n  <ng-content select=\"monkey-pagination-size\"></ng-content>\n  <div class=\"mecx-table-footer-actions\">\n    <ng-content select=\"monkey-pagination-label\"></ng-content>\n    <ng-content select=\"monkey-pagination-action\"></ng-content>\n  </div>\n</div>\n\n<ng-template #colGroup>\n  <colgroup>\n    @for (slot of slots(); track slot.key) {\n      <col [style.width]=\"slot.width\" />\n    }\n  </colgroup>\n</ng-template>\n\n<ng-template #tableHead>\n  @if (caption()) {\n    <caption class=\"mecx-table-caption\">\n      {{\n        caption()\n      }}\n    </caption>\n  }\n\n  <ng-container [ngTemplateOutlet]=\"colGroup\" />\n\n  <thead>\n    <tr class=\"mecx-table-row\">\n      @for (slot of slots(); track slot.key) {\n        <th\n          scope=\"col\"\n          class=\"mecx-table-cell mecx-table-cell--head\"\n          [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n          [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n          [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n          [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n          [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n          [class.mecx-table-cell--active]=\"openMenu() === slot.key\"\n          [attr.aria-sort]=\"ariaSortFor(slot.column)\"\n        >\n          @switch (slot.kind) {\n            @case ('selection') {\n              <label class=\"mecx-table-select-all\">\n                <span class=\"mecx-sr-only\">{{ labels().selectAll }}</span>\n                <monkey-checkbox\n                  size=\"sm\"\n                  [value]=\"allSelected()\"\n                  [indeterminate]=\"someSelected()\"\n                  [disabled]=\"loading() || !hasSelectable()\"\n                  (onChange)=\"toggleAllRows()\"\n                />\n              </label>\n            }\n            @case ('expand') {\n              <span class=\"mecx-sr-only\">{{ labels().detail }}</span>\n            }\n            @default {\n              @if (hasMenu(slot.column)) {\n                <button\n                  #trigger\n                  type=\"button\"\n                  class=\"mecx-table-heading mecx-table-trigger\"\n                  aria-haspopup=\"menu\"\n                  [attr.aria-expanded]=\"openMenu() === slot.key\"\n                  (click)=\"toggleMenu(slot.column)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"heading\"\n                    [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n                  />\n                </button>\n\n                <ng-template\n                  [monkeyPopover]=\"openMenu() === slot.key\"\n                  [monkeyPopoverTarget]=\"trigger\"\n                  [monkeyPopoverClosed]=\"closeMenu\"\n                  monkeyPopoverDir=\"ltr\"\n                  [monkeyPopoverHideHeader]=\"true\"\n                  monkeyPopoverCloseOnClick=\"monkey-option\"\n                >\n                  <div class=\"mecx-table-menu\">\n                    @if (slot.column.sortable()) {\n                      @let sortText = sortLabels(slot.column);\n                      <monkey-option\n                        [selected]=\"isSortedBy(slot.column, 'ascending')\"\n                        (click)=\"sortBy(slot.column, 'ascending')\"\n                      >\n                        <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n                        {{ sortText.asc }}\n                      </monkey-option>\n                      <monkey-option\n                        [selected]=\"isSortedBy(slot.column, 'descending')\"\n                        (click)=\"sortBy(slot.column, 'descending')\"\n                      >\n                        <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n                        {{ sortText.desc }}\n                      </monkey-option>\n                    }\n\n                    @if (canReorder(slot.column)) {\n                      @if (slot.column.sortable()) {\n                        <monkey-divider />\n                      }\n                      <monkey-option\n                        [disabled]=\"!canMove(slot.column, -1)\"\n                        (click)=\"move(slot.column, -1)\"\n                      >\n                        <i class=\"mk-i mk-i-arrow-line-left sm\" aria-hidden=\"true\"></i>\n                        {{ labels().moveLeft }}\n                      </monkey-option>\n                      <monkey-option\n                        [disabled]=\"!canMove(slot.column, 1)\"\n                        (click)=\"move(slot.column, 1)\"\n                      >\n                        <i class=\"mk-i mk-i-arrow-line-right sm\" aria-hidden=\"true\"></i>\n                        {{ labels().moveRight }}\n                      </monkey-option>\n                    }\n\n                    @if (canHide(slot.column) || canPin(slot.column)) {\n                      @if (slot.column.sortable() || canReorder(slot.column)) {\n                        <monkey-divider />\n                      }\n                      @if (canHide(slot.column)) {\n                        <monkey-option [disabled]=\"isLastColumn()\" (click)=\"hide(slot.column)\">\n                          <i class=\"mk-i mk-i-eye-closed sm\" aria-hidden=\"true\"></i>\n                          {{ labels().hide }}\n                        </monkey-option>\n                      }\n                      @if (canPin(slot.column)) {\n                        <monkey-option (click)=\"togglePin(slot.column)\">\n                          <i class=\"mk-i mk-i-pin-navigation sm\" aria-hidden=\"true\"></i>\n                          {{ slot.column.pinned() !== 'none' ? labels().unpin : labels().pin }}\n                        </monkey-option>\n                      }\n                    }\n                  </div>\n                </ng-template>\n              } @else {\n                <div class=\"mecx-table-heading\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"heading\"\n                    [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n                  />\n                </div>\n              }\n            }\n          }\n        </th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #dataRow let-view>\n  <tr\n    class=\"mecx-table-row mecx-table-row--data\"\n    [class.mecx-table-row--odd]=\"view.index % 2 === 1\"\n    [class.mecx-table-row--selected]=\"view.selected\"\n    [attr.aria-rowindex]=\"virtual() ? view.index + 2 : null\"\n    [style.height.px]=\"virtual() ? rowHeight() : null\"\n  >\n    @for (slot of slots(); track slot.key) {\n      <td\n        class=\"mecx-table-cell\"\n        [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n        [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n        [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n        [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n        [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n      >\n        @switch (slot.kind) {\n          @case ('selection') {\n            <label class=\"mecx-table-select-row\" [attr.title]=\"view.blockedReason\">\n              <span class=\"mecx-sr-only\">{{ view.selectLabel }}</span>\n              <monkey-checkbox\n                size=\"sm\"\n                [value]=\"view.selected\"\n                [disabled]=\"!!view.blockedReason\"\n                (onChange)=\"toggleRow(view)\"\n              />\n            </label>\n          }\n          @case ('expand') {\n            <monkey-icon-button\n              type=\"tertiary\"\n              size=\"sm\"\n              icon=\"arrow-right\"\n              class=\"mecx-table-expand-toggle\"\n              [class.mecx-table-expand-toggle--open]=\"view.open\"\n              [attr.aria-expanded]=\"view.open\"\n              [attr.aria-label]=\"view.expandLabel\"\n              (click)=\"toggleOpen(view)\"\n            />\n          }\n          @default {\n            @if (slot.column.cell(); as cell) {\n              <ng-container\n                [ngTemplateOutlet]=\"cell.template\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: view.row,\n                  row: view.row,\n                  index: view.index,\n                  first: view.index === 0,\n                  last: view.index === rows().length - 1\n                }\"\n              />\n            }\n          }\n        }\n      </td>\n    }\n  </tr>\n\n  @if (expandable() && view.open) {\n    @if (rowDetailTemplate(); as tpl) {\n      <tr\n        class=\"mecx-table-row mecx-table-row--detail\"\n        [class.mecx-table-row--selected]=\"view.selected\"\n      >\n        <td class=\"mecx-table-cell mecx-table-cell--wide\" [attr.colspan]=\"slots().length\">\n          <ng-container\n            [ngTemplateOutlet]=\"tpl.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: view.row, row: view.row }\"\n          />\n        </td>\n      </tr>\n    }\n  }\n</ng-template>\n\n<ng-template #heading let-column>\n  @if (column.headerCell(); as tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n  } @else {\n    @if (column.labelHidden()) {\n      <span class=\"mecx-sr-only\">{{ column.label() }}</span>\n    } @else {\n      <span class=\"mecx-table-label\">{{ column.label() }}</span>\n      @if (column.unit()) {\n        <span class=\"mecx-table-unit\">{{ column.unit() }}</span>\n      }\n    }\n  }\n</ng-template>\n", styles: [".mecx-table{box-sizing:border-box;display:flex;flex-direction:column;width:100%;overflow:clip;background:var(--mecx-color-white);border:2px solid var(--mecx-color-gray-200);border-radius:16px}.mecx-table-main{display:flex;min-width:0}.mecx-table-viewport{position:relative;flex:1;min-width:0;overflow:clip}.mecx-table-scrollbar-vertical{display:flex;padding:var(--mecx-spaces-xs)}.mecx-table-scroll{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll::-webkit-scrollbar{display:none}.mecx-table-scroll--vertical{overflow-y:auto}.mecx-table-scroll--virtual{display:block;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll--virtual::-webkit-scrollbar{display:none}.mecx-table-head-clip{overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-head-clip::-webkit-scrollbar{display:none}.mecx-table-scrollbar{padding:var(--mecx-spaces-xs)}.mecx-table-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.mecx-table-scroll--virtual .mecx-table-grid,.mecx-table-grid--head{width:max-content;min-width:100%}.mecx-table-scroll--virtual .cdk-virtual-scroll-content-wrapper{min-width:100%}.mecx-table-grid--head .mecx-table-cell--head{position:static}.mecx-table-grid--head .mecx-table-cell--head.mecx-table-cell--pinned{position:sticky}.mecx-table-caption{padding:var(--mecx-spaces-small);color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em;text-align:left}.mecx-table-cell{padding:var(--mecx-spaces-small);vertical-align:middle;text-align:left;color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);letter-spacing:.01em;background:var(--mecx-color-white);border-bottom:1px solid var(--mecx-color-gray-200);transition:background-color .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-cell--end{--mecx-table-cell-x: flex-end;text-align:right}.mecx-table-cell--control{padding:var(--mecx-spaces-small);text-align:center}.mecx-table-cell--head{position:sticky;top:0;z-index:3;background:var(--mecx-color-gray-50);border-bottom-width:2px}.mecx-table-cell--head:not(.mecx-table-cell--control){padding:0}.mecx-table-cell--wide{padding:var(--mecx-spaces-small)}.mecx-table-cell--pinned{position:sticky;z-index:2}.mecx-table-cell--head.mecx-table-cell--pinned{z-index:4;background:var(--mecx-color-gray-50)}.mecx-table-pinned-shadow{position:absolute;top:0;bottom:0;z-index:5;opacity:0;pointer-events:none;box-shadow:2px 0 4px #4b4a5326,8px 0 18px #4b4a5352;transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-pinned-shadow--end{box-shadow:-2px 0 4px #4b4a5326,-8px 0 18px #4b4a5352}.mecx-table-pinned-shadow--visible{opacity:1}.mecx-table--striped .mecx-table-row--odd .mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-row--detail>.mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-body .mecx-table-row--selected>.mecx-table-cell{background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell{--mecx-table-cell-lift: var(--mecx-color-gray-200);background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell monkey-icon-button .mecx-icon-button:is(:hover){background:var(--mecx-table-cell-lift)}.mecx-table-heading{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;padding:var(--mecx-spaces-cozy) var(--mecx-spaces-small);text-align:left}.mecx-table-cell--end .mecx-table-heading{justify-content:flex-end}.mecx-table-label{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-unit{color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-12);font-weight:var(--mecx-fw-medium);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-trigger{appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-trigger:active{transform:scale(.995)}.mecx-table-trigger:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:-2px}.mecx-table-cell--head:has(.mecx-table-trigger:hover),.mecx-table-cell--active{background:var(--mecx-color-gray-300)}.mecx-table-menu{display:flex;flex-direction:column;gap:4px;min-width:190px;padding:var(--mecx-spaces-xs);background:var(--mecx-color-white);border:1px solid var(--mecx-color-gray-200);border-radius:12px;box-shadow:0 4px 16px #4b4a5326}.mecx-table-menu monkey-option{padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-radius:8px;font-size:var(--mecx-fs-13);line-height:var(--mecx-lh-16);white-space:nowrap}.mecx-table-menu monkey-option>div{align-items:center;gap:var(--mecx-spaces-xs);word-break:normal}.mecx-table-cell--control:has(.mecx-table-expand-toggle){padding-inline:0}.mecx-table-expand-toggle{margin:0}.mecx-table-select-all,.mecx-table-select-row,.mecx-table-expand-toggle{display:inline-flex;align-items:center;justify-content:center;height:32px;vertical-align:middle}.mecx-table-expand-toggle .mk-i{transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-expand-toggle--open .mk-i{transform:rotate(90deg)}.mecx-table-select-all,.mecx-table-select-row{cursor:pointer}.mecx-table-empty{margin:0;color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);text-align:center}.mecx-table-skeleton{display:block;height:var(--mecx-spaces-cozy);border-radius:4px;background:var(--mecx-color-gray-100)}.mecx-table-fade{position:absolute;top:0;right:0;bottom:0;z-index:5;width:48px;opacity:0;pointer-events:none;background:linear-gradient(to right,transparent,rgba(84,90,99,.34));transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-fade--start{right:auto;left:0;background:linear-gradient(to left,transparent,rgba(84,90,99,.34))}.mecx-table-fade--visible{opacity:1}.mecx-table-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-top:2px solid var(--mecx-color-gray-200)}.mecx-table-footer .mecx-table-footer-actions{display:flex;align-items:center;gap:var(--mecx-spaces-xs)}.mecx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["disabled", "indeterminate", "required", "showFooter", "size", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyDividerComponent, selector: "monkey-divider", inputs: ["size", "vertical", "id"] }, { kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "loading", "color", "id"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "size", "selected"] }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus", "monkeyPopoverCloseOnClick"], outputs: ["monkeyPopoverItemClick"], exportAs: ["monkeyPopover"] }, { kind: "component", type: MonkeyScrollbarComponent, selector: "monkey-scrollbar", inputs: ["orientation", "size", "target"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyTableComponent, decorators: [{
             type: Component,
@@ -12037,7 +12097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                         '[class.mecx-table--striped]': 'striped()',
                         '[class.mecx-table--menu-open]': '!!openMenu()',
                         '[attr.aria-busy]': "loading() ? 'true' : null"
-                    }, template: "<div class=\"mecx-table-main\">\n  <div class=\"mecx-table-viewport\">\n    @if (virtual()) {\n      <div #headClip class=\"mecx-table-head-clip\">\n        <table\n          class=\"mecx-table-grid mecx-table-grid--head\"\n          [style.width.px]=\"totalWidth() || null\"\n        >\n          <ng-container [ngTemplateOutlet]=\"tableHead\" />\n        </table>\n      </div>\n\n      <cdk-virtual-scroll-viewport\n        class=\"mecx-table-scroll mecx-table-scroll--virtual\"\n        [itemSize]=\"rowHeight()\"\n        [minBufferPx]=\"rowHeight() * 6\"\n        [maxBufferPx]=\"rowHeight() * 12\"\n        [style.height]=\"effectiveHeight()\"\n        role=\"region\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.tabindex]=\"overflowing() ? 0 : null\"\n      >\n        <table\n          class=\"mecx-table-grid\"\n          [attr.aria-rowcount]=\"rows().length + 1\"\n          [style.width.px]=\"totalWidth() || null\"\n        >\n          <ng-container [ngTemplateOutlet]=\"colGroup\" />\n          <tbody class=\"mecx-table-body\">\n            <ng-container\n              *cdkVirtualFor=\"\n                let view of renderRows();\n                trackBy: trackKey;\n                templateCacheSize: 30\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"dataRow\"\n                [ngTemplateOutletContext]=\"{ $implicit: view }\"\n              />\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    } @else {\n      <div\n        #scroller\n        class=\"mecx-table-scroll\"\n        [class.mecx-table-scroll--vertical]=\"!!effectiveHeight()\"\n        [style.max-height]=\"effectiveHeight() || null\"\n        role=\"region\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.tabindex]=\"overflowing() ? 0 : null\"\n      >\n        <table class=\"mecx-table-grid\">\n          <ng-container [ngTemplateOutlet]=\"tableHead\" />\n          <tbody class=\"mecx-table-body\">\n            @if (loading()) {\n              @if (loadingTemplate(); as tpl) {\n                <tr class=\"mecx-table-row\">\n                  <td\n                    class=\"mecx-table-cell mecx-table-cell--wide\"\n                    [attr.colspan]=\"slots().length\"\n                  >\n                    <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n                  </td>\n                </tr>\n              } @else {\n                @for (line of skeletonRange(); track line) {\n                  <tr class=\"mecx-table-row\" aria-hidden=\"true\">\n                    @for (slot of slots(); track slot.key) {\n                      <td\n                        class=\"mecx-table-cell\"\n                        [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n                        [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n                        [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n                        [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n                        [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n                      >\n                        <span class=\"mecx-table-skeleton\"></span>\n                      </td>\n                    }\n                  </tr>\n                }\n              }\n            } @else if (rows().length === 0) {\n              <tr class=\"mecx-table-row\">\n                <td\n                  class=\"mecx-table-cell mecx-table-cell--wide\"\n                  [attr.colspan]=\"slots().length\"\n                >\n                  @if (emptyTemplate(); as tpl) {\n                    <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n                  } @else {\n                    <p class=\"mecx-table-empty\">{{ labels().empty }}</p>\n                  }\n                </td>\n              </tr>\n            } @else {\n              @for (view of renderRows(); track view.key) {\n                <ng-container\n                  [ngTemplateOutlet]=\"dataRow\"\n                  [ngTemplateOutletContext]=\"{ $implicit: view }\"\n                />\n              }\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n\n    @if (pinnedStartWidth() > 0) {\n      <div\n        class=\"mecx-table-pinned-shadow\"\n        [class.mecx-table-pinned-shadow--visible]=\"!atStart()\"\n        [style.left.px]=\"0\"\n        [style.width.px]=\"pinnedStartWidth()\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n    @if (pinnedEndWidth() > 0) {\n      <div\n        class=\"mecx-table-pinned-shadow mecx-table-pinned-shadow--end\"\n        [class.mecx-table-pinned-shadow--visible]=\"!atEnd()\"\n        [style.right.px]=\"0\"\n        [style.width.px]=\"pinnedEndWidth()\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n\n    @if (pinnedStartWidth() === 0) {\n      <div\n        class=\"mecx-table-fade mecx-table-fade--start\"\n        [class.mecx-table-fade--visible]=\"!atStart()\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n    <div\n      class=\"mecx-table-fade\"\n      [class.mecx-table-fade--visible]=\"!atEnd()\"\n      [style.right.px]=\"pinnedEndWidth()\"\n      aria-hidden=\"true\"\n    ></div>\n  </div>\n\n  @if (effectiveHeight() && scrollTarget(); as target) {\n    <div class=\"mecx-table-scrollbar-vertical\">\n      <monkey-scrollbar orientation=\"vertical\" [target]=\"target\" />\n    </div>\n  }\n</div>\n\n@if (scrollTarget(); as target) {\n  <div class=\"mecx-table-scrollbar\">\n    <monkey-scrollbar orientation=\"horizontal\" [target]=\"target\" />\n  </div>\n}\n\n<div class=\"mecx-table-footer\">\n  <ng-content select=\"monkey-pagination-size\"></ng-content>\n  <div class=\"mecx-table-footer-actions\">\n    <ng-content select=\"monkey-pagination-label\"></ng-content>\n    <ng-content select=\"monkey-pagination-action\"></ng-content>\n  </div>\n</div>\n\n<ng-template #colGroup>\n  <colgroup>\n    @for (slot of slots(); track slot.key) {\n      <col [style.width]=\"slot.width\" />\n    }\n  </colgroup>\n</ng-template>\n\n<ng-template #tableHead>\n  @if (caption()) {\n    <caption class=\"mecx-table-caption\">\n      {{\n        caption()\n      }}\n    </caption>\n  }\n\n  <ng-container [ngTemplateOutlet]=\"colGroup\" />\n\n  <thead>\n    <tr class=\"mecx-table-row\">\n      @for (slot of slots(); track slot.key) {\n        <th\n          scope=\"col\"\n          class=\"mecx-table-cell mecx-table-cell--head\"\n          [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n          [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n          [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n          [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n          [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n          [class.mecx-table-cell--active]=\"openMenu() === slot.key\"\n          [attr.aria-sort]=\"ariaSortFor(slot.column)\"\n        >\n          @switch (slot.kind) {\n            @case ('selection') {\n              <label class=\"mecx-table-select-all\">\n                <span class=\"mecx-sr-only\">{{ labels().selectAll }}</span>\n                <monkey-checkbox\n                  size=\"sm\"\n                  [value]=\"allSelected()\"\n                  [indeterminate]=\"someSelected()\"\n                  [disabled]=\"loading() || !hasSelectable()\"\n                  (onChange)=\"toggleAllRows()\"\n                />\n              </label>\n            }\n            @case ('expand') {\n              <span class=\"mecx-sr-only\">{{ labels().detail }}</span>\n            }\n            @default {\n              @if (hasMenu(slot.column)) {\n                <button\n                  #trigger\n                  type=\"button\"\n                  class=\"mecx-table-heading mecx-table-trigger\"\n                  aria-haspopup=\"menu\"\n                  [attr.aria-expanded]=\"openMenu() === slot.key\"\n                  (click)=\"toggleMenu(slot.column)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"heading\"\n                    [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n                  />\n                </button>\n\n                <ng-template\n                  [monkeyPopover]=\"openMenu() === slot.key\"\n                  [monkeyPopoverTarget]=\"trigger\"\n                  [monkeyPopoverClosed]=\"closeMenu\"\n                  monkeyPopoverDir=\"ltr\"\n                  [monkeyPopoverHideHeader]=\"true\"\n                >\n                  <div class=\"mecx-table-menu\" (click)=\"openMenu.set(null)\">\n                    @if (slot.column.sortable()) {\n                      @let sortText = sortLabels(slot.column);\n                      <monkey-option\n                        [selected]=\"isSortedBy(slot.column, 'ascending')\"\n                        (click)=\"sortBy(slot.column, 'ascending')\"\n                      >\n                        <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n                        {{ sortText.asc }}\n                      </monkey-option>\n                      <monkey-option\n                        [selected]=\"isSortedBy(slot.column, 'descending')\"\n                        (click)=\"sortBy(slot.column, 'descending')\"\n                      >\n                        <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n                        {{ sortText.desc }}\n                      </monkey-option>\n                    }\n\n                    @if (canReorder(slot.column)) {\n                      @if (slot.column.sortable()) {\n                        <monkey-divider />\n                      }\n                      <monkey-option\n                        [disabled]=\"!canMove(slot.column, -1)\"\n                        (click)=\"move(slot.column, -1)\"\n                      >\n                        <i class=\"mk-i mk-i-arrow-line-left sm\" aria-hidden=\"true\"></i>\n                        {{ labels().moveLeft }}\n                      </monkey-option>\n                      <monkey-option\n                        [disabled]=\"!canMove(slot.column, 1)\"\n                        (click)=\"move(slot.column, 1)\"\n                      >\n                        <i class=\"mk-i mk-i-arrow-line-right sm\" aria-hidden=\"true\"></i>\n                        {{ labels().moveRight }}\n                      </monkey-option>\n                    }\n\n                    @if (canHide(slot.column) || canPin(slot.column)) {\n                      @if (slot.column.sortable() || canReorder(slot.column)) {\n                        <monkey-divider />\n                      }\n                      @if (canHide(slot.column)) {\n                        <monkey-option [disabled]=\"isLastColumn()\" (click)=\"hide(slot.column)\">\n                          <i class=\"mk-i mk-i-eye-closed sm\" aria-hidden=\"true\"></i>\n                          {{ labels().hide }}\n                        </monkey-option>\n                      }\n                      @if (canPin(slot.column)) {\n                        <monkey-option (click)=\"togglePin(slot.column)\">\n                          <i class=\"mk-i mk-i-pin-navigation sm\" aria-hidden=\"true\"></i>\n                          {{ slot.column.pinned() !== 'none' ? labels().unpin : labels().pin }}\n                        </monkey-option>\n                      }\n                    }\n                  </div>\n                </ng-template>\n              } @else {\n                <div class=\"mecx-table-heading\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"heading\"\n                    [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n                  />\n                </div>\n              }\n            }\n          }\n        </th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #dataRow let-view>\n  <tr\n    class=\"mecx-table-row mecx-table-row--data\"\n    [class.mecx-table-row--odd]=\"view.index % 2 === 1\"\n    [class.mecx-table-row--selected]=\"view.selected\"\n    [attr.aria-rowindex]=\"virtual() ? view.index + 2 : null\"\n    [style.height.px]=\"virtual() ? rowHeight() : null\"\n  >\n    @for (slot of slots(); track slot.key) {\n      <td\n        class=\"mecx-table-cell\"\n        [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n        [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n        [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n        [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n        [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n      >\n        @switch (slot.kind) {\n          @case ('selection') {\n            <label class=\"mecx-table-select-row\" [attr.title]=\"view.blockedReason\">\n              <span class=\"mecx-sr-only\">{{ view.selectLabel }}</span>\n              <monkey-checkbox\n                size=\"sm\"\n                [value]=\"view.selected\"\n                [disabled]=\"!!view.blockedReason\"\n                (onChange)=\"toggleRow(view)\"\n              />\n            </label>\n          }\n          @case ('expand') {\n            <monkey-icon-button\n              type=\"tertiary\"\n              size=\"sm\"\n              icon=\"arrow-right\"\n              class=\"mecx-table-expand-toggle\"\n              [class.mecx-table-expand-toggle--open]=\"view.open\"\n              [attr.aria-expanded]=\"view.open\"\n              [attr.aria-label]=\"view.expandLabel\"\n              (click)=\"toggleOpen(view)\"\n            />\n          }\n          @default {\n            @if (slot.column.cell(); as cell) {\n              <ng-container\n                [ngTemplateOutlet]=\"cell.template\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: view.row,\n                  row: view.row,\n                  index: view.index,\n                  first: view.index === 0,\n                  last: view.index === rows().length - 1\n                }\"\n              />\n            }\n          }\n        }\n      </td>\n    }\n  </tr>\n\n  @if (expandable() && view.open) {\n    @if (rowDetailTemplate(); as tpl) {\n      <tr\n        class=\"mecx-table-row mecx-table-row--detail\"\n        [class.mecx-table-row--selected]=\"view.selected\"\n      >\n        <td class=\"mecx-table-cell mecx-table-cell--wide\" [attr.colspan]=\"slots().length\">\n          <ng-container\n            [ngTemplateOutlet]=\"tpl.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: view.row, row: view.row }\"\n          />\n        </td>\n      </tr>\n    }\n  }\n</ng-template>\n\n<ng-template #heading let-column>\n  @if (column.headerCell(); as tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n  } @else {\n    @if (column.labelHidden()) {\n      <span class=\"mecx-sr-only\">{{ column.label() }}</span>\n    } @else {\n      <span class=\"mecx-table-label\">{{ column.label() }}</span>\n      @if (column.unit()) {\n        <span class=\"mecx-table-unit\">{{ column.unit() }}</span>\n      }\n    }\n  }\n</ng-template>\n", styles: [".mecx-table{box-sizing:border-box;display:flex;flex-direction:column;width:100%;overflow:clip;background:var(--mecx-color-white);border:2px solid var(--mecx-color-gray-200);border-radius:16px}.mecx-table-main{display:flex;min-width:0}.mecx-table-viewport{position:relative;flex:1;min-width:0;overflow:clip}.mecx-table-scrollbar-vertical{display:flex;padding:var(--mecx-spaces-xs)}.mecx-table-scroll{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll::-webkit-scrollbar{display:none}.mecx-table-scroll--vertical{overflow-y:auto}.mecx-table-scroll--virtual{display:block;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll--virtual::-webkit-scrollbar{display:none}.mecx-table-head-clip{overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-head-clip::-webkit-scrollbar{display:none}.mecx-table-scrollbar{padding:var(--mecx-spaces-xs)}.mecx-table-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.mecx-table-scroll--virtual .mecx-table-grid,.mecx-table-grid--head{width:max-content;min-width:100%}.mecx-table-scroll--virtual .cdk-virtual-scroll-content-wrapper{min-width:100%}.mecx-table-grid--head .mecx-table-cell--head{position:static}.mecx-table-grid--head .mecx-table-cell--head.mecx-table-cell--pinned{position:sticky}.mecx-table-caption{padding:var(--mecx-spaces-small);color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em;text-align:left}.mecx-table-cell{padding:var(--mecx-spaces-small);vertical-align:middle;text-align:left;color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);letter-spacing:.01em;background:var(--mecx-color-white);border-bottom:1px solid var(--mecx-color-gray-200);transition:background-color .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-cell--end{--mecx-table-cell-x: flex-end;text-align:right}.mecx-table-cell--control{padding:var(--mecx-spaces-small);text-align:center}.mecx-table-cell--head{position:sticky;top:0;z-index:3;background:var(--mecx-color-gray-50);border-bottom-width:2px}.mecx-table-cell--head:not(.mecx-table-cell--control){padding:0}.mecx-table-cell--wide{padding:var(--mecx-spaces-small)}.mecx-table-cell--pinned{position:sticky;z-index:2}.mecx-table-cell--head.mecx-table-cell--pinned{z-index:4;background:var(--mecx-color-gray-50)}.mecx-table-pinned-shadow{position:absolute;top:0;bottom:0;z-index:5;opacity:0;pointer-events:none;box-shadow:2px 0 4px #4b4a5326,8px 0 18px #4b4a5352;transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-pinned-shadow--end{box-shadow:-2px 0 4px #4b4a5326,-8px 0 18px #4b4a5352}.mecx-table-pinned-shadow--visible{opacity:1}.mecx-table--striped .mecx-table-row--odd .mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-row--detail>.mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-body .mecx-table-row--selected>.mecx-table-cell{background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell{--mecx-table-cell-lift: var(--mecx-color-gray-200);background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell monkey-icon-button .mecx-icon-button:is(:hover){background:var(--mecx-table-cell-lift)}.mecx-table-heading{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;padding:var(--mecx-spaces-cozy) var(--mecx-spaces-small);text-align:left}.mecx-table-cell--end .mecx-table-heading{justify-content:flex-end}.mecx-table-label{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-unit{color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-12);font-weight:var(--mecx-fw-medium);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-trigger{appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-trigger:active{transform:scale(.995)}.mecx-table-trigger:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:-2px}.mecx-table-cell--head:has(.mecx-table-trigger:hover),.mecx-table-cell--active{background:var(--mecx-color-gray-300)}.mecx-table-menu{display:flex;flex-direction:column;gap:4px;min-width:190px;padding:var(--mecx-spaces-xs);background:var(--mecx-color-white);border:1px solid var(--mecx-color-gray-200);border-radius:12px;box-shadow:0 4px 16px #4b4a5326}.mecx-table-menu monkey-option{padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-radius:8px;font-size:var(--mecx-fs-13);line-height:var(--mecx-lh-16);white-space:nowrap}.mecx-table-menu monkey-option>div{align-items:center;gap:var(--mecx-spaces-xs);word-break:normal}.mecx-table-cell--control:has(.mecx-table-expand-toggle){padding-inline:0}.mecx-table-expand-toggle{margin:0}.mecx-table-select-all,.mecx-table-select-row,.mecx-table-expand-toggle{display:inline-flex;align-items:center;justify-content:center;height:32px;vertical-align:middle}.mecx-table-expand-toggle .mk-i{transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-expand-toggle--open .mk-i{transform:rotate(90deg)}.mecx-table-select-all,.mecx-table-select-row{cursor:pointer}.mecx-table-empty{margin:0;color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);text-align:center}.mecx-table-skeleton{display:block;height:var(--mecx-spaces-cozy);border-radius:4px;background:var(--mecx-color-gray-100)}.mecx-table-fade{position:absolute;top:0;right:0;bottom:0;z-index:5;width:48px;opacity:0;pointer-events:none;background:linear-gradient(to right,transparent,rgba(84,90,99,.34));transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-fade--start{right:auto;left:0;background:linear-gradient(to left,transparent,rgba(84,90,99,.34))}.mecx-table-fade--visible{opacity:1}.mecx-table-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-top:2px solid var(--mecx-color-gray-200)}.mecx-table-footer .mecx-table-footer-actions{display:flex;align-items:center;gap:var(--mecx-spaces-xs)}.mecx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"] }]
+                    }, template: "<div class=\"mecx-table-main\">\n  <div class=\"mecx-table-viewport\">\n    @if (virtual()) {\n      <div #headClip class=\"mecx-table-head-clip\">\n        <table\n          class=\"mecx-table-grid mecx-table-grid--head\"\n          [style.width.px]=\"totalWidth() || null\"\n        >\n          <ng-container [ngTemplateOutlet]=\"tableHead\" />\n        </table>\n      </div>\n\n      <cdk-virtual-scroll-viewport\n        class=\"mecx-table-scroll mecx-table-scroll--virtual\"\n        [itemSize]=\"rowHeight()\"\n        [minBufferPx]=\"rowHeight() * 6\"\n        [maxBufferPx]=\"rowHeight() * 12\"\n        [style.height]=\"effectiveHeight()\"\n        role=\"region\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.tabindex]=\"overflowing() ? 0 : null\"\n      >\n        <table\n          class=\"mecx-table-grid\"\n          [attr.aria-rowcount]=\"rows().length + 1\"\n          [style.width.px]=\"totalWidth() || null\"\n        >\n          <ng-container [ngTemplateOutlet]=\"colGroup\" />\n          <tbody class=\"mecx-table-body\">\n            <ng-container\n              *cdkVirtualFor=\"\n                let view of renderRows();\n                trackBy: trackKey;\n                templateCacheSize: 30\n              \"\n            >\n              <ng-container\n                [ngTemplateOutlet]=\"dataRow\"\n                [ngTemplateOutletContext]=\"{ $implicit: view }\"\n              />\n            </ng-container>\n          </tbody>\n        </table>\n      </cdk-virtual-scroll-viewport>\n    } @else {\n      <div\n        #scroller\n        class=\"mecx-table-scroll\"\n        [class.mecx-table-scroll--vertical]=\"!!effectiveHeight()\"\n        [style.max-height]=\"effectiveHeight() || null\"\n        role=\"region\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.tabindex]=\"overflowing() ? 0 : null\"\n      >\n        <table class=\"mecx-table-grid\">\n          <ng-container [ngTemplateOutlet]=\"tableHead\" />\n          <tbody class=\"mecx-table-body\">\n            @if (loading()) {\n              @if (loadingTemplate(); as tpl) {\n                <tr class=\"mecx-table-row\">\n                  <td\n                    class=\"mecx-table-cell mecx-table-cell--wide\"\n                    [attr.colspan]=\"slots().length\"\n                  >\n                    <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n                  </td>\n                </tr>\n              } @else {\n                @for (line of skeletonRange(); track line) {\n                  <tr class=\"mecx-table-row\" aria-hidden=\"true\">\n                    @for (slot of slots(); track slot.key) {\n                      <td\n                        class=\"mecx-table-cell\"\n                        [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n                        [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n                        [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n                        [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n                        [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n                      >\n                        <span class=\"mecx-table-skeleton\"></span>\n                      </td>\n                    }\n                  </tr>\n                }\n              }\n            } @else if (rows().length === 0) {\n              <tr class=\"mecx-table-row\">\n                <td\n                  class=\"mecx-table-cell mecx-table-cell--wide\"\n                  [attr.colspan]=\"slots().length\"\n                >\n                  @if (emptyTemplate(); as tpl) {\n                    <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n                  } @else {\n                    <p class=\"mecx-table-empty\">{{ labels().empty }}</p>\n                  }\n                </td>\n              </tr>\n            } @else {\n              @for (view of renderRows(); track view.key) {\n                <ng-container\n                  [ngTemplateOutlet]=\"dataRow\"\n                  [ngTemplateOutletContext]=\"{ $implicit: view }\"\n                />\n              }\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n\n    @if (pinnedStartWidth() > 0) {\n      <div\n        class=\"mecx-table-pinned-shadow\"\n        [class.mecx-table-pinned-shadow--visible]=\"!atStart()\"\n        [style.left.px]=\"0\"\n        [style.width.px]=\"pinnedStartWidth()\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n    @if (pinnedEndWidth() > 0) {\n      <div\n        class=\"mecx-table-pinned-shadow mecx-table-pinned-shadow--end\"\n        [class.mecx-table-pinned-shadow--visible]=\"!atEnd()\"\n        [style.right.px]=\"0\"\n        [style.width.px]=\"pinnedEndWidth()\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n\n    @if (pinnedStartWidth() === 0) {\n      <div\n        class=\"mecx-table-fade mecx-table-fade--start\"\n        [class.mecx-table-fade--visible]=\"!atStart()\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n    <div\n      class=\"mecx-table-fade\"\n      [class.mecx-table-fade--visible]=\"!atEnd()\"\n      [style.right.px]=\"pinnedEndWidth()\"\n      aria-hidden=\"true\"\n    ></div>\n  </div>\n\n  @if (effectiveHeight() && scrollTarget(); as target) {\n    <div class=\"mecx-table-scrollbar-vertical\">\n      <monkey-scrollbar orientation=\"vertical\" [target]=\"target\" />\n    </div>\n  }\n</div>\n\n@if (scrollTarget(); as target) {\n  <div class=\"mecx-table-scrollbar\">\n    <monkey-scrollbar orientation=\"horizontal\" [target]=\"target\" />\n  </div>\n}\n\n<div class=\"mecx-table-footer\">\n  <ng-content select=\"monkey-pagination-size\"></ng-content>\n  <div class=\"mecx-table-footer-actions\">\n    <ng-content select=\"monkey-pagination-label\"></ng-content>\n    <ng-content select=\"monkey-pagination-action\"></ng-content>\n  </div>\n</div>\n\n<ng-template #colGroup>\n  <colgroup>\n    @for (slot of slots(); track slot.key) {\n      <col [style.width]=\"slot.width\" />\n    }\n  </colgroup>\n</ng-template>\n\n<ng-template #tableHead>\n  @if (caption()) {\n    <caption class=\"mecx-table-caption\">\n      {{\n        caption()\n      }}\n    </caption>\n  }\n\n  <ng-container [ngTemplateOutlet]=\"colGroup\" />\n\n  <thead>\n    <tr class=\"mecx-table-row\">\n      @for (slot of slots(); track slot.key) {\n        <th\n          scope=\"col\"\n          class=\"mecx-table-cell mecx-table-cell--head\"\n          [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n          [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n          [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n          [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n          [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n          [class.mecx-table-cell--active]=\"openMenu() === slot.key\"\n          [attr.aria-sort]=\"ariaSortFor(slot.column)\"\n        >\n          @switch (slot.kind) {\n            @case ('selection') {\n              <label class=\"mecx-table-select-all\">\n                <span class=\"mecx-sr-only\">{{ labels().selectAll }}</span>\n                <monkey-checkbox\n                  size=\"sm\"\n                  [value]=\"allSelected()\"\n                  [indeterminate]=\"someSelected()\"\n                  [disabled]=\"loading() || !hasSelectable()\"\n                  (onChange)=\"toggleAllRows()\"\n                />\n              </label>\n            }\n            @case ('expand') {\n              <span class=\"mecx-sr-only\">{{ labels().detail }}</span>\n            }\n            @default {\n              @if (hasMenu(slot.column)) {\n                <button\n                  #trigger\n                  type=\"button\"\n                  class=\"mecx-table-heading mecx-table-trigger\"\n                  aria-haspopup=\"menu\"\n                  [attr.aria-expanded]=\"openMenu() === slot.key\"\n                  (click)=\"toggleMenu(slot.column)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"heading\"\n                    [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n                  />\n                </button>\n\n                <ng-template\n                  [monkeyPopover]=\"openMenu() === slot.key\"\n                  [monkeyPopoverTarget]=\"trigger\"\n                  [monkeyPopoverClosed]=\"closeMenu\"\n                  monkeyPopoverDir=\"ltr\"\n                  [monkeyPopoverHideHeader]=\"true\"\n                  monkeyPopoverCloseOnClick=\"monkey-option\"\n                >\n                  <div class=\"mecx-table-menu\">\n                    @if (slot.column.sortable()) {\n                      @let sortText = sortLabels(slot.column);\n                      <monkey-option\n                        [selected]=\"isSortedBy(slot.column, 'ascending')\"\n                        (click)=\"sortBy(slot.column, 'ascending')\"\n                      >\n                        <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n                        {{ sortText.asc }}\n                      </monkey-option>\n                      <monkey-option\n                        [selected]=\"isSortedBy(slot.column, 'descending')\"\n                        (click)=\"sortBy(slot.column, 'descending')\"\n                      >\n                        <i class=\"mk-i mk-i-arrows-up-down sm\" aria-hidden=\"true\"></i>\n                        {{ sortText.desc }}\n                      </monkey-option>\n                    }\n\n                    @if (canReorder(slot.column)) {\n                      @if (slot.column.sortable()) {\n                        <monkey-divider />\n                      }\n                      <monkey-option\n                        [disabled]=\"!canMove(slot.column, -1)\"\n                        (click)=\"move(slot.column, -1)\"\n                      >\n                        <i class=\"mk-i mk-i-arrow-line-left sm\" aria-hidden=\"true\"></i>\n                        {{ labels().moveLeft }}\n                      </monkey-option>\n                      <monkey-option\n                        [disabled]=\"!canMove(slot.column, 1)\"\n                        (click)=\"move(slot.column, 1)\"\n                      >\n                        <i class=\"mk-i mk-i-arrow-line-right sm\" aria-hidden=\"true\"></i>\n                        {{ labels().moveRight }}\n                      </monkey-option>\n                    }\n\n                    @if (canHide(slot.column) || canPin(slot.column)) {\n                      @if (slot.column.sortable() || canReorder(slot.column)) {\n                        <monkey-divider />\n                      }\n                      @if (canHide(slot.column)) {\n                        <monkey-option [disabled]=\"isLastColumn()\" (click)=\"hide(slot.column)\">\n                          <i class=\"mk-i mk-i-eye-closed sm\" aria-hidden=\"true\"></i>\n                          {{ labels().hide }}\n                        </monkey-option>\n                      }\n                      @if (canPin(slot.column)) {\n                        <monkey-option (click)=\"togglePin(slot.column)\">\n                          <i class=\"mk-i mk-i-pin-navigation sm\" aria-hidden=\"true\"></i>\n                          {{ slot.column.pinned() !== 'none' ? labels().unpin : labels().pin }}\n                        </monkey-option>\n                      }\n                    }\n                  </div>\n                </ng-template>\n              } @else {\n                <div class=\"mecx-table-heading\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"heading\"\n                    [ngTemplateOutletContext]=\"{ $implicit: slot.column }\"\n                  />\n                </div>\n              }\n            }\n          }\n        </th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #dataRow let-view>\n  <tr\n    class=\"mecx-table-row mecx-table-row--data\"\n    [class.mecx-table-row--odd]=\"view.index % 2 === 1\"\n    [class.mecx-table-row--selected]=\"view.selected\"\n    [attr.aria-rowindex]=\"virtual() ? view.index + 2 : null\"\n    [style.height.px]=\"virtual() ? rowHeight() : null\"\n  >\n    @for (slot of slots(); track slot.key) {\n      <td\n        class=\"mecx-table-cell\"\n        [class.mecx-table-cell--end]=\"slot.align === 'end'\"\n        [class.mecx-table-cell--control]=\"slot.kind !== 'data'\"\n        [class.mecx-table-cell--pinned]=\"slot.pinned !== 'none'\"\n        [style.left.px]=\"slot.pinned === 'left' ? slot.offset : null\"\n        [style.right.px]=\"slot.pinned === 'right' ? slot.offset : null\"\n      >\n        @switch (slot.kind) {\n          @case ('selection') {\n            <label class=\"mecx-table-select-row\" [attr.title]=\"view.blockedReason\">\n              <span class=\"mecx-sr-only\">{{ view.selectLabel }}</span>\n              <monkey-checkbox\n                size=\"sm\"\n                [value]=\"view.selected\"\n                [disabled]=\"!!view.blockedReason\"\n                (onChange)=\"toggleRow(view)\"\n              />\n            </label>\n          }\n          @case ('expand') {\n            <monkey-icon-button\n              type=\"tertiary\"\n              size=\"sm\"\n              icon=\"arrow-right\"\n              class=\"mecx-table-expand-toggle\"\n              [class.mecx-table-expand-toggle--open]=\"view.open\"\n              [attr.aria-expanded]=\"view.open\"\n              [attr.aria-label]=\"view.expandLabel\"\n              (click)=\"toggleOpen(view)\"\n            />\n          }\n          @default {\n            @if (slot.column.cell(); as cell) {\n              <ng-container\n                [ngTemplateOutlet]=\"cell.template\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: view.row,\n                  row: view.row,\n                  index: view.index,\n                  first: view.index === 0,\n                  last: view.index === rows().length - 1\n                }\"\n              />\n            }\n          }\n        }\n      </td>\n    }\n  </tr>\n\n  @if (expandable() && view.open) {\n    @if (rowDetailTemplate(); as tpl) {\n      <tr\n        class=\"mecx-table-row mecx-table-row--detail\"\n        [class.mecx-table-row--selected]=\"view.selected\"\n      >\n        <td class=\"mecx-table-cell mecx-table-cell--wide\" [attr.colspan]=\"slots().length\">\n          <ng-container\n            [ngTemplateOutlet]=\"tpl.template\"\n            [ngTemplateOutletContext]=\"{ $implicit: view.row, row: view.row }\"\n          />\n        </td>\n      </tr>\n    }\n  }\n</ng-template>\n\n<ng-template #heading let-column>\n  @if (column.headerCell(); as tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n  } @else {\n    @if (column.labelHidden()) {\n      <span class=\"mecx-sr-only\">{{ column.label() }}</span>\n    } @else {\n      <span class=\"mecx-table-label\">{{ column.label() }}</span>\n      @if (column.unit()) {\n        <span class=\"mecx-table-unit\">{{ column.unit() }}</span>\n      }\n    }\n  }\n</ng-template>\n", styles: [".mecx-table{box-sizing:border-box;display:flex;flex-direction:column;width:100%;overflow:clip;background:var(--mecx-color-white);border:2px solid var(--mecx-color-gray-200);border-radius:16px}.mecx-table-main{display:flex;min-width:0}.mecx-table-viewport{position:relative;flex:1;min-width:0;overflow:clip}.mecx-table-scrollbar-vertical{display:flex;padding:var(--mecx-spaces-xs)}.mecx-table-scroll{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll::-webkit-scrollbar{display:none}.mecx-table-scroll--vertical{overflow-y:auto}.mecx-table-scroll--virtual{display:block;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-scroll--virtual::-webkit-scrollbar{display:none}.mecx-table-head-clip{overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}.mecx-table-head-clip::-webkit-scrollbar{display:none}.mecx-table-scrollbar{padding:var(--mecx-spaces-xs)}.mecx-table-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.mecx-table-scroll--virtual .mecx-table-grid,.mecx-table-grid--head{width:max-content;min-width:100%}.mecx-table-scroll--virtual .cdk-virtual-scroll-content-wrapper{min-width:100%}.mecx-table-grid--head .mecx-table-cell--head{position:static}.mecx-table-grid--head .mecx-table-cell--head.mecx-table-cell--pinned{position:sticky}.mecx-table-caption{padding:var(--mecx-spaces-small);color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em;text-align:left}.mecx-table-cell{padding:var(--mecx-spaces-small);vertical-align:middle;text-align:left;color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);letter-spacing:.01em;background:var(--mecx-color-white);border-bottom:1px solid var(--mecx-color-gray-200);transition:background-color .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-cell--end{--mecx-table-cell-x: flex-end;text-align:right}.mecx-table-cell--control{padding:var(--mecx-spaces-small);text-align:center}.mecx-table-cell--head{position:sticky;top:0;z-index:3;background:var(--mecx-color-gray-50);border-bottom-width:2px}.mecx-table-cell--head:not(.mecx-table-cell--control){padding:0}.mecx-table-cell--wide{padding:var(--mecx-spaces-small)}.mecx-table-cell--pinned{position:sticky;z-index:2}.mecx-table-cell--head.mecx-table-cell--pinned{z-index:4;background:var(--mecx-color-gray-50)}.mecx-table-pinned-shadow{position:absolute;top:0;bottom:0;z-index:5;opacity:0;pointer-events:none;box-shadow:2px 0 4px #4b4a5326,8px 0 18px #4b4a5352;transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-pinned-shadow--end{box-shadow:-2px 0 4px #4b4a5326,-8px 0 18px #4b4a5352}.mecx-table-pinned-shadow--visible{opacity:1}.mecx-table--striped .mecx-table-row--odd .mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-row--detail>.mecx-table-cell{background:var(--mecx-color-gray-50)}.mecx-table-body .mecx-table-row--selected>.mecx-table-cell{background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell{--mecx-table-cell-lift: var(--mecx-color-gray-200);background:var(--mecx-color-gray-300)}.mecx-table-body .mecx-table-row--data:hover>.mecx-table-cell monkey-icon-button .mecx-icon-button:is(:hover){background:var(--mecx-table-cell-lift)}.mecx-table-heading{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;padding:var(--mecx-spaces-cozy) var(--mecx-spaces-small);text-align:left}.mecx-table-cell--end .mecx-table-heading{justify-content:flex-end}.mecx-table-label{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-13);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-unit{color:var(--mecx-color-gray-600);font-size:var(--mecx-fs-12);font-weight:var(--mecx-fw-medium);line-height:var(--mecx-lh-16);letter-spacing:.02em}.mecx-table-trigger{appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-trigger:active{transform:scale(.995)}.mecx-table-trigger:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:-2px}.mecx-table-cell--head:has(.mecx-table-trigger:hover),.mecx-table-cell--active{background:var(--mecx-color-gray-300)}.mecx-table-menu{display:flex;flex-direction:column;gap:4px;min-width:190px;padding:var(--mecx-spaces-xs);background:var(--mecx-color-white);border:1px solid var(--mecx-color-gray-200);border-radius:12px;box-shadow:0 4px 16px #4b4a5326}.mecx-table-menu monkey-option{padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-radius:8px;font-size:var(--mecx-fs-13);line-height:var(--mecx-lh-16);white-space:nowrap}.mecx-table-menu monkey-option>div{align-items:center;gap:var(--mecx-spaces-xs);word-break:normal}.mecx-table-cell--control:has(.mecx-table-expand-toggle){padding-inline:0}.mecx-table-expand-toggle{margin:0}.mecx-table-select-all,.mecx-table-select-row,.mecx-table-expand-toggle{display:inline-flex;align-items:center;justify-content:center;height:32px;vertical-align:middle}.mecx-table-expand-toggle .mk-i{transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.mecx-table-expand-toggle--open .mk-i{transform:rotate(90deg)}.mecx-table-select-all,.mecx-table-select-row{cursor:pointer}.mecx-table-empty{margin:0;color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-regular);line-height:var(--mecx-lh-24);text-align:center}.mecx-table-skeleton{display:block;height:var(--mecx-spaces-cozy);border-radius:4px;background:var(--mecx-color-gray-100)}.mecx-table-fade{position:absolute;top:0;right:0;bottom:0;z-index:5;width:48px;opacity:0;pointer-events:none;background:linear-gradient(to right,transparent,rgba(84,90,99,.34));transition:opacity .15s cubic-bezier(.25,.46,.45,.94);will-change:opacity}.mecx-table-fade--start{right:auto;left:0;background:linear-gradient(to left,transparent,rgba(84,90,99,.34))}.mecx-table-fade--visible{opacity:1}.mecx-table-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);border-top:2px solid var(--mecx-color-gray-200)}.mecx-table-footer .mecx-table-footer-actions{display:flex;align-items:center;gap:var(--mecx-spaces-xs)}.mecx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyTableColumnDirective), { isSignal: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: true }] }], rowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLabel", required: false }] }], rowSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelectable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], maxSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelected", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], hideable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideable", required: false }] }], pinnable: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnable", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], maxVisibleRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleRows", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], columnOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnOrder", required: false }] }, { type: i0.Output, args: ["columnOrderChange"] }], columnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnState", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }], onSortChange: [{ type: i0.Output, args: ["onSortChange"] }], onColumnHidden: [{ type: i0.Output, args: ["onColumnHidden"] }], onColumnStateChange: [{ type: i0.Output, args: ["onColumnStateChange"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], onExpandChange: [{ type: i0.Output, args: ["onExpandChange"] }], emptyTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MonkeyTableEmptyDirective), { isSignal: true }] }], loadingTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MonkeyTableLoadingDirective), { isSignal: true }] }], rowDetailTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MonkeyTableRowDetailDirective), { isSignal: true }] }], plainScroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], headClip: [{ type: i0.ViewChild, args: ['headClip', { isSignal: true }] }], virtualViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }] } });
 
 /** ************************
@@ -12659,7 +12719,7 @@ class MonkeyUserProfileButtonComponent {
         <ng-content />
       </div>
     </ng-template>
-  `, isInline: true, styles: ["monkey-user-profile-button{padding:4px;background:var(--mecx-color-gray-100);border-radius:8px;max-width:140px;cursor:pointer;display:inline-flex;gap:4px;align-items:center}monkey-user-profile-button.open .arrow{transform:rotate(180deg)}monkey-user-profile-button monkey-avatar{background-color:var(--mecx-color-white)}monkey-user-profile-button.sm{max-width:150px}monkey-user-profile-button.md{border-radius:12px;max-width:160px}monkey-user-profile-button.lg{border-radius:16px;max-width:170px}monkey-user-profile-button .menu{min-width:150px}monkey-user-profile-button monkey-button span{text-decoration:none}\n"], dependencies: [{ kind: "component", type: MonkeyAvatarComponent, selector: "monkey-avatar", inputs: ["size", "src", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["monkey-user-profile-button{padding:4px;background:var(--mecx-color-gray-100);border-radius:8px;max-width:140px;cursor:pointer;display:inline-flex;gap:4px;align-items:center}monkey-user-profile-button.open .arrow{transform:rotate(180deg)}monkey-user-profile-button monkey-avatar{background-color:var(--mecx-color-white)}monkey-user-profile-button.sm{max-width:150px}monkey-user-profile-button.md{border-radius:12px;max-width:160px}monkey-user-profile-button.lg{border-radius:16px;max-width:170px}monkey-user-profile-button .menu{min-width:150px}monkey-user-profile-button monkey-button span{text-decoration:none}\n"], dependencies: [{ kind: "component", type: MonkeyAvatarComponent, selector: "monkey-avatar", inputs: ["size", "src", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus", "monkeyPopoverCloseOnClick"], outputs: ["monkeyPopoverItemClick"], exportAs: ["monkeyPopover"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyUserProfileButtonComponent, decorators: [{
             type: Component,
@@ -12860,5 +12920,5 @@ class MonkeyToastRef {
  * Generated bundle index. Do not edit.
  */
 
-export { DOWNLOAD_TOAST_EXIT_MS, MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_LANG, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyComplexFilterBarComponent, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyDownloadToastComponent, MonkeyDownloadToastService, MonkeyDownloadToastStackComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFilterBarService, MonkeyFilterChipComponent, MonkeyFilterMenuComponent, MonkeyFilterMenuItemComponent, MonkeyFilterSegmentComponent, MonkeyFilterTriggerComponent, MonkeyFormDirective, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPassNumberComponent, MonkeyPassSecretNumberComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeyScrollbarComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableCellDirective, MonkeyTableColumnDirective, MonkeyTableComponent, MonkeyTableEmptyDirective, MonkeyTableHeaderCellDirective, MonkeyTableLoadingDirective, MonkeyTableRowDetailDirective, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, MonkeyUserProfileComponent, addKeys, appliedFrom, ariaSortOf, arityOf, conditionsOf, getCurrencySymbol, indexAtOffset, injectTokenWithWarning, interpolate, isComplete, mergeOrder, offsetOfIndex, panelOf, removeKeys, sameColumnState, selectionState, sortByOrder, toPx, toggleKey, totalHeight, withCondition, withType };
+export { DOWNLOAD_TOAST_EXIT_MS, MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_LANG, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyComplexFilterBarComponent, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyDownloadToastComponent, MonkeyDownloadToastService, MonkeyDownloadToastStackComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFilterBarService, MonkeyFilterChipComponent, MonkeyFilterMenuComponent, MonkeyFilterMenuItemComponent, MonkeyFilterSegmentComponent, MonkeyFilterTriggerComponent, MonkeyFormDirective, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPassNumberComponent, MonkeyPassSecretNumberComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeyScrollbarComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableCellDirective, MonkeyTableColumnDirective, MonkeyTableComponent, MonkeyTableEmptyDirective, MonkeyTableHeaderCellDirective, MonkeyTableLoadingDirective, MonkeyTableRowDetailDirective, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, MonkeyUserProfileComponent, addKeys, appliedFrom, ariaSortOf, arityOf, closeOnClickAttribute, conditionsOf, getCurrencySymbol, indexAtOffset, injectTokenWithWarning, interpolate, isComplete, mergeOrder, offsetOfIndex, panelOf, removeKeys, sameColumnState, selectionState, sortByOrder, toPx, toggleKey, totalHeight, withCondition, withType };
 //# sourceMappingURL=monkey-style-guide.mjs.map