npm - @acorex/components - Versions diffs - 7.1.11 → 7.1.13 - Mend

@acorex/components 7.1.11 → 7.1.13

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 (243) hide show

package/fesm2022/acorex-components-search-box.mjs CHANGED Viewed

@@ -35,10 +35,10 @@ class AXSearchBoxComponent extends AXBaseComponentMixin {
     clear() {
         this._textbox.value = '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXSearchableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", debounceTime: "debounceTime", searchExp: "searchExp" }, viewQueries: [{ propertyName: "_textbox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box placeholder=\"{{ placeholder | trans }}\" [(value)]=\"searchExp\"\n    (onValueChanged)=\"_onSearchExprChanged($event)\">\n    <ax-prefix>\n        <span class=\"ax-icon ax-icon-search ax-editor-control\"></span>\n    </ax-prefix>\n    <ax-suffix>\n        <button *ngIf=\"searchExp\" class=\"ax-general-button ax-button-icon\" (click)=\"clear()\">\n            <span class=\"ax-icon ax-icon-close\"></span>\n        </button>\n    </ax-suffix>\n</ax-text-box>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXDecoratorPrefixComponent, selector: "ax-prefix" }, { kind: "component", type: i2.AXDecoratorSuffixComponent, selector: "ax-suffix" }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "mask-options"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged"] }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXSearchableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", debounceTime: "debounceTime", searchExp: "searchExp" }, viewQueries: [{ propertyName: "_textbox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box placeholder=\"{{ placeholder | trans }}\" [(value)]=\"searchExp\"\n    (onValueChanged)=\"_onSearchExprChanged($event)\">\n    <ax-prefix>\n        <span class=\"ax-icon ax-icon-search ax-editor-control\"></span>\n    </ax-prefix>\n    <ax-suffix>\n        <button *ngIf=\"searchExp\" class=\"ax-general-button ax-button-icon\" (click)=\"clear()\">\n            <span class=\"ax-icon ax-icon-close\"></span>\n        </button>\n    </ax-suffix>\n</ax-text-box>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXDecoratorPrefixComponent, selector: "ax-prefix" }, { kind: "component", type: i2.AXDecoratorSuffixComponent, selector: "ax-suffix" }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "mask-options"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged"] }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-search-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ax-text-box placeholder=\"{{ placeholder | trans }}\" [(value)]=\"searchExp\"\n    (onValueChanged)=\"_onSearchExprChanged($event)\">\n    <ax-prefix>\n        <span class=\"ax-icon ax-icon-search ax-editor-control\"></span>\n    </ax-prefix>\n    <ax-suffix>\n        <button *ngIf=\"searchExp\" class=\"ax-general-button ax-button-icon\" (click)=\"clear()\">\n            <span class=\"ax-icon ax-icon-close\"></span>\n        </button>\n    </ax-suffix>\n</ax-text-box>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i5.AXSearchableComponent, decorators: [{
@@ -60,11 +60,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
 const COMPONENT = [AXSearchBoxComponent];
 const MODULES = [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule, AXButtonModule];
 class AXSearchBoxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: AXSearchBoxModule, declarations: [AXSearchBoxComponent], imports: [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule, AXButtonModule], exports: [AXSearchBoxComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSearchBoxModule, imports: [MODULES] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: AXSearchBoxModule, declarations: [AXSearchBoxComponent], imports: [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule, AXButtonModule], exports: [AXSearchBoxComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSearchBoxModule, imports: [MODULES] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSearchBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSearchBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

package/fesm2022/acorex-components-select-box.mjs CHANGED Viewed

@@ -335,13 +335,13 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     _fetchData() {
         super._fetchData({ searchQuery: this._searchBox?.searchExp });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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>\n<div\n  class=\"ax-dropdown-content\"\n  [class.ax-state-disabled]=\"disabled\"\n  (click)=\"_handleInputClickEvent($event)\">\n  <div\n    class=\"ax-select-box-selection\"\n    [tabindex]=\"tabIndex\"\n    (focus)=\"_emitOnFocusEvent($event)\"\n    (blur)=\"_emitOnBlurEvent($event)\">\n    <ng-container\n      *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\n      <ng-container\n        *ngIf=\"\n          !multiple;\n          then singleSelectedTemplate;\n          else multipleSelectedTemplate\n        \"></ng-container>\n      <ng-template #singleSelectedTemplate>\n        <ng-container *ngFor=\"let item of selectedItems\">\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n        </ng-container>\n      </ng-template>\n      <ng-template #multipleSelectedTemplate>\n        <ng-container *ngFor=\"let item of selectedItems\">\n          <div class=\"ax-select-multi-item\">\n            {{ _getItemDisplayTextTemplte(item) }}\n            <span\n              class=\"ax-icon ax-icon-close\"\n              (click)=\"_handleBadgeRemove($event, item)\">\n            </span>\n          </div>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #showPlaceholder>\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n    </ng-template>\n  </div>\n</div>\n<ax-button\n  color=\"light\"\n  look=\"blank\"\n  (onClick)=\"clear()\"\n  [tabIndex]=\"-1\"\n  *ngIf=\"value && clearButton && !(disabled || readonly)\">\n  <ax-icon icon=\"ax-icon ax-icon-close\"></ax-icon>\n</ax-button>\n<button\n  [disabled]=\"disabled\"\n  [tabIndex]=\"-1\"\n  class=\"ax-editor-control\"\n  (click)=\"_handleArrowClickEvent($event)\">\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\n    <ax-loading type=\"spinner\"></ax-loading>\n  </ng-container>\n  <ng-template #iconTemplate>\n    <span\n      class=\"ax-icon ax-icon-chevron-left ax-transition-all\"\n      [ngClass]=\"{\n        '-ax-rotation-90': !isOpen,\n        'ax-rotation-90': isOpen\n      }\"></span>\n  </ng-template>\n</button>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<ng-content select=\"ax-suffix\"> </ng-content>\n<ax-popover\n  [target]=\"_target\"\n  [position]=\"position\"\n  [openTrigger]=\"'manual'\"\n  [closeTrigger]=\"'clickout'\"\n  [adaptivityEnabled]=\"true\"\n  (onOpened)=\"_handlePopupOnOpened($event)\"\n  (onClosed)=\"_handlePopupOnClosed($event)\">\n  <div\n    class=\"ax-overlay-pane\"\n    (keydown)=\"_handlePopoverKeydown($event)\"\n    tabindex=\"0\"\n    aria-modal=\"true\"\n    cdkTrapFocus\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\"\n    [class.ax-full]=\"_searchBox || isLazy\"\n    [style.min-width.px]=\"_popoverWidth\">\n    <div class=\"ax-list\">\n      <ax-header *ngIf=\"_isActionSheet\">\n        <ax-title>{{ _popoverTitle }}</ax-title>\n        <ax-close-button\n          class=\"ax-icon\"\n          [icon]=\"\n            multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\n          \"></ax-close-button>\n      </ax-header>\n      <div\n        class=\"ax-search-box-container\"\n        [class.ax-state-hidden]=\"!_searchBox\"\n        [cdkTrapFocus]=\"_searchBox != null\">\n        <ng-content select=\"ax-search-box\"></ng-content>\n      </div>\n      <div\n        class=\"ax-content ax-list-items-container ax-default\"\n        (scroll)=\"_handleListScroll($event)\"\n        #listContainer>\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\n          <ul>\n            <ng-container\n              *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\">\n            </ng-container>\n            <ng-template #tmpTree let-list=\"list\">\n              <ng-container\n                *ngFor=\"\n                  let item of list;\n                  let i = index;\n                  trackBy: _trackByFunction\n                \">\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\n                  <li\n                    class=\"ax-list-item\"\n                    (click)=\"_handleOnItemClick($event, item)\"\n                    [attr.data-id]=\"item[this.valueField]\">\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: { $implicit: item, direction: direction }\n                      \">\n                    </ng-container>\n                  </li>\n                </ng-container>\n                <ng-template #defualtTemplate>\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\n                    <li\n                      class=\"ax-list-item-group\"\n                      [attr.data-id]=\"item[this.valueField]\">\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                      <ul *ngIf=\"item.children?.length > 0\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            tmpTree;\n                            context: { list: item.children }\n                          \">\n                        </ng-container>\n                      </ul>\n                    </li>\n                  </ng-container>\n                  <ng-template #tmpItem>\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\n                      <li\n                        class=\"ax-list-item\"\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                        [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\"\n                        [attr.data-id]=\"item[this.valueField]\">\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                        <span\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\n                          *ngIf=\"isItemSelected(item)\"></span>\n                      </li>\n                    </ng-container>\n                    <ng-template #multipleTemplate>\n                      <li\n                        class=\"ax-list-item\"\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                        [class.ax-state-checkbox]=\"checkbox\"\n                        [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\"\n                        [attr.data-id]=\"item[this.valueField]\">\n                        <span>\n                          <input\n                            class=\"ax-checkbox\"\n                            type=\"checkbox\"\n                            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                            *ngIf=\"checkbox\"\n                            [checked]=\"isItemSelected(item)\"\n                            [disabled]=\"isItemDisabled(item)\" />\n                          <span class=\"ax-checkbox-label\">{{\n                            _getItemDisplayTextTemplte(item)\n                          }}</span>\n                        </span>\n                        <span\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\n                          *ngIf=\"isItemSelected(item) && !checkbox\"></span>\n                      </li>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </ng-container>\n            </ng-template>\n          </ul>\n        </ng-container>\n        <ng-container *ngIf=\"isLoading\">\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\n          </ng-container>\n          <ng-template #elseLoadingTemplate>\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n              <ax-loading\n                text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\n            </div>\n          </ng-template>\n        </ng-container>\n        <ng-template #tmpEmpty>\n          <ng-container *ngIf=\"!isLoading\">\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n            </ng-container>\n            <ng-template #elseEmptyTemplate>\n              <div\n                class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\n                [innerHTML]=\"\n                  'common.no-result-for'\n                    | trans\n                      : {\n                          exp: this._searchBox ? this._searchBox.searchExp : ''\n                        }\n                \"></div>\n            </ng-template>\n          </ng-container>\n        </ng-template>\n      </div>\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\n                >\n               \n            </div> -->\n      <!-- <div class=\"ax-footer\">footer</div> -->\n    </div>\n  </div>\n</ax-popover>\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;outline:transparent;-webkit-user-select:none;user-select:none}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: "16.0.1", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-select-box', inputs: [
                         'isOpen',
@@ -400,8 +400,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
             }] } });
 class AXSelectBoxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule,
             AXCommonModule,
             FormsModule,
             AXCheckBoxModule,
