@acorex/components 21.0.1-next.76 → 21.0.1-next.77

package/fesm2022/acorex-components-query-builder.mjs

@@ -203,7 +203,7 @@ class AXQueryBuilderComponent {
         return item.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXQueryBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXQueryBuilderComponent, isStandalone: true, selector: "ax-query-builder", inputs: { columnData: { classPropertyName: "columnData", publicName: "columnData", isSignal: true, isRequired: true, transformFunction: null }, queryData: { classPropertyName: "queryData", publicName: "queryData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { queryData: "queryDataChange", onValueChanged: "onValueChanged" }, providers: [{ provide: AXComponent, useExisting: AXQueryBuilderComponent }], viewQueries: [{ propertyName: "selectBoxRef", first: true, predicate: ["reRender"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (item of queryData(); track trackById(i, item); let i = $index) {\n  <ng-container [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\" [ngTemplateOutlet]=\"query\"> </ng-container>\n}\n\n<ng-template #query let-item let-index=\"index\">\n  @if (item.condition) {\n    <div class=\"ax-recursive-container\">\n      <div class=\"ax-add-condition-container\">\n        <ax-button-group\n          selection=\"single\"\n          (selectedButtonChange)=\"conditionHandler($event, item)\"\n          color=\"primary\"\n          class=\"ax-sm\"\n        >\n          <ax-button-group-item data=\"and\" [selected]=\"item.condition === 'and'\" text=\"And\"> </ax-button-group-item>\n          <ax-button-group-item data=\"or\" [selected]=\"item.condition === 'or'\" text=\"Or\"> </ax-button-group-item>\n        </ax-button-group>\n        <ax-button\n          (onClick)=\"addRulesHandler(item)\"\n          class=\"ax-sm\"\n          color=\"primary\"\n          look=\"blank\"\n          text=\"Add Rules\"\n        ></ax-button>\n        <ax-button\n          (onClick)=\"addGroupHandler(item)\"\n          class=\"ax-sm\"\n          color=\"primary\"\n          look=\"blank\"\n          text=\"Add Group\"\n        ></ax-button>\n        @if (index !== 0) {\n          <ax-button look=\"blank\" (onClick)=\"removeGroupHandler(item)\" class=\"ax-sm\" color=\"danger\">\n            <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n          </ax-button>\n        }\n      </div>\n\n      @for (child of item.rules; track trackById($index, child)) {\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: child }\" [ngTemplateOutlet]=\"query\"> </ng-container>\n      }\n    </div>\n  } @else {\n    <div class=\"ax-rules-container\">\n      <div class=\"ax-input-rules-container\">\n        <ax-select-box\n          (onValueChanged)=\"columnDataHandler($event, item)\"\n          valueField=\"field\"\n          textField=\"label\"\n          [dataSource]=\"columnData()\"\n          placeholder=\"Select Field\"\n        >\n        </ax-select-box>\n\n        <ax-select-box\n          #reRender\n          [disabled]=\"!item.field\"\n          name=\"selectBoxOperator\"\n          (onValueChanged)=\"operatorDataHandler($event, item)\"\n          [dataSource]=\"ds\"\n          placeholder=\"Select Operator\"\n        >\n        </ax-select-box>\n\n        @switch (item.type) {\n          @case ('boolean') {\n            <div class=\"ax-boolean-value-input-container\">\n              @for (boolean of item.inputValues; track $index) {\n                <label>{{ boolean }}</label>\n                <input name=\"same\" [value]=\"boolean\" (input)=\"booleanValueHandler($event, item)\" type=\"radio\" />\n              }\n            </div>\n          }\n          @case ('string') {\n            <ax-text-box (onValueChanged)=\"stringValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-text-box>\n          }\n          @case ('number') {\n            <ax-number-box (onValueChanged)=\"numberValueHandler($event, item)\"></ax-number-box>\n          }\n          @case ('date') {\n            <ax-datetime-box format=\"yyyy/MM/dd\" (onValueChanged)=\"dateValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-datetime-box>\n          }\n        }\n      </div>\n      <ax-button (onClick)=\"removeRulesHandler(item)\" look=\"blank\" class=\"ax-md\" color=\"danger\">\n        <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n      </ax-button>\n    </div>\n  }\n</ng-template>\n", styles: ["@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-border-style:solid}}}@layer components{ax-query-builder{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);--tw-border-style:solid;border-style:solid;border-width:1px;border-color:var(--color-border-default);width:100%;padding:calc(var(--spacing,.25rem) * 4);display:block}ax-query-builder .ax-add-condition-container{margin-block:calc(var(--spacing,.25rem) * 2);gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-query-builder .ax-recursive-container{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));padding-inline-start:calc(var(--spacing,.25rem) * 4)}ax-query-builder .ax-rules-container{margin-block:calc(var(--spacing,.25rem) * 2);align-items:center;display:flex}ax-query-builder .ax-rules-container .ax-input-rules-container{align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;display:flex}ax-query-builder .ax-rules-container:not(:last-child){margin-bottom:calc(var(--spacing,.25rem) * 2)}ax-query-builder .ax-boolean-value-input-container{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "component", type: AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "component", type: AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXQueryBuilderComponent, isStandalone: true, selector: "ax-query-builder", inputs: { columnData: { classPropertyName: "columnData", publicName: "columnData", isSignal: true, isRequired: true, transformFunction: null }, queryData: { classPropertyName: "queryData", publicName: "queryData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { queryData: "queryDataChange", onValueChanged: "onValueChanged" }, providers: [{ provide: AXComponent, useExisting: AXQueryBuilderComponent }], viewQueries: [{ propertyName: "selectBoxRef", first: true, predicate: ["reRender"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (item of queryData(); track trackById(i, item); let i = $index) {\n  <ng-container [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\" [ngTemplateOutlet]=\"query\"> </ng-container>\n}\n\n<ng-template #query let-item let-index=\"index\">\n  @if (item.condition) {\n    <div class=\"ax-recursive-container\">\n      <div class=\"ax-add-condition-container\">\n        <ax-button-group\n          selection=\"single\"\n          (selectedButtonChange)=\"conditionHandler($event, item)\"\n          color=\"primary\"\n          class=\"ax-sm\"\n        >\n          <ax-button-group-item data=\"and\" [selected]=\"item.condition === 'and'\" text=\"And\"> </ax-button-group-item>\n          <ax-button-group-item data=\"or\" [selected]=\"item.condition === 'or'\" text=\"Or\"> </ax-button-group-item>\n        </ax-button-group>\n        <ax-button\n          (onClick)=\"addRulesHandler(item)\"\n          class=\"ax-sm\"\n          color=\"primary\"\n          look=\"blank\"\n          text=\"Add Rules\"\n        ></ax-button>\n        <ax-button\n          (onClick)=\"addGroupHandler(item)\"\n          class=\"ax-sm\"\n          color=\"primary\"\n          look=\"blank\"\n          text=\"Add Group\"\n        ></ax-button>\n        @if (index !== 0) {\n          <ax-button look=\"blank\" (onClick)=\"removeGroupHandler(item)\" class=\"ax-sm\" color=\"danger\">\n            <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n          </ax-button>\n        }\n      </div>\n\n      @for (child of item.rules; track trackById($index, child)) {\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: child }\" [ngTemplateOutlet]=\"query\"> </ng-container>\n      }\n    </div>\n  } @else {\n    <div class=\"ax-rules-container\">\n      <div class=\"ax-input-rules-container\">\n        <ax-select-box\n          (onValueChanged)=\"columnDataHandler($event, item)\"\n          valueField=\"field\"\n          textField=\"label\"\n          [dataSource]=\"columnData()\"\n          placeholder=\"Select Field\"\n        >\n        </ax-select-box>\n\n        <ax-select-box\n          #reRender\n          [disabled]=\"!item.field\"\n          name=\"selectBoxOperator\"\n          (onValueChanged)=\"operatorDataHandler($event, item)\"\n          [dataSource]=\"ds\"\n          placeholder=\"Select Operator\"\n        >\n        </ax-select-box>\n\n        @switch (item.type) {\n          @case ('boolean') {\n            <div class=\"ax-boolean-value-input-container\">\n              @for (boolean of item.inputValues; track $index) {\n                <label>{{ boolean }}</label>\n                <input name=\"same\" [value]=\"boolean\" (input)=\"booleanValueHandler($event, item)\" type=\"radio\" />\n              }\n            </div>\n          }\n          @case ('string') {\n            <ax-text-box (onValueChanged)=\"stringValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-text-box>\n          }\n          @case ('number') {\n            <ax-number-box (onValueChanged)=\"numberValueHandler($event, item)\"></ax-number-box>\n          }\n          @case ('date') {\n            <ax-datetime-box format=\"yyyy/MM/dd\" (onValueChanged)=\"dateValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-datetime-box>\n          }\n        }\n      </div>\n      <ax-button (onClick)=\"removeRulesHandler(item)\" look=\"blank\" class=\"ax-md\" color=\"danger\">\n        <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n      </ax-button>\n    </div>\n  }\n</ng-template>\n", styles: ["@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-border-style:solid}}}@layer components{ax-query-builder{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);--tw-border-style:solid;border-style:solid;border-width:1px;border-color:var(--color-border-default);width:100%;padding:calc(var(--spacing,.25rem) * 4);display:block}ax-query-builder .ax-add-condition-container{margin-block:calc(var(--spacing,.25rem) * 2);gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-query-builder .ax-recursive-container{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));padding-inline-start:calc(var(--spacing,.25rem) * 4)}ax-query-builder .ax-rules-container{margin-block:calc(var(--spacing,.25rem) * 2);align-items:center;display:flex}ax-query-builder .ax-rules-container .ax-input-rules-container{align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;display:flex}ax-query-builder .ax-rules-container:not(:last-child){margin-bottom:calc(var(--spacing,.25rem) * 2)}ax-query-builder .ax-boolean-value-input-container{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "disabledChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "component", type: AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "component", type: AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXQueryBuilderComponent, decorators: [{
             type: Component,
@@ -218,7 +218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXDecoratorClearButtonComponent,
                         AXNumberBoxComponent,
                         AXDateTimeBoxComponent,
-                    ], providers: [{ provide: AXComponent, useExisting: AXQueryBuilderComponent }], template: "@for (item of queryData(); track trackById(i, item); let i = $index) {\n  <ng-container [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\" [ngTemplateOutlet]=\"query\"> </ng-container>\n}\n\n<ng-template #query let-item let-index=\"index\">\n  @if (item.condition) {\n    <div class=\"ax-recursive-container\">\n      <div class=\"ax-add-condition-container\">\n        <ax-button-group\n          selection=\"single\"\n          (selectedButtonChange)=\"conditionHandler($event, item)\"\n          color=\"primary\"\n          class=\"ax-sm\"\n        >\n          <ax-button-group-item data=\"and\" [selected]=\"item.condition === 'and'\" text=\"And\"> </ax-button-group-item>\n          <ax-button-group-item data=\"or\" [selected]=\"item.condition === 'or'\" text=\"Or\"> </ax-button-group-item>\n        </ax-button-group>\n        <ax-button\n          (onClick)=\"addRulesHandler(item)\"\n          class=\"ax-sm\"\n          color=\"primary\"\n          look=\"blank\"\n          text=\"Add Rules\"\n        ></ax-button>\n        <ax-button\n          (onClick)=\"addGroupHandler(item)\"\n          class=\"ax-sm\"\n          color=\"primary\"\n          look=\"blank\"\n          text=\"Add Group\"\n        ></ax-button>\n        @if (index !== 0) {\n          <ax-button look=\"blank\" (onClick)=\"removeGroupHandler(item)\" class=\"ax-sm\" color=\"danger\">\n            <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n          </ax-button>\n        }\n      </div>\n\n      @for (child of item.rules; track trackById($index, child)) {\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: child }\" [ngTemplateOutlet]=\"query\"> </ng-container>\n      }\n    </div>\n  } @else {\n    <div class=\"ax-rules-container\">\n      <div class=\"ax-input-rules-container\">\n        <ax-select-box\n          (onValueChanged)=\"columnDataHandler($event, item)\"\n          valueField=\"field\"\n          textField=\"label\"\n          [dataSource]=\"columnData()\"\n          placeholder=\"Select Field\"\n        >\n        </ax-select-box>\n\n        <ax-select-box\n          #reRender\n          [disabled]=\"!item.field\"\n          name=\"selectBoxOperator\"\n          (onValueChanged)=\"operatorDataHandler($event, item)\"\n          [dataSource]=\"ds\"\n          placeholder=\"Select Operator\"\n        >\n        </ax-select-box>\n\n        @switch (item.type) {\n          @case ('boolean') {\n            <div class=\"ax-boolean-value-input-container\">\n              @for (boolean of item.inputValues; track $index) {\n                <label>{{ boolean }}</label>\n                <input name=\"same\" [value]=\"boolean\" (input)=\"booleanValueHandler($event, item)\" type=\"radio\" />\n              }\n            </div>\n          }\n          @case ('string') {\n            <ax-text-box (onValueChanged)=\"stringValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-text-box>\n          }\n          @case ('number') {\n            <ax-number-box (onValueChanged)=\"numberValueHandler($event, item)\"></ax-number-box>\n          }\n          @case ('date') {\n            <ax-datetime-box format=\"yyyy/MM/dd\" (onValueChanged)=\"dateValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-datetime-box>\n          }\n        }\n      </div>\n      <ax-button (onClick)=\"removeRulesHandler(item)\" look=\"blank\" class=\"ax-md\" color=\"danger\">\n        <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n      </ax-button>\n    </div>\n  }\n</ng-template>\n", styles: ["@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-border-style:solid}}}@layer components{ax-query-builder{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);--tw-border-style:solid;border-style:solid;border-width:1px;border-color:var(--color-border-default);width:100%;padding:calc(var(--spacing,.25rem) * 4);display:block}ax-query-builder .ax-add-condition-container{margin-block:calc(var(--spacing,.25rem) * 2);gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-query-builder .ax-recursive-container{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));padding-inline-start:calc(var(--spacing,.25rem) * 4)}ax-query-builder .ax-rules-container{margin-block:calc(var(--spacing,.25rem) * 2);align-items:center;display:flex}ax-query-builder .ax-rules-container .ax-input-rules-container{align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;display:flex}ax-query-builder .ax-rules-container:not(:last-child){margin-bottom:calc(var(--spacing,.25rem) * 2)}ax-query-builder .ax-boolean-value-input-container{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], providers: [{ provide: AXComponent, useExisting: AXQueryBuilderComponent }], template: "@for (item of queryData(); track trackById(i, item); let i = $index) {\n  <ng-container [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\" [ngTemplateOutlet]=\"query\"> </ng-container>\n}\n\n<ng-template #query let-item let-index=\"index\">\n  @if (item.condition) {\n    <div class=\"ax-recursive-container\">\n      <div class=\"ax-add-condition-container\">\n        <ax-button-group\n          selection=\"single\"\n          (selectedButtonChange)=\"conditionHandler($event, item)\"\n          color=\"primary\"\n          class=\"ax-sm\"\n        >\n          <ax-button-group-item data=\"and\" [selected]=\"item.condition === 'and'\" text=\"And\"> </ax-button-group-item>\n          <ax-button-group-item data=\"or\" [selected]=\"item.condition === 'or'\" text=\"Or\"> </ax-button-group-item>\n        </ax-button-group>\n        <ax-button\n          (onClick)=\"addRulesHandler(item)\"\n          class=\"ax-sm\"\n          color=\"primary\"\n          look=\"blank\"\n          text=\"Add Rules\"\n        ></ax-button>\n        <ax-button\n          (onClick)=\"addGroupHandler(item)\"\n          class=\"ax-sm\"\n          color=\"primary\"\n          look=\"blank\"\n          text=\"Add Group\"\n        ></ax-button>\n        @if (index !== 0) {\n          <ax-button look=\"blank\" (onClick)=\"removeGroupHandler(item)\" class=\"ax-sm\" color=\"danger\">\n            <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n          </ax-button>\n        }\n      </div>\n\n      @for (child of item.rules; track trackById($index, child)) {\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: child }\" [ngTemplateOutlet]=\"query\"> </ng-container>\n      }\n    </div>\n  } @else {\n    <div class=\"ax-rules-container\">\n      <div class=\"ax-input-rules-container\">\n        <ax-select-box\n          (onValueChanged)=\"columnDataHandler($event, item)\"\n          valueField=\"field\"\n          textField=\"label\"\n          [dataSource]=\"columnData()\"\n          placeholder=\"Select Field\"\n        >\n        </ax-select-box>\n\n        <ax-select-box\n          #reRender\n          [disabled]=\"!item.field\"\n          name=\"selectBoxOperator\"\n          (onValueChanged)=\"operatorDataHandler($event, item)\"\n          [dataSource]=\"ds\"\n          placeholder=\"Select Operator\"\n        >\n        </ax-select-box>\n\n        @switch (item.type) {\n          @case ('boolean') {\n            <div class=\"ax-boolean-value-input-container\">\n              @for (boolean of item.inputValues; track $index) {\n                <label>{{ boolean }}</label>\n                <input name=\"same\" [value]=\"boolean\" (input)=\"booleanValueHandler($event, item)\" type=\"radio\" />\n              }\n            </div>\n          }\n          @case ('string') {\n            <ax-text-box (onValueChanged)=\"stringValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-text-box>\n          }\n          @case ('number') {\n            <ax-number-box (onValueChanged)=\"numberValueHandler($event, item)\"></ax-number-box>\n          }\n          @case ('date') {\n            <ax-datetime-box format=\"yyyy/MM/dd\" (onValueChanged)=\"dateValueHandler($event, item)\">\n              <ax-clear-button></ax-clear-button>\n            </ax-datetime-box>\n          }\n        }\n      </div>\n      <ax-button (onClick)=\"removeRulesHandler(item)\" look=\"blank\" class=\"ax-md\" color=\"danger\">\n        <ax-icon icon=\"ax-icon ax-icon-trash\"></ax-icon>\n      </ax-button>\n    </div>\n  }\n</ng-template>\n", styles: ["@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-border-style:solid}}}@layer components{ax-query-builder{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);--tw-border-style:solid;border-style:solid;border-width:1px;border-color:var(--color-border-default);width:100%;padding:calc(var(--spacing,.25rem) * 4);display:block}ax-query-builder .ax-add-condition-container{margin-block:calc(var(--spacing,.25rem) * 2);gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-query-builder .ax-recursive-container{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));padding-inline-start:calc(var(--spacing,.25rem) * 4)}ax-query-builder .ax-rules-container{margin-block:calc(var(--spacing,.25rem) * 2);align-items:center;display:flex}ax-query-builder .ax-rules-container .ax-input-rules-container{align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;display:flex}ax-query-builder .ax-rules-container:not(:last-child){margin-bottom:calc(var(--spacing,.25rem) * 2)}ax-query-builder .ax-boolean-value-input-container{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { columnData: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnData", required: true }] }], queryData: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryData", required: true }] }, { type: i0.Output, args: ["queryDataChange"] }], onValueChanged: [{ type: i0.Output, args: ["onValueChanged"] }], selectBoxRef: [{ type: i0.ViewChild, args: ['reRender', { isSignal: true }] }] } });
 
 const COMPONENT = [AXQueryBuilderComponent];

package/fesm2022/acorex-components-radio.mjs

@@ -40,7 +40,7 @@ class AXRadioComponent extends MXValueComponent {
                 multi: true,
             },
             { provide: AXComponent, useExisting: AXRadioComponent },
-        ], queries: [{ propertyName: "_labels", predicate: AXLabelComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-radio-label\" [class.ax-state-readonly]=\"readonly\" [class.ax-state-disabled]=\"disabled\">\n  <div class=\"ax-radio-start-side\">\n    <input\n      [id]=\"id\"\n      class=\"ax-radio\"\n      type=\"radio\"\n      [ngModel]=\"value\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [tabindex]=\"tabIndex\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      (focus)=\"emitOnFocusEvent($event)\"\n      (blur)=\"emitOnBlurEvent($event)\"\n    />\n  </div>\n  <div class=\"ax-radio-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{@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}}}@layer components{.ax-radio-label{width:fit-content;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;align-items:flex-start;display:flex}.ax-radio-label.ax-state-readonly{opacity:.75}.ax-radio-label .ax-radio-start-side{height:calc(var(--spacing,.25rem) * 5);align-items:center;display:flex}.ax-radio-label .ax-radio-end-side{margin-inline-start:calc(var(--spacing,.25rem) * 3)}}@property --tw-leading{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "_labels", predicate: AXLabelComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-radio-label\" [class.ax-state-readonly]=\"readonly\" [class.ax-state-disabled]=\"disabled\">\n  <div class=\"ax-radio-start-side\">\n    <input\n      [id]=\"id\"\n      class=\"ax-radio\"\n      type=\"radio\"\n      [ngModel]=\"value\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [tabindex]=\"tabIndex\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      (focus)=\"emitOnFocusEvent($event)\"\n      (blur)=\"emitOnBlurEvent($event)\"\n    />\n  </div>\n  <div class=\"ax-radio-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{@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}}}@layer components{.ax-radio-label{width:fit-content;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;align-items:flex-start;display:flex}.ax-radio-label.ax-state-readonly{opacity:.75}.ax-radio-label .ax-radio-start-side{height:calc(var(--spacing,.25rem) * 5);align-items:center;display:flex}.ax-radio-label .ax-radio-end-side{margin-inline-start:calc(var(--spacing,.25rem) * 3)}}@property --tw-leading{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRadioComponent, decorators: [{
             type: Component,
@@ -51,7 +51,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                             multi: true,
                         },
                         { provide: AXComponent, useExisting: AXRadioComponent },
-                    ], imports: [FormsModule], template: "<div class=\"ax-radio-label\" [class.ax-state-readonly]=\"readonly\" [class.ax-state-disabled]=\"disabled\">\n  <div class=\"ax-radio-start-side\">\n    <input\n      [id]=\"id\"\n      class=\"ax-radio\"\n      type=\"radio\"\n      [ngModel]=\"value\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [tabindex]=\"tabIndex\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      (focus)=\"emitOnFocusEvent($event)\"\n      (blur)=\"emitOnBlurEvent($event)\"\n    />\n  </div>\n  <div class=\"ax-radio-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{@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}}}@layer components{.ax-radio-label{width:fit-content;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;align-items:flex-start;display:flex}.ax-radio-label.ax-state-readonly{opacity:.75}.ax-radio-label .ax-radio-start-side{height:calc(var(--spacing,.25rem) * 5);align-items:center;display:flex}.ax-radio-label .ax-radio-end-side{margin-inline-start:calc(var(--spacing,.25rem) * 3)}}@property --tw-leading{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], imports: [FormsModule], template: "<div class=\"ax-radio-label\" [class.ax-state-readonly]=\"readonly\" [class.ax-state-disabled]=\"disabled\">\n  <div class=\"ax-radio-start-side\">\n    <input\n      [id]=\"id\"\n      class=\"ax-radio\"\n      type=\"radio\"\n      [ngModel]=\"value\"\n      [checked]=\"value\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [tabindex]=\"tabIndex\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      (focus)=\"emitOnFocusEvent($event)\"\n      (blur)=\"emitOnBlurEvent($event)\"\n    />\n  </div>\n  <div class=\"ax-radio-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{@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}}}@layer components{.ax-radio-label{width:fit-content;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;align-items:flex-start;display:flex}.ax-radio-label.ax-state-readonly{opacity:.75}.ax-radio-label .ax-radio-start-side{height:calc(var(--spacing,.25rem) * 5);align-items:center;display:flex}.ax-radio-label .ax-radio-end-side{margin-inline-start:calc(var(--spacing,.25rem) * 3)}}@property --tw-leading{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { _labels: [{
                 type: ContentChildren,
                 args: [AXLabelComponent]

package/fesm2022/acorex-components-rail-navigation.mjs

@@ -150,11 +150,11 @@ class AXRailNavigationComponent extends MXBaseComponent {
         return cssClasses;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRailNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: AXRailNavigationComponent, isStandalone: true, selector: "ax-rail-navigation", inputs: { location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXRailNavigationComponent }], queries: [{ propertyName: "railNavItems", predicate: AXRailNavigationItemComponent, isSignal: true }], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix, ax-header\"></ng-content>\n<ng-content select=\"ax-rail-navigation-item, ng-container, ng-content\"></ng-content>\n<div class=\"ax-suffix-container\">\n  <ng-content select=\"ax-suffix, ax-footer\"></ng-content>\n</div>\n<span class=\"ax-rail-indicator\" #indicator></span>\n", styles: ["@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}}}@layer base{:root{--ax-comp-rail-navigation-indicator-size:2px}}@layer components{ax-rail-navigation{height:100%;width:calc(var(--spacing,.25rem) * 28);padding-block:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));flex-direction:column;align-items:center;display:flex;position:relative;overflow-y:auto}ax-rail-navigation .ax-suffix-container{align-items:flex-end;height:100%;display:flex}ax-rail-navigation ax-rail-navigation-item{-webkit-user-select:none;user-select:none;width:100%}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item{cursor:pointer;justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * 5);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)));opacity:.6;transition-property:opacity,background-color;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));flex-direction:column;display:flex}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item ax-icon{border-radius:var(--radius-2xl,1rem);padding-inline:calc(var(--spacing,.25rem) * 5);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));transition-property:background-color,font-weight;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));justify-content:center;display:flex}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item ax-text{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item:hover{opacity:.75}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item.ax-state-disabled{cursor:not-allowed;opacity:.3}@media(hover:hover){ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item.ax-state-disabled:hover{opacity:.3}}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item.ax-state-active{opacity:1}ax-rail-navigation .ax-rail-indicator{display:none}:is(ax-rail-navigation.ax-look-with-line,ax-rail-navigation.ax-look-with-line-color) .ax-rail-indicator{width:var(--ax-comp-rail-navigation-indicator-size);background-color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)));transition-property:height,top;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));display:block;position:absolute}ax-rail-navigation.ax-look-with-line-color .ax-state-active{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-rail-navigation.ax-look-with-line-color .ax-state-active{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) 10%,transparent)}}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item{opacity:.7}@media(hover:hover){:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item:hover{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700);opacity:.85}}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item:hover ax-icon{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)))}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item.ax-state-active{--tw-font-weight:var(--font-weight-extrabold,800);font-weight:var(--font-weight-extrabold,800);opacity:1}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item.ax-state-active ax-icon{background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item.ax-state-active ax-icon:where(.dark,.dark *){background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}ax-rail-navigation.ax-look-pills-color .ax-state-active ax-icon{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 20%,transparent)!important}@supports (color:color-mix(in lab,red,red)){ax-rail-navigation.ax-look-pills-color .ax-state-active ax-icon{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) 20%,transparent)!important}}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: AXRailNavigationComponent, isStandalone: true, selector: "ax-rail-navigation", inputs: { location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXRailNavigationComponent }], queries: [{ propertyName: "railNavItems", predicate: AXRailNavigationItemComponent, isSignal: true }], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix, ax-header\"></ng-content>\n<ng-content select=\"ax-rail-navigation-item, ng-container, ng-content\"></ng-content>\n<div class=\"ax-suffix-container\">\n  <ng-content select=\"ax-suffix, ax-footer\"></ng-content>\n</div>\n<span class=\"ax-rail-indicator\" #indicator></span>\n", styles: ["@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}}}@layer base{:root{--ax-comp-rail-navigation-indicator-size:2px}}@layer components{ax-rail-navigation{height:100%;width:calc(var(--spacing,.25rem) * 28);padding-block:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));flex-direction:column;align-items:center;display:flex;position:relative;overflow-y:auto}ax-rail-navigation .ax-suffix-container{align-items:flex-end;height:100%;display:flex}ax-rail-navigation ax-rail-navigation-item{-webkit-user-select:none;user-select:none;width:100%}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item{cursor:pointer;justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * 5);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)));opacity:.6;transition-property:opacity,background-color;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));flex-direction:column;display:flex}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item ax-icon{border-radius:var(--radius-2xl,1rem);padding-inline:calc(var(--spacing,.25rem) * 5);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));transition-property:background-color,font-weight;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));justify-content:center;display:flex}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item ax-text{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item:hover{opacity:.75}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item.ax-state-disabled{cursor:not-allowed;opacity:.3}@media(hover:hover){ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item.ax-state-disabled:hover{opacity:.3}}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item.ax-state-active{opacity:1}ax-rail-navigation .ax-rail-indicator{display:none}:is(ax-rail-navigation.ax-look-with-line,ax-rail-navigation.ax-look-with-line-color) .ax-rail-indicator{width:var(--ax-comp-rail-navigation-indicator-size);background-color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)));transition-property:height,top;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));display:block;position:absolute}ax-rail-navigation.ax-look-with-line-color .ax-state-active{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-rail-navigation.ax-look-with-line-color .ax-state-active{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) 10%,transparent)}}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item{opacity:.7}@media(hover:hover){:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item:hover{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700);opacity:.85}}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item:hover ax-icon{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)))}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item.ax-state-active{--tw-font-weight:var(--font-weight-extrabold,800);font-weight:var(--font-weight-extrabold,800);opacity:1}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item.ax-state-active ax-icon{background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item.ax-state-active ax-icon:where(.dark,.dark *){background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}ax-rail-navigation.ax-look-pills-color .ax-state-active ax-icon{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 20%,transparent)!important}@supports (color:color-mix(in lab,red,red)){ax-rail-navigation.ax-look-pills-color .ax-state-active ax-icon{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) 20%,transparent)!important}}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRailNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-rail-navigation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXRailNavigationComponent }], template: "<ng-content select=\"ax-prefix, ax-header\"></ng-content>\n<ng-content select=\"ax-rail-navigation-item, ng-container, ng-content\"></ng-content>\n<div class=\"ax-suffix-container\">\n  <ng-content select=\"ax-suffix, ax-footer\"></ng-content>\n</div>\n<span class=\"ax-rail-indicator\" #indicator></span>\n", styles: ["@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}}}@layer base{:root{--ax-comp-rail-navigation-indicator-size:2px}}@layer components{ax-rail-navigation{height:100%;width:calc(var(--spacing,.25rem) * 28);padding-block:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));flex-direction:column;align-items:center;display:flex;position:relative;overflow-y:auto}ax-rail-navigation .ax-suffix-container{align-items:flex-end;height:100%;display:flex}ax-rail-navigation ax-rail-navigation-item{-webkit-user-select:none;user-select:none;width:100%}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item{cursor:pointer;justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * 5);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)));opacity:.6;transition-property:opacity,background-color;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));flex-direction:column;display:flex}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item ax-icon{border-radius:var(--radius-2xl,1rem);padding-inline:calc(var(--spacing,.25rem) * 5);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));transition-property:background-color,font-weight;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));justify-content:center;display:flex}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item ax-text{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item:hover{opacity:.75}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item.ax-state-disabled{cursor:not-allowed;opacity:.3}@media(hover:hover){ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item.ax-state-disabled:hover{opacity:.3}}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item.ax-state-active{opacity:1}ax-rail-navigation .ax-rail-indicator{display:none}:is(ax-rail-navigation.ax-look-with-line,ax-rail-navigation.ax-look-with-line-color) .ax-rail-indicator{width:var(--ax-comp-rail-navigation-indicator-size);background-color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)));transition-property:height,top;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));display:block;position:absolute}ax-rail-navigation.ax-look-with-line-color .ax-state-active{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-rail-navigation.ax-look-with-line-color .ax-state-active{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) 10%,transparent)}}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item{opacity:.7}@media(hover:hover){:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item:hover{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700);opacity:.85}}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item:hover ax-icon{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)))}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item.ax-state-active{--tw-font-weight:var(--font-weight-extrabold,800);font-weight:var(--font-weight-extrabold,800);opacity:1}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item.ax-state-active ax-icon{background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item.ax-state-active ax-icon:where(.dark,.dark *){background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}ax-rail-navigation.ax-look-pills-color .ax-state-active ax-icon{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 20%,transparent)!important}@supports (color:color-mix(in lab,red,red)){ax-rail-navigation.ax-look-pills-color .ax-state-active ax-icon{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) 20%,transparent)!important}}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-rail-navigation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXRailNavigationComponent }], template: "<ng-content select=\"ax-prefix, ax-header\"></ng-content>\n<ng-content select=\"ax-rail-navigation-item, ng-container, ng-content\"></ng-content>\n<div class=\"ax-suffix-container\">\n  <ng-content select=\"ax-suffix, ax-footer\"></ng-content>\n</div>\n<span class=\"ax-rail-indicator\" #indicator></span>\n", styles: ["@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}}}@layer base{:root{--ax-comp-rail-navigation-indicator-size:2px}}@layer components{ax-rail-navigation{height:100%;width:calc(var(--spacing,.25rem) * 28);padding-block:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));flex-direction:column;align-items:center;display:flex;position:relative;overflow-y:auto}ax-rail-navigation .ax-suffix-container{align-items:flex-end;height:100%;display:flex}ax-rail-navigation ax-rail-navigation-item{-webkit-user-select:none;user-select:none;width:100%}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item{cursor:pointer;justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 1);padding-block:calc(var(--spacing,.25rem) * 5);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)));opacity:.6;transition-property:opacity,background-color;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));flex-direction:column;display:flex}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item ax-icon{border-radius:var(--radius-2xl,1rem);padding-inline:calc(var(--spacing,.25rem) * 5);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));transition-property:background-color,font-weight;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));justify-content:center;display:flex}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item ax-text{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item:hover{opacity:.75}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item.ax-state-disabled{cursor:not-allowed;opacity:.3}@media(hover:hover){ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item.ax-state-disabled:hover{opacity:.3}}ax-rail-navigation ax-rail-navigation-item .ax-rail-navigation-item.ax-state-active{opacity:1}ax-rail-navigation .ax-rail-indicator{display:none}:is(ax-rail-navigation.ax-look-with-line,ax-rail-navigation.ax-look-with-line-color) .ax-rail-indicator{width:var(--ax-comp-rail-navigation-indicator-size);background-color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)));transition-property:height,top;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));display:block;position:absolute}ax-rail-navigation.ax-look-with-line-color .ax-state-active{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-rail-navigation.ax-look-with-line-color .ax-state-active{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) 10%,transparent)}}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item{opacity:.7}@media(hover:hover){:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item:hover{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700);opacity:.85}}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item:hover ax-icon{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)))}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item.ax-state-active{--tw-font-weight:var(--font-weight-extrabold,800);font-weight:var(--font-weight-extrabold,800);opacity:1}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item.ax-state-active ax-icon{background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}:is(ax-rail-navigation.ax-look-pills,ax-rail-navigation.ax-look-pills-color) .ax-rail-navigation-item.ax-state-active ax-icon:where(.dark,.dark *){background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)))}ax-rail-navigation.ax-look-pills-color .ax-state-active ax-icon{background-color:color-mix(in srgb,rgba(var(--ax-sys-color-primary-surface)) 20%,transparent)!important}@supports (color:color-mix(in lab,red,red)){ax-rail-navigation.ax-look-pills-color .ax-state-active ax-icon{background-color:color-mix(in oklab,var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) 20%,transparent)!important}}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { indicator: [{ type: i0.ViewChild, args: ['indicator', { isSignal: true }] }], railNavItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXRailNavigationItemComponent), { isSignal: true }] }], location: [{ type: i0.Input, args: [{ isSignal: true, alias: "location", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']

package/fesm2022/acorex-components-range-slider.mjs

@@ -648,7 +648,7 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
                 multi: true,
             },
             { provide: AXComponent, useExisting: AXRangeSliderComponent },
-        ], usesInheritance: true, ngImport: i0, template: "@if (correctMinMax()) {\n  <div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n    <div class=\"ax-range-slider-bar\" (mousedown)=\"onStartBar($event)\" (touchstart)=\"onStartBar($event)\"></div>\n    <div\n      class=\"ax-range-slider-highlight\"\n      [ngStyle]=\"AXRangeSliderHighlight()\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    ></div>\n\n    <div\n      class=\"ax-range-slider-handler\"\n      [ngStyle]=\"AXRangeSliderHandler1()\"\n      name=\"first\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    >\n      @if (hasTooltip()) {\n        <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n      }\n    </div>\n\n    @if (isDual()) {\n      <div\n        class=\"ax-range-slider-handler\"\n        [ngStyle]=\"AXRangeSliderHandler2()\"\n        name=\"second\"\n        (mousedown)=\"onStartBar($event)\"\n        (touchstart)=\"onStartBar($event)\"\n      >\n        @if (hasTooltip()) {\n          <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n        }\n      </div>\n    }\n    @if (hasSnap()) {\n      <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n        @for (item of calculateSnapBar(); track $index) {\n          <div\n            class=\"ax-range-slider-steps\"\n            [ngStyle]=\"isHorizontal() ? { left: getPercantage(item) + '%' } : { bottom: getPercantage(item) + '%' }\"\n          >\n            @if (hasLable()) {\n              <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n                {{ item + min() }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["@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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y: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-font-weight:initial;--tw-border-style:solid;--tw-content:\"\"}}}@layer components{ax-range-slider{padding:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex}ax-range-slider .ax-range-slider.ax-orientation-horizontal{height:calc(var(--spacing,.25rem) * 4);width:100%;position:relative}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{top:50%;left:calc(var(--spacing,.25rem) * 0);z-index:5;height:calc(var(--spacing,.25rem) * 1);--tw-translate-y: -50% ;width:100%;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg-lighter);border-radius:3.40282e38px;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{z-index:6;height:calc(var(--spacing,.25rem) * 2);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg);border-radius:3.40282e38px;position:absolute;top:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{z-index:10;height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6);cursor:pointer;background-color:var(--ax-comp-bg);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));border-radius:3.40282e38px;position:absolute;top:50%;transform:translate(-45%,-50%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover,ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{--tw-shadow-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover,ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{--tw-shadow-color:color-mix(in oklab, var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) var(--tw-shadow-alpha), transparent)}}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{top:calc(var(--spacing,.25rem) * -2);left:calc(var(--spacing,.25rem) * 3);border-radius:var(--radius-xs,.125rem);background-color:var(--ax-comp-bg);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);white-space:nowrap;color:var(--ax-comp-text);position:absolute;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{top:calc(var(--spacing,.25rem) * 7);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-top-style:var(--tw-border-style);border-top-width:8px;border-top-color:var(--ax-comp-bg);--tw-content:\"\";content:var(--tw-content);position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{z-index:4;flex-direction:row;width:100%;display:flex;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{border-left-style:var(--tw-border-style);border-left-width:2px;border-left-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));height:50%;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{top:calc(var(--spacing,.25rem) * 2);text-align:center;position:relative;left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{height:100%;width:calc(var(--spacing,.25rem) * 4);position:relative}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{top:calc(var(--spacing,.25rem) * 0);z-index:5;height:100%;width:calc(var(--spacing,.25rem) * 1);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg-primary-lighter);border-radius:3.40282e38px;position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{z-index:6;width:calc(var(--spacing,.25rem) * 1);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg);border-radius:3.40282e38px;position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{z-index:10;height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6);cursor:pointer;background-color:var(--ax-comp-bg);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));border-radius:3.40282e38px;position:absolute;left:50%;transform:translate(-50%,-55%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border-style:var(--tw-border-style);--tw-shadow-color:rgba(var(--ax-sys-color-primary-surface));border-width:1px;border-color:#0000}@supports (color:color-mix(in lab,red,red)){ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{--tw-shadow-color:color-mix(in oklab, var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) var(--tw-shadow-alpha), transparent)}}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{top:calc(var(--spacing,.25rem) * 9);left:calc(var(--spacing,.25rem) * -8);border-radius:var(--radius-sm,.25rem);background-color:var(--ax-comp-bg);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);white-space:nowrap;color:var(--ax-comp-text);position:absolute;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-style:var(--tw-border-style);--tw-border-style:solid;border-style:solid;border-width:8px;border-bottom-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));--tw-content:\"\";content:var(--tw-content);position:absolute;top:50%;left:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{z-index:4;flex-direction:column;height:100%;display:flex;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{border-top-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));width:50%;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{top:calc(var(--spacing,.25rem) * -3);position:absolute;left:150%}ax-range-slider.ax-state-disabled{cursor:not-allowed;opacity:.5}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{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:0}@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}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (correctMinMax()) {\n  <div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n    <div class=\"ax-range-slider-bar\" (mousedown)=\"onStartBar($event)\" (touchstart)=\"onStartBar($event)\"></div>\n    <div\n      class=\"ax-range-slider-highlight\"\n      [ngStyle]=\"AXRangeSliderHighlight()\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    ></div>\n\n    <div\n      class=\"ax-range-slider-handler\"\n      [ngStyle]=\"AXRangeSliderHandler1()\"\n      name=\"first\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    >\n      @if (hasTooltip()) {\n        <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n      }\n    </div>\n\n    @if (isDual()) {\n      <div\n        class=\"ax-range-slider-handler\"\n        [ngStyle]=\"AXRangeSliderHandler2()\"\n        name=\"second\"\n        (mousedown)=\"onStartBar($event)\"\n        (touchstart)=\"onStartBar($event)\"\n      >\n        @if (hasTooltip()) {\n          <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n        }\n      </div>\n    }\n    @if (hasSnap()) {\n      <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n        @for (item of calculateSnapBar(); track $index) {\n          <div\n            class=\"ax-range-slider-steps\"\n            [ngStyle]=\"isHorizontal() ? { left: getPercantage(item) + '%' } : { bottom: getPercantage(item) + '%' }\"\n          >\n            @if (hasLable()) {\n              <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n                {{ item + min() }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["@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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y: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-font-weight:initial;--tw-border-style:solid;--tw-content:\"\"}}}@layer components{ax-range-slider{padding:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex}ax-range-slider .ax-range-slider.ax-orientation-horizontal{height:calc(var(--spacing,.25rem) * 4);width:100%;position:relative}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{top:50%;left:calc(var(--spacing,.25rem) * 0);z-index:5;height:calc(var(--spacing,.25rem) * 1);--tw-translate-y: -50% ;width:100%;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg-lighter);border-radius:3.40282e38px;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{z-index:6;height:calc(var(--spacing,.25rem) * 2);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg);border-radius:3.40282e38px;position:absolute;top:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{z-index:10;height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6);cursor:pointer;background-color:var(--ax-comp-bg);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));border-radius:3.40282e38px;position:absolute;top:50%;transform:translate(-45%,-50%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover,ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{--tw-shadow-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover,ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{--tw-shadow-color:color-mix(in oklab, var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) var(--tw-shadow-alpha), transparent)}}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{top:calc(var(--spacing,.25rem) * -2);left:calc(var(--spacing,.25rem) * 3);border-radius:var(--radius-xs,.125rem);background-color:var(--ax-comp-bg);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);white-space:nowrap;color:var(--ax-comp-text);position:absolute;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{top:calc(var(--spacing,.25rem) * 7);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-top-style:var(--tw-border-style);border-top-width:8px;border-top-color:var(--ax-comp-bg);--tw-content:\"\";content:var(--tw-content);position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{z-index:4;flex-direction:row;width:100%;display:flex;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{border-left-style:var(--tw-border-style);border-left-width:2px;border-left-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));height:50%;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{top:calc(var(--spacing,.25rem) * 2);text-align:center;position:relative;left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{height:100%;width:calc(var(--spacing,.25rem) * 4);position:relative}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{top:calc(var(--spacing,.25rem) * 0);z-index:5;height:100%;width:calc(var(--spacing,.25rem) * 1);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg-primary-lighter);border-radius:3.40282e38px;position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{z-index:6;width:calc(var(--spacing,.25rem) * 1);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg);border-radius:3.40282e38px;position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{z-index:10;height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6);cursor:pointer;background-color:var(--ax-comp-bg);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));border-radius:3.40282e38px;position:absolute;left:50%;transform:translate(-50%,-55%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border-style:var(--tw-border-style);--tw-shadow-color:rgba(var(--ax-sys-color-primary-surface));border-width:1px;border-color:#0000}@supports (color:color-mix(in lab,red,red)){ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{--tw-shadow-color:color-mix(in oklab, var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) var(--tw-shadow-alpha), transparent)}}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{top:calc(var(--spacing,.25rem) * 9);left:calc(var(--spacing,.25rem) * -8);border-radius:var(--radius-sm,.25rem);background-color:var(--ax-comp-bg);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);white-space:nowrap;color:var(--ax-comp-text);position:absolute;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-style:var(--tw-border-style);--tw-border-style:solid;border-style:solid;border-width:8px;border-bottom-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));--tw-content:\"\";content:var(--tw-content);position:absolute;top:50%;left:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{z-index:4;flex-direction:column;height:100%;display:flex;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{border-top-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));width:50%;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{top:calc(var(--spacing,.25rem) * -3);position:absolute;left:150%}ax-range-slider.ax-state-disabled{cursor:not-allowed;opacity:.5}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{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:0}@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}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRangeSliderComponent, decorators: [{
             type: Component,
@@ -660,7 +660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                             multi: true,
                         },
                         { provide: AXComponent, useExisting: AXRangeSliderComponent },
-                    ], imports: [NgStyle], template: "@if (correctMinMax()) {\n  <div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n    <div class=\"ax-range-slider-bar\" (mousedown)=\"onStartBar($event)\" (touchstart)=\"onStartBar($event)\"></div>\n    <div\n      class=\"ax-range-slider-highlight\"\n      [ngStyle]=\"AXRangeSliderHighlight()\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    ></div>\n\n    <div\n      class=\"ax-range-slider-handler\"\n      [ngStyle]=\"AXRangeSliderHandler1()\"\n      name=\"first\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    >\n      @if (hasTooltip()) {\n        <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n      }\n    </div>\n\n    @if (isDual()) {\n      <div\n        class=\"ax-range-slider-handler\"\n        [ngStyle]=\"AXRangeSliderHandler2()\"\n        name=\"second\"\n        (mousedown)=\"onStartBar($event)\"\n        (touchstart)=\"onStartBar($event)\"\n      >\n        @if (hasTooltip()) {\n          <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n        }\n      </div>\n    }\n    @if (hasSnap()) {\n      <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n        @for (item of calculateSnapBar(); track $index) {\n          <div\n            class=\"ax-range-slider-steps\"\n            [ngStyle]=\"isHorizontal() ? { left: getPercantage(item) + '%' } : { bottom: getPercantage(item) + '%' }\"\n          >\n            @if (hasLable()) {\n              <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n                {{ item + min() }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["@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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y: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-font-weight:initial;--tw-border-style:solid;--tw-content:\"\"}}}@layer components{ax-range-slider{padding:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex}ax-range-slider .ax-range-slider.ax-orientation-horizontal{height:calc(var(--spacing,.25rem) * 4);width:100%;position:relative}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{top:50%;left:calc(var(--spacing,.25rem) * 0);z-index:5;height:calc(var(--spacing,.25rem) * 1);--tw-translate-y: -50% ;width:100%;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg-lighter);border-radius:3.40282e38px;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{z-index:6;height:calc(var(--spacing,.25rem) * 2);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg);border-radius:3.40282e38px;position:absolute;top:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{z-index:10;height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6);cursor:pointer;background-color:var(--ax-comp-bg);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));border-radius:3.40282e38px;position:absolute;top:50%;transform:translate(-45%,-50%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover,ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{--tw-shadow-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover,ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{--tw-shadow-color:color-mix(in oklab, var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) var(--tw-shadow-alpha), transparent)}}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{top:calc(var(--spacing,.25rem) * -2);left:calc(var(--spacing,.25rem) * 3);border-radius:var(--radius-xs,.125rem);background-color:var(--ax-comp-bg);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);white-space:nowrap;color:var(--ax-comp-text);position:absolute;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{top:calc(var(--spacing,.25rem) * 7);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-top-style:var(--tw-border-style);border-top-width:8px;border-top-color:var(--ax-comp-bg);--tw-content:\"\";content:var(--tw-content);position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{z-index:4;flex-direction:row;width:100%;display:flex;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{border-left-style:var(--tw-border-style);border-left-width:2px;border-left-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));height:50%;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{top:calc(var(--spacing,.25rem) * 2);text-align:center;position:relative;left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{height:100%;width:calc(var(--spacing,.25rem) * 4);position:relative}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{top:calc(var(--spacing,.25rem) * 0);z-index:5;height:100%;width:calc(var(--spacing,.25rem) * 1);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg-primary-lighter);border-radius:3.40282e38px;position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{z-index:6;width:calc(var(--spacing,.25rem) * 1);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg);border-radius:3.40282e38px;position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{z-index:10;height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6);cursor:pointer;background-color:var(--ax-comp-bg);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));border-radius:3.40282e38px;position:absolute;left:50%;transform:translate(-50%,-55%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border-style:var(--tw-border-style);--tw-shadow-color:rgba(var(--ax-sys-color-primary-surface));border-width:1px;border-color:#0000}@supports (color:color-mix(in lab,red,red)){ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{--tw-shadow-color:color-mix(in oklab, var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) var(--tw-shadow-alpha), transparent)}}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{top:calc(var(--spacing,.25rem) * 9);left:calc(var(--spacing,.25rem) * -8);border-radius:var(--radius-sm,.25rem);background-color:var(--ax-comp-bg);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);white-space:nowrap;color:var(--ax-comp-text);position:absolute;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-style:var(--tw-border-style);--tw-border-style:solid;border-style:solid;border-width:8px;border-bottom-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));--tw-content:\"\";content:var(--tw-content);position:absolute;top:50%;left:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{z-index:4;flex-direction:column;height:100%;display:flex;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{border-top-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));width:50%;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{top:calc(var(--spacing,.25rem) * -3);position:absolute;left:150%}ax-range-slider.ax-state-disabled{cursor:not-allowed;opacity:.5}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{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:0}@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}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], imports: [NgStyle], template: "@if (correctMinMax()) {\n  <div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n    <div class=\"ax-range-slider-bar\" (mousedown)=\"onStartBar($event)\" (touchstart)=\"onStartBar($event)\"></div>\n    <div\n      class=\"ax-range-slider-highlight\"\n      [ngStyle]=\"AXRangeSliderHighlight()\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    ></div>\n\n    <div\n      class=\"ax-range-slider-handler\"\n      [ngStyle]=\"AXRangeSliderHandler1()\"\n      name=\"first\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    >\n      @if (hasTooltip()) {\n        <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n      }\n    </div>\n\n    @if (isDual()) {\n      <div\n        class=\"ax-range-slider-handler\"\n        [ngStyle]=\"AXRangeSliderHandler2()\"\n        name=\"second\"\n        (mousedown)=\"onStartBar($event)\"\n        (touchstart)=\"onStartBar($event)\"\n      >\n        @if (hasTooltip()) {\n          <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n        }\n      </div>\n    }\n    @if (hasSnap()) {\n      <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n        @for (item of calculateSnapBar(); track $index) {\n          <div\n            class=\"ax-range-slider-steps\"\n            [ngStyle]=\"isHorizontal() ? { left: getPercantage(item) + '%' } : { bottom: getPercantage(item) + '%' }\"\n          >\n            @if (hasLable()) {\n              <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n                {{ item + min() }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["@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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y: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-font-weight:initial;--tw-border-style:solid;--tw-content:\"\"}}}@layer components{ax-range-slider{padding:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex}ax-range-slider .ax-range-slider.ax-orientation-horizontal{height:calc(var(--spacing,.25rem) * 4);width:100%;position:relative}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{top:50%;left:calc(var(--spacing,.25rem) * 0);z-index:5;height:calc(var(--spacing,.25rem) * 1);--tw-translate-y: -50% ;width:100%;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg-lighter);border-radius:3.40282e38px;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{z-index:6;height:calc(var(--spacing,.25rem) * 2);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg);border-radius:3.40282e38px;position:absolute;top:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{z-index:10;height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6);cursor:pointer;background-color:var(--ax-comp-bg);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));border-radius:3.40282e38px;position:absolute;top:50%;transform:translate(-45%,-50%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover,ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{--tw-shadow-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover,ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{--tw-shadow-color:color-mix(in oklab, var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) var(--tw-shadow-alpha), transparent)}}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{top:calc(var(--spacing,.25rem) * -2);left:calc(var(--spacing,.25rem) * 3);border-radius:var(--radius-xs,.125rem);background-color:var(--ax-comp-bg);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);white-space:nowrap;color:var(--ax-comp-text);position:absolute;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{top:calc(var(--spacing,.25rem) * 7);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-top-style:var(--tw-border-style);border-top-width:8px;border-top-color:var(--ax-comp-bg);--tw-content:\"\";content:var(--tw-content);position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{z-index:4;flex-direction:row;width:100%;display:flex;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{border-left-style:var(--tw-border-style);border-left-width:2px;border-left-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));height:50%;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{top:calc(var(--spacing,.25rem) * 2);text-align:center;position:relative;left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{height:100%;width:calc(var(--spacing,.25rem) * 4);position:relative}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{top:calc(var(--spacing,.25rem) * 0);z-index:5;height:100%;width:calc(var(--spacing,.25rem) * 1);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg-primary-lighter);border-radius:3.40282e38px;position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{z-index:6;width:calc(var(--spacing,.25rem) * 1);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg);border-radius:3.40282e38px;position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{z-index:10;height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6);cursor:pointer;background-color:var(--ax-comp-bg);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));border-radius:3.40282e38px;position:absolute;left:50%;transform:translate(-50%,-55%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border-style:var(--tw-border-style);--tw-shadow-color:rgba(var(--ax-sys-color-primary-surface));border-width:1px;border-color:#0000}@supports (color:color-mix(in lab,red,red)){ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{--tw-shadow-color:color-mix(in oklab, var(--color-primary,rgba(var(--ax-sys-color-primary-surface))) var(--tw-shadow-alpha), transparent)}}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{top:calc(var(--spacing,.25rem) * 9);left:calc(var(--spacing,.25rem) * -8);border-radius:var(--radius-sm,.25rem);background-color:var(--ax-comp-bg);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);white-space:nowrap;color:var(--ax-comp-text);position:absolute;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-style:var(--tw-border-style);--tw-border-style:solid;border-style:solid;border-width:8px;border-bottom-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));--tw-content:\"\";content:var(--tw-content);position:absolute;top:50%;left:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{z-index:4;flex-direction:column;height:100%;display:flex;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{border-top-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));width:50%;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{top:calc(var(--spacing,.25rem) * -3);position:absolute;left:150%}ax-range-slider.ax-state-disabled{cursor:not-allowed;opacity:.5}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{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:0}@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}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], snap: [{ type: i0.Input, args: [{ isSignal: true, alias: "snap", required: false }] }], tooltipMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipMode", required: false }] }], snapMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapMode", required: false }] }], hasStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasStep", required: false }] }], hasSnap: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSnap", required: false }] }], hasLable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasLable", required: false }] }], hasTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTooltip", required: false }] }], onWheel: [{
                 type: HostListener,
                 args: ['wheel', ['$event']]

