@acorex/components 7.1.0 → 7.1.2

package/fesm2022/acorex-components-color-picker.mjs

@@ -19,163 +19,163 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXTextBoxModule } from '@acorex/components/textbox';
 import { AXLoadingModule } from '@acorex/components/loading';
 
-const AXBaseColorPickerMixin = _InteractiveComponenetMixin(_DropdownComponenetMixin(_ValueComponenetMixin(_TextboxComponenetMixin(AXBaseComponent))));
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXColorPickerComponent extends AXBaseColorPickerMixin {
-    _elementRef;
-    _zone;
-    _platform;
-    popover = null;
-    _target;
-    _popoverTitle;
-    _popoverWidth;
-    _colorCode;
-    _mode = 'hex';
-    _isMobile = false;
-    /**
-     *  @ignore
-     */
-    constructor(_elementRef, _cdr, _zone, _platform) {
-        super(_elementRef, _cdr);
-        this._elementRef = _elementRef;
-        this._zone = _zone;
-        this._platform = _platform;
-        this._isMobile = this._platform.is('Mobile');
-        this._platform.resize.subscribe(() => {
-            this._isMobile = this._platform.is('Mobile');
-            this.popover.dispose();
-        });
-    }
-    _handleArrowClickEvent(e) {
-        e.stopPropagation();
-        this.toggle();
-    }
-    _handleInputClickEvent(e) {
-        e.stopPropagation();
-        this.toggle();
-    }
-    _handleClearClickEvent() {
-        this._setUserInteraction();
-        this.clear();
-    }
-    onInit() {
-        super.onInit();
-        this._target = this._elementRef.nativeElement;
-    }
-    onViewInit() {
-        super.onViewInit();
-    }
-    _onValueChanged(oldValue, newValue) {
-        super._onValueChanged(oldValue, newValue);
-        if (newValue != null)
-            this._colorCode = AXColorUtil.toString(newValue);
-        else
-            this._colorCode = '';
-    }
-    _handleValueChangedEvent(e) {
-        if (e.isUserInteraction)
-            this._setUserInteraction();
-        this.value = e.value;
-    }
-    async _handlePopupOnOpened(e) { }
-    _handlePopupOnClosed(e) {
-        this.focus();
-    }
-    _handleKeydown(e) {
-        if (e.ctrlKey || e.code === 'Space') {
-            this.open();
-        }
-        e.preventDefault();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, providers: [{ provide: AXClosbaleComponent, useExisting: AXColorPickerComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n  <div *ngIf=\"value\" class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\r\n  <div class=\"color-value\">{{ _colorCode }}</div>\r\n</div>\r\n\r\n<button class=\"ax-editor-control\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"_handleArrowClickEvent($event)\">\r\n  <span class=\"ax-icon ax-icon-color-palette\"></span>\r\n</button>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopupOnOpened($event)\"\r\n  (onClosed)=\"_handlePopupOnClosed($event)\">\r\n  <div\r\n    class=\"ax-overlay-pane\"\r\n    [class.ax-w-full]=\"_isMobile\"\r\n    tabindex=\"0\"\r\n    aria-modal=\"true\"\r\n    cdkTrapFocus\r\n    [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n    <ax-color-palette [value]=\"value\" (onValueChanged)=\"_handleValueChangedEvent($event)\"> </ax-color-palette>\r\n  </div>\r\n</ax-popover>\r\n", styles: ["ax-color-picker .ax-dropdown-content{margin:0 .5rem;display:flex;align-items:center}ax-color-picker .ax-dropdown-content .color-badge{display:block;border-radius:99rem;width:1rem;min-width:1rem;height:1rem;margin-inline-end:.5rem;border:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-color-picker .ax-dropdown-content .color-value{text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-overlay-pane ax-color-palette{border:none}@media (max-width: 599px){.ax-overlay-pane ax-color-palette{width:100%}.ax-overlay-pane ax-color-palette .palette-items{max-height:30vh}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i5.AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "state", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-color-picker', inputs: [
-                        'isOpen',
-                        'fitParent',
-                        'dropdownWidth',
-                        'position',
-                        'disabled',
-                        'tabIndex',
-                        'readonly',
-                        'allowNull',
-                        'value',
-                        'name',
-                        'checked',
-                        'placeholder',
-                        'maxLength',
-                        'allowNull',
-                        'type',
-                        'autoComplete',
-                        'readonly',
-                        'allowNull',
-                        'value',
-                        'name',
-                        'checked',
-                    ], outputs: ['onOpened', 'onClosed', 'onBlur', 'onFocus', 'valueChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXClosbaleComponent, useExisting: AXColorPickerComponent }], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n  <div *ngIf=\"value\" class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\r\n  <div class=\"color-value\">{{ _colorCode }}</div>\r\n</div>\r\n\r\n<button class=\"ax-editor-control\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"_handleArrowClickEvent($event)\">\r\n  <span class=\"ax-icon ax-icon-color-palette\"></span>\r\n</button>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopupOnOpened($event)\"\r\n  (onClosed)=\"_handlePopupOnClosed($event)\">\r\n  <div\r\n    class=\"ax-overlay-pane\"\r\n    [class.ax-w-full]=\"_isMobile\"\r\n    tabindex=\"0\"\r\n    aria-modal=\"true\"\r\n    cdkTrapFocus\r\n    [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n    <ax-color-palette [value]=\"value\" (onValueChanged)=\"_handleValueChangedEvent($event)\"> </ax-color-palette>\r\n  </div>\r\n</ax-popover>\r\n", styles: ["ax-color-picker .ax-dropdown-content{margin:0 .5rem;display:flex;align-items:center}ax-color-picker .ax-dropdown-content .color-badge{display:block;border-radius:99rem;width:1rem;min-width:1rem;height:1rem;margin-inline-end:.5rem;border:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-color-picker .ax-dropdown-content .color-value{text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-overlay-pane ax-color-palette{border:none}@media (max-width: 599px){.ax-overlay-pane ax-color-palette{width:100%}.ax-overlay-pane ax-color-palette .palette-items{max-height:30vh}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.AXPlatform }]; }, propDecorators: { popover: [{
-                type: ViewChild,
-                args: [AXPopoverComponent, { static: true }]
-            }], _handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
+const AXBaseColorPickerMixin = _InteractiveComponenetMixin(_DropdownComponenetMixin(_ValueComponenetMixin(_TextboxComponenetMixin(AXBaseComponent))));
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXColorPickerComponent extends AXBaseColorPickerMixin {
+    _elementRef;
+    _zone;
+    _platform;
+    popover = null;
+    _target;
+    _popoverTitle;
+    _popoverWidth;
+    _colorCode;
+    _mode = 'hex';
+    _isMobile = false;
+    /**
+     *  @ignore
+     */
+    constructor(_elementRef, _cdr, _zone, _platform) {
+        super(_elementRef, _cdr);
+        this._elementRef = _elementRef;
+        this._zone = _zone;
+        this._platform = _platform;
+        this._isMobile = this._platform.is('Mobile');
+        this._platform.resize.subscribe(() => {
+            this._isMobile = this._platform.is('Mobile');
+            this.popover.dispose();
+        });
+    }
+    _handleArrowClickEvent(e) {
+        e.stopPropagation();
+        this.toggle();
+    }
+    _handleInputClickEvent(e) {
+        e.stopPropagation();
+        this.toggle();
+    }
+    _handleClearClickEvent() {
+        this._setUserInteraction();
+        this.clear();
+    }
+    onInit() {
+        super.onInit();
+        this._target = this._elementRef.nativeElement;
+    }
+    onViewInit() {
+        super.onViewInit();
+    }
+    _onValueChanged(oldValue, newValue) {
+        super._onValueChanged(oldValue, newValue);
+        if (newValue != null)
+            this._colorCode = AXColorUtil.toString(newValue);
+        else
+            this._colorCode = '';
+    }
+    _handleValueChangedEvent(e) {
+        if (e.isUserInteraction)
+            this._setUserInteraction();
+        this.value = e.value;
+    }
+    async _handlePopupOnOpened(e) { }
+    _handlePopupOnClosed(e) {
+        this.focus();
+    }
+    _handleKeydown(e) {
+        if (e.ctrlKey || e.code === 'Space') {
+            this.open();
+        }
+        e.preventDefault();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, providers: [{ provide: AXClosbaleComponent, useExisting: AXColorPickerComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n  <div *ngIf=\"value\" class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\r\n  <div class=\"color-value\">{{ _colorCode }}</div>\r\n</div>\r\n\r\n<button class=\"ax-editor-control\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"_handleArrowClickEvent($event)\">\r\n  <span class=\"ax-icon ax-icon-color-palette\"></span>\r\n</button>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopupOnOpened($event)\"\r\n  (onClosed)=\"_handlePopupOnClosed($event)\">\r\n  <div\r\n    class=\"ax-overlay-pane\"\r\n    [class.ax-w-full]=\"_isMobile\"\r\n    tabindex=\"0\"\r\n    aria-modal=\"true\"\r\n    cdkTrapFocus\r\n    [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n    <ax-color-palette [value]=\"value\" (onValueChanged)=\"_handleValueChangedEvent($event)\"> </ax-color-palette>\r\n  </div>\r\n</ax-popover>\r\n", styles: ["ax-color-picker .ax-dropdown-content{margin:0 .5rem;display:flex;align-items:center}ax-color-picker .ax-dropdown-content .color-badge{display:block;border-radius:99rem;width:1rem;min-width:1rem;height:1rem;margin-inline-end:.5rem;border:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-color-picker .ax-dropdown-content .color-value{text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-overlay-pane ax-color-palette{border:none}@media (max-width: 599px){.ax-overlay-pane ax-color-palette{width:100%}.ax-overlay-pane ax-color-palette .palette-items{max-height:30vh}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i5.AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "state", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-color-picker', inputs: [
+                        'isOpen',
+                        'fitParent',
+                        'dropdownWidth',
+                        'position',
+                        'disabled',
+                        'tabIndex',
+                        'readonly',
+                        'allowNull',
+                        'value',
+                        'name',
+                        'checked',
+                        'placeholder',
+                        'maxLength',
+                        'allowNull',
+                        'type',
+                        'autoComplete',
+                        'readonly',
+                        'allowNull',
+                        'value',
+                        'name',
+                        'checked',
+                    ], outputs: ['onOpened', 'onClosed', 'onBlur', 'onFocus', 'valueChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXClosbaleComponent, useExisting: AXColorPickerComponent }], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n  <div *ngIf=\"value\" class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\r\n  <div class=\"color-value\">{{ _colorCode }}</div>\r\n</div>\r\n\r\n<button class=\"ax-editor-control\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"_handleArrowClickEvent($event)\">\r\n  <span class=\"ax-icon ax-icon-color-palette\"></span>\r\n</button>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopupOnOpened($event)\"\r\n  (onClosed)=\"_handlePopupOnClosed($event)\">\r\n  <div\r\n    class=\"ax-overlay-pane\"\r\n    [class.ax-w-full]=\"_isMobile\"\r\n    tabindex=\"0\"\r\n    aria-modal=\"true\"\r\n    cdkTrapFocus\r\n    [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n    <ax-color-palette [value]=\"value\" (onValueChanged)=\"_handleValueChangedEvent($event)\"> </ax-color-palette>\r\n  </div>\r\n</ax-popover>\r\n", styles: ["ax-color-picker .ax-dropdown-content{margin:0 .5rem;display:flex;align-items:center}ax-color-picker .ax-dropdown-content .color-badge{display:block;border-radius:99rem;width:1rem;min-width:1rem;height:1rem;margin-inline-end:.5rem;border:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-color-picker .ax-dropdown-content .color-value{text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-overlay-pane ax-color-palette{border:none}@media (max-width: 599px){.ax-overlay-pane ax-color-palette{width:100%}.ax-overlay-pane ax-color-palette .palette-items{max-height:30vh}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.AXPlatform }]; }, propDecorators: { popover: [{
+                type: ViewChild,
+                args: [AXPopoverComponent, { static: true }]
+            }], _handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }] } });
 
-class AXColorPickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXColorPickerModule, declarations: [AXColorPickerComponent], imports: [CommonModule,
-            AXCommonModule,
-            FormsModule,
-            AXDecoratorModule,
-            AXPopoverModule,
-            AXButtonModule,
-            A11yModule,
-            AXLoadingModule,
-            AXTranslationModule,
-            AXTextBoxModule,
-            AXColorPaletteModule], exports: [AXColorPickerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPickerModule, imports: [CommonModule,
-            AXCommonModule,
-            FormsModule,
-            AXDecoratorModule,
-            AXPopoverModule,
-            AXButtonModule,
-            A11yModule,
-            AXLoadingModule,
-            AXTranslationModule,
-            AXTextBoxModule,
-            AXColorPaletteModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        AXCommonModule,
-                        FormsModule,
-                        AXDecoratorModule,
-                        AXPopoverModule,
-                        AXButtonModule,
-                        A11yModule,
-                        AXLoadingModule,
-                        AXTranslationModule,
-                        AXTextBoxModule,
-                        AXColorPaletteModule
-                    ],
-                    exports: [AXColorPickerComponent],
-                    declarations: [AXColorPickerComponent],
-                    providers: [],
-                }]
+class AXColorPickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXColorPickerModule, declarations: [AXColorPickerComponent], imports: [CommonModule,
+            AXCommonModule,
+            FormsModule,
+            AXDecoratorModule,
+            AXPopoverModule,
+            AXButtonModule,
+            A11yModule,
+            AXLoadingModule,
+            AXTranslationModule,
+            AXTextBoxModule,
+            AXColorPaletteModule], exports: [AXColorPickerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPickerModule, imports: [CommonModule,
+            AXCommonModule,
+            FormsModule,
+            AXDecoratorModule,
+            AXPopoverModule,
+            AXButtonModule,
+            A11yModule,
+            AXLoadingModule,
+            AXTranslationModule,
+            AXTextBoxModule,
+            AXColorPaletteModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXColorPickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        AXCommonModule,
+                        FormsModule,
+                        AXDecoratorModule,
+                        AXPopoverModule,
+                        AXButtonModule,
+                        A11yModule,
+                        AXLoadingModule,
+                        AXTranslationModule,
+                        AXTextBoxModule,
+                        AXColorPaletteModule
+                    ],
+                    exports: [AXColorPickerComponent],
+                    declarations: [AXColorPickerComponent],
+                    providers: [],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { AXBaseColorPickerMixin, AXColorPickerComponent, AXColorPickerModule };

package/fesm2022/acorex-components-color-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-color-picker.mjs","sources":["../../../../projects/acorex/components/color-picker/src/color-picker.component.ts","../../../../projects/acorex/components/color-picker/src/color-picker.component.html","../../../../projects/acorex/components/color-picker/src/color-picker.module.ts","../../../../projects/acorex/components/color-picker/acorex-components-color-picker.ts"],"sourcesContent":["import { AXColorMode, AXColorUtil } from '@acorex/core/utils';\r\nimport { AXPlatform } from '@acorex/core/platform';\r\n\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ElementRef,\r\n  HostListener,\r\n  NgZone,\r\n  ViewChild,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\n\r\nimport { AXClosbaleComponent, AXValueChangedEvent } from '@acorex/components/common';\r\nimport { AXPopoverComponent } from '@acorex/components/popover';\r\nimport {\r\n  _InteractiveComponenetMixin,\r\n  _DropdownComponenetMixin,\r\n  _ValueComponenetMixin,\r\n  _TextboxComponenetMixin,\r\n  AXBaseComponent,\r\n} from '@acorex/components/mixin';\r\n\r\nexport const AXBaseColorPickerMixin = _InteractiveComponenetMixin(\r\n  _DropdownComponenetMixin(_ValueComponenetMixin(_TextboxComponenetMixin(AXBaseComponent)))\r\n);\r\n\r\n/**\r\n * The Button is a component which detects user interaction and triggers a corresponding event\r\n *\r\n * @category Components\r\n */\r\n@Component({\r\n  selector: 'ax-color-picker',\r\n  templateUrl: './color-picker.component.html',\r\n  styleUrls: ['./color-picker.component.scss'],\r\n  inputs: [\r\n    'isOpen',\r\n    'fitParent',\r\n    'dropdownWidth',\r\n    'position',\r\n    'disabled',\r\n    'tabIndex',\r\n    'readonly',\r\n    'allowNull',\r\n    'value',\r\n    'name',\r\n    'checked',\r\n    'placeholder',\r\n    'maxLength',\r\n    'allowNull',\r\n    'type',\r\n    'autoComplete',\r\n    'readonly',\r\n    'allowNull',\r\n    'value',\r\n    'name',\r\n    'checked',\r\n  ],\r\n  outputs: ['onOpened', 'onClosed', 'onBlur', 'onFocus', 'valueChange', 'onValueChanged'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  providers: [{ provide: AXClosbaleComponent, useExisting: AXColorPickerComponent }],\r\n  host: { class: 'ax-editor-container ax-drop-down' },\r\n})\r\nexport class AXColorPickerComponent extends AXBaseColorPickerMixin {\r\n  @ViewChild(AXPopoverComponent, { static: true })\r\n  popover: AXPopoverComponent = null;\r\n\r\n  _target: HTMLDivElement;\r\n  _popoverTitle: string;\r\n  _popoverWidth: number;\r\n  _colorCode: string;\r\n  _mode: AXColorMode = 'hex';\r\n\r\n  _isMobile: boolean = false;\r\n  /**\r\n   *  @ignore\r\n   */\r\n  constructor(\r\n    protected _elementRef: ElementRef<HTMLDivElement>,\r\n    _cdr: ChangeDetectorRef,\r\n    private _zone: NgZone,\r\n    private _platform: AXPlatform\r\n  ) {\r\n    super(_elementRef, _cdr);\r\n    this._isMobile = this._platform.is('Mobile');\r\n    this._platform.resize.subscribe(() => {\r\n      this._isMobile = this._platform.is('Mobile');\r\n      this.popover.dispose();\r\n    });\r\n  }\r\n\r\n  _handleArrowClickEvent(e: MouseEvent) {\r\n    e.stopPropagation();\r\n    this.toggle();\r\n  }\r\n\r\n  _handleInputClickEvent(e: MouseEvent) {\r\n    e.stopPropagation();\r\n    this.toggle();\r\n  }\r\n\r\n  _handleClearClickEvent() {\r\n    this._setUserInteraction();\r\n    this.clear();\r\n  }\r\n\r\n  onInit() {\r\n    super.onInit();\r\n    this._target = this._elementRef.nativeElement;\r\n  }\r\n\r\n  onViewInit() {\r\n    super.onViewInit();\r\n  }\r\n\r\n  _onValueChanged(oldValue: any, newValue: any) {\r\n    super._onValueChanged(oldValue, newValue);\r\n    if (newValue != null) this._colorCode = AXColorUtil.toString(newValue);\r\n    else this._colorCode = '';\r\n  }\r\n\r\n  _handleValueChangedEvent(e: AXValueChangedEvent<any>) {\r\n    if (e.isUserInteraction) this._setUserInteraction();\r\n    this.value = e.value;\r\n  }\r\n\r\n  async _handlePopupOnOpened(e) {}\r\n\r\n  _handlePopupOnClosed(e) {\r\n    this.focus();\r\n  }\r\n\r\n  @HostListener('keydown', ['$event'])\r\n  _handleKeydown(e: KeyboardEvent) {\r\n    if (e.ctrlKey || e.code === 'Space') {\r\n      this.open();\r\n    }\r\n    e.preventDefault();\r\n  }\r\n}\r\n","<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n  <div *ngIf=\"value\" class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\r\n  <div class=\"color-value\">{{ _colorCode }}</div>\r\n</div>\r\n\r\n<button class=\"ax-editor-control\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"_handleArrowClickEvent($event)\">\r\n  <span class=\"ax-icon ax-icon-color-palette\"></span>\r\n</button>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopupOnOpened($event)\"\r\n  (onClosed)=\"_handlePopupOnClosed($event)\">\r\n  <div\r\n    class=\"ax-overlay-pane\"\r\n    [class.ax-w-full]=\"_isMobile\"\r\n    tabindex=\"0\"\r\n    aria-modal=\"true\"\r\n    cdkTrapFocus\r\n    [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n    <ax-color-palette [value]=\"value\" (onValueChanged)=\"_handleValueChangedEvent($event)\"> </ax-color-palette>\r\n  </div>\r\n</ax-popover>\r\n","import { CommonModule } from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { A11yModule } from '@angular/cdk/a11y';\r\nimport { AXTranslationModule } from '@acorex/core/translation';\r\nimport { AXButtonModule } from '@acorex/components/button';\r\nimport { AXDecoratorModule } from '@acorex/components/decorators';\r\nimport { AXPopoverModule } from '@acorex/components/popover';\r\nimport { AXCommonModule } from '@acorex/components/common';\r\nimport { AXTextBoxModule } from '@acorex/components/textbox';\r\nimport { AXLoadingModule } from '@acorex/components/loading';\r\nimport { AXColorPaletteModule } from '@acorex/components/color-palette';\r\n\r\nimport { AXColorPickerComponent } from './color-picker.component';\r\n\r\n@NgModule({\r\n    imports: [\r\n        CommonModule,\r\n        AXCommonModule,\r\n        FormsModule,\r\n        AXDecoratorModule,\r\n        AXPopoverModule,\r\n        AXButtonModule,\r\n        A11yModule,\r\n        AXLoadingModule,\r\n        AXTranslationModule,\r\n        AXTextBoxModule,\r\n        AXColorPaletteModule\r\n    ],\r\n    exports: [AXColorPickerComponent],\r\n    declarations: [AXColorPickerComponent],\r\n    providers: [],\r\n})\r\nexport class AXColorPickerModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-color-picker.mjs","sources":["../../../../projects/acorex/components/color-picker/src/color-picker.component.ts","../../../../projects/acorex/components/color-picker/src/color-picker.component.html","../../../../projects/acorex/components/color-picker/src/color-picker.module.ts","../../../../projects/acorex/components/color-picker/acorex-components-color-picker.ts"],"sourcesContent":["import { AXColorMode, AXColorUtil } from '@acorex/core/utils';\r\nimport { AXPlatform } from '@acorex/core/platform';\r\n\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ElementRef,\r\n  HostListener,\r\n  NgZone,\r\n  ViewChild,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\n\r\nimport { AXClosbaleComponent, AXValueChangedEvent } from '@acorex/components/common';\r\nimport { AXPopoverComponent } from '@acorex/components/popover';\r\nimport {\r\n  _InteractiveComponenetMixin,\r\n  _DropdownComponenetMixin,\r\n  _ValueComponenetMixin,\r\n  _TextboxComponenetMixin,\r\n  AXBaseComponent,\r\n} from '@acorex/components/mixin';\r\n\r\nexport const AXBaseColorPickerMixin = _InteractiveComponenetMixin(\r\n  _DropdownComponenetMixin(_ValueComponenetMixin(_TextboxComponenetMixin(AXBaseComponent)))\r\n);\r\n\r\n/**\r\n * The Button is a component which detects user interaction and triggers a corresponding event\r\n *\r\n * @category Components\r\n */\r\n@Component({\r\n  selector: 'ax-color-picker',\r\n  templateUrl: './color-picker.component.html',\r\n  styleUrls: ['./color-picker.component.scss'],\r\n  inputs: [\r\n    'isOpen',\r\n    'fitParent',\r\n    'dropdownWidth',\r\n    'position',\r\n    'disabled',\r\n    'tabIndex',\r\n    'readonly',\r\n    'allowNull',\r\n    'value',\r\n    'name',\r\n    'checked',\r\n    'placeholder',\r\n    'maxLength',\r\n    'allowNull',\r\n    'type',\r\n    'autoComplete',\r\n    'readonly',\r\n    'allowNull',\r\n    'value',\r\n    'name',\r\n    'checked',\r\n  ],\r\n  outputs: ['onOpened', 'onClosed', 'onBlur', 'onFocus', 'valueChange', 'onValueChanged'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  providers: [{ provide: AXClosbaleComponent, useExisting: AXColorPickerComponent }],\r\n  host: { class: 'ax-editor-container ax-drop-down' },\r\n})\r\nexport class AXColorPickerComponent extends AXBaseColorPickerMixin {\r\n  @ViewChild(AXPopoverComponent, { static: true })\r\n  popover: AXPopoverComponent = null;\r\n\r\n  _target: HTMLDivElement;\r\n  _popoverTitle: string;\r\n  _popoverWidth: number;\r\n  _colorCode: string;\r\n  _mode: AXColorMode = 'hex';\r\n\r\n  _isMobile: boolean = false;\r\n  /**\r\n   *  @ignore\r\n   */\r\n  constructor(\r\n    protected _elementRef: ElementRef<HTMLDivElement>,\r\n    _cdr: ChangeDetectorRef,\r\n    private _zone: NgZone,\r\n    private _platform: AXPlatform\r\n  ) {\r\n    super(_elementRef, _cdr);\r\n    this._isMobile = this._platform.is('Mobile');\r\n    this._platform.resize.subscribe(() => {\r\n      this._isMobile = this._platform.is('Mobile');\r\n      this.popover.dispose();\r\n    });\r\n  }\r\n\r\n  _handleArrowClickEvent(e: MouseEvent) {\r\n    e.stopPropagation();\r\n    this.toggle();\r\n  }\r\n\r\n  _handleInputClickEvent(e: MouseEvent) {\r\n    e.stopPropagation();\r\n    this.toggle();\r\n  }\r\n\r\n  _handleClearClickEvent() {\r\n    this._setUserInteraction();\r\n    this.clear();\r\n  }\r\n\r\n  onInit() {\r\n    super.onInit();\r\n    this._target = this._elementRef.nativeElement;\r\n  }\r\n\r\n  onViewInit() {\r\n    super.onViewInit();\r\n  }\r\n\r\n  _onValueChanged(oldValue: any, newValue: any) {\r\n    super._onValueChanged(oldValue, newValue);\r\n    if (newValue != null) this._colorCode = AXColorUtil.toString(newValue);\r\n    else this._colorCode = '';\r\n  }\r\n\r\n  _handleValueChangedEvent(e: AXValueChangedEvent<any>) {\r\n    if (e.isUserInteraction) this._setUserInteraction();\r\n    this.value = e.value;\r\n  }\r\n\r\n  async _handlePopupOnOpened(e) {}\r\n\r\n  _handlePopupOnClosed(e) {\r\n    this.focus();\r\n  }\r\n\r\n  @HostListener('keydown', ['$event'])\r\n  _handleKeydown(e: KeyboardEvent) {\r\n    if (e.ctrlKey || e.code === 'Space') {\r\n      this.open();\r\n    }\r\n    e.preventDefault();\r\n  }\r\n}\r\n","<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n  <div *ngIf=\"value\" class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\r\n  <div class=\"color-value\">{{ _colorCode }}</div>\r\n</div>\r\n\r\n<button class=\"ax-editor-control\" [tabIndex]=\"-1\" [disabled]=\"disabled\" (click)=\"_handleArrowClickEvent($event)\">\r\n  <span class=\"ax-icon ax-icon-color-palette\"></span>\r\n</button>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopupOnOpened($event)\"\r\n  (onClosed)=\"_handlePopupOnClosed($event)\">\r\n  <div\r\n    class=\"ax-overlay-pane\"\r\n    [class.ax-w-full]=\"_isMobile\"\r\n    tabindex=\"0\"\r\n    aria-modal=\"true\"\r\n    cdkTrapFocus\r\n    [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n    <ax-color-palette [value]=\"value\" (onValueChanged)=\"_handleValueChangedEvent($event)\"> </ax-color-palette>\r\n  </div>\r\n</ax-popover>\r\n","import { CommonModule } from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { A11yModule } from '@angular/cdk/a11y';\r\nimport { AXTranslationModule } from '@acorex/core/translation';\r\nimport { AXButtonModule } from '@acorex/components/button';\r\nimport { AXDecoratorModule } from '@acorex/components/decorators';\r\nimport { AXPopoverModule } from '@acorex/components/popover';\r\nimport { AXCommonModule } from '@acorex/components/common';\r\nimport { AXTextBoxModule } from '@acorex/components/textbox';\r\nimport { AXLoadingModule } from '@acorex/components/loading';\r\nimport { AXColorPaletteModule } from '@acorex/components/color-palette';\r\n\r\nimport { AXColorPickerComponent } from './color-picker.component';\r\n\r\n@NgModule({\r\n    imports: [\r\n        CommonModule,\r\n        AXCommonModule,\r\n        FormsModule,\r\n        AXDecoratorModule,\r\n        AXPopoverModule,\r\n        AXButtonModule,\r\n        A11yModule,\r\n        AXLoadingModule,\r\n        AXTranslationModule,\r\n        AXTextBoxModule,\r\n        AXColorPaletteModule\r\n    ],\r\n    exports: [AXColorPickerComponent],\r\n    declarations: [AXColorPickerComponent],\r\n    providers: [],\r\n})\r\nexport class AXColorPickerModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}