import * as i0 from '@angular/core';
import { ElementRef, Component, Inject, Optional, ViewChild, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/forms';
import { NgModel, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
import * as i1 from 'ngx-color-picker';
import { ColorPickerDirective, ColorPickerModule as ColorPickerModule$1 } from 'ngx-color-picker';
import { PROP_STRING, PROP_BOOLEAN, PROP_NUMBER, register, registerFormWidget, styler, AUTOCLOSE_TYPE, provideAs, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
import { FormWidgetType, addClass, removeClass } from '@wm/core';
import { BaseFormCustomComponent } from '@wm/components/input';

const colorPickerProps = new Map([
    ['autoclose', { value: 'outsideClick', ...PROP_STRING }],
    ['class', PROP_STRING],
    ['datavalue', PROP_STRING],
    ['disabled', PROP_BOOLEAN],
    ['hint', PROP_STRING],
    ['arialabel', PROP_STRING],
    ['name', PROP_STRING],
    ['placeholder', { value: 'Select Color', ...PROP_STRING }],
    ['readonly', PROP_BOOLEAN],
    ['required', PROP_BOOLEAN],
    ['shortcutkey', PROP_STRING],
    ['show', { value: true, ...PROP_BOOLEAN }],
    ['tabindex', { value: 0, ...PROP_NUMBER }]
]);
const registerProps = () => {
    register('wm-colorpicker', colorPickerProps);
    registerFormWidget(FormWidgetType.COLORPICKER, new Map(colorPickerProps));
};

const _c0 = ["input"];
const _c1 = ["wmColorPicker", ""];
const _c2 = () => ({ updateOn: "change", standalone: true });
const DEFAULT_CLS = 'input-group app-colorpicker';
const WIDGET_CONFIG = {
    widgetType: 'wm-colorpicker',
    hostClass: DEFAULT_CLS,
    displayType: 'inline-block'
};
class ColorPickerComponent extends BaseFormCustomComponent {
    static { this.initializeProps = registerProps(); }
    constructor(inj, explicitContext) {
        super(inj, WIDGET_CONFIG, explicitContext);
        styler(this.nativeElement, this);
    }
    // To remove space occupied by colorpicker when it is closed
    colorPickerToggleChange(isOpen) {
        const colorPickerContainer = this.nativeElement.querySelector(`.color-picker`);
        if (colorPickerContainer) {
            (!isOpen) ? addClass(colorPickerContainer, 'hidden') : removeClass(colorPickerContainer, 'hidden');
        }
    }
    colorPickerOpen(value) {
        $('.hex-text input').attr('placeholder', 'Enter hex color code');
        // Whenever autoclose property is set to 'always', adding the onclick listener to the colorPicker container to close the picker.
        if (this.autoclose === AUTOCLOSE_TYPE.ALWAYS) {
            const colorPickerContainer = this.nativeElement.querySelector(`.color-picker`);
            colorPickerContainer.onclick = () => this.cpDirective.closeDialog();
        }
    }
    // This mehtod is used to show/open the colorpicker popup.
    open() {
        this.cpDirective.openDialog();
    }
    // This mehtod is used to hide/close the colorpicker popup.
    close() {
        this.cpDirective.closeDialog();
    }
    // change and blur events are added from the template
    handleEvent(node, eventName, callback, locals) {
        if (eventName !== 'change' && eventName !== 'blur') {
            super.handleEvent(this.inputEl.nativeElement, eventName, callback, locals);
        }
    }
    handleChange(newVal) {
        this.invokeOnChange(this.datavalue, { type: 'change' }, this.ngModel.valid);
    }
    onPropertyChange(key, nv, ov) {
        if (key === 'tabindex') {
            return;
        }
        if (key === 'required') {
            /* WMS-18269 | Update Angular about the required attr value change */
            this._onChange(this.datavalue);
            return;
        }
        if (key === 'datavalue') {
            this._onChange(nv);
            return;
        }
        if (key === 'autoclose') {
            this.outsideclick = (nv === AUTOCLOSE_TYPE.OUTSIDECLICK || nv === AUTOCLOSE_TYPE.ALWAYS) ? true : false;
        }
        super.onPropertyChange(key, nv, ov);
    }
    static { this.ɵfac = function ColorPickerComponent_Factory(t) { return new (t || ColorPickerComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ColorPickerComponent, selectors: [["", "wmColorPicker", ""]], viewQuery: function ColorPickerComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(NgModel, 5);
            i0.ɵɵviewQuery(_c0, 7, ElementRef);
            i0.ɵɵviewQuery(ColorPickerDirective, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.cpDirective = _t.first);
        } }, features: [i0.ɵɵProvidersFeature([
                provideAs(ColorPickerComponent, NG_VALUE_ACCESSOR, true),
                provideAs(ColorPickerComponent, NG_VALIDATORS, true),
                provideAsWidgetRef(ColorPickerComponent)
            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 5, vars: 15, consts: [["input", ""], ["aria-haspopup", "true", "focus-target", "", 1, "form-control", "app-textbox", 3, "colorPickerChange", "cpToggleChange", "colorPickerOpen", "ngModelChange", "blur", "colorPicker", "cpPosition", "cpCloseClickOutside", "disabled", "required", "tabindex", "ngModel", "ngModelOptions"], [1, "input-group-addon", "colorpicker-container"], [1, "colored-box"]], template: function ColorPickerComponent_Template(rf, ctx) { if (rf & 1) {
            const _r1 = i0.ɵɵgetCurrentView();
            i0.ɵɵelementStart(0, "input", 1, 0);
            i0.ɵɵtwoWayListener("colorPickerChange", function ColorPickerComponent_Template_input_colorPickerChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
            i0.ɵɵlistener("colorPickerChange", function ColorPickerComponent_Template_input_colorPickerChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); })("cpToggleChange", function ColorPickerComponent_Template_input_cpToggleChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.colorPickerToggleChange($event)); })("colorPickerOpen", function ColorPickerComponent_Template_input_colorPickerOpen_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.colorPickerOpen($event)); });
            i0.ɵɵtwoWayListener("ngModelChange", function ColorPickerComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
            i0.ɵɵlistener("ngModelChange", function ColorPickerComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); })("blur", function ColorPickerComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.invokeOnTouched($event)); });
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(2, "span", 2)(3, "i", 3);
            i0.ɵɵtext(4, "\u00A0");
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵtwoWayProperty("colorPicker", ctx.datavalue);
            i0.ɵɵproperty("cpPosition", "bottom")("cpCloseClickOutside", ctx.outsideclick)("disabled", ctx.readonly || ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
            i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
            i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(14, _c2));
            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.arialabel)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
            i0.ɵɵadvance(3);
            i0.ɵɵstyleProp("background-color", ctx.datavalue);
        } }, dependencies: [i1.ColorPickerDirective, i2.DefaultValueAccessor, i2.NgControlStatus, i2.RequiredValidator, i2.NgModel], encapsulation: 2 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ColorPickerComponent, [{
        type: Component,
        args: [{ selector: '[wmColorPicker]', providers: [
                    provideAs(ColorPickerComponent, NG_VALUE_ACCESSOR, true),
                    provideAs(ColorPickerComponent, NG_VALIDATORS, true),
                    provideAsWidgetRef(ColorPickerComponent)
                ], template: "<input aria-haspopup=\"true\" class=\"form-control app-textbox\"\n       #input\n       focus-target\n       [attr.name]=\"name\"\n       [attr.aria-label]=\"arialabel\"\n       [(colorPicker)]=\"datavalue\"\n       (colorPickerChange)=\"handleChange($event);\"\n       (cpToggleChange)=\"colorPickerToggleChange($event)\"\n       [cpPosition]=\"'bottom'\"\n       [cpCloseClickOutside]=\"outsideclick\"\n       (colorPickerOpen)=\"colorPickerOpen($event)\"\n       [attr.placeholder]=\"placeholder\"\n       [disabled]=\"readonly || disabled\"\n       [required]=\"required\"\n       [tabindex]=\"tabindex\"\n       [(ngModel)]=\"datavalue\"\n       (ngModelChange)=\"handleChange($event);\"\n       [ngModelOptions]=\"{updateOn: 'change', standalone: true}\"\n       (blur)=\"invokeOnTouched($event)\"\n       [attr.accesskey]=\"shortcutkey\">\n<span class=\"input-group-addon colorpicker-container\">\n    <i class=\"colored-box\" [style.backgroundColor]=\"datavalue\">&nbsp;</i>\n</span>\n" }]
    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], { ngModel: [{
            type: ViewChild,
            args: [NgModel]
        }], inputEl: [{
            type: ViewChild,
            args: ['input', { static: true, read: ElementRef }]
        }], cpDirective: [{
            type: ViewChild,
            args: [ColorPickerDirective]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ColorPickerComponent, { className: "ColorPickerComponent", filePath: "color-picker.component.ts", lineNumber: 27 }); })();

const components = [
    ColorPickerComponent
];
class ColorPickerModule {
    static { this.ɵfac = function ColorPickerModule_Factory(t) { return new (t || ColorPickerModule)(); }; }
    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ColorPickerModule }); }
    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
            ColorPickerModule$1,
            FormsModule,
            WmComponentsModule] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ColorPickerModule, [{
        type: NgModule,
        args: [{
                imports: [
                    CommonModule,
                    ColorPickerModule$1,
                    FormsModule,
                    WmComponentsModule
                ],
                declarations: [...components],
                exports: [...components]
            }]
    }], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ColorPickerModule, { declarations: [ColorPickerComponent], imports: [CommonModule,
        ColorPickerModule$1,
        FormsModule,
        WmComponentsModule], exports: [ColorPickerComponent] }); })();

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

export { ColorPickerComponent, ColorPickerModule };
//# sourceMappingURL=index.mjs.map