package/fesm2022/acorex-components-rate-picker.mjs

@@ -266,7 +266,7 @@ class AXRatePickerComponent extends MXValueComponent {
                 multi: true,
             },
             { provide: AXComponent, useExisting: AXRatePickerComponent },
-        ], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["c"], descendants: true, isSignal: true }, { propertyName: "ratingEl", first: true, predicate: ["r"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #c\n  class=\"ax-rate-picker-container\"\n  (click)=\"calculateRate($event)\"\n  (touchstart)=\"calculateRate($event)\"\n  (mouseenter)=\"mouseEnter()\"\n  (mouseleave)=\"mouseLeave()\"\n>\n  <div #r class=\"ax-rate-picker-rating\" [style.width.%]=\"ratePercentage()\">\n    <div class=\"ax-rate-picker-icons ax-rp-active\">\n      @for (rate of rates(); track rate) {\n        <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\" [class.pointer]=\"!this.readonly\"></i>\n      }\n    </div>\n  </div>\n  <div class=\"ax-rate-picker-icons ax-rp-inactive\">\n    @for (rate of rates(); track rate) {\n      <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\"></i>\n    }\n  </div>\n</div>\n", styles: ["@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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer components{ax-rate-picker{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ))}ax-rate-picker.ax-active{cursor:pointer}ax-rate-picker.ax-disable{cursor:not-allowed;opacity:.5}ax-rate-picker .ax-rate-picker-container{width:min-content;font-size:xx-large;position:relative}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating{z-index:10;position:relative;overflow:hidden}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons.ax-rp-active{color:var(--ax-comp-bg)}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons.ax-rp-inactive{z-index:5;--tw-translate-x: -50% ;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);color:color-mix(in oklab,var(--color-on-surface,rgba(var(--ax-sys-color-on-surface))) 20%,transparent);position:absolute;top:50%;left:50%}ax-rate-picker.ax-xs{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}ax-rate-picker.ax-sm{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}ax-rate-picker.ax-md{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ))}ax-rate-picker.ax-lg{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)))}ax-rate-picker.ax-xl{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["c"], descendants: true, isSignal: true }, { propertyName: "ratingEl", first: true, predicate: ["r"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #c\n  class=\"ax-rate-picker-container\"\n  (click)=\"calculateRate($event)\"\n  (touchstart)=\"calculateRate($event)\"\n  (mouseenter)=\"mouseEnter()\"\n  (mouseleave)=\"mouseLeave()\"\n>\n  <div #r class=\"ax-rate-picker-rating\" [style.width.%]=\"ratePercentage()\">\n    <div class=\"ax-rate-picker-icons ax-rp-active\">\n      @for (rate of rates(); track rate) {\n        <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\" [class.pointer]=\"!this.readonly\"></i>\n      }\n    </div>\n  </div>\n  <div class=\"ax-rate-picker-icons ax-rp-inactive\">\n    @for (rate of rates(); track rate) {\n      <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\"></i>\n    }\n  </div>\n</div>\n", styles: ["@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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer components{ax-rate-picker{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ))}ax-rate-picker.ax-active{cursor:pointer}ax-rate-picker.ax-disable{cursor:not-allowed;opacity:.5}ax-rate-picker .ax-rate-picker-container{width:min-content;font-size:xx-large;position:relative}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating{z-index:10;position:relative;overflow:hidden}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons.ax-rp-active{color:var(--ax-comp-bg)}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons.ax-rp-inactive{z-index:5;--tw-translate-x: -50% ;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);color:color-mix(in oklab,var(--color-on-surface,rgba(var(--ax-sys-color-on-surface))) 20%,transparent);position:absolute;top:50%;left:50%}ax-rate-picker.ax-xs{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}ax-rate-picker.ax-sm{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}ax-rate-picker.ax-md{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ))}ax-rate-picker.ax-lg{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)))}ax-rate-picker.ax-xl{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRatePickerComponent, decorators: [{
             type: Component,
@@ -278,7 +278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                             multi: true,
                         },
                         { provide: AXComponent, useExisting: AXRatePickerComponent },
-                    ], template: "<div\n  #c\n  class=\"ax-rate-picker-container\"\n  (click)=\"calculateRate($event)\"\n  (touchstart)=\"calculateRate($event)\"\n  (mouseenter)=\"mouseEnter()\"\n  (mouseleave)=\"mouseLeave()\"\n>\n  <div #r class=\"ax-rate-picker-rating\" [style.width.%]=\"ratePercentage()\">\n    <div class=\"ax-rate-picker-icons ax-rp-active\">\n      @for (rate of rates(); track rate) {\n        <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\" [class.pointer]=\"!this.readonly\"></i>\n      }\n    </div>\n  </div>\n  <div class=\"ax-rate-picker-icons ax-rp-inactive\">\n    @for (rate of rates(); track rate) {\n      <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\"></i>\n    }\n  </div>\n</div>\n", styles: ["@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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer components{ax-rate-picker{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ))}ax-rate-picker.ax-active{cursor:pointer}ax-rate-picker.ax-disable{cursor:not-allowed;opacity:.5}ax-rate-picker .ax-rate-picker-container{width:min-content;font-size:xx-large;position:relative}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating{z-index:10;position:relative;overflow:hidden}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons.ax-rp-active{color:var(--ax-comp-bg)}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons.ax-rp-inactive{z-index:5;--tw-translate-x: -50% ;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);color:color-mix(in oklab,var(--color-on-surface,rgba(var(--ax-sys-color-on-surface))) 20%,transparent);position:absolute;top:50%;left:50%}ax-rate-picker.ax-xs{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}ax-rate-picker.ax-sm{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}ax-rate-picker.ax-md{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ))}ax-rate-picker.ax-lg{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)))}ax-rate-picker.ax-xl{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<div\n  #c\n  class=\"ax-rate-picker-container\"\n  (click)=\"calculateRate($event)\"\n  (touchstart)=\"calculateRate($event)\"\n  (mouseenter)=\"mouseEnter()\"\n  (mouseleave)=\"mouseLeave()\"\n>\n  <div #r class=\"ax-rate-picker-rating\" [style.width.%]=\"ratePercentage()\">\n    <div class=\"ax-rate-picker-icons ax-rp-active\">\n      @for (rate of rates(); track rate) {\n        <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\" [class.pointer]=\"!this.readonly\"></i>\n      }\n    </div>\n  </div>\n  <div class=\"ax-rate-picker-icons ax-rp-inactive\">\n    @for (rate of rates(); track rate) {\n      <i class=\"ax-rate-picker-icon fa-solid\" [class]=\"iconName()\"></i>\n    }\n  </div>\n</div>\n", styles: ["@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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer components{ax-rate-picker{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ))}ax-rate-picker.ax-active{cursor:pointer}ax-rate-picker.ax-disable{cursor:not-allowed;opacity:.5}ax-rate-picker .ax-rate-picker-container{width:min-content;font-size:xx-large;position:relative}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating{z-index:10;position:relative;overflow:hidden}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-rating .ax-rate-picker-icons.ax-rp-active{color:var(--ax-comp-bg)}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons{display:flex}ax-rate-picker .ax-rate-picker-container .ax-rate-picker-icons.ax-rp-inactive{z-index:5;--tw-translate-x: -50% ;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);color:color-mix(in oklab,var(--color-on-surface,rgba(var(--ax-sys-color-on-surface))) 20%,transparent);position:absolute;top:50%;left:50%}ax-rate-picker.ax-xs{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}ax-rate-picker.ax-sm{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}ax-rate-picker.ax-md{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ))}ax-rate-picker.ax-lg{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)))}ax-rate-picker.ax-xl{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], hasTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTransition", required: false }] }], containerEl: [{ type: i0.ViewChild, args: ['c', { isSignal: true }] }], ratingEl: [{ type: i0.ViewChild, args: ['r', { isSignal: true }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']

package/fesm2022/acorex-components-result.mjs

@@ -27,11 +27,11 @@ class AXResultComponent extends MXBaseComponent {
         return 'ax-result';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXResultComponent, isStandalone: true, selector: "ax-result", inputs: { caption: "caption", description: "description" }, host: { properties: { "class": "this.hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXResultComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-result-icon\">\n  <ng-content select=\"ax-icon\"></ng-content>\n</div>\n<div class=\"ax-result-title\">\n  <ng-content select=\"ax-title\"></ng-content>\n</div>\n<div class=\"ax-result-content\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@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-font-weight:initial}}}@layer components{ax-result{gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}ax-result .ax-result-icon{text-align:center;font-size:var(--text-5xl,3rem);line-height:var(--tw-leading,var(--text-5xl--line-height,1))}ax-result .ax-result-title,ax-result .ax-result-description{margin-top:calc(var(--spacing,.25rem) * 2);text-align:center}ax-result .ax-result-title{font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2 / 1.5)));--tw-leading:calc(var(--spacing,.25rem) * 8);line-height:calc(var(--spacing,.25rem) * 8);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-result .ax-result-content{text-align:center;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-leading:calc(var(--spacing,.25rem) * 6);line-height:calc(var(--spacing,.25rem) * 6)}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXResultComponent, isStandalone: true, selector: "ax-result", inputs: { caption: "caption", description: "description" }, host: { properties: { "class": "this.hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXResultComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-result-icon\">\n  <ng-content select=\"ax-icon\"></ng-content>\n</div>\n<div class=\"ax-result-title\">\n  <ng-content select=\"ax-title\"></ng-content>\n</div>\n<div class=\"ax-result-content\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@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-font-weight:initial}}}@layer components{ax-result{gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}ax-result .ax-result-icon{text-align:center;font-size:var(--text-5xl,3rem);line-height:var(--tw-leading,var(--text-5xl--line-height,1))}ax-result .ax-result-title,ax-result .ax-result-description{margin-top:calc(var(--spacing,.25rem) * 2);text-align:center}ax-result .ax-result-title{font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2 / 1.5)));--tw-leading:calc(var(--spacing,.25rem) * 8);line-height:calc(var(--spacing,.25rem) * 8);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-result .ax-result-content{text-align:center;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-leading:calc(var(--spacing,.25rem) * 6);line-height:calc(var(--spacing,.25rem) * 6)}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXResultComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-result', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXResultComponent }], template: "<div class=\"ax-result-icon\">\n  <ng-content select=\"ax-icon\"></ng-content>\n</div>\n<div class=\"ax-result-title\">\n  <ng-content select=\"ax-title\"></ng-content>\n</div>\n<div class=\"ax-result-content\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@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-font-weight:initial}}}@layer components{ax-result{gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}ax-result .ax-result-icon{text-align:center;font-size:var(--text-5xl,3rem);line-height:var(--tw-leading,var(--text-5xl--line-height,1))}ax-result .ax-result-title,ax-result .ax-result-description{margin-top:calc(var(--spacing,.25rem) * 2);text-align:center}ax-result .ax-result-title{font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2 / 1.5)));--tw-leading:calc(var(--spacing,.25rem) * 8);line-height:calc(var(--spacing,.25rem) * 8);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-result .ax-result-content{text-align:center;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-leading:calc(var(--spacing,.25rem) * 6);line-height:calc(var(--spacing,.25rem) * 6)}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-result', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXResultComponent }], template: "<div class=\"ax-result-icon\">\n  <ng-content select=\"ax-icon\"></ng-content>\n</div>\n<div class=\"ax-result-title\">\n  <ng-content select=\"ax-title\"></ng-content>\n</div>\n<div class=\"ax-result-content\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@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-font-weight:initial}}}@layer components{ax-result{gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}ax-result .ax-result-icon{text-align:center;font-size:var(--text-5xl,3rem);line-height:var(--tw-leading,var(--text-5xl--line-height,1))}ax-result .ax-result-title,ax-result .ax-result-description{margin-top:calc(var(--spacing,.25rem) * 2);text-align:center}ax-result .ax-result-title{font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2 / 1.5)));--tw-leading:calc(var(--spacing,.25rem) * 8);line-height:calc(var(--spacing,.25rem) * 8);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-result .ax-result-content{text-align:center;font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-leading:calc(var(--spacing,.25rem) * 6);line-height:calc(var(--spacing,.25rem) * 6)}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { caption: [{
                 type: Input
             }], description: [{

package/fesm2022/acorex-components-routing-progress.mjs

@@ -64,11 +64,11 @@ class AXRoutingProgressComponent extends MXBaseComponent {
         this.subscription?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRoutingProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXRoutingProgressComponent, isStandalone: true, selector: "ax-routing-progress", providers: [{ provide: AXComponent, useExisting: AXRoutingProgressComponent }], usesInheritance: true, ngImport: i0, template: "@if (loading) {\n  <div [style.width.%]=\"width\"></div>\n}\n", styles: ["@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-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial}}}@layer components{ax-routing-progress{inset-inline-start:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);height:calc(var(--spacing,.25rem) * 1);width:100%;display:block;position:fixed}ax-routing-progress>div{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));height:100%;transition-property:width,opacity;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));transform:translate(0)}}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXRoutingProgressComponent, isStandalone: true, selector: "ax-routing-progress", providers: [{ provide: AXComponent, useExisting: AXRoutingProgressComponent }], usesInheritance: true, ngImport: i0, template: "@if (loading) {\n  <div [style.width.%]=\"width\"></div>\n}\n", styles: ["@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-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial}}}@layer components{ax-routing-progress{inset-inline-start:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);height:calc(var(--spacing,.25rem) * 1);width:100%;display:block;position:fixed}ax-routing-progress>div{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));height:100%;transition-property:width,opacity;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));transform:translate(0)}}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXRoutingProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-routing-progress', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXRoutingProgressComponent }], template: "@if (loading) {\n  <div [style.width.%]=\"width\"></div>\n}\n", styles: ["@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-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial}}}@layer components{ax-routing-progress{inset-inline-start:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);height:calc(var(--spacing,.25rem) * 1);width:100%;display:block;position:fixed}ax-routing-progress>div{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));height:100%;transition-property:width,opacity;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));transform:translate(0)}}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-routing-progress', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXRoutingProgressComponent }], template: "@if (loading) {\n  <div [style.width.%]=\"width\"></div>\n}\n", styles: ["@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-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial}}}@layer components{ax-routing-progress{inset-inline-start:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);height:calc(var(--spacing,.25rem) * 1);width:100%;display:block;position:fixed}ax-routing-progress>div{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)));height:100%;transition-property:width,opacity;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));transform:translate(0)}}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [] });
 
 const COMPONENT = [AXRoutingProgressComponent];