@acorex/components 22.4.16 → 22.4.18

package/fesm2022/acorex-components-check-box.mjs

@@ -116,7 +116,7 @@ class AXCheckBoxComponent extends classes((MXValueComponent), MXColorComponent)
                 multi: true,
             },
             { provide: AXComponent, useExisting: AXCheckBoxComponent },
-        ], queries: [{ propertyName: "_labels", predicate: AXLabelComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-checkbox-label\" [class.ax-state-readonly]=\"readonly\" [class.ax-state-disabled]=\"disabled\">\n  <div class=\"ax-checkbox-start-side\">\n    @if (isLoading()) {\n      <div class=\"ax-loading-container\">\n        <ax-loading></ax-loading>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        class=\"ax-check-box\"\n        type=\"checkbox\"\n        [indeterminate]=\"_stateIndeterminate\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"_handleModelChange($event)\"\n        [checked]=\"value\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [tabindex]=\"tabIndex\"\n        (focus)=\"emitOnFocusEvent($event)\"\n        (blur)=\"emitOnBlurEvent($event)\"\n        #cb\n      />\n      <div class=\"ax-checkbox-background\" (click)=\"changeValue()\">\n        @if (cb.indeterminate) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n            <rect x=\"3\" y=\"7\" width=\"10\" height=\"2\" />\n          </svg>\n        }\n        @if (cb.checked) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n            <path\n              d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"\n            />\n          </svg>\n        }\n      </div>\n    }\n  </div>\n  <div class=\"ax-checkbox-end-side\">\n    <ng-content select=\"ax-label\"></ng-content>\n    <ng-content select=\"ax-form-hint\"></ng-content>\n    <span class=\"ax-error-container\"></span>\n  </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{.ax-checkbox-label{display:flex;width:fit-content;cursor:pointer;align-items:flex-start;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);-webkit-user-select:none;user-select:none}.ax-checkbox-label.ax-state-disabled .ax-check-box:disabled{opacity:100%}.ax-checkbox-label .ax-checkbox-start-side{position:relative;display:flex;align-items:center;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5)}.ax-checkbox-label .ax-checkbox-start-side .ax-loading-container{width:calc(var(--spacing, .25rem) * 4)}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box{margin:calc(var(--spacing, .25rem) * 0);width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);min-width:calc(var(--spacing, .25rem) * 4);cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:var(--radius-sm, .25rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:checked,.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:indeterminate{border-color:var(--ax-comp-bg,var(--color-primary));background-color:var(--ax-comp-bg,var(--color-primary));background-size:contain;background-repeat:no-repeat}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus-visible,.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus{border-color:var(--ax-comp-bg,var(--color-primary));--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--ax-comp-border,rgba(var(--ax-sys-color-primary-surface)));--tw-outline-style: none;outline-style:none}@supports (color: color-mix(in lab,red,red)){.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus-visible,.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus{--tw-ring-color: color-mix(in oklab, var(--ax-comp-border,var(--color-primary)) 30%, transparent)}}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:disabled{cursor:not-allowed;opacity:50%}.ax-checkbox-label .ax-checkbox-start-side .ax-checkbox-background{position:absolute}.ax-checkbox-label .ax-checkbox-start-side .ax-checkbox-background svg{fill:var(--ax-comp-text,var(--color-on-primary))}.ax-checkbox-label .ax-checkbox-end-side{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}.ax-checkbox-label .ax-checkbox-end-side ax-label label{margin-bottom:calc(var(--spacing, .25rem) * 0)!important}.ax-checkbox-label .ax-checkbox-end-side ax-form-hint{margin:calc(var(--spacing, .25rem) * 0)!important;cursor:text;-webkit-user-select:text;user-select:text}.ax-checkbox-label .ax-checkbox-end-side ax-label,.ax-checkbox-label .ax-checkbox-end-side ax-form-hint,.ax-checkbox-label .ax-checkbox-end-side .ax-error-container{padding-inline-start:calc(var(--spacing, .25rem) * 3)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "_labels", predicate: AXLabelComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-checkbox-label\" [class.ax-state-readonly]=\"readonly\" [class.ax-state-disabled]=\"disabled\">\n  <div class=\"ax-checkbox-start-side\">\n    @if (isLoading()) {\n      <div class=\"ax-loading-container\">\n        <ax-loading></ax-loading>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        class=\"ax-check-box\"\n        type=\"checkbox\"\n        [indeterminate]=\"_stateIndeterminate\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"_handleModelChange($event)\"\n        [checked]=\"value\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [tabindex]=\"tabIndex\"\n        (focus)=\"emitOnFocusEvent($event)\"\n        (blur)=\"emitOnBlurEvent($event)\"\n        #cb\n      />\n      <div class=\"ax-checkbox-background\" (click)=\"changeValue()\">\n        @if (cb.indeterminate) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n            <rect x=\"3\" y=\"7\" width=\"10\" height=\"2\" />\n          </svg>\n        }\n        @if (cb.checked) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n            <path\n              d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"\n            />\n          </svg>\n        }\n      </div>\n    }\n  </div>\n  <div class=\"ax-checkbox-end-side\">\n    <ng-content select=\"ax-label\"></ng-content>\n    <ng-content select=\"ax-form-hint\"></ng-content>\n    <span class=\"ax-error-container\"></span>\n  </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{.ax-checkbox-label{display:grid;width:fit-content;cursor:pointer;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);-webkit-user-select:none;user-select:none;grid-template-columns:auto 1fr;column-gap:.75rem;row-gap:.25rem;align-items:center}.ax-checkbox-label.ax-state-disabled .ax-check-box:disabled{opacity:100%}.ax-checkbox-label .ax-checkbox-start-side{position:relative;grid-column-start:1;grid-row-start:1;display:flex;width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;align-self:center;--tw-leading: 1;line-height:1}.ax-checkbox-label .ax-checkbox-start-side .ax-loading-container{width:calc(var(--spacing, .25rem) * 4)}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box{margin:calc(var(--spacing, .25rem) * 0);width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);min-width:calc(var(--spacing, .25rem) * 4);cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:var(--radius-sm, .25rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-style:var(--tw-border-style);border-width:2px}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:checked,.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:indeterminate{border-color:var(--ax-comp-bg,var(--color-primary));background-color:var(--ax-comp-bg,var(--color-primary));background-size:contain;background-repeat:no-repeat}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus-visible,.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus{border-color:var(--ax-comp-bg,var(--color-primary));--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--ax-comp-border,rgba(var(--ax-sys-color-primary-surface)));--tw-outline-style: none;outline-style:none}@supports (color: color-mix(in lab,red,red)){.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus-visible,.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus{--tw-ring-color: color-mix(in oklab, var(--ax-comp-border,var(--color-primary)) 30%, transparent)}}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:disabled{cursor:not-allowed;opacity:50%}.ax-checkbox-label .ax-checkbox-start-side .ax-checkbox-background{position:absolute;inset:calc(var(--spacing, .25rem) * 0);display:flex;align-items:center;justify-content:center}.ax-checkbox-label .ax-checkbox-start-side .ax-checkbox-background svg{fill:var(--ax-comp-text,var(--color-on-primary))}.ax-checkbox-label .ax-checkbox-end-side{display:contents}.ax-checkbox-label .ax-checkbox-end-side ax-label{grid-column-start:2;grid-row-start:1;min-height:calc(var(--spacing, .25rem) * 0)}.ax-checkbox-label .ax-checkbox-end-side ax-label label{margin-bottom:calc(var(--spacing, .25rem) * 0)!important;display:block;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-checkbox-label .ax-checkbox-end-side ax-form-hint{grid-column-start:2;grid-row-start:2;margin:calc(var(--spacing, .25rem) * 0)!important;cursor:text;-webkit-user-select:text;user-select:text}.ax-checkbox-label .ax-checkbox-end-side .ax-error-container{grid-column-start:2;grid-row-start:3}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
             type: Component,
