import { MXInputBaseValueComponent, MXColorLookComponent, AXComponent, AXFocusableComponent, AXValuableComponent, AXClearableComponent } from '@acorex/cdk/common';
import { AXColorPalettePickerComponent, AXColorPaletteComponent, AXColorPaletteSwatchesComponent, AXColorPaletteInputComponent } from '@acorex/components/color-palette';
import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent } from '@acorex/components/dropdown';
import { NgStyle } from '@angular/common';
import * as i0 from '@angular/core';
import { input, viewChild, forwardRef, HostBinding, HostListener, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { classes } from 'polytype';

/**
 * A color box component that handles color selection and triggers relevant events.
 *
 * @category Components
 */
class AXColorBoxComponent extends classes(MXDropdownBoxBaseComponent, (MXInputBaseValueComponent), MXColorLookComponent) {
    constructor() {
        super(...arguments);
        //TODO: implement the color input component
        // @ViewChild(AXDateTimeInputComponent)
        // protected input: AXDateTimeInputComponent;
        this.showBadge = input(true, ...(ngDevMode ? [{ debugName: "showBadge" }] : []));
        this.showValue = input(true, ...(ngDevMode ? [{ debugName: "showValue" }] : []));
        this.showClearButton = input(true, ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
        this.showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
        this.palettePicker = viewChild(AXColorPalettePickerComponent, ...(ngDevMode ? [{ debugName: "palettePicker" }] : []));
    }
    /**
     *  @ignore
     */
    _handleModelChange(value) {
        this.commitValue(value, true);
    }
    /**
     *  @ignore
     */
    _handleArrowClickEvent(e) {
        e.stopPropagation();
        this.toggle();
    }
    /**
     *  @ignore
     */
    _handleInputClickEvent(e) {
        e.stopPropagation();
        this.toggle();
        this.palettePicker().parentColorChanged();
    }
    /**
     *  @ignore
     */
    _handleOnOpenedEvent(e) {
        //this.picker?.refresh();
        this.emitOnOpenedEvent();
    }
    /**
     *  @ignore
     */
    _handleOnClosedEvent(e) {
        this.focus();
        this.emitOnClosedEvent();
    }
    /**
     * Handles changes to the internal value.
     *
     * @param value - The new value of the component.
     * @ignore
     */
    internalValueChanged(value) {
        //this.close();
    }
    ngOnInit() {
        super.ngOnInit();
        this.registerValidation();
    }
    handleKeyboardEvent(event) {
        if (event.key !== 'Enter' && event.code !== 'Space')
            return;
        this.toggle();
        this.palettePicker().parentColorChanged();
    }
    get __hostName() {
        return this.name;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXColorBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXColorBoxComponent, isStandalone: true, selector: "ax-color-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onOpened: "onOpened", onClosed: "onClosed" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "keydown": "handleKeyboardEvent($event)" }, properties: { "attr.name": "this.__hostName" } }, providers: [
            { provide: AXComponent, useExisting: AXColorBoxComponent },
            { provide: AXFocusableComponent, useExisting: AXColorBoxComponent },
            { provide: AXValuableComponent, useExisting: AXColorBoxComponent },
            { provide: AXClearableComponent, useExisting: AXColorBoxComponent },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXColorBoxComponent),
                multi: true,
            },
        ], viewQueries: [{ propertyName: "palettePicker", first: true, predicate: AXColorPalettePickerComponent, descendants: true, isSignal: true }, { propertyName: "picker", first: true, predicate: AXColorPaletteComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n  [look]=\"look\"\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-content\" (click)=\"_handleInputClickEvent($event)\" [tabindex]=\"tabIndex\">\n      @if (value && showBadge()) {\n        <div class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\n      } @else {\n        <div class=\"color-placeholder\">{{ placeholder }}</div>\n      }\n      @if (showValue()) {\n        <div class=\"color-value\">{{ value }}</div>\n      }\n    </div>\n    @if (showClearButton()) {\n      @if (value && !disabled && !readonly) {\n        <ng-content select=\"ax-clear-button\"></ng-content>\n      }\n    }\n    @if (showIcon()) {\n      <button\n        [name]=\"name\"\n        type=\"button\"\n        class=\"ax-editor-button\"\n        [tabIndex]=\"-1\"\n        [disabled]=\"disabled\"\n        (click)=\"_handleArrowClickEvent($event)\"\n      >\n        <span class=\"ax-icon ax-icon-color-palette\"></span>\n      </button>\n    }\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-color-palette\n      [ngModel]=\"value\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      [disabled]=\"disabled\"\n      [name]=\"name\"\n      [readonly]=\"readonly\"\n    >\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-swatches></ax-color-palette-swatches>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </ng-container>\n</ax-dropdown-box>\n", styles: ["ax-color-box{--ax-comp-editor-decorator-button-x: 0;--ax-comp-editor-decorator-padding-x: 0;display:flex;flex:1 1 0%}ax-color-box .ax-editor-container{width:var(--ax-comp-color-box-width, 100%);font-size:var(--ax-comp-color-box-font-size, var(--ax-comp-editor-font-size))}ax-color-box .ax-editor-container .ax-content{gap:var(--ax-comp-color-box-gap, .75rem);display:flex;height:100%;flex:1 1 0%;align-items:center;outline:0!important}ax-color-box .ax-editor-container .ax-content .color-badge{width:var(--ax-comp-color-box-badge-width, 2.5rem);height:calc(100% - var(--ax-comp-color-box-gap, .75rem));display:block;border-radius:.25rem;border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface))}ax-color-box .ax-editor-container .ax-content .color-placeholder{font-size:inherit;font-weight:400;color:rgb(var(--ax-sys-color-input-text),.5)}ax-color-box .ax-editor-container .ax-content .color-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}ax-color-box .ax-editor-container .ax-clear-button{margin:0!important}\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXColorPaletteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXColorBoxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-color-box', inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'look'], outputs: [
                        'valueChange',
                        'stateChange',
                        'onValueChanged',
                        'onBlur',
                        'onFocus',
                        'readonlyChange',
                        'disabledChange',
                        'onOpened',
                        'onClosed',
                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                        { provide: AXComponent, useExisting: AXColorBoxComponent },
                        { provide: AXFocusableComponent, useExisting: AXColorBoxComponent },
                        { provide: AXValuableComponent, useExisting: AXColorBoxComponent },
                        { provide: AXClearableComponent, useExisting: AXColorBoxComponent },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXColorBoxComponent),
                            multi: true,
                        },
                    ], host: { ngSkipHydration: 'true' }, imports: [
                        AXDropdownBoxComponent,
                        NgStyle,
                        AXColorPaletteComponent,
                        FormsModule,
                        AXColorPalettePickerComponent,
                        AXColorPaletteSwatchesComponent,
                        AXColorPaletteInputComponent,
                    ], template: "<ax-dropdown-box\n  [look]=\"look\"\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-content\" (click)=\"_handleInputClickEvent($event)\" [tabindex]=\"tabIndex\">\n      @if (value && showBadge()) {\n        <div class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\n      } @else {\n        <div class=\"color-placeholder\">{{ placeholder }}</div>\n      }\n      @if (showValue()) {\n        <div class=\"color-value\">{{ value }}</div>\n      }\n    </div>\n    @if (showClearButton()) {\n      @if (value && !disabled && !readonly) {\n        <ng-content select=\"ax-clear-button\"></ng-content>\n      }\n    }\n    @if (showIcon()) {\n      <button\n        [name]=\"name\"\n        type=\"button\"\n        class=\"ax-editor-button\"\n        [tabIndex]=\"-1\"\n        [disabled]=\"disabled\"\n        (click)=\"_handleArrowClickEvent($event)\"\n      >\n        <span class=\"ax-icon ax-icon-color-palette\"></span>\n      </button>\n    }\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-color-palette\n      [ngModel]=\"value\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      [disabled]=\"disabled\"\n      [name]=\"name\"\n      [readonly]=\"readonly\"\n    >\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-swatches></ax-color-palette-swatches>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </ng-container>\n</ax-dropdown-box>\n", styles: ["ax-color-box{--ax-comp-editor-decorator-button-x: 0;--ax-comp-editor-decorator-padding-x: 0;display:flex;flex:1 1 0%}ax-color-box .ax-editor-container{width:var(--ax-comp-color-box-width, 100%);font-size:var(--ax-comp-color-box-font-size, var(--ax-comp-editor-font-size))}ax-color-box .ax-editor-container .ax-content{gap:var(--ax-comp-color-box-gap, .75rem);display:flex;height:100%;flex:1 1 0%;align-items:center;outline:0!important}ax-color-box .ax-editor-container .ax-content .color-badge{width:var(--ax-comp-color-box-badge-width, 2.5rem);height:calc(100% - var(--ax-comp-color-box-gap, .75rem));display:block;border-radius:.25rem;border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface))}ax-color-box .ax-editor-container .ax-content .color-placeholder{font-size:inherit;font-weight:400;color:rgb(var(--ax-sys-color-input-text),.5)}ax-color-box .ax-editor-container .ax-content .color-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}ax-color-box .ax-editor-container .ax-clear-button{margin:0!important}\n"] }]
        }], propDecorators: { picker: [{
                type: ViewChild,
                args: [AXColorPaletteComponent]
            }], dropdown: [{
                type: ViewChild,
                args: [AXDropdownBoxComponent]
            }], handleKeyboardEvent: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }], __hostName: [{
                type: HostBinding,
                args: ['attr.name']
            }] } });

class AXColorBoxModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXColorBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXColorBoxModule, imports: [AXColorBoxComponent], exports: [AXColorBoxComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXColorBoxModule, imports: [AXColorBoxComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXColorBoxModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [AXColorBoxComponent],
                    exports: [AXColorBoxComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { AXColorBoxComponent, AXColorBoxModule };
//# sourceMappingURL=acorex-components-color-box.mjs.map