@@ -413,7 +413,7 @@ class AXSelectBoxModule {
             AXLoadingModule,
             A11yModule,
             AXTextBoxModule], exports: [AXSelectBoxComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSelectBoxModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSelectBoxModule, imports: [CommonModule,
             AXCommonModule,
             FormsModule,
             AXCheckBoxModule,
@@ -426,7 +426,7 @@ class AXSelectBoxModule {
             A11yModule,
             AXTextBoxModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSelectBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSelectBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule,

package/fesm2022/acorex-components-selection-list.mjs CHANGED Viewed

@@ -43,10 +43,10 @@ class AXSelectionListComponent extends AXBaseSelectionValueMixin {
         e.stopImmediatePropagation();
         e.stopPropagation();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSelectionListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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 }}\">\n  <ng-container\n    *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\n  <ng-template #checkboxList>\n    <ng-container *ngFor=\"let item of displayItems; let i = index\">\n      <div\n        class=\"ax-item-container\"\n        [class.ax-state-selected]=\"isItemSelected(item)\">\n        <div class=\"ax-item-input\">\n          <input\n            #ic\n            [id]=\"id + '-' + i\"\n            class=\"ax-checkbox\"\n            type=\"checkbox\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item.disabled\"\n            [readonly]=\"readonly || item.readonly\" />\n        </div>\n        <div class=\"ax-item-text\">\n          <label [for]=\"id + '-' + i\"> {{ item[textField] }}</label>\n          <p class=\"ax-hint-text\">\n            {{ item.hint ? item.hint : item[hintField] }}\n          </p>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n  <ng-template #radioButtonList>\n    <ng-container *ngFor=\"let item of displayItems; let i = index\">\n      <div\n        class=\"ax-item-container\"\n        [class.ax-state-selected]=\"isItemSelected(item)\">\n        <div class=\"ax-item-input\">\n          <input\n            #ir\n            [id]=\"id + '-' + i\"\n            class=\"ax-radio\"\n            type=\"radio\"\n            [attr.name]=\"id\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item.disabled\"\n            [readonly]=\"readonly || item.readonly\" />\n        </div>\n        <div class=\"ax-item-text\">\n          <label [for]=\"id + '-' + i\"> {{ item[textField] }}</label>\n          <p class=\"ax-hint-text\">\n            {{ item.hint ? item.hint : item[hintField] }}\n          </p>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\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;gap:.75rem}.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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSelectionListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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 }}\">\n  <ng-container\n    *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\n  <ng-template #checkboxList>\n    <ng-container *ngFor=\"let item of displayItems; let i = index\">\n      <div\n        class=\"ax-item-container\"\n        [class.ax-state-selected]=\"isItemSelected(item)\">\n        <div class=\"ax-item-input\">\n          <input\n            #ic\n            [id]=\"id + '-' + i\"\n            class=\"ax-checkbox\"\n            type=\"checkbox\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item.disabled\"\n            [readonly]=\"readonly || item.readonly\" />\n        </div>\n        <div class=\"ax-item-text\">\n          <label [for]=\"id + '-' + i\"> {{ item[textField] }}</label>\n          <p class=\"ax-hint-text\">\n            {{ item.hint ? item.hint : item[hintField] }}\n          </p>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n  <ng-template #radioButtonList>\n    <ng-container *ngFor=\"let item of displayItems; let i = index\">\n      <div\n        class=\"ax-item-container\"\n        [class.ax-state-selected]=\"isItemSelected(item)\">\n        <div class=\"ax-item-input\">\n          <input\n            #ir\n            [id]=\"id + '-' + i\"\n            class=\"ax-radio\"\n            type=\"radio\"\n            [attr.name]=\"id\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item.disabled\"\n            [readonly]=\"readonly || item.readonly\" />\n        </div>\n        <div class=\"ax-item-text\">\n          <label [for]=\"id + '-' + i\"> {{ item[textField] }}</label>\n          <p class=\"ax-hint-text\">\n            {{ item.hint ? item.hint : item[hintField] }}\n          </p>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n  <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\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;gap:.75rem}.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: "16.0.1", ngImport: i0, type: AXSelectionListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSelectionListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-selection-list', inputs: [
                         'disabled',
@@ -65,11 +65,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
             }] } });
 class AXSelectionListModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSelectionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: AXSelectionListModule, declarations: [AXSelectionListComponent], imports: [CommonModule, FormsModule, AXCheckBoxModule, AXRadioModule, AXLabelModule, AXFormModule], exports: [AXSelectionListComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSelectionListModule, imports: [CommonModule, FormsModule, AXCheckBoxModule, AXRadioModule, AXLabelModule, AXFormModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSelectionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: AXSelectionListModule, declarations: [AXSelectionListComponent], imports: [CommonModule, FormsModule, AXCheckBoxModule, AXRadioModule, AXLabelModule, AXFormModule], exports: [AXSelectionListComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSelectionListModule, imports: [CommonModule, FormsModule, AXCheckBoxModule, AXRadioModule, AXLabelModule, AXFormModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSelectionListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSelectionListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSelectionListComponent],

package/fesm2022/acorex-components-switch.mjs CHANGED Viewed

@@ -10,10 +10,10 @@ import { FormsModule } from '@angular/forms';
 class AXSwitchContentComponent {
     constructor() { }
     ngOnInit() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSwitchContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: AXSwitchContentComponent, selector: "ax-switch-handler-content,ax-switch-off-content,ax-switch-on-content", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSwitchContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: AXSwitchContentComponent, selector: "ax-switch-handler-content,ax-switch-off-content,ax-switch-on-content", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSwitchContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSwitchContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-switch-handler-content,ax-switch-off-content,ax-switch-on-content',
@@ -40,10 +40,10 @@ class AXSwitchComponent extends AXBaseValueComponentMixin {
     get __hostClass() {
         return `ax-${this.color ? this.color : 'primary'}-default`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSwitchComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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\"\n    [class.ax-switch-checked]=\"value\" (click)=\"_handleOnClickEvent($event)\">\n    <div class=\"ax-switch-handle\">\n        <ax-loading *ngIf=\"loading\"></ax-loading>\n            <ng-content select=\"ax-switch-handler-content\"></ng-content>\n    </div>\n    <span class=\"ax-switch-inner\" *ngIf=\"!value\">\n        <ng-content select=\"ax-switch-off-content\"></ng-content>\n\n    </span>\n    <span class=\"ax-switch-inner\" *ngIf=\"value\">\n        <ng-content select=\"ax-switch-on-content\"></ng-content>\n    </span>\n\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:#0003!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-info-default button:focus-visible{outline-color:rgba(var(--ax-color-info-500))}ax-switch.ax-info-default button ax-switch-handler-content,ax-switch.ax-info-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-info-default button.ax-switch-checked{background-color:rgba(var(--ax-color-info-500))!important}ax-switch.ax-info-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-info-default button.ax-switch-checked ax-switch-handler-content *{color:rgba(var(--ax-color-info-500))}ax-switch.ax-info-default button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-info-fore))}ax-switch.ax-info-default button .ax-switch-handle ax-loading svg{fill:rgba(var(--ax-color-info-500));stroke:rgba(var(--ax-color-info-500))}ax-switch .ax-state-disabled{opacity:.5;cursor:not-allowed}ax-switch .ax-state-readonly{opacity:.75}.ax-dark ax-switch button{background-color:rgba(var(--ax-color-input-surface))!important}\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSwitchComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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\"\n    [class.ax-switch-checked]=\"value\" (click)=\"_handleOnClickEvent($event)\">\n    <div class=\"ax-switch-handle\">\n        <ax-loading *ngIf=\"loading\"></ax-loading>\n            <ng-content select=\"ax-switch-handler-content\"></ng-content>\n    </div>\n    <span class=\"ax-switch-inner\" *ngIf=\"!value\">\n        <ng-content select=\"ax-switch-off-content\"></ng-content>\n\n    </span>\n    <span class=\"ax-switch-inner\" *ngIf=\"value\">\n        <ng-content select=\"ax-switch-on-content\"></ng-content>\n    </span>\n\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:#0003!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-info-default button:focus-visible{outline-color:rgba(var(--ax-color-info-500))}ax-switch.ax-info-default button ax-switch-handler-content,ax-switch.ax-info-default button ax-switch-handler-content *{color:#454a50}ax-switch.ax-info-default button.ax-switch-checked{background-color:rgba(var(--ax-color-info-500))!important}ax-switch.ax-info-default button.ax-switch-checked ax-switch-handler-content,ax-switch.ax-info-default button.ax-switch-checked ax-switch-handler-content *{color:rgba(var(--ax-color-info-500))}ax-switch.ax-info-default button.ax-switch-checked .ax-switch-inner{color:rgba(var(--ax-color-info-fore))}ax-switch.ax-info-default button .ax-switch-handle ax-loading svg{fill:rgba(var(--ax-color-info-500));stroke:rgba(var(--ax-color-info-500))}ax-switch .ax-state-disabled{opacity:.5;cursor:not-allowed}ax-switch .ax-state-readonly{opacity:.75}.ax-dark ax-switch button{background-color:rgba(var(--ax-color-input-surface))!important}\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: "16.0.1", ngImport: i0, type: AXSwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-switch', inputs: [
                         'disabled',
@@ -71,11 +71,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
             }] } });
 class AXSwitchModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: AXSwitchModule, declarations: [AXSwitchComponent, AXSwitchContentComponent], imports: [CommonModule, FormsModule, AXLoadingModule], exports: [AXSwitchComponent, AXSwitchContentComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSwitchModule, imports: [CommonModule, FormsModule, AXLoadingModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: AXSwitchModule, declarations: [AXSwitchComponent, AXSwitchContentComponent], imports: [CommonModule, FormsModule, AXLoadingModule], exports: [AXSwitchComponent, AXSwitchContentComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSwitchModule, imports: [CommonModule, FormsModule, AXLoadingModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXSwitchModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXSwitchModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSwitchComponent, AXSwitchContentComponent],

package/fesm2022/acorex-components-tabs.mjs CHANGED Viewed

@@ -59,8 +59,8 @@ class AXTabItemComponent extends AXBaseTabItemMixin {
             option.newValue ? classListRef.add('ax-state-active') : classListRef.remove('ax-state-active');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTabItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: AXTabItemComponent, selector: "ax-tab-item", inputs: { text: "text", key: "key", active: "active", disabled: "disabled" }, outputs: { activeChange: "activeChange", disabledChange: "disabledChange" }, host: { listeners: { "click": "__hostClick($event)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["tabHeader"], descendants: true, static: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTabItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: AXTabItemComponent, selector: "ax-tab-item", inputs: { text: "text", key: "key", active: "active", disabled: "disabled" }, outputs: { activeChange: "activeChange", disabledChange: "disabledChange" }, host: { listeners: { "click": "__hostClick($event)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["tabHeader"], descendants: true, static: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-container *ngIf="headerTemplate; else tabHeader">
       <ng-container
         [ngTemplateOutlet]="headerTemplate"
@@ -87,7 +87,7 @@ class AXTabItemComponent extends AXBaseTabItemMixin {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTabItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTabItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-tab-item',
@@ -215,14 +215,14 @@ class AXTabsComponent extends AXBaseComponent {
         });
         this._isUserInteraction = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTabsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: AXTabsComponent, selector: "ax-tabs", inputs: { look: "look", orientation: "orientation", fitParent: "fitParent", minWidth: "minWidth", content: "content" }, outputs: { onActiveTabChanged: "onActiveTabChanged" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-tabs" }, queries: [{ propertyName: "_contentTabs", predicate: AXTabItemComponent }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTabsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: AXTabsComponent, selector: "ax-tabs", inputs: { look: "look", orientation: "orientation", fitParent: "fitParent", minWidth: "minWidth", content: "content" }, outputs: { onActiveTabChanged: "onActiveTabChanged" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-tabs" }, queries: [{ propertyName: "_contentTabs", predicate: AXTabItemComponent }], usesInheritance: true, ngImport: i0, template: `
     <div class="ax-items-wrapper">
       <ng-content select="ax-tab-item"> </ng-content>
     </div>
   `, 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-dark ax-tabs.ax-look-with-line .ax-items-wrapper ax-tab-item:hover,.ax-dark ax-tabs.ax-look-with-line .ax-items-wrapper ax-tab-item.ax-state-active{border-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-200))}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: "16.0.1", ngImport: i0, type: AXTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-tabs', template: `
     <div class="ax-items-wrapper">
@@ -271,10 +271,10 @@ class AXTabContentDirective {
             const viewRef = this._viewContainerRef.createEmbeddedView(v, null, 0);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTabContentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.1", type: AXTabContentDirective, selector: "[axTabContent]", inputs: { portal: ["axTabContent", "portal"] }, exportAs: ["axTabContent"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTabContentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: AXTabContentDirective, selector: "[axTabContent]", inputs: { portal: ["axTabContent", "portal"] }, exportAs: ["axTabContent"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTabContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTabContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axTabContent]',
@@ -286,11 +286,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
 const COMPONENT = [AXTabsComponent, AXTabItemComponent, AXTabContentDirective];
 const MODULES = [CommonModule, PortalModule, AXDecoratorModule];
 class AXTabsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: AXTabsModule, declarations: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective], imports: [CommonModule, PortalModule, AXDecoratorModule], exports: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTabsModule, imports: [MODULES] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: AXTabsModule, declarations: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective], imports: [CommonModule, PortalModule, AXDecoratorModule], exports: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTabsModule, imports: [MODULES] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],

package/fesm2022/acorex-components-tag.mjs CHANGED Viewed

@@ -14,10 +14,10 @@ class AXTagComponent extends AXBaseComponent {
     get __hostClass() {
         return `ax-ghost-${this.look}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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>\n<div class=\"ax-tag-text\" *ngIf=\"text\">{{text }}</div>\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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>\n<div class=\"ax-tag-text\" *ngIf=\"text\">{{text }}</div>\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: "16.0.1", ngImport: i0, type: AXTagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", 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>\n<div class=\"ax-tag-text\" *ngIf=\"text\">{{text }}</div>\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: [{
@@ -30,11 +30,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
             }] } });
 class AXTagModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: AXTagModule, declarations: [AXTagComponent], imports: [CommonModule], exports: [AXTagComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTagModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: AXTagModule, declarations: [AXTagComponent], imports: [CommonModule], exports: [AXTagComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTagModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTagModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTagModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXTagComponent],

package/fesm2022/acorex-components-textarea.mjs CHANGED Viewed

@@ -17,10 +17,10 @@ class AXTextareaComponent extends AXBaseTextBoxMixin {
     focus() {
         this.input.nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTextareaComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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>\n<textarea #input [attr.name]=\"name\" type=\"text\" [rows]=\"rows\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\n    (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\"></textarea>\n<ng-content select=\"ax-suffix\"></ng-content>\n<ng-content select=\"ax-validation-rule\">\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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTextareaComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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>\n<textarea #input [attr.name]=\"name\" type=\"text\" [rows]=\"rows\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\n    (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\"></textarea>\n<ng-content select=\"ax-suffix\"></ng-content>\n<ng-content select=\"ax-validation-rule\">\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.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: "16.0.1", ngImport: i0, type: AXTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", 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>\n<textarea #input [attr.name]=\"name\" type=\"text\" [rows]=\"rows\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\n    (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete\"></textarea>\n<ng-content select=\"ax-suffix\"></ng-content>\n<ng-content select=\"ax-validation-rule\">\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: [{
@@ -31,11 +31,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
             }] } });
 class AXTextareaModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: AXTextareaModule, declarations: [AXTextareaComponent], imports: [CommonModule, FormsModule], exports: [AXTextareaComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTextareaModule, imports: [CommonModule, FormsModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: AXTextareaModule, declarations: [AXTextareaComponent], imports: [CommonModule, FormsModule], exports: [AXTextareaComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTextareaModule, imports: [CommonModule, FormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTextareaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTextareaModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXTextareaComponent],

package/fesm2022/acorex-components-textbox.mjs CHANGED Viewed

@@ -12,10 +12,10 @@ import { CommonModule } from '@angular/common';
 class AXMaskOptionsDirective {
     mask;
     updateValue;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXMaskOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.1", type: AXMaskOptionsDirective, selector: "ax-mask-options", inputs: { mask: "mask", updateValue: "updateValue" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXMaskOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: AXMaskOptionsDirective, selector: "ax-mask-options", inputs: { mask: "mask", updateValue: "updateValue" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXMaskOptionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXMaskOptionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ax-mask-options'
@@ -79,13 +79,13 @@ class AXTextBoxComponent extends AXBaseTextBoxMixin {
             this._maskOptionsContent?.updateValue(this._maskObj.value, this._maskObj.unmaskedValue);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", state: "state", name: "name", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", type: "type", autoComplete: "autoComplete", maskOptions: ["mask-options", "maskOptions"] }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-editor-container" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", state: "state", name: "name", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", type: "type", autoComplete: "autoComplete", maskOptions: ["mask-options", "maskOptions"] }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-editor-container" }, providers: [
             { provide: AXComponent, useExisting: AXTextBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXTextBoxComponent },
         ], queries: [{ propertyName: "_maskOptionsContent", first: true, predicate: AXMaskOptionsDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\n</ng-content>\n<input #input class=\"ax-input\" \n    [attr.name]=\"name\" \n    [attr.autocomplete]=\"autoComplete\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\" \n    [attr.maxlength]=\"maxLength\" \n    [class.ax-state-disabled]=\"disabled\"\n    [class.ax-state-readonly]=\"readonly\" \n    [disabled]=\"disabled\" \n    [readonly]=\"readonly\" \n    [tabindex]=\"tabIndex\"\n    [ngModel]=\"value\" \n    (ngModelChange)=\"value = $event\"\n    [ngModelOptions]=\"{ updateOn:_updateOn }\" \n    (keydown)=\"_emitOnKeydownEvent($event)\"\n    (keyup)=\"_emitOnKeyupEvent($event)\" \n    (keypress)=\"_emitOnKeypressEvent($event)\" \n    (focus)=\"_emitOnFocusEvent($event)\"\n    (blur)=\"_emitOnBlurEvent($event)\">\n<ng-content select=\"ax-suffix\">\n</ng-content>\n<ng-content select=\"ax-validation-rule\">\n</ng-content>", 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.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: "16.0.1", ngImport: i0, type: AXTextBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTextBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-text-box', inputs: [
                         'disabled',
@@ -115,19 +115,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
             }] } });
 class AXTextBoxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: AXTextBoxModule, declarations: [AXTextBoxComponent, AXMaskOptionsDirective], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: AXTextBoxModule, declarations: [AXTextBoxComponent, AXMaskOptionsDirective], imports: [CommonModule,
             AXCommonModule,
             FormsModule,
             AXButtonModule,
             AXDecoratorModule], exports: [AXTextBoxComponent, AXMaskOptionsDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTextBoxModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTextBoxModule, imports: [CommonModule,
             AXCommonModule,
             FormsModule,
             AXButtonModule,
             AXDecoratorModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTextBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/acorex-components-time-box.mjs CHANGED Viewed

@@ -257,10 +257,10 @@ class AXTimeBoxComponent extends AXBaseTextBoxMixin {
         const { start, end } = AXStringUtil.getWordBoundsAtPosition(input.value, pos != null ? pos : input.selectionStart || 0);
         input.setSelectionRange(start, end);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTimeBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: AXTimeBoxComponent, selector: "ax-time-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", type: "type", autoComplete: "autoComplete", name: "name", checked: "checked", minValue: "minValue", maxValue: "maxValue", format: "format", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", formatChange: "formatChange", displayTextChange: "displayTextChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\n</ng-content>\n<input #input class=\"ax-input\" \n    [imask]=\"_maskObj\" \n    [unmask]=\"false\"  \n    type=\"text\" \n    [attr.placeholder]=\"placeholder\"\n    [class.ax-state-disabled]=\"disabled\" \n    [class.ax-state-readonly]=\"readonly\" \n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\" \n    [tabindex]=\"tabIndex\" \n    [ngModel]=\"displayText\" \n    (mouseup)=\"_handleOnInputClickEvent($event)\"\n    (focus)=\"_emitOnFocusEvent($event)\"\n    (blur)=\"_emitOnBlurEvent($event)\"\n    (keyup)=\"_handleKeyUpEvent($event)\" \n    (keydown)=\"_handleOnKeydownEvent($event)\" \n    autocomplete=\"off\">\n<ng-content select=\"ax-suffix\">\n</ng-content>\n<ng-content select=\"ax-validation-rule\">\n</ng-content>", 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTimeBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: AXTimeBoxComponent, selector: "ax-time-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", type: "type", autoComplete: "autoComplete", name: "name", checked: "checked", minValue: "minValue", maxValue: "maxValue", format: "format", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", formatChange: "formatChange", displayTextChange: "displayTextChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\n</ng-content>\n<input #input class=\"ax-input\" \n    [imask]=\"_maskObj\" \n    [unmask]=\"false\"  \n    type=\"text\" \n    [attr.placeholder]=\"placeholder\"\n    [class.ax-state-disabled]=\"disabled\" \n    [class.ax-state-readonly]=\"readonly\" \n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\" \n    [tabindex]=\"tabIndex\" \n    [ngModel]=\"displayText\" \n    (mouseup)=\"_handleOnInputClickEvent($event)\"\n    (focus)=\"_emitOnFocusEvent($event)\"\n    (blur)=\"_emitOnBlurEvent($event)\"\n    (keyup)=\"_handleKeyUpEvent($event)\" \n    (keydown)=\"_handleOnKeydownEvent($event)\" \n    autocomplete=\"off\">\n<ng-content select=\"ax-suffix\">\n</ng-content>\n<ng-content select=\"ax-validation-rule\">\n</ng-content>", 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTimeBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTimeBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-time-box', inputs: [
                         'disabled',
@@ -307,14 +307,14 @@ const MODULES = [
     IMaskModule
 ];
 class AXTimeBoxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTimeBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: AXTimeBoxModule, declarations: [AXTimeBoxComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTimeBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: AXTimeBoxModule, declarations: [AXTimeBoxComponent], imports: [CommonModule,
             FormsModule,
             AXButtonModule,
             IMaskModule], exports: [AXTimeBoxComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTimeBoxModule, imports: [MODULES] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTimeBoxModule, imports: [MODULES] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXTimeBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AXTimeBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],