@@ -128,7 +128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                             multi: true,
                         },
                         { provide: AXComponent, useExisting: AXCheckBoxComponent },
-                    ], imports: [FormsModule, AXLoadingComponent], template: "<div class=\"ax-checkbox-label\" [class.ax-state-readonly]=\"readonly\" [class.ax-state-disabled]=\"disabled\">\n  <div class=\"ax-checkbox-start-side\">\n    @if (isLoading()) {\n      <div class=\"ax-loading-container\">\n        <ax-loading></ax-loading>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        class=\"ax-check-box\"\n        type=\"checkbox\"\n        [indeterminate]=\"_stateIndeterminate\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"_handleModelChange($event)\"\n        [checked]=\"value\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [tabindex]=\"tabIndex\"\n        (focus)=\"emitOnFocusEvent($event)\"\n        (blur)=\"emitOnBlurEvent($event)\"\n        #cb\n      />\n      <div class=\"ax-checkbox-background\" (click)=\"changeValue()\">\n        @if (cb.indeterminate) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n            <rect x=\"3\" y=\"7\" width=\"10\" height=\"2\" />\n          </svg>\n        }\n        @if (cb.checked) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n            <path\n              d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"\n            />\n          </svg>\n        }\n      </div>\n    }\n  </div>\n  <div class=\"ax-checkbox-end-side\">\n    <ng-content select=\"ax-label\"></ng-content>\n    <ng-content select=\"ax-form-hint\"></ng-content>\n    <span class=\"ax-error-container\"></span>\n  </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{.ax-checkbox-label{display:flex;width:fit-content;cursor:pointer;align-items:flex-start;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);-webkit-user-select:none;user-select:none}.ax-checkbox-label.ax-state-disabled .ax-check-box:disabled{opacity:100%}.ax-checkbox-label .ax-checkbox-start-side{position:relative;display:flex;align-items:center;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5)}.ax-checkbox-label .ax-checkbox-start-side .ax-loading-container{width:calc(var(--spacing, .25rem) * 4)}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box{margin:calc(var(--spacing, .25rem) * 0);width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);min-width:calc(var(--spacing, .25rem) * 4);cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:var(--radius-sm, .25rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:checked,.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:indeterminate{border-color:var(--ax-comp-bg,var(--color-primary));background-color:var(--ax-comp-bg,var(--color-primary));background-size:contain;background-repeat:no-repeat}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus-visible,.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus{border-color:var(--ax-comp-bg,var(--color-primary));--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--ax-comp-border,rgba(var(--ax-sys-color-primary-surface)));--tw-outline-style: none;outline-style:none}@supports (color: color-mix(in lab,red,red)){.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus-visible,.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus{--tw-ring-color: color-mix(in oklab, var(--ax-comp-border,var(--color-primary)) 30%, transparent)}}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:disabled{cursor:not-allowed;opacity:50%}.ax-checkbox-label .ax-checkbox-start-side .ax-checkbox-background{position:absolute}.ax-checkbox-label .ax-checkbox-start-side .ax-checkbox-background svg{fill:var(--ax-comp-text,var(--color-on-primary))}.ax-checkbox-label .ax-checkbox-end-side{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}.ax-checkbox-label .ax-checkbox-end-side ax-label label{margin-bottom:calc(var(--spacing, .25rem) * 0)!important}.ax-checkbox-label .ax-checkbox-end-side ax-form-hint{margin:calc(var(--spacing, .25rem) * 0)!important;cursor:text;-webkit-user-select:text;user-select:text}.ax-checkbox-label .ax-checkbox-end-side ax-label,.ax-checkbox-label .ax-checkbox-end-side ax-form-hint,.ax-checkbox-label .ax-checkbox-end-side .ax-error-container{padding-inline-start:calc(var(--spacing, .25rem) * 3)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], imports: [FormsModule, AXLoadingComponent], template: "<div class=\"ax-checkbox-label\" [class.ax-state-readonly]=\"readonly\" [class.ax-state-disabled]=\"disabled\">\n  <div class=\"ax-checkbox-start-side\">\n    @if (isLoading()) {\n      <div class=\"ax-loading-container\">\n        <ax-loading></ax-loading>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        class=\"ax-check-box\"\n        type=\"checkbox\"\n        [indeterminate]=\"_stateIndeterminate\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"_handleModelChange($event)\"\n        [checked]=\"value\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [tabindex]=\"tabIndex\"\n        (focus)=\"emitOnFocusEvent($event)\"\n        (blur)=\"emitOnBlurEvent($event)\"\n        #cb\n      />\n      <div class=\"ax-checkbox-background\" (click)=\"changeValue()\">\n        @if (cb.indeterminate) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n            <rect x=\"3\" y=\"7\" width=\"10\" height=\"2\" />\n          </svg>\n        }\n        @if (cb.checked) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n            <path\n              d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"\n            />\n          </svg>\n        }\n      </div>\n    }\n  </div>\n  <div class=\"ax-checkbox-end-side\">\n    <ng-content select=\"ax-label\"></ng-content>\n    <ng-content select=\"ax-form-hint\"></ng-content>\n    <span class=\"ax-error-container\"></span>\n  </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{.ax-checkbox-label{display:grid;width:fit-content;cursor:pointer;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);-webkit-user-select:none;user-select:none;grid-template-columns:auto 1fr;column-gap:.75rem;row-gap:.25rem;align-items:center}.ax-checkbox-label.ax-state-disabled .ax-check-box:disabled{opacity:100%}.ax-checkbox-label .ax-checkbox-start-side{position:relative;grid-column-start:1;grid-row-start:1;display:flex;width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);align-items:center;justify-content:center;align-self:center;--tw-leading: 1;line-height:1}.ax-checkbox-label .ax-checkbox-start-side .ax-loading-container{width:calc(var(--spacing, .25rem) * 4)}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box{margin:calc(var(--spacing, .25rem) * 0);width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);min-width:calc(var(--spacing, .25rem) * 4);cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:var(--radius-sm, .25rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-style:var(--tw-border-style);border-width:2px}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:checked,.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:indeterminate{border-color:var(--ax-comp-bg,var(--color-primary));background-color:var(--ax-comp-bg,var(--color-primary));background-size:contain;background-repeat:no-repeat}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus-visible,.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus{border-color:var(--ax-comp-bg,var(--color-primary));--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--ax-comp-border,rgba(var(--ax-sys-color-primary-surface)));--tw-outline-style: none;outline-style:none}@supports (color: color-mix(in lab,red,red)){.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus-visible,.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:focus{--tw-ring-color: color-mix(in oklab, var(--ax-comp-border,var(--color-primary)) 30%, transparent)}}.ax-checkbox-label .ax-checkbox-start-side .ax-check-box:disabled{cursor:not-allowed;opacity:50%}.ax-checkbox-label .ax-checkbox-start-side .ax-checkbox-background{position:absolute;inset:calc(var(--spacing, .25rem) * 0);display:flex;align-items:center;justify-content:center}.ax-checkbox-label .ax-checkbox-start-side .ax-checkbox-background svg{fill:var(--ax-comp-text,var(--color-on-primary))}.ax-checkbox-label .ax-checkbox-end-side{display:contents}.ax-checkbox-label .ax-checkbox-end-side ax-label{grid-column-start:2;grid-row-start:1;min-height:calc(var(--spacing, .25rem) * 0)}.ax-checkbox-label .ax-checkbox-end-side ax-label label{margin-bottom:calc(var(--spacing, .25rem) * 0)!important;display:block;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-checkbox-label .ax-checkbox-end-side ax-form-hint{grid-column-start:2;grid-row-start:2;margin:calc(var(--spacing, .25rem) * 0)!important;cursor:text;-webkit-user-select:text;user-select:text}.ax-checkbox-label .ax-checkbox-end-side .ax-error-container{grid-column-start:2;grid-row-start:3}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], _labels: [{
                 type: ContentChildren,
                 args: [AXLabelComponent]

