@acorex/components 19.11.0-next.4 → 19.11.0-next.5

package/fesm2022/acorex-components-tree-view.mjs

@@ -68,8 +68,8 @@ class AXTreeViewItemComponent extends NXComponent {
             this.onNodeDbClick.emit({ component: this, data: item, nativeElement: this.nativeElement });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXTreeViewItemComponent, isStandalone: true, selector: "ax-tree-view-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, hasChildField: { classPropertyName: "hasChildField", publicName: "hasChildField", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, disableField: { classPropertyName: "disableField", publicName: "disableField", isSignal: true, isRequired: false, transformFunction: null }, expandIconField: { classPropertyName: "expandIconField", publicName: "expandIconField", isSignal: true, isRequired: false, transformFunction: null }, executorChanges: { classPropertyName: "executorChanges", publicName: "executorChanges", isSignal: true, isRequired: false, transformFunction: null }, expandBehavior: { classPropertyName: "expandBehavior", publicName: "expandBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onNodeExpand: "onNodeExpand", onNodeClick: "onNodeClick", isExpanded: "isExpandedChange", isActive: "isActiveChange", onNodeDbClick: "onNodeDbClick" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tree-view-container\">\n  @if ((item().childrens && !isLoading()) || (item()[hasChildField()] && !isLoading())) {\n    <i [class.ax-state-disabled]=\"item()[disableField()]\" (click)=\"handleArrowNodeClick()\" class=\"{{ arrowIcon() }}\"></i>\n  } @else if (isLoading()) {\n    <ax-loading></ax-loading>\n  } @else {\n    <i class=\"ax-icon\"></i>\n  }\n\n  <div class=\"ax-tree-view-items\">\n    <ng-content select=\"ax-check-box\"></ng-content>\n    <div\n      [class.ax-state-disabled]=\"item()[disableField()]\"\n      [axTooltip]=\"item().tooltip\"\n      axTooltipPlacement=\"end-bottom\"\n      (click)=\"handleTextClick(item())\"\n      (dblclick)=\"handleTextDbClick(item())\"\n      class=\"ax-tree-view-items-prefix noselect-tree-view\"\n      [class.ax-state-tree-view-active]=\"item().active\"\n    >\n      <ng-content select=\"ax-prefix\"></ng-content>\n      <ng-content select=\"ax-text\"></ng-content>\n      <ng-content select=\"ax-suffix\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<div class=\"{{ platformService.isRtl() ? 'ax-state-tree-view-rtl' : 'ax-state-tree-view-ltr' }}\" [@collapseExpand]=\"isExpanded() ? 'expanded' : 'collapsed'\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXTreeViewItemComponent, isStandalone: true, selector: "ax-tree-view-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, hasChildField: { classPropertyName: "hasChildField", publicName: "hasChildField", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, disableField: { classPropertyName: "disableField", publicName: "disableField", isSignal: true, isRequired: false, transformFunction: null }, expandIconField: { classPropertyName: "expandIconField", publicName: "expandIconField", isSignal: true, isRequired: false, transformFunction: null }, executorChanges: { classPropertyName: "executorChanges", publicName: "executorChanges", isSignal: true, isRequired: false, transformFunction: null }, expandBehavior: { classPropertyName: "expandBehavior", publicName: "expandBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onNodeExpand: "onNodeExpand", onNodeClick: "onNodeClick", isExpanded: "isExpandedChange", isActive: "isActiveChange", onNodeDbClick: "onNodeDbClick" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tree-view-container\">\n  @if ((item().childrens && !isLoading()) || (item()[hasChildField()] && !isLoading())) {\n    <i [class.ax-state-disabled]=\"item()[disableField()]\" (click)=\"handleArrowNodeClick()\" class=\"{{ arrowIcon() }}\"></i>\n  } @else if (isLoading()) {\n    <ax-loading></ax-loading>\n  } @else {\n    <i class=\"ax-icon\"></i>\n  }\n\n  <div class=\"ax-tree-view-items\">\n    <ng-content select=\"ax-check-box\"></ng-content>\n    <div\n      [class.ax-state-disabled]=\"item()[disableField()]\"\n      [axTooltip]=\"item().tooltip\"\n      axTooltipPlacement=\"end-bottom\"\n      (click)=\"handleTextClick(item())\"\n      (dblclick)=\"handleTextDbClick(item())\"\n      class=\"ax-tree-view-items-prefix noselect-tree-view\"\n      [class.ax-state-tree-view-active]=\"item().active\"\n    >\n      <ng-content select=\"ax-prefix\"></ng-content>\n      <ng-content select=\"ax-text\"></ng-content>\n      <ng-content select=\"ax-suffix\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<div class=\"{{ platformService.isRtl() ? 'ax-state-tree-view-rtl' : 'ax-state-tree-view-ltr' }}\" [@collapseExpand]=\"isExpanded() ? 'expanded' : 'collapsed'\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], animations: [
             trigger('collapseExpand', [
                 state('collapsed', style({
                     height: '0',
@@ -85,7 +85,7 @@ class AXTreeViewItemComponent extends NXComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-tree-view-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('collapseExpand', [
@@ -414,17 +414,17 @@ class AXTreeViewComponent extends NXComponent {
          */
         this.executorChanges.set(operation);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXTreeViewComponent, isStandalone: true, selector: "ax-tree-view", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, focusNodeEnabled: { classPropertyName: "focusNodeEnabled", publicName: "focusNodeEnabled", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, visibleField: { classPropertyName: "visibleField", publicName: "visibleField", isSignal: true, isRequired: false, transformFunction: null }, disableField: { classPropertyName: "disableField", publicName: "disableField", isSignal: true, isRequired: false, transformFunction: null }, hasChildField: { classPropertyName: "hasChildField", publicName: "hasChildField", isSignal: true, isRequired: false, transformFunction: null }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null }, expandBehavior: { classPropertyName: "expandBehavior", publicName: "expandBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChanged: "onSelectionChanged", onNodeClick: "onNodeClick", onCollapsedChanged: "onCollapsedChanged" }, usesInheritance: true, ngImport: i0, template: "@for (node of resolvedItems; track $index) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item[visibleField()] !== false) {\n    <ax-tree-view-item\n      [item]=\"item\"\n      [(isExpanded)]=\"item.isExpanded\"\n      [(isActive)]=\"item.active\"\n      [isLoading]=\"isNodeLoading(item.id)\"\n      [disableField]=\"disableField()\"\n      [hasChildField]=\"hasChildField()\"\n      [expandBehavior]=\"expandBehavior()\"\n      (onNodeExpand)=\"handleNodeExpandClick($event)\"\n      (onNodeClick)=\"handleNodeClick($event)\"\n      (onNodeDbClick)=\"handleNodeDbClick($event)\"\n      [executorChanges]=\"this.executorChanges()\"\n    >\n      @if (this.showCheckbox()) {\n        <ax-check-box\n          [disabled]=\"item[disableField()]\"\n          [indeterminate]=\"item.indeterminate\"\n          [(ngModel)]=\"item.selected\"\n          (onValueChanged)=\"handleNodeSelectionClick($event, item)\"\n        ></ax-check-box>\n      }\n      <ax-prefix>\n        @if (item[iconField()]) {\n          <ax-icon [icon]=\"item[iconField()]\"></ax-icon>\n        } @else {\n          <i></i>\n        }\n      </ax-prefix>\n      @if (item[textField()]) {\n        <ax-text>{{ item[textField()] }}</ax-text>\n      }\n\n      <ax-suffix></ax-suffix>\n      @for (child of item?.childrens; track $index) {\n        <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n      }\n    </ax-tree-view-item>\n  }\n</ng-template>\n", styles: ["ax-tree-view{--ax-comp-tree-view-arrow-size: .875rem;--ax-comp-tree-view-text-size: .875rem;--ax-comp-tree-view-active-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-tree-view-active-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-tree-view-hover-bg-color: var(--ax-sys-color-dark-surface)}ax-tree-view ax-tree-view-item ax-check-box{margin-inline-start:.5rem}ax-tree-view ax-tree-view-item .ax-tree-view-container{display:flex;align-items:center;margin-bottom:.125rem;cursor:pointer}ax-tree-view ax-tree-view-item .ax-tree-view-container ax-text{font-size:var(--ax-comp-tree-view-text-size)}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-checkbox-end-side{display:none!important}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-arrow{font-size:var(--ax-comp-tree-view-arrow-size)!important}ax-tree-view ax-tree-view-item .ax-tree-view-container ax-suffix:empty{display:none}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items{display:flex;align-items:center}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border-radius:.25rem;overflow-x:auto;margin-inline-start:.25rem}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix.noselect-tree-view{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix.ax-state-tree-view-active{background-color:rgba(var(--ax-comp-tree-view-active-bg-color));color:rgba(var(--ax-comp-tree-view-active-text-color))}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix:hover:not(.ax-state-tree-view-active){background-color:rgba(var(--ax-comp-tree-view-hover-bg-color))}ax-tree-view ax-tree-view-item .ax-state-tree-view-rtl{padding-inline-end:1rem}ax-tree-view ax-tree-view-item .ax-state-tree-view-ltr{padding-inline-start:1rem}ax-tree-view ax-tree-view-item .ax-state-disabled{cursor:not-allowed!important;opacity:.5!important}ax-tree-view ax-tree-view-item .arrow-container{position:relative;display:flex;align-items:center}ax-tree-view ax-tree-view-item .vertical-line{width:.125rem;height:100%;background-color:#ccc;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXTreeViewItemComponent, selector: "ax-tree-view-item", inputs: ["item", "isExpanded", "hasChildField", "isActive", "isLoading", "disableField", "expandIconField", "executorChanges", "expandBehavior"], outputs: ["onNodeExpand", "onNodeClick", "isExpandedChange", "isActiveChange", "onNodeDbClick"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXTreeViewComponent, isStandalone: true, selector: "ax-tree-view", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, focusNodeEnabled: { classPropertyName: "focusNodeEnabled", publicName: "focusNodeEnabled", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, visibleField: { classPropertyName: "visibleField", publicName: "visibleField", isSignal: true, isRequired: false, transformFunction: null }, disableField: { classPropertyName: "disableField", publicName: "disableField", isSignal: true, isRequired: false, transformFunction: null }, hasChildField: { classPropertyName: "hasChildField", publicName: "hasChildField", isSignal: true, isRequired: false, transformFunction: null }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null }, expandBehavior: { classPropertyName: "expandBehavior", publicName: "expandBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChanged: "onSelectionChanged", onNodeClick: "onNodeClick", onCollapsedChanged: "onCollapsedChanged" }, usesInheritance: true, ngImport: i0, template: "@for (node of resolvedItems; track $index) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item[visibleField()] !== false) {\n    <ax-tree-view-item\n      [item]=\"item\"\n      [(isExpanded)]=\"item.isExpanded\"\n      [(isActive)]=\"item.active\"\n      [isLoading]=\"isNodeLoading(item.id)\"\n      [disableField]=\"disableField()\"\n      [hasChildField]=\"hasChildField()\"\n      [expandBehavior]=\"expandBehavior()\"\n      (onNodeExpand)=\"handleNodeExpandClick($event)\"\n      (onNodeClick)=\"handleNodeClick($event)\"\n      (onNodeDbClick)=\"handleNodeDbClick($event)\"\n      [executorChanges]=\"this.executorChanges()\"\n    >\n      @if (this.showCheckbox()) {\n        <ax-check-box\n          [disabled]=\"item[disableField()]\"\n          [indeterminate]=\"item.indeterminate\"\n          [(ngModel)]=\"item.selected\"\n          (onValueChanged)=\"handleNodeSelectionClick($event, item)\"\n        ></ax-check-box>\n      }\n      <ax-prefix>\n        @if (item[iconField()]) {\n          <ax-icon [icon]=\"item[iconField()]\"></ax-icon>\n        } @else {\n          <i></i>\n        }\n      </ax-prefix>\n      @if (item[textField()]) {\n        <ax-text>{{ item[textField()] }}</ax-text>\n      }\n\n      <ax-suffix></ax-suffix>\n      @for (child of item?.childrens; track $index) {\n        <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n      }\n    </ax-tree-view-item>\n  }\n</ng-template>\n", styles: ["ax-tree-view{--ax-comp-tree-view-arrow-size: .875rem;--ax-comp-tree-view-text-size: .875rem;--ax-comp-tree-view-active-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-tree-view-active-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-tree-view-hover-bg-color: var(--ax-sys-color-dark-surface)}ax-tree-view ax-tree-view-item ax-check-box{margin-inline-start:.5rem}ax-tree-view ax-tree-view-item .ax-tree-view-container{display:flex;align-items:center;margin-bottom:.125rem;cursor:pointer}ax-tree-view ax-tree-view-item .ax-tree-view-container ax-text{font-size:var(--ax-comp-tree-view-text-size)}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-checkbox-end-side{display:none!important}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-arrow{font-size:var(--ax-comp-tree-view-arrow-size)!important}ax-tree-view ax-tree-view-item .ax-tree-view-container ax-suffix:empty{display:none}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items{display:flex;align-items:center}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border-radius:.25rem;overflow-x:auto;margin-inline-start:.25rem}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix.noselect-tree-view{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix.ax-state-tree-view-active{background-color:rgba(var(--ax-comp-tree-view-active-bg-color));color:rgba(var(--ax-comp-tree-view-active-text-color))}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix:hover:not(.ax-state-tree-view-active){background-color:rgba(var(--ax-comp-tree-view-hover-bg-color))}ax-tree-view ax-tree-view-item .ax-state-tree-view-rtl{padding-inline-end:1rem}ax-tree-view ax-tree-view-item .ax-state-tree-view-ltr{padding-inline-start:1rem}ax-tree-view ax-tree-view-item .ax-state-disabled{cursor:not-allowed!important;opacity:.5!important}ax-tree-view ax-tree-view-item .arrow-container{position:relative;display:flex;align-items:center}ax-tree-view ax-tree-view-item .vertical-line{width:.125rem;height:100%;background-color:#ccc;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXTreeViewItemComponent, selector: "ax-tree-view-item", inputs: ["item", "isExpanded", "hasChildField", "isActive", "isLoading", "disableField", "expandIconField", "executorChanges", "expandBehavior"], outputs: ["onNodeExpand", "onNodeClick", "isExpandedChange", "isActiveChange", "onNodeDbClick"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-tree-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, AXTreeViewItemComponent, AXCheckBoxComponent, FormsModule, AXDecoratorGenericComponent, AXDecoratorIconComponent], template: "@for (node of resolvedItems; track $index) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item[visibleField()] !== false) {\n    <ax-tree-view-item\n      [item]=\"item\"\n      [(isExpanded)]=\"item.isExpanded\"\n      [(isActive)]=\"item.active\"\n      [isLoading]=\"isNodeLoading(item.id)\"\n      [disableField]=\"disableField()\"\n      [hasChildField]=\"hasChildField()\"\n      [expandBehavior]=\"expandBehavior()\"\n      (onNodeExpand)=\"handleNodeExpandClick($event)\"\n      (onNodeClick)=\"handleNodeClick($event)\"\n      (onNodeDbClick)=\"handleNodeDbClick($event)\"\n      [executorChanges]=\"this.executorChanges()\"\n    >\n      @if (this.showCheckbox()) {\n        <ax-check-box\n          [disabled]=\"item[disableField()]\"\n          [indeterminate]=\"item.indeterminate\"\n          [(ngModel)]=\"item.selected\"\n          (onValueChanged)=\"handleNodeSelectionClick($event, item)\"\n        ></ax-check-box>\n      }\n      <ax-prefix>\n        @if (item[iconField()]) {\n          <ax-icon [icon]=\"item[iconField()]\"></ax-icon>\n        } @else {\n          <i></i>\n        }\n      </ax-prefix>\n      @if (item[textField()]) {\n        <ax-text>{{ item[textField()] }}</ax-text>\n      }\n\n      <ax-suffix></ax-suffix>\n      @for (child of item?.childrens; track $index) {\n        <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n      }\n    </ax-tree-view-item>\n  }\n</ng-template>\n", styles: ["ax-tree-view{--ax-comp-tree-view-arrow-size: .875rem;--ax-comp-tree-view-text-size: .875rem;--ax-comp-tree-view-active-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-tree-view-active-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-tree-view-hover-bg-color: var(--ax-sys-color-dark-surface)}ax-tree-view ax-tree-view-item ax-check-box{margin-inline-start:.5rem}ax-tree-view ax-tree-view-item .ax-tree-view-container{display:flex;align-items:center;margin-bottom:.125rem;cursor:pointer}ax-tree-view ax-tree-view-item .ax-tree-view-container ax-text{font-size:var(--ax-comp-tree-view-text-size)}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-checkbox-end-side{display:none!important}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-arrow{font-size:var(--ax-comp-tree-view-arrow-size)!important}ax-tree-view ax-tree-view-item .ax-tree-view-container ax-suffix:empty{display:none}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items{display:flex;align-items:center}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border-radius:.25rem;overflow-x:auto;margin-inline-start:.25rem}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix.noselect-tree-view{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix.ax-state-tree-view-active{background-color:rgba(var(--ax-comp-tree-view-active-bg-color));color:rgba(var(--ax-comp-tree-view-active-text-color))}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix:hover:not(.ax-state-tree-view-active){background-color:rgba(var(--ax-comp-tree-view-hover-bg-color))}ax-tree-view ax-tree-view-item .ax-state-tree-view-rtl{padding-inline-end:1rem}ax-tree-view ax-tree-view-item .ax-state-tree-view-ltr{padding-inline-start:1rem}ax-tree-view ax-tree-view-item .ax-state-disabled{cursor:not-allowed!important;opacity:.5!important}ax-tree-view ax-tree-view-item .arrow-container{position:relative;display:flex;align-items:center}ax-tree-view ax-tree-view-item .vertical-line{width:.125rem;height:100%;background-color:#ccc;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}\n"] }]
         }] });
 
 class AXTreeViewModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewModule, imports: [CommonModule,
             AXCommonModule,
             AXDecoratorModule,
             AXCheckBoxModule,
@@ -434,7 +434,7 @@ class AXTreeViewModule {
             AXLoadingModule,
             AXTreeViewComponent,
             AXTreeViewItemComponent], exports: [AXTreeViewComponent, AXTreeViewItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewModule, imports: [CommonModule,
             AXCommonModule,
             AXDecoratorModule,
             AXCheckBoxModule,
@@ -445,7 +445,7 @@ class AXTreeViewModule {
             AXTreeViewComponent,
             AXTreeViewItemComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/acorex-components-uploader.mjs

@@ -222,10 +222,10 @@ class AXUploaderService {
         currentValue = currentValue.filter((c) => c != item);
         this.files$.next(currentValue);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -325,10 +325,10 @@ class AXUploaderZoneDirective {
     get __hostClass() {
         return `ax-drop-zone`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderZoneDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: AXUploaderZoneDirective, isStandalone: true, selector: "[axUploaderZone]", inputs: { multiple: "multiple", accept: "accept" }, outputs: { onChanged: "onChanged", onFileUploadComplete: "onFileUploadComplete", onFilesUploadComplete: "onFilesUploadComplete" }, host: { properties: { "class": "this.__hostClass" } }, providers: [AXUnsubscriber], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderZoneDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: AXUploaderZoneDirective, isStandalone: true, selector: "[axUploaderZone]", inputs: { multiple: "multiple", accept: "accept" }, outputs: { onChanged: "onChanged", onFileUploadComplete: "onFileUploadComplete", onFilesUploadComplete: "onFilesUploadComplete" }, host: { properties: { "class": "this.__hostClass" } }, providers: [AXUnsubscriber], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderZoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axUploaderZone]',
@@ -364,10 +364,10 @@ class AXUploaderBrowseDirective {
     async handleClick() {
         await this.uploaderZone.browser();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderBrowseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: AXUploaderBrowseDirective, isStandalone: true, selector: "[axUploaderBrowseHandle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderBrowseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: AXUploaderBrowseDirective, isStandalone: true, selector: "[axUploaderBrowseHandle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderBrowseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderBrowseDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axUploaderBrowseHandle]' }]
         }] });
@@ -381,10 +381,10 @@ class AXUploaderListComponent {
         /** @ignore */
         this.uploadService = inject(AXUploaderService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXUploaderListComponent, isStandalone: true, selector: "ax-uploader-list", ngImport: i0, template: "<!-- @if ((uploadService.totalEstimateTime | async) > 0) { -->\n<div class=\"ax-uploader-progress-status\" [class.ax-hide]=\"(uploadService.totalEstimateTime | async) <= 0\">\n  @if(uploadService.isAnyDetermined()){\n    <span>{{'processing' | translate| async}}</span>\n  }@else {\n    <div>{{ uploadService.totalEstimateTime | async | format: 'timeleft' | async }}</div>\n  }\n  <button (click)=\"uploadService.cancelAll()\">{{ 'cancel' | translate | async }}</button>\n</div>\n<!-- } -->\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\">\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 class=\"ax-status\">\n          @switch (item.status()) {\n            @case ('inprogress') {\n              <span>{{ item.size | format: 'filesize' | async }}</span> /  {{item.isDetermined()?( item.estimateTime() | format: 'timeleft' | async):('processing' | translate| async) }}\n            }\n            @case ('failed') {\n              <div class=\"ax-state-failed\">\n                <span>{{ item.message() }}</span>\n              </div>\n            }\n            @case ('completed') {\n              <div class=\"ax-state-completed\">\n                <span>{{'completed' | translate | async}}</span>\n              </div>\n            }\n          }\n        </div>\n      </div>\n      <div class=\"ax-status\">\n        @switch (item.status()) {\n          @case ('completed') {\n            <i class=\"ax-icon ax-icon-solid ax-icon-check-circle ax-state-completed\"></i>\n          }\n          @case ('canceled') {\n            <div>\n              <span class=\"ax-state-canceled\">{{ 'canceled' | translate | async }}</span>\n              <!-- <i class=\"ax-icon ax-icon-solid ax-icon-redo\" (click)=\"item.redo()\" title=\"{{ 'retry' | translate | async }}\"></i> -->\n            </div>\n          }\n          @case ('failed') {\n            <div class=\"ax-state-failed\">\n              <span>{{ 'failed' | translate | async }}</span>\n              <i class=\"ax-icon ax-icon-solid ax-icon-redo\" (click)=\"item.redo()\" title=\"{{ 'retry' | translate | async }}\"></i>\n            </div>\n          }\n          @default {\n            <!-- <ax-circular-progress\n              [mode]=\"item.isDetermined() ? 'determinate' : 'indeterminate'\"\n              [size]=\"22\"\n              [stroke]=\"6\"\n              [progress]=\"item.isDetermined() ? item.progress() : 60\"\n              class=\"ax-show\"\n            >\n            </ax-circular-progress> -->\n            <i class=\"ax-icon ax-icon-solid ax-icon-close\" (click)=\"item.cancel()\" title=\"{{ 'cancel' | translate | async }}\"></i>\n          }\n        }\n      </div>\n    </li>\n    @let completed = item.status() === 'completed';\n    @if (item.status() === 'inprogress' || completed) {\n      <div class=\"ax-status-loading\" [class.ax-status-loading-hide]=\"completed\">\n        <ax-progress-bar\n          [height]=\"4\"\n          [mode]=\"completed ? 'determinate' : 'indeterminate'\"\n          [progress]=\"completed ? 100 : 60\"\n          [color]=\"completed ? 'success' : 'primary'\"\n        ></ax-progress-bar>\n      </div>\n    }\n  }\n</ul>\n", styles: ["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-sys-color-primary-lightest-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface));padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-primary-lightest-surface));transition:.3s ease-out}ax-uploader-list .ax-uploader-progress-status.ax-hide{opacity:0;overflow:hidden;height:0;padding-top:0;padding-bottom:0;transition:.3s ease-out}ax-uploader-list .ax-uploader-list-items{max-height:75vh;width:100%;overflow-y:auto;overflow-x:hidden;gap:.5rem;display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li{display:flex;padding:.5rem 1rem;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;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-sys-color-on-surface),.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 span{color:rgba(var(--ax-sys-color-secondary-surface))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed{display:flex;align-items:center;gap:.5rem}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed span{color:rgba(var(--ax-sys-color-danger-surface))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed i{cursor:pointer}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-completed{color:rgba(var(--ax-sys-color-success-surface))}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-uploader-list .ax-uploader-list-items .ax-status-loading.ax-status-loading-hide{transition:all 1s linear;opacity:0;overflow:hidden}.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-sys-color-light-surface));background-color:rgba(var(--ax-sys-color-success-surface))!important}.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-sys-color-surface)) rgba(var(--ax-sys-color-surface)) rgba(var(--ax-sys-color-on-surface),.3) rgba(var(--ax-sys-color-on-surface),.3)}\n"], dependencies: [{ kind: "component", type: AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXUploaderListComponent, isStandalone: true, selector: "ax-uploader-list", ngImport: i0, template: "<!-- @if ((uploadService.totalEstimateTime | async) > 0) { -->\n<div class=\"ax-uploader-progress-status\" [class.ax-hide]=\"(uploadService.totalEstimateTime | async) <= 0\">\n  @if(uploadService.isAnyDetermined()){\n    <span>{{'processing' | translate| async}}</span>\n  }@else {\n    <div>{{ uploadService.totalEstimateTime | async | format: 'timeleft' | async }}</div>\n  }\n  <button (click)=\"uploadService.cancelAll()\">{{ 'cancel' | translate | async }}</button>\n</div>\n<!-- } -->\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\">\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 class=\"ax-status\">\n          @switch (item.status()) {\n            @case ('inprogress') {\n              <span>{{ item.size | format: 'filesize' | async }}</span> /  {{item.isDetermined()?( item.estimateTime() | format: 'timeleft' | async):('processing' | translate| async) }}\n            }\n            @case ('failed') {\n              <div class=\"ax-state-failed\">\n                <span>{{ item.message() }}</span>\n              </div>\n            }\n            @case ('completed') {\n              <div class=\"ax-state-completed\">\n                <span>{{'completed' | translate | async}}</span>\n              </div>\n            }\n          }\n        </div>\n      </div>\n      <div class=\"ax-status\">\n        @switch (item.status()) {\n          @case ('completed') {\n            <i class=\"ax-icon ax-icon-solid ax-icon-check-circle ax-state-completed\"></i>\n          }\n          @case ('canceled') {\n            <div>\n              <span class=\"ax-state-canceled\">{{ 'canceled' | translate | async }}</span>\n              <!-- <i class=\"ax-icon ax-icon-solid ax-icon-redo\" (click)=\"item.redo()\" title=\"{{ 'retry' | translate | async }}\"></i> -->\n            </div>\n          }\n          @case ('failed') {\n            <div class=\"ax-state-failed\">\n              <span>{{ 'failed' | translate | async }}</span>\n              <i class=\"ax-icon ax-icon-solid ax-icon-redo\" (click)=\"item.redo()\" title=\"{{ 'retry' | translate | async }}\"></i>\n            </div>\n          }\n          @default {\n            <!-- <ax-circular-progress\n              [mode]=\"item.isDetermined() ? 'determinate' : 'indeterminate'\"\n              [size]=\"22\"\n              [stroke]=\"6\"\n              [progress]=\"item.isDetermined() ? item.progress() : 60\"\n              class=\"ax-show\"\n            >\n            </ax-circular-progress> -->\n            <i class=\"ax-icon ax-icon-solid ax-icon-close\" (click)=\"item.cancel()\" title=\"{{ 'cancel' | translate | async }}\"></i>\n          }\n        }\n      </div>\n    </li>\n    @let completed = item.status() === 'completed';\n    @if (item.status() === 'inprogress' || completed) {\n      <div class=\"ax-status-loading\" [class.ax-status-loading-hide]=\"completed\">\n        <ax-progress-bar\n          [height]=\"4\"\n          [mode]=\"completed ? 'determinate' : 'indeterminate'\"\n          [progress]=\"completed ? 100 : 60\"\n          [color]=\"completed ? 'success' : 'primary'\"\n        ></ax-progress-bar>\n      </div>\n    }\n  }\n</ul>\n", styles: ["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-sys-color-primary-lightest-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface));padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-primary-lightest-surface));transition:.3s ease-out}ax-uploader-list .ax-uploader-progress-status.ax-hide{opacity:0;overflow:hidden;height:0;padding-top:0;padding-bottom:0;transition:.3s ease-out}ax-uploader-list .ax-uploader-list-items{max-height:75vh;width:100%;overflow-y:auto;overflow-x:hidden;gap:.5rem;display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li{display:flex;padding:.5rem 1rem;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;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-sys-color-on-surface),.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 span{color:rgba(var(--ax-sys-color-secondary-surface))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed{display:flex;align-items:center;gap:.5rem}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed span{color:rgba(var(--ax-sys-color-danger-surface))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed i{cursor:pointer}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-completed{color:rgba(var(--ax-sys-color-success-surface))}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-uploader-list .ax-uploader-list-items .ax-status-loading.ax-status-loading-hide{transition:all 1s linear;opacity:0;overflow:hidden}.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-sys-color-light-surface));background-color:rgba(var(--ax-sys-color-success-surface))!important}.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-sys-color-surface)) rgba(var(--ax-sys-color-surface)) rgba(var(--ax-sys-color-on-surface),.3) rgba(var(--ax-sys-color-on-surface),.3)}\n"], dependencies: [{ kind: "component", type: AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-uploader-list', encapsulation: ViewEncapsulation.None, imports: [AXProgressBarComponent, AsyncPipe, AXTranslatorPipe, AXFormatPipe], template: "<!-- @if ((uploadService.totalEstimateTime | async) > 0) { -->\n<div class=\"ax-uploader-progress-status\" [class.ax-hide]=\"(uploadService.totalEstimateTime | async) <= 0\">\n  @if(uploadService.isAnyDetermined()){\n    <span>{{'processing' | translate| async}}</span>\n  }@else {\n    <div>{{ uploadService.totalEstimateTime | async | format: 'timeleft' | async }}</div>\n  }\n  <button (click)=\"uploadService.cancelAll()\">{{ 'cancel' | translate | async }}</button>\n</div>\n<!-- } -->\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\">\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 class=\"ax-status\">\n          @switch (item.status()) {\n            @case ('inprogress') {\n              <span>{{ item.size | format: 'filesize' | async }}</span> /  {{item.isDetermined()?( item.estimateTime() | format: 'timeleft' | async):('processing' | translate| async) }}\n            }\n            @case ('failed') {\n              <div class=\"ax-state-failed\">\n                <span>{{ item.message() }}</span>\n              </div>\n            }\n            @case ('completed') {\n              <div class=\"ax-state-completed\">\n                <span>{{'completed' | translate | async}}</span>\n              </div>\n            }\n          }\n        </div>\n      </div>\n      <div class=\"ax-status\">\n        @switch (item.status()) {\n          @case ('completed') {\n            <i class=\"ax-icon ax-icon-solid ax-icon-check-circle ax-state-completed\"></i>\n          }\n          @case ('canceled') {\n            <div>\n              <span class=\"ax-state-canceled\">{{ 'canceled' | translate | async }}</span>\n              <!-- <i class=\"ax-icon ax-icon-solid ax-icon-redo\" (click)=\"item.redo()\" title=\"{{ 'retry' | translate | async }}\"></i> -->\n            </div>\n          }\n          @case ('failed') {\n            <div class=\"ax-state-failed\">\n              <span>{{ 'failed' | translate | async }}</span>\n              <i class=\"ax-icon ax-icon-solid ax-icon-redo\" (click)=\"item.redo()\" title=\"{{ 'retry' | translate | async }}\"></i>\n            </div>\n          }\n          @default {\n            <!-- <ax-circular-progress\n              [mode]=\"item.isDetermined() ? 'determinate' : 'indeterminate'\"\n              [size]=\"22\"\n              [stroke]=\"6\"\n              [progress]=\"item.isDetermined() ? item.progress() : 60\"\n              class=\"ax-show\"\n            >\n            </ax-circular-progress> -->\n            <i class=\"ax-icon ax-icon-solid ax-icon-close\" (click)=\"item.cancel()\" title=\"{{ 'cancel' | translate | async }}\"></i>\n          }\n        }\n      </div>\n    </li>\n    @let completed = item.status() === 'completed';\n    @if (item.status() === 'inprogress' || completed) {\n      <div class=\"ax-status-loading\" [class.ax-status-loading-hide]=\"completed\">\n        <ax-progress-bar\n          [height]=\"4\"\n          [mode]=\"completed ? 'determinate' : 'indeterminate'\"\n          [progress]=\"completed ? 100 : 60\"\n          [color]=\"completed ? 'success' : 'primary'\"\n        ></ax-progress-bar>\n      </div>\n    }\n  }\n</ul>\n", styles: ["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-sys-color-primary-lightest-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface));padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-primary-lightest-surface));transition:.3s ease-out}ax-uploader-list .ax-uploader-progress-status.ax-hide{opacity:0;overflow:hidden;height:0;padding-top:0;padding-bottom:0;transition:.3s ease-out}ax-uploader-list .ax-uploader-list-items{max-height:75vh;width:100%;overflow-y:auto;overflow-x:hidden;gap:.5rem;display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li{display:flex;padding:.5rem 1rem;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;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-sys-color-on-surface),.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 span{color:rgba(var(--ax-sys-color-secondary-surface))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed{display:flex;align-items:center;gap:.5rem}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed span{color:rgba(var(--ax-sys-color-danger-surface))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed i{cursor:pointer}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-completed{color:rgba(var(--ax-sys-color-success-surface))}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-uploader-list .ax-uploader-list-items .ax-status-loading.ax-status-loading-hide{transition:all 1s linear;opacity:0;overflow:hidden}.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-sys-color-light-surface));background-color:rgba(var(--ax-sys-color-success-surface))!important}.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-sys-color-surface)) rgba(var(--ax-sys-color-surface)) rgba(var(--ax-sys-color-on-surface),.3) rgba(var(--ax-sys-color-on-surface),.3)}\n"] }]
         }] });
@@ -420,8 +420,8 @@ class AXUploaderDialogContainerComponent {
     toggle() {
         this.isCollapsed = !this.isCollapsed;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXUploaderDialogContainerComponent, isStandalone: true, selector: "ax-uploader-dialog-container", ngImport: i0, template: "<div class=\"ax-uploader-list-header\">\n  <div>{{ 'Uploading' | translate | async }}</div>\n  <div>\n    <i\n      class=\"ax-icon\"\n      [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n      (click)=\"toggle()\"\n    ></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>\n", styles: ["ax-uploader-dialog-container{display:block;background-color:rgba(var(--ax-sys-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 #00000029;border:1px solid;border-color:rgba(var(--ax-sys-color-border-lightest-surface));outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-uploader-dialog-container .ax-uploader-list-header{display:flex;justify-content:space-between;background-color:rgba(var(--ax-sys-color-surface));padding:.75rem 1rem;font-weight:500;color:rgba(var(--ax-sys-color-surface-fore))}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon{margin-inline-start:.5rem;cursor:pointer}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon:hover{opacity:.75}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXUploaderListComponent, selector: "ax-uploader-list" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: AXUploaderDialogContainerComponent, isStandalone: true, selector: "ax-uploader-dialog-container", ngImport: i0, template: "<div class=\"ax-uploader-list-header\">\n  <div>{{ 'Uploading' | translate | async }}</div>\n  <div>\n    <i\n      class=\"ax-icon\"\n      [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n      (click)=\"toggle()\"\n    ></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>\n", styles: ["ax-uploader-dialog-container{display:block;background-color:rgba(var(--ax-sys-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 #00000029;border:1px solid;border-color:rgba(var(--ax-sys-color-border-lightest-surface));outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-uploader-dialog-container .ax-uploader-list-header{display:flex;justify-content:space-between;background-color:rgba(var(--ax-sys-color-surface));padding:.75rem 1rem;font-weight:500;color:rgba(var(--ax-sys-color-surface-fore))}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon{margin-inline-start:.5rem;cursor:pointer}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon:hover{opacity:.75}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXUploaderListComponent, selector: "ax-uploader-list" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], animations: [
             trigger('collapse', [
                 state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
                 state('true', style({ height: '0', visibility: 'hidden' })),
@@ -430,7 +430,7 @@ class AXUploaderDialogContainerComponent {
             ]),
         ], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderDialogContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderDialogContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-uploader-dialog-container', encapsulation: ViewEncapsulation.None, animations: [
                         trigger('collapse', [
@@ -454,10 +454,10 @@ class AXUploaderDropZoneComponent extends MXBaseComponent {
     preventRefresh() {
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderDropZoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXUploaderDropZoneComponent, isStandalone: true, selector: "ax-uploader-drop-zone", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-uploader-drop-zone-container\">\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>\n      {{ 'uploader.zone.drag' | translate | async }}\n      <a href=\"\" (click)=\"preventRefresh()\">\n        {{ 'uploader.zone.choose' | translate | async }}\n      </a>\n      {{ 'uploader.zone.to-upload' | translate | async }}\n    </span>\n    <!-- <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p> -->\n    @if (description()) {\n      <p>{{ description() }}</p>\n    }\n  </div>\n</div>\n", styles: ["ax-uploader-drop-zone{width:100%;height:100%;display:block;cursor:pointer}ax-uploader-drop-zone .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-sys-color-border-lightest-surface));pointer-events:none}ax-uploader-drop-zone .ax-uploader-drop-zone-container:hover{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}ax-uploader-drop-zone .ax-uploader-drop-zone-container ax-icon{font-size:1.875rem;line-height:2.25rem;color:#a3a3a3;width:1.75rem;height:2rem}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description{display:flex;flex-direction:column;gap:.5rem}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description a{color:rgba(var(--ax-sys-color-primary-surface))}ax-uploader-drop-zone .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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderDropZoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: AXUploaderDropZoneComponent, isStandalone: true, selector: "ax-uploader-drop-zone", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-uploader-drop-zone-container\">\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>\n      {{ 'uploader.zone.drag' | translate | async }}\n      <a href=\"\" (click)=\"preventRefresh()\">\n        {{ 'uploader.zone.choose' | translate | async }}\n      </a>\n      {{ 'uploader.zone.to-upload' | translate | async }}\n    </span>\n    <!-- <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p> -->\n    @if (description()) {\n      <p>{{ description() }}</p>\n    }\n  </div>\n</div>\n", styles: ["ax-uploader-drop-zone{width:100%;height:100%;display:block;cursor:pointer}ax-uploader-drop-zone .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-sys-color-border-lightest-surface));pointer-events:none}ax-uploader-drop-zone .ax-uploader-drop-zone-container:hover{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}ax-uploader-drop-zone .ax-uploader-drop-zone-container ax-icon{font-size:1.875rem;line-height:2.25rem;color:#a3a3a3;width:1.75rem;height:2rem}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description{display:flex;flex-direction:column;gap:.5rem}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description a{color:rgba(var(--ax-sys-color-primary-surface))}ax-uploader-drop-zone .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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderDropZoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderDropZoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-uploader-drop-zone', encapsulation: ViewEncapsulation.None, imports: [AXDecoratorIconComponent, AsyncPipe, AXTranslatorPipe], template: "<div class=\"ax-uploader-drop-zone-container\">\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>\n      {{ 'uploader.zone.drag' | translate | async }}\n      <a href=\"\" (click)=\"preventRefresh()\">\n        {{ 'uploader.zone.choose' | translate | async }}\n      </a>\n      {{ 'uploader.zone.to-upload' | translate | async }}\n    </span>\n    <!-- <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p> -->\n    @if (description()) {\n      <p>{{ description() }}</p>\n    }\n  </div>\n</div>\n", styles: ["ax-uploader-drop-zone{width:100%;height:100%;display:block;cursor:pointer}ax-uploader-drop-zone .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-sys-color-border-lightest-surface));pointer-events:none}ax-uploader-drop-zone .ax-uploader-drop-zone-container:hover{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}ax-uploader-drop-zone .ax-uploader-drop-zone-container ax-icon{font-size:1.875rem;line-height:2.25rem;color:#a3a3a3;width:1.75rem;height:2rem}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description{display:flex;flex-direction:column;gap:.5rem}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description a{color:rgba(var(--ax-sys-color-primary-surface))}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description p{font-size:.875rem;line-height:1.25rem;color:#a3a3a3}\n"] }]
         }] });
@@ -470,8 +470,8 @@ const COMPONENTS = [
     AXUploaderDialogContainerComponent,
 ];
 class AXUploaderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderModule, imports: [CommonModule,
             AXDecoratorModule,
             AXButtonModule,
             AXTranslationModule,
@@ -489,7 +489,7 @@ class AXUploaderModule {
             AXUploaderZoneDirective,
             AXUploaderBrowseDirective,
             AXUploaderDialogContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderModule, imports: [CommonModule,
             AXDecoratorModule,
             AXButtonModule,
             AXTranslationModule,
@@ -502,7 +502,7 @@ class AXUploaderModule {
             AXUploaderListComponent,
             AXUploaderDialogContainerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXUploaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXUploaderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/acorex-components-video-player.mjs

@@ -5,10 +5,10 @@ class AXVideoPlayerComponent {
     constructor() {
         this.src = input();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXVideoPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: AXVideoPlayerComponent, isStandalone: true, selector: "ax-video-player", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<video controls [src]=\"src()\"></video>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXVideoPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: AXVideoPlayerComponent, isStandalone: true, selector: "ax-video-player", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<video controls [src]=\"src()\"></video>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXVideoPlayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXVideoPlayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-video-player', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<video controls [src]=\"src()\"></video>\n" }]
         }] });
@@ -16,11 +16,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 const COMPONENT = [AXVideoPlayerComponent];
 const MODULES = [];
 class AXVideoPlayerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXVideoPlayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXVideoPlayerModule, imports: [AXVideoPlayerComponent], exports: [AXVideoPlayerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXVideoPlayerModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXVideoPlayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: AXVideoPlayerModule, imports: [AXVideoPlayerComponent], exports: [AXVideoPlayerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXVideoPlayerModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXVideoPlayerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXVideoPlayerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],