npm - @acorex/components - Versions diffs - 7.0.35 → 7.0.37 - Mend

@acorex/components 7.0.35 → 7.0.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (238) hide show

package/esm2020/select-box/src/selectbox.component.mjs CHANGED Viewed

@@ -319,7 +319,7 @@ AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ver
 AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", allowNull: "allowNull", value: "value", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", readonly: "readonly", pageSize: "pageSize", items: "items", valueField: "valueField", textField: "textField", disabledField: "disabledField", disabledCallback: "disabledCallback", multiple: "multiple", selectionMode: "selectionMode", clearButton: "clearButton", checkbox: "checkbox" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, providers: [
         { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
         { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent },
-    ], queries: [{ propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div\r\n  class=\"ax-dropdown-content\"\r\n  [class.ax-state-disabled]=\"disabled\"\r\n  (click)=\"_handleInputClickEvent($event)\">\r\n  <div\r\n    class=\"ax-select-box-selection\"\r\n    [tabindex]=\"tabIndex\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n    <ng-container\r\n      *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n      <ng-container\r\n        *ngIf=\"\r\n          !multiple;\r\n          then singleSelectedTemplate;\r\n          else multipleSelectedTemplate\r\n        \"></ng-container>\r\n      <ng-template #singleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n        </ng-container>\r\n      </ng-template>\r\n      <ng-template #multipleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <div class=\"ax-select-multi-item\">\r\n            {{ _getItemDisplayTextTemplte(item) }}\r\n            <span\r\n              class=\"ax-icon ax-icon-close\"\r\n              (click)=\"_handleBadgeRemove($event, item)\">\r\n            </span>\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n    <ng-template #showPlaceholder>\r\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\r\n        {{ placeholder }}\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n<ax-button\r\n  color=\"light\"\r\n  look=\"blank\"\r\n  (onClick)=\"clear()\"\r\n  [tabIndex]=\"-1\"\r\n  *ngIf=\"value && clearButton && !(disabled || readonly)\">\r\n  <ax-icon icon=\"ax-icon ax-icon-close\"></ax-icon>\r\n</ax-button>\r\n<button\r\n  [disabled]=\"disabled\"\r\n  [tabIndex]=\"-1\"\r\n  class=\"ax-editor-control\"\r\n  (click)=\"_handleArrowClickEvent($event)\">\r\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\r\n    <ax-loading type=\"spinner\"></ax-loading>\r\n  </ng-container>\r\n  <ng-template #iconTemplate>\r\n    <span\r\n      class=\"ax-icon ax-icon-chevron-left ax-transition-all\"\r\n      [ngClass]=\"{\r\n        '-ax-rotation-90': !isOpen,\r\n        'ax-rotation-90': isOpen\r\n      }\"></span>\r\n  </ng-template>\r\n</button>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopupOnOpened($event)\"\r\n  (onClosed)=\"_handlePopupOnClosed($event)\">\r\n  <div\r\n    class=\"ax-overlay-pane\"\r\n    (keydown)=\"_handlePopoverKeydown($event)\"\r\n    tabindex=\"0\"\r\n    aria-modal=\"true\"\r\n    cdkTrapFocus\r\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\"\r\n    [class.ax-full]=\"_searchBox || isLazy\"\r\n    [style.min-width.px]=\"_popoverWidth\">\r\n    <div class=\"ax-list\">\r\n      <ax-header *ngIf=\"_isActionSheet\">\r\n        <ax-title>{{ _popoverTitle }}</ax-title>\r\n        <ax-close-button\r\n          class=\"ax-icon\"\r\n          [icon]=\"\r\n            multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\r\n          \"></ax-close-button>\r\n      </ax-header>\r\n      <div\r\n        class=\"ax-search-box-container\"\r\n        [class.ax-state-hidden]=\"!_searchBox\"\r\n        [cdkTrapFocus]=\"_searchBox != null\">\r\n        <ng-content select=\"ax-search-box\"></ng-content>\r\n      </div>\r\n      <div\r\n        class=\"ax-content ax-list-items-container ax-default\"\r\n        (scroll)=\"_handleListScroll($event)\"\r\n        #listContainer>\r\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n          <ul>\r\n            <ng-container\r\n              *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\">\r\n            </ng-container>\r\n            <ng-template #tmpTree let-list=\"list\">\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let item of list;\r\n                  let i = index;\r\n                  trackBy: _trackByFunction\r\n                \">\r\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                  <li\r\n                    class=\"ax-list-item\"\r\n                    (click)=\"_handleOnItemClick($event, item)\"\r\n                    [attr.data-id]=\"item[this.valueField]\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"\r\n                        itemTemplate;\r\n                        context: { $implicit: item, direction: direction }\r\n                      \">\r\n                    </ng-container>\r\n                  </li>\r\n                </ng-container>\r\n                <ng-template #defualtTemplate>\r\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\r\n                    <li\r\n                      class=\"ax-list-item-group\"\r\n                      [attr.data-id]=\"item[this.valueField]\">\r\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                      <ul *ngIf=\"item.children?.length > 0\">\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            tmpTree;\r\n                            context: { list: item.children }\r\n                          \">\r\n                        </ng-container>\r\n                      </ul>\r\n                    </li>\r\n                  </ng-container>\r\n                  <ng-template #tmpItem>\r\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item)\"></span>\r\n                      </li>\r\n                    </ng-container>\r\n                    <ng-template #multipleTemplate>\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [class.ax-state-checkbox]=\"checkbox\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span>\r\n                          <input\r\n                            class=\"ax-checkbox\"\r\n                            type=\"checkbox\"\r\n                            [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                            *ngIf=\"checkbox\"\r\n                            [checked]=\"isItemSelected(item)\"\r\n                            [disabled]=\"isItemDisabled(item)\" />\r\n                          <span class=\"ax-checkbox-label\">{{\r\n                            _getItemDisplayTextTemplte(item)\r\n                          }}</span>\r\n                        </span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item) && !checkbox\"></span>\r\n                      </li>\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ul>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isLoading\">\r\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\r\n          </ng-container>\r\n          <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n              <ax-loading\r\n                text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n        <ng-template #tmpEmpty>\r\n          <ng-container *ngIf=\"!isLoading\">\r\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\r\n            </ng-container>\r\n            <ng-template #elseEmptyTemplate>\r\n              <div\r\n                class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\r\n                [innerHTML]=\"\r\n                  'common.no-result-for'\r\n                    | trans\r\n                      : {\r\n                          exp: this._searchBox ? this._searchBox.searchExp : ''\r\n                        }\r\n                \"></div>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-template>\r\n      </div>\r\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n      <!-- <div class=\"ax-footer\">footer</div> -->\r\n    </div>\r\n  </div>\r\n</ax-popover>\r\n", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgb(var(--ax-color-ghost),.05);border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-select-box .ax-select-multi-item .ax-icon-close{cursor:pointer;margin-inline-start:.5rem}ax-select-box .ax-select-box-selection{display:flex;justify-content:center;align-items:center;outline-color:transparent;padding:0 .5rem}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.AXDecoratorHeaderComponent, selector: "ax-header" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorTitleComponent, selector: "ax-title" }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i4.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { kind: "component", type: i6.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { kind: "directive", type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div\r\n  class=\"ax-dropdown-content\"\r\n  [class.ax-state-disabled]=\"disabled\"\r\n  (click)=\"_handleInputClickEvent($event)\">\r\n  <div\r\n    class=\"ax-select-box-selection\"\r\n    [tabindex]=\"tabIndex\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n    <ng-container\r\n      *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n      <ng-container\r\n        *ngIf=\"\r\n          !multiple;\r\n          then singleSelectedTemplate;\r\n          else multipleSelectedTemplate\r\n        \"></ng-container>\r\n      <ng-template #singleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n        </ng-container>\r\n      </ng-template>\r\n      <ng-template #multipleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <div class=\"ax-select-multi-item\">\r\n            {{ _getItemDisplayTextTemplte(item) }}\r\n            <span\r\n              class=\"ax-icon ax-icon-close\"\r\n              (click)=\"_handleBadgeRemove($event, item)\">\r\n            </span>\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n    <ng-template #showPlaceholder>\r\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\r\n        {{ placeholder }}\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n<ax-button\r\n  color=\"light\"\r\n  look=\"blank\"\r\n  (onClick)=\"clear()\"\r\n  [tabIndex]=\"-1\"\r\n  *ngIf=\"value && clearButton && !(disabled || readonly)\">\r\n  <ax-icon icon=\"ax-icon ax-icon-close\"></ax-icon>\r\n</ax-button>\r\n<button\r\n  [disabled]=\"disabled\"\r\n  [tabIndex]=\"-1\"\r\n  class=\"ax-editor-control\"\r\n  (click)=\"_handleArrowClickEvent($event)\">\r\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\r\n    <ax-loading type=\"spinner\"></ax-loading>\r\n  </ng-container>\r\n  <ng-template #iconTemplate>\r\n    <span\r\n      class=\"ax-icon ax-icon-chevron-left ax-transition-all\"\r\n      [ngClass]=\"{\r\n        '-ax-rotation-90': !isOpen,\r\n        'ax-rotation-90': isOpen\r\n      }\"></span>\r\n  </ng-template>\r\n</button>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopupOnOpened($event)\"\r\n  (onClosed)=\"_handlePopupOnClosed($event)\">\r\n  <div\r\n    class=\"ax-overlay-pane\"\r\n    (keydown)=\"_handlePopoverKeydown($event)\"\r\n    tabindex=\"0\"\r\n    aria-modal=\"true\"\r\n    cdkTrapFocus\r\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\"\r\n    [class.ax-full]=\"_searchBox || isLazy\"\r\n    [style.min-width.px]=\"_popoverWidth\">\r\n    <div class=\"ax-list\">\r\n      <ax-header *ngIf=\"_isActionSheet\">\r\n        <ax-title>{{ _popoverTitle }}</ax-title>\r\n        <ax-close-button\r\n          class=\"ax-icon\"\r\n          [icon]=\"\r\n            multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\r\n          \"></ax-close-button>\r\n      </ax-header>\r\n      <div\r\n        class=\"ax-search-box-container\"\r\n        [class.ax-state-hidden]=\"!_searchBox\"\r\n        [cdkTrapFocus]=\"_searchBox != null\">\r\n        <ng-content select=\"ax-search-box\"></ng-content>\r\n      </div>\r\n      <div\r\n        class=\"ax-content ax-list-items-container ax-default\"\r\n        (scroll)=\"_handleListScroll($event)\"\r\n        #listContainer>\r\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n          <ul>\r\n            <ng-container\r\n              *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\">\r\n            </ng-container>\r\n            <ng-template #tmpTree let-list=\"list\">\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let item of list;\r\n                  let i = index;\r\n                  trackBy: _trackByFunction\r\n                \">\r\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                  <li\r\n                    class=\"ax-list-item\"\r\n                    (click)=\"_handleOnItemClick($event, item)\"\r\n                    [attr.data-id]=\"item[this.valueField]\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"\r\n                        itemTemplate;\r\n                        context: { $implicit: item, direction: direction }\r\n                      \">\r\n                    </ng-container>\r\n                  </li>\r\n                </ng-container>\r\n                <ng-template #defualtTemplate>\r\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\r\n                    <li\r\n                      class=\"ax-list-item-group\"\r\n                      [attr.data-id]=\"item[this.valueField]\">\r\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                      <ul *ngIf=\"item.children?.length > 0\">\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            tmpTree;\r\n                            context: { list: item.children }\r\n                          \">\r\n                        </ng-container>\r\n                      </ul>\r\n                    </li>\r\n                  </ng-container>\r\n                  <ng-template #tmpItem>\r\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item)\"></span>\r\n                      </li>\r\n                    </ng-container>\r\n                    <ng-template #multipleTemplate>\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [class.ax-state-checkbox]=\"checkbox\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span>\r\n                          <input\r\n                            class=\"ax-checkbox\"\r\n                            type=\"checkbox\"\r\n                            [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                            *ngIf=\"checkbox\"\r\n                            [checked]=\"isItemSelected(item)\"\r\n                            [disabled]=\"isItemDisabled(item)\" />\r\n                          <span class=\"ax-checkbox-label\">{{\r\n                            _getItemDisplayTextTemplte(item)\r\n                          }}</span>\r\n                        </span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item) && !checkbox\"></span>\r\n                      </li>\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ul>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isLoading\">\r\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\r\n          </ng-container>\r\n          <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n              <ax-loading\r\n                text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n        <ng-template #tmpEmpty>\r\n          <ng-container *ngIf=\"!isLoading\">\r\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\r\n            </ng-container>\r\n            <ng-template #elseEmptyTemplate>\r\n              <div\r\n                class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\r\n                [innerHTML]=\"\r\n                  'common.no-result-for'\r\n                    | trans\r\n                      : {\r\n                          exp: this._searchBox ? this._searchBox.searchExp : ''\r\n                        }\r\n                \"></div>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-template>\r\n      </div>\r\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n      <!-- <div class=\"ax-footer\">footer</div> -->\r\n    </div>\r\n  </div>\r\n</ax-popover>\r\n", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-on-surface));border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-select-box .ax-select-multi-item .ax-icon-close{cursor:pointer;margin-inline-start:.5rem}ax-select-box .ax-select-box-selection{display:flex;justify-content:center;align-items:center;outline-color:transparent;padding:0 .5rem}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.AXDecoratorHeaderComponent, selector: "ax-header" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorTitleComponent, selector: "ax-title" }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i4.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { kind: "component", type: i6.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { kind: "directive", type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-select-box', inputs: [
@@ -356,7 +356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
                         { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent },
-                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div\r\n  class=\"ax-dropdown-content\"\r\n  [class.ax-state-disabled]=\"disabled\"\r\n  (click)=\"_handleInputClickEvent($event)\">\r\n  <div\r\n    class=\"ax-select-box-selection\"\r\n    [tabindex]=\"tabIndex\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n    <ng-container\r\n      *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n      <ng-container\r\n        *ngIf=\"\r\n          !multiple;\r\n          then singleSelectedTemplate;\r\n          else multipleSelectedTemplate\r\n        \"></ng-container>\r\n      <ng-template #singleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n        </ng-container>\r\n      </ng-template>\r\n      <ng-template #multipleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <div class=\"ax-select-multi-item\">\r\n            {{ _getItemDisplayTextTemplte(item) }}\r\n            <span\r\n              class=\"ax-icon ax-icon-close\"\r\n              (click)=\"_handleBadgeRemove($event, item)\">\r\n            </span>\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n    <ng-template #showPlaceholder>\r\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\r\n        {{ placeholder }}\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n<ax-button\r\n  color=\"light\"\r\n  look=\"blank\"\r\n  (onClick)=\"clear()\"\r\n  [tabIndex]=\"-1\"\r\n  *ngIf=\"value && clearButton && !(disabled || readonly)\">\r\n  <ax-icon icon=\"ax-icon ax-icon-close\"></ax-icon>\r\n</ax-button>\r\n<button\r\n  [disabled]=\"disabled\"\r\n  [tabIndex]=\"-1\"\r\n  class=\"ax-editor-control\"\r\n  (click)=\"_handleArrowClickEvent($event)\">\r\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\r\n    <ax-loading type=\"spinner\"></ax-loading>\r\n  </ng-container>\r\n  <ng-template #iconTemplate>\r\n    <span\r\n      class=\"ax-icon ax-icon-chevron-left ax-transition-all\"\r\n      [ngClass]=\"{\r\n        '-ax-rotation-90': !isOpen,\r\n        'ax-rotation-90': isOpen\r\n      }\"></span>\r\n  </ng-template>\r\n</button>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopupOnOpened($event)\"\r\n  (onClosed)=\"_handlePopupOnClosed($event)\">\r\n  <div\r\n    class=\"ax-overlay-pane\"\r\n    (keydown)=\"_handlePopoverKeydown($event)\"\r\n    tabindex=\"0\"\r\n    aria-modal=\"true\"\r\n    cdkTrapFocus\r\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\"\r\n    [class.ax-full]=\"_searchBox || isLazy\"\r\n    [style.min-width.px]=\"_popoverWidth\">\r\n    <div class=\"ax-list\">\r\n      <ax-header *ngIf=\"_isActionSheet\">\r\n        <ax-title>{{ _popoverTitle }}</ax-title>\r\n        <ax-close-button\r\n          class=\"ax-icon\"\r\n          [icon]=\"\r\n            multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\r\n          \"></ax-close-button>\r\n      </ax-header>\r\n      <div\r\n        class=\"ax-search-box-container\"\r\n        [class.ax-state-hidden]=\"!_searchBox\"\r\n        [cdkTrapFocus]=\"_searchBox != null\">\r\n        <ng-content select=\"ax-search-box\"></ng-content>\r\n      </div>\r\n      <div\r\n        class=\"ax-content ax-list-items-container ax-default\"\r\n        (scroll)=\"_handleListScroll($event)\"\r\n        #listContainer>\r\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n          <ul>\r\n            <ng-container\r\n              *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\">\r\n            </ng-container>\r\n            <ng-template #tmpTree let-list=\"list\">\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let item of list;\r\n                  let i = index;\r\n                  trackBy: _trackByFunction\r\n                \">\r\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                  <li\r\n                    class=\"ax-list-item\"\r\n                    (click)=\"_handleOnItemClick($event, item)\"\r\n                    [attr.data-id]=\"item[this.valueField]\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"\r\n                        itemTemplate;\r\n                        context: { $implicit: item, direction: direction }\r\n                      \">\r\n                    </ng-container>\r\n                  </li>\r\n                </ng-container>\r\n                <ng-template #defualtTemplate>\r\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\r\n                    <li\r\n                      class=\"ax-list-item-group\"\r\n                      [attr.data-id]=\"item[this.valueField]\">\r\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                      <ul *ngIf=\"item.children?.length > 0\">\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            tmpTree;\r\n                            context: { list: item.children }\r\n                          \">\r\n                        </ng-container>\r\n                      </ul>\r\n                    </li>\r\n                  </ng-container>\r\n                  <ng-template #tmpItem>\r\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item)\"></span>\r\n                      </li>\r\n                    </ng-container>\r\n                    <ng-template #multipleTemplate>\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [class.ax-state-checkbox]=\"checkbox\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span>\r\n                          <input\r\n                            class=\"ax-checkbox\"\r\n                            type=\"checkbox\"\r\n                            [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                            *ngIf=\"checkbox\"\r\n                            [checked]=\"isItemSelected(item)\"\r\n                            [disabled]=\"isItemDisabled(item)\" />\r\n                          <span class=\"ax-checkbox-label\">{{\r\n                            _getItemDisplayTextTemplte(item)\r\n                          }}</span>\r\n                        </span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item) && !checkbox\"></span>\r\n                      </li>\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ul>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isLoading\">\r\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\r\n          </ng-container>\r\n          <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n              <ax-loading\r\n                text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n        <ng-template #tmpEmpty>\r\n          <ng-container *ngIf=\"!isLoading\">\r\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\r\n            </ng-container>\r\n            <ng-template #elseEmptyTemplate>\r\n              <div\r\n                class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\r\n                [innerHTML]=\"\r\n                  'common.no-result-for'\r\n                    | trans\r\n                      : {\r\n                          exp: this._searchBox ? this._searchBox.searchExp : ''\r\n                        }\r\n                \"></div>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-template>\r\n      </div>\r\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n      <!-- <div class=\"ax-footer\">footer</div> -->\r\n    </div>\r\n  </div>\r\n</ax-popover>\r\n", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgb(var(--ax-color-ghost),.05);border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-select-box .ax-select-multi-item .ax-icon-close{cursor:pointer;margin-inline-start:.5rem}ax-select-box .ax-select-box-selection{display:flex;justify-content:center;align-items:center;outline-color:transparent;padding:0 .5rem}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}\n"] }]
+                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div\r\n  class=\"ax-dropdown-content\"\r\n  [class.ax-state-disabled]=\"disabled\"\r\n  (click)=\"_handleInputClickEvent($event)\">\r\n  <div\r\n    class=\"ax-select-box-selection\"\r\n    [tabindex]=\"tabIndex\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n    <ng-container\r\n      *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n      <ng-container\r\n        *ngIf=\"\r\n          !multiple;\r\n          then singleSelectedTemplate;\r\n          else multipleSelectedTemplate\r\n        \"></ng-container>\r\n      <ng-template #singleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n        </ng-container>\r\n      </ng-template>\r\n      <ng-template #multipleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <div class=\"ax-select-multi-item\">\r\n            {{ _getItemDisplayTextTemplte(item) }}\r\n            <span\r\n              class=\"ax-icon ax-icon-close\"\r\n              (click)=\"_handleBadgeRemove($event, item)\">\r\n            </span>\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n    <ng-template #showPlaceholder>\r\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\r\n        {{ placeholder }}\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n<ax-button\r\n  color=\"light\"\r\n  look=\"blank\"\r\n  (onClick)=\"clear()\"\r\n  [tabIndex]=\"-1\"\r\n  *ngIf=\"value && clearButton && !(disabled || readonly)\">\r\n  <ax-icon icon=\"ax-icon ax-icon-close\"></ax-icon>\r\n</ax-button>\r\n<button\r\n  [disabled]=\"disabled\"\r\n  [tabIndex]=\"-1\"\r\n  class=\"ax-editor-control\"\r\n  (click)=\"_handleArrowClickEvent($event)\">\r\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\r\n    <ax-loading type=\"spinner\"></ax-loading>\r\n  </ng-container>\r\n  <ng-template #iconTemplate>\r\n    <span\r\n      class=\"ax-icon ax-icon-chevron-left ax-transition-all\"\r\n      [ngClass]=\"{\r\n        '-ax-rotation-90': !isOpen,\r\n        'ax-rotation-90': isOpen\r\n      }\"></span>\r\n  </ng-template>\r\n</button>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopupOnOpened($event)\"\r\n  (onClosed)=\"_handlePopupOnClosed($event)\">\r\n  <div\r\n    class=\"ax-overlay-pane\"\r\n    (keydown)=\"_handlePopoverKeydown($event)\"\r\n    tabindex=\"0\"\r\n    aria-modal=\"true\"\r\n    cdkTrapFocus\r\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\"\r\n    [class.ax-full]=\"_searchBox || isLazy\"\r\n    [style.min-width.px]=\"_popoverWidth\">\r\n    <div class=\"ax-list\">\r\n      <ax-header *ngIf=\"_isActionSheet\">\r\n        <ax-title>{{ _popoverTitle }}</ax-title>\r\n        <ax-close-button\r\n          class=\"ax-icon\"\r\n          [icon]=\"\r\n            multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\r\n          \"></ax-close-button>\r\n      </ax-header>\r\n      <div\r\n        class=\"ax-search-box-container\"\r\n        [class.ax-state-hidden]=\"!_searchBox\"\r\n        [cdkTrapFocus]=\"_searchBox != null\">\r\n        <ng-content select=\"ax-search-box\"></ng-content>\r\n      </div>\r\n      <div\r\n        class=\"ax-content ax-list-items-container ax-default\"\r\n        (scroll)=\"_handleListScroll($event)\"\r\n        #listContainer>\r\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n          <ul>\r\n            <ng-container\r\n              *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\">\r\n            </ng-container>\r\n            <ng-template #tmpTree let-list=\"list\">\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let item of list;\r\n                  let i = index;\r\n                  trackBy: _trackByFunction\r\n                \">\r\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                  <li\r\n                    class=\"ax-list-item\"\r\n                    (click)=\"_handleOnItemClick($event, item)\"\r\n                    [attr.data-id]=\"item[this.valueField]\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"\r\n                        itemTemplate;\r\n                        context: { $implicit: item, direction: direction }\r\n                      \">\r\n                    </ng-container>\r\n                  </li>\r\n                </ng-container>\r\n                <ng-template #defualtTemplate>\r\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\r\n                    <li\r\n                      class=\"ax-list-item-group\"\r\n                      [attr.data-id]=\"item[this.valueField]\">\r\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                      <ul *ngIf=\"item.children?.length > 0\">\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            tmpTree;\r\n                            context: { list: item.children }\r\n                          \">\r\n                        </ng-container>\r\n                      </ul>\r\n                    </li>\r\n                  </ng-container>\r\n                  <ng-template #tmpItem>\r\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item)\"></span>\r\n                      </li>\r\n                    </ng-container>\r\n                    <ng-template #multipleTemplate>\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [class.ax-state-checkbox]=\"checkbox\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span>\r\n                          <input\r\n                            class=\"ax-checkbox\"\r\n                            type=\"checkbox\"\r\n                            [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                            *ngIf=\"checkbox\"\r\n                            [checked]=\"isItemSelected(item)\"\r\n                            [disabled]=\"isItemDisabled(item)\" />\r\n                          <span class=\"ax-checkbox-label\">{{\r\n                            _getItemDisplayTextTemplte(item)\r\n                          }}</span>\r\n                        </span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item) && !checkbox\"></span>\r\n                      </li>\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ul>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isLoading\">\r\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\r\n          </ng-container>\r\n          <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n              <ax-loading\r\n                text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n        <ng-template #tmpEmpty>\r\n          <ng-container *ngIf=\"!isLoading\">\r\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\r\n            </ng-container>\r\n            <ng-template #elseEmptyTemplate>\r\n              <div\r\n                class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\r\n                [innerHTML]=\"\r\n                  'common.no-result-for'\r\n                    | trans\r\n                      : {\r\n                          exp: this._searchBox ? this._searchBox.searchExp : ''\r\n                        }\r\n                \"></div>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-template>\r\n      </div>\r\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n      <!-- <div class=\"ax-footer\">footer</div> -->\r\n    </div>\r\n  </div>\r\n</ax-popover>\r\n", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-on-surface));border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-select-box .ax-select-multi-item .ax-icon-close{cursor:pointer;margin-inline-start:.5rem}ax-select-box .ax-select-box-selection{display:flex;justify-content:center;align-items:center;outline-color:transparent;padding:0 .5rem}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent, { static: true }]

