@acorex/components 17.0.22 → 17.0.24

package/esm2022/select-box/lib/select-box.component.mjs

@@ -246,7 +246,7 @@ export class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MX
                 useClass: MXSelectionBridgeService,
             },
             AXUnsubscriber,
-        ], queries: [{ propertyName: "searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "list", first: true, predicate: AXListComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\" [look]=\"look\" [class.ax-auto-height]=\"autoHeight\">\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-select-box-selection\" [class.ax-multiple]=\"multiple\" [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" (click)=\"toggle()\">\n      @if (selectedItems.length === 0) {\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n      }\n      @for (item of selectedItems; track $index) {\n      @if(selectedTemplate) {\n      <ng-template *ngTemplateOutlet=\"selectedTemplate; context: { $implicit: { data:item } }\"></ng-template>\n      }\n      @else{\n      <div class=\"ax-selected-token\">\n        {{ getDisplayText(item) }}\n        @if (!disabled && !readonly && multiple) {\n        <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n        }\n      </div>\n      }\n      }\n    </div>\n    @if (selectedItems?.length && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggle()\">\n      <!-- @if (isLoading() && !isOpen) {\n        <ax-loading type=\"spinner\"></ax-loading>\n      } @else { -->\n      <span class=\"ax-icon ax-icon-chevron-left ax-arrow-button\" [ngClass]=\"{\n          '-rotation-90': !isOpen,\n          'rotation-90': isOpen\n        }\"></span>\n      <!-- } -->\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div #panel class=\"ax-select-box-panel\" [style.min-width]=\"dropdownSizes.width\">\n      @if (dropdown.isActionsheetStyle) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ caption || placeholder || 'selectbox.popover.title' | translate | async }}</ax-title>\n        <ax-close-button\n          [icon]=\"multiple ? 'ax-icon ax-icon-check !ax-text-primary-500' : 'ax-icon ax-icon-close'\"></ax-close-button>\n      </ax-header>\n      }\n      @if (searchBox) {\n      <div class=\"ax-search-container\">\n        <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n      </div>\n      }\n      @if (renderList) {\n      <ax-list [dataSource]=\"_listDataSource\" [multiple]=\"multiple\" [style.height]=\"dropdownSizes.height\"\n        [valueField]=\"valueField\" [textField]=\"textField\" [emptyTemplate]=\"emptyTemplate ?? empty\"\n        [itemTemplate]=\"itemTemplate\" [loadingTemplate]=\"loadingTemplate\" [ngModel]=\"value\"\n        (onValueChanged)=\"_handleValueChanged($event)\" [selectionMode]=\"'item'\"\n        (onItemClick)=\"_handleOnItemClick($event)\">\n        <ng-template #empty> {{ 'no-result-found' | translate | async}} </ng-template>\n      </ax-list>\n      }\n\n      @if (isLoading()) {\n      @if (loadingTemplate) {\n      <ng-template *ngTemplateOutlet=\"loadingTemplate\"></ng-template>\n      } @else {\n      <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n        <ax-loading></ax-loading>\n      </div>\n      }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>", styles: ["ax-select-box{display:block;width:100%}ax-select-box ax-dropdown-box.ax-auto-height{height:auto!important}ax-select-box .ax-editor-container.ax-look-fill .ax-selected-token{background-color:rgba(var(--ax-color-surface))}ax-select-box .ax-selected-token{display:flex;align-items:center;border-radius:var(--ax-rounded-border-default);padding:.25rem .5rem;color:rgb(var(--ax-color-text-default))}ax-select-box .ax-selected-token .ax-icon-close{margin-inline-start:.5rem;cursor:pointer}ax-select-box .ax-select-box-selection{display:flex;flex:1 1 0%;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.25rem;padding:.25rem;outline:2px solid transparent;outline-offset:2px;height:100%}ax-select-box .ax-select-box-selection>span{white-space:nowrap;padding-inline-end:.75rem;padding-inline-start:1rem}ax-select-box .ax-select-box-selection .ax-selectbox-input{width:0px;opacity:0}ax-select-box .ax-select-box-selection.ax-multiple .ax-selected-token{background-color:rgba(var(--ax-color-on-surface))}ax-select-box .ax-placeholder{padding-inline-end:.75rem;padding-inline-start:1rem}ax-select-box .ax-general-button .ax-arrow-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-select-box .ax-general-button .ax-arrow-button.-rotation-90{transform:rotate(-90deg)}ax-select-box .ax-general-button .ax-arrow-button.rotation-90{transform:rotate(90deg)}.ax-select-box-panel{height:fit-content}.ax-select-box-panel>ax-header.ax-solid{border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default))}.ax-select-box-panel .ax-search-container{padding:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i5.AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: i6.AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "disabledField", "multiple", "selectionMode", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readOnlyChange", "onBlur", "onFocus", "onItemClick", "onScrolledIndexChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "list", first: true, predicate: AXListComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\" [look]=\"look\" [class.ax-auto-height]=\"autoHeight\">\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-select-box-selection\" [class.ax-multiple]=\"multiple\" [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" (click)=\"toggle()\">\n      @if (selectedItems.length === 0) {\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n      }\n      @for (item of selectedItems; track $index) {\n      @if(selectedTemplate) {\n      <ng-template *ngTemplateOutlet=\"selectedTemplate; context: { $implicit: { data:item } }\"></ng-template>\n      }\n      @else{\n      <div class=\"ax-selected-token\">\n        {{ getDisplayText(item) }}\n        @if (!disabled && !readonly && multiple) {\n        <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n        }\n      </div>\n      }\n      }\n    </div>\n    @if (selectedItems?.length && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggle()\">\n      <!-- @if (isLoading() && !isOpen) {\n        <ax-loading type=\"spinner\"></ax-loading>\n      } @else { -->\n      <span class=\"ax-icon ax-icon-chevron-left ax-arrow-button\" [ngClass]=\"{\n          '-rotation-90': !isOpen,\n          'rotation-90': isOpen\n        }\"></span>\n      <!-- } -->\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div #panel class=\"ax-select-box-panel\" [style.min-width]=\"dropdownSizes.width\">\n      @if (dropdown.isActionsheetStyle) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ caption || placeholder || 'selectbox.popover.title' | translate | async }}</ax-title>\n        <ax-close-button\n          [icon]=\"multiple ? 'ax-icon ax-icon-check !ax-text-primary-500' : 'ax-icon ax-icon-close'\"></ax-close-button>\n      </ax-header>\n      }\n      @if (searchBox) {\n      <div class=\"ax-search-container\">\n        <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n      </div>\n      }\n      @if (renderList) {\n      <ax-list [dataSource]=\"_listDataSource\" [multiple]=\"multiple\" [style.height]=\"dropdownSizes.height\"\n        [valueField]=\"valueField\" [textField]=\"textField\" [emptyTemplate]=\"emptyTemplate ?? empty\"\n        [itemTemplate]=\"itemTemplate\" [loadingTemplate]=\"loadingTemplate\" [ngModel]=\"value\"\n        (onValueChanged)=\"_handleValueChanged($event)\" [selectionMode]=\"'item'\"\n        (onItemClick)=\"_handleOnItemClick($event)\">\n        <ng-template #empty> {{ 'no-result-found' | translate | async}} </ng-template>\n      </ax-list>\n      }\n\n      @if (isLoading()) {\n      @if (loadingTemplate) {\n      <ng-template *ngTemplateOutlet=\"loadingTemplate\"></ng-template>\n      } @else {\n      <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n        <ax-loading></ax-loading>\n      </div>\n      }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>", styles: ["ax-select-box{display:block;width:100%}ax-select-box ax-dropdown-box.ax-auto-height{height:auto!important}ax-select-box .ax-editor-container.ax-look-fill .ax-selected-token{background-color:rgba(var(--ax-color-surface))}ax-select-box .ax-selected-token{display:flex;align-items:center;border-radius:var(--ax-rounded-border-default);padding:.25rem .5rem;color:rgb(var(--ax-color-text-default))}ax-select-box .ax-selected-token .ax-icon-close{margin-inline-start:.5rem;cursor:pointer}ax-select-box .ax-select-box-selection{display:flex;flex:1 1 0%;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.25rem;padding:.25rem;outline:2px solid transparent;outline-offset:2px;height:100%}ax-select-box .ax-select-box-selection>span{white-space:nowrap;padding-inline-end:.75rem;padding-inline-start:1rem}ax-select-box .ax-select-box-selection .ax-selectbox-input{width:0px;opacity:0}ax-select-box .ax-select-box-selection.ax-multiple .ax-selected-token{background-color:rgba(var(--ax-color-on-surface))}ax-select-box .ax-placeholder{padding-inline-end:.75rem;padding-inline-start:1rem}ax-select-box .ax-general-button .ax-arrow-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-select-box .ax-general-button .ax-arrow-button.-rotation-90{transform:rotate(-90deg)}ax-select-box .ax-general-button .ax-arrow-button.rotation-90{transform:rotate(90deg)}.ax-select-box-panel{height:fit-content}.ax-select-box-panel>ax-header.ax-solid{border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default))}.ax-select-box-panel>ax-header.ax-solid ax-title{font-size:1rem;line-height:1.5rem;font-weight:500}.ax-select-box-panel .ax-search-container{padding:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i5.AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: i6.AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "disabledField", "multiple", "selectionMode", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readOnlyChange", "onBlur", "onFocus", "onItemClick", "onScrolledIndexChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
@@ -283,7 +283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                             useClass: MXSelectionBridgeService,
                         },
                         AXUnsubscriber,
-                    ], host: { ngSkipHydration: 'true' }, template: "<ax-dropdown-box [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\" [look]=\"look\" [class.ax-auto-height]=\"autoHeight\">\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-select-box-selection\" [class.ax-multiple]=\"multiple\" [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" (click)=\"toggle()\">\n      @if (selectedItems.length === 0) {\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n      }\n      @for (item of selectedItems; track $index) {\n      @if(selectedTemplate) {\n      <ng-template *ngTemplateOutlet=\"selectedTemplate; context: { $implicit: { data:item } }\"></ng-template>\n      }\n      @else{\n      <div class=\"ax-selected-token\">\n        {{ getDisplayText(item) }}\n        @if (!disabled && !readonly && multiple) {\n        <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n        }\n      </div>\n      }\n      }\n    </div>\n    @if (selectedItems?.length && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggle()\">\n      <!-- @if (isLoading() && !isOpen) {\n        <ax-loading type=\"spinner\"></ax-loading>\n      } @else { -->\n      <span class=\"ax-icon ax-icon-chevron-left ax-arrow-button\" [ngClass]=\"{\n          '-rotation-90': !isOpen,\n          'rotation-90': isOpen\n        }\"></span>\n      <!-- } -->\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div #panel class=\"ax-select-box-panel\" [style.min-width]=\"dropdownSizes.width\">\n      @if (dropdown.isActionsheetStyle) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ caption || placeholder || 'selectbox.popover.title' | translate | async }}</ax-title>\n        <ax-close-button\n          [icon]=\"multiple ? 'ax-icon ax-icon-check !ax-text-primary-500' : 'ax-icon ax-icon-close'\"></ax-close-button>\n      </ax-header>\n      }\n      @if (searchBox) {\n      <div class=\"ax-search-container\">\n        <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n      </div>\n      }\n      @if (renderList) {\n      <ax-list [dataSource]=\"_listDataSource\" [multiple]=\"multiple\" [style.height]=\"dropdownSizes.height\"\n        [valueField]=\"valueField\" [textField]=\"textField\" [emptyTemplate]=\"emptyTemplate ?? empty\"\n        [itemTemplate]=\"itemTemplate\" [loadingTemplate]=\"loadingTemplate\" [ngModel]=\"value\"\n        (onValueChanged)=\"_handleValueChanged($event)\" [selectionMode]=\"'item'\"\n        (onItemClick)=\"_handleOnItemClick($event)\">\n        <ng-template #empty> {{ 'no-result-found' | translate | async}} </ng-template>\n      </ax-list>\n      }\n\n      @if (isLoading()) {\n      @if (loadingTemplate) {\n      <ng-template *ngTemplateOutlet=\"loadingTemplate\"></ng-template>\n      } @else {\n      <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n        <ax-loading></ax-loading>\n      </div>\n      }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>", styles: ["ax-select-box{display:block;width:100%}ax-select-box ax-dropdown-box.ax-auto-height{height:auto!important}ax-select-box .ax-editor-container.ax-look-fill .ax-selected-token{background-color:rgba(var(--ax-color-surface))}ax-select-box .ax-selected-token{display:flex;align-items:center;border-radius:var(--ax-rounded-border-default);padding:.25rem .5rem;color:rgb(var(--ax-color-text-default))}ax-select-box .ax-selected-token .ax-icon-close{margin-inline-start:.5rem;cursor:pointer}ax-select-box .ax-select-box-selection{display:flex;flex:1 1 0%;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.25rem;padding:.25rem;outline:2px solid transparent;outline-offset:2px;height:100%}ax-select-box .ax-select-box-selection>span{white-space:nowrap;padding-inline-end:.75rem;padding-inline-start:1rem}ax-select-box .ax-select-box-selection .ax-selectbox-input{width:0px;opacity:0}ax-select-box .ax-select-box-selection.ax-multiple .ax-selected-token{background-color:rgba(var(--ax-color-on-surface))}ax-select-box .ax-placeholder{padding-inline-end:.75rem;padding-inline-start:1rem}ax-select-box .ax-general-button .ax-arrow-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-select-box .ax-general-button .ax-arrow-button.-rotation-90{transform:rotate(-90deg)}ax-select-box .ax-general-button .ax-arrow-button.rotation-90{transform:rotate(90deg)}.ax-select-box-panel{height:fit-content}.ax-select-box-panel>ax-header.ax-solid{border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default))}.ax-select-box-panel .ax-search-container{padding:.5rem}\n"] }]
+                    ], host: { ngSkipHydration: 'true' }, template: "<ax-dropdown-box [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\" [look]=\"look\" [class.ax-auto-height]=\"autoHeight\">\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-select-box-selection\" [class.ax-multiple]=\"multiple\" [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" (click)=\"toggle()\">\n      @if (selectedItems.length === 0) {\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n      }\n      @for (item of selectedItems; track $index) {\n      @if(selectedTemplate) {\n      <ng-template *ngTemplateOutlet=\"selectedTemplate; context: { $implicit: { data:item } }\"></ng-template>\n      }\n      @else{\n      <div class=\"ax-selected-token\">\n        {{ getDisplayText(item) }}\n        @if (!disabled && !readonly && multiple) {\n        <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n        }\n      </div>\n      }\n      }\n    </div>\n    @if (selectedItems?.length && !disabled && !readonly) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggle()\">\n      <!-- @if (isLoading() && !isOpen) {\n        <ax-loading type=\"spinner\"></ax-loading>\n      } @else { -->\n      <span class=\"ax-icon ax-icon-chevron-left ax-arrow-button\" [ngClass]=\"{\n          '-rotation-90': !isOpen,\n          'rotation-90': isOpen\n        }\"></span>\n      <!-- } -->\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div #panel class=\"ax-select-box-panel\" [style.min-width]=\"dropdownSizes.width\">\n      @if (dropdown.isActionsheetStyle) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ caption || placeholder || 'selectbox.popover.title' | translate | async }}</ax-title>\n        <ax-close-button\n          [icon]=\"multiple ? 'ax-icon ax-icon-check !ax-text-primary-500' : 'ax-icon ax-icon-close'\"></ax-close-button>\n      </ax-header>\n      }\n      @if (searchBox) {\n      <div class=\"ax-search-container\">\n        <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n      </div>\n      }\n      @if (renderList) {\n      <ax-list [dataSource]=\"_listDataSource\" [multiple]=\"multiple\" [style.height]=\"dropdownSizes.height\"\n        [valueField]=\"valueField\" [textField]=\"textField\" [emptyTemplate]=\"emptyTemplate ?? empty\"\n        [itemTemplate]=\"itemTemplate\" [loadingTemplate]=\"loadingTemplate\" [ngModel]=\"value\"\n        (onValueChanged)=\"_handleValueChanged($event)\" [selectionMode]=\"'item'\"\n        (onItemClick)=\"_handleOnItemClick($event)\">\n        <ng-template #empty> {{ 'no-result-found' | translate | async}} </ng-template>\n      </ax-list>\n      }\n\n      @if (isLoading()) {\n      @if (loadingTemplate) {\n      <ng-template *ngTemplateOutlet=\"loadingTemplate\"></ng-template>\n      } @else {\n      <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n        <ax-loading></ax-loading>\n      </div>\n      }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>", styles: ["ax-select-box{display:block;width:100%}ax-select-box ax-dropdown-box.ax-auto-height{height:auto!important}ax-select-box .ax-editor-container.ax-look-fill .ax-selected-token{background-color:rgba(var(--ax-color-surface))}ax-select-box .ax-selected-token{display:flex;align-items:center;border-radius:var(--ax-rounded-border-default);padding:.25rem .5rem;color:rgb(var(--ax-color-text-default))}ax-select-box .ax-selected-token .ax-icon-close{margin-inline-start:.5rem;cursor:pointer}ax-select-box .ax-select-box-selection{display:flex;flex:1 1 0%;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.25rem;padding:.25rem;outline:2px solid transparent;outline-offset:2px;height:100%}ax-select-box .ax-select-box-selection>span{white-space:nowrap;padding-inline-end:.75rem;padding-inline-start:1rem}ax-select-box .ax-select-box-selection .ax-selectbox-input{width:0px;opacity:0}ax-select-box .ax-select-box-selection.ax-multiple .ax-selected-token{background-color:rgba(var(--ax-color-on-surface))}ax-select-box .ax-placeholder{padding-inline-end:.75rem;padding-inline-start:1rem}ax-select-box .ax-general-button .ax-arrow-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-select-box .ax-general-button .ax-arrow-button.-rotation-90{transform:rotate(-90deg)}ax-select-box .ax-general-button .ax-arrow-button.rotation-90{transform:rotate(90deg)}.ax-select-box-panel{height:fit-content}.ax-select-box-panel>ax-header.ax-solid{border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default))}.ax-select-box-panel>ax-header.ax-solid ax-title{font-size:1rem;line-height:1.5rem;font-weight:500}.ax-select-box-panel .ax-search-container{padding:.5rem}\n"] }]
         }], propDecorators: { dataSource: [{
                 type: Input
             }], placeholder: [{

package/fesm2022/acorex-components-common.mjs

@@ -1,6 +1,6 @@
 import { flatten, clone, filter, isEqual } from 'lodash-es';
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Host, Self, Optional, Input, Inject, NgModule, inject, ChangeDetectorRef, ElementRef, ViewContainerRef, EventEmitter, InjectionToken, Output } from '@angular/core';
+import { Injectable, Directive, Host, Self, Optional, Input, Inject, NgModule, inject, ChangeDetectorRef, ElementRef, ViewContainerRef, EventEmitter, InjectionToken, Output, input, afterNextRender, AfterRenderPhase, effect } from '@angular/core';
 import { DataSource } from '@angular/cdk/collections';
 import { Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, Subject, fromEvent, noop, skip } from 'rxjs';
 import { DOCUMENT } from '@angular/common';
@@ -1662,6 +1662,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                 type: Input
             }] } });
 
