@acorex/components 7.20.0 → 7.21.0

package/fesm2022/acorex-components-uploader.mjs

@@ -155,10 +155,10 @@ class AXUploaderService {
         currentValue = currentValue.filter(c => c != item);
         this.files$.next(currentValue);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -222,10 +222,10 @@ class AXUploaderZoneDirective {
     get __hostClass() {
         return `ax-drop-zone`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderZoneDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: { multiple: "multiple" }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderZoneDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: { multiple: "multiple" }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderZoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axUploaderZone]',
@@ -251,10 +251,10 @@ class AXUploaderBrowseDirective {
     handleClick() {
         this.uploaderZone.browser();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderBrowseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: AXUploaderBrowseDirective, selector: "[axUploaderBrowseHandle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderBrowseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: AXUploaderBrowseDirective, selector: "[axUploaderBrowseHandle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderBrowseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderBrowseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axUploaderBrowseHandle]',
@@ -266,10 +266,10 @@ class AXUploaderListComponent extends AXBasePageComponent {
         super(...arguments);
         this.uploadService = inject(AXUploaderService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: AXUploaderListComponent, selector: "ax-uploader-list", usesInheritance: true, ngImport: i0, template: "@if((uploadService.totalEstimateTime | async) > 0)\n{\n<div class=\"ax-uploader-progress-status\">\n  <div>{{ (uploadService.totalEstimateTime | async) | format: 'timeleft' | async }}</div>\n  <button (click)=\"uploadService.cancelAll()\">{{ 'cancel' | translate | async }}</button>\n</div>\n}\n<ul class=\"ax-uploader-list-items\">\n  @for (item of uploadService.files | async; track item.name) {\n  <li>\n    <div class=\"ax-file ax-bg-success-500\">\n      <span>{{ item.ext }}</span>\n    </div>\n    <div class=\"ax-item-container\">\n      <div class=\"ax-item-name\" [title]=\"item.name\">{{ item.name }}</div>\n      <div><span>{{ item.size | format: 'filesize' | async }}</span>\n        @switch (item.status()) {\n        @case ('inprogress') {\n        / {{ item.estimateTime() | format: 'timeleft' | async }}\n        }\n        }\n      </div>\n    </div>\n    @switch (item.status()) {\n    @case ('completed') {\n    <div class=\"ax-status\">\n      <i class=\"ax-icon ax-icon-solid ax-icon-check-circle ax-state-completed\"></i>\n    </div>\n    }\n    @case ('canceled') {\n    <span class=\"ax-state-canceled\">{{ 'canceled' | translate | async }}</span>\n    }\n    @case ('failed') {\n    <span class=\"ax-state-failed\">{{ 'failed' | translate | async }}</span>\n    }\n    @default {\n    <div class=\"ax-status\">\n      <ax-circular-progress [size]=\"22\" [stroke]=\"6\" [progress]=\"item.progress()\" class=\"ax-show\">\n      </ax-circular-progress>\n      <i class=\"ax-icon ax-icon-solid ax-icon-close ax-hide\" (click)=\"item.cancel()\"\n        title=\"{{ 'cancel' | translate | async  }}\"></i>\n    </div>\n    }\n    }\n  </li>\n  }\n</ul>", styles: [".ax-dark ax-uploader-list .ax-uploader-progress-status{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-fore))}ax-uploader-list .ax-uploader-progress-status{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-top-width:1px;border-color:rgba(var(--ax-color-primary-200));background-color:rgba(var(--ax-color-primary-200));padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-primary-fore-tint))}ax-uploader-list .ax-uploader-list-items{max-height:75vh;width:100%;overflow-y:auto;overflow-x:hidden;padding:.5rem 1rem;gap:.5rem;display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li{display:flex;align-items:center;font-size:.875rem;line-height:1.25rem;gap:1rem;width:100%}ax-uploader-list .ax-uploader-list-items li .ax-item-container{display:flex;flex-direction:column;flex:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}ax-uploader-list .ax-uploader-list-items li .ax-item-container .ax-item-name{font-size:.875rem;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;width:12rem}ax-uploader-list .ax-uploader-list-items li .ax-status{position:relative;color:rgba(var(--ax-color-black),.5)}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon{font-size:1.375rem}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon-close{cursor:pointer}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-canceled{color:rgba(var(--ax-color-neutral-500))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed{color:rgba(var(--ax-color-danger-500))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-completed{color:rgba(var(--ax-color-success-500))}ax-uploader-list .ax-uploader-list-items li:hover .ax-hide{display:flex!important}ax-uploader-list .ax-uploader-list-items li:hover .ax-show{display:none!important}ax-uploader-list .ax-uploader-list-items li .ax-show{display:flex!important}ax-uploader-list .ax-uploader-list-items li .ax-hide{display:none!important}.ax-file{position:relative;display:flex;align-items:center;justify-content:center;width:1.5rem;aspect-ratio:.7;border-radius:.25rem;color:rgba(var(--ax-color-white))}.ax-file>*{position:absolute;bottom:.3rem;font-weight:700;font-size:.65rem;line-height:.65rem}.ax-file:before{content:\"\";position:absolute;top:0;right:0;border-width:0 12px 12px 0;border-color:rgba(var(--ax-color-surface)) rgba(var(--ax-color-surface)) rgba(var(--ax-color-black),.3) rgba(var(--ax-color-black),.3)}\n"], dependencies: [{ kind: "component", type: i1.AXCircularProgressComponent, selector: "ax-circular-progress", inputs: ["color", "progress", "stroke", "size"], outputs: ["ValueChange", "strokeChange", "sizeChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: AXUploaderListComponent, selector: "ax-uploader-list", usesInheritance: true, ngImport: i0, template: "@if((uploadService.totalEstimateTime | async) > 0)\n{\n<div class=\"ax-uploader-progress-status\">\n  <div>{{ (uploadService.totalEstimateTime | async) | format: 'timeleft' | async }}</div>\n  <button (click)=\"uploadService.cancelAll()\">{{ 'cancel' | translate | async }}</button>\n</div>\n}\n<ul class=\"ax-uploader-list-items\">\n  @for (item of uploadService.files | async; track item.name) {\n  <li>\n    <div class=\"ax-file ax-bg-success-500\">\n      <span>{{ item.ext }}</span>\n    </div>\n    <div class=\"ax-item-container\">\n      <div class=\"ax-item-name\" [title]=\"item.name\">{{ item.name }}</div>\n      <div><span>{{ item.size | format: 'filesize' | async }}</span>\n        @switch (item.status()) {\n        @case ('inprogress') {\n        / {{ item.estimateTime() | format: 'timeleft' | async }}\n        }\n        }\n      </div>\n    </div>\n    @switch (item.status()) {\n    @case ('completed') {\n    <div class=\"ax-status\">\n      <i class=\"ax-icon ax-icon-solid ax-icon-check-circle ax-state-completed\"></i>\n    </div>\n    }\n    @case ('canceled') {\n    <span class=\"ax-state-canceled\">{{ 'canceled' | translate | async }}</span>\n    }\n    @case ('failed') {\n    <span class=\"ax-state-failed\">{{ 'failed' | translate | async }}</span>\n    }\n    @default {\n    <div class=\"ax-status\">\n      <ax-circular-progress [size]=\"22\" [stroke]=\"6\" [progress]=\"item.progress()\" class=\"ax-show\">\n      </ax-circular-progress>\n      <i class=\"ax-icon ax-icon-solid ax-icon-close ax-hide\" (click)=\"item.cancel()\"\n        title=\"{{ 'cancel' | translate | async  }}\"></i>\n    </div>\n    }\n    }\n  </li>\n  }\n</ul>", styles: [".ax-dark ax-uploader-list .ax-uploader-progress-status{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-fore))}ax-uploader-list .ax-uploader-progress-status{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-top-width:1px;border-color:rgba(var(--ax-color-primary-200));background-color:rgba(var(--ax-color-primary-200));padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-primary-fore-tint))}ax-uploader-list .ax-uploader-list-items{max-height:75vh;width:100%;overflow-y:auto;overflow-x:hidden;padding:.5rem 1rem;gap:.5rem;display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li{display:flex;align-items:center;font-size:.875rem;line-height:1.25rem;gap:1rem;width:100%}ax-uploader-list .ax-uploader-list-items li .ax-item-container{display:flex;flex-direction:column;flex:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}ax-uploader-list .ax-uploader-list-items li .ax-item-container .ax-item-name{font-size:.875rem;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;width:12rem}ax-uploader-list .ax-uploader-list-items li .ax-status{position:relative;color:rgba(var(--ax-color-black),.5)}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon{font-size:1.375rem}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon-close{cursor:pointer}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-canceled{color:rgba(var(--ax-color-neutral-500))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed{color:rgba(var(--ax-color-danger-500))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-completed{color:rgba(var(--ax-color-success-500))}ax-uploader-list .ax-uploader-list-items li:hover .ax-hide{display:flex!important}ax-uploader-list .ax-uploader-list-items li:hover .ax-show{display:none!important}ax-uploader-list .ax-uploader-list-items li .ax-show{display:flex!important}ax-uploader-list .ax-uploader-list-items li .ax-hide{display:none!important}.ax-file{position:relative;display:flex;align-items:center;justify-content:center;width:1.5rem;aspect-ratio:.7;border-radius:.25rem;color:rgba(var(--ax-color-white))}.ax-file>*{position:absolute;bottom:.3rem;font-weight:700;font-size:.65rem;line-height:.65rem}.ax-file:before{content:\"\";position:absolute;top:0;right:0;border-width:0 12px 12px 0;border-color:rgba(var(--ax-color-surface)) rgba(var(--ax-color-surface)) rgba(var(--ax-color-black),.3) rgba(var(--ax-color-black),.3)}\n"], dependencies: [{ kind: "component", type: i1.AXCircularProgressComponent, selector: "ax-circular-progress", inputs: ["color", "progress", "stroke", "size"], outputs: ["ValueChange", "strokeChange", "sizeChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-uploader-list', encapsulation: ViewEncapsulation.None, template: "@if((uploadService.totalEstimateTime | async) > 0)\n{\n<div class=\"ax-uploader-progress-status\">\n  <div>{{ (uploadService.totalEstimateTime | async) | format: 'timeleft' | async }}</div>\n  <button (click)=\"uploadService.cancelAll()\">{{ 'cancel' | translate | async }}</button>\n</div>\n}\n<ul class=\"ax-uploader-list-items\">\n  @for (item of uploadService.files | async; track item.name) {\n  <li>\n    <div class=\"ax-file ax-bg-success-500\">\n      <span>{{ item.ext }}</span>\n    </div>\n    <div class=\"ax-item-container\">\n      <div class=\"ax-item-name\" [title]=\"item.name\">{{ item.name }}</div>\n      <div><span>{{ item.size | format: 'filesize' | async }}</span>\n        @switch (item.status()) {\n        @case ('inprogress') {\n        / {{ item.estimateTime() | format: 'timeleft' | async }}\n        }\n        }\n      </div>\n    </div>\n    @switch (item.status()) {\n    @case ('completed') {\n    <div class=\"ax-status\">\n      <i class=\"ax-icon ax-icon-solid ax-icon-check-circle ax-state-completed\"></i>\n    </div>\n    }\n    @case ('canceled') {\n    <span class=\"ax-state-canceled\">{{ 'canceled' | translate | async }}</span>\n    }\n    @case ('failed') {\n    <span class=\"ax-state-failed\">{{ 'failed' | translate | async }}</span>\n    }\n    @default {\n    <div class=\"ax-status\">\n      <ax-circular-progress [size]=\"22\" [stroke]=\"6\" [progress]=\"item.progress()\" class=\"ax-show\">\n      </ax-circular-progress>\n      <i class=\"ax-icon ax-icon-solid ax-icon-close ax-hide\" (click)=\"item.cancel()\"\n        title=\"{{ 'cancel' | translate | async  }}\"></i>\n    </div>\n    }\n    }\n  </li>\n  }\n</ul>", styles: [".ax-dark ax-uploader-list .ax-uploader-progress-status{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-fore))}ax-uploader-list .ax-uploader-progress-status{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-top-width:1px;border-color:rgba(var(--ax-color-primary-200));background-color:rgba(var(--ax-color-primary-200));padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-primary-fore-tint))}ax-uploader-list .ax-uploader-list-items{max-height:75vh;width:100%;overflow-y:auto;overflow-x:hidden;padding:.5rem 1rem;gap:.5rem;display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li{display:flex;align-items:center;font-size:.875rem;line-height:1.25rem;gap:1rem;width:100%}ax-uploader-list .ax-uploader-list-items li .ax-item-container{display:flex;flex-direction:column;flex:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}ax-uploader-list .ax-uploader-list-items li .ax-item-container .ax-item-name{font-size:.875rem;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;width:12rem}ax-uploader-list .ax-uploader-list-items li .ax-status{position:relative;color:rgba(var(--ax-color-black),.5)}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon{font-size:1.375rem}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon-close{cursor:pointer}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-canceled{color:rgba(var(--ax-color-neutral-500))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed{color:rgba(var(--ax-color-danger-500))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-completed{color:rgba(var(--ax-color-success-500))}ax-uploader-list .ax-uploader-list-items li:hover .ax-hide{display:flex!important}ax-uploader-list .ax-uploader-list-items li:hover .ax-show{display:none!important}ax-uploader-list .ax-uploader-list-items li .ax-show{display:flex!important}ax-uploader-list .ax-uploader-list-items li .ax-hide{display:none!important}.ax-file{position:relative;display:flex;align-items:center;justify-content:center;width:1.5rem;aspect-ratio:.7;border-radius:.25rem;color:rgba(var(--ax-color-white))}.ax-file>*{position:absolute;bottom:.3rem;font-weight:700;font-size:.65rem;line-height:.65rem}.ax-file:before{content:\"\";position:absolute;top:0;right:0;border-width:0 12px 12px 0;border-color:rgba(var(--ax-color-surface)) rgba(var(--ax-color-surface)) rgba(var(--ax-color-black),.3) rgba(var(--ax-color-black),.3)}\n"] }]
         }] });
@@ -290,8 +290,8 @@ class AXUploaderDialogContainerComponent {
     toggle() {
         this.isCollapsed = !this.isCollapsed;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: AXUploaderDialogContainerComponent, selector: "ax-uploader-dialog-container", ngImport: i0, template: "<div class=\"ax-uploader-list-header\">\n    <div>{{'Uploading' | translate | async }}</div>\n    <div>\n        <i class=\"ax-icon\" [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n            (click)=\"toggle()\"></i>\n        <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n    </div>\n</div>\n<div [@collapse]=\"isCollapsed\">\n    <ax-uploader-list></ax-uploader-list>\n</div>", styles: ["ax-uploader-dialog-container{display:block;background-color:rgba(var(--ax-color-surface));-webkit-border-top-left-radius:.75rem;-webkit-border-top-right-radius:.75rem;-moz-border-radius-topleft:.75rem;-moz-border-radius-topright:.75rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem;overflow:hidden;box-shadow:-1px -1px 10px rgba(0,0,0,.16);border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:rgba(var(--ax-color-primary-500))}ax-uploader-dialog-container .ax-uploader-list-header{display:flex;justify-content:space-between;background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;font-weight:500;color:rgba(var(--ax-color-on-surface-fore))}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon{-webkit-margin-start:.5rem;margin-inline-start:.5rem;cursor:pointer}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon:hover{opacity:.75}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXUploaderListComponent, selector: "ax-uploader-list" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AXUploaderDialogContainerComponent, selector: "ax-uploader-dialog-container", ngImport: i0, template: "<div class=\"ax-uploader-list-header\">\n    <div>{{'Uploading' | translate | async }}</div>\n    <div>\n        <i class=\"ax-icon\" [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n            (click)=\"toggle()\"></i>\n        <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n    </div>\n</div>\n<div [@collapse]=\"isCollapsed\">\n    <ax-uploader-list></ax-uploader-list>\n</div>", styles: ["ax-uploader-dialog-container{display:block;background-color:rgba(var(--ax-color-surface));-webkit-border-top-left-radius:.75rem;-webkit-border-top-right-radius:.75rem;-moz-border-radius-topleft:.75rem;-moz-border-radius-topright:.75rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem;overflow:hidden;box-shadow:-1px -1px 10px rgba(0,0,0,.16);border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:rgba(var(--ax-color-primary-500))}ax-uploader-dialog-container .ax-uploader-list-header{display:flex;justify-content:space-between;background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;font-weight:500;color:rgba(var(--ax-color-on-surface-fore))}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon{-webkit-margin-start:.5rem;margin-inline-start:.5rem;cursor:pointer}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon:hover{opacity:.75}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXUploaderListComponent, selector: "ax-uploader-list" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], animations: [
             trigger('collapse', [
                 state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
                 state('true', style({ height: '0', visibility: 'hidden' })),
@@ -300,7 +300,7 @@ class AXUploaderDialogContainerComponent {
             ]),
         ], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderDialogContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderDialogContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-uploader-dialog-container', encapsulation: ViewEncapsulation.None, animations: [
                         trigger('collapse', [
@@ -313,17 +313,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
         }] });
 
 class AXUploaderDropZoneComponent extends MXBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderDropZoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: AXUploaderDropZoneComponent, selector: "ax-uploader-drop-zone", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-uploader-drop-zone-container\" axUploaderZone>\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>Drag & Drop or <a href=\"#\">Choose file</a> to upload</span>\n    <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p>\n  </div>\n</div>", styles: [".ax-uploader-drop-zone-container{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:.5rem;margin:1rem;padding:1rem;gap:1rem;border:2px dashed;border-color:rgba(var(--ax-color-border-default))}.ax-uploader-drop-zone-container:hover{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-50))}.ax-uploader-drop-zone-container ax-icon{font-size:1.875rem;line-height:2.25rem;color:#a3a3a3}.ax-uploader-drop-zone-container .ax-uploader-drop-zone-description{display:flex;flex-direction:column;gap:.5rem}.ax-uploader-drop-zone-container .ax-uploader-drop-zone-description a{color:rgba(var(--ax-color-primary-500))}.ax-uploader-drop-zone-container .ax-uploader-drop-zone-description p{font-size:.875rem;line-height:1.25rem;color:#a3a3a3}\n"], dependencies: [{ kind: "component", type: i1$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderDropZoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AXUploaderDropZoneComponent, selector: "ax-uploader-drop-zone", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-uploader-drop-zone-container\" axUploaderZone>\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>Drag & Drop or <a href=\"#\">Choose file</a> to upload</span>\n    <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p>\n  </div>\n</div>", styles: [".ax-uploader-drop-zone-container{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:.5rem;margin:1rem;padding:1rem;gap:1rem;border:2px dashed;border-color:rgba(var(--ax-color-border-default))}.ax-uploader-drop-zone-container:hover{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-50))}.ax-uploader-drop-zone-container ax-icon{font-size:1.875rem;line-height:2.25rem;color:#a3a3a3}.ax-uploader-drop-zone-container .ax-uploader-drop-zone-description{display:flex;flex-direction:column;gap:.5rem}.ax-uploader-drop-zone-container .ax-uploader-drop-zone-description a{color:rgba(var(--ax-color-primary-500))}.ax-uploader-drop-zone-container .ax-uploader-drop-zone-description p{font-size:.875rem;line-height:1.25rem;color:#a3a3a3}\n"], dependencies: [{ kind: "component", type: i1$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderDropZoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderDropZoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-uploader-drop-zone', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-uploader-drop-zone-container\" axUploaderZone>\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>Drag & Drop or <a href=\"#\">Choose file</a> to upload</span>\n    <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p>\n  </div>\n</div>", styles: [".ax-uploader-drop-zone-container{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:.5rem;margin:1rem;padding:1rem;gap:1rem;border:2px dashed;border-color:rgba(var(--ax-color-border-default))}.ax-uploader-drop-zone-container:hover{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-50))}.ax-uploader-drop-zone-container ax-icon{font-size:1.875rem;line-height:2.25rem;color:#a3a3a3}.ax-uploader-drop-zone-container .ax-uploader-drop-zone-description{display:flex;flex-direction:column;gap:.5rem}.ax-uploader-drop-zone-container .ax-uploader-drop-zone-description a{color:rgba(var(--ax-color-primary-500))}.ax-uploader-drop-zone-container .ax-uploader-drop-zone-description p{font-size:.875rem;line-height:1.25rem;color:#a3a3a3}\n"] }]
         }] });
 
 class AXUploaderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderModule, declarations: [AXUploaderDropZoneComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderModule, declarations: [AXUploaderDropZoneComponent,
             AXUploaderListComponent,
             AXUploaderZoneDirective,
             AXUploaderBrowseDirective,
@@ -341,7 +341,7 @@ class AXUploaderModule {
             AXUploaderZoneDirective,
             AXUploaderBrowseDirective,
             AXUploaderDialogContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderModule, providers: [AXUploaderService], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderModule, providers: [AXUploaderService], imports: [CommonModule,
             HttpClientModule,
             AXDecoratorModule,
             AXButtonModule,
@@ -353,7 +353,7 @@ class AXUploaderModule {
             AXCircularProgressModule,
             AXPopupModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: AXUploaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AXUploaderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/image/lib/image.component.d.ts

@@ -6,7 +6,7 @@ export declare class AXImageComponent extends MXBaseComponent implements OnInit
     src?: string | null;
     alt?: string | null;
     priority: 'low' | 'auto' | 'high';
-    lazy: false;
+    lazy: boolean;
     onLoad: EventEmitter<AXHtmlEvent>;
     onError: EventEmitter<AXHtmlEvent<ErrorEvent>>;
     protected _hasError: boolean;

package/loading-dialog/README.md

@@ -0,0 +1,3 @@
+# @acorex/components/loading-dialog
+
+Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/components/loading-dialog`.

package/loading-dialog/index.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/loading-dialog.class';
+export * from './lib/loading-dialog.component';
+export * from './lib/loading-dialog.module';
+export * from './lib/loading-dialog.service';

package/loading-dialog/lib/loading-dialog.class.d.ts

@@ -0,0 +1,31 @@
+import { AXHotKeyAction, AXStyleColorType, AXStyleLookType } from '@acorex/components/common';
+import { AXDialogButtonItem } from '@acorex/components/dialog';
+import { AXProgressMode } from '@acorex/components/progress-bar';
+import { BehaviorSubject } from 'rxjs';
+export interface AXLoadingDialogConfig {
+    title: BehaviorSubject<string>;
+    mode: BehaviorSubject<AXProgressMode>;
+    progressColor?: AXStyleColorType;
+    progressPrefixText?: BehaviorSubject<string>;
+    progressSuffixText?: BehaviorSubject<string>;
+    progressValue?: BehaviorSubject<number>;
+    progressHeight?: number;
+    buttons?: AXLoadingDialogButtonItem[];
+}
+export interface AXLoadingDialogButtonItem {
+    text: string;
+    color?: AXStyleColorType;
+    look?: AXStyleLookType;
+    name?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    hotkey?: string | AXHotKeyAction;
+    autofocus?: boolean;
+    onClick?: (e?: {
+        source: AXDialogButtonItem;
+        handled?: boolean;
+    }) => void;
+}
+export interface AXDialogRef {
+    close(): void;
+}

package/loading-dialog/lib/loading-dialog.component.d.ts

@@ -0,0 +1,16 @@
+import { AXComponentCloseEvent, MXBaseComponent } from '@acorex/components/common';
+import { DialogRef } from '@angular/cdk/dialog';
+import { OnInit } from '@angular/core';
+import { AXLoadingDialogButtonItem, AXLoadingDialogConfig } from './loading-dialog.class';
+import * as i0 from "@angular/core";
+export declare class AXLoadingDialogComponent extends MXBaseComponent implements OnInit {
+    data: AXLoadingDialogConfig;
+    private dialogRef;
+    constructor(data: AXLoadingDialogConfig, dialogRef: DialogRef<AXComponentCloseEvent>);
+    ngOnInit(): void;
+    close(): void;
+    protected _handleButtonClick(button: AXLoadingDialogButtonItem): void;
+    protected _hasAutoFocus(button: AXLoadingDialogButtonItem): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXLoadingDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXLoadingDialogComponent, "ax-loading-dialog", never, {}, {}, never, never, false, never>;
+}

package/loading-dialog/lib/loading-dialog.module.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./loading-dialog.component";
+import * as i2 from "@acorex/components/common";
+import * as i3 from "@acorex/components/progress-bar";
+import * as i4 from "@acorex/components/loading";
+import * as i5 from "@acorex/components/decorators";
+import * as i6 from "@acorex/components/button";
+import * as i7 from "@acorex/core/translation";
+import * as i8 from "@angular/common";
+export declare class AXLoadingDialogModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXLoadingDialogModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXLoadingDialogModule, [typeof i1.AXLoadingDialogComponent], [typeof i2.AXCommonModule, typeof i3.AXProgressBarModule, typeof i4.AXLoadingModule, typeof i5.AXDecoratorModule, typeof i6.AXButtonModule, typeof i7.AXTranslationModule, typeof i8.AsyncPipe], [typeof i1.AXLoadingDialogComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AXLoadingDialogModule>;
+}

package/loading-dialog/lib/loading-dialog.service.d.ts

@@ -0,0 +1,8 @@
+import { AXDialogRef, AXLoadingDialogConfig } from './loading-dialog.class';
+import * as i0 from "@angular/core";
+export declare class AXLoadingDialogService {
+    private dialog;
+    show(options: AXLoadingDialogConfig): AXDialogRef;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXLoadingDialogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AXLoadingDialogService>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/components",
-  "version": "7.20.0",
+  "version": "7.21.0",
   "sideEffects": false,
   "peerDependencies": {
     "@angular/common": ">=17.0.3",
@@ -172,6 +172,12 @@
       "esm": "./esm2022/dropdown/acorex-components-dropdown.mjs",
       "default": "./fesm2022/acorex-components-dropdown.mjs"
     },
+    "./dropdown-button": {
+      "types": "./dropdown-button/index.d.ts",
+      "esm2022": "./esm2022/dropdown-button/acorex-components-dropdown-button.mjs",
+      "esm": "./esm2022/dropdown-button/acorex-components-dropdown-button.mjs",
+      "default": "./fesm2022/acorex-components-dropdown-button.mjs"
+    },
     "./form": {
       "types": "./form/index.d.ts",
       "esm2022": "./esm2022/form/acorex-components-form.mjs",
@@ -202,6 +208,12 @@
       "esm": "./esm2022/loading/acorex-components-loading.mjs",
       "default": "./fesm2022/acorex-components-loading.mjs"
     },
+    "./loading-dialog": {
+      "types": "./loading-dialog/index.d.ts",
+      "esm2022": "./esm2022/loading-dialog/acorex-components-loading-dialog.mjs",
+      "esm": "./esm2022/loading-dialog/acorex-components-loading-dialog.mjs",
+      "default": "./fesm2022/acorex-components-loading-dialog.mjs"
+    },
     "./menu": {
       "types": "./menu/index.d.ts",
       "esm2022": "./esm2022/menu/acorex-components-menu.mjs",
@@ -274,18 +286,18 @@
       "esm": "./esm2022/popup/acorex-components-popup.mjs",
       "default": "./fesm2022/acorex-components-popup.mjs"
     },
-    "./progress-bar": {
-      "types": "./progress-bar/index.d.ts",
-      "esm2022": "./esm2022/progress-bar/acorex-components-progress-bar.mjs",
-      "esm": "./esm2022/progress-bar/acorex-components-progress-bar.mjs",
-      "default": "./fesm2022/acorex-components-progress-bar.mjs"
-    },
     "./radio": {
       "types": "./radio/index.d.ts",
       "esm2022": "./esm2022/radio/acorex-components-radio.mjs",
       "esm": "./esm2022/radio/acorex-components-radio.mjs",
       "default": "./fesm2022/acorex-components-radio.mjs"
     },
+    "./progress-bar": {
+      "types": "./progress-bar/index.d.ts",
+      "esm2022": "./esm2022/progress-bar/acorex-components-progress-bar.mjs",
+      "esm": "./esm2022/progress-bar/acorex-components-progress-bar.mjs",
+      "default": "./fesm2022/acorex-components-progress-bar.mjs"
+    },
     "./range-slider": {
       "types": "./range-slider/index.d.ts",
       "esm2022": "./esm2022/range-slider/acorex-components-range-slider.mjs",

package/password-box/lib/password-box.component.d.ts

@@ -24,6 +24,6 @@ export declare class AXPasswordBoxComponent extends AXPasswordBoxComponent_base
     toggleType(): void;
     get __hostClass(): string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<AXPasswordBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXPasswordBoxComponent, "ax-password-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "look": { "alias": "look"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "showToggleButton": { "alias": "showToggleButton"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onKeyDown": "onKeyDown"; "onKeyUp": "onKeyUp"; "onKeyPress": "onKeyPress"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXPasswordBoxComponent, "ax-password-box", never, { "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "look": { "alias": "look"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "showToggleButton": { "alias": "showToggleButton"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onKeyDown": "onKeyDown"; "onKeyUp": "onKeyUp"; "onKeyPress": "onKeyPress"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], false, never>;
 }
 export {};

package/progress-bar/lib/progress-bar.component.d.ts

@@ -7,10 +7,12 @@ import * as i0 from "@angular/core";
  * @category Components
  */
 export type AXProgressLook = 'linear' | 'circular';
+export type AXProgressMode = 'determinate' | 'indeterminate' | 'buffer' | 'query';
 export declare class AXProgressBarComponent extends MXColorComponent {
     circle: ElementRef;
     ValueChange: EventEmitter<number>;
     private _progress;
+    mode: AXProgressMode;
     get progress(): number;
     set progress(v: number);
     sizeChange: EventEmitter<number>;
@@ -19,5 +21,5 @@ export declare class AXProgressBarComponent extends MXColorComponent {
     set height(v: number);
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXProgressBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXProgressBarComponent, "ax-progress-bar", never, { "color": { "alias": "color"; "required": false; }; "progress": { "alias": "progress"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, { "ValueChange": "ValueChange"; "sizeChange": "sizeChange"; }, never, ["ax-prefix", "ax-suffix"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXProgressBarComponent, "ax-progress-bar", never, { "color": { "alias": "color"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "progress": { "alias": "progress"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, { "ValueChange": "ValueChange"; "sizeChange": "sizeChange"; }, never, ["ax-prefix", "ax-suffix"], false, never>;
 }

package/select-box/lib/select-box.component.d.ts

@@ -2,7 +2,7 @@ import { AXDataSource, AXValueChangedEvent, MXLookComponent, MXSelectionBridgeSe
 import { AXDropdownBoxComponent, MXDropdownBoxBaseComponent } from '@acorex/components/dropdown';
 import { AXListComponent } from '@acorex/components/list';
 import { AXSearchBoxComponent } from '@acorex/components/search-box';
-import { AfterViewInit, ElementRef, OnDestroy, TemplateRef } from '@angular/core';
+import { AfterViewInit, ElementRef, OnDestroy, TemplateRef, WritableSignal } from '@angular/core';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 declare const AXSelectBoxComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXDropdownBoxBaseComponent, typeof MXSelectionValueComponent, typeof MXLookComponent]>;
@@ -13,7 +13,7 @@ declare const AXSelectBoxComponent_base: import("polytype").Polytype.ClusteredCo
  */
 export declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements AfterViewInit, OnDestroy {
     private hotKeyService;
-    isLoading: boolean;
+    protected isLoading: WritableSignal<boolean>;
     protected renderList: boolean;
     protected dropdownSizes: {
         width: string;
@@ -35,6 +35,7 @@ export declare class AXSelectBoxComponent extends AXSelectBoxComponent_base impl
     selectionService: MXSelectionBridgeService;
     searchEvent: Observable<unknown>;
     private _unsubscriber;
+    protected ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     getItemByKey(key: unknown): Promise<unknown> | unknown;

package/selection-list/lib/selection-list.component.d.ts

@@ -1,4 +1,5 @@
 import { AXDirection, MXSelectionValueComponent } from '@acorex/components/common';
+import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export type AXSelectionListLook = 'solid' | 'divided' | 'card';
 /**
@@ -10,6 +11,7 @@ export declare class AXSelectionListComponent extends MXSelectionValueComponent
     private _direction;
     get direction(): AXDirection;
     set direction(v: AXDirection);
+    customTemplate: TemplateRef<unknown>;
     private _showControl;
     get showControl(): boolean;
     set showControl(v: boolean);
@@ -24,5 +26,5 @@ export declare class AXSelectionListComponent extends MXSelectionValueComponent
     protected _handleOnItemValueChange(item: any, e: Event): void;
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXSelectionListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXSelectionListComponent, "ax-selection-list", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "hintField": { "alias": "hintField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "readonlyField": { "alias": "readonlyField"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "showControl": { "alias": "showControl"; "required": false; }; "items": { "alias": "items"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; }, never, ["ax-validation-rule"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXSelectionListComponent, "ax-selection-list", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "hintField": { "alias": "hintField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "readonlyField": { "alias": "readonlyField"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; "showControl": { "alias": "showControl"; "required": false; }; "items": { "alias": "items"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; }, never, ["ax-validation-rule"], false, never>;
 }

package/switch/lib/switch.component.d.ts

@@ -6,10 +6,10 @@ declare const AXSwitchComponent_base: import("polytype").Polytype.ClusteredConst
     ɵprov: import("@angular/core").ɵɵInjectableDeclaration<MXValueComponent<any>>;
 }, typeof MXColorComponent]>;
 export declare class AXSwitchComponent extends AXSwitchComponent_base {
-    loading: boolean;
+    isLoading: boolean;
     protected _handleOnClickEvent(e: MouseEvent): void;
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXSwitchComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXSwitchComponent, "ax-switch", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, never, ["ax-switch-handler-content", "ax-switch-handler-on-content", "ax-switch-handler-off-content", "ax-switch-off-content", "ax-switch-on-content"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXSwitchComponent, "ax-switch", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, never, ["ax-switch-handler-content", "ax-switch-handler-on-content", "ax-switch-handler-off-content", "ax-switch-off-content", "ax-switch-on-content"], false, never>;
 }
 export {};