package/esm2020/selection-list/src/selection-list.component.mjs CHANGED Viewed

@@ -39,7 +39,7 @@ export class AXSelectionListComponent extends AXBaseSelectionValueMixin {
     }
 }
 AXSelectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXSelectionListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", valueField: "valueField", textField: "textField", multiple: "multiple", items: "items", selectionMode: "selectionMode", direction: "direction" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-selection-list ax-{{ direction }}\">\r\n  <ng-container\r\n    *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n  <ng-template #checkboxList>\r\n    <ng-container *ngFor=\"let item of displayItems; let i = index\">\r\n      <div\r\n        class=\"ax-item-container\"\r\n        [class.ax-state-selected]=\"isItemSelected(item)\">\r\n        <div class=\"ax-item-input\">\r\n          <input\r\n            #ic\r\n            [id]=\"id + '-' + i\"\r\n            class=\"ax-checkbox\"\r\n            type=\"checkbox\"\r\n            (change)=\"_handleOnItemValueChange(item, $event)\"\r\n            [checked]=\"isItemSelected(item)\"\r\n            [disabled]=\"disabled || item.disabled\"\r\n            [readonly]=\"readonly || item.readonly\" />\r\n        </div>\r\n        <div class=\"ax-item-text\">\r\n          <label [for]=\"id + '-' + i\"> {{ item[textField] }}</label>\r\n          <p class=\"ax-hint-text\">\r\n            {{ item.hint ? item.hint : item[hintField] }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-template #radioButtonList>\r\n    <ng-container *ngFor=\"let item of displayItems; let i = index\">\r\n      <div\r\n        class=\"ax-item-container\"\r\n        [class.ax-state-selected]=\"isItemSelected(item)\">\r\n        <div class=\"ax-item-input\">\r\n          <input\r\n            #ir\r\n            [id]=\"id + '-' + i\"\r\n            class=\"ax-radio\"\r\n            type=\"radio\"\r\n            [attr.name]=\"id\"\r\n            (change)=\"_handleOnItemValueChange(item, $event)\"\r\n            [checked]=\"isItemSelected(item)\"\r\n            [disabled]=\"disabled || item.disabled\"\r\n            [readonly]=\"readonly || item.readonly\" />\r\n        </div>\r\n        <div class=\"ax-item-text\">\r\n          <label [for]=\"id + '-' + i\"> {{ item[textField] }}</label>\r\n          <p class=\"ax-hint-text\">\r\n            {{ item.hint ? item.hint : item[hintField] }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\r\n</div>\r\n", styles: ["html.ax-dark .ax-card-style .ax-selection-list.ax-vertical>div,html.ax-dark .ax-card-style .ax-selection-list.ax-horizontal>div{background-color:rgba(var(--ax-color-ghost),.05)}.ax-selection-list{display:flex;flex-wrap:wrap}.ax-selection-list .ax-item-container{display:flex;align-items:flex-start}.ax-selection-list .ax-item-container .ax-item-input{display:flex;align-items:center;height:1.25rem}.ax-selection-list .ax-item-container .ax-item-text{font-size:.875rem;margin-inline-start:.75rem}.ax-selection-list.ax-vertical{flex-direction:column}.ax-selection-list.ax-vertical .ax-item-container:not(.ax-selection-list.ax-vertical .ax-item-container:last-child){margin-bottom:1rem}.ax-selection-list.ax-horizontal{flex-direction:row}.ax-selection-list.ax-horizontal .ax-item-container{padding-inline-end:.75rem}.ax-selection-list.ax-state-error{color:rgb(var(--ax-color-danger-500))}.ax-selection-list.ax-state-error .ax-checkbox-checkmark,.ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgb(var(--ax-color-danger-500))}.ax-separate-style .ax-selection-list.ax-vertical>div{padding-bottom:.875rem;border-bottom:1px solid;border-color:rgb(var(--ax-color-border-default))}.ax-separate-style .ax-selection-list.ax-vertical>div:last-child{border:0}.ax-card-style .ax-selection-list.ax-vertical>div,.ax-card-style .ax-selection-list.ax-horizontal>div{padding:1rem;border:1px solid;border-color:rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.ax-card-style .ax-selection-list.ax-vertical>div.ax-state-selected,.ax-card-style .ax-selection-list.ax-horizontal>div.ax-state-selected{border-color:rgb(var(--ax-color-primary-500))}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", valueField: "valueField", textField: "textField", multiple: "multiple", items: "items", selectionMode: "selectionMode", direction: "direction" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-selection-list ax-{{ direction }}\">\r\n  <ng-container\r\n    *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n  <ng-template #checkboxList>\r\n    <ng-container *ngFor=\"let item of displayItems; let i = index\">\r\n      <div\r\n        class=\"ax-item-container\"\r\n        [class.ax-state-selected]=\"isItemSelected(item)\">\r\n        <div class=\"ax-item-input\">\r\n          <input\r\n            #ic\r\n            [id]=\"id + '-' + i\"\r\n            class=\"ax-checkbox\"\r\n            type=\"checkbox\"\r\n            (change)=\"_handleOnItemValueChange(item, $event)\"\r\n            [checked]=\"isItemSelected(item)\"\r\n            [disabled]=\"disabled || item.disabled\"\r\n            [readonly]=\"readonly || item.readonly\" />\r\n        </div>\r\n        <div class=\"ax-item-text\">\r\n          <label [for]=\"id + '-' + i\"> {{ item[textField] }}</label>\r\n          <p class=\"ax-hint-text\">\r\n            {{ item.hint ? item.hint : item[hintField] }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-template #radioButtonList>\r\n    <ng-container *ngFor=\"let item of displayItems; let i = index\">\r\n      <div\r\n        class=\"ax-item-container\"\r\n        [class.ax-state-selected]=\"isItemSelected(item)\">\r\n        <div class=\"ax-item-input\">\r\n          <input\r\n            #ir\r\n            [id]=\"id + '-' + i\"\r\n            class=\"ax-radio\"\r\n            type=\"radio\"\r\n            [attr.name]=\"id\"\r\n            (change)=\"_handleOnItemValueChange(item, $event)\"\r\n            [checked]=\"isItemSelected(item)\"\r\n            [disabled]=\"disabled || item.disabled\"\r\n            [readonly]=\"readonly || item.readonly\" />\r\n        </div>\r\n        <div class=\"ax-item-text\">\r\n          <label [for]=\"id + '-' + i\"> {{ item[textField] }}</label>\r\n          <p class=\"ax-hint-text\">\r\n            {{ item.hint ? item.hint : item[hintField] }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\r\n</div>\r\n", styles: [".ax-dark .ax-card-style .ax-selection-list.ax-vertical>div,.ax-dark .ax-card-style .ax-selection-list.ax-horizontal>div{background-color:rgba(var(--ax-color-surface))}.ax-selection-list{display:flex;flex-wrap:wrap}.ax-selection-list .ax-item-container{display:flex;align-items:flex-start}.ax-selection-list .ax-item-container .ax-item-input{display:flex;align-items:center;height:1.25rem}.ax-selection-list .ax-item-container .ax-item-text{font-size:.875rem;margin-inline-start:.75rem}.ax-selection-list.ax-vertical{flex-direction:column}.ax-selection-list.ax-vertical .ax-item-container:not(.ax-selection-list.ax-vertical .ax-item-container:last-child){margin-bottom:1rem}.ax-selection-list.ax-horizontal{flex-direction:row}.ax-selection-list.ax-horizontal .ax-item-container{padding-inline-end:.75rem}.ax-selection-list.ax-state-error{color:rgba(var(--ax-color-danger-500))}.ax-selection-list.ax-state-error .ax-checkbox-checkmark,.ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgba(var(--ax-color-danger-500))}.ax-separate-style .ax-selection-list.ax-vertical>div{padding-bottom:.875rem;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}.ax-separate-style .ax-selection-list.ax-vertical>div:last-child{border:0}.ax-card-style .ax-selection-list.ax-vertical>div,.ax-card-style .ax-selection-list.ax-horizontal>div{padding:1rem;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default)}.ax-card-style .ax-selection-list.ax-vertical>div.ax-state-selected,.ax-card-style .ax-selection-list.ax-horizontal>div.ax-state-selected{border-color:rgba(var(--ax-color-primary-500))}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXSelectionListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-selection-list', inputs: [
@@ -53,7 +53,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                         'multiple',
                         'items',
                         'selectionMode',
-                    ], outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-selection-list ax-{{ direction }}\">\r\n  <ng-container\r\n    *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n  <ng-template #checkboxList>\r\n    <ng-container *ngFor=\"let item of displayItems; let i = index\">\r\n      <div\r\n        class=\"ax-item-container\"\r\n        [class.ax-state-selected]=\"isItemSelected(item)\">\r\n        <div class=\"ax-item-input\">\r\n          <input\r\n            #ic\r\n            [id]=\"id + '-' + i\"\r\n            class=\"ax-checkbox\"\r\n            type=\"checkbox\"\r\n            (change)=\"_handleOnItemValueChange(item, $event)\"\r\n            [checked]=\"isItemSelected(item)\"\r\n            [disabled]=\"disabled || item.disabled\"\r\n            [readonly]=\"readonly || item.readonly\" />\r\n        </div>\r\n        <div class=\"ax-item-text\">\r\n          <label [for]=\"id + '-' + i\"> {{ item[textField] }}</label>\r\n          <p class=\"ax-hint-text\">\r\n            {{ item.hint ? item.hint : item[hintField] }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-template #radioButtonList>\r\n    <ng-container *ngFor=\"let item of displayItems; let i = index\">\r\n      <div\r\n        class=\"ax-item-container\"\r\n        [class.ax-state-selected]=\"isItemSelected(item)\">\r\n        <div class=\"ax-item-input\">\r\n          <input\r\n            #ir\r\n            [id]=\"id + '-' + i\"\r\n            class=\"ax-radio\"\r\n            type=\"radio\"\r\n            [attr.name]=\"id\"\r\n            (change)=\"_handleOnItemValueChange(item, $event)\"\r\n            [checked]=\"isItemSelected(item)\"\r\n            [disabled]=\"disabled || item.disabled\"\r\n            [readonly]=\"readonly || item.readonly\" />\r\n        </div>\r\n        <div class=\"ax-item-text\">\r\n          <label [for]=\"id + '-' + i\"> {{ item[textField] }}</label>\r\n          <p class=\"ax-hint-text\">\r\n            {{ item.hint ? item.hint : item[hintField] }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\r\n</div>\r\n", styles: ["html.ax-dark .ax-card-style .ax-selection-list.ax-vertical>div,html.ax-dark .ax-card-style .ax-selection-list.ax-horizontal>div{background-color:rgba(var(--ax-color-ghost),.05)}.ax-selection-list{display:flex;flex-wrap:wrap}.ax-selection-list .ax-item-container{display:flex;align-items:flex-start}.ax-selection-list .ax-item-container .ax-item-input{display:flex;align-items:center;height:1.25rem}.ax-selection-list .ax-item-container .ax-item-text{font-size:.875rem;margin-inline-start:.75rem}.ax-selection-list.ax-vertical{flex-direction:column}.ax-selection-list.ax-vertical .ax-item-container:not(.ax-selection-list.ax-vertical .ax-item-container:last-child){margin-bottom:1rem}.ax-selection-list.ax-horizontal{flex-direction:row}.ax-selection-list.ax-horizontal .ax-item-container{padding-inline-end:.75rem}.ax-selection-list.ax-state-error{color:rgb(var(--ax-color-danger-500))}.ax-selection-list.ax-state-error .ax-checkbox-checkmark,.ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgb(var(--ax-color-danger-500))}.ax-separate-style .ax-selection-list.ax-vertical>div{padding-bottom:.875rem;border-bottom:1px solid;border-color:rgb(var(--ax-color-border-default))}.ax-separate-style .ax-selection-list.ax-vertical>div:last-child{border:0}.ax-card-style .ax-selection-list.ax-vertical>div,.ax-card-style .ax-selection-list.ax-horizontal>div{padding:1rem;border:1px solid;border-color:rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.ax-card-style .ax-selection-list.ax-vertical>div.ax-state-selected,.ax-card-style .ax-selection-list.ax-horizontal>div.ax-state-selected{border-color:rgb(var(--ax-color-primary-500))}\n"] }]
+                    ], outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-selection-list ax-{{ direction }}\">\r\n  <ng-container\r\n    *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n  <ng-template #checkboxList>\r\n    <ng-container *ngFor=\"let item of displayItems; let i = index\">\r\n      <div\r\n        class=\"ax-item-container\"\r\n        [class.ax-state-selected]=\"isItemSelected(item)\">\r\n        <div class=\"ax-item-input\">\r\n          <input\r\n            #ic\r\n            [id]=\"id + '-' + i\"\r\n            class=\"ax-checkbox\"\r\n            type=\"checkbox\"\r\n            (change)=\"_handleOnItemValueChange(item, $event)\"\r\n            [checked]=\"isItemSelected(item)\"\r\n            [disabled]=\"disabled || item.disabled\"\r\n            [readonly]=\"readonly || item.readonly\" />\r\n        </div>\r\n        <div class=\"ax-item-text\">\r\n          <label [for]=\"id + '-' + i\"> {{ item[textField] }}</label>\r\n          <p class=\"ax-hint-text\">\r\n            {{ item.hint ? item.hint : item[hintField] }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-template #radioButtonList>\r\n    <ng-container *ngFor=\"let item of displayItems; let i = index\">\r\n      <div\r\n        class=\"ax-item-container\"\r\n        [class.ax-state-selected]=\"isItemSelected(item)\">\r\n        <div class=\"ax-item-input\">\r\n          <input\r\n            #ir\r\n            [id]=\"id + '-' + i\"\r\n            class=\"ax-radio\"\r\n            type=\"radio\"\r\n            [attr.name]=\"id\"\r\n            (change)=\"_handleOnItemValueChange(item, $event)\"\r\n            [checked]=\"isItemSelected(item)\"\r\n            [disabled]=\"disabled || item.disabled\"\r\n            [readonly]=\"readonly || item.readonly\" />\r\n        </div>\r\n        <div class=\"ax-item-text\">\r\n          <label [for]=\"id + '-' + i\"> {{ item[textField] }}</label>\r\n          <p class=\"ax-hint-text\">\r\n            {{ item.hint ? item.hint : item[hintField] }}\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\r\n</div>\r\n", styles: [".ax-dark .ax-card-style .ax-selection-list.ax-vertical>div,.ax-dark .ax-card-style .ax-selection-list.ax-horizontal>div{background-color:rgba(var(--ax-color-surface))}.ax-selection-list{display:flex;flex-wrap:wrap}.ax-selection-list .ax-item-container{display:flex;align-items:flex-start}.ax-selection-list .ax-item-container .ax-item-input{display:flex;align-items:center;height:1.25rem}.ax-selection-list .ax-item-container .ax-item-text{font-size:.875rem;margin-inline-start:.75rem}.ax-selection-list.ax-vertical{flex-direction:column}.ax-selection-list.ax-vertical .ax-item-container:not(.ax-selection-list.ax-vertical .ax-item-container:last-child){margin-bottom:1rem}.ax-selection-list.ax-horizontal{flex-direction:row}.ax-selection-list.ax-horizontal .ax-item-container{padding-inline-end:.75rem}.ax-selection-list.ax-state-error{color:rgba(var(--ax-color-danger-500))}.ax-selection-list.ax-state-error .ax-checkbox-checkmark,.ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgba(var(--ax-color-danger-500))}.ax-separate-style .ax-selection-list.ax-vertical>div{padding-bottom:.875rem;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}.ax-separate-style .ax-selection-list.ax-vertical>div:last-child{border:0}.ax-card-style .ax-selection-list.ax-vertical>div,.ax-card-style .ax-selection-list.ax-horizontal>div{padding:1rem;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default)}.ax-card-style .ax-selection-list.ax-vertical>div.ax-state-selected,.ax-card-style .ax-selection-list.ax-horizontal>div.ax-state-selected{border-color:rgba(var(--ax-color-primary-500))}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { direction: [{
                 type: Input
             }] } });

