npm - @acorex/components - Versions diffs - 19.12.0 → 19.13.0-next.1 - Mend

@acorex/components 19.12.0 → 19.13.0-next.1

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

Files changed (145) hide show

package/fesm2022/acorex-components-circular-progress.mjs CHANGED Viewed

@@ -83,10 +83,10 @@ class AXCircularProgressComponent extends MXColorComponent {
             this.progress.set(65);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCircularProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.5", type: AXCircularProgressComponent, isStandalone: true, selector: "ax-circular-progress", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, stroke: { classPropertyName: "stroke", publicName: "stroke", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { progress: "progressChange", stroke: "strokeChange", size: "sizeChange" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-progress-circular ax-progress-{{mode()}}\" #circle>\n  <span class=\"ax-progress-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-circular-progress{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-primary-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-primary-surface), .25)}ax-circular-progress.ax-primary .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-primary-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-primary-surface), .25)}ax-circular-progress.ax-secondary .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-secondary-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-secondary-surface), .25)}ax-circular-progress.ax-success .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-success-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-success-surface), .25)}ax-circular-progress.ax-warning .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-warning-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-warning-surface), .25)}ax-circular-progress.ax-danger .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-danger-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-danger-surface), .25)}.ax-dark ax-circular-progress{--ax-comp-progress-circular-inside-bg-color: var(--ax-sys-color-darkest-surface)}ax-circular-progress .ax-progress-circular{width:var(--ax-comp-circular-progress-circle-size, 48px);height:var(--ax-comp-circular-progress-circle-size, 48px);border-radius:9999px;background:conic-gradient(var(--ax-comp-progress-circular-color) 0deg,var(--ax-comp-progress-circular-line-color) 0deg);position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress .ax-progress-circular:before{content:\"\";position:absolute;border-radius:9999px;width:var(--ax-comp-circular-progress-stroke-size, 44px);height:var(--ax-comp-circular-progress-stroke-size, 44px);background-color:rgba(var(--ax-comp-progress-circular-inside-bg-color, var(--ax-sys-color-lightest-surface)))}ax-circular-progress .ax-progress-circular .ax-progress-content{position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress .ax-progress-circular.ax-progress-indeterminate{animation-name:rotate;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:var(--ax-comp-circular-progress-animation-duration, 1.5s)}@keyframes rotate{0%{transform:rotate(-360deg)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCircularProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.8", type: AXCircularProgressComponent, isStandalone: true, selector: "ax-circular-progress", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, stroke: { classPropertyName: "stroke", publicName: "stroke", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { progress: "progressChange", stroke: "strokeChange", size: "sizeChange" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-progress-circular ax-progress-{{mode()}}\" #circle>\n  <span class=\"ax-progress-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-circular-progress{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-primary-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-primary-surface), .25)}ax-circular-progress.ax-primary .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-primary-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-primary-surface), .25)}ax-circular-progress.ax-secondary .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-secondary-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-secondary-surface), .25)}ax-circular-progress.ax-success .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-success-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-success-surface), .25)}ax-circular-progress.ax-warning .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-warning-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-warning-surface), .25)}ax-circular-progress.ax-danger .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-danger-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-danger-surface), .25)}.ax-dark ax-circular-progress{--ax-comp-progress-circular-inside-bg-color: var(--ax-sys-color-darkest-surface)}ax-circular-progress .ax-progress-circular{width:var(--ax-comp-circular-progress-circle-size, 48px);height:var(--ax-comp-circular-progress-circle-size, 48px);border-radius:9999px;background:conic-gradient(var(--ax-comp-progress-circular-color) 0deg,var(--ax-comp-progress-circular-line-color) 0deg);position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress .ax-progress-circular:before{content:\"\";position:absolute;border-radius:9999px;width:var(--ax-comp-circular-progress-stroke-size, 44px);height:var(--ax-comp-circular-progress-stroke-size, 44px);background-color:rgba(var(--ax-comp-progress-circular-inside-bg-color, var(--ax-sys-color-lightest-surface)))}ax-circular-progress .ax-progress-circular .ax-progress-content{position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress .ax-progress-circular.ax-progress-indeterminate{animation-name:rotate;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:var(--ax-comp-circular-progress-animation-duration, 1.5s)}@keyframes rotate{0%{transform:rotate(-360deg)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCircularProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCircularProgressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-circular-progress', inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<div class=\"ax-progress-circular ax-progress-{{mode()}}\" #circle>\n  <span class=\"ax-progress-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n\n<ng-content select=\"ax-suffix\"></ng-content>", styles: ["ax-circular-progress{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-primary-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-primary-surface), .25)}ax-circular-progress.ax-primary .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-primary-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-primary-surface), .25)}ax-circular-progress.ax-secondary .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-secondary-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-secondary-surface), .25)}ax-circular-progress.ax-success .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-success-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-success-surface), .25)}ax-circular-progress.ax-warning .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-warning-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-warning-surface), .25)}ax-circular-progress.ax-danger .ax-progress-circular{--ax-comp-progress-circular-color: rgba(var(--ax-sys-color-danger-surface));--ax-comp-progress-circular-line-color: rgba(var(--ax-sys-color-danger-surface), .25)}.ax-dark ax-circular-progress{--ax-comp-progress-circular-inside-bg-color: var(--ax-sys-color-darkest-surface)}ax-circular-progress .ax-progress-circular{width:var(--ax-comp-circular-progress-circle-size, 48px);height:var(--ax-comp-circular-progress-circle-size, 48px);border-radius:9999px;background:conic-gradient(var(--ax-comp-progress-circular-color) 0deg,var(--ax-comp-progress-circular-line-color) 0deg);position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress .ax-progress-circular:before{content:\"\";position:absolute;border-radius:9999px;width:var(--ax-comp-circular-progress-stroke-size, 44px);height:var(--ax-comp-circular-progress-stroke-size, 44px);background-color:rgba(var(--ax-comp-progress-circular-inside-bg-color, var(--ax-sys-color-lightest-surface)))}ax-circular-progress .ax-progress-circular .ax-progress-content{position:relative;display:flex;align-items:center;justify-content:center}ax-circular-progress .ax-progress-circular.ax-progress-indeterminate{animation-name:rotate;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:var(--ax-comp-circular-progress-animation-duration, 1.5s)}@keyframes rotate{0%{transform:rotate(-360deg)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { __hostClass: [{
@@ -95,11 +95,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             }] } });
 class AXCircularProgressModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCircularProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXCircularProgressModule, imports: [AXCircularProgressComponent], exports: [AXCircularProgressComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCircularProgressModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCircularProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: AXCircularProgressModule, imports: [AXCircularProgressComponent], exports: [AXCircularProgressComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCircularProgressModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCircularProgressModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCircularProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXCircularProgressComponent],

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

@@ -152,8 +152,8 @@ class AXCollapseComponent extends classes(MXInteractiveComponent, MXLookComponen
     get __hostClass() {
         return [`${this.disabled ? 'ax-state-disabled' : ''}`, `ax-${this.parent?.look ? this.parent.look : this.look}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCollapseComponent, deps: [{ token: i1.MXLookableComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXCollapseComponent, isStandalone: true, selector: "ax-collapse", inputs: { disabled: "disabled", look: "look", isCollapsed: "isCollapsed", showHeader: "showHeader", caption: "caption", icon: "icon", isLoading: "isLoading", headerTemplate: "headerTemplate" }, outputs: { onClick: "onClick", isCollapsedChange: "isCollapsedChange" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "@if (showHeader) {\n  <div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick($event)\">\n    @if (headerTemplate) {\n      <div class=\"ax-collapse-custom-header-container\">\n        <ng-container [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-collapse-header-container\">\n        <div class=\"ax-collapse-header-start\">\n          <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n          <span>\n            {{ caption }}\n          </span>\n        </div>\n        <div class=\"ax-collapse-header-end\">\n          @if (isLoading) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow\" [ngClass]=\"{ '-rotation-90': isCollapsed, 'rotation-90': !isCollapsed }\"></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n<div class=\"ax-collapse-body\" [@collapse]=\"isCollapsed\">\n  <div class=\"ax-collapse-body-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["ax-collapse-group ax-collapse.ax-solid{--ax-comp-collapse-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-collapse-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-collapse-border-width: 1px}.ax-dark ax-collapse-group ax-collapse.ax-solid{--ax-comp-collapse-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-collapse-border-color: var(--ax-sys-color-border-darkest-surface)}ax-collapse-group ax-collapse.ax-fill{--ax-comp-collapse-bg-color: var(--ax-sys-color-surface)}ax-collapse-group ax-collapse.ax-flat{--ax-comp-collapse-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-collapse-border-width: 1px}ax-collapse-group ax-collapse.ax-outline{--ax-comp-collapse-border-color: var(--ax-sys-color-border-surface);--ax-comp-collapse-border-width: 1px}ax-collapse-group ax-collapse{--ax-comp-collapse-margin: .5rem}ax-collapse,ax-collapse-group{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-collapse-group ax-collapse{margin-bottom:var(--ax-comp-collapse-margin)}ax-collapse-group ax-collapse.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-collapse-border-width);border-color:rgba(var(--ax-comp-collapse-border-color))}ax-collapse-group ax-collapse.ax-solid .ax-collapse-header{background-color:rgba(var(--ax-comp-collapse-bg-color))}ax-collapse-group ax-collapse.ax-fill .ax-collapse-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-collapse-bg-color))}ax-collapse-group ax-collapse.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-collapse-border-width);border-color:rgba(var(--ax-comp-collapse-border-color))}ax-collapse-group ax-collapse.ax-outline .ax-collapse-header{background-color:transparent}ax-collapse-group ax-collapse.ax-flat{border-bottom-width:var(--ax-comp-collapse-border-width);border-color:rgba(var(--ax-comp-collapse-border-color))}ax-collapse-group ax-collapse.ax-flat .ax-collapse-header{background-color:transparent}ax-collapse.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-surface-high))!important}ax-collapse .ax-collapse-header{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.75rem}ax-collapse .ax-collapse-header .ax-collapse-header-container{display:flex;justify-content:space-between}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start{display:flex;align-items:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start:not(:empty) .ax-collapse-header-icon{padding-inline-end:.5rem}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end .ax-collapse-arrow{transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);display:block}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end .ax-collapse-arrow.-rotation-90{transform:rotate(-90deg)}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end .ax-collapse-arrow.rotation-90{transform:rotate(90deg)}ax-collapse .ax-collapse-body .ax-collapse-body-content{padding:1rem;padding-inline-end:1rem;padding-inline-start:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCollapseComponent, deps: [{ token: i1.MXLookableComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: AXCollapseComponent, isStandalone: true, selector: "ax-collapse", inputs: { disabled: "disabled", look: "look", isCollapsed: "isCollapsed", showHeader: "showHeader", caption: "caption", icon: "icon", isLoading: "isLoading", headerTemplate: "headerTemplate" }, outputs: { onClick: "onClick", isCollapsedChange: "isCollapsedChange" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "@if (showHeader) {\n  <div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick($event)\">\n    @if (headerTemplate) {\n      <div class=\"ax-collapse-custom-header-container\">\n        <ng-container [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-collapse-header-container\">\n        <div class=\"ax-collapse-header-start\">\n          <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n          <span>\n            {{ caption }}\n          </span>\n        </div>\n        <div class=\"ax-collapse-header-end\">\n          @if (isLoading) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow\" [ngClass]=\"{ '-rotation-90': isCollapsed, 'rotation-90': !isCollapsed }\"></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n<div class=\"ax-collapse-body\" [@collapse]=\"isCollapsed\">\n  <div class=\"ax-collapse-body-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["ax-collapse-group ax-collapse.ax-solid{--ax-comp-collapse-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-collapse-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-collapse-border-width: 1px}.ax-dark ax-collapse-group ax-collapse.ax-solid{--ax-comp-collapse-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-collapse-border-color: var(--ax-sys-color-border-darkest-surface)}ax-collapse-group ax-collapse.ax-fill{--ax-comp-collapse-bg-color: var(--ax-sys-color-surface)}ax-collapse-group ax-collapse.ax-flat{--ax-comp-collapse-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-collapse-border-width: 1px}ax-collapse-group ax-collapse.ax-outline{--ax-comp-collapse-border-color: var(--ax-sys-color-border-surface);--ax-comp-collapse-border-width: 1px}ax-collapse-group ax-collapse{--ax-comp-collapse-margin: .5rem}ax-collapse,ax-collapse-group{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}ax-collapse-group ax-collapse{margin-bottom:var(--ax-comp-collapse-margin)}ax-collapse-group ax-collapse.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-collapse-border-width);border-color:rgba(var(--ax-comp-collapse-border-color))}ax-collapse-group ax-collapse.ax-solid .ax-collapse-header{background-color:rgba(var(--ax-comp-collapse-bg-color))}ax-collapse-group ax-collapse.ax-fill .ax-collapse-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-collapse-bg-color))}ax-collapse-group ax-collapse.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-collapse-border-width);border-color:rgba(var(--ax-comp-collapse-border-color))}ax-collapse-group ax-collapse.ax-outline .ax-collapse-header{background-color:transparent}ax-collapse-group ax-collapse.ax-flat{border-bottom-width:var(--ax-comp-collapse-border-width);border-color:rgba(var(--ax-comp-collapse-border-color))}ax-collapse-group ax-collapse.ax-flat .ax-collapse-header{background-color:transparent}ax-collapse.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-surface-high))!important}ax-collapse .ax-collapse-header{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.75rem}ax-collapse .ax-collapse-header .ax-collapse-header-container{display:flex;justify-content:space-between}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start{display:flex;align-items:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start:not(:empty) .ax-collapse-header-icon{padding-inline-end:.5rem}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end .ax-collapse-arrow{transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);display:block}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end .ax-collapse-arrow.-rotation-90{transform:rotate(-90deg)}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end .ax-collapse-arrow.rotation-90{transform:rotate(90deg)}ax-collapse .ax-collapse-body .ax-collapse-body-content{padding:1rem;padding-inline-end:1rem;padding-inline-start:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
             trigger('collapse', [
                 state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
                 state('true', style({ height: '0', visibility: 'hidden' })),
@@ -162,7 +162,7 @@ class AXCollapseComponent extends classes(MXInteractiveComponent, MXLookComponen
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCollapseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCollapseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-collapse', inputs: ['disabled', 'look'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [
                         trigger('collapse', [
@@ -324,15 +324,15 @@ class AXCollapseGroupComponent extends classes(MXBaseComponent, MXLookComponent)
     get __hostClass() {
         return ['ax-collapse-group', `ax-${this.look}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCollapseGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AXCollapseGroupComponent, isStandalone: true, selector: "ax-collapse-group", inputs: { look: "look", accordion: "accordion", activeIndex: "activeIndex" }, outputs: { accordionChange: "accordionChange", activeIndexChange: "activeIndexChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCollapseGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: AXCollapseGroupComponent, isStandalone: true, selector: "ax-collapse-group", inputs: { look: "look", accordion: "accordion", activeIndex: "activeIndex" }, outputs: { accordionChange: "accordionChange", activeIndexChange: "activeIndexChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: MXLookableComponent,
                 useExisting: AXCollapseGroupComponent,
             },
         ], queries: [{ propertyName: "_items", predicate: AXCollapseComponent }], usesInheritance: true, ngImport: i0, template: `<ng-content select="ax-collapse"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCollapseGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCollapseGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-collapse-group',
@@ -366,11 +366,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 const COMPONENT = [AXCollapseComponent, AXCollapseGroupComponent];
 const MODULES = [CommonModule, AXLoadingModule];
 class AXCollapseModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXCollapseModule, imports: [CommonModule, AXLoadingModule, AXCollapseComponent, AXCollapseGroupComponent], exports: [AXCollapseComponent, AXCollapseGroupComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCollapseModule, imports: [MODULES, AXCollapseComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: AXCollapseModule, imports: [CommonModule, AXLoadingModule, AXCollapseComponent, AXCollapseGroupComponent], exports: [AXCollapseComponent, AXCollapseGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCollapseModule, imports: [MODULES, AXCollapseComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCollapseModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCollapseModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

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

@@ -67,8 +67,8 @@ class AXColorBoxComponent extends classes(MXDropdownBoxBaseComponent, (MXInputBa
     internalValueChanged(value) {
         //this.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXColorBoxComponent, isStandalone: true, selector: "ax-color-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: AXColorBoxComponent, isStandalone: true, selector: "ax-color-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
             { provide: AXComponent, useExisting: AXColorBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXColorBoxComponent },
             { provide: AXValuableComponent, useExisting: AXColorBoxComponent },
@@ -80,7 +80,7 @@ class AXColorBoxComponent extends classes(MXDropdownBoxBaseComponent, (MXInputBa
             },
         ], viewQueries: [{ propertyName: "palettePicker", first: true, predicate: AXColorPalettePickerComponent, descendants: true, isSignal: true }, { propertyName: "picker", first: true, predicate: AXColorPalleteComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n  [look]=\"look\"\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-content\" (click)=\"_handleInputClickEvent($event)\" [tabindex]=\"tabIndex\">\n      @if (value && showBadge()) {\n        <div class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\n      } @else {\n        <div class=\"color-placeholder\">{{ placeholder }}</div>\n      }\n      @if (showValue()) {\n        <div class=\"color-value\">{{ value }}</div>\n      }\n    </div>\n    @if (showClearButton()) {\n      @if (value && !disabled && !readonly) {\n        <ng-content select=\"ax-clear-button\"></ng-content>\n      }\n    }\n    @if (showIcon()) {\n      <button\n        type=\"button\"\n        class=\"ax-editor-button\"\n        [tabIndex]=\"-1\"\n        [disabled]=\"disabled\"\n        (click)=\"_handleArrowClickEvent($event)\"\n      >\n        <span class=\"ax-icon ax-icon-color-palette\"></span>\n      </button>\n    }\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-color-palette\n      [ngModel]=\"value\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n    >\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-swatches></ax-color-palette-swatches>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </ng-container>\n</ax-dropdown-box>\n", styles: ["ax-color-box{--ax-comp-editor-decorator-button-x: 0;--ax-comp-editor-decorator-padding-x: 0;display:flex;flex:1 1 0%}ax-color-box .ax-editor-container{padding-inline-start:calc(var(--ax-comp-color-box-gap, .75rem) / 2);width:var(--ax-comp-color-box-width, 100%);font-size:var(--ax-comp-color-box-font-size, var(--ax-comp-editor-font-size))}ax-color-box .ax-editor-container .ax-content{gap:var(--ax-comp-color-box-gap, .75rem);display:flex;height:100%;flex:1 1 0%;align-items:center;outline-color:transparent}ax-color-box .ax-editor-container .ax-content .color-badge{width:var(--ax-comp-color-box-badge-width, 2.5rem);height:calc(100% - var(--ax-comp-color-box-gap, .75rem));display:block;border-radius:.25rem;border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface))}ax-color-box .ax-editor-container .ax-content .color-placeholder{font-size:inherit;font-weight:400;color:rgb(var(--ax-sys-color-input-text),.5)}ax-color-box .ax-editor-container .ax-content .color-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}ax-color-box .ax-editor-container .ax-clear-button{margin:0!important}\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { 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: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-box', inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'minValue', 'maxValue', 'value', 'state', 'name', 'id', 'type', 'look'], outputs: ['valueChange', 'stateChange', 'onValueChanged', 'onBlur', 'onFocus', 'readonlyChange', 'disabledChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXComponent, useExisting: AXColorBoxComponent },
@@ -112,11 +112,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 const COMPONENT = [AXColorBoxComponent];
 const MODULES = [CommonModule, FormsModule, AXColorPaletteModule, AXDropdownModule];
 class AXColorBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXColorBoxModule, imports: [CommonModule, FormsModule, AXColorPaletteModule, AXDropdownModule, AXColorBoxComponent], exports: [AXColorBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorBoxModule, imports: [MODULES, COMPONENT] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: AXColorBoxModule, imports: [CommonModule, FormsModule, AXColorPaletteModule, AXDropdownModule, AXColorBoxComponent], exports: [AXColorBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorBoxModule, imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-components-color-palette.mjs CHANGED Viewed

@@ -18,17 +18,17 @@ import { AXSliderModule } from '@acorex/components/slider';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 class AXColorPaletteParentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPaletteParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPaletteParentComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPaletteParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPaletteParentComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPaletteParentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPaletteParentComponent, decorators: [{
             type: Injectable
         }] });
 class AXColorPaletteChildComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPaletteChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPaletteChildComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPaletteChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPaletteChildComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPaletteChildComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPaletteChildComponent, decorators: [{
             type: Injectable
         }] });
 const AXDefaultColorPalette = [
@@ -430,8 +430,8 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
     get __hostClass() {
         return `ax-color-palette-input`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXColorPaletteInputComponent, isStandalone: true, selector: "ax-color-palette-input", host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: AXColorPaletteInputComponent, isStandalone: true, selector: "ax-color-palette-input", host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPaletteInputComponent,
@@ -439,7 +439,7 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
             AXUnsubscriber,
         ], usesInheritance: true, ngImport: i0, template: "<div class=\"palette-inputs ax-sm\">\n  <div class=\"select-box-container\">\n    <ax-select-box\n      [dataSource]=\"['hex', 'rgba']\"\n      [(ngModel)]=\"_colorMode\"\n      (ngModelChange)=\"_handleChangeInputMode()\"\n      [disabled]=\"_parent.disabled\"\n    >\n    </ax-select-box>\n  </div>\n  @switch (_colorMode) {\n    @case ('hex') {\n      <div>\n        <ax-text-box\n          [ngModel]=\"_hex\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          [state]=\"isValid ? 'clear' : 'error'\"\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\"\n          [mask-options]=\"_hexMaskOptions\"\n        >\n        </ax-text-box>\n      </div>\n    }\n    @case ('rgba') {\n      <div>\n        <ax-number-box\n          name=\"r\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.r\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"g\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.g\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"b\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.b\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"a\"\n          [minValue]=\"0\"\n          [maxValue]=\"1\"\n          [ngModel]=\"_rgba.a\"\n          [decimals]=\"2\"\n          [step]=\"0.1\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          [showSpinButtons]=\"false\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n    }\n  }\n</div>\n", styles: [".ax-bold{font-weight:700}\n"], dependencies: [{ kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "type", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -656,8 +656,8 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
     get __hostClass() {
         return `ax-color-palette-picker`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.5", type: AXColorPalettePickerComponent, isStandalone: true, selector: "ax-color-palette-picker", host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.8", type: AXColorPalettePickerComponent, isStandalone: true, selector: "ax-color-palette-picker", host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPalettePickerComponent,
@@ -665,7 +665,7 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
             AXUnsubscriber,
         ], viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true, isSignal: true }, { propertyName: "sample", first: true, predicate: ["sample"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-box-overlay-trans\">\n  <div class=\"ax-color-box-overlay\" [style.background-color]=\"_bgColor\" (pointerdown)=\"handleDown($event)\">\n    <div class=\"ax-color-box-overlay-g1\"></div>\n    <div class=\"ax-color-box-overlay-g2\"></div>\n    <div #circle class=\"ax-color-box-pointer\"></div>\n  </div>\n</div>\n<div class=\"ax-pickers-container\">\n  <div class=\"ax-slider-container\">\n    <ax-range-slider\n      [min]=\"0\"\n      [max]=\"99\"\n      [mode]=\"'single'\"\n      [ngModel]=\"_gradient\"\n      class=\"ax-color-box-gradient\"\n      [disabled]=\"_parent.disabled\"\n      [readonly]=\"_parent.readonly\"\n      (ngModelChange)=\"_handleGradientChanged($event)\"\n      [style.--ax-comp-range-slider-color]=\"colorBoxGradientBG()\"\n    >\n    </ax-range-slider>\n    <ax-range-slider\n      [min]=\"0\"\n      [max]=\"1\"\n      [step]=\"0.01\"\n      [ngModel]=\"_rgba.a\"\n      [disabled]=\"_parent.disabled\"\n      [readonly]=\"_parent.readonly\"\n      class=\"ax-color-box-transparent\"\n      (ngModelChange)=\"_handleAlphaChanged($event)\"\n      [style.--ax-comp-range-slider-color]=\"\n        colorBoxTransparentColor.r +\n        ',' +\n        colorBoxTransparentColor.g +\n        ',' +\n        colorBoxTransparentColor.b +\n        ',' +\n        colorBoxTransparentColor.a\n      \"\n      [style.--ax-comp-color-palette-transparent-color]=\"\n        'rgba(' +\n        colorBoxTransparentColor.r +\n        ',' +\n        colorBoxTransparentColor.g +\n        ',' +\n        colorBoxTransparentColor.b +\n        ')'\n      \"\n    >\n    </ax-range-slider>\n  </div>\n  <div class=\"ax-color-sample\" #sample></div>\n</div>\n", dependencies: [{ kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -723,8 +723,8 @@ class AXColorPalettePreviewComponent extends MXBaseComponent {
     get __hostClass() {
         return `ax-color-palette-preview`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i0.NgZone }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AXColorPalettePreviewComponent, isStandalone: true, selector: "ax-color-palette-preview", host: { properties: { "classs": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i0.NgZone }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: AXColorPalettePreviewComponent, isStandalone: true, selector: "ax-color-palette-preview", host: { properties: { "classs": "this.__hostClass" } }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPalettePreviewComponent,
@@ -732,7 +732,7 @@ class AXColorPalettePreviewComponent extends MXBaseComponent {
             AXUnsubscriber,
         ], usesInheritance: true, ngImport: i0, template: `<div class="palette-preview-overlay" [class.ax-state-disabled]="_parent.disabled"></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPalettePreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPalettePreviewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-color-palette-preview',
@@ -819,8 +819,8 @@ class AXColorPaletteSwatchesComponent extends MXBaseComponent {
             code: color.code.toLowerCase(),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXColorPaletteSwatchesComponent, isStandalone: true, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token: AXColorPaletteParentComponent }, { token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: AXColorPaletteSwatchesComponent, isStandalone: true, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPaletteSwatchesComponent,
@@ -837,7 +837,7 @@ class AXColorPaletteSwatchesComponent extends MXBaseComponent {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPaletteSwatchesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPaletteSwatchesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-color-palette-swatches, ax-color-palette-favorite',
@@ -880,8 +880,8 @@ class AXColorPalleteComponent extends MXValueComponent {
     get __hostDisabled() {
         return this.disabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPalleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXColorPalleteComponent, isStandalone: true, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", state: "state", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPalleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: AXColorPalleteComponent, isStandalone: true, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", state: "state", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [
             { provide: AXValuableComponent, useExisting: AXColorPalleteComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -894,7 +894,7 @@ class AXColorPalleteComponent extends MXValueComponent {
             },
         ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\n\n@if(_children?.length){\n<ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else{\n<ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n\n}\n<ng-template #custom>\n    <ng-content select='ax-color-palette-preview'></ng-content>\n    <ng-content select='ax-color-palette-picker'></ng-content>\n    <ng-content select='ax-color-palette-swatches'></ng-content>\n    <ng-content select='ax-color-palette-favorite'></ng-content>\n    <ng-content select='ax-color-palette-input'></ng-content>\n</ng-template>\n<ng-template #default>\n    <ax-color-palette-preview></ax-color-palette-preview>\n    <ax-color-palette-picker></ax-color-palette-picker>\n    <ax-color-palette-swatches></ax-color-palette-swatches>\n    <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select='ax-footer'></ng-content>", styles: ["ax-color-palette{display:flex;width:100%;flex-direction:column;padding:.5rem;gap:.5rem}@media (min-width: 768px){ax-color-palette{width:20rem}}ax-color-palette.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex}ax-color-palette ax-color-palette-preview{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;position:relative;height:6rem;width:100%;gap:.5rem}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;inset-inline-start:0px;display:flex;height:100%;width:100%;align-items:center;justify-content:center;border-bottom-width:1px;text-transform:uppercase}ax-color-palette ax-color-palette-favorite{display:block}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;max-height:9rem;grid-template-columns:repeat(11,minmax(0,1fr));gap:.5rem;overflow-y:auto;overflow-x:hidden;padding:.5rem;scrollbar-width:thin}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:before,ax-color-palette ax-color-palette-favorite div:after{content:\"\"}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{float:left;padding-top:100%}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{clear:both;display:block}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{border-color:rgba(var(--ax-sys-color-border-lighter-surface));border-width:2px}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs .select-box-container{width:fit-content}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:0;text-align:center}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{overflow:hidden;border-radius:.25rem;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);touch-action:none}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{position:relative;display:flex;height:8rem;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{position:relative;z-index:10;height:1rem;width:1rem;border-radius:9999px;border-width:.25rem;background-color:transparent;box-shadow:#00000080 0 0 5px;border-color:rgba(var(--ax-sys-color-light))}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{position:absolute;bottom:0;inset-inline-end:0px;inset-inline-start:0px;top:0;height:100%;width:100%}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{background:linear-gradient(to right,#fff,#fff0);z-index:0}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-pickers-container{gap:1rem;display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container{width:100%;gap:.5rem;display:flex;flex-direction:column}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider{--ax-comp-range-slider-ring-size: 0;--ax-comp-range-slider-bar-height: 1rem;--ax-comp-range-slider-handler-size: 1rem;--ax-comp-range-slider-ring-color: var(--ax-sys-color-border-surface);padding:0}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{border-width:.25rem;border-color:rgba(var(--ax-sys-color-light));box-shadow:#00000080 0 0 5px}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler:hover{box-shadow:#00000080 0 0 7px}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{background-image:linear-gradient(to right,rgba(255,255,255,0),var(--ax-comp-color-palette-transparent-color)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background:transparent!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-color-sample{width:var(--ax-comp-color-palette-color-sample-width, 3.5rem);border-radius:.25rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette', inputs: ['disabled', 'tabIndex', 'readonly', 'value', 'state', 'name', 'checked'], outputs: ['onBlur', 'onFocus', 'valueChange', 'stateChange', 'onValueChanged', 'readonlyChange', 'disabledChange'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXValuableComponent, useExisting: AXColorPalleteComponent },
@@ -936,8 +936,8 @@ const CONPONENTS = [
     AXColorPalettePickerComponent,
 ];
 class AXColorPaletteModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXColorPaletteModule, imports: [CommonModule, FormsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: AXColorPaletteModule, imports: [CommonModule, FormsModule,
             AXTextBoxModule,
             AXLabelModule,
             AXButtonModule,
@@ -955,11 +955,11 @@ class AXColorPaletteModule {
             AXColorPaletteSwatchesComponent,
             AXColorPaletteInputComponent,
             AXColorPalettePickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPaletteModule, imports: [CommonModule, MODULES, AXColorPalleteComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPaletteModule, imports: [CommonModule, MODULES, AXColorPalleteComponent,
             AXColorPaletteInputComponent,
             AXColorPalettePickerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXColorPaletteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXColorPaletteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ...MODULES, ...CONPONENTS],

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

@@ -35,10 +35,10 @@ class AXCommentContainerComponent {
             }, 1000);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCommentContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AXCommentContainerComponent, isStandalone: true, selector: "ax-comment-container", providers: [], ngImport: i0, template: "<ng-content> </ng-content>\n", styles: ["ax-comment-container{width:100%}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCommentContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: AXCommentContainerComponent, isStandalone: true, selector: "ax-comment-container", providers: [], ngImport: i0, template: "<ng-content> </ng-content>\n", styles: ["ax-comment-container{width:100%}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCommentContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCommentContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-comment-container', providers: [], encapsulation: ViewEncapsulation.None, template: "<ng-content> </ng-content>\n", styles: ["ax-comment-container{width:100%}\n"] }]
         }] });
@@ -66,10 +66,10 @@ class AxCommentItemComponent {
     toggleCollaps() {
         this.collaps().toggle();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AxCommentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AxCommentItemComponent, isStandalone: true, selector: "ax-comment-item", inputs: { replyCount: { classPropertyName: "replyCount", publicName: "replyCount", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "avatar", first: true, predicate: AXAvatarComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "collaps", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-comment-items\">\n  <div class=\"ax-header-container\">\n    <div class=\"ax-title-avatar-container\">\n      <ng-content select=\"ax-avatar\"></ng-content>\n      <ng-content select=\"ax-title\"></ng-content>\n      <ng-content select=\"ax-comment-date\"></ng-content>\n    </div>\n\n    <div>\n      <ng-content select=\"ax-comment-menu-options\"></ng-content>\n    </div>\n  </div>\n  <div class=\"ax-content-container\">\n    <ng-content select=\"ax-content\"></ng-content>\n    <div class=\"ax-reaction-container\">\n      <ng-content select=\"ax-comment-like\"></ng-content>\n      <ng-content select=\"ax-comment-reply-text\"></ng-content>\n    </div>\n  </div>\n  @if (replyCount()) {\n    <div class=\"ax-comment-replies\">\n      <ax-collapse-group look=\"none\" [accordion]=\"true\" [activeIndex]=\"1\">\n        <ax-collapse\n          #c\n          [caption]=\"\n            ('comment.view' | translate | async) + ' ' + replyCount() + ' ' + ((replyCount() > 1 ? 'comment.replies' : 'comment.reply') | translate | async)\n          \"\n          [isCollapsed]=\"true\"\n        >\n          <ng-content select=\"ax-comment-item\"></ng-content>\n          <ng-content select=\"ax-comment-reply-more\"></ng-content>\n        </ax-collapse>\n      </ax-collapse-group>\n    </div>\n  }\n</div>\n", styles: [".ax-comment-items{margin-bottom:.25rem}.ax-comment-items .ax-header-container{display:flex;align-items:center;justify-content:space-between}.ax-comment-items .ax-header-container .ax-title-avatar-container{display:flex;align-items:center}.ax-comment-items .ax-header-container ax-title{font-weight:500;padding:.5rem}.ax-comment-items .ax-content-container{margin-inline-start:3rem;display:flex;flex-direction:column;font-size:.875rem;opacity:80%}.ax-comment-items .ax-content-container .ax-reaction-container{margin-top:.75rem;display:flex}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like{margin-inline-end:1.5rem}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like,.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-reply,.ax-comment-items .ax-content-container .ax-reaction-container ax-text{cursor:pointer}.ax-comment-items .ax-comment-replies{margin-inline-start:2rem}.ax-comment-items .ax-comment-replies .ax-collapse-header-container{font-weight:500;justify-content:unset;color:rgba(var(--ax-sys-color-primary-surface))}.ax-comment-items .ax-comment-replies ax-comment-reply-more{cursor:pointer}\n"], dependencies: [{ kind: "component", type: AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "component", type: AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AxCommentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: AxCommentItemComponent, isStandalone: true, selector: "ax-comment-item", inputs: { replyCount: { classPropertyName: "replyCount", publicName: "replyCount", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "avatar", first: true, predicate: AXAvatarComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "collaps", first: true, predicate: ["c"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-comment-items\">\n  <div class=\"ax-header-container\">\n    <div class=\"ax-title-avatar-container\">\n      <ng-content select=\"ax-avatar\"></ng-content>\n      <ng-content select=\"ax-title\"></ng-content>\n      <ng-content select=\"ax-comment-date\"></ng-content>\n    </div>\n\n    <div>\n      <ng-content select=\"ax-comment-menu-options\"></ng-content>\n    </div>\n  </div>\n  <div class=\"ax-content-container\">\n    <ng-content select=\"ax-content\"></ng-content>\n    <div class=\"ax-reaction-container\">\n      <ng-content select=\"ax-comment-like\"></ng-content>\n      <ng-content select=\"ax-comment-reply-text\"></ng-content>\n    </div>\n  </div>\n  @if (replyCount()) {\n    <div class=\"ax-comment-replies\">\n      <ax-collapse-group look=\"none\" [accordion]=\"true\" [activeIndex]=\"1\">\n        <ax-collapse\n          #c\n          [caption]=\"\n            ('comment.view' | translate | async) + ' ' + replyCount() + ' ' + ((replyCount() > 1 ? 'comment.replies' : 'comment.reply') | translate | async)\n          \"\n          [isCollapsed]=\"true\"\n        >\n          <ng-content select=\"ax-comment-item\"></ng-content>\n          <ng-content select=\"ax-comment-reply-more\"></ng-content>\n        </ax-collapse>\n      </ax-collapse-group>\n    </div>\n  }\n</div>\n", styles: [".ax-comment-items{margin-bottom:.25rem}.ax-comment-items .ax-header-container{display:flex;align-items:center;justify-content:space-between}.ax-comment-items .ax-header-container .ax-title-avatar-container{display:flex;align-items:center}.ax-comment-items .ax-header-container ax-title{font-weight:500;padding:.5rem}.ax-comment-items .ax-content-container{margin-inline-start:3rem;display:flex;flex-direction:column;font-size:.875rem;opacity:80%}.ax-comment-items .ax-content-container .ax-reaction-container{margin-top:.75rem;display:flex}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like{margin-inline-end:1.5rem}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like,.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-reply,.ax-comment-items .ax-content-container .ax-reaction-container ax-text{cursor:pointer}.ax-comment-items .ax-comment-replies{margin-inline-start:2rem}.ax-comment-items .ax-comment-replies .ax-collapse-header-container{font-weight:500;justify-content:unset;color:rgba(var(--ax-sys-color-primary-surface))}.ax-comment-items .ax-comment-replies ax-comment-reply-more{cursor:pointer}\n"], dependencies: [{ kind: "component", type: AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: ["look", "accordion", "activeIndex"], outputs: ["accordionChange", "activeIndexChange"] }, { kind: "component", type: AXCollapseComponent, selector: "ax-collapse", inputs: ["disabled", "look", "isCollapsed", "showHeader", "caption", "icon", "isLoading", "headerTemplate"], outputs: ["onClick", "isCollapsedChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AxCommentItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AxCommentItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-comment-item', encapsulation: ViewEncapsulation.None, imports: [AXCollapseGroupComponent, AXCollapseComponent, AXTranslatorPipe, AsyncPipe], template: "<div class=\"ax-comment-items\">\n  <div class=\"ax-header-container\">\n    <div class=\"ax-title-avatar-container\">\n      <ng-content select=\"ax-avatar\"></ng-content>\n      <ng-content select=\"ax-title\"></ng-content>\n      <ng-content select=\"ax-comment-date\"></ng-content>\n    </div>\n\n    <div>\n      <ng-content select=\"ax-comment-menu-options\"></ng-content>\n    </div>\n  </div>\n  <div class=\"ax-content-container\">\n    <ng-content select=\"ax-content\"></ng-content>\n    <div class=\"ax-reaction-container\">\n      <ng-content select=\"ax-comment-like\"></ng-content>\n      <ng-content select=\"ax-comment-reply-text\"></ng-content>\n    </div>\n  </div>\n  @if (replyCount()) {\n    <div class=\"ax-comment-replies\">\n      <ax-collapse-group look=\"none\" [accordion]=\"true\" [activeIndex]=\"1\">\n        <ax-collapse\n          #c\n          [caption]=\"\n            ('comment.view' | translate | async) + ' ' + replyCount() + ' ' + ((replyCount() > 1 ? 'comment.replies' : 'comment.reply') | translate | async)\n          \"\n          [isCollapsed]=\"true\"\n        >\n          <ng-content select=\"ax-comment-item\"></ng-content>\n          <ng-content select=\"ax-comment-reply-more\"></ng-content>\n        </ax-collapse>\n      </ax-collapse-group>\n    </div>\n  }\n</div>\n", styles: [".ax-comment-items{margin-bottom:.25rem}.ax-comment-items .ax-header-container{display:flex;align-items:center;justify-content:space-between}.ax-comment-items .ax-header-container .ax-title-avatar-container{display:flex;align-items:center}.ax-comment-items .ax-header-container ax-title{font-weight:500;padding:.5rem}.ax-comment-items .ax-content-container{margin-inline-start:3rem;display:flex;flex-direction:column;font-size:.875rem;opacity:80%}.ax-comment-items .ax-content-container .ax-reaction-container{margin-top:.75rem;display:flex}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like{margin-inline-end:1.5rem}.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-like,.ax-comment-items .ax-content-container .ax-reaction-container ax-comment-reply,.ax-comment-items .ax-content-container .ax-reaction-container ax-text{cursor:pointer}.ax-comment-items .ax-comment-replies{margin-inline-start:2rem}.ax-comment-items .ax-comment-replies .ax-collapse-header-container{font-weight:500;justify-content:unset;color:rgba(var(--ax-sys-color-primary-surface))}.ax-comment-items .ax-comment-replies ax-comment-reply-more{cursor:pointer}\n"] }]
         }], ctorParameters: () => [] });
@@ -80,10 +80,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  * @category Components
  */
 class AXCommentDateComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCommentDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AXCommentDateComponent, isStandalone: true, selector: "ax-comment-date", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["ax-comment-date{color:rgb(var(--ax-sys-color-ghost-400));font-size:.8rem}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCommentDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: AXCommentDateComponent, isStandalone: true, selector: "ax-comment-date", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["ax-comment-date{color:rgb(var(--ax-sys-color-ghost-400));font-size:.8rem}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCommentDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCommentDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-comment-date', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["ax-comment-date{color:rgb(var(--ax-sys-color-ghost-400));font-size:.8rem}\n"] }]
         }] });
@@ -105,10 +105,10 @@ class AXCommentLikeComponent {
         this.liked.update((prev) => !prev);
         this.onLiked.emit(this.liked());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCommentLikeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.5", type: AXCommentLikeComponent, isStandalone: true, selector: "ax-comment-like", inputs: { liked: { classPropertyName: "liked", publicName: "liked", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { liked: "likedChange", onLiked: "onLiked" }, ngImport: i0, template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"liked()\" (click)=\"changeState()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><ng-content></ng-content></ax-text>\n</div>\n", styles: [".ax-comment-like-container{display:flex;align-items:center;gap:.25rem}.ax-comment-like-container ax-icon{font-size:.938rem}.ax-comment-like-container.ax-state-liked{color:rgba(var(--ax-sys-color-danger-500))}.ax-comment-like-container.ax-state-liked ax-icon{font-weight:700}.ax-comment-like-container.ax-state-liked ax-text{color:rgba(var(--ax-sys-color-danger-500))}\n"], dependencies: [{ kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCommentLikeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: AXCommentLikeComponent, isStandalone: true, selector: "ax-comment-like", inputs: { liked: { classPropertyName: "liked", publicName: "liked", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { liked: "likedChange", onLiked: "onLiked" }, ngImport: i0, template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"liked()\" (click)=\"changeState()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><ng-content></ng-content></ax-text>\n</div>\n", styles: [".ax-comment-like-container{display:flex;align-items:center;gap:.25rem}.ax-comment-like-container ax-icon{font-size:.938rem}.ax-comment-like-container.ax-state-liked{color:rgba(var(--ax-sys-color-danger-500))}.ax-comment-like-container.ax-state-liked ax-icon{font-weight:700}.ax-comment-like-container.ax-state-liked ax-text{color:rgba(var(--ax-sys-color-danger-500))}\n"], dependencies: [{ kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCommentLikeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCommentLikeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-comment-like', imports: [AXDecoratorIconComponent, AXDecoratorGenericComponent], template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"liked()\" (click)=\"changeState()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><ng-content></ng-content></ax-text>\n</div>\n", styles: [".ax-comment-like-container{display:flex;align-items:center;gap:.25rem}.ax-comment-like-container ax-icon{font-size:.938rem}.ax-comment-like-container.ax-state-liked{color:rgba(var(--ax-sys-color-danger-500))}.ax-comment-like-container.ax-state-liked ax-icon{font-weight:700}.ax-comment-like-container.ax-state-liked ax-text{color:rgba(var(--ax-sys-color-danger-500))}\n"] }]
         }] });
@@ -119,28 +119,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  * @category Components
  */
 class AXMenuOptionsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXMenuOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AXMenuOptionsComponent, isStandalone: true, selector: "ax-comment-menu-options", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXMenuOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: AXMenuOptionsComponent, isStandalone: true, selector: "ax-comment-menu-options", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXMenuOptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXMenuOptionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-comment-menu-options', template: "<ng-content></ng-content>\n" }]
         }] });
 class AXCommentReplyMoreComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCommentReplyMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AXCommentReplyMoreComponent, isStandalone: true, selector: "ax-comment-reply-more", ngImport: i0, template: "<ax-text><ng-content></ng-content></ax-text>\n", dependencies: [{ 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCommentReplyMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: AXCommentReplyMoreComponent, isStandalone: true, selector: "ax-comment-reply-more", ngImport: i0, template: "<ax-text><ng-content></ng-content></ax-text>\n", dependencies: [{ 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCommentReplyMoreComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCommentReplyMoreComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-comment-reply-more', imports: [AXDecoratorGenericComponent], template: "<ax-text><ng-content></ng-content></ax-text>\n" }]
         }] });
 class AXCommentReplyTextComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCommentReplyTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AXCommentReplyTextComponent, isStandalone: true, selector: "ax-comment-reply-text", ngImport: i0, template: "<ax-text>Reply</ax-text>\n", dependencies: [{ 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCommentReplyTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: AXCommentReplyTextComponent, isStandalone: true, selector: "ax-comment-reply-text", ngImport: i0, template: "<ax-text>Reply</ax-text>\n", dependencies: [{ 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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCommentReplyTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCommentReplyTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-comment-reply-text', imports: [AXDecoratorGenericComponent], template: "<ax-text>Reply</ax-text>\n" }]
         }] });
@@ -150,10 +150,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  * @category Components
  */
 class AXCommentViewComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCommentViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AXCommentViewComponent, isStandalone: true, selector: "ax-comment-view", ngImport: i0, template: "<ng-content select=\"ax-comment-item\"></ng-content>\n", styles: ["ax-comment-view{border:1px solid rgb(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius);display:block;padding:1.5rem;margin-bottom:1rem}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCommentViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: AXCommentViewComponent, isStandalone: true, selector: "ax-comment-view", ngImport: i0, template: "<ng-content select=\"ax-comment-item\"></ng-content>\n", styles: ["ax-comment-view{border:1px solid rgb(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius);display:block;padding:1.5rem;margin-bottom:1rem}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCommentViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCommentViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-comment-view', encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-comment-item\"></ng-content>\n", styles: ["ax-comment-view{border:1px solid rgb(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius);display:block;padding:1.5rem;margin-bottom:1rem}\n"] }]
         }] });
@@ -170,8 +170,8 @@ const COMPONENT = [
 ];
 const MODULES = [AXDecoratorModule, AXWysiwygModule, AXCollapseModule, AXButtonModule, AXTextAreaModule, AXTranslationModule, CommonModule];
 class AXCommentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCommentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXCommentModule, imports: [AXDecoratorModule, AXWysiwygModule, AXCollapseModule, AXButtonModule, AXTextAreaModule, AXTranslationModule, CommonModule, AXCommentViewComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCommentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: AXCommentModule, imports: [AXDecoratorModule, AXWysiwygModule, AXCollapseModule, AXButtonModule, AXTextAreaModule, AXTranslationModule, CommonModule, AXCommentViewComponent,
             AXCommentContainerComponent,
             AxCommentItemComponent,
             AXCommentLikeComponent,
@@ -186,12 +186,12 @@ class AXCommentModule {
             AXCommentReplyTextComponent,
             AXCommentDateComponent,
             AXCommentReplyMoreComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCommentModule, imports: [MODULES, AxCommentItemComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCommentModule, imports: [MODULES, AxCommentItemComponent,
             AXCommentLikeComponent,
             AXCommentReplyTextComponent,
             AXCommentReplyMoreComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXCommentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXCommentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],