monkey-style-guide 21.2.22 → 21.2.23

package/assets/scss/partials/_variables.scss

@@ -88,6 +88,7 @@ $mecx-weight: (
   bold: 700
 );
 $mecx-spaces: (
+  micro: 4px,
   xs: 8px,
   small: 12px,
   medium: 24px,

package/fesm2022/monkey-style-guide.mjs

@@ -3606,6 +3606,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  * MIT Licence
  ************************* */
 class MonkeyOptionComponent {
+    get hostClasses() {
+        const size = this.size();
+        return size ? `${this.type} ${size}` : this.type;
+    }
     get displayContent() {
         return (this._content?.nativeElement.textContent || '').trim();
     }
@@ -3623,6 +3627,7 @@ class MonkeyOptionComponent {
         this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
         this.disabled = false;
         this.type = 'select';
+        this.size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
         this.tabIndex = 0;
         this.isSelected = computed(() => {
@@ -3647,14 +3652,14 @@ class MonkeyOptionComponent {
         this._selectedState.set(select);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MonkeyOptionComponent, isStandalone: true, selector: "monkey-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-option" }, listeners: { "click": "onClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "attr.id": "id", "class.mecx-option-disabled": "disabled", "class.mecx-option-selected": "isSelected()", "attr.tabindex": "disabled ? -1 : tabIndex", "class": "type" }, classAttribute: "mecx-option" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MonkeyOptionComponent, isStandalone: true, selector: "monkey-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-option" }, listeners: { "click": "onClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "attr.id": "id", "class.mecx-option-disabled": "disabled", "class.mecx-option-selected": "isSelected()", "attr.tabindex": "disabled ? -1 : tabIndex", "class": "hostClasses" }, classAttribute: "mecx-option" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `
     @if (type === 'checkbox') {
       <span class="mecx-option-checkbox">
         <util-icon class="icon" name="check" />
       </span>
     }
     <div #content><ng-content /></div>
-  `, isInline: true, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:var(--mecx-color-white);cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-300)}monkey-option.select.mecx-option-selected svg path{fill:var(--mecx-color-gray-900)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus-visible{outline:unset;outline-offset:1px}monkey-option.radio:focus-visible:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.checkbox .mecx-option-checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box;flex-shrink:0}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:var(--mecx-color-white);cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-300)}monkey-option.select.mecx-option-selected svg path{fill:var(--mecx-color-gray-900)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus-visible{outline:unset;outline-offset:1px}monkey-option.radio:focus-visible:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.checkbox .mecx-option-checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box;flex-shrink:0}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.xs,monkey-option.sm,monkey-option.md,monkey-option.lg{align-items:center;box-sizing:border-box;flex-shrink:0;padding-block:0}monkey-option.xs{height:24px}monkey-option.sm{height:32px}monkey-option.md{height:40px}monkey-option.lg{height:48px}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
             type: Component,
@@ -3672,8 +3677,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                         '[class.mecx-option-disabled]': 'disabled',
                         '[class.mecx-option-selected]': 'isSelected()',
                         '[attr.tabindex]': 'disabled ? -1 : tabIndex',
-                        '[class]': 'type'
-                    }, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:var(--mecx-color-white);cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-300)}monkey-option.select.mecx-option-selected svg path{fill:var(--mecx-color-gray-900)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus-visible{outline:unset;outline-offset:1px}monkey-option.radio:focus-visible:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.checkbox .mecx-option-checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box;flex-shrink:0}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"] }]
+                        '[class]': 'hostClasses'
+                    }, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:var(--mecx-color-white);cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-300)}monkey-option.select.mecx-option-selected svg path{fill:var(--mecx-color-gray-900)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus-visible{outline:unset;outline-offset:1px}monkey-option.radio:focus-visible:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.checkbox .mecx-option-checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box;flex-shrink:0}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.xs,monkey-option.sm,monkey-option.md,monkey-option.lg{align-items:center;box-sizing:border-box;flex-shrink:0;padding-block:0}monkey-option.xs{height:24px}monkey-option.sm{height:32px}monkey-option.md{height:40px}monkey-option.lg{height:48px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _content: [{
                 type: ViewChild,
                 args: ['content', { static: true }]
@@ -3682,7 +3687,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], type: [{
                 type: Input
-            }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], onClick: [{
+            }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }], handleKeyDown: [{
@@ -3944,7 +3949,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", "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"] }, { 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,
@@ -4311,7 +4316,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", "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"] }, { 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,
@@ -9424,7 +9429,7 @@ class MonkeyInputPhoneComponent {
       (blur)="_onBlur()"
       [attr.id]="inputId"
     />
-  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host monkey-select{width:164px;border-right:2px solid var(--mecx-color-gray-400)}:host.mecx-input-phone-disabled monkey-select{border-right:2px solid var(--mecx-color-gray-200)}:host input{width:100%;border:none;margin-left:8px}monkey-option .option-flag{display:flex;align-items:center}monkey-option .option-flag .img-flag{width:20px;height:12px;border:.1px solid var(--mecx-color-gray-200)}monkey-option .option-name{letter-spacing:.48px;margin-left:4px}\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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: "component", type: MonkeySelectComponent, selector: "monkey-select", inputs: ["tabIndex", "placeholder", "loading", "showSearch", "searchPlaceholder", "type", "disabled", "required", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "selected"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }] }); }
+  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host monkey-select{width:164px;border-right:2px solid var(--mecx-color-gray-400)}:host.mecx-input-phone-disabled monkey-select{border-right:2px solid var(--mecx-color-gray-200)}:host input{width:100%;border:none;margin-left:8px}monkey-option .option-flag{display:flex;align-items:center}monkey-option .option-flag .img-flag{width:20px;height:12px;border:.1px solid var(--mecx-color-gray-200)}monkey-option .option-name{letter-spacing:.48px;margin-left:4px}\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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: "component", type: MonkeySelectComponent, selector: "monkey-select", inputs: ["tabIndex", "placeholder", "loading", "showSearch", "searchPlaceholder", "type", "disabled", "required", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "size", "selected"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyInputPhoneComponent, decorators: [{
             type: Component,
@@ -11208,7 +11213,7 @@ class MonkeyPaginationSizeComponent {
         this.id = this.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyPaginationSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MonkeyPaginationSizeComponent, isStandalone: true, selector: "monkey-pagination-size", inputs: { size: "size", disabled: "disabled", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pagination-size" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationSize"], ngImport: i0, template: "<ng-content></ng-content>\r\n<monkey-form-field hideClear size=\"sm\" noFooterSpace>\r\n  <monkey-select\r\n    placeholder=\"\"\r\n    [ngModel]=\"size\"\r\n    (onChange)=\"onChange.next($event)\"\r\n    [disabled]=\"disabled\"\r\n    [showSearch]=\"false\"\r\n  >\r\n    @for (item of sizes; track item) {\r\n      <monkey-option [value]=\"item\">{{ item }}</monkey-option>\r\n    }\r\n  </monkey-select>\r\n</monkey-form-field>\r\n", styles: ["monkey-pagination-size{display:flex;align-items:center;gap:8px}monkey-pagination-size .mecx-form-field-body{height:32px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "component", type: MonkeySelectComponent, selector: "monkey-select", inputs: ["tabIndex", "placeholder", "loading", "showSearch", "searchPlaceholder", "type", "disabled", "required", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "selected"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MonkeyPaginationSizeComponent, isStandalone: true, selector: "monkey-pagination-size", inputs: { size: "size", disabled: "disabled", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pagination-size" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationSize"], ngImport: i0, template: "<ng-content></ng-content>\r\n<monkey-form-field hideClear size=\"sm\" noFooterSpace>\r\n  <monkey-select\r\n    placeholder=\"\"\r\n    [ngModel]=\"size\"\r\n    (onChange)=\"onChange.next($event)\"\r\n    [disabled]=\"disabled\"\r\n    [showSearch]=\"false\"\r\n  >\r\n    @for (item of sizes; track item) {\r\n      <monkey-option [value]=\"item\">{{ item }}</monkey-option>\r\n    }\r\n  </monkey-select>\r\n</monkey-form-field>\r\n", styles: ["monkey-pagination-size{display:flex;align-items:center;gap:8px}monkey-pagination-size .mecx-form-field-body{height:32px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "component", type: MonkeySelectComponent, selector: "monkey-select", inputs: ["tabIndex", "placeholder", "loading", "showSearch", "searchPlaceholder", "type", "disabled", "required", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "size", "selected"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyPaginationSizeComponent, decorators: [{
             type: Component,
@@ -12008,7 +12013,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", "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                >\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MonkeyTableComponent, decorators: [{
             type: Component,