package/esm2020/switch/src/switch.component.mjs CHANGED Viewed

@@ -21,7 +21,7 @@ export class AXSwitchComponent extends AXBaseValueComponentMixin {
     }
 }
 AXSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXSwitchComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXSwitchComponent, selector: "ax-switch", inputs: { disabled: "disabled", color: "color", readonly: "readonly", tabIndex: "tabIndex", size: "size", cssClass: "cssClass", cssStyle: "cssStyle", allowNull: "allowNull", value: "value", name: "name", checked: "checked", uncheckedText: "uncheckedText", checkedText: "checkedText", loading: "loading" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<button type=\"button\" role=\"switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [class.ax-switch-checked]=\"value\" (click)=\"_handleOnClickEvent($event)\">\r\n    <div class=\"ax-switch-handle\">\r\n        <ax-loading *ngIf=\"loading\"></ax-loading>\r\n            <ng-content select=\"ax-switch-handler-content\"></ng-content>\r\n    </div>\r\n    <span class=\"ax-switch-inner\" *ngIf=\"!value\">\r\n        <ng-content select=\"ax-switch-off-content\"></ng-content>\r\n\r\n    </span>\r\n    <span class=\"ax-switch-inner\" *ngIf=\"value\">\r\n        <ng-content select=\"ax-switch-on-content\"></ng-content>\r\n    </span>\r\n\r\n</button>", styles: ["ax-switch.ax-sm button{min-width:2rem;height:1rem;line-height:1rem}ax-switch.ax-sm button:active .ax-switch-handle{width:1rem}ax-switch.ax-sm .ax-switch-handle{width:.75rem;height:.75rem}ax-switch.ax-lg button{min-width:2.75rem;height:1.5rem;line-height:1.5rem}ax-switch.ax-lg button:active .ax-switch-handle{width:1.5rem}ax-switch.ax-lg .ax-switch-handle{width:1.25rem;height:1.25rem}ax-switch button{position:relative;display:inline-block;vertical-align:middle;border-radius:99rem;background-color:rgba(var(--ax-color-ghost),.38)!important;min-width:2.5rem;height:1.25rem;line-height:1.25rem;transition:background-color .3s linear;cursor:pointer}ax-switch button:active .ax-switch-handle{width:1.25rem}ax-switch button.ax-switch-checked{background-color:rgb(var(--ax-color-primary-500))!important}ax-switch button.ax-switch-checked .ax-switch-handle{inset-inline-end:.125rem;inset-inline-start:initial}ax-switch button.ax-switch-checked .ax-switch-inner{margin-inline-end:1.5rem;margin-inline-start:.375rem}ax-switch button .ax-switch-handle{width:1rem;height:1rem;background-color:#fff;position:absolute;border-radius:99rem;inset-inline-start:.125rem;top:.125rem;transition:width .3s;box-shadow:0 0 1px 1px #0000000d}ax-switch button .ax-switch-handle ax-switch-handler-content,ax-switch button .ax-switch-handle ax-switch-handler-content *{height:100%;width:100%;font-size:90%;display:flex;align-items:center;justify-content:center;color:#454a50}ax-switch button .ax-switch-handle:active{width:1.25rem}ax-switch button .ax-switch-handle ax-loading{width:100%;position:absolute;inset-inline-start:0;inset-inline-end:0;top:50%;transform:translateY(-50%)}ax-switch button .ax-switch-handle ax-loading svg{fill:rgb(var(--ax-color-primary-500));stroke:rgb(var(--ax-color-primary-500))}ax-switch button .ax-switch-handle:before{position:absolute;background-color:rgb(var(--ax-color-surface));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;border-radius:99rem;content:\"\"}ax-switch button .ax-switch-inner{display:block;margin-inline-start:1.5rem;margin-inline-end:.375rem;transition:margin .2s}ax-switch button .ax-switch-inner ax-switch-on-content,ax-switch button .ax-switch-inner ax-switch-off-content{display:flex;font-size:.875rem;padding:0 .25rem}ax-switch.ax-primary-default button:focus-visible{outline-color:rgb(var(--ax-color-primary-500))}ax-switch.ax-primary-default button ax-switch-handler-content,ax-switch.ax-primary-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-primary-default button.ax-switch-checked{background-color:rgb(var(--ax-color-primary-500))!important}ax-switch.ax-primary-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-primary-default button.ax-switch-checked ax-switch-handler-content *{color:rgb(var(--ax-color-primary-500))}ax-switch.ax-primary-default button.ax-switch-checked .ax-switch-inner{color:rgb(var(--ax-color-primary-fore))}ax-switch.ax-primary-default button .ax-switch-handle ax-loading svg{fill:rgb(var(--ax-color-primary-500));stroke:rgb(var(--ax-color-primary-500))}ax-switch.ax-secondary-default button:focus-visible{outline-color:rgb(var(--ax-color-secondary-500))}ax-switch.ax-secondary-default button ax-switch-handler-content,ax-switch.ax-secondary-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-secondary-default button.ax-switch-checked{background-color:rgb(var(--ax-color-secondary-500))!important}ax-switch.ax-secondary-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-secondary-default button.ax-switch-checked ax-switch-handler-content *{color:rgb(var(--ax-color-secondary-500))}ax-switch.ax-secondary-default button.ax-switch-checked .ax-switch-inner{color:rgb(var(--ax-color-secondary-fore))}ax-switch.ax-secondary-default button .ax-switch-handle ax-loading svg{fill:rgb(var(--ax-color-secondary-500));stroke:rgb(var(--ax-color-secondary-500))}ax-switch.ax-success-default button:focus-visible{outline-color:rgb(var(--ax-color-success-500))}ax-switch.ax-success-default button ax-switch-handler-content,ax-switch.ax-success-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-success-default button.ax-switch-checked{background-color:rgb(var(--ax-color-success-500))!important}ax-switch.ax-success-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-success-default button.ax-switch-checked ax-switch-handler-content *{color:rgb(var(--ax-color-success-500))}ax-switch.ax-success-default button.ax-switch-checked .ax-switch-inner{color:rgb(var(--ax-color-success-fore))}ax-switch.ax-success-default button .ax-switch-handle ax-loading svg{fill:rgb(var(--ax-color-success-500));stroke:rgb(var(--ax-color-success-500))}ax-switch.ax-warning-default button:focus-visible{outline-color:rgb(var(--ax-color-warning-500))}ax-switch.ax-warning-default button ax-switch-handler-content,ax-switch.ax-warning-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-warning-default button.ax-switch-checked{background-color:rgb(var(--ax-color-warning-500))!important}ax-switch.ax-warning-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-warning-default button.ax-switch-checked ax-switch-handler-content *{color:rgb(var(--ax-color-warning-500))}ax-switch.ax-warning-default button.ax-switch-checked .ax-switch-inner{color:rgb(var(--ax-color-warning-fore))}ax-switch.ax-warning-default button .ax-switch-handle ax-loading svg{fill:rgb(var(--ax-color-warning-500));stroke:rgb(var(--ax-color-warning-500))}ax-switch.ax-danger-default button:focus-visible{outline-color:rgb(var(--ax-color-danger-500))}ax-switch.ax-danger-default button ax-switch-handler-content,ax-switch.ax-danger-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-danger-default button.ax-switch-checked{background-color:rgb(var(--ax-color-danger-500))!important}ax-switch.ax-danger-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-danger-default button.ax-switch-checked ax-switch-handler-content *{color:rgb(var(--ax-color-danger-500))}ax-switch.ax-danger-default button.ax-switch-checked .ax-switch-inner{color:rgb(var(--ax-color-danger-fore))}ax-switch.ax-danger-default button .ax-switch-handle ax-loading svg{fill:rgb(var(--ax-color-danger-500));stroke:rgb(var(--ax-color-danger-500))}ax-switch .ax-state-disabled{opacity:.5;cursor:not-allowed}ax-switch .ax-state-readonly{opacity:.75}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXSwitchComponent, selector: "ax-switch", inputs: { disabled: "disabled", color: "color", readonly: "readonly", tabIndex: "tabIndex", size: "size", cssClass: "cssClass", cssStyle: "cssStyle", allowNull: "allowNull", value: "value", name: "name", checked: "checked", uncheckedText: "uncheckedText", checkedText: "checkedText", loading: "loading" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<button type=\"button\" role=\"switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [class.ax-switch-checked]=\"value\" (click)=\"_handleOnClickEvent($event)\">\r\n    <div class=\"ax-switch-handle\">\r\n        <ax-loading *ngIf=\"loading\"></ax-loading>\r\n            <ng-content select=\"ax-switch-handler-content\"></ng-content>\r\n    </div>\r\n    <span class=\"ax-switch-inner\" *ngIf=\"!value\">\r\n        <ng-content select=\"ax-switch-off-content\"></ng-content>\r\n\r\n    </span>\r\n    <span class=\"ax-switch-inner\" *ngIf=\"value\">\r\n        <ng-content select=\"ax-switch-on-content\"></ng-content>\r\n    </span>\r\n\r\n</button>", styles: ["ax-switch.ax-sm button{min-width:2rem;height:1rem;line-height:1rem}ax-switch.ax-sm button:active .ax-switch-handle{width:1rem}ax-switch.ax-sm .ax-switch-handle{width:.75rem;height:.75rem}ax-switch.ax-lg button{min-width:2.75rem;height:1.5rem;line-height:1.5rem}ax-switch.ax-lg button:active .ax-switch-handle{width:1.5rem}ax-switch.ax-lg .ax-switch-handle{width:1.25rem;height:1.25rem}ax-switch button{position:relative;display:inline-block;vertical-align:middle;border-radius:99rem;background-color:rgba(var(--ax-color-ghost-500))!important;min-width:2.5rem;height:1.25rem;line-height:1.25rem;transition:background-color .3s linear;cursor:pointer}ax-switch button:active .ax-switch-handle{width:1.25rem}ax-switch button.ax-switch-checked{background-color:rgba(var(--ax-color-primary-500))!important}ax-switch button.ax-switch-checked .ax-switch-handle{inset-inline-end:.125rem;inset-inline-start:initial}ax-switch button.ax-switch-checked .ax-switch-inner{margin-inline-end:1.5rem;margin-inline-start:.375rem}ax-switch button .ax-switch-handle{width:1rem;height:1rem;background-color:#fff;position:absolute;border-radius:99rem;inset-inline-start:.125rem;top:.125rem;transition:width .3s;box-shadow:0 0 1px 1px #0000000d}ax-switch button .ax-switch-handle ax-switch-handler-content,ax-switch button .ax-switch-handle ax-switch-handler-content *{height:100%;width:100%;font-size:100%;display:flex;align-items:center;justify-content:center;color:#454a50}ax-switch button .ax-switch-handle:active{width:1.25rem}ax-switch button .ax-switch-handle ax-loading{width:100%;position:absolute;inset-inline-start:0;inset-inline-end:0;top:50%;transform:translateY(-50%)}ax-switch button .ax-switch-handle ax-loading svg{fill:rgba(var(--ax-color-primary-500));stroke:rgba(var(--ax-color-primary-500))}ax-switch button .ax-switch-handle:before{position:absolute;background-color:rgba(var(--ax-color-surface));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;border-radius:99rem;content:\"\"}ax-switch button .ax-switch-inner{display:block;margin-inline-start:1.5rem;margin-inline-end:.375rem;transition:margin .2s}ax-switch button .ax-switch-inner ax-switch-on-content,ax-switch button .ax-switch-inner ax-switch-off-content{display:flex;font-size:.875rem;padding:0 .25rem}ax-switch.ax-primary-default button:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-switch.ax-primary-default button ax-switch-handler-content,ax-switch.ax-primary-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-primary-default button.ax-switch-checked{background-color:rgba(var(--ax-color-primary-500))!important}ax-switch.ax-primary-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-primary-default button.ax-switch-checked ax-switch-handler-content *{color:rgba(var(--ax-color-primary-500))}ax-switch.ax-primary-default button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-primary-fore))}ax-switch.ax-primary-default button .ax-switch-handle ax-loading svg{fill:rgba(var(--ax-color-primary-500));stroke:rgba(var(--ax-color-primary-500))}ax-switch.ax-secondary-default button:focus-visible{outline-color:rgba(var(--ax-color-secondary-500))}ax-switch.ax-secondary-default button ax-switch-handler-content,ax-switch.ax-secondary-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-secondary-default button.ax-switch-checked{background-color:rgba(var(--ax-color-secondary-500))!important}ax-switch.ax-secondary-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-secondary-default button.ax-switch-checked ax-switch-handler-content *{color:rgba(var(--ax-color-secondary-500))}ax-switch.ax-secondary-default button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-secondary-fore))}ax-switch.ax-secondary-default button .ax-switch-handle ax-loading svg{fill:rgba(var(--ax-color-secondary-500));stroke:rgba(var(--ax-color-secondary-500))}ax-switch.ax-success-default button:focus-visible{outline-color:rgba(var(--ax-color-success-500))}ax-switch.ax-success-default button ax-switch-handler-content,ax-switch.ax-success-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-success-default button.ax-switch-checked{background-color:rgba(var(--ax-color-success-500))!important}ax-switch.ax-success-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-success-default button.ax-switch-checked ax-switch-handler-content *{color:rgba(var(--ax-color-success-500))}ax-switch.ax-success-default button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-success-fore))}ax-switch.ax-success-default button .ax-switch-handle ax-loading svg{fill:rgba(var(--ax-color-success-500));stroke:rgba(var(--ax-color-success-500))}ax-switch.ax-warning-default button:focus-visible{outline-color:rgba(var(--ax-color-warning-500))}ax-switch.ax-warning-default button ax-switch-handler-content,ax-switch.ax-warning-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-warning-default button.ax-switch-checked{background-color:rgba(var(--ax-color-warning-500))!important}ax-switch.ax-warning-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-warning-default button.ax-switch-checked ax-switch-handler-content *{color:rgba(var(--ax-color-warning-500))}ax-switch.ax-warning-default button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-warning-fore))}ax-switch.ax-warning-default button .ax-switch-handle ax-loading svg{fill:rgba(var(--ax-color-warning-500));stroke:rgba(var(--ax-color-warning-500))}ax-switch.ax-danger-default button:focus-visible{outline-color:rgba(var(--ax-color-danger-500))}ax-switch.ax-danger-default button ax-switch-handler-content,ax-switch.ax-danger-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-danger-default button.ax-switch-checked{background-color:rgba(var(--ax-color-danger-500))!important}ax-switch.ax-danger-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-danger-default button.ax-switch-checked ax-switch-handler-content *{color:rgba(var(--ax-color-danger-500))}ax-switch.ax-danger-default button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-danger-fore))}ax-switch.ax-danger-default button .ax-switch-handle ax-loading svg{fill:rgba(var(--ax-color-danger-500));stroke:rgba(var(--ax-color-danger-500))}ax-switch .ax-state-disabled{opacity:.5;cursor:not-allowed}ax-switch .ax-state-readonly{opacity:.75}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXSwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-switch', inputs: [
@@ -37,7 +37,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                         'value',
                         'name',
                         'checked',
-                    ], outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" role=\"switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [class.ax-switch-checked]=\"value\" (click)=\"_handleOnClickEvent($event)\">\r\n    <div class=\"ax-switch-handle\">\r\n        <ax-loading *ngIf=\"loading\"></ax-loading>\r\n            <ng-content select=\"ax-switch-handler-content\"></ng-content>\r\n    </div>\r\n    <span class=\"ax-switch-inner\" *ngIf=\"!value\">\r\n        <ng-content select=\"ax-switch-off-content\"></ng-content>\r\n\r\n    </span>\r\n    <span class=\"ax-switch-inner\" *ngIf=\"value\">\r\n        <ng-content select=\"ax-switch-on-content\"></ng-content>\r\n    </span>\r\n\r\n</button>", styles: ["ax-switch.ax-sm button{min-width:2rem;height:1rem;line-height:1rem}ax-switch.ax-sm button:active .ax-switch-handle{width:1rem}ax-switch.ax-sm .ax-switch-handle{width:.75rem;height:.75rem}ax-switch.ax-lg button{min-width:2.75rem;height:1.5rem;line-height:1.5rem}ax-switch.ax-lg button:active .ax-switch-handle{width:1.5rem}ax-switch.ax-lg .ax-switch-handle{width:1.25rem;height:1.25rem}ax-switch button{position:relative;display:inline-block;vertical-align:middle;border-radius:99rem;background-color:rgba(var(--ax-color-ghost),.38)!important;min-width:2.5rem;height:1.25rem;line-height:1.25rem;transition:background-color .3s linear;cursor:pointer}ax-switch button:active .ax-switch-handle{width:1.25rem}ax-switch button.ax-switch-checked{background-color:rgb(var(--ax-color-primary-500))!important}ax-switch button.ax-switch-checked .ax-switch-handle{inset-inline-end:.125rem;inset-inline-start:initial}ax-switch button.ax-switch-checked .ax-switch-inner{margin-inline-end:1.5rem;margin-inline-start:.375rem}ax-switch button .ax-switch-handle{width:1rem;height:1rem;background-color:#fff;position:absolute;border-radius:99rem;inset-inline-start:.125rem;top:.125rem;transition:width .3s;box-shadow:0 0 1px 1px #0000000d}ax-switch button .ax-switch-handle ax-switch-handler-content,ax-switch button .ax-switch-handle ax-switch-handler-content *{height:100%;width:100%;font-size:90%;display:flex;align-items:center;justify-content:center;color:#454a50}ax-switch button .ax-switch-handle:active{width:1.25rem}ax-switch button .ax-switch-handle ax-loading{width:100%;position:absolute;inset-inline-start:0;inset-inline-end:0;top:50%;transform:translateY(-50%)}ax-switch button .ax-switch-handle ax-loading svg{fill:rgb(var(--ax-color-primary-500));stroke:rgb(var(--ax-color-primary-500))}ax-switch button .ax-switch-handle:before{position:absolute;background-color:rgb(var(--ax-color-surface));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;border-radius:99rem;content:\"\"}ax-switch button .ax-switch-inner{display:block;margin-inline-start:1.5rem;margin-inline-end:.375rem;transition:margin .2s}ax-switch button .ax-switch-inner ax-switch-on-content,ax-switch button .ax-switch-inner ax-switch-off-content{display:flex;font-size:.875rem;padding:0 .25rem}ax-switch.ax-primary-default button:focus-visible{outline-color:rgb(var(--ax-color-primary-500))}ax-switch.ax-primary-default button ax-switch-handler-content,ax-switch.ax-primary-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-primary-default button.ax-switch-checked{background-color:rgb(var(--ax-color-primary-500))!important}ax-switch.ax-primary-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-primary-default button.ax-switch-checked ax-switch-handler-content *{color:rgb(var(--ax-color-primary-500))}ax-switch.ax-primary-default button.ax-switch-checked .ax-switch-inner{color:rgb(var(--ax-color-primary-fore))}ax-switch.ax-primary-default button .ax-switch-handle ax-loading svg{fill:rgb(var(--ax-color-primary-500));stroke:rgb(var(--ax-color-primary-500))}ax-switch.ax-secondary-default button:focus-visible{outline-color:rgb(var(--ax-color-secondary-500))}ax-switch.ax-secondary-default button ax-switch-handler-content,ax-switch.ax-secondary-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-secondary-default button.ax-switch-checked{background-color:rgb(var(--ax-color-secondary-500))!important}ax-switch.ax-secondary-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-secondary-default button.ax-switch-checked ax-switch-handler-content *{color:rgb(var(--ax-color-secondary-500))}ax-switch.ax-secondary-default button.ax-switch-checked .ax-switch-inner{color:rgb(var(--ax-color-secondary-fore))}ax-switch.ax-secondary-default button .ax-switch-handle ax-loading svg{fill:rgb(var(--ax-color-secondary-500));stroke:rgb(var(--ax-color-secondary-500))}ax-switch.ax-success-default button:focus-visible{outline-color:rgb(var(--ax-color-success-500))}ax-switch.ax-success-default button ax-switch-handler-content,ax-switch.ax-success-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-success-default button.ax-switch-checked{background-color:rgb(var(--ax-color-success-500))!important}ax-switch.ax-success-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-success-default button.ax-switch-checked ax-switch-handler-content *{color:rgb(var(--ax-color-success-500))}ax-switch.ax-success-default button.ax-switch-checked .ax-switch-inner{color:rgb(var(--ax-color-success-fore))}ax-switch.ax-success-default button .ax-switch-handle ax-loading svg{fill:rgb(var(--ax-color-success-500));stroke:rgb(var(--ax-color-success-500))}ax-switch.ax-warning-default button:focus-visible{outline-color:rgb(var(--ax-color-warning-500))}ax-switch.ax-warning-default button ax-switch-handler-content,ax-switch.ax-warning-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-warning-default button.ax-switch-checked{background-color:rgb(var(--ax-color-warning-500))!important}ax-switch.ax-warning-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-warning-default button.ax-switch-checked ax-switch-handler-content *{color:rgb(var(--ax-color-warning-500))}ax-switch.ax-warning-default button.ax-switch-checked .ax-switch-inner{color:rgb(var(--ax-color-warning-fore))}ax-switch.ax-warning-default button .ax-switch-handle ax-loading svg{fill:rgb(var(--ax-color-warning-500));stroke:rgb(var(--ax-color-warning-500))}ax-switch.ax-danger-default button:focus-visible{outline-color:rgb(var(--ax-color-danger-500))}ax-switch.ax-danger-default button ax-switch-handler-content,ax-switch.ax-danger-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-danger-default button.ax-switch-checked{background-color:rgb(var(--ax-color-danger-500))!important}ax-switch.ax-danger-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-danger-default button.ax-switch-checked ax-switch-handler-content *{color:rgb(var(--ax-color-danger-500))}ax-switch.ax-danger-default button.ax-switch-checked .ax-switch-inner{color:rgb(var(--ax-color-danger-fore))}ax-switch.ax-danger-default button .ax-switch-handle ax-loading svg{fill:rgb(var(--ax-color-danger-500));stroke:rgb(var(--ax-color-danger-500))}ax-switch .ax-state-disabled{opacity:.5;cursor:not-allowed}ax-switch .ax-state-readonly{opacity:.75}\n"] }]
+                    ], outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" role=\"switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [class.ax-switch-checked]=\"value\" (click)=\"_handleOnClickEvent($event)\">\r\n    <div class=\"ax-switch-handle\">\r\n        <ax-loading *ngIf=\"loading\"></ax-loading>\r\n            <ng-content select=\"ax-switch-handler-content\"></ng-content>\r\n    </div>\r\n    <span class=\"ax-switch-inner\" *ngIf=\"!value\">\r\n        <ng-content select=\"ax-switch-off-content\"></ng-content>\r\n\r\n    </span>\r\n    <span class=\"ax-switch-inner\" *ngIf=\"value\">\r\n        <ng-content select=\"ax-switch-on-content\"></ng-content>\r\n    </span>\r\n\r\n</button>", styles: ["ax-switch.ax-sm button{min-width:2rem;height:1rem;line-height:1rem}ax-switch.ax-sm button:active .ax-switch-handle{width:1rem}ax-switch.ax-sm .ax-switch-handle{width:.75rem;height:.75rem}ax-switch.ax-lg button{min-width:2.75rem;height:1.5rem;line-height:1.5rem}ax-switch.ax-lg button:active .ax-switch-handle{width:1.5rem}ax-switch.ax-lg .ax-switch-handle{width:1.25rem;height:1.25rem}ax-switch button{position:relative;display:inline-block;vertical-align:middle;border-radius:99rem;background-color:rgba(var(--ax-color-ghost-500))!important;min-width:2.5rem;height:1.25rem;line-height:1.25rem;transition:background-color .3s linear;cursor:pointer}ax-switch button:active .ax-switch-handle{width:1.25rem}ax-switch button.ax-switch-checked{background-color:rgba(var(--ax-color-primary-500))!important}ax-switch button.ax-switch-checked .ax-switch-handle{inset-inline-end:.125rem;inset-inline-start:initial}ax-switch button.ax-switch-checked .ax-switch-inner{margin-inline-end:1.5rem;margin-inline-start:.375rem}ax-switch button .ax-switch-handle{width:1rem;height:1rem;background-color:#fff;position:absolute;border-radius:99rem;inset-inline-start:.125rem;top:.125rem;transition:width .3s;box-shadow:0 0 1px 1px #0000000d}ax-switch button .ax-switch-handle ax-switch-handler-content,ax-switch button .ax-switch-handle ax-switch-handler-content *{height:100%;width:100%;font-size:100%;display:flex;align-items:center;justify-content:center;color:#454a50}ax-switch button .ax-switch-handle:active{width:1.25rem}ax-switch button .ax-switch-handle ax-loading{width:100%;position:absolute;inset-inline-start:0;inset-inline-end:0;top:50%;transform:translateY(-50%)}ax-switch button .ax-switch-handle ax-loading svg{fill:rgba(var(--ax-color-primary-500));stroke:rgba(var(--ax-color-primary-500))}ax-switch button .ax-switch-handle:before{position:absolute;background-color:rgba(var(--ax-color-surface));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;border-radius:99rem;content:\"\"}ax-switch button .ax-switch-inner{display:block;margin-inline-start:1.5rem;margin-inline-end:.375rem;transition:margin .2s}ax-switch button .ax-switch-inner ax-switch-on-content,ax-switch button .ax-switch-inner ax-switch-off-content{display:flex;font-size:.875rem;padding:0 .25rem}ax-switch.ax-primary-default button:focus-visible{outline-color:rgba(var(--ax-color-primary-500))}ax-switch.ax-primary-default button ax-switch-handler-content,ax-switch.ax-primary-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-primary-default button.ax-switch-checked{background-color:rgba(var(--ax-color-primary-500))!important}ax-switch.ax-primary-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-primary-default button.ax-switch-checked ax-switch-handler-content *{color:rgba(var(--ax-color-primary-500))}ax-switch.ax-primary-default button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-primary-fore))}ax-switch.ax-primary-default button .ax-switch-handle ax-loading svg{fill:rgba(var(--ax-color-primary-500));stroke:rgba(var(--ax-color-primary-500))}ax-switch.ax-secondary-default button:focus-visible{outline-color:rgba(var(--ax-color-secondary-500))}ax-switch.ax-secondary-default button ax-switch-handler-content,ax-switch.ax-secondary-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-secondary-default button.ax-switch-checked{background-color:rgba(var(--ax-color-secondary-500))!important}ax-switch.ax-secondary-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-secondary-default button.ax-switch-checked ax-switch-handler-content *{color:rgba(var(--ax-color-secondary-500))}ax-switch.ax-secondary-default button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-secondary-fore))}ax-switch.ax-secondary-default button .ax-switch-handle ax-loading svg{fill:rgba(var(--ax-color-secondary-500));stroke:rgba(var(--ax-color-secondary-500))}ax-switch.ax-success-default button:focus-visible{outline-color:rgba(var(--ax-color-success-500))}ax-switch.ax-success-default button ax-switch-handler-content,ax-switch.ax-success-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-success-default button.ax-switch-checked{background-color:rgba(var(--ax-color-success-500))!important}ax-switch.ax-success-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-success-default button.ax-switch-checked ax-switch-handler-content *{color:rgba(var(--ax-color-success-500))}ax-switch.ax-success-default button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-success-fore))}ax-switch.ax-success-default button .ax-switch-handle ax-loading svg{fill:rgba(var(--ax-color-success-500));stroke:rgba(var(--ax-color-success-500))}ax-switch.ax-warning-default button:focus-visible{outline-color:rgba(var(--ax-color-warning-500))}ax-switch.ax-warning-default button ax-switch-handler-content,ax-switch.ax-warning-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-warning-default button.ax-switch-checked{background-color:rgba(var(--ax-color-warning-500))!important}ax-switch.ax-warning-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-warning-default button.ax-switch-checked ax-switch-handler-content *{color:rgba(var(--ax-color-warning-500))}ax-switch.ax-warning-default button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-warning-fore))}ax-switch.ax-warning-default button .ax-switch-handle ax-loading svg{fill:rgba(var(--ax-color-warning-500));stroke:rgba(var(--ax-color-warning-500))}ax-switch.ax-danger-default button:focus-visible{outline-color:rgba(var(--ax-color-danger-500))}ax-switch.ax-danger-default button ax-switch-handler-content,ax-switch.ax-danger-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-danger-default button.ax-switch-checked{background-color:rgba(var(--ax-color-danger-500))!important}ax-switch.ax-danger-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-danger-default button.ax-switch-checked ax-switch-handler-content *{color:rgba(var(--ax-color-danger-500))}ax-switch.ax-danger-default button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-danger-fore))}ax-switch.ax-danger-default button .ax-switch-handle ax-loading svg{fill:rgba(var(--ax-color-danger-500));stroke:rgba(var(--ax-color-danger-500))}ax-switch .ax-state-disabled{opacity:.5;cursor:not-allowed}ax-switch .ax-state-readonly{opacity:.75}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { uncheckedText: [{
                 type: Input
             }], checkedText: [{

package/esm2020/tabs/src/tabs.component.mjs CHANGED Viewed

@@ -77,14 +77,14 @@ AXTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
     <div class="ax-items-wrapper">
       <ng-content select="ax-tab-item"> </ng-content>
     </div>
-  `, isInline: true, styles: ["html.ax-dark ax-tabs.ax-look-classic ax-tab-item:hover,html.ax-dark ax-tabs.ax-look-classic ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500))!important;border-top-color:rgba(var(--ax-color-primary-500))!important;border-bottom-color:transparent!important;color:rgba(var(--ax-color-primary-fore))!important}ax-tabs{position:relative;display:block}ax-tabs.ax-tabs-fit{width:100%}ax-tabs.ax-tabs-fit ax-tab-item{flex:1}ax-tabs:not(.ax-look-custom) .ax-items-wrapper{position:relative}ax-tabs:not(.ax-look-custom) .ax-items-wrapper ax-tab-item{font-size:.875rem;line-height:1.25rem;padding:.75rem 1rem;cursor:pointer;position:relative;display:flex;gap:.5rem;-webkit-user-select:none;user-select:none}ax-tabs:not(.ax-look-custom) .ax-items-wrapper ax-tab-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-tabs.ax-horizontal .ax-items-wrapper{display:flex}ax-tabs.ax-horizontal .ax-items-wrapper ax-tab-item{text-align:center;align-items:center;justify-content:center}ax-tabs.ax-horizontal.ax-look-pills ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-tabs.ax-horizontal.ax-look-pills ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-pills ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-text-default))}ax-tabs.ax-horizontal.ax-look-pills-color ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-inline-end:.25rem}ax-tabs.ax-horizontal.ax-look-pills-color ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-pills-color ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper{border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper ax-tab-item{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper ax-tab-item.ax-state-active{border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper ax-tab-item{background:rgba(var(--ax-color-on-surface));border-top-width:1px;border-inline-start-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));margin-inline-end:.2rem}ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-surface));border-top-color:rgba(var(--ax-color-primary-500));border-bottom-color:transparent;color:rgba(var(--ax-color-primary-500))}ax-tabs.ax-vertical .ax-items-wrapper{display:flex;flex-direction:column}ax-tabs.ax-vertical.ax-look-pills ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-block-end:.25rem}ax-tabs.ax-vertical.ax-look-pills ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-pills ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-text-default))}ax-tabs.ax-vertical.ax-look-pills-color ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-block-end:.25rem}ax-tabs.ax-vertical.ax-look-pills-color ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-pills-color ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper{border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper ax-tab-item{border-inline-start:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper ax-tab-item.ax-state-active{border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper{border-top-width:1px;border-bottom-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper ax-tab-item{background:rgba(var(--ax-color-on-surface));border-inline-start-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-surface));border-inline-start-color:rgba(var(--ax-color-primary-500));border-inline-end-color:transparent;color:rgba(var(--ax-color-primary-500))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".ax-dark ax-tabs.ax-look-classic ax-tab-item:hover,.ax-dark ax-tabs.ax-look-classic ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500))!important;border-top-color:rgba(var(--ax-color-primary-500))!important;border-bottom-color:transparent!important;color:rgba(var(--ax-color-primary-fore))!important}ax-tabs{position:relative;display:block}ax-tabs.ax-tabs-fit{width:100%}ax-tabs.ax-tabs-fit ax-tab-item{flex:1}ax-tabs:not(.ax-look-custom) .ax-items-wrapper{position:relative}ax-tabs:not(.ax-look-custom) .ax-items-wrapper ax-tab-item{font-size:.875rem;line-height:1.25rem;padding:.75rem 1rem;cursor:pointer;position:relative;display:flex;gap:.5rem;-webkit-user-select:none;user-select:none}ax-tabs:not(.ax-look-custom) .ax-items-wrapper ax-tab-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-tabs.ax-horizontal .ax-items-wrapper{display:flex}ax-tabs.ax-horizontal .ax-items-wrapper ax-tab-item{text-align:center;align-items:center;justify-content:center}ax-tabs.ax-horizontal.ax-look-pills ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-tabs.ax-horizontal.ax-look-pills ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-pills ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-text-default))}ax-tabs.ax-horizontal.ax-look-pills-color ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-inline-end:.25rem}ax-tabs.ax-horizontal.ax-look-pills-color ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-pills-color ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper{border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper ax-tab-item{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper ax-tab-item.ax-state-active{border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper ax-tab-item{background:rgba(var(--ax-color-on-surface));border-top-width:1px;border-inline-start-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));margin-inline-end:.2rem}ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-surface));border-top-color:rgba(var(--ax-color-primary-500));border-bottom-color:transparent;color:rgba(var(--ax-color-primary-500))}ax-tabs.ax-vertical .ax-items-wrapper{display:flex;flex-direction:column}ax-tabs.ax-vertical.ax-look-pills ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-block-end:.25rem}ax-tabs.ax-vertical.ax-look-pills ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-pills ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-text-default))}ax-tabs.ax-vertical.ax-look-pills-color ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-block-end:.25rem}ax-tabs.ax-vertical.ax-look-pills-color ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-pills-color ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper{border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper ax-tab-item{border-inline-start:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper ax-tab-item.ax-state-active{border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper{border-top-width:1px;border-bottom-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper ax-tab-item{background:rgba(var(--ax-color-on-surface));border-inline-start-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-surface));border-inline-start-color:rgba(var(--ax-color-primary-500));border-inline-end-color:transparent;color:rgba(var(--ax-color-primary-500))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-tabs', template: `
     <div class="ax-items-wrapper">
       <ng-content select="ax-tab-item"> </ng-content>
     </div>
-  `, host: { class: 'ax-tabs' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["html.ax-dark ax-tabs.ax-look-classic ax-tab-item:hover,html.ax-dark ax-tabs.ax-look-classic ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500))!important;border-top-color:rgba(var(--ax-color-primary-500))!important;border-bottom-color:transparent!important;color:rgba(var(--ax-color-primary-fore))!important}ax-tabs{position:relative;display:block}ax-tabs.ax-tabs-fit{width:100%}ax-tabs.ax-tabs-fit ax-tab-item{flex:1}ax-tabs:not(.ax-look-custom) .ax-items-wrapper{position:relative}ax-tabs:not(.ax-look-custom) .ax-items-wrapper ax-tab-item{font-size:.875rem;line-height:1.25rem;padding:.75rem 1rem;cursor:pointer;position:relative;display:flex;gap:.5rem;-webkit-user-select:none;user-select:none}ax-tabs:not(.ax-look-custom) .ax-items-wrapper ax-tab-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-tabs.ax-horizontal .ax-items-wrapper{display:flex}ax-tabs.ax-horizontal .ax-items-wrapper ax-tab-item{text-align:center;align-items:center;justify-content:center}ax-tabs.ax-horizontal.ax-look-pills ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-tabs.ax-horizontal.ax-look-pills ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-pills ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-text-default))}ax-tabs.ax-horizontal.ax-look-pills-color ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-inline-end:.25rem}ax-tabs.ax-horizontal.ax-look-pills-color ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-pills-color ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper{border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper ax-tab-item{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper ax-tab-item.ax-state-active{border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper ax-tab-item{background:rgba(var(--ax-color-on-surface));border-top-width:1px;border-inline-start-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));margin-inline-end:.2rem}ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-surface));border-top-color:rgba(var(--ax-color-primary-500));border-bottom-color:transparent;color:rgba(var(--ax-color-primary-500))}ax-tabs.ax-vertical .ax-items-wrapper{display:flex;flex-direction:column}ax-tabs.ax-vertical.ax-look-pills ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-block-end:.25rem}ax-tabs.ax-vertical.ax-look-pills ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-pills ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-text-default))}ax-tabs.ax-vertical.ax-look-pills-color ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-block-end:.25rem}ax-tabs.ax-vertical.ax-look-pills-color ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-pills-color ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper{border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper ax-tab-item{border-inline-start:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper ax-tab-item.ax-state-active{border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper{border-top-width:1px;border-bottom-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper ax-tab-item{background:rgba(var(--ax-color-on-surface));border-inline-start-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-surface));border-inline-start-color:rgba(var(--ax-color-primary-500));border-inline-end-color:transparent;color:rgba(var(--ax-color-primary-500))}\n"] }]
+  `, host: { class: 'ax-tabs' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".ax-dark ax-tabs.ax-look-classic ax-tab-item:hover,.ax-dark ax-tabs.ax-look-classic ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500))!important;border-top-color:rgba(var(--ax-color-primary-500))!important;border-bottom-color:transparent!important;color:rgba(var(--ax-color-primary-fore))!important}ax-tabs{position:relative;display:block}ax-tabs.ax-tabs-fit{width:100%}ax-tabs.ax-tabs-fit ax-tab-item{flex:1}ax-tabs:not(.ax-look-custom) .ax-items-wrapper{position:relative}ax-tabs:not(.ax-look-custom) .ax-items-wrapper ax-tab-item{font-size:.875rem;line-height:1.25rem;padding:.75rem 1rem;cursor:pointer;position:relative;display:flex;gap:.5rem;-webkit-user-select:none;user-select:none}ax-tabs:not(.ax-look-custom) .ax-items-wrapper ax-tab-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-tabs.ax-horizontal .ax-items-wrapper{display:flex}ax-tabs.ax-horizontal .ax-items-wrapper ax-tab-item{text-align:center;align-items:center;justify-content:center}ax-tabs.ax-horizontal.ax-look-pills ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-tabs.ax-horizontal.ax-look-pills ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-pills ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-text-default))}ax-tabs.ax-horizontal.ax-look-pills-color ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-inline-end:.25rem}ax-tabs.ax-horizontal.ax-look-pills-color ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-pills-color ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper{border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper ax-tab-item{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-with-line .ax-items-wrapper ax-tab-item.ax-state-active{border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper ax-tab-item{background:rgba(var(--ax-color-on-surface));border-top-width:1px;border-inline-start-width:1px;border-inline-end-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default));margin-inline-end:.2rem}ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-horizontal.ax-look-classic .ax-items-wrapper ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-surface));border-top-color:rgba(var(--ax-color-primary-500));border-bottom-color:transparent;color:rgba(var(--ax-color-primary-500))}ax-tabs.ax-vertical .ax-items-wrapper{display:flex;flex-direction:column}ax-tabs.ax-vertical.ax-look-pills ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-block-end:.25rem}ax-tabs.ax-vertical.ax-look-pills ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-pills ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-text-default))}ax-tabs.ax-vertical.ax-look-pills-color ax-tab-item{border-radius:var(--ax-rounded-border-default);margin-block-end:.25rem}ax-tabs.ax-vertical.ax-look-pills-color ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-pills-color ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper{border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper ax-tab-item{border-inline-start:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-with-line .ax-items-wrapper ax-tab-item.ax-state-active{border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper{border-top-width:1px;border-bottom-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper ax-tab-item{background:rgba(var(--ax-color-on-surface));border-inline-start-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default))}ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper ax-tab-item:hover,ax-tabs.ax-vertical.ax-look-classic .ax-items-wrapper ax-tab-item.ax-state-active{background-color:rgba(var(--ax-color-surface));border-inline-start-color:rgba(var(--ax-color-primary-500));border-inline-end-color:transparent;color:rgba(var(--ax-color-primary-500))}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _contentTabs: [{
                 type: ContentChildren,
                 args: [AXTabItemComponent]

package/esm2020/tag/src/tag.component.mjs CHANGED Viewed

@@ -14,10 +14,10 @@ export class AXTagComponent extends AXBaseComponent {
     }
 }
 AXTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXTagComponent, selector: "ax-tag", inputs: { text: "text", look: "look" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<div class=\"ax-tag-text\" *ngIf=\"text\">{{text }}</div>\r\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-tag{font-size:.875rem;padding:.25rem .5rem;border-radius:var(--ax-rounded-border-default);display:inline-flex;align-items:center}ax-tag ax-prefix,ax-tag ax-suffix{display:flex;align-items:center;font-size:1rem}ax-tag ax-prefix ax-icon,ax-tag ax-suffix ax-icon{font-size:1rem!important}ax-tag ax-prefix{padding-inline-end:.25rem}ax-tag ax-suffix{padding-inline-start:.25rem}ax-tag.ax-ghost-default{background-color:rgba(var(--ax-color-ghost),.08);color:rgba(var(--ax-color-ghost),.87)}ax-tag.ax-ghost-outline{border:1px solid;border-color:rgba(var(--ax-color-ghost),.16);color:rgba(var(--ax-color-ghost),.87)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXTagComponent, selector: "ax-tag", inputs: { text: "text", look: "look" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<div class=\"ax-tag-text\" *ngIf=\"text\">{{text }}</div>\r\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-tag{font-size:.875rem;padding:.25rem .5rem;border-radius:var(--ax-rounded-border-default);display:inline-flex;align-items:center}ax-tag ax-prefix,ax-tag ax-suffix{display:flex;align-items:center;font-size:1rem}ax-tag ax-prefix ax-icon,ax-tag ax-suffix ax-icon{font-size:1rem!important}ax-tag ax-prefix{padding-inline-end:.25rem}ax-tag ax-suffix{padding-inline-start:.25rem}ax-tag.ax-ghost-default{background-color:rgba(var(--ax-color-ghost-100));color:rgba(var(--ax-color-ghost-fore))}ax-tag.ax-ghost-outline{border:1px solid;border-color:rgba(var(--ax-color-ghost-500));color:rgba(var(--ax-color-ghost-fore))}.ax-dark ax-tag.ax-ghost-default{background-color:rgba(var(--ax-color-ghost-500));color:rgba(var(--ax-color-ghost-fore))}.ax-dark ax-tag.ax-ghost-outline{border:1px solid;border-color:rgba(var(--ax-color-ghost-300));color:rgba(var(--ax-color-ghost-fore))}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXTagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tag', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<div class=\"ax-tag-text\" *ngIf=\"text\">{{text }}</div>\r\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-tag{font-size:.875rem;padding:.25rem .5rem;border-radius:var(--ax-rounded-border-default);display:inline-flex;align-items:center}ax-tag ax-prefix,ax-tag ax-suffix{display:flex;align-items:center;font-size:1rem}ax-tag ax-prefix ax-icon,ax-tag ax-suffix ax-icon{font-size:1rem!important}ax-tag ax-prefix{padding-inline-end:.25rem}ax-tag ax-suffix{padding-inline-start:.25rem}ax-tag.ax-ghost-default{background-color:rgba(var(--ax-color-ghost),.08);color:rgba(var(--ax-color-ghost),.87)}ax-tag.ax-ghost-outline{border:1px solid;border-color:rgba(var(--ax-color-ghost),.16);color:rgba(var(--ax-color-ghost),.87)}\n"] }]