package/fesm2022/acorex-components-check-box.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-check-box.mjs","sources":["../../../../packages/components/check-box/src/lib/check-box.component.ts","../../../../packages/components/check-box/src/lib/check-box.component.html","../../../../packages/components/check-box/src/lib/check-box.module.ts","../../../../packages/components/check-box/src/acorex-components-check-box.ts"],"sourcesContent":["import { AXComponent, AXValuableComponent, MXColorComponent, MXValueComponent } from '@acorex/cdk/common';\n\nimport { AXLabelComponent } from '@acorex/components/label';\nimport { AXLoadingComponent } from '@acorex/components/loading';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  ContentChildren,\n  HostBinding,\n  HostListener,\n  Input,\n  QueryList,\n  ViewEncapsulation,\n  forwardRef,\n  input,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\n\n/**\n * A checkbox component that allows users to select or deselect an option.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-check-box',\n  templateUrl: './check-box.component.html',\n  styleUrls: ['./check-box.component.css'],\n  inputs: ['disabled', 'tabIndex', 'readonly', 'color', 'value', 'name', 'id'],\n  outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'],\n  encapsulation: ViewEncapsulation.None,\n\n  providers: [\n    { provide: AXValuableComponent, useExisting: AXCheckBoxComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXCheckBoxComponent),\n      multi: true,\n    },\n    { provide: AXComponent, useExisting: AXCheckBoxComponent },\n  ],\n  imports: [FormsModule, AXLoadingComponent],\n})\nexport class AXCheckBoxComponent extends classes(MXValueComponent<boolean>, MXColorComponent) {\n  isLoading = input(false);\n\n  /**\n   *  @ignore\n   */\n  @ContentChildren(AXLabelComponent)\n  private _labels: QueryList<AXLabelComponent>;\n\n  /**\n   * Sets the checkbox to an indeterminate state.\n   *\n   * @defaultValue false\n   */\n  @Input()\n  public indeterminate = false;\n\n  /**\n   *  @ignore\n   */\n  protected _stateIndeterminate = false;\n\n  /**\n   *  @ignore\n   */\n  protected override internalGetValue(value: unknown): boolean | null {\n    if (!this.indeterminate && value == null) {\n      return false;\n    }\n    if (this.indeterminate && value == null) {\n      return null;\n    }\n    return coerceBooleanProperty(value);\n  }\n\n  /**\n   * Sets the checkbox state based on the provided value.\n   *\n   * @param value - `boolean` or `null`. Determines if the checkbox is checked, unchecked, or indeterminate.\n   */\n  override internalSetValue(value: boolean | null) {\n    if (this.indeterminate && value == null) {\n      this._stateIndeterminate = true;\n      return null;\n    } else if (!this.indeterminate && value == null) {\n      this._stateIndeterminate = false;\n      return false;\n    } else {\n      this._stateIndeterminate = false;\n      return value == true ? true : false;\n    }\n  }\n\n  /**\n   *  @ignore\n   */\n  protected override ngOnInit(): void {\n    super.ngOnInit();\n    //\n    this.registerValidation();\n  }\n\n  /**\n   * @ignore\n   */\n\n  ngAfterViewInit() {\n    this._labels?.forEach((c) => {\n      //TODO: remove listener\n      c.getHostElement().addEventListener('click', () => {\n        this.changeValue();\n      });\n    });\n  }\n\n  /**\n   * @ignore\n   */\n  @HostListener('click', ['$event'])\n  _handleClick(e: UIEvent) {\n    e.stopPropagation();\n    if (this.readonly || this.disabled || this.isLoading()) {\n      e.preventDefault();\n      return false;\n    }\n    return true;\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleModelChange(value: boolean | null) {\n    this.commitValue(value, true);\n  }\n\n  /**\n   * @ignore\n   */\n  @HostBinding('class')\n  private get __hostClass(): string {\n    return `${this.color ? this.color : 'ax-primary'}`;\n  }\n\n  protected changeValue() {\n    if (!this.readonly && !this.disabled && !this.isLoading()) {\n      this.commitValue(!this.value, true);\n    }\n  }\n}\n","<div class=\"ax-checkbox-label\" [class.ax-state-readonly]=\"readonly\" [class.ax-state-disabled]=\"disabled\">\n  <div class=\"ax-checkbox-start-side\">\n    @if (isLoading()) {\n      <div class=\"ax-loading-container\">\n        <ax-loading></ax-loading>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        class=\"ax-check-box\"\n        type=\"checkbox\"\n        [indeterminate]=\"_stateIndeterminate\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"_handleModelChange($event)\"\n        [checked]=\"value\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [tabindex]=\"tabIndex\"\n        (focus)=\"emitOnFocusEvent($event)\"\n        (blur)=\"emitOnBlurEvent($event)\"\n        #cb\n      />\n      <div class=\"ax-checkbox-background\" (click)=\"changeValue()\">\n        @if (cb.indeterminate) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n            <rect x=\"3\" y=\"7\" width=\"10\" height=\"2\" />\n          </svg>\n        }\n        @if (cb.checked) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n            <path\n              d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"\n            />\n          </svg>\n        }\n      </div>\n    }\n  </div>\n  <div class=\"ax-checkbox-end-side\">\n    <ng-content select=\"ax-label\"></ng-content>\n    <ng-content select=\"ax-form-hint\"></ng-content>\n    <span class=\"ax-error-container\"></span>\n  </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n","import { NgModule } from '@angular/core';\nimport { AXCheckBoxComponent } from './check-box.component';\n\n@NgModule({\n  imports: [AXCheckBoxComponent],\n  exports: [AXCheckBoxComponent],\n})\nexport class AXCheckBoxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-check-box.mjs","sources":["../../../../packages/components/check-box/src/lib/check-box.component.ts","../../../../packages/components/check-box/src/lib/check-box.component.html","../../../../packages/components/check-box/src/lib/check-box.module.ts","../../../../packages/components/check-box/src/acorex-components-check-box.ts"],"sourcesContent":["import { AXComponent, AXValuableComponent, MXColorComponent, MXValueComponent } from '@acorex/cdk/common';\n\nimport { AXLabelComponent } from '@acorex/components/label';\nimport { AXLoadingComponent } from '@acorex/components/loading';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  ContentChildren,\n  HostBinding,\n  HostListener,\n  Input,\n  QueryList,\n  ViewEncapsulation,\n  forwardRef,\n  input,\n} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { classes } from 'polytype';\n\n/**\n * A checkbox component that allows users to select or deselect an option.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-check-box',\n  templateUrl: './check-box.component.html',\n  styleUrls: ['./check-box.component.css'],\n  inputs: ['disabled', 'tabIndex', 'readonly', 'color', 'value', 'name', 'id'],\n  outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'],\n  encapsulation: ViewEncapsulation.None,\n\n  providers: [\n    { provide: AXValuableComponent, useExisting: AXCheckBoxComponent },\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXCheckBoxComponent),\n      multi: true,\n    },\n    { provide: AXComponent, useExisting: AXCheckBoxComponent },\n  ],\n  imports: [FormsModule, AXLoadingComponent],\n})\nexport class AXCheckBoxComponent extends classes(MXValueComponent<boolean>, MXColorComponent) {\n  isLoading = input(false);\n\n  /**\n   *  @ignore\n   */\n  @ContentChildren(AXLabelComponent)\n  private _labels: QueryList<AXLabelComponent>;\n\n  /**\n   * Sets the checkbox to an indeterminate state.\n   *\n   * @defaultValue false\n   */\n  @Input()\n  public indeterminate = false;\n\n  /**\n   *  @ignore\n   */\n  protected _stateIndeterminate = false;\n\n  /**\n   *  @ignore\n   */\n  protected override internalGetValue(value: unknown): boolean | null {\n    if (!this.indeterminate && value == null) {\n      return false;\n    }\n    if (this.indeterminate && value == null) {\n      return null;\n    }\n    return coerceBooleanProperty(value);\n  }\n\n  /**\n   * Sets the checkbox state based on the provided value.\n   *\n   * @param value - `boolean` or `null`. Determines if the checkbox is checked, unchecked, or indeterminate.\n   */\n  override internalSetValue(value: boolean | null) {\n    if (this.indeterminate && value == null) {\n      this._stateIndeterminate = true;\n      return null;\n    } else if (!this.indeterminate && value == null) {\n      this._stateIndeterminate = false;\n      return false;\n    } else {\n      this._stateIndeterminate = false;\n      return value == true ? true : false;\n    }\n  }\n\n  /**\n   *  @ignore\n   */\n  protected override ngOnInit(): void {\n    super.ngOnInit();\n    //\n    this.registerValidation();\n  }\n\n  /**\n   * @ignore\n   */\n\n  ngAfterViewInit() {\n    this._labels?.forEach((c) => {\n      //TODO: remove listener\n      c.getHostElement().addEventListener('click', () => {\n        this.changeValue();\n      });\n    });\n  }\n\n  /**\n   * @ignore\n   */\n  @HostListener('click', ['$event'])\n  _handleClick(e: UIEvent) {\n    e.stopPropagation();\n    if (this.readonly || this.disabled || this.isLoading()) {\n      e.preventDefault();\n      return false;\n    }\n    return true;\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleModelChange(value: boolean | null) {\n    this.commitValue(value, true);\n  }\n\n  /**\n   * @ignore\n   */\n  @HostBinding('class')\n  private get __hostClass(): string {\n    return `${this.color ? this.color : 'ax-primary'}`;\n  }\n\n  protected changeValue() {\n    if (!this.readonly && !this.disabled && !this.isLoading()) {\n      this.commitValue(!this.value, true);\n    }\n  }\n}\n","<div class=\"ax-checkbox-label\" [class.ax-state-readonly]=\"readonly\" [class.ax-state-disabled]=\"disabled\">\n  <div class=\"ax-checkbox-start-side\">\n    @if (isLoading()) {\n      <div class=\"ax-loading-container\">\n        <ax-loading></ax-loading>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        class=\"ax-check-box\"\n        type=\"checkbox\"\n        [indeterminate]=\"_stateIndeterminate\"\n        [ngModel]=\"value\"\n        (ngModelChange)=\"_handleModelChange($event)\"\n        [checked]=\"value\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [tabindex]=\"tabIndex\"\n        (focus)=\"emitOnFocusEvent($event)\"\n        (blur)=\"emitOnBlurEvent($event)\"\n        #cb\n      />\n      <div class=\"ax-checkbox-background\" (click)=\"changeValue()\">\n        @if (cb.indeterminate) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n            <rect x=\"3\" y=\"7\" width=\"10\" height=\"2\" />\n          </svg>\n        }\n        @if (cb.checked) {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n            <path\n              d=\"M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\"\n            />\n          </svg>\n        }\n      </div>\n    }\n  </div>\n  <div class=\"ax-checkbox-end-side\">\n    <ng-content select=\"ax-label\"></ng-content>\n    <ng-content select=\"ax-form-hint\"></ng-content>\n    <span class=\"ax-error-container\"></span>\n  </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n","import { NgModule } from '@angular/core';\nimport { AXCheckBoxComponent } from './check-box.component';\n\n@NgModule({\n  imports: [AXCheckBoxComponent],\n  exports: [AXCheckBoxComponent],\n})\nexport class AXCheckBoxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-kanban.mjs

@@ -2,9 +2,111 @@ import { NXComponent } from '@acorex/cdk/common';
 import { AXDragDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
 import { AXDecoratorGenericComponent, AXDecoratorHeadingComponent } from '@acorex/components/decorators';
 import { AXTooltipDirective } from '@acorex/components/tooltip';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { isPlatformBrowser, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, computed, ViewEncapsulation, Component } from '@angular/core';
+import { inject, PLATFORM_ID, ElementRef, Renderer2, input, HostListener, Directive, output, computed, ViewEncapsulation, Component } from '@angular/core';
+
+const HOLD_MOVE_CANCEL_PX = 8;
+const HOLD_READY_CLASS = 'ax-kanban-drag-hold-ready';
+/**
+ * Shows a selection border after {@link holdDelay} ms while the pointer is held still,
+ * matching axDrag delay behaviour without changing the drag-drop CDK.
+ */
+class AXKanbanDragHoldHighlightDirective {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.el = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.holdDelay = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "holdDelay" }] : /* istanbul ignore next */ []));
+        this.holdTimer = null;
+        this.activePointerId = null;
+        this.pointerDown = { x: 0, y: 0 };
+        this.listening = false;
+        this.onPointerMove = (e) => this.handlePointerMove(e);
+        this.onPointerUp = (e) => this.handlePointerUp(e);
+        this.onPointerCancel = (e) => this.handlePointerUp(e);
+    }
+    onPointerDown(e) {
+        if (!isPlatformBrowser(this.platformId) || e.button !== 0) {
+            return;
+        }
+        const delay = this.holdDelay();
+        if (delay <= 0) {
+            return;
+        }
+        this.reset();
+        this.activePointerId = e.pointerId;
+        this.pointerDown = { x: e.clientX, y: e.clientY };
+        this.addDocumentListeners();
+        this.holdTimer = setTimeout(() => {
+            this.holdTimer = null;
+            if (this.activePointerId === null) {
+                return;
+            }
+            this.renderer.addClass(this.el.nativeElement, HOLD_READY_CLASS);
+        }, delay);
+    }
+    ngOnDestroy() {
+        this.reset();
+    }
+    handlePointerMove(e) {
+        if (e.pointerId !== this.activePointerId || this.holdTimer === null) {
+            return;
+        }
+        const dx = e.clientX - this.pointerDown.x;
+        const dy = e.clientY - this.pointerDown.y;
+        if (Math.sqrt(dx * dx + dy * dy) > HOLD_MOVE_CANCEL_PX) {
+            this.reset();
+        }
+    }
+    handlePointerUp(e) {
+        if (e.pointerId !== this.activePointerId) {
+            return;
+        }
+        this.reset();
+    }
+    reset() {
+        if (this.holdTimer !== null) {
+            clearTimeout(this.holdTimer);
+            this.holdTimer = null;
+        }
+        this.activePointerId = null;
+        this.removeDocumentListeners();
+        this.renderer.removeClass(this.el.nativeElement, HOLD_READY_CLASS);
+    }
+    addDocumentListeners() {
+        if (!isPlatformBrowser(this.platformId) || this.listening) {
+            return;
+        }
+        const doc = this.el.nativeElement.ownerDocument;
+        doc.addEventListener('pointermove', this.onPointerMove);
+        doc.addEventListener('pointerup', this.onPointerUp);
+        doc.addEventListener('pointercancel', this.onPointerCancel);
+        this.listening = true;
+    }
+    removeDocumentListeners() {
+        if (!this.listening || !isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const doc = this.el.nativeElement.ownerDocument;
+        doc.removeEventListener('pointermove', this.onPointerMove);
+        doc.removeEventListener('pointerup', this.onPointerUp);
+        doc.removeEventListener('pointercancel', this.onPointerCancel);
+        this.listening = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXKanbanDragHoldHighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: AXKanbanDragHoldHighlightDirective, isStandalone: true, selector: "[axKanbanDragHoldHighlight]", inputs: { holdDelay: { classPropertyName: "holdDelay", publicName: "holdDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXKanbanDragHoldHighlightDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axKanbanDragHoldHighlight]',
+                }]
+        }], propDecorators: { holdDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "holdDelay", required: false }] }], onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }] } });
 
 class AXKanbanComponent extends NXComponent {
     constructor() {
@@ -326,9 +428,9 @@ class AXKanbanComponent extends NXComponent {
         this.onItemRightClick.emit({ item: originalItemFromDataSource, nativeEvent: event, sender: this });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXKanbanComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXKanbanComponent, isStandalone: true, selector: "ax-kanban", inputs: { hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, indexField: { classPropertyName: "indexField", publicName: "indexField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, cssClassField: { classPropertyName: "cssClassField", publicName: "cssClassField", isSignal: true, isRequired: false, transformFunction: null }, priorityField: { classPropertyName: "priorityField", publicName: "priorityField", isSignal: true, isRequired: false, transformFunction: null }, statusKeyField: { classPropertyName: "statusKeyField", publicName: "statusKeyField", isSignal: true, isRequired: false, transformFunction: null }, descriptionField: { classPropertyName: "descriptionField", publicName: "descriptionField", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, contentFooterTemplate: { classPropertyName: "contentFooterTemplate", publicName: "contentFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBeforeDrop: "onBeforeDrop", onSortChanged: "onSortChanged", onItemClick: "onItemClick", onActionClick: "onActionClick", onItemDblClick: "onItemDblClick", onItemRightClick: "onItemRightClick" }, usesInheritance: true, ngImport: i0, template: "@for (status of filteredStatuses(); track status.key) {\n  <div class=\"ax-kanban-status {{ status.cssClass }}\">\n    <ax-header>\n      @if (headerTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      } @else {\n        <ax-title>{{ status.title }}</ax-title>\n      }\n    </ax-header>\n    <ax-content axDropList dropListGroup=\"kanban\" [id]=\"stringify(status.key)\" (dropListDropped)=\"drop($event)\">\n      @if (emptyTemplate() && getOriginalItemsById(status.key).length === 0) {\n        <ng-container\n          [ngTemplateOutlet]=\"emptyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      }\n      @if (itemTemplate()) {\n        @for (item of getOriginalItemsById(status.key); track item[keyField()]) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            class=\"{{ item.cssClass }}\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </div>\n        }\n      } @else {\n        @for (item of getItemsById(status.key); track item.id) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            [dragCursor]=\"'grab'\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            class=\"ax-kanban-item  {{ item.cssClass }}\"\n            [ngClass]=\"`ax-kanban-${item.priority ?? 'primary'}-periority`\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ax-heading>\n              <ax-title>\n                <span class=\"ax-kanban-truncate\">{{ item.title }}</span>\n                @if (hasActions()) {\n                  <!-- <ax-icon\n                    class=\"ax-icon ax-icon-more-horizontal ax-kanban-action-icon\"\n                    (click)=\"handleActionClick($event, item)\"\n                  >\n                  </ax-icon> -->\n                }\n              </ax-title>\n              <ax-subtitle>{{ item.description }}</ax-subtitle>\n            </ax-heading>\n          </div>\n        }\n      }\n      @if (contentFooterTemplate()) {\n        <ax-footer>\n          <ng-container\n            [ngTemplateOutlet]=\"contentFooterTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: status }\"\n          ></ng-container>\n        </ax-footer>\n      }\n    </ax-content>\n    @if (footerTemplate()) {\n      <ax-footer>\n        <ng-container\n          [ngTemplateOutlet]=\"footerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      </ax-footer>\n    }\n  </div>\n}\n", styles: ["@layer properties;@layer base{:root{--ax-comp-kanban-status-min-width: 20rem;--ax-comp-kanban-status-min-height: 30rem;--ax-comp-kanban-item-indicator-size: .125rem}}@layer components{ax-kanban{display:grid;grid-auto-columns:var(--ax-comp-kanban-status-min-width);grid-auto-flow:column;gap:calc(var(--spacing, .25rem) * 2);overflow-x:auto}ax-kanban .ax-kanban-status{display:flex;height:var(--ax-comp-kanban-status-min-height);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);overflow-y:auto;border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-lighter-surface));color:rgba(var(--ax-sys-color-on-lighter-surface));clip-path:inset(0 round var(--ax-sys-border-radius))}ax-kanban .ax-kanban-status>ax-header{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:2;background-color:inherit}ax-kanban .ax-kanban-status>ax-header>ax-title{display:block;width:100%;padding-top:calc(var(--spacing, .25rem) * 2);text-align:center;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-kanban .ax-kanban-status ax-content{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2)}ax-kanban .ax-kanban-status ax-content ax-popover{display:none}ax-kanban .ax-kanban-status ax-content .ax-kanban-item{position:relative;width:100%;border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1);color:rgba(var(--ax-sys-color-on-lightest-surface));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:rgba(var(--ax-sys-color-on-darkest-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);position:absolute}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);inset-inline-start:calc(var(--spacing, .25rem) * .5)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);height:calc(100% - (var(--spacing,.25rem) * 2))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);width:var(--ax-comp-kanban-item-indicator-size)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);border-radius:calc(infinity * 1px)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{--tw-content: \"\";content:var(--tw-content)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-primary-periority:before{background-color:rgba(var(--ax-sys-color-primary-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-highest-periority:before{background-color:rgba(var(--ax-sys-color-danger-dark-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-high-periority:before{background-color:rgba(var(--ax-sys-color-danger-600))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-medium-periority:before{background-color:rgba(var(--ax-sys-color-warning-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-low-periority:before{background-color:rgba(var(--ax-sys-color-success-light-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-lowest-periority:before{background-color:rgba(var(--ax-sys-color-success-lightest-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title .ax-kanban-action-icon{cursor:pointer}ax-kanban .ax-kanban-status>ax-footer{position:sticky;bottom:calc(var(--spacing, .25rem) * 0);z-index:2;background-color:inherit}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-content{syntax: \"*\"; initial-value: \"\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-content: \"\"}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped", "sortPreviewChanged"], exportAs: ["axDropList"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorHeadingComponent, selector: "ax-heading", inputs: ["darkMode", "color", "weight"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXKanbanComponent, isStandalone: true, selector: "ax-kanban", inputs: { hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, indexField: { classPropertyName: "indexField", publicName: "indexField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, cssClassField: { classPropertyName: "cssClassField", publicName: "cssClassField", isSignal: true, isRequired: false, transformFunction: null }, priorityField: { classPropertyName: "priorityField", publicName: "priorityField", isSignal: true, isRequired: false, transformFunction: null }, statusKeyField: { classPropertyName: "statusKeyField", publicName: "statusKeyField", isSignal: true, isRequired: false, transformFunction: null }, descriptionField: { classPropertyName: "descriptionField", publicName: "descriptionField", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, contentFooterTemplate: { classPropertyName: "contentFooterTemplate", publicName: "contentFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBeforeDrop: "onBeforeDrop", onSortChanged: "onSortChanged", onItemClick: "onItemClick", onActionClick: "onActionClick", onItemDblClick: "onItemDblClick", onItemRightClick: "onItemRightClick" }, usesInheritance: true, ngImport: i0, template: "@for (status of filteredStatuses(); track status.key) {\n  <div class=\"ax-kanban-status {{ status.cssClass }}\">\n    <ax-header>\n      @if (headerTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      } @else {\n        <ax-title>{{ status.title }}</ax-title>\n      }\n    </ax-header>\n    <ax-content axDropList dropListGroup=\"kanban\" [id]=\"stringify(status.key)\" (dropListDropped)=\"drop($event)\">\n      @if (emptyTemplate() && getOriginalItemsById(status.key).length === 0) {\n        <ng-container\n          [ngTemplateOutlet]=\"emptyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      }\n      @if (itemTemplate()) {\n        @for (item of getOriginalItemsById(status.key); track item[keyField()]) {\n          <div\n            axDrag\n            axKanbanDragHoldHighlight\n            [holdDelay]=\"dragStartDelay()\"\n            [dragData]=\"item\"\n            class=\"{{ item.cssClass }}\"\n            [dragCursor]=\"'grab'\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </div>\n        }\n      } @else {\n        @for (item of getItemsById(status.key); track item.id) {\n          <div\n            axDrag\n            axKanbanDragHoldHighlight\n            [holdDelay]=\"dragStartDelay()\"\n            [dragData]=\"item\"\n            [dragCursor]=\"'grab'\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            class=\"ax-kanban-item  {{ item.cssClass }}\"\n            [ngClass]=\"`ax-kanban-${item.priority ?? 'primary'}-periority`\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ax-heading>\n              <ax-title>\n                <span class=\"ax-kanban-truncate\">{{ item.title }}</span>\n                @if (hasActions()) {\n                  <!-- <ax-icon\n                    class=\"ax-icon ax-icon-more-horizontal ax-kanban-action-icon\"\n                    (click)=\"handleActionClick($event, item)\"\n                  >\n                  </ax-icon> -->\n                }\n              </ax-title>\n              <ax-subtitle>{{ item.description }}</ax-subtitle>\n            </ax-heading>\n          </div>\n        }\n      }\n      @if (contentFooterTemplate()) {\n        <ax-footer>\n          <ng-container\n            [ngTemplateOutlet]=\"contentFooterTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: status }\"\n          ></ng-container>\n        </ax-footer>\n      }\n    </ax-content>\n    @if (footerTemplate()) {\n      <ax-footer>\n        <ng-container\n          [ngTemplateOutlet]=\"footerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      </ax-footer>\n    }\n  </div>\n}\n", styles: ["@layer properties;@layer base{:root{--ax-comp-kanban-status-min-width: 20rem;--ax-comp-kanban-status-min-height: 30rem;--ax-comp-kanban-item-indicator-size: .125rem}}@layer components{ax-kanban{display:grid;grid-auto-columns:var(--ax-comp-kanban-status-min-width);grid-auto-flow:column;gap:calc(var(--spacing, .25rem) * 2);overflow-x:auto}ax-kanban .ax-kanban-status{display:flex;height:var(--ax-comp-kanban-status-min-height);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);overflow-y:auto;border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-lighter-surface));color:rgba(var(--ax-sys-color-on-lighter-surface));clip-path:inset(0 round var(--ax-sys-border-radius))}ax-kanban .ax-kanban-status>ax-header{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:2;background-color:inherit}ax-kanban .ax-kanban-status>ax-header>ax-title{display:block;width:100%;padding-top:calc(var(--spacing, .25rem) * 2);text-align:center;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-kanban .ax-kanban-status ax-content{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2)}ax-kanban .ax-kanban-status ax-content ax-popover{display:none}ax-kanban .ax-kanban-status ax-content .ax-kanban-item{position:relative;width:100%;border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1);color:rgba(var(--ax-sys-color-on-lightest-surface));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:rgba(var(--ax-sys-color-on-darkest-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);position:absolute}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);inset-inline-start:calc(var(--spacing, .25rem) * .5)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);height:calc(100% - (var(--spacing,.25rem) * 2))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);width:var(--ax-comp-kanban-item-indicator-size)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);border-radius:calc(infinity * 1px)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{--tw-content: \"\";content:var(--tw-content)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-primary-periority:before{background-color:rgba(var(--ax-sys-color-primary-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-highest-periority:before{background-color:rgba(var(--ax-sys-color-danger-dark-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-high-periority:before{background-color:rgba(var(--ax-sys-color-danger-600))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-medium-periority:before{background-color:rgba(var(--ax-sys-color-warning-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-low-periority:before{background-color:rgba(var(--ax-sys-color-success-light-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-lowest-periority:before{background-color:rgba(var(--ax-sys-color-success-lightest-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title .ax-kanban-action-icon{cursor:pointer}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-drag-hold-ready{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-primary-500)),var(--tw-shadow, 0 1px 2px 0 rgb(0 0 0 / .05))}ax-kanban .ax-kanban-status ax-content>div[axdrag].ax-kanban-drag-hold-ready{border-radius:calc(var(--ax-sys-border-radius) / 2);box-shadow:0 0 0 2px rgba(var(--ax-sys-color-primary-500))}ax-kanban .ax-kanban-status>ax-footer{position:sticky;bottom:calc(var(--spacing, .25rem) * 0);z-index:2;background-color:inherit}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-content{syntax: \"*\"; initial-value: \"\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-content: \"\"}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped", "sortPreviewChanged"], exportAs: ["axDropList"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorHeadingComponent, selector: "ax-heading", inputs: ["darkMode", "color", "weight"] }, { kind: "directive", type: 
                 // AXDecoratorIconComponent,
-                AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
+                AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "directive", type: AXKanbanDragHoldHighlightDirective, selector: "[axKanbanDragHoldHighlight]", inputs: ["holdDelay"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXKanbanComponent, decorators: [{
             type: Component,
@@ -341,7 +443,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         AXDecoratorHeadingComponent,
                         // AXDecoratorIconComponent,
                         AXTooltipDirective,
-                    ], template: "@for (status of filteredStatuses(); track status.key) {\n  <div class=\"ax-kanban-status {{ status.cssClass }}\">\n    <ax-header>\n      @if (headerTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      } @else {\n        <ax-title>{{ status.title }}</ax-title>\n      }\n    </ax-header>\n    <ax-content axDropList dropListGroup=\"kanban\" [id]=\"stringify(status.key)\" (dropListDropped)=\"drop($event)\">\n      @if (emptyTemplate() && getOriginalItemsById(status.key).length === 0) {\n        <ng-container\n          [ngTemplateOutlet]=\"emptyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      }\n      @if (itemTemplate()) {\n        @for (item of getOriginalItemsById(status.key); track item[keyField()]) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            class=\"{{ item.cssClass }}\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </div>\n        }\n      } @else {\n        @for (item of getItemsById(status.key); track item.id) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            [dragCursor]=\"'grab'\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            class=\"ax-kanban-item  {{ item.cssClass }}\"\n            [ngClass]=\"`ax-kanban-${item.priority ?? 'primary'}-periority`\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ax-heading>\n              <ax-title>\n                <span class=\"ax-kanban-truncate\">{{ item.title }}</span>\n                @if (hasActions()) {\n                  <!-- <ax-icon\n                    class=\"ax-icon ax-icon-more-horizontal ax-kanban-action-icon\"\n                    (click)=\"handleActionClick($event, item)\"\n                  >\n                  </ax-icon> -->\n                }\n              </ax-title>\n              <ax-subtitle>{{ item.description }}</ax-subtitle>\n            </ax-heading>\n          </div>\n        }\n      }\n      @if (contentFooterTemplate()) {\n        <ax-footer>\n          <ng-container\n            [ngTemplateOutlet]=\"contentFooterTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: status }\"\n          ></ng-container>\n        </ax-footer>\n      }\n    </ax-content>\n    @if (footerTemplate()) {\n      <ax-footer>\n        <ng-container\n          [ngTemplateOutlet]=\"footerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      </ax-footer>\n    }\n  </div>\n}\n", styles: ["@layer properties;@layer base{:root{--ax-comp-kanban-status-min-width: 20rem;--ax-comp-kanban-status-min-height: 30rem;--ax-comp-kanban-item-indicator-size: .125rem}}@layer components{ax-kanban{display:grid;grid-auto-columns:var(--ax-comp-kanban-status-min-width);grid-auto-flow:column;gap:calc(var(--spacing, .25rem) * 2);overflow-x:auto}ax-kanban .ax-kanban-status{display:flex;height:var(--ax-comp-kanban-status-min-height);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);overflow-y:auto;border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-lighter-surface));color:rgba(var(--ax-sys-color-on-lighter-surface));clip-path:inset(0 round var(--ax-sys-border-radius))}ax-kanban .ax-kanban-status>ax-header{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:2;background-color:inherit}ax-kanban .ax-kanban-status>ax-header>ax-title{display:block;width:100%;padding-top:calc(var(--spacing, .25rem) * 2);text-align:center;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-kanban .ax-kanban-status ax-content{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2)}ax-kanban .ax-kanban-status ax-content ax-popover{display:none}ax-kanban .ax-kanban-status ax-content .ax-kanban-item{position:relative;width:100%;border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1);color:rgba(var(--ax-sys-color-on-lightest-surface));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:rgba(var(--ax-sys-color-on-darkest-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);position:absolute}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);inset-inline-start:calc(var(--spacing, .25rem) * .5)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);height:calc(100% - (var(--spacing,.25rem) * 2))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);width:var(--ax-comp-kanban-item-indicator-size)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);border-radius:calc(infinity * 1px)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{--tw-content: \"\";content:var(--tw-content)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-primary-periority:before{background-color:rgba(var(--ax-sys-color-primary-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-highest-periority:before{background-color:rgba(var(--ax-sys-color-danger-dark-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-high-periority:before{background-color:rgba(var(--ax-sys-color-danger-600))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-medium-periority:before{background-color:rgba(var(--ax-sys-color-warning-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-low-periority:before{background-color:rgba(var(--ax-sys-color-success-light-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-lowest-periority:before{background-color:rgba(var(--ax-sys-color-success-lightest-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title .ax-kanban-action-icon{cursor:pointer}ax-kanban .ax-kanban-status>ax-footer{position:sticky;bottom:calc(var(--spacing, .25rem) * 0);z-index:2;background-color:inherit}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-content{syntax: \"*\"; initial-value: \"\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-content: \"\"}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                        AXKanbanDragHoldHighlightDirective,
+                    ], template: "@for (status of filteredStatuses(); track status.key) {\n  <div class=\"ax-kanban-status {{ status.cssClass }}\">\n    <ax-header>\n      @if (headerTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      } @else {\n        <ax-title>{{ status.title }}</ax-title>\n      }\n    </ax-header>\n    <ax-content axDropList dropListGroup=\"kanban\" [id]=\"stringify(status.key)\" (dropListDropped)=\"drop($event)\">\n      @if (emptyTemplate() && getOriginalItemsById(status.key).length === 0) {\n        <ng-container\n          [ngTemplateOutlet]=\"emptyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      }\n      @if (itemTemplate()) {\n        @for (item of getOriginalItemsById(status.key); track item[keyField()]) {\n          <div\n            axDrag\n            axKanbanDragHoldHighlight\n            [holdDelay]=\"dragStartDelay()\"\n            [dragData]=\"item\"\n            class=\"{{ item.cssClass }}\"\n            [dragCursor]=\"'grab'\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </div>\n        }\n      } @else {\n        @for (item of getItemsById(status.key); track item.id) {\n          <div\n            axDrag\n            axKanbanDragHoldHighlight\n            [holdDelay]=\"dragStartDelay()\"\n            [dragData]=\"item\"\n            [dragCursor]=\"'grab'\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            class=\"ax-kanban-item  {{ item.cssClass }}\"\n            [ngClass]=\"`ax-kanban-${item.priority ?? 'primary'}-periority`\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ax-heading>\n              <ax-title>\n                <span class=\"ax-kanban-truncate\">{{ item.title }}</span>\n                @if (hasActions()) {\n                  <!-- <ax-icon\n                    class=\"ax-icon ax-icon-more-horizontal ax-kanban-action-icon\"\n                    (click)=\"handleActionClick($event, item)\"\n                  >\n                  </ax-icon> -->\n                }\n              </ax-title>\n              <ax-subtitle>{{ item.description }}</ax-subtitle>\n            </ax-heading>\n          </div>\n        }\n      }\n      @if (contentFooterTemplate()) {\n        <ax-footer>\n          <ng-container\n            [ngTemplateOutlet]=\"contentFooterTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: status }\"\n          ></ng-container>\n        </ax-footer>\n      }\n    </ax-content>\n    @if (footerTemplate()) {\n      <ax-footer>\n        <ng-container\n          [ngTemplateOutlet]=\"footerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      </ax-footer>\n    }\n  </div>\n}\n", styles: ["@layer properties;@layer base{:root{--ax-comp-kanban-status-min-width: 20rem;--ax-comp-kanban-status-min-height: 30rem;--ax-comp-kanban-item-indicator-size: .125rem}}@layer components{ax-kanban{display:grid;grid-auto-columns:var(--ax-comp-kanban-status-min-width);grid-auto-flow:column;gap:calc(var(--spacing, .25rem) * 2);overflow-x:auto}ax-kanban .ax-kanban-status{display:flex;height:var(--ax-comp-kanban-status-min-height);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);overflow-y:auto;border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-lighter-surface));color:rgba(var(--ax-sys-color-on-lighter-surface));clip-path:inset(0 round var(--ax-sys-border-radius))}ax-kanban .ax-kanban-status>ax-header{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:2;background-color:inherit}ax-kanban .ax-kanban-status>ax-header>ax-title{display:block;width:100%;padding-top:calc(var(--spacing, .25rem) * 2);text-align:center;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-kanban .ax-kanban-status ax-content{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2)}ax-kanban .ax-kanban-status ax-content ax-popover{display:none}ax-kanban .ax-kanban-status ax-content .ax-kanban-item{position:relative;width:100%;border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1);color:rgba(var(--ax-sys-color-on-lightest-surface));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:rgba(var(--ax-sys-color-on-darkest-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);position:absolute}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);inset-inline-start:calc(var(--spacing, .25rem) * .5)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);height:calc(100% - (var(--spacing,.25rem) * 2))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);width:var(--ax-comp-kanban-item-indicator-size)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);border-radius:calc(infinity * 1px)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{--tw-content: \"\";content:var(--tw-content)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-primary-periority:before{background-color:rgba(var(--ax-sys-color-primary-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-highest-periority:before{background-color:rgba(var(--ax-sys-color-danger-dark-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-high-periority:before{background-color:rgba(var(--ax-sys-color-danger-600))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-medium-periority:before{background-color:rgba(var(--ax-sys-color-warning-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-low-periority:before{background-color:rgba(var(--ax-sys-color-success-light-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-lowest-periority:before{background-color:rgba(var(--ax-sys-color-success-lightest-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title .ax-kanban-action-icon{cursor:pointer}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-drag-hold-ready{box-shadow:0 0 0 2px rgba(var(--ax-sys-color-primary-500)),var(--tw-shadow, 0 1px 2px 0 rgb(0 0 0 / .05))}ax-kanban .ax-kanban-status ax-content>div[axdrag].ax-kanban-drag-hold-ready{border-radius:calc(var(--ax-sys-border-radius) / 2);box-shadow:0 0 0 2px rgba(var(--ax-sys-color-primary-500))}ax-kanban .ax-kanban-status>ax-footer{position:sticky;bottom:calc(var(--spacing, .25rem) * 0);z-index:2;background-color:inherit}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-content{syntax: \"*\"; initial-value: \"\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-content: \"\"}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { hasActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActions", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], statuses: [{ type: i0.Input, args: [{ isSignal: true, alias: "statuses", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], keyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyField", required: false }] }], indexField: [{ type: i0.Input, args: [{ isSignal: true, alias: "indexField", required: false }] }], titleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleField", required: false }] }], cssClassField: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClassField", required: false }] }], priorityField: [{ type: i0.Input, args: [{ isSignal: true, alias: "priorityField", required: false }] }], statusKeyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusKeyField", required: false }] }], descriptionField: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionField", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], contentFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentFooterTemplate", required: false }] }], tooltipTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTemplate", required: false }] }], onBeforeDrop: [{ type: i0.Output, args: ["onBeforeDrop"] }], onSortChanged: [{ type: i0.Output, args: ["onSortChanged"] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], onActionClick: [{ type: i0.Output, args: ["onActionClick"] }], onItemDblClick: [{ type: i0.Output, args: ["onItemDblClick"] }], onItemRightClick: [{ type: i0.Output, args: ["onItemRightClick"] }] } });
 
 /**