@acorex/components 7.0.35 → 7.0.37

package/esm2020/collapse/src/collapse.component.mjs

@@ -25,10 +25,10 @@ export class AXCollapseComponent extends AXBaseComponent {
     }
 }
 AXCollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXCollapseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXCollapseComponent, selector: "ax-collapse", inputs: { isCollapsed: "isCollapsed", caption: "caption" }, outputs: { isCollapsedChange: "isCollapsedChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick()\">\r\n    <ng-container *ngIf=\"headerTemplate;else header\">\r\n        <div class=\"ax-collapse-custom-header-container\">\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #header>\r\n        <div class=\"ax-collapse-header-container\">\r\n            <span>{{caption}}</span>\r\n            <!-- <span class=\"ax-icon ax-icon-chevron-down ax-collapse-arrow\"\r\n                [ngClass]=\"{'ax-icon-chevron-up': !isCollapsed,'ax-icon-chevrop-down': isCollapsed}\"></span> -->\r\n\r\n                <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow ax-transition-all\" [ngClass]=\"{'-ax-rotation-90': isCollapsed, 'ax-rotation-90':!isCollapsed}\"></span>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"ax-collapse-body\" *ngIf=\"!isCollapsed\">\r\n    <ng-content></ng-content>\r\n</div>", styles: ["ax-collapse,ax-collapse-group{display:block;border:1px solid;border-color:rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);overflow:hidden;font-size:1rem}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{color:rgb(var(--ax-color-text-default));padding:.75rem}ax-collapse .ax-collapse-header{background-color:rgba(var(--ax-color-ghost),.05);cursor:pointer;-webkit-user-select:none;user-select:none}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-arrow{font-size:1.5rem}ax-collapse-group ax-collapse{border:0!important;border-radius:0!important}ax-collapse-group ax-collapse:not(ax-collapse-group ax-collapse:last-child){border-bottom:1px solid!important;border-color:rgb(var(--ax-color-border-default))!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXCollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXCollapseComponent, selector: "ax-collapse", inputs: { isCollapsed: "isCollapsed", caption: "caption" }, outputs: { isCollapsedChange: "isCollapsedChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick()\">\r\n    <ng-container *ngIf=\"headerTemplate;else header\">\r\n        <div class=\"ax-collapse-custom-header-container\">\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #header>\r\n        <div class=\"ax-collapse-header-container\">\r\n            <span>{{caption}}</span>\r\n            <!-- <span class=\"ax-icon ax-icon-chevron-down ax-collapse-arrow\"\r\n                [ngClass]=\"{'ax-icon-chevron-up': !isCollapsed,'ax-icon-chevrop-down': isCollapsed}\"></span> -->\r\n\r\n                <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow ax-transition-all\" [ngClass]=\"{'-ax-rotation-90': isCollapsed, 'ax-rotation-90':!isCollapsed}\"></span>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"ax-collapse-body\" *ngIf=\"!isCollapsed\">\r\n    <ng-content></ng-content>\r\n</div>", styles: ["ax-collapse,ax-collapse-group{display:block;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);overflow:hidden;font-size:1rem}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{color:rgba(var(--ax-color-text-default));padding:.75rem}ax-collapse .ax-collapse-header{background-color:rgba(var(--ax-color-on-surface));cursor:pointer;-webkit-user-select:none;user-select:none}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-arrow{font-size:1.5rem}ax-collapse-group ax-collapse{border:0!important;border-radius:0!important}ax-collapse-group ax-collapse:not(ax-collapse-group ax-collapse:last-child){border-bottom:1px solid!important;border-color:rgba(var(--ax-color-border-default))!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXCollapseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-collapse', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick()\">\r\n    <ng-container *ngIf=\"headerTemplate;else header\">\r\n        <div class=\"ax-collapse-custom-header-container\">\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #header>\r\n        <div class=\"ax-collapse-header-container\">\r\n            <span>{{caption}}</span>\r\n            <!-- <span class=\"ax-icon ax-icon-chevron-down ax-collapse-arrow\"\r\n                [ngClass]=\"{'ax-icon-chevron-up': !isCollapsed,'ax-icon-chevrop-down': isCollapsed}\"></span> -->\r\n\r\n                <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow ax-transition-all\" [ngClass]=\"{'-ax-rotation-90': isCollapsed, 'ax-rotation-90':!isCollapsed}\"></span>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"ax-collapse-body\" *ngIf=\"!isCollapsed\">\r\n    <ng-content></ng-content>\r\n</div>", styles: ["ax-collapse,ax-collapse-group{display:block;border:1px solid;border-color:rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);overflow:hidden;font-size:1rem}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{color:rgb(var(--ax-color-text-default));padding:.75rem}ax-collapse .ax-collapse-header{background-color:rgba(var(--ax-color-ghost),.05);cursor:pointer;-webkit-user-select:none;user-select:none}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-arrow{font-size:1.5rem}ax-collapse-group ax-collapse{border:0!important;border-radius:0!important}ax-collapse-group ax-collapse:not(ax-collapse-group ax-collapse:last-child){border-bottom:1px solid!important;border-color:rgb(var(--ax-color-border-default))!important}\n"] }]
+            args: [{ selector: 'ax-collapse', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick()\">\r\n    <ng-container *ngIf=\"headerTemplate;else header\">\r\n        <div class=\"ax-collapse-custom-header-container\">\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #header>\r\n        <div class=\"ax-collapse-header-container\">\r\n            <span>{{caption}}</span>\r\n            <!-- <span class=\"ax-icon ax-icon-chevron-down ax-collapse-arrow\"\r\n                [ngClass]=\"{'ax-icon-chevron-up': !isCollapsed,'ax-icon-chevrop-down': isCollapsed}\"></span> -->\r\n\r\n                <span class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow ax-transition-all\" [ngClass]=\"{'-ax-rotation-90': isCollapsed, 'ax-rotation-90':!isCollapsed}\"></span>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"ax-collapse-body\" *ngIf=\"!isCollapsed\">\r\n    <ng-content></ng-content>\r\n</div>", styles: ["ax-collapse,ax-collapse-group{display:block;border:1px solid;border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);overflow:hidden;font-size:1rem}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{color:rgba(var(--ax-color-text-default));padding:.75rem}ax-collapse .ax-collapse-header{background-color:rgba(var(--ax-color-on-surface));cursor:pointer;-webkit-user-select:none;user-select:none}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-arrow{font-size:1.5rem}ax-collapse-group ax-collapse{border:0!important;border-radius:0!important}ax-collapse-group ax-collapse:not(ax-collapse-group ax-collapse:last-child){border-bottom:1px solid!important;border-color:rgba(var(--ax-color-border-default))!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { isCollapsedChange: [{
                 type: Output
             }], isCollapsed: [{

package/esm2020/color-palette/src/color-palette.component.mjs

@@ -49,7 +49,7 @@ export class AXColorPalleteComponent extends AXBaseValueComponentMixin {
 AXColorPalleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXColorPalleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 AXColorPalleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", state: "state", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [
         { provide: AXColorComponent, useExisting: AXColorPalleteComponent },
-    ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgb(var(--ax-color-surface));border-color:rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}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{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}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{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-ghost),.86)}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.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 div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgb(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: i3.AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: i4.AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgba(var(--ax-color-surface));border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}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{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}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{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.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 div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgba(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: i3.AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: i4.AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette', inputs: [
@@ -63,7 +63,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                         'checked',
                     ], outputs: ['onBlur', 'onFocus', 'valueChange', 'stateChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXColorComponent, useExisting: AXColorPalleteComponent },
-                    ], template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgb(var(--ax-color-surface));border-color:rgb(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}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{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgb(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}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{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-ghost),.86)}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.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 div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgb(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"] }]
+                    ], template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\r\n\r\n<ng-template #custom>\r\n    <ng-content select='ax-color-palette-preview'></ng-content>\r\n    <ng-content select='ax-color-palette-picker'></ng-content>\r\n    <ng-content select='ax-color-palette-swatches'></ng-content>\r\n    <ng-content select='ax-color-palette-favorite'></ng-content>\r\n    <ng-content select='ax-color-palette-input'></ng-content>\r\n</ng-template>\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n\r\n<ng-content select='ax-footer'></ng-content>\r\n\r\n\r\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgba(var(--ax-color-surface));border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}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{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}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{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.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 div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgba(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _children: [{
                 type: ContentChildren,
                 args: [AXColorPaletteChildComponent]

package/esm2020/common/public-api.mjs

@@ -3,6 +3,7 @@ export * from './src/classes/drawing.class';
 export * from './src/classes/events.class';
 export * from './src/classes/styles.class';
 export * from './src/constant/positions';
+export * from './src/components';
 export * from './src/directives/auto-focus.directive';
 export * from './src/directives/debounce-time.directive';
 export * from './src/directives/hotkey.directive';
@@ -12,4 +13,4 @@ export * from './src/services/custom-cdk-overlay.service';
 export * from './src/services/hotkey.service';
 export * from './src/services/overlay.service';
 export * from './src/common.module';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Fjb3JleC9jb21wb25lbnRzL2NvbW1vbi9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsZ0NBQWdDLENBQUM7QUFDL0MsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLDRCQUE0QixDQUFDO0FBQzNDLGNBQWMsNEJBQTRCLENBQUM7QUFFM0MsY0FBYywwQkFBMEIsQ0FBQztBQUV6QyxjQUFjLHVDQUF1QyxDQUFDO0FBQ3RELGNBQWMsMENBQTBDLENBQUM7QUFDekQsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLDRDQUE0QyxDQUFDO0FBQzNELGNBQWMsdUNBQXVDLENBQUM7QUFFdEQsY0FBYywyQ0FBMkMsQ0FBQztBQUMxRCxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsZ0NBQWdDLENBQUM7QUFFL0MsY0FBYyxxQkFBcUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vc3JjL2NsYXNzZXMvY29tcG9uZW50cy5jbGFzcyc7XHJcbmV4cG9ydCAqIGZyb20gJy4vc3JjL2NsYXNzZXMvZHJhd2luZy5jbGFzcyc7XHJcbmV4cG9ydCAqIGZyb20gJy4vc3JjL2NsYXNzZXMvZXZlbnRzLmNsYXNzJztcclxuZXhwb3J0ICogZnJvbSAnLi9zcmMvY2xhc3Nlcy9zdHlsZXMuY2xhc3MnO1xyXG5cclxuZXhwb3J0ICogZnJvbSAnLi9zcmMvY29uc3RhbnQvcG9zaXRpb25zJztcclxuXHJcbmV4cG9ydCAqIGZyb20gJy4vc3JjL2RpcmVjdGl2ZXMvYXV0by1mb2N1cy5kaXJlY3RpdmUnO1xyXG5leHBvcnQgKiBmcm9tICcuL3NyYy9kaXJlY3RpdmVzL2RlYm91bmNlLXRpbWUuZGlyZWN0aXZlJztcclxuZXhwb3J0ICogZnJvbSAnLi9zcmMvZGlyZWN0aXZlcy9ob3RrZXkuZGlyZWN0aXZlJztcclxuZXhwb3J0ICogZnJvbSAnLi9zcmMvZGlyZWN0aXZlcy9pbmZpbml0ZS1zY3JvbGwuZGlyZWN0aXZlJztcclxuZXhwb3J0ICogZnJvbSAnLi9zcmMvZGlyZWN0aXZlcy9yZXNwb25zaXZlLmRpcmVjdGl2ZSc7XHJcblxyXG5leHBvcnQgKiBmcm9tICcuL3NyYy9zZXJ2aWNlcy9jdXN0b20tY2RrLW92ZXJsYXkuc2VydmljZSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vc3JjL3NlcnZpY2VzL2hvdGtleS5zZXJ2aWNlJztcclxuZXhwb3J0ICogZnJvbSAnLi9zcmMvc2VydmljZXMvb3ZlcmxheS5zZXJ2aWNlJztcclxuXHJcbmV4cG9ydCAqIGZyb20gJy4vc3JjL2NvbW1vbi5tb2R1bGUnO1xyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Fjb3JleC9jb21wb25lbnRzL2NvbW1vbi9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsZ0NBQWdDLENBQUM7QUFDL0MsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLDRCQUE0QixDQUFDO0FBQzNDLGNBQWMsNEJBQTRCLENBQUM7QUFFM0MsY0FBYywwQkFBMEIsQ0FBQztBQUN6QyxjQUFjLGtCQUFrQixDQUFDO0FBRWpDLGNBQWMsdUNBQXVDLENBQUM7QUFDdEQsY0FBYywwQ0FBMEMsQ0FBQztBQUN6RCxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsNENBQTRDLENBQUM7QUFDM0QsY0FBYyx1Q0FBdUMsQ0FBQztBQUV0RCxjQUFjLDJDQUEyQyxDQUFDO0FBQzFELGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYyxnQ0FBZ0MsQ0FBQztBQUUvQyxjQUFjLHFCQUFxQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9zcmMvY2xhc3Nlcy9jb21wb25lbnRzLmNsYXNzJztcclxuZXhwb3J0ICogZnJvbSAnLi9zcmMvY2xhc3Nlcy9kcmF3aW5nLmNsYXNzJztcclxuZXhwb3J0ICogZnJvbSAnLi9zcmMvY2xhc3Nlcy9ldmVudHMuY2xhc3MnO1xyXG5leHBvcnQgKiBmcm9tICcuL3NyYy9jbGFzc2VzL3N0eWxlcy5jbGFzcyc7XHJcblxyXG5leHBvcnQgKiBmcm9tICcuL3NyYy9jb25zdGFudC9wb3NpdGlvbnMnO1xyXG5leHBvcnQgKiBmcm9tICcuL3NyYy9jb21wb25lbnRzJztcclxuXHJcbmV4cG9ydCAqIGZyb20gJy4vc3JjL2RpcmVjdGl2ZXMvYXV0by1mb2N1cy5kaXJlY3RpdmUnO1xyXG5leHBvcnQgKiBmcm9tICcuL3NyYy9kaXJlY3RpdmVzL2RlYm91bmNlLXRpbWUuZGlyZWN0aXZlJztcclxuZXhwb3J0ICogZnJvbSAnLi9zcmMvZGlyZWN0aXZlcy9ob3RrZXkuZGlyZWN0aXZlJztcclxuZXhwb3J0ICogZnJvbSAnLi9zcmMvZGlyZWN0aXZlcy9pbmZpbml0ZS1zY3JvbGwuZGlyZWN0aXZlJztcclxuZXhwb3J0ICogZnJvbSAnLi9zcmMvZGlyZWN0aXZlcy9yZXNwb25zaXZlLmRpcmVjdGl2ZSc7XHJcblxyXG5leHBvcnQgKiBmcm9tICcuL3NyYy9zZXJ2aWNlcy9jdXN0b20tY2RrLW92ZXJsYXkuc2VydmljZSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vc3JjL3NlcnZpY2VzL2hvdGtleS5zZXJ2aWNlJztcclxuZXhwb3J0ICogZnJvbSAnLi9zcmMvc2VydmljZXMvb3ZlcmxheS5zZXJ2aWNlJztcclxuXHJcbmV4cG9ydCAqIGZyb20gJy4vc3JjL2NvbW1vbi5tb2R1bGUnO1xyXG4iXX0=

package/esm2020/common/src/components/base-component.class.mjs

@@ -0,0 +1,57 @@
+import { ChangeDetectorRef, ElementRef, inject } from "@angular/core";
+export class MXBaseComponent {
+    constructor() {
+        this._cdr = inject(ChangeDetectorRef);
+        this._elementRef = inject(ElementRef);
+    }
+    // constructor() {
+    //     this._cdr = );
+    //     this._elementRef = inject(ElementRef);
+    // }
+    get cdr() {
+        return this._cdr;
+    }
+    getHostElement() {
+        return this._elementRef.nativeElement;
+    }
+    onOptionChanging(option) {
+        return option?.value;
+    }
+    onOptionChanged(option) {
+    }
+    setOption(option) {
+        const oldValue = this[option.name];
+        const newValue = this.onOptionChanging({
+            name: option.name,
+            value: option.value,
+        });
+        //TODO : check real changes
+        if (option.beforeCallback)
+            option.beforeCallback(oldValue, newValue);
+        if (oldValue != newValue) {
+            this[`_${option.name}`] = option.value;
+            this.onOptionChanged({ name: option.name, newValue, oldValue });
+            const emitter = this[`${option.name}Change`];
+            emitter?.emit(newValue);
+        }
+        if (option.afterCallback)
+            option.afterCallback(oldValue, newValue);
+    }
+    get rtl() {
+        if (this._rtl)
+            return this._rtl;
+        else
+            return this.getHostElement()
+                .classList
+                .contains('ax-rtl') ||
+                window
+                    .getComputedStyle(this.getHostElement(), null)
+                    .getPropertyValue('direction') === 'rtl';
+    }
+    set rtl(value) {
+        this.setOption({ name: "rtl", value });
+    }
+}
+export const BASE_INPUTS = ['rtl'];
+export const BASE_OUTPUT = [];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzZS1jb21wb25lbnQuY2xhc3MuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hY29yZXgvY29tcG9uZW50cy9jb21tb24vc3JjL2NvbXBvbmVudHMvYmFzZS1jb21wb25lbnQuY2xhc3MudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFVBQVUsRUFBZ0IsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBZ0JwRixNQUFNLE9BQU8sZUFBZTtJQUE1QjtRQUlZLFNBQUksR0FBc0IsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFDcEQsZ0JBQVcsR0FBZSxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7SUEwRHpELENBQUM7SUF4REcsa0JBQWtCO0lBQ2xCLHFCQUFxQjtJQUNyQiw2Q0FBNkM7SUFDN0MsSUFBSTtJQUVKLElBQWMsR0FBRztRQUNiLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQztJQUNyQixDQUFDO0lBRU0sY0FBYztRQUNqQixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBa0IsQ0FBQztJQUMvQyxDQUFDO0lBRVMsZ0JBQWdCLENBQUMsTUFBaUM7UUFDeEQsT0FBTyxNQUFNLEVBQUUsS0FBSyxDQUFDO0lBQ3pCLENBQUM7SUFFUyxlQUFlLENBQUMsTUFBZ0M7SUFFMUQsQ0FBQztJQUVTLFNBQVMsQ0FBQyxNQUE0QjtRQUM1QyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ25DLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQztZQUNuQyxJQUFJLEVBQUUsTUFBTSxDQUFDLElBQUk7WUFDakIsS0FBSyxFQUFFLE1BQU0sQ0FBQyxLQUFLO1NBQ3RCLENBQUMsQ0FBQztRQUNILDJCQUEyQjtRQUMzQixJQUFJLE1BQU0sQ0FBQyxjQUFjO1lBQUUsTUFBTSxDQUFDLGNBQWMsQ0FBQyxRQUFRLEVBQUUsUUFBUSxDQUFDLENBQUM7UUFDckUsSUFBSSxRQUFRLElBQUksUUFBUSxFQUFFO1lBQ3RCLElBQUksQ0FBQyxJQUFJLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQyxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUM7WUFDdkMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLENBQUMsSUFBSSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDO1lBQ2hFLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxHQUFHLE1BQU0sQ0FBQyxJQUFJLFFBQVEsQ0FBc0IsQ0FBQztZQUNsRSxPQUFPLEVBQUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1NBQzNCO1FBQ0QsSUFBSSxNQUFNLENBQUMsYUFBYTtZQUFFLE1BQU0sQ0FBQyxhQUFhLENBQUMsUUFBUSxFQUFFLFFBQVEsQ0FBQyxDQUFDO0lBQ3ZFLENBQUM7SUFLRCxJQUFXLEdBQUc7UUFDVixJQUFJLElBQUksQ0FBQyxJQUFJO1lBQ1QsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDOztZQUVqQixPQUFPLElBQUksQ0FBQyxjQUFjLEVBQUU7aUJBQ3ZCLFNBQVM7aUJBQ1QsUUFBUSxDQUFDLFFBQVEsQ0FBQztnQkFDbkIsTUFBTTtxQkFDRCxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFLEVBQUUsSUFBSSxDQUFDO3FCQUM3QyxnQkFBZ0IsQ0FBQyxXQUFXLENBQUMsS0FBSyxLQUFLLENBQUM7SUFDekQsQ0FBQztJQUVELElBQVcsR0FBRyxDQUFDLEtBQWM7UUFDekIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztJQUMzQyxDQUFDO0NBQ0o7QUFJRCxNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztBQUNuQyxNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUcsRUFBRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0b3JSZWYsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgaW5qZWN0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuXHJcbmV4cG9ydCB0eXBlIE1YQ29tcG9uZW50T3B0aW9uQ2hhbmdpbmcgPSB7IG5hbWU6IHN0cmluZzsgdmFsdWU/OiBhbnkgfTtcclxuZXhwb3J0IHR5cGUgTVhDb21wb25lbnRPcHRpb25DaGFuZ2VkID0ge1xyXG4gICAgbmFtZTogc3RyaW5nO1xyXG4gICAgbmV3VmFsdWU/OiBhbnk7XHJcbiAgICBvbGRWYWx1ZT86IGFueTtcclxufTtcclxuZXhwb3J0IHR5cGUgTVhDb21wb25lbnRTZXRPcHRpb24gPSB7XHJcbiAgICBuYW1lOiBzdHJpbmc7XHJcbiAgICB2YWx1ZT86IGFueTtcclxuICAgIGFmdGVyQ2FsbGJhY2s/OiAob2xkVmFsdWU/OiBhbnksIG5ld1ZhbHVlPzogYW55KSA9PiB2b2lkO1xyXG4gICAgYmVmb3JlQ2FsbGJhY2s/OiAob2xkVmFsdWU/OiBhbnksIG5ld1ZhbHVlPzogYW55KSA9PiB2b2lkO1xyXG59O1xyXG5cclxuXHJcbmV4cG9ydCBjbGFzcyBNWEJhc2VDb21wb25lbnQge1xyXG5cclxuICAgIGlkOiBzdHJpbmc7XHJcblxyXG4gICAgcHJpdmF0ZSBfY2RyOiBDaGFuZ2VEZXRlY3RvclJlZiA9IGluamVjdChDaGFuZ2VEZXRlY3RvclJlZik7XHJcbiAgICBwcml2YXRlIF9lbGVtZW50UmVmOiBFbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xyXG5cclxuICAgIC8vIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgLy8gICAgIHRoaXMuX2NkciA9ICk7XHJcbiAgICAvLyAgICAgdGhpcy5fZWxlbWVudFJlZiA9IGluamVjdChFbGVtZW50UmVmKTtcclxuICAgIC8vIH1cclxuXHJcbiAgICBwcm90ZWN0ZWQgZ2V0IGNkcigpOiBDaGFuZ2VEZXRlY3RvclJlZiB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuX2NkcjtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgZ2V0SG9zdEVsZW1lbnQ8VCA9IEhUTUxFbGVtZW50PigpOiBUIHtcclxuICAgICAgICByZXR1cm4gdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50IGFzIFQ7XHJcbiAgICB9XHJcblxyXG4gICAgcHJvdGVjdGVkIG9uT3B0aW9uQ2hhbmdpbmcob3B0aW9uOiBNWENvbXBvbmVudE9wdGlvbkNoYW5naW5nKTogYW55IHtcclxuICAgICAgICByZXR1cm4gb3B0aW9uPy52YWx1ZTtcclxuICAgIH1cclxuXHJcbiAgICBwcm90ZWN0ZWQgb25PcHRpb25DaGFuZ2VkKG9wdGlvbjogTVhDb21wb25lbnRPcHRpb25DaGFuZ2VkKTogdm9pZCB7XHJcblxyXG4gICAgfVxyXG5cclxuICAgIHByb3RlY3RlZCBzZXRPcHRpb24ob3B0aW9uOiBNWENvbXBvbmVudFNldE9wdGlvbikge1xyXG4gICAgICAgIGNvbnN0IG9sZFZhbHVlID0gdGhpc1tvcHRpb24ubmFtZV07XHJcbiAgICAgICAgY29uc3QgbmV3VmFsdWUgPSB0aGlzLm9uT3B0aW9uQ2hhbmdpbmcoe1xyXG4gICAgICAgICAgICBuYW1lOiBvcHRpb24ubmFtZSxcclxuICAgICAgICAgICAgdmFsdWU6IG9wdGlvbi52YWx1ZSxcclxuICAgICAgICB9KTtcclxuICAgICAgICAvL1RPRE8gOiBjaGVjayByZWFsIGNoYW5nZXNcclxuICAgICAgICBpZiAob3B0aW9uLmJlZm9yZUNhbGxiYWNrKSBvcHRpb24uYmVmb3JlQ2FsbGJhY2sob2xkVmFsdWUsIG5ld1ZhbHVlKTtcclxuICAgICAgICBpZiAob2xkVmFsdWUgIT0gbmV3VmFsdWUpIHtcclxuICAgICAgICAgICAgdGhpc1tgXyR7b3B0aW9uLm5hbWV9YF0gPSBvcHRpb24udmFsdWU7XHJcbiAgICAgICAgICAgIHRoaXMub25PcHRpb25DaGFuZ2VkKHsgbmFtZTogb3B0aW9uLm5hbWUsIG5ld1ZhbHVlLCBvbGRWYWx1ZSB9KTtcclxuICAgICAgICAgICAgY29uc3QgZW1pdHRlciA9IHRoaXNbYCR7b3B0aW9uLm5hbWV9Q2hhbmdlYF0gYXMgRXZlbnRFbWl0dGVyPGFueT47XHJcbiAgICAgICAgICAgIGVtaXR0ZXI/LmVtaXQobmV3VmFsdWUpO1xyXG4gICAgICAgIH1cclxuICAgICAgICBpZiAob3B0aW9uLmFmdGVyQ2FsbGJhY2spIG9wdGlvbi5hZnRlckNhbGxiYWNrKG9sZFZhbHVlLCBuZXdWYWx1ZSk7XHJcbiAgICB9XHJcblxyXG5cclxuICAgIHByaXZhdGUgX3J0bDogYm9vbGVhbjtcclxuXHJcbiAgICBwdWJsaWMgZ2V0IHJ0bCgpOiBib29sZWFuIHtcclxuICAgICAgICBpZiAodGhpcy5fcnRsKVxyXG4gICAgICAgICAgICByZXR1cm4gdGhpcy5fcnRsO1xyXG4gICAgICAgIGVsc2VcclxuICAgICAgICAgICAgcmV0dXJuIHRoaXMuZ2V0SG9zdEVsZW1lbnQoKVxyXG4gICAgICAgICAgICAgICAgLmNsYXNzTGlzdFxyXG4gICAgICAgICAgICAgICAgLmNvbnRhaW5zKCdheC1ydGwnKSB8fFxyXG4gICAgICAgICAgICAgICAgd2luZG93XHJcbiAgICAgICAgICAgICAgICAgICAgLmdldENvbXB1dGVkU3R5bGUodGhpcy5nZXRIb3N0RWxlbWVudCgpLCBudWxsKVxyXG4gICAgICAgICAgICAgICAgICAgIC5nZXRQcm9wZXJ0eVZhbHVlKCdkaXJlY3Rpb24nKSA9PT0gJ3J0bCc7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIHNldCBydGwodmFsdWU6IGJvb2xlYW4pIHtcclxuICAgICAgICB0aGlzLnNldE9wdGlvbih7IG5hbWU6IFwicnRsXCIsIHZhbHVlIH0pO1xyXG4gICAgfVxyXG59XHJcblxyXG5cclxuXHJcbmV4cG9ydCBjb25zdCBCQVNFX0lOUFVUUyA9IFsncnRsJ107XHJcbmV4cG9ydCBjb25zdCBCQVNFX09VVFBVVCA9IFtdO1xyXG5cclxuXHJcblxyXG5cclxuXHJcbiJdfQ==

package/esm2020/common/src/components/button-base-component.class.mjs

@@ -0,0 +1,68 @@
+import { EventEmitter } from "@angular/core";
+import { classes } from "polytype";
+import { COLOR_LOOK_INPUTS, COLOR_LOOK_OUTPUT, MXColorLookComponent } from "./colorlook-component.class";
+import { INTERACTIVE_INPUTS, INTERACTIVE_OUTPUT, MXInteractiveComponent } from "./interactive-component.class";
+export class MXButtonBaseComponent extends classes(MXInteractiveComponent, MXColorLookComponent) {
+    constructor() {
+        super();
+        this.textChange = new EventEmitter();
+        this.toggleableChange = new EventEmitter();
+        this._toggleable = false;
+        this.selectedChange = new EventEmitter();
+        this._selected = false;
+    }
+    /**
+    *  Defines the primary text to show inside the button.
+    */
+    get text() {
+        return this._text;
+    }
+    set text(v) {
+        this.setOption({
+            name: 'text',
+            value: v,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    /**
+    *  Provides visual styling that indicates if the Button is active
+    */
+    get toggleable() {
+        return this._toggleable;
+    }
+    set toggleable(value) {
+        this.setOption({
+            name: 'toggleable',
+            value
+        });
+    }
+    /**
+    *  Indicates if the Button is selected or not
+    */
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        this.setOption({
+            name: 'selected',
+            value,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    get cssClasses() {
+        const cssClasses = {
+            'ax-button-icon': !this.text,
+            'ax-state-disabled': this["disabled"],
+            'ax-state-selected': this.selected
+        };
+        cssClasses[`ax-${this['color'] || 'default'}${this['look'] ? '-' + this['look'] : '-default'}`] = true;
+        return cssClasses;
+    }
+}
+export const BUTTON_INPUTS = ['text', 'toggleable', 'selected', ...INTERACTIVE_INPUTS, COLOR_LOOK_INPUTS];
+export const BUTTON_OUTPUT = ['textChange', 'toggleableChange', 'selectedChange', ...INTERACTIVE_OUTPUT, COLOR_LOOK_OUTPUT];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLWJhc2UtY29tcG9uZW50LmNsYXNzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWNvcmV4L2NvbXBvbmVudHMvY29tbW9uL3NyYy9jb21wb25lbnRzL2J1dHRvbi1iYXNlLWNvbXBvbmVudC5jbGFzcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzdDLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDbkMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLGlCQUFpQixFQUFFLG9CQUFvQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDekcsT0FBTyxFQUFFLGtCQUFrQixFQUFFLGtCQUFrQixFQUFFLHNCQUFzQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFFL0csTUFBTSxPQUFPLHFCQUNULFNBQ0EsT0FBTyxDQUFDLHNCQUFzQixFQUFFLG9CQUFvQixDQUFDO0lBeURyRDtRQUNJLEtBQUssRUFBRSxDQUFDO1FBdkRaLGVBQVUsR0FBeUIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQW9CdEQscUJBQWdCLEdBQTBCLElBQUksWUFBWSxFQUFFLENBQUM7UUFDckQsZ0JBQVcsR0FBYSxLQUFLLENBQUM7UUFldEMsbUJBQWMsR0FBMEIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNuRCxjQUFTLEdBQWEsS0FBSyxDQUFDO0lBbUJwQyxDQUFDO0lBdEREOztNQUVFO0lBQ0YsSUFBSSxJQUFJO1FBQ0osT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3RCLENBQUM7SUFDRCxJQUFJLElBQUksQ0FBQyxDQUFTO1FBQ2QsSUFBSSxDQUFDLFNBQVMsQ0FBQztZQUNYLElBQUksRUFBRSxNQUFNO1lBQ1osS0FBSyxFQUFFLENBQUM7WUFDUixhQUFhLEVBQUUsR0FBRyxFQUFFO2dCQUNoQixJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQzVCLENBQUM7U0FDSixDQUFDLENBQUE7SUFDTixDQUFDO0lBTUQ7O01BRUU7SUFDRixJQUFJLFVBQVU7UUFDVixPQUFPLElBQUksQ0FBQyxXQUFZLENBQUM7SUFDN0IsQ0FBQztJQUNELElBQUksVUFBVSxDQUFDLEtBQWM7UUFDekIsSUFBSSxDQUFDLFNBQVMsQ0FBQztZQUNYLElBQUksRUFBRSxZQUFZO1lBQ2xCLEtBQUs7U0FDUixDQUFDLENBQUM7SUFDUCxDQUFDO0lBS0Q7O01BRUU7SUFDRixJQUFJLFFBQVE7UUFDUixPQUFPLElBQUksQ0FBQyxTQUFVLENBQUM7SUFDM0IsQ0FBQztJQUNELElBQUksUUFBUSxDQUFDLEtBQWM7UUFDdkIsSUFBSSxDQUFDLFNBQVMsQ0FBQztZQUNYLElBQUksRUFBRSxVQUFVO1lBQ2hCLEtBQUs7WUFDTCxhQUFhLEVBQUUsR0FBRyxFQUFFO2dCQUNoQixJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQzVCLENBQUM7U0FDSixDQUFDLENBQUM7SUFDUCxDQUFDO0lBTUQsSUFBYyxVQUFVO1FBQ3BCLE1BQU0sVUFBVSxHQUFHO1lBQ2YsZ0JBQWdCLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSTtZQUM1QixtQkFBbUIsRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDO1lBQ3JDLG1CQUFtQixFQUFFLElBQUksQ0FBQyxRQUFRO1NBQ3JDLENBQUM7UUFDRixVQUFVLENBQUMsTUFBTSxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksU0FBUyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsVUFBVSxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUM7UUFDdkcsT0FBTyxVQUFVLENBQUM7SUFDdEIsQ0FBQztDQUNKO0FBR0QsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLENBQUMsTUFBTSxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsR0FBRyxrQkFBa0IsRUFBRSxpQkFBaUIsQ0FBQyxDQUFDO0FBQzFHLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxDQUFDLFlBQVksRUFBRSxrQkFBa0IsRUFBRSxnQkFBZ0IsRUFBRSxHQUFHLGtCQUFrQixFQUFFLGlCQUFpQixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBFdmVudEVtaXR0ZXIgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5pbXBvcnQgeyBjbGFzc2VzIH0gZnJvbSBcInBvbHl0eXBlXCI7XHJcbmltcG9ydCB7IENPTE9SX0xPT0tfSU5QVVRTLCBDT0xPUl9MT09LX09VVFBVVCwgTVhDb2xvckxvb2tDb21wb25lbnQgfSBmcm9tIFwiLi9jb2xvcmxvb2stY29tcG9uZW50LmNsYXNzXCI7XHJcbmltcG9ydCB7IElOVEVSQUNUSVZFX0lOUFVUUywgSU5URVJBQ1RJVkVfT1VUUFVULCBNWEludGVyYWN0aXZlQ29tcG9uZW50IH0gZnJvbSBcIi4vaW50ZXJhY3RpdmUtY29tcG9uZW50LmNsYXNzXCI7XHJcblxyXG5leHBvcnQgY2xhc3MgTVhCdXR0b25CYXNlQ29tcG9uZW50XHJcbiAgICBleHRlbmRzXHJcbiAgICBjbGFzc2VzKE1YSW50ZXJhY3RpdmVDb21wb25lbnQsIE1YQ29sb3JMb29rQ29tcG9uZW50KVxyXG57XHJcblxyXG4gICAgdGV4dENoYW5nZTogRXZlbnRFbWl0dGVyPHN0cmluZz4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgICBwcml2YXRlIF90ZXh0OiBzdHJpbmc7XHJcbiAgICAvKipcclxuICAgICogIERlZmluZXMgdGhlIHByaW1hcnkgdGV4dCB0byBzaG93IGluc2lkZSB0aGUgYnV0dG9uLlxyXG4gICAgKi9cclxuICAgIGdldCB0ZXh0KCk6IHN0cmluZyB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuX3RleHQ7XHJcbiAgICB9XHJcbiAgICBzZXQgdGV4dCh2OiBzdHJpbmcpIHtcclxuICAgICAgICB0aGlzLnNldE9wdGlvbih7XHJcbiAgICAgICAgICAgIG5hbWU6ICd0ZXh0JyxcclxuICAgICAgICAgICAgdmFsdWU6IHYsXHJcbiAgICAgICAgICAgIGFmdGVyQ2FsbGJhY2s6ICgpID0+IHtcclxuICAgICAgICAgICAgICAgIHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpO1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgfSlcclxuICAgIH1cclxuXHJcblxyXG5cclxuICAgIHRvZ2dsZWFibGVDaGFuZ2U6IEV2ZW50RW1pdHRlcjxib29sZWFuPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICAgIHByaXZhdGUgX3RvZ2dsZWFibGU/OiBib29sZWFuID0gZmFsc2U7XHJcbiAgICAvKipcclxuICAgICogIFByb3ZpZGVzIHZpc3VhbCBzdHlsaW5nIHRoYXQgaW5kaWNhdGVzIGlmIHRoZSBCdXR0b24gaXMgYWN0aXZlXHJcbiAgICAqL1xyXG4gICAgZ2V0IHRvZ2dsZWFibGUoKTogYm9vbGVhbiB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuX3RvZ2dsZWFibGUhO1xyXG4gICAgfVxyXG4gICAgc2V0IHRvZ2dsZWFibGUodmFsdWU6IGJvb2xlYW4pIHtcclxuICAgICAgICB0aGlzLnNldE9wdGlvbih7XHJcbiAgICAgICAgICAgIG5hbWU6ICd0b2dnbGVhYmxlJyxcclxuICAgICAgICAgICAgdmFsdWVcclxuICAgICAgICB9KTtcclxuICAgIH1cclxuXHJcblxyXG4gICAgc2VsZWN0ZWRDaGFuZ2U6IEV2ZW50RW1pdHRlcjxib29sZWFuPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICAgIHByaXZhdGUgX3NlbGVjdGVkPzogYm9vbGVhbiA9IGZhbHNlO1xyXG4gICAgLyoqXHJcbiAgICAqICBJbmRpY2F0ZXMgaWYgdGhlIEJ1dHRvbiBpcyBzZWxlY3RlZCBvciBub3RcclxuICAgICovXHJcbiAgICBnZXQgc2VsZWN0ZWQoKTogYm9vbGVhbiB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuX3NlbGVjdGVkITtcclxuICAgIH1cclxuICAgIHNldCBzZWxlY3RlZCh2YWx1ZTogYm9vbGVhbikge1xyXG4gICAgICAgIHRoaXMuc2V0T3B0aW9uKHtcclxuICAgICAgICAgICAgbmFtZTogJ3NlbGVjdGVkJyxcclxuICAgICAgICAgICAgdmFsdWUsXHJcbiAgICAgICAgICAgIGFmdGVyQ2FsbGJhY2s6ICgpID0+IHtcclxuICAgICAgICAgICAgICAgIHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpO1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgfSk7XHJcbiAgICB9XHJcblxyXG4gICAgY29uc3RydWN0b3IoKSB7XHJcbiAgICAgICAgc3VwZXIoKTtcclxuICAgIH1cclxuXHJcbiAgICBwcm90ZWN0ZWQgZ2V0IGNzc0NsYXNzZXMoKSB7XHJcbiAgICAgICAgY29uc3QgY3NzQ2xhc3NlcyA9IHtcclxuICAgICAgICAgICAgJ2F4LWJ1dHRvbi1pY29uJzogIXRoaXMudGV4dCxcclxuICAgICAgICAgICAgJ2F4LXN0YXRlLWRpc2FibGVkJzogdGhpc1tcImRpc2FibGVkXCJdLFxyXG4gICAgICAgICAgICAnYXgtc3RhdGUtc2VsZWN0ZWQnOiB0aGlzLnNlbGVjdGVkXHJcbiAgICAgICAgfTtcclxuICAgICAgICBjc3NDbGFzc2VzW2BheC0ke3RoaXNbJ2NvbG9yJ10gfHwgJ2RlZmF1bHQnfSR7dGhpc1snbG9vayddID8gJy0nICsgdGhpc1snbG9vayddIDogJy1kZWZhdWx0J31gXSA9IHRydWU7XHJcbiAgICAgICAgcmV0dXJuIGNzc0NsYXNzZXM7XHJcbiAgICB9XHJcbn1cclxuXHJcblxyXG5leHBvcnQgY29uc3QgQlVUVE9OX0lOUFVUUyA9IFsndGV4dCcsICd0b2dnbGVhYmxlJywgJ3NlbGVjdGVkJywgLi4uSU5URVJBQ1RJVkVfSU5QVVRTLCBDT0xPUl9MT09LX0lOUFVUU107XHJcbmV4cG9ydCBjb25zdCBCVVRUT05fT1VUUFVUID0gWyd0ZXh0Q2hhbmdlJywgJ3RvZ2dsZWFibGVDaGFuZ2UnLCAnc2VsZWN0ZWRDaGFuZ2UnLCAuLi5JTlRFUkFDVElWRV9PVVRQVVQsIENPTE9SX0xPT0tfT1VUUFVUXTsiXX0=

package/esm2020/common/src/components/color-component.class.mjs

@@ -0,0 +1,27 @@
+import { EventEmitter } from "@angular/core";
+import { BASE_INPUTS, BASE_OUTPUT, MXBaseComponent } from "./base-component.class";
+export class MXColorComponent extends MXBaseComponent {
+    constructor() {
+        super();
+        this.colorChange = new EventEmitter();
+        this._color = 'primary';
+    }
+    /**
+    *  Predefined color schemes
+    */
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        this.setOption({
+            name: 'color',
+            value,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            }
+        });
+    }
+}
+export const COLOR_INPUTS = ['color', ...BASE_INPUTS];
+export const COLOR_OUTPUT = ['colorChange', ...BASE_OUTPUT];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItY29tcG9uZW50LmNsYXNzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWNvcmV4L2NvbXBvbmVudHMvY29tbW9uL3NyYy9jb21wb25lbnRzL2NvbG9yLWNvbXBvbmVudC5jbGFzcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTdDLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLGVBQWUsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBRW5GLE1BQU0sT0FBTyxnQkFBaUIsU0FBUSxlQUFlO0lBRWpEO1FBQ0ksS0FBSyxFQUFFLENBQUM7UUFHWixnQkFBVyxHQUFtQyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ3pELFdBQU0sR0FBcUIsU0FBUyxDQUFDO0lBSDdDLENBQUM7SUFJRDs7TUFFRTtJQUNGLElBQUksS0FBSztRQUNMLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUN2QixDQUFDO0lBQ0QsSUFBSSxLQUFLLENBQUMsS0FBdUI7UUFDN0IsSUFBSSxDQUFDLFNBQVMsQ0FBQztZQUNYLElBQUksRUFBRSxPQUFPO1lBQ2IsS0FBSztZQUNMLGFBQWEsRUFBRSxHQUFHLEVBQUU7Z0JBQ2hCLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7WUFDNUIsQ0FBQztTQUNKLENBQUMsQ0FBQztJQUNQLENBQUM7Q0FDSjtBQUdELE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxDQUFDLE9BQU8sRUFBRSxHQUFHLFdBQVcsQ0FBQyxDQUFDO0FBQ3RELE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxDQUFDLGFBQWEsRUFBRSxHQUFHLFdBQVcsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRXZlbnRFbWl0dGVyIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHsgQVhTdHlsZUNvbG9yVHlwZSB9IGZyb20gXCIuLi9jbGFzc2VzL3N0eWxlcy5jbGFzc1wiO1xyXG5pbXBvcnQgeyBCQVNFX0lOUFVUUywgQkFTRV9PVVRQVVQsIE1YQmFzZUNvbXBvbmVudCB9IGZyb20gXCIuL2Jhc2UtY29tcG9uZW50LmNsYXNzXCI7XHJcblxyXG5leHBvcnQgY2xhc3MgTVhDb2xvckNvbXBvbmVudCBleHRlbmRzIE1YQmFzZUNvbXBvbmVudCB7XHJcblxyXG4gICAgY29uc3RydWN0b3IoKSB7XHJcbiAgICAgICAgc3VwZXIoKTtcclxuICAgIH1cclxuXHJcbiAgICBjb2xvckNoYW5nZTogRXZlbnRFbWl0dGVyPEFYU3R5bGVDb2xvclR5cGU+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gICAgcHJpdmF0ZSBfY29sb3I6IEFYU3R5bGVDb2xvclR5cGUgPSAncHJpbWFyeSc7XHJcbiAgICAvKipcclxuICAgICogIFByZWRlZmluZWQgY29sb3Igc2NoZW1lc1xyXG4gICAgKi9cclxuICAgIGdldCBjb2xvcigpOiBBWFN0eWxlQ29sb3JUeXBlIHtcclxuICAgICAgICByZXR1cm4gdGhpcy5fY29sb3I7XHJcbiAgICB9XHJcbiAgICBzZXQgY29sb3IodmFsdWU6IEFYU3R5bGVDb2xvclR5cGUpIHtcclxuICAgICAgICB0aGlzLnNldE9wdGlvbih7XHJcbiAgICAgICAgICAgIG5hbWU6ICdjb2xvcicsXHJcbiAgICAgICAgICAgIHZhbHVlLFxyXG4gICAgICAgICAgICBhZnRlckNhbGxiYWNrOiAoKSA9PiB7XHJcbiAgICAgICAgICAgICAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgIH0pO1xyXG4gICAgfVxyXG59XHJcblxyXG5cclxuZXhwb3J0IGNvbnN0IENPTE9SX0lOUFVUUyA9IFsnY29sb3InLCAuLi5CQVNFX0lOUFVUU107XHJcbmV4cG9ydCBjb25zdCBDT0xPUl9PVVRQVVQgPSBbJ2NvbG9yQ2hhbmdlJywgLi4uQkFTRV9PVVRQVVRdOyJdfQ==

package/esm2020/common/src/components/colorlook-component.class.mjs

@@ -0,0 +1,11 @@
+import { classes } from "polytype";
+import { COLOR_INPUTS, COLOR_OUTPUT, MXColorComponent } from "./color-component.class";
+import { LOOK_INPUTS, LOOK_OUTPUT, MXLookComponent } from "./look-component.class";
+export class MXColorLookComponent extends classes(MXColorComponent, MXLookComponent) {
+    constructor() {
+        super();
+    }
+}
+export const COLOR_LOOK_INPUTS = [...COLOR_INPUTS, ...LOOK_INPUTS];
+export const COLOR_LOOK_OUTPUT = [...COLOR_OUTPUT, ...LOOK_OUTPUT];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3Jsb29rLWNvbXBvbmVudC5jbGFzcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Fjb3JleC9jb21wb25lbnRzL2NvbW1vbi9zcmMvY29tcG9uZW50cy9jb2xvcmxvb2stY29tcG9uZW50LmNsYXNzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDbkMsT0FBTyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN2RixPQUFPLEVBQUUsV0FBVyxFQUFFLFdBQVcsRUFBRSxlQUFlLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUduRixNQUFNLE9BQU8sb0JBQ1QsU0FDQSxPQUFPLENBQUMsZ0JBQWdCLEVBQUUsZUFBZSxDQUFDO0lBRTFDO1FBQ0ksS0FBSyxFQUFFLENBQUM7SUFDWixDQUFDO0NBQ0o7QUFJRCxNQUFNLENBQUMsTUFBTSxpQkFBaUIsR0FBRyxDQUFDLEdBQUcsWUFBWSxFQUFFLEdBQUcsV0FBVyxDQUFDLENBQUM7QUFDbkUsTUFBTSxDQUFDLE1BQU0saUJBQWlCLEdBQUcsQ0FBQyxHQUFHLFlBQVksRUFBRSxHQUFHLFdBQVcsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY2xhc3NlcyB9IGZyb20gXCJwb2x5dHlwZVwiO1xyXG5pbXBvcnQgeyBDT0xPUl9JTlBVVFMsIENPTE9SX09VVFBVVCwgTVhDb2xvckNvbXBvbmVudCB9IGZyb20gXCIuL2NvbG9yLWNvbXBvbmVudC5jbGFzc1wiO1xyXG5pbXBvcnQgeyBMT09LX0lOUFVUUywgTE9PS19PVVRQVVQsIE1YTG9va0NvbXBvbmVudCB9IGZyb20gXCIuL2xvb2stY29tcG9uZW50LmNsYXNzXCI7XHJcblxyXG5cclxuZXhwb3J0IGNsYXNzIE1YQ29sb3JMb29rQ29tcG9uZW50XHJcbiAgICBleHRlbmRzXHJcbiAgICBjbGFzc2VzKE1YQ29sb3JDb21wb25lbnQsIE1YTG9va0NvbXBvbmVudClcclxue1xyXG4gICAgY29uc3RydWN0b3IoKSB7XHJcbiAgICAgICAgc3VwZXIoKTtcclxuICAgIH1cclxufVxyXG5cclxuXHJcblxyXG5leHBvcnQgY29uc3QgQ09MT1JfTE9PS19JTlBVVFMgPSBbLi4uQ09MT1JfSU5QVVRTLCAuLi5MT09LX0lOUFVUU107XHJcbmV4cG9ydCBjb25zdCBDT0xPUl9MT09LX09VVFBVVCA9IFsuLi5DT0xPUl9PVVRQVVQsIC4uLkxPT0tfT1VUUFVUXTsiXX0=

package/esm2020/common/src/components/index.mjs

@@ -0,0 +1,7 @@
+export * from './base-component.class';
+export * from './interactive-component.class';
+export * from './color-component.class';
+export * from './look-component.class';
+export * from './colorlook-component.class';
+export * from './button-base-component.class';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hY29yZXgvY29tcG9uZW50cy9jb21tb24vc3JjL2NvbXBvbmVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyx3QkFBd0IsQ0FBQztBQUN2QyxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyx3QkFBd0IsQ0FBQztBQUN2QyxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMsK0JBQStCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2Jhc2UtY29tcG9uZW50LmNsYXNzJztcclxuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmFjdGl2ZS1jb21wb25lbnQuY2xhc3MnO1xyXG5leHBvcnQgKiBmcm9tICcuL2NvbG9yLWNvbXBvbmVudC5jbGFzcyc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbG9vay1jb21wb25lbnQuY2xhc3MnO1xyXG5leHBvcnQgKiBmcm9tICcuL2NvbG9ybG9vay1jb21wb25lbnQuY2xhc3MnO1xyXG5leHBvcnQgKiBmcm9tICcuL2J1dHRvbi1iYXNlLWNvbXBvbmVudC5jbGFzcyc7Il19

package/esm2020/common/src/components/interactive-component.class.mjs

@@ -0,0 +1,62 @@
+import { AXHtmlUtil } from "@acorex/core/utils";
+import { coerceNumberProperty } from "@angular/cdk/coercion";
+import { EventEmitter } from "@angular/core";
+import { BASE_INPUTS, BASE_OUTPUT, MXBaseComponent } from "./base-component.class";
+export class MXInteractiveComponent extends MXBaseComponent {
+    constructor() {
+        super();
+        this._tabIndex = 0;
+        /**
+        *  Fires each time the component gets focused.
+        *  @event
+        */
+        this.onFocus = new EventEmitter();
+        /**
+        *  Fires each time the component gets blurred.
+        *  @event
+        */
+        this.onBlur = new EventEmitter();
+    }
+    /**
+    *  If set to true, it disables the component.
+    */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this.setOption({ name: "disabled", value });
+    }
+    /**
+    *  Specifies the tabindex of the component.
+    */
+    get tabIndex() { return this.disabled ? -1 : this._tabIndex; }
+    set tabIndex(value) {
+        this.setOption({ name: "tabIndex", value: value != null ? coerceNumberProperty(value) : 0 });
+    }
+    emitOnFocusEvent(e) {
+        this.onFocus.emit({
+            component: this,
+            htmlElement: this.getHostElement(),
+            nativeEvent: e
+        });
+    }
+    emitOnBlurEvent(e) {
+        this.onBlur.emit({
+            component: this,
+            htmlElement: this.getHostElement(),
+            nativeEvent: e
+        });
+    }
+    focus() {
+        AXHtmlUtil.focusElement(this.getHostElement());
+    }
+    /**
+    *  Check component is focused or has any focused element.
+    */
+    hasFocus() {
+        return AXHtmlUtil.hasFocus(this.getHostElement());
+    }
+}
+export const INTERACTIVE_INPUTS = ['disabled', 'tabIndex', ...BASE_INPUTS];
+export const INTERACTIVE_OUTPUT = ['onFocus', 'onBlur', ...BASE_OUTPUT];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW50ZXJhY3RpdmUtY29tcG9uZW50LmNsYXNzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWNvcmV4L2NvbXBvbmVudHMvY29tbW9uL3NyYy9jb21wb25lbnRzL2ludGVyYWN0aXZlLWNvbXBvbmVudC5jbGFzcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDaEQsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDN0QsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUU3QyxPQUFPLEVBQUUsV0FBVyxFQUFFLFdBQVcsRUFBRSxlQUFlLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUVuRixNQUFNLE9BQU8sc0JBQXVCLFNBQVEsZUFBZTtJQWtEdkQ7UUFDSSxLQUFLLEVBQUUsQ0FBQztRQXRDWixjQUFTLEdBQVcsQ0FBQyxDQUFDO1FBU3RCOzs7VUFHRTtRQUNGLFlBQU8sR0FBK0IsSUFBSSxZQUFZLEVBQWdCLENBQUM7UUFVdkU7OztVQUdFO1FBQ0YsV0FBTSxHQUErQixJQUFJLFlBQVksRUFBZ0IsQ0FBQztJQVl0RSxDQUFDO0lBakREOztNQUVFO0lBQ0YsSUFBVyxRQUFRO1FBQ2YsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQzFCLENBQUM7SUFDRCxJQUFJLFFBQVEsQ0FBQyxLQUFjO1FBQ3ZCLElBQUksQ0FBQyxTQUFTLENBQUMsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUE7SUFDL0MsQ0FBQztJQUdEOztNQUVFO0lBQ0YsSUFBSSxRQUFRLEtBQWEsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUM7SUFDdEUsSUFBSSxRQUFRLENBQUMsS0FBYTtRQUN0QixJQUFJLENBQUMsU0FBUyxDQUFDLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsS0FBSyxJQUFJLElBQUksQ0FBQyxDQUFDLENBQUMsb0JBQW9CLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUE7SUFDaEcsQ0FBQztJQVFTLGdCQUFnQixDQUFDLENBQWE7UUFDcEMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUM7WUFDZCxTQUFTLEVBQUUsSUFBSTtZQUNmLFdBQVcsRUFBRSxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ2xDLFdBQVcsRUFBRSxDQUFDO1NBQ2pCLENBQUMsQ0FBQztJQUNQLENBQUM7SUFRUyxlQUFlLENBQUMsQ0FBYTtRQUNuQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQztZQUNiLFNBQVMsRUFBRSxJQUFJO1lBQ2YsV0FBVyxFQUFFLElBQUksQ0FBQyxjQUFjLEVBQUU7WUFDbEMsV0FBVyxFQUFFLENBQUM7U0FDakIsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQU1ELEtBQUs7UUFDRCxVQUFVLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQyxDQUFDO0lBQ25ELENBQUM7SUFFRDs7TUFFRTtJQUNGLFFBQVE7UUFDSixPQUFPLFVBQVUsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDLENBQUM7SUFDdEQsQ0FBQztDQUNKO0FBSUQsTUFBTSxDQUFDLE1BQU0sa0JBQWtCLEdBQUcsQ0FBQyxVQUFVLEVBQUUsVUFBVSxFQUFFLEdBQUcsV0FBVyxDQUFDLENBQUM7QUFDM0UsTUFBTSxDQUFDLE1BQU0sa0JBQWtCLEdBQUcsQ0FBQyxTQUFTLEVBQUUsUUFBUSxFQUFFLEdBQUcsV0FBVyxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBWEh0bWxVdGlsIH0gZnJvbSBcIkBhY29yZXgvY29yZS91dGlsc1wiO1xyXG5pbXBvcnQgeyBjb2VyY2VOdW1iZXJQcm9wZXJ0eSB9IGZyb20gXCJAYW5ndWxhci9jZGsvY29lcmNpb25cIjtcclxuaW1wb3J0IHsgRXZlbnRFbWl0dGVyIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHsgQVhGb2N1c0V2ZW50IH0gZnJvbSBcIi4uL2NsYXNzZXMvZXZlbnRzLmNsYXNzXCI7XHJcbmltcG9ydCB7IEJBU0VfSU5QVVRTLCBCQVNFX09VVFBVVCwgTVhCYXNlQ29tcG9uZW50IH0gZnJvbSBcIi4vYmFzZS1jb21wb25lbnQuY2xhc3NcIjtcclxuXHJcbmV4cG9ydCBjbGFzcyBNWEludGVyYWN0aXZlQ29tcG9uZW50IGV4dGVuZHMgTVhCYXNlQ29tcG9uZW50IHtcclxuXHJcbiAgICBwcml2YXRlIF9kaXNhYmxlZDogYm9vbGVhbjtcclxuICAgIC8qKlxyXG4gICAgKiAgSWYgc2V0IHRvIHRydWUsIGl0IGRpc2FibGVzIHRoZSBjb21wb25lbnQuXHJcbiAgICAqL1xyXG4gICAgcHVibGljIGdldCBkaXNhYmxlZCgpOiBib29sZWFuIHtcclxuICAgICAgICByZXR1cm4gdGhpcy5fZGlzYWJsZWQ7XHJcbiAgICB9XHJcbiAgICBzZXQgZGlzYWJsZWQodmFsdWU6IGJvb2xlYW4pIHtcclxuICAgICAgICB0aGlzLnNldE9wdGlvbih7IG5hbWU6IFwiZGlzYWJsZWRcIiwgdmFsdWUgfSlcclxuICAgIH1cclxuXHJcbiAgICBfdGFiSW5kZXg6IG51bWJlciA9IDA7XHJcbiAgICAvKipcclxuICAgICogIFNwZWNpZmllcyB0aGUgdGFiaW5kZXggb2YgdGhlIGNvbXBvbmVudC5cclxuICAgICovXHJcbiAgICBnZXQgdGFiSW5kZXgoKTogbnVtYmVyIHsgcmV0dXJuIHRoaXMuZGlzYWJsZWQgPyAtMSA6IHRoaXMuX3RhYkluZGV4OyB9XHJcbiAgICBzZXQgdGFiSW5kZXgodmFsdWU6IG51bWJlcikge1xyXG4gICAgICAgIHRoaXMuc2V0T3B0aW9uKHsgbmFtZTogXCJ0YWJJbmRleFwiLCB2YWx1ZTogdmFsdWUgIT0gbnVsbCA/IGNvZXJjZU51bWJlclByb3BlcnR5KHZhbHVlKSA6IDAgfSlcclxuICAgIH1cclxuXHJcbiAgICAvKipcclxuICAgICogIEZpcmVzIGVhY2ggdGltZSB0aGUgY29tcG9uZW50IGdldHMgZm9jdXNlZC5cclxuICAgICogIEBldmVudFxyXG4gICAgKi9cclxuICAgIG9uRm9jdXM6IEV2ZW50RW1pdHRlcjxBWEZvY3VzRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxBWEZvY3VzRXZlbnQ+KCk7XHJcblxyXG4gICAgcHJvdGVjdGVkIGVtaXRPbkZvY3VzRXZlbnQoZTogRm9jdXNFdmVudCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMub25Gb2N1cy5lbWl0KHtcclxuICAgICAgICAgICAgY29tcG9uZW50OiB0aGlzLFxyXG4gICAgICAgICAgICBodG1sRWxlbWVudDogdGhpcy5nZXRIb3N0RWxlbWVudCgpLFxyXG4gICAgICAgICAgICBuYXRpdmVFdmVudDogZVxyXG4gICAgICAgIH0pO1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgKiAgRmlyZXMgZWFjaCB0aW1lIHRoZSBjb21wb25lbnQgZ2V0cyBibHVycmVkLlxyXG4gICAgKiAgQGV2ZW50XHJcbiAgICAqL1xyXG4gICAgb25CbHVyOiBFdmVudEVtaXR0ZXI8QVhGb2N1c0V2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXI8QVhGb2N1c0V2ZW50PigpO1xyXG5cclxuICAgIHByb3RlY3RlZCBlbWl0T25CbHVyRXZlbnQoZTogRm9jdXNFdmVudCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMub25CbHVyLmVtaXQoe1xyXG4gICAgICAgICAgICBjb21wb25lbnQ6IHRoaXMsXHJcbiAgICAgICAgICAgIGh0bWxFbGVtZW50OiB0aGlzLmdldEhvc3RFbGVtZW50KCksXHJcbiAgICAgICAgICAgIG5hdGl2ZUV2ZW50OiBlXHJcbiAgICAgICAgfSk7XHJcbiAgICB9XHJcblxyXG4gICAgY29uc3RydWN0b3IoKSB7XHJcbiAgICAgICAgc3VwZXIoKTtcclxuICAgIH1cclxuXHJcbiAgICBmb2N1cygpIHtcclxuICAgICAgICBBWEh0bWxVdGlsLmZvY3VzRWxlbWVudCh0aGlzLmdldEhvc3RFbGVtZW50KCkpO1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgKiAgQ2hlY2sgY29tcG9uZW50IGlzIGZvY3VzZWQgb3IgaGFzIGFueSBmb2N1c2VkIGVsZW1lbnQuXHJcbiAgICAqL1xyXG4gICAgaGFzRm9jdXMoKTogYm9vbGVhbiB7XHJcbiAgICAgICAgcmV0dXJuIEFYSHRtbFV0aWwuaGFzRm9jdXModGhpcy5nZXRIb3N0RWxlbWVudCgpKTtcclxuICAgIH1cclxufVxyXG5cclxuXHJcblxyXG5leHBvcnQgY29uc3QgSU5URVJBQ1RJVkVfSU5QVVRTID0gWydkaXNhYmxlZCcsICd0YWJJbmRleCcsIC4uLkJBU0VfSU5QVVRTXTtcclxuZXhwb3J0IGNvbnN0IElOVEVSQUNUSVZFX09VVFBVVCA9IFsnb25Gb2N1cycsICdvbkJsdXInLCAuLi5CQVNFX09VVFBVVF07Il19

package/esm2020/common/src/components/look-component.class.mjs

@@ -0,0 +1,27 @@
+import { EventEmitter } from "@angular/core";
+import { BASE_INPUTS, BASE_OUTPUT, MXBaseComponent } from "./base-component.class";
+export class MXLookComponent extends MXBaseComponent {
+    constructor() {
+        super();
+        this.lookChange = new EventEmitter();
+        this._look = 'default';
+    }
+    /**
+    *  Predefined look schemes
+    */
+    get look() {
+        return this._look;
+    }
+    set look(value) {
+        this.setOption({
+            name: 'look',
+            value,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            }
+        });
+    }
+}
+export const LOOK_INPUTS = ['look', ...BASE_INPUTS];
+export const LOOK_OUTPUT = ['lookChange', ...BASE_OUTPUT];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9vay1jb21wb25lbnQuY2xhc3MuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hY29yZXgvY29tcG9uZW50cy9jb21tb24vc3JjL2NvbXBvbmVudHMvbG9vay1jb21wb25lbnQuY2xhc3MudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUU3QyxPQUFPLEVBQUUsV0FBVyxFQUFFLFdBQVcsRUFBRSxlQUFlLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUVuRixNQUFNLE9BQU8sZUFBZ0IsU0FBUSxlQUFlO0lBRWhEO1FBQ0ksS0FBSyxFQUFFLENBQUM7UUFHWixlQUFVLEdBQWtDLElBQUksWUFBWSxFQUFFLENBQUM7UUFDdkQsVUFBSyxHQUFxQixTQUFTLENBQUM7SUFINUMsQ0FBQztJQUlEOztNQUVFO0lBQ0YsSUFBSSxJQUFJO1FBQ0osT0FBTyxJQUFJLENBQUMsS0FBTSxDQUFDO0lBQ3ZCLENBQUM7SUFDRCxJQUFJLElBQUksQ0FBQyxLQUFzQjtRQUMzQixJQUFJLENBQUMsU0FBUyxDQUFDO1lBQ1gsSUFBSSxFQUFFLE1BQU07WUFDWixLQUFLO1lBQ0wsYUFBYSxFQUFFLEdBQUcsRUFBRTtnQkFDaEIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQztZQUM1QixDQUFDO1NBQ0osQ0FBQyxDQUFDO0lBQ1AsQ0FBQztDQUNKO0FBRUQsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHLENBQUMsTUFBTSxFQUFFLEdBQUcsV0FBVyxDQUFDLENBQUM7QUFDcEQsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHLENBQUMsWUFBWSxFQUFFLEdBQUcsV0FBVyxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBFdmVudEVtaXR0ZXIgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5pbXBvcnQgeyBBWFN0eWxlTG9va1R5cGUgfSBmcm9tIFwiLi4vY2xhc3Nlcy9zdHlsZXMuY2xhc3NcIjtcclxuaW1wb3J0IHsgQkFTRV9JTlBVVFMsIEJBU0VfT1VUUFVULCBNWEJhc2VDb21wb25lbnQgfSBmcm9tIFwiLi9iYXNlLWNvbXBvbmVudC5jbGFzc1wiO1xyXG5cclxuZXhwb3J0IGNsYXNzIE1YTG9va0NvbXBvbmVudCBleHRlbmRzIE1YQmFzZUNvbXBvbmVudCB7XHJcblxyXG4gICAgY29uc3RydWN0b3IoKSB7XHJcbiAgICAgICAgc3VwZXIoKTtcclxuICAgIH1cclxuXHJcbiAgICBsb29rQ2hhbmdlOiBFdmVudEVtaXR0ZXI8QVhTdHlsZUxvb2tUeXBlPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICAgIHByaXZhdGUgX2xvb2s/OiBBWFN0eWxlTG9va1R5cGUgPSAnZGVmYXVsdCc7XHJcbiAgICAvKipcclxuICAgICogIFByZWRlZmluZWQgbG9vayBzY2hlbWVzXHJcbiAgICAqL1xyXG4gICAgZ2V0IGxvb2soKTogQVhTdHlsZUxvb2tUeXBlIHtcclxuICAgICAgICByZXR1cm4gdGhpcy5fbG9vayE7XHJcbiAgICB9XHJcbiAgICBzZXQgbG9vayh2YWx1ZTogQVhTdHlsZUxvb2tUeXBlKSB7XHJcbiAgICAgICAgdGhpcy5zZXRPcHRpb24oe1xyXG4gICAgICAgICAgICBuYW1lOiAnbG9vaycsXHJcbiAgICAgICAgICAgIHZhbHVlLFxyXG4gICAgICAgICAgICBhZnRlckNhbGxiYWNrOiAoKSA9PiB7XHJcbiAgICAgICAgICAgICAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgIH0pO1xyXG4gICAgfVxyXG59XHJcblxyXG5leHBvcnQgY29uc3QgTE9PS19JTlBVVFMgPSBbJ2xvb2snLCAuLi5CQVNFX0lOUFVUU107XHJcbmV4cG9ydCBjb25zdCBMT09LX09VVFBVVCA9IFsnbG9va0NoYW5nZScsIC4uLkJBU0VfT1VUUFVUXTsiXX0=

package/esm2020/context-menu/src/context-menu.component.mjs

@@ -229,7 +229,7 @@ export class AXContextMenuComponent extends AXBaseMenuMixin {
     }
 }
 AXContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: { disabled: "disabled", textField: "textField", valueField: "valueField", items: "items", parentId: "parentId", iconField: "iconField", isOpen: "isOpen", isActive: "isActive", visibleField: "visibleField", disableField: "disableField", hasChildField: "hasChildField", dividerField: "dividerField", openMode: "openMode", displayMode: "displayMode", target: "target" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onMenuItemClick: "onMenuItemClick" }, viewQueries: [{ propertyName: "_contextTemplate", first: true, predicate: ["contextTemplate"], descendants: true }, { propertyName: "_menuTmp", first: true, predicate: ["menuTmp"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #contextTemplateRef>\r\n    <ng-container *ngIf=\"contextTemplate  else menuTmp\">\r\n            <ng-container *ngTemplateOutlet=\"contextTemplate\">\r\n            </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n\r\n<ng-template #menuTmp>\r\n    <ax-menu class=\"ax-context-menu\" displayMode=\"vertical\" openMode=\"hover\" [items]='items'\r\n        [disableField]=\"disableField\" [hasChildField]=\"hasChildField\" [textField]=\"textField\" [iconField]=\"iconField\"\r\n        [valueField]=\"valueField\" [dividerField]=\"dividerField\" (onMenuItemClick)='onContextMenuClick($event)'>\r\n    </ax-menu>\r\n</ng-template>", styles: [".ax-context-menu{background-color:rgb(var(--ax-color-surface));border:1px solid;border-color:rgb(var(--ax-color-border-default));min-width:12rem;border-radius:var(--ax-rounded-border-default)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.AXMenuComponent, selector: "ax-menu", inputs: ["disabled", "tabIndex", "textField", "valueField", "items", "parentId", "iconField", "tooltip", "isOpen", "isActive", "visibleField", "disableField", "hasChildField", "dividerField", "openMode", "displayMode", "showModal"], outputs: ["onBlur", "onFocus", "onMenuItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: { disabled: "disabled", textField: "textField", valueField: "valueField", items: "items", parentId: "parentId", iconField: "iconField", isOpen: "isOpen", isActive: "isActive", visibleField: "visibleField", disableField: "disableField", hasChildField: "hasChildField", dividerField: "dividerField", openMode: "openMode", displayMode: "displayMode", target: "target" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onMenuItemClick: "onMenuItemClick" }, viewQueries: [{ propertyName: "_contextTemplate", first: true, predicate: ["contextTemplate"], descendants: true }, { propertyName: "_menuTmp", first: true, predicate: ["menuTmp"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #contextTemplateRef>\r\n    <ng-container *ngIf=\"contextTemplate  else menuTmp\">\r\n            <ng-container *ngTemplateOutlet=\"contextTemplate\">\r\n            </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n\r\n<ng-template #menuTmp>\r\n    <ax-menu class=\"ax-context-menu\" displayMode=\"vertical\" openMode=\"hover\" [items]='items'\r\n        [disableField]=\"disableField\" [hasChildField]=\"hasChildField\" [textField]=\"textField\" [iconField]=\"iconField\"\r\n        [valueField]=\"valueField\" [dividerField]=\"dividerField\" (onMenuItemClick)='onContextMenuClick($event)'>\r\n    </ax-menu>\r\n</ng-template>", styles: [".ax-context-menu{background-color:rgba(var(--ax-color-surface));border:1px solid;border-color:rgba(var(--ax-color-border-default));min-width:12rem;border-radius:var(--ax-rounded-border-default)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.AXMenuComponent, selector: "ax-menu", inputs: ["disabled", "tabIndex", "textField", "valueField", "items", "parentId", "iconField", "tooltip", "isOpen", "isActive", "visibleField", "disableField", "hasChildField", "dividerField", "openMode", "displayMode", "showModal"], outputs: ["onBlur", "onFocus", "onMenuItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-context-menu', inputs: [
@@ -247,7 +247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                         'dividerField',
                         'openMode',
                         'displayMode',
-                    ], outputs: ['onBlur', 'onFocus', 'onMenuItemClick'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #contextTemplateRef>\r\n    <ng-container *ngIf=\"contextTemplate  else menuTmp\">\r\n            <ng-container *ngTemplateOutlet=\"contextTemplate\">\r\n            </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n\r\n<ng-template #menuTmp>\r\n    <ax-menu class=\"ax-context-menu\" displayMode=\"vertical\" openMode=\"hover\" [items]='items'\r\n        [disableField]=\"disableField\" [hasChildField]=\"hasChildField\" [textField]=\"textField\" [iconField]=\"iconField\"\r\n        [valueField]=\"valueField\" [dividerField]=\"dividerField\" (onMenuItemClick)='onContextMenuClick($event)'>\r\n    </ax-menu>\r\n</ng-template>", styles: [".ax-context-menu{background-color:rgb(var(--ax-color-surface));border:1px solid;border-color:rgb(var(--ax-color-border-default));min-width:12rem;border-radius:var(--ax-rounded-border-default)}\n"] }]
+                    ], outputs: ['onBlur', 'onFocus', 'onMenuItemClick'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #contextTemplateRef>\r\n    <ng-container *ngIf=\"contextTemplate  else menuTmp\">\r\n            <ng-container *ngTemplateOutlet=\"contextTemplate\">\r\n            </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n\r\n<ng-template #menuTmp>\r\n    <ax-menu class=\"ax-context-menu\" displayMode=\"vertical\" openMode=\"hover\" [items]='items'\r\n        [disableField]=\"disableField\" [hasChildField]=\"hasChildField\" [textField]=\"textField\" [iconField]=\"iconField\"\r\n        [valueField]=\"valueField\" [dividerField]=\"dividerField\" (onMenuItemClick)='onContextMenuClick($event)'>\r\n    </ax-menu>\r\n</ng-template>", styles: [".ax-context-menu{background-color:rgba(var(--ax-color-surface));border:1px solid;border-color:rgba(var(--ax-color-border-default));min-width:12rem;border-radius:var(--ax-rounded-border-default)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.AXPlatform }]; }, propDecorators: { _contextTemplate: [{
                 type: ViewChild,
                 args: ['contextTemplate']

package/esm2020/data-pager/src/data-pager.component.mjs

@@ -122,10 +122,10 @@ export class AXDataPagerComponent extends AXBaseValueComponentMixin {
     }
 }
 AXDataPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXDataPagerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXPagedComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AXDataPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXDataPagerComponent, selector: "ax-data-pager", inputs: { value: "value", name: "name", size: "size", total: "total", displayMode: "displayMode" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onStateChanged: "onStateChanged" }, providers: [{ provide: AXPagerComponent, useExisting: AXDataPagerComponent }], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"displayMode\">\r\n    <ng-container *ngSwitchCase=\"'full'\">\r\n        <ax-prefix>\r\n            <ax-data-pager-numeric-selector>\r\n            </ax-data-pager-numeric-selector>\r\n            <ax-data-pager-page-sizes>\r\n            </ax-data-pager-page-sizes>\r\n        </ax-prefix>\r\n        <ax-suffix>\r\n            <ax-data-pager-info>\r\n            </ax-data-pager-info>\r\n        </ax-suffix>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'compact'\">\r\n        <ax-prefix>\r\n            <ax-data-pager-prev-buttons>\r\n            </ax-data-pager-prev-buttons>\r\n            <ax-data-pager-input-selector>\r\n            </ax-data-pager-input-selector>\r\n            <ax-data-pager-next-buttons>\r\n            </ax-data-pager-next-buttons>\r\n        </ax-prefix>\r\n        <ax-suffix>\r\n            <ax-data-pager-info>\r\n            </ax-data-pager-info>\r\n        </ax-suffix>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n        <ng-content select=\"ax-prefix\"></ng-content>\r\n        <ng-content select=\"ax-suffix\"></ng-content>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n", styles: ["ax-data-pager{width:100%;font-size:.875rem;padding:.5rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}ax-data-pager ax-button-group{border:0!important;border-radius:var(--ax-rounded-border-default)!important;display:flex;gap:.25rem}ax-data-pager ax-button-group ax-button{border:0!important;border-radius:var(--ax-rounded-border-default)!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{display:flex;gap:.5rem}ax-data-pager ax-data-pager-page-sizes ax-button{border-radius:var(--ax-rounded-border-default);border:1px solid rgb(var(--ax-color-ghost),.12);padding:0 .5rem}ax-data-pager ax-data-pager-page-sizes ax-button ax-icon{font-size:1rem!important}ax-data-pager ax-prefix,ax-data-pager ax-suffic{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.AXDecoratorPrefixComponent, selector: "ax-prefix" }, { kind: "component", type: i2.AXDecoratorSuffixComponent, selector: "ax-suffix" }, { kind: "component", type: i3.AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: i4.AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: i5.AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: i6.AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: i7.AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: i8.AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDataPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXDataPagerComponent, selector: "ax-data-pager", inputs: { value: "value", name: "name", size: "size", total: "total", displayMode: "displayMode" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onStateChanged: "onStateChanged" }, providers: [{ provide: AXPagerComponent, useExisting: AXDataPagerComponent }], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"displayMode\">\r\n    <ng-container *ngSwitchCase=\"'full'\">\r\n        <ax-prefix>\r\n            <ax-data-pager-numeric-selector>\r\n            </ax-data-pager-numeric-selector>\r\n            <ax-data-pager-page-sizes>\r\n            </ax-data-pager-page-sizes>\r\n        </ax-prefix>\r\n        <ax-suffix>\r\n            <ax-data-pager-info>\r\n            </ax-data-pager-info>\r\n        </ax-suffix>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'compact'\">\r\n        <ax-prefix>\r\n            <ax-data-pager-prev-buttons>\r\n            </ax-data-pager-prev-buttons>\r\n            <ax-data-pager-input-selector>\r\n            </ax-data-pager-input-selector>\r\n            <ax-data-pager-next-buttons>\r\n            </ax-data-pager-next-buttons>\r\n        </ax-prefix>\r\n        <ax-suffix>\r\n            <ax-data-pager-info>\r\n            </ax-data-pager-info>\r\n        </ax-suffix>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n        <ng-content select=\"ax-prefix\"></ng-content>\r\n        <ng-content select=\"ax-suffix\"></ng-content>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n", styles: ["ax-data-pager{width:100%;font-size:.875rem;padding:.5rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}ax-data-pager ax-button-group{border:0!important;border-radius:var(--ax-rounded-border-default)!important;display:flex;gap:.25rem}ax-data-pager ax-button-group ax-button{border:0!important;border-radius:var(--ax-rounded-border-default)!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{display:flex;gap:.5rem}ax-data-pager ax-data-pager-page-sizes ax-button{border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));padding:0 .5rem}ax-data-pager ax-data-pager-page-sizes ax-button ax-icon{font-size:1rem!important}ax-data-pager ax-prefix,ax-data-pager ax-suffic{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.AXDecoratorPrefixComponent, selector: "ax-prefix" }, { kind: "component", type: i2.AXDecoratorSuffixComponent, selector: "ax-suffix" }, { kind: "component", type: i3.AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: i4.AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: i5.AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: i6.AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: i7.AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: i8.AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXDataPagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-data-pager', inputs: ['value', 'name'], outputs: ['valueChange', 'onValueChanged'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXPagerComponent, useExisting: AXDataPagerComponent }], template: "<ng-container [ngSwitch]=\"displayMode\">\r\n    <ng-container *ngSwitchCase=\"'full'\">\r\n        <ax-prefix>\r\n            <ax-data-pager-numeric-selector>\r\n            </ax-data-pager-numeric-selector>\r\n            <ax-data-pager-page-sizes>\r\n            </ax-data-pager-page-sizes>\r\n        </ax-prefix>\r\n        <ax-suffix>\r\n            <ax-data-pager-info>\r\n            </ax-data-pager-info>\r\n        </ax-suffix>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'compact'\">\r\n        <ax-prefix>\r\n            <ax-data-pager-prev-buttons>\r\n            </ax-data-pager-prev-buttons>\r\n            <ax-data-pager-input-selector>\r\n            </ax-data-pager-input-selector>\r\n            <ax-data-pager-next-buttons>\r\n            </ax-data-pager-next-buttons>\r\n        </ax-prefix>\r\n        <ax-suffix>\r\n            <ax-data-pager-info>\r\n            </ax-data-pager-info>\r\n        </ax-suffix>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n        <ng-content select=\"ax-prefix\"></ng-content>\r\n        <ng-content select=\"ax-suffix\"></ng-content>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n", styles: ["ax-data-pager{width:100%;font-size:.875rem;padding:.5rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}ax-data-pager ax-button-group{border:0!important;border-radius:var(--ax-rounded-border-default)!important;display:flex;gap:.25rem}ax-data-pager ax-button-group ax-button{border:0!important;border-radius:var(--ax-rounded-border-default)!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{display:flex;gap:.5rem}ax-data-pager ax-data-pager-page-sizes ax-button{border-radius:var(--ax-rounded-border-default);border:1px solid rgb(var(--ax-color-ghost),.12);padding:0 .5rem}ax-data-pager ax-data-pager-page-sizes ax-button ax-icon{font-size:1rem!important}ax-data-pager ax-prefix,ax-data-pager ax-suffic{display:flex}\n"] }]
+            args: [{ selector: 'ax-data-pager', inputs: ['value', 'name'], outputs: ['valueChange', 'onValueChanged'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXPagerComponent, useExisting: AXDataPagerComponent }], template: "<ng-container [ngSwitch]=\"displayMode\">\r\n    <ng-container *ngSwitchCase=\"'full'\">\r\n        <ax-prefix>\r\n            <ax-data-pager-numeric-selector>\r\n            </ax-data-pager-numeric-selector>\r\n            <ax-data-pager-page-sizes>\r\n            </ax-data-pager-page-sizes>\r\n        </ax-prefix>\r\n        <ax-suffix>\r\n            <ax-data-pager-info>\r\n            </ax-data-pager-info>\r\n        </ax-suffix>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'compact'\">\r\n        <ax-prefix>\r\n            <ax-data-pager-prev-buttons>\r\n            </ax-data-pager-prev-buttons>\r\n            <ax-data-pager-input-selector>\r\n            </ax-data-pager-input-selector>\r\n            <ax-data-pager-next-buttons>\r\n            </ax-data-pager-next-buttons>\r\n        </ax-prefix>\r\n        <ax-suffix>\r\n            <ax-data-pager-info>\r\n            </ax-data-pager-info>\r\n        </ax-suffix>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n        <ng-content select=\"ax-prefix\"></ng-content>\r\n        <ng-content select=\"ax-suffix\"></ng-content>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n", styles: ["ax-data-pager{width:100%;font-size:.875rem;padding:.5rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}ax-data-pager ax-button-group{border:0!important;border-radius:var(--ax-rounded-border-default)!important;display:flex;gap:.25rem}ax-data-pager ax-button-group ax-button{border:0!important;border-radius:var(--ax-rounded-border-default)!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{display:flex;gap:.5rem}ax-data-pager ax-data-pager-page-sizes ax-button{border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));padding:0 .5rem}ax-data-pager ax-data-pager-page-sizes ax-button ax-icon{font-size:1rem!important}ax-data-pager ax-prefix,ax-data-pager ax-suffic{display:flex}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i9.AXPagedComponent, decorators: [{
                     type: Optional
                 }, {

package/esm2020/data-table/src/data-table.component.mjs

@@ -112,10 +112,10 @@ export class AXDataTableComponent extends AXBaseComponentMixin {
     }
 }
 AXDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXDataTableComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXDataTableComponent, selector: "ax-data-table", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", pageSize: "pageSize", fetchDataMode: "fetchDataMode", items: "items" }, outputs: { onPageChanged: "onPageChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], queries: [{ propertyName: "_columns", predicate: AXDataColumnComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\">\r\n</ng-content>\r\n<div class=\"ax-wrapper\">\r\n<table class=\"ax-table ax-table-bordered\" tabindex=\"0\" [axIsLoading]=\"_isLoading\">\r\n    <thead *ngIf=\"showHeader\">\r\n      <tr>\r\n        <th *ngFor=\"let c of _columns\">\r\n          <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\r\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\r\n          </ng-template>\r\n          <ng-template #captionTpl>\r\n            {{c.caption}}\r\n          </ng-template>\r\n        </th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngIf=\"displayItems.length; else emptyTpl\">\r\n        <ng-container *ngFor=\"let d of displayItems;let rIndex=index\">\r\n          <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\r\n            <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:d,rowIndex:rIndex} }\">\r\n            </ng-container>\r\n          </ng-template>\r\n          <ng-template #rowTpl>\r\n            <tr>\r\n              <ng-container *ngFor=\"let c of _columns\">\r\n                <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\r\n                  <ng-container *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:d,rowIndex:rIndex} }\">\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #cellTpl>\r\n                  <td [attr.data-label]=\"c.caption\" tabindex=\"0\">\r\n                    {{d[c.valueField]}}\r\n                  </td>\r\n                </ng-template>\r\n              </ng-container>\r\n            </tr>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #emptyTpl>\r\n        <tr>\r\n          <td [attr.colspan]=\"_columns.length\">\r\n            <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\r\n            </ng-template>\r\n            <ng-template #defaultEmptyTemplate>\r\n              <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\r\n            </ng-template>\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n<ng-content select=\"ax-footer\">\r\n</ng-content>", styles: ["ax-data-table{display:flex;flex-direction:column;border-radius:var(--ax-rounded-border-default)}ax-data-table .ax-wrapper{display:flex;flex:1 1 0%;overflow:auto}ax-data-table>ax-header{border-bottom:1px solid;border-color:rgb(var(--ax-color-border-default))}ax-data-table>ax-footer{border-top:1px solid;border-color:rgb(var(--ax-color-border-default))}ax-data-table table{position:relative;border:0}ax-data-table table thead{position:sticky;top:0}ax-data-table table td,ax-data-table table th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.AXResultComponent, selector: "ax-result", inputs: ["type", "caption", "description"] }, { kind: "directive", type: i3.AXLoadingDirective, selector: "[axIsLoading]", inputs: ["axIsLoading"] }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXDataTableComponent, selector: "ax-data-table", inputs: { rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", showHeader: "showHeader", pageSize: "pageSize", fetchDataMode: "fetchDataMode", items: "items" }, outputs: { onPageChanged: "onPageChanged" }, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], queries: [{ propertyName: "_columns", predicate: AXDataColumnComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\">\r\n</ng-content>\r\n<div class=\"ax-wrapper\">\r\n<table class=\"ax-table ax-table-bordered\" tabindex=\"0\" [axIsLoading]=\"_isLoading\">\r\n    <thead *ngIf=\"showHeader\">\r\n      <tr>\r\n        <th *ngFor=\"let c of _columns\">\r\n          <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\r\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\r\n          </ng-template>\r\n          <ng-template #captionTpl>\r\n            {{c.caption}}\r\n          </ng-template>\r\n        </th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngIf=\"displayItems.length; else emptyTpl\">\r\n        <ng-container *ngFor=\"let d of displayItems;let rIndex=index\">\r\n          <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\r\n            <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:d,rowIndex:rIndex} }\">\r\n            </ng-container>\r\n          </ng-template>\r\n          <ng-template #rowTpl>\r\n            <tr>\r\n              <ng-container *ngFor=\"let c of _columns\">\r\n                <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\r\n                  <ng-container *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:d,rowIndex:rIndex} }\">\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #cellTpl>\r\n                  <td [attr.data-label]=\"c.caption\" tabindex=\"0\">\r\n                    {{d[c.valueField]}}\r\n                  </td>\r\n                </ng-template>\r\n              </ng-container>\r\n            </tr>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #emptyTpl>\r\n        <tr>\r\n          <td [attr.colspan]=\"_columns.length\">\r\n            <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\r\n            </ng-template>\r\n            <ng-template #defaultEmptyTemplate>\r\n              <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\r\n            </ng-template>\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n<ng-content select=\"ax-footer\">\r\n</ng-content>", styles: ["ax-data-table{display:flex;flex-direction:column;border-radius:var(--ax-rounded-border-default)}ax-data-table .ax-wrapper{display:flex;flex:1 1 0%;overflow:auto}ax-data-table>ax-header{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table>ax-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table table{position:relative;border:0}ax-data-table table thead{position:sticky;top:0}ax-data-table table td,ax-data-table table th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.AXResultComponent, selector: "ax-result", inputs: ["type", "caption", "description"] }, { kind: "directive", type: i3.AXLoadingDirective, selector: "[axIsLoading]", inputs: ["axIsLoading"] }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-data-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], template: "<ng-content select=\"ax-header\">\r\n</ng-content>\r\n<div class=\"ax-wrapper\">\r\n<table class=\"ax-table ax-table-bordered\" tabindex=\"0\" [axIsLoading]=\"_isLoading\">\r\n    <thead *ngIf=\"showHeader\">\r\n      <tr>\r\n        <th *ngFor=\"let c of _columns\">\r\n          <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\r\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\r\n          </ng-template>\r\n          <ng-template #captionTpl>\r\n            {{c.caption}}\r\n          </ng-template>\r\n        </th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngIf=\"displayItems.length; else emptyTpl\">\r\n        <ng-container *ngFor=\"let d of displayItems;let rIndex=index\">\r\n          <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\r\n            <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:d,rowIndex:rIndex} }\">\r\n            </ng-container>\r\n          </ng-template>\r\n          <ng-template #rowTpl>\r\n            <tr>\r\n              <ng-container *ngFor=\"let c of _columns\">\r\n                <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\r\n                  <ng-container *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:d,rowIndex:rIndex} }\">\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #cellTpl>\r\n                  <td [attr.data-label]=\"c.caption\" tabindex=\"0\">\r\n                    {{d[c.valueField]}}\r\n                  </td>\r\n                </ng-template>\r\n              </ng-container>\r\n            </tr>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #emptyTpl>\r\n        <tr>\r\n          <td [attr.colspan]=\"_columns.length\">\r\n            <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\r\n            </ng-template>\r\n            <ng-template #defaultEmptyTemplate>\r\n              <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\r\n            </ng-template>\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n<ng-content select=\"ax-footer\">\r\n</ng-content>", styles: ["ax-data-table{display:flex;flex-direction:column;border-radius:var(--ax-rounded-border-default)}ax-data-table .ax-wrapper{display:flex;flex:1 1 0%;overflow:auto}ax-data-table>ax-header{border-bottom:1px solid;border-color:rgb(var(--ax-color-border-default))}ax-data-table>ax-footer{border-top:1px solid;border-color:rgb(var(--ax-color-border-default))}ax-data-table table{position:relative;border:0}ax-data-table table thead{position:sticky;top:0}ax-data-table table td,ax-data-table table th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            args: [{ selector: 'ax-data-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXPagedComponent, useExisting: AXDataTableComponent }], template: "<ng-content select=\"ax-header\">\r\n</ng-content>\r\n<div class=\"ax-wrapper\">\r\n<table class=\"ax-table ax-table-bordered\" tabindex=\"0\" [axIsLoading]=\"_isLoading\">\r\n    <thead *ngIf=\"showHeader\">\r\n      <tr>\r\n        <th *ngFor=\"let c of _columns\">\r\n          <ng-template [ngIf]=\"c.headerTemplate\" [ngIfElse]=\"captionTpl\">\r\n            <ng-container *ngTemplateOutlet=\"c.headerTemplate\"></ng-container>\r\n          </ng-template>\r\n          <ng-template #captionTpl>\r\n            {{c.caption}}\r\n          </ng-template>\r\n        </th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngIf=\"displayItems.length; else emptyTpl\">\r\n        <ng-container *ngFor=\"let d of displayItems;let rIndex=index\">\r\n          <ng-template [ngIf]=\"rowTemplate\" [ngIfElse]=\"rowTpl\">\r\n            <ng-container *ngTemplateOutlet=\"rowTemplate;context: { $implicit: {data:d,rowIndex:rIndex} }\">\r\n            </ng-container>\r\n          </ng-template>\r\n          <ng-template #rowTpl>\r\n            <tr>\r\n              <ng-container *ngFor=\"let c of _columns\">\r\n                <ng-template [ngIf]=\"c.cellTemplate\" [ngIfElse]=\"cellTpl\">\r\n                  <ng-container *ngTemplateOutlet=\"c.cellTemplate;context: { $implicit: {data:d,rowIndex:rIndex} }\">\r\n                  </ng-container>\r\n                </ng-template>\r\n                <ng-template #cellTpl>\r\n                  <td [attr.data-label]=\"c.caption\" tabindex=\"0\">\r\n                    {{d[c.valueField]}}\r\n                  </td>\r\n                </ng-template>\r\n              </ng-container>\r\n            </tr>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #emptyTpl>\r\n        <tr>\r\n          <td [attr.colspan]=\"_columns.length\">\r\n            <ng-template [ngIf]=\"emptyTemplate\" [ngIfElse]=\"defaultEmptyTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\r\n            </ng-template>\r\n            <ng-template #defaultEmptyTemplate>\r\n              <ax-result type=\"empty\" caption=\" {{'common.no-result-found' | trans }}\"></ax-result>\r\n            </ng-template>\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n<ng-content select=\"ax-footer\">\r\n</ng-content>", styles: ["ax-data-table{display:flex;flex-direction:column;border-radius:var(--ax-rounded-border-default)}ax-data-table .ax-wrapper{display:flex;flex:1 1 0%;overflow:auto}ax-data-table>ax-header{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table>ax-footer{border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-data-table table{position:relative;border:0}ax-data-table table thead{position:sticky;top:0}ax-data-table table td,ax-data-table table th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _columns: [{
                 type: ContentChildren,
                 args: [AXDataColumnComponent]