+            args: [{ selector: 'ax-tag', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<div class=\"ax-tag-text\" *ngIf=\"text\">{{text }}</div>\r\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-tag{font-size:.875rem;padding:.25rem .5rem;border-radius:var(--ax-rounded-border-default);display:inline-flex;align-items:center}ax-tag ax-prefix,ax-tag ax-suffix{display:flex;align-items:center;font-size:1rem}ax-tag ax-prefix ax-icon,ax-tag ax-suffix ax-icon{font-size:1rem!important}ax-tag ax-prefix{padding-inline-end:.25rem}ax-tag ax-suffix{padding-inline-start:.25rem}ax-tag.ax-ghost-default{background-color:rgba(var(--ax-color-ghost-100));color:rgba(var(--ax-color-ghost-fore))}ax-tag.ax-ghost-outline{border:1px solid;border-color:rgba(var(--ax-color-ghost-500));color:rgba(var(--ax-color-ghost-fore))}.ax-dark ax-tag.ax-ghost-default{background-color:rgba(var(--ax-color-ghost-500));color:rgba(var(--ax-color-ghost-fore))}.ax-dark ax-tag.ax-ghost-outline{border:1px solid;border-color:rgba(var(--ax-color-ghost-300));color:rgba(var(--ax-color-ghost-fore))}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { text: [{
                 type: Input
             }], look: [{

package/esm2020/textarea/src/textarea.component.mjs CHANGED Viewed

@@ -15,10 +15,10 @@ export class AXTextareaComponent extends AXBaseTextBoxMixin {
     }
 }
 AXTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXTextareaComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXTextareaComponent, selector: "ax-textarea", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", rows: "rows" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-editor-container" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<textarea #input [attr.name]=\"name\" type=\"text\" [rows]=\"rows\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\"></textarea>\r\n<ng-content select=\"ax-suffix\"></ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", styles: ["ax-textarea{position:relative;width:100%;height:auto!important;flex-direction:column;background-color:var(--ax-color-surface);border-radius:var(--ax-rounded-border-default);border:1px solid;border:rgb(var(--ax-color-border-default));overflow:hidden}ax-textarea textarea{height:-moz-fit-content;height:fit-content;line-height:1.7;width:100%;font-size:.875rem;padding:.625rem}ax-textarea textarea:focus{outline-color:transparent}ax-textarea>ax-prefix,ax-textarea>ax-suffix{margin-bottom:.5rem;padding:.375rem}ax-textarea.ax-state-disabled{cursor:not-allowed;opacity:.5}\n"], dependencies: [{ 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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 });
+AXTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXTextareaComponent, selector: "ax-textarea", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", rows: "rows" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-editor-container" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<textarea #input [attr.name]=\"name\" type=\"text\" [rows]=\"rows\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\"></textarea>\r\n<ng-content select=\"ax-suffix\"></ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", styles: ["ax-textarea{position:relative;width:100%;height:auto!important;flex-direction:column;border-radius:var(--ax-rounded-border-default);border:1px solid;border:rgba(var(--ax-color-border-default));overflow:hidden}ax-textarea textarea{height:-moz-fit-content;height:fit-content;line-height:1.7;width:100%;font-size:.875rem;padding:.625rem;background-color:inherit}ax-textarea textarea:focus{outline-color:transparent}ax-textarea>ax-prefix,ax-textarea>ax-suffix{margin-bottom:.5rem;padding:.375rem}ax-textarea.ax-state-disabled{cursor:not-allowed;opacity:.5}\n"], dependencies: [{ 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: "15.1.4", ngImport: i0, type: AXTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-textarea', inputs: ['disabled', 'tabIndex', 'readonly', 'value', 'name', 'checked', 'placeholder', 'maxLength'], outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<textarea #input [attr.name]=\"name\" type=\"text\" [rows]=\"rows\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\"></textarea>\r\n<ng-content select=\"ax-suffix\"></ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", styles: ["ax-textarea{position:relative;width:100%;height:auto!important;flex-direction:column;background-color:var(--ax-color-surface);border-radius:var(--ax-rounded-border-default);border:1px solid;border:rgb(var(--ax-color-border-default));overflow:hidden}ax-textarea textarea{height:-moz-fit-content;height:fit-content;line-height:1.7;width:100%;font-size:.875rem;padding:.625rem}ax-textarea textarea:focus{outline-color:transparent}ax-textarea>ax-prefix,ax-textarea>ax-suffix{margin-bottom:.5rem;padding:.375rem}ax-textarea.ax-state-disabled{cursor:not-allowed;opacity:.5}\n"] }]
+            args: [{ selector: 'ax-textarea', inputs: ['disabled', 'tabIndex', 'readonly', 'value', 'name', 'checked', 'placeholder', 'maxLength'], outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<textarea #input [attr.name]=\"name\" type=\"text\" [rows]=\"rows\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\"></textarea>\r\n<ng-content select=\"ax-suffix\"></ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", styles: ["ax-textarea{position:relative;width:100%;height:auto!important;flex-direction:column;border-radius:var(--ax-rounded-border-default);border:1px solid;border:rgba(var(--ax-color-border-default));overflow:hidden}ax-textarea textarea{height:-moz-fit-content;height:fit-content;line-height:1.7;width:100%;font-size:.875rem;padding:.625rem;background-color:inherit}ax-textarea textarea:focus{outline-color:transparent}ax-textarea>ax-prefix,ax-textarea>ax-suffix{margin-bottom:.5rem;padding:.375rem}ax-textarea.ax-state-disabled{cursor:not-allowed;opacity:.5}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']

package/esm2020/toast/src/toast.component.mjs CHANGED Viewed

@@ -52,10 +52,10 @@ export class AXToastComponent extends AXBaseComponentMixin {
     }
 }
 AXToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXToastComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXToastComponent, selector: "ax-toast", host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXToastComponent }], usesInheritance: true, ngImport: i0, template: "<span [class]=\"'ax-toast-icon' + ' ' +  _icon \"></span>\r\n<div class=\"ax-toast-content\">\r\n    <div class=\"ax-toast-title\" [class.ax-mb-2]=\"options.title && options.content\">{{options.title}}</div>\r\n    <div class=\"ax-toast-content\" [innerHTML]=\"options.content\"></div>\r\n    <div class=\"ax-toast-buttons\" *ngIf=\"options?.buttons?.length\">\r\n        <button *ngFor=\"let button of options.buttons\" (click)=\"_handleButtonClick(button)\">\r\n            {{button.text}}\r\n        </button>\r\n    </div>\r\n</div>\r\n<span class=\"ax-icon ax-icon-close\" *ngIf=\"options.closeable\" (click)=\"close()\"></span>\r\n<div class=\"ax-toast-progress\" [style.animation-duration.ms]=\"options.timeOut\" *ngIf=\"options.timeOut\"></div>", styles: ["html.ax-dark ax-toast.ax-primary{background-color:rgb(var(--ax-color-primary-900));color:rgb(var(--ax-color-primary-100));border-color:rgb(var(--ax-color-primary-500))}html.ax-dark ax-toast.ax-primary .ax-toast-title{color:rgb(var(--ax-color-primary-100))}html.ax-dark ax-toast.ax-primary .ax-toast-progress{background-color:rgb(var(--ax-color-primary-500))}html.ax-dark ax-toast.ax-secondary{background-color:rgb(var(--ax-color-secondary-900));color:rgb(var(--ax-color-secondary-100));border-color:rgb(var(--ax-color-secondary-500))}html.ax-dark ax-toast.ax-secondary .ax-toast-title{color:rgb(var(--ax-color-secondary-100))}html.ax-dark ax-toast.ax-secondary .ax-toast-progress{background-color:rgb(var(--ax-color-secondary-500))}html.ax-dark ax-toast.ax-success{background-color:rgb(var(--ax-color-success-900));color:rgb(var(--ax-color-success-100));border-color:rgb(var(--ax-color-success-500))}html.ax-dark ax-toast.ax-success .ax-toast-title{color:rgb(var(--ax-color-success-100))}html.ax-dark ax-toast.ax-success .ax-toast-progress{background-color:rgb(var(--ax-color-success-500))}html.ax-dark ax-toast.ax-warning{background-color:rgb(var(--ax-color-warning-900));color:rgb(var(--ax-color-warning-100));border-color:rgb(var(--ax-color-warning-500))}html.ax-dark ax-toast.ax-warning .ax-toast-title{color:rgb(var(--ax-color-warning-100))}html.ax-dark ax-toast.ax-warning .ax-toast-progress{background-color:rgb(var(--ax-color-warning-500))}html.ax-dark ax-toast.ax-danger{background-color:rgb(var(--ax-color-danger-900));color:rgb(var(--ax-color-danger-100));border-color:rgb(var(--ax-color-danger-500))}html.ax-dark ax-toast.ax-danger .ax-toast-title{color:rgb(var(--ax-color-danger-100))}html.ax-dark ax-toast.ax-danger .ax-toast-progress{background-color:rgb(var(--ax-color-danger-500))}ax-toast{width:max(20vw,380px);display:flex;padding:.75rem 1rem;border-radius:var(--ax-rounded-border-default);font-size:.875rem;background-color:rgb(var(--ax-color-surface));border-color:rgba(var(--ax-color-border-default));position:relative;overflow:hidden;box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f}ax-toast.ax-primary{background-color:rgb(var(--ax-color-primary-500));color:rgb(var(--ax-color-primary-fore))}ax-toast.ax-primary .ax-toast-progress{background-color:rgb(var(--ax-color-primary-700))}ax-toast.ax-secondary{background-color:rgb(var(--ax-color-secondary-500));color:rgb(var(--ax-color-secondary-fore))}ax-toast.ax-secondary .ax-toast-progress{background-color:rgb(var(--ax-color-secondary-700))}ax-toast.ax-success{background-color:rgb(var(--ax-color-success-500));color:rgb(var(--ax-color-success-fore))}ax-toast.ax-success .ax-toast-progress{background-color:rgb(var(--ax-color-success-700))}ax-toast.ax-warning{background-color:rgb(var(--ax-color-warning-500));color:rgb(var(--ax-color-warning-fore))}ax-toast.ax-warning .ax-toast-progress{background-color:rgb(var(--ax-color-warning-700))}ax-toast.ax-danger{background-color:rgb(var(--ax-color-danger-500));color:rgb(var(--ax-color-danger-fore))}ax-toast.ax-danger .ax-toast-progress{background-color:rgb(var(--ax-color-danger-700))}@media (max-width: 599px){ax-toast{width:98vw}}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{font-size:1.25rem}ax-toast .ax-toast-icon{padding-inline-end:.75rem}ax-toast .ax-toast-content{display:flex;flex-direction:column;flex:1}ax-toast .ax-toast-content .ax-toast-title{font-weight:500}ax-toast .ax-toast-content .ax-toast-title.ax-mb-2{margin-bottom:.5rem}ax-toast .ax-toast-content .ax-toast-buttons{margin-top:.5rem}ax-toast .ax-toast-content .ax-toast-buttons button{font-weight:500}ax-toast .ax-toast-content .ax-toast-buttons button:hover{opacity:.6}ax-toast .ax-icon-close{cursor:pointer;height:-moz-fit-content;height:fit-content}ax-toast .ax-icon-close:hover{opacity:.6}ax-toast .ax-toast-progress{position:absolute;right:0;left:0;bottom:0;height:.375rem;width:100%;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar;background-color:rgba(var(--ax-color-border-default))}@keyframes progressBar{0%{width:100%}to{width:0%}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXToastComponent, selector: "ax-toast", host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXToastComponent }], usesInheritance: true, ngImport: i0, template: "<span [class]=\"'ax-toast-icon' + ' ' +  _icon \"></span>\r\n<div class=\"ax-toast-content\">\r\n    <div class=\"ax-toast-title\" [class.ax-mb-2]=\"options.title && options.content\">{{options.title}}</div>\r\n    <div class=\"ax-toast-content\" [innerHTML]=\"options.content\"></div>\r\n    <div class=\"ax-toast-buttons\" *ngIf=\"options?.buttons?.length\">\r\n        <button *ngFor=\"let button of options.buttons\" (click)=\"_handleButtonClick(button)\">\r\n            {{button.text}}\r\n        </button>\r\n    </div>\r\n</div>\r\n<span class=\"ax-icon ax-icon-close\" *ngIf=\"options.closeable\" (click)=\"close()\"></span>\r\n<div class=\"ax-toast-progress\" [style.animation-duration.ms]=\"options.timeOut\" *ngIf=\"options.timeOut\"></div>", styles: [".ax-dark ax-toast.ax-primary{background-color:rgba(var(--ax-color-primary-900));color:rgba(var(--ax-color-primary-100));border-color:rgba(var(--ax-color-primary-500))}.ax-dark ax-toast.ax-primary .ax-toast-title{color:rgba(var(--ax-color-primary-100))}.ax-dark ax-toast.ax-primary .ax-toast-progress{background-color:rgba(var(--ax-color-primary-500))}.ax-dark ax-toast.ax-secondary{background-color:rgba(var(--ax-color-secondary-900));color:rgba(var(--ax-color-secondary-100));border-color:rgba(var(--ax-color-secondary-500))}.ax-dark ax-toast.ax-secondary .ax-toast-title{color:rgba(var(--ax-color-secondary-100))}.ax-dark ax-toast.ax-secondary .ax-toast-progress{background-color:rgba(var(--ax-color-secondary-500))}.ax-dark ax-toast.ax-success{background-color:rgba(var(--ax-color-success-900));color:rgba(var(--ax-color-success-100));border-color:rgba(var(--ax-color-success-500))}.ax-dark ax-toast.ax-success .ax-toast-title{color:rgba(var(--ax-color-success-100))}.ax-dark ax-toast.ax-success .ax-toast-progress{background-color:rgba(var(--ax-color-success-500))}.ax-dark ax-toast.ax-warning{background-color:rgba(var(--ax-color-warning-900));color:rgba(var(--ax-color-warning-100));border-color:rgba(var(--ax-color-warning-500))}.ax-dark ax-toast.ax-warning .ax-toast-title{color:rgba(var(--ax-color-warning-100))}.ax-dark ax-toast.ax-warning .ax-toast-progress{background-color:rgba(var(--ax-color-warning-500))}.ax-dark ax-toast.ax-danger{background-color:rgba(var(--ax-color-danger-900));color:rgba(var(--ax-color-danger-100));border-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-toast.ax-danger .ax-toast-title{color:rgba(var(--ax-color-danger-100))}.ax-dark ax-toast.ax-danger .ax-toast-progress{background-color:rgba(var(--ax-color-danger-500))}ax-toast{width:max(20vw,380px);display:flex;padding:.75rem 1rem;border-radius:var(--ax-rounded-border-default);font-size:.875rem;background-color:rgba(var(--ax-color-surface));border-color:rgba(var(--ax-color-border-default));position:relative;overflow:hidden;box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f}ax-toast.ax-primary{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-toast.ax-primary .ax-toast-progress{background-color:rgba(var(--ax-color-primary-700))}ax-toast.ax-secondary{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-toast.ax-secondary .ax-toast-progress{background-color:rgba(var(--ax-color-secondary-700))}ax-toast.ax-success{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-toast.ax-success .ax-toast-progress{background-color:rgba(var(--ax-color-success-700))}ax-toast.ax-warning{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-toast.ax-warning .ax-toast-progress{background-color:rgba(var(--ax-color-warning-700))}ax-toast.ax-danger{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-toast.ax-danger .ax-toast-progress{background-color:rgba(var(--ax-color-danger-700))}@media (max-width: 599px){ax-toast{width:98vw}}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{font-size:1.25rem}ax-toast .ax-toast-icon{padding-inline-end:.75rem}ax-toast .ax-toast-content{display:flex;flex-direction:column;flex:1}ax-toast .ax-toast-content .ax-toast-title{font-weight:500}ax-toast .ax-toast-content .ax-toast-title.ax-mb-2{margin-bottom:.5rem}ax-toast .ax-toast-content .ax-toast-buttons{margin-top:.5rem}ax-toast .ax-toast-content .ax-toast-buttons button{font-weight:500}ax-toast .ax-toast-content .ax-toast-buttons button:hover{opacity:.6}ax-toast .ax-icon-close{cursor:pointer;height:-moz-fit-content;height:fit-content}ax-toast .ax-icon-close:hover{opacity:.6}ax-toast .ax-toast-progress{position:absolute;right:0;left:0;bottom:0;height:.375rem;width:100%;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar;background-color:rgba(var(--ax-color-border-default))}@keyframes progressBar{0%{width:100%}to{width:0%}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-toast', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXToastComponent }], template: "<span [class]=\"'ax-toast-icon' + ' ' +  _icon \"></span>\r\n<div class=\"ax-toast-content\">\r\n    <div class=\"ax-toast-title\" [class.ax-mb-2]=\"options.title && options.content\">{{options.title}}</div>\r\n    <div class=\"ax-toast-content\" [innerHTML]=\"options.content\"></div>\r\n    <div class=\"ax-toast-buttons\" *ngIf=\"options?.buttons?.length\">\r\n        <button *ngFor=\"let button of options.buttons\" (click)=\"_handleButtonClick(button)\">\r\n            {{button.text}}\r\n        </button>\r\n    </div>\r\n</div>\r\n<span class=\"ax-icon ax-icon-close\" *ngIf=\"options.closeable\" (click)=\"close()\"></span>\r\n<div class=\"ax-toast-progress\" [style.animation-duration.ms]=\"options.timeOut\" *ngIf=\"options.timeOut\"></div>", styles: ["html.ax-dark ax-toast.ax-primary{background-color:rgb(var(--ax-color-primary-900));color:rgb(var(--ax-color-primary-100));border-color:rgb(var(--ax-color-primary-500))}html.ax-dark ax-toast.ax-primary .ax-toast-title{color:rgb(var(--ax-color-primary-100))}html.ax-dark ax-toast.ax-primary .ax-toast-progress{background-color:rgb(var(--ax-color-primary-500))}html.ax-dark ax-toast.ax-secondary{background-color:rgb(var(--ax-color-secondary-900));color:rgb(var(--ax-color-secondary-100));border-color:rgb(var(--ax-color-secondary-500))}html.ax-dark ax-toast.ax-secondary .ax-toast-title{color:rgb(var(--ax-color-secondary-100))}html.ax-dark ax-toast.ax-secondary .ax-toast-progress{background-color:rgb(var(--ax-color-secondary-500))}html.ax-dark ax-toast.ax-success{background-color:rgb(var(--ax-color-success-900));color:rgb(var(--ax-color-success-100));border-color:rgb(var(--ax-color-success-500))}html.ax-dark ax-toast.ax-success .ax-toast-title{color:rgb(var(--ax-color-success-100))}html.ax-dark ax-toast.ax-success .ax-toast-progress{background-color:rgb(var(--ax-color-success-500))}html.ax-dark ax-toast.ax-warning{background-color:rgb(var(--ax-color-warning-900));color:rgb(var(--ax-color-warning-100));border-color:rgb(var(--ax-color-warning-500))}html.ax-dark ax-toast.ax-warning .ax-toast-title{color:rgb(var(--ax-color-warning-100))}html.ax-dark ax-toast.ax-warning .ax-toast-progress{background-color:rgb(var(--ax-color-warning-500))}html.ax-dark ax-toast.ax-danger{background-color:rgb(var(--ax-color-danger-900));color:rgb(var(--ax-color-danger-100));border-color:rgb(var(--ax-color-danger-500))}html.ax-dark ax-toast.ax-danger .ax-toast-title{color:rgb(var(--ax-color-danger-100))}html.ax-dark ax-toast.ax-danger .ax-toast-progress{background-color:rgb(var(--ax-color-danger-500))}ax-toast{width:max(20vw,380px);display:flex;padding:.75rem 1rem;border-radius:var(--ax-rounded-border-default);font-size:.875rem;background-color:rgb(var(--ax-color-surface));border-color:rgba(var(--ax-color-border-default));position:relative;overflow:hidden;box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f}ax-toast.ax-primary{background-color:rgb(var(--ax-color-primary-500));color:rgb(var(--ax-color-primary-fore))}ax-toast.ax-primary .ax-toast-progress{background-color:rgb(var(--ax-color-primary-700))}ax-toast.ax-secondary{background-color:rgb(var(--ax-color-secondary-500));color:rgb(var(--ax-color-secondary-fore))}ax-toast.ax-secondary .ax-toast-progress{background-color:rgb(var(--ax-color-secondary-700))}ax-toast.ax-success{background-color:rgb(var(--ax-color-success-500));color:rgb(var(--ax-color-success-fore))}ax-toast.ax-success .ax-toast-progress{background-color:rgb(var(--ax-color-success-700))}ax-toast.ax-warning{background-color:rgb(var(--ax-color-warning-500));color:rgb(var(--ax-color-warning-fore))}ax-toast.ax-warning .ax-toast-progress{background-color:rgb(var(--ax-color-warning-700))}ax-toast.ax-danger{background-color:rgb(var(--ax-color-danger-500));color:rgb(var(--ax-color-danger-fore))}ax-toast.ax-danger .ax-toast-progress{background-color:rgb(var(--ax-color-danger-700))}@media (max-width: 599px){ax-toast{width:98vw}}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{font-size:1.25rem}ax-toast .ax-toast-icon{padding-inline-end:.75rem}ax-toast .ax-toast-content{display:flex;flex-direction:column;flex:1}ax-toast .ax-toast-content .ax-toast-title{font-weight:500}ax-toast .ax-toast-content .ax-toast-title.ax-mb-2{margin-bottom:.5rem}ax-toast .ax-toast-content .ax-toast-buttons{margin-top:.5rem}ax-toast .ax-toast-content .ax-toast-buttons button{font-weight:500}ax-toast .ax-toast-content .ax-toast-buttons button:hover{opacity:.6}ax-toast .ax-icon-close{cursor:pointer;height:-moz-fit-content;height:fit-content}ax-toast .ax-icon-close:hover{opacity:.6}ax-toast .ax-toast-progress{position:absolute;right:0;left:0;bottom:0;height:.375rem;width:100%;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar;background-color:rgba(var(--ax-color-border-default))}@keyframes progressBar{0%{width:100%}to{width:0%}}\n"] }]