+class AXInvertedColorDirective {
+    constructor() {
+        this.color = input.required();
+        this.ref = inject(ViewContainerRef);
+        afterNextRender(() => {
+            this.invertColor();
+            console.log('changed');
+        }, { phase: AfterRenderPhase.MixedReadWrite });
+        effect(() => {
+            this.invertColor();
+            console.log('changed');
+        });
+    }
+    invertColor() {
+        let color;
+        let foreColor;
+        const invertedVariables = [];
+        if (this.color() === 'ghost') {
+            color = getComputedStyle(document.documentElement).getPropertyValue(`--ax-color-${this.color()}`);
+            foreColor = getComputedStyle(document.documentElement).getPropertyValue(`--ax-color-${this.color()}-fore`);
+            invertedVariables.push({ name: `--ax-color-ghost`, value: `${foreColor}` });
+            invertedVariables.push({ name: `--ax-color-ghost-fore`, value: `${color}` });
+        }
+        else {
+            const range = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+            color = getComputedStyle(document.documentElement).getPropertyValue(`--ax-color-${this.color()}-500`);
+            foreColor = getComputedStyle(document.documentElement).getPropertyValue(`--ax-color-${this.color()}-fore`);
+            range.forEach((c) => {
+                invertedVariables.push({ name: `--ax-color-${this.color()}-${c}`, value: `${foreColor}` });
+            });
+            invertedVariables.push({ name: `--ax-color-${this.color()}-fore`, value: `${color}` });
+            invertedVariables.push({ name: `--ax-color-${this.color()}-fore-tint`, value: `${color}` });
+        }
+        invertedVariables.forEach((c) => {
+            this.ref.element.nativeElement.style.setProperty(c.name, c.value);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXInvertedColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.2", type: AXInvertedColorDirective, isStandalone: true, selector: "[axInvertedColor]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXInvertedColorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axInvertedColor]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
 class AXRippleDirective {
     constructor(el, cdr) {
         this.el = el;
@@ -1726,5 +1774,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXAutoFocusDirective, AXButtonClickEvent, AXClearableComponent, AXClickEvent, AXClosbaleComponent, AXCommonModule, AXComponent, AXComponentCloseEvent, AXComponentClosedPromise, AXComponentClosing, AXComponentResult, AXDataSource, AXDomService, AXEvent, AXFocusEvent, AXFocusableComponent, AXHotkeyDirective, AXHotkeysService, AXHtmlEvent, AXInfiniteScrollerDirective, AXItemClickEvent, AXListDataSource, AXNgModelDelayedValueChangedDirective, AXOptionChangedEvent, AXPagedComponent, AXRangeChangedEvent, AXResponsiveDirective, AXRippleDirective, AXSearchableComponent, AXSelectionValueChangedEvent, AXValuableComponent, AXValueChangedEvent, AX_LOCATIONS, AX_PLACEMENT_BOTTOM, AX_PLACEMENT_BOTTOM_END, AX_PLACEMENT_BOTTOM_START, AX_PLACEMENT_END, AX_PLACEMENT_END_BOTTOM, AX_PLACEMENT_END_TOP, AX_PLACEMENT_MAP, AX_PLACEMENT_START, AX_PLACEMENT_START_BOTTOM, AX_PLACEMENT_START_TOP, AX_PLACEMENT_TOP, AX_PLACEMENT_TOP_END, AX_PLACEMENT_TOP_START, AX_SELECTION_DATA_TOKEN, AX_STYLE_COLOR_TYPES, MXBaseComponent, MXButtonBaseComponent, MXColorComponent, MXColorLookComponent, MXInputBaseValueComponent, MXInteractiveComponent, MXLookComponent, MXLookableComponent, MXSelectionBridgeService, MXSelectionValueComponent, MXValueComponent, TAB_META_KEY, convertArrayToDataSource, convertToPlacement };
+export { AXAutoFocusDirective, AXButtonClickEvent, AXClearableComponent, AXClickEvent, AXClosbaleComponent, AXCommonModule, AXComponent, AXComponentCloseEvent, AXComponentClosedPromise, AXComponentClosing, AXComponentResult, AXDataSource, AXDomService, AXEvent, AXFocusEvent, AXFocusableComponent, AXHotkeyDirective, AXHotkeysService, AXHtmlEvent, AXInfiniteScrollerDirective, AXInvertedColorDirective, AXItemClickEvent, AXListDataSource, AXNgModelDelayedValueChangedDirective, AXOptionChangedEvent, AXPagedComponent, AXRangeChangedEvent, AXResponsiveDirective, AXRippleDirective, AXSearchableComponent, AXSelectionValueChangedEvent, AXValuableComponent, AXValueChangedEvent, AX_LOCATIONS, AX_PLACEMENT_BOTTOM, AX_PLACEMENT_BOTTOM_END, AX_PLACEMENT_BOTTOM_START, AX_PLACEMENT_END, AX_PLACEMENT_END_BOTTOM, AX_PLACEMENT_END_TOP, AX_PLACEMENT_MAP, AX_PLACEMENT_START, AX_PLACEMENT_START_BOTTOM, AX_PLACEMENT_START_TOP, AX_PLACEMENT_TOP, AX_PLACEMENT_TOP_END, AX_PLACEMENT_TOP_START, AX_SELECTION_DATA_TOKEN, AX_STYLE_COLOR_TYPES, MXBaseComponent, MXButtonBaseComponent, MXColorComponent, MXColorLookComponent, MXInputBaseValueComponent, MXInteractiveComponent, MXLookComponent, MXLookableComponent, MXSelectionBridgeService, MXSelectionValueComponent, MXValueComponent, TAB_META_KEY, convertArrayToDataSource, convertToPlacement };
 //# sourceMappingURL=acorex-components-common.mjs.map