+            args: [{ selector: 'ax-toast', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXToastComponent }], template: "<span [class]=\"'ax-toast-icon' + ' ' +  _icon \"></span>\r\n<div class=\"ax-toast-content\">\r\n    <div class=\"ax-toast-title\" [class.ax-mb-2]=\"options.title && options.content\">{{options.title}}</div>\r\n    <div class=\"ax-toast-content\" [innerHTML]=\"options.content\"></div>\r\n    <div class=\"ax-toast-buttons\" *ngIf=\"options?.buttons?.length\">\r\n        <button *ngFor=\"let button of options.buttons\" (click)=\"_handleButtonClick(button)\">\r\n            {{button.text}}\r\n        </button>\r\n    </div>\r\n</div>\r\n<span class=\"ax-icon ax-icon-close\" *ngIf=\"options.closeable\" (click)=\"close()\"></span>\r\n<div class=\"ax-toast-progress\" [style.animation-duration.ms]=\"options.timeOut\" *ngIf=\"options.timeOut\"></div>", styles: [".ax-dark ax-toast.ax-primary{background-color:rgba(var(--ax-color-primary-900));color:rgba(var(--ax-color-primary-100));border-color:rgba(var(--ax-color-primary-500))}.ax-dark ax-toast.ax-primary .ax-toast-title{color:rgba(var(--ax-color-primary-100))}.ax-dark ax-toast.ax-primary .ax-toast-progress{background-color:rgba(var(--ax-color-primary-500))}.ax-dark ax-toast.ax-secondary{background-color:rgba(var(--ax-color-secondary-900));color:rgba(var(--ax-color-secondary-100));border-color:rgba(var(--ax-color-secondary-500))}.ax-dark ax-toast.ax-secondary .ax-toast-title{color:rgba(var(--ax-color-secondary-100))}.ax-dark ax-toast.ax-secondary .ax-toast-progress{background-color:rgba(var(--ax-color-secondary-500))}.ax-dark ax-toast.ax-success{background-color:rgba(var(--ax-color-success-900));color:rgba(var(--ax-color-success-100));border-color:rgba(var(--ax-color-success-500))}.ax-dark ax-toast.ax-success .ax-toast-title{color:rgba(var(--ax-color-success-100))}.ax-dark ax-toast.ax-success .ax-toast-progress{background-color:rgba(var(--ax-color-success-500))}.ax-dark ax-toast.ax-warning{background-color:rgba(var(--ax-color-warning-900));color:rgba(var(--ax-color-warning-100));border-color:rgba(var(--ax-color-warning-500))}.ax-dark ax-toast.ax-warning .ax-toast-title{color:rgba(var(--ax-color-warning-100))}.ax-dark ax-toast.ax-warning .ax-toast-progress{background-color:rgba(var(--ax-color-warning-500))}.ax-dark ax-toast.ax-danger{background-color:rgba(var(--ax-color-danger-900));color:rgba(var(--ax-color-danger-100));border-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-toast.ax-danger .ax-toast-title{color:rgba(var(--ax-color-danger-100))}.ax-dark ax-toast.ax-danger .ax-toast-progress{background-color:rgba(var(--ax-color-danger-500))}ax-toast{width:max(20vw,380px);display:flex;padding:.75rem 1rem;border-radius:var(--ax-rounded-border-default);font-size:.875rem;background-color:rgba(var(--ax-color-surface));border-color:rgba(var(--ax-color-border-default));position:relative;overflow:hidden;box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f}ax-toast.ax-primary{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-toast.ax-primary .ax-toast-progress{background-color:rgba(var(--ax-color-primary-700))}ax-toast.ax-secondary{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-toast.ax-secondary .ax-toast-progress{background-color:rgba(var(--ax-color-secondary-700))}ax-toast.ax-success{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-toast.ax-success .ax-toast-progress{background-color:rgba(var(--ax-color-success-700))}ax-toast.ax-warning{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-toast.ax-warning .ax-toast-progress{background-color:rgba(var(--ax-color-warning-700))}ax-toast.ax-danger{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-toast.ax-danger .ax-toast-progress{background-color:rgba(var(--ax-color-danger-700))}@media (max-width: 599px){ax-toast{width:98vw}}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{font-size:1.25rem}ax-toast .ax-toast-icon{padding-inline-end:.75rem}ax-toast .ax-toast-content{display:flex;flex-direction:column;flex:1}ax-toast .ax-toast-content .ax-toast-title{font-weight:500}ax-toast .ax-toast-content .ax-toast-title.ax-mb-2{margin-bottom:.5rem}ax-toast .ax-toast-content .ax-toast-buttons{margin-top:.5rem}ax-toast .ax-toast-content .ax-toast-buttons button{font-weight:500}ax-toast .ax-toast-content .ax-toast-buttons button:hover{opacity:.6}ax-toast .ax-icon-close{cursor:pointer;height:-moz-fit-content;height:fit-content}ax-toast .ax-icon-close:hover{opacity:.6}ax-toast .ax-toast-progress{position:absolute;right:0;left:0;bottom:0;height:.375rem;width:100%;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar;background-color:rgba(var(--ax-color-border-default))}@keyframes progressBar{0%{width:100%}to{width:0%}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']

package/esm2020/tooltip/src/tooltip.component.mjs CHANGED Viewed

@@ -8,10 +8,10 @@ export class AXTooltipComponent extends AXBaseComponentMixin {
     }
 }
 AXTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXTooltipComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXTooltipComponent, selector: "ax-tooltip", inputs: { text: "text", position: "position" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tooltip-container\">\r\n  <div class=\"ax-tooltip\">\r\n    {{ text }}\r\n  </div>\r\n  <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div>\r\n</div>\r\n", styles: ["html.ax-dark .ax-tooltip-container{--ax-tooltip-background: 255, 255, 255;--ax-tooltip-color: 97, 97, 97}.ax-tooltip-container{position:relative;--ax-tooltip-background: 97, 97, 97;--ax-tooltip-color: 255, 255, 255}.ax-tooltip-container .ax-tooltip{display:block;padding:.25rem .5rem;background-color:rgb(var(--ax-tooltip-background));color:rgb(var(--ax-tooltip-color));border-radius:.25rem;font-size:.75rem;font-weight:400}\n"], encapsulation: i0.ViewEncapsulation.None });
+AXTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXTooltipComponent, selector: "ax-tooltip", inputs: { text: "text", position: "position" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tooltip-container\">\r\n  <div class=\"ax-tooltip\">\r\n    {{ text }}\r\n  </div>\r\n  <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div>\r\n</div>\r\n", styles: [".ax-dark .ax-tooltip-container{--ax-tooltip-background: 255, 255, 255;--ax-tooltip-color: 97, 97, 97}.ax-tooltip-container{position:relative;--ax-tooltip-background: 97, 97, 97;--ax-tooltip-color: 255, 255, 255}.ax-tooltip-container .ax-tooltip{display:block;padding:.25rem .5rem;background-color:rgba(var(--ax-tooltip-background));color:rgba(var(--ax-tooltip-color));border-radius:.25rem;font-size:.75rem;font-weight:400}\n"], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tooltip', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-tooltip-container\">\r\n  <div class=\"ax-tooltip\">\r\n    {{ text }}\r\n  </div>\r\n  <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div>\r\n</div>\r\n", styles: ["html.ax-dark .ax-tooltip-container{--ax-tooltip-background: 255, 255, 255;--ax-tooltip-color: 97, 97, 97}.ax-tooltip-container{position:relative;--ax-tooltip-background: 97, 97, 97;--ax-tooltip-color: 255, 255, 255}.ax-tooltip-container .ax-tooltip{display:block;padding:.25rem .5rem;background-color:rgb(var(--ax-tooltip-background));color:rgb(var(--ax-tooltip-color));border-radius:.25rem;font-size:.75rem;font-weight:400}\n"] }]
+            args: [{ selector: 'ax-tooltip', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-tooltip-container\">\r\n  <div class=\"ax-tooltip\">\r\n    {{ text }}\r\n  </div>\r\n  <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{ position }}\"></div>\r\n</div>\r\n", styles: [".ax-dark .ax-tooltip-container{--ax-tooltip-background: 255, 255, 255;--ax-tooltip-color: 97, 97, 97}.ax-tooltip-container{position:relative;--ax-tooltip-background: 97, 97, 97;--ax-tooltip-color: 255, 255, 255}.ax-tooltip-container .ax-tooltip{display:block;padding:.25rem .5rem;background-color:rgba(var(--ax-tooltip-background));color:rgba(var(--ax-tooltip-color));border-radius:.25rem;font-size:.75rem;font-weight:400}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
                 type: Input
             }], position: [{

package/esm2020/tree-view/src/tree-view.component.mjs CHANGED Viewed

@@ -98,10 +98,10 @@ export class AXTreeViewComponent {
     ngOnInit() { }
 }
 AXTreeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXTreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXTreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: { showLines: "showLines" }, host: { classAttribute: "ax-tree-view" }, ngImport: i0, template: "<ul class=\"ax-list-{{showLines}}\">\r\n    <ng-template #recursiveList let-list>\r\n      <li *ngFor=\"let item of list\">\r\n        <span>\r\n          <ax-check-box></ax-check-box>\r\n          \r\n          <span>{{item.title}}</span>\r\n        </span>\r\n        <ul *ngIf=\"item.children.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.children }\"></ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n  </ul>", styles: [".ax-tree-view>ul li{font-size:.875rem;position:relative}.ax-tree-view>ul li span{@apply ax-flex ax-items-center ax-my-1;display:flex;align-items:center;margin:.25rem 0}.ax-tree-view>ul li ul{padding-inline-start:2rem}.ax-tree-view>ul.ax-list-all li ul{position:relative}.ax-tree-view>ul.ax-list-all li ul:before{content:\"\";width:1px;position:absolute;bottom:0;height:100%;inset-inline-start:.5rem;background-color:rgb(var(--ax-color-border-default))}.ax-tree-view>ul.ax-list-all li ul li:before{position:absolute;top:0;right:12px;bottom:-4px;margin-left:-1px;content:\" \"}.ax-tree-view>ul.ax-list-all li ul li:after{position:absolute;width:10px;height:14px;content:\" \"}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], encapsulation: i0.ViewEncapsulation.None });
+AXTreeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: { showLines: "showLines" }, host: { classAttribute: "ax-tree-view" }, ngImport: i0, template: "<ul class=\"ax-list-{{showLines}}\">\r\n    <ng-template #recursiveList let-list>\r\n      <li *ngFor=\"let item of list\">\r\n        <span>\r\n          <ax-check-box></ax-check-box>\r\n          \r\n          <span>{{item.title}}</span>\r\n        </span>\r\n        <ul *ngIf=\"item.children.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.children }\"></ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n  </ul>", styles: [".ax-tree-view>ul li{font-size:.875rem;position:relative}.ax-tree-view>ul li span{@apply ax-flex ax-items-center ax-my-1;display:flex;align-items:center;margin:.25rem 0}.ax-tree-view>ul li ul{padding-inline-start:2rem}.ax-tree-view>ul.ax-list-all li ul{position:relative}.ax-tree-view>ul.ax-list-all li ul:before{content:\"\";width:1px;position:absolute;bottom:0;height:100%;inset-inline-start:.5rem;background-color:rgba(var(--ax-color-border-default))}.ax-tree-view>ul.ax-list-all li ul li:before{position:absolute;top:0;right:12px;bottom:-4px;margin-left:-1px;content:\" \"}.ax-tree-view>ul.ax-list-all li ul li:after{position:absolute;width:10px;height:14px;content:\" \"}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXTreeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tree-view', encapsulation: ViewEncapsulation.None, host: { class: 'ax-tree-view' }, template: "<ul class=\"ax-list-{{showLines}}\">\r\n    <ng-template #recursiveList let-list>\r\n      <li *ngFor=\"let item of list\">\r\n        <span>\r\n          <ax-check-box></ax-check-box>\r\n          \r\n          <span>{{item.title}}</span>\r\n        </span>\r\n        <ul *ngIf=\"item.children.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.children }\"></ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n  </ul>", styles: [".ax-tree-view>ul li{font-size:.875rem;position:relative}.ax-tree-view>ul li span{@apply ax-flex ax-items-center ax-my-1;display:flex;align-items:center;margin:.25rem 0}.ax-tree-view>ul li ul{padding-inline-start:2rem}.ax-tree-view>ul.ax-list-all li ul{position:relative}.ax-tree-view>ul.ax-list-all li ul:before{content:\"\";width:1px;position:absolute;bottom:0;height:100%;inset-inline-start:.5rem;background-color:rgb(var(--ax-color-border-default))}.ax-tree-view>ul.ax-list-all li ul li:before{position:absolute;top:0;right:12px;bottom:-4px;margin-left:-1px;content:\" \"}.ax-tree-view>ul.ax-list-all li ul li:after{position:absolute;width:10px;height:14px;content:\" \"}\n"] }]
+            args: [{ selector: 'ax-tree-view', encapsulation: ViewEncapsulation.None, host: { class: 'ax-tree-view' }, template: "<ul class=\"ax-list-{{showLines}}\">\r\n    <ng-template #recursiveList let-list>\r\n      <li *ngFor=\"let item of list\">\r\n        <span>\r\n          <ax-check-box></ax-check-box>\r\n          \r\n          <span>{{item.title}}</span>\r\n        </span>\r\n        <ul *ngIf=\"item.children.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.children }\"></ng-container>\r\n        </ul>\r\n      </li>\r\n    </ng-template>\r\n    <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n  </ul>", styles: [".ax-tree-view>ul li{font-size:.875rem;position:relative}.ax-tree-view>ul li span{@apply ax-flex ax-items-center ax-my-1;display:flex;align-items:center;margin:.25rem 0}.ax-tree-view>ul li ul{padding-inline-start:2rem}.ax-tree-view>ul.ax-list-all li ul{position:relative}.ax-tree-view>ul.ax-list-all li ul:before{content:\"\";width:1px;position:absolute;bottom:0;height:100%;inset-inline-start:.5rem;background-color:rgba(var(--ax-color-border-default))}.ax-tree-view>ul.ax-list-all li ul li:before{position:absolute;top:0;right:12px;bottom:-4px;margin-left:-1px;content:\" \"}.ax-tree-view>ul.ax-list-all li ul li:after{position:absolute;width:10px;height:14px;content:\" \"}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { showLines: [{
                 type: Input
             }] } });