(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ngx-color-picker'), require('@wm/components/base'), require('@wm/core'), require('@wm/components/input')) :
    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'ngx-color-picker', '@wm/components/base', '@wm/core', '@wm/components/input'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = global.wm.components.input || {}, global.wm.components.input.colorpicker = {}), global.ng.core, global.ng.common, global.ng.forms, global.ngxColorpicker, global.wm.components.base, global.wm.core, global.wm.components.input));
})(this, (function (exports, i0, common, i2, i1, base, core, input) { 'use strict';

    function _interopNamespaceDefault(e) {
        var n = Object.create(null);
        if (e) {
            Object.keys(e).forEach(function (k) {
                if (k !== 'default') {
                    var d = Object.getOwnPropertyDescriptor(e, k);
                    Object.defineProperty(n, k, d.get ? d : {
                        enumerable: true,
                        get: function () { return e[k]; }
                    });
                }
            });
        }
        n.default = e;
        return Object.freeze(n);
    }

    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);

    const colorPickerProps = new Map([
        ['autoclose', { value: 'outsideClick', ...base.PROP_STRING }],
        ['class', base.PROP_STRING],
        ['datavalue', base.PROP_STRING],
        ['disabled', base.PROP_BOOLEAN],
        ['hint', base.PROP_STRING],
        ['arialabel', base.PROP_STRING],
        ['name', base.PROP_STRING],
        ['placeholder', { value: 'Select Color', ...base.PROP_STRING }],
        ['readonly', base.PROP_BOOLEAN],
        ['required', base.PROP_BOOLEAN],
        ['shortcutkey', base.PROP_STRING],
        ['show', { value: true, ...base.PROP_BOOLEAN }],
        ['tabindex', { value: 0, ...base.PROP_NUMBER }]
    ]);
    const registerProps = () => {
        base.register('wm-colorpicker', colorPickerProps);
        base.registerFormWidget(core.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 input.BaseFormCustomComponent {
        static { this.initializeProps = registerProps(); }
        constructor(inj, explicitContext) {
            super(inj, WIDGET_CONFIG, explicitContext);
            base.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) ? core.addClass(colorPickerContainer, 'hidden') : core.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 === base.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 === base.AUTOCLOSE_TYPE.OUTSIDECLICK || nv === base.AUTOCLOSE_TYPE.ALWAYS) ? true : false;
            }
            super.onPropertyChange(key, nv, ov);
        }
        static { this.ɵfac = function ColorPickerComponent_Factory(t) { return new (t || ColorPickerComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: ColorPickerComponent, selectors: [["", "wmColorPicker", ""]], viewQuery: function ColorPickerComponent_Query(rf, ctx) { if (rf & 1) {
                i0__namespace.ɵɵviewQuery(i2.NgModel, 5);
                i0__namespace.ɵɵviewQuery(_c0, 7, i0.ElementRef);
                i0__namespace.ɵɵviewQuery(i1.ColorPickerDirective, 5);
            } if (rf & 2) {
                let _t;
                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.ngModel = _t.first);
                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.cpDirective = _t.first);
            } }, features: [i0__namespace.ɵɵProvidersFeature([
                    base.provideAs(ColorPickerComponent, i2.NG_VALUE_ACCESSOR, true),
                    base.provideAs(ColorPickerComponent, i2.NG_VALIDATORS, true),
                    base.provideAsWidgetRef(ColorPickerComponent)
                ]), i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
                i0__namespace.ɵɵelementStart(0, "input", 1, 0);
                i0__namespace.ɵɵtwoWayListener("colorPickerChange", function ColorPickerComponent_Template_input_colorPickerChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
                i0__namespace.ɵɵlistener("colorPickerChange", function ColorPickerComponent_Template_input_colorPickerChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); })("cpToggleChange", function ColorPickerComponent_Template_input_cpToggleChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.colorPickerToggleChange($event)); })("colorPickerOpen", function ColorPickerComponent_Template_input_colorPickerOpen_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.colorPickerOpen($event)); });
                i0__namespace.ɵɵtwoWayListener("ngModelChange", function ColorPickerComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
                i0__namespace.ɵɵlistener("ngModelChange", function ColorPickerComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleChange($event)); })("blur", function ColorPickerComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.invokeOnTouched($event)); });
                i0__namespace.ɵɵelementEnd();
                i0__namespace.ɵɵelementStart(2, "span", 2)(3, "i", 3);
                i0__namespace.ɵɵtext(4, "\u00A0");
                i0__namespace.ɵɵelementEnd()();
            } if (rf & 2) {
                i0__namespace.ɵɵtwoWayProperty("colorPicker", ctx.datavalue);
                i0__namespace.ɵɵproperty("cpPosition", "bottom")("cpCloseClickOutside", ctx.outsideclick)("disabled", ctx.readonly || ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
                i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
                i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵpureFunction0(14, _c2));
                i0__namespace.ɵɵattribute("name", ctx.name)("aria-label", ctx.arialabel)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
                i0__namespace.ɵɵadvance(3);
                i0__namespace.ɵɵstyleProp("background-color", ctx.datavalue);
            } }, dependencies: [i1__namespace.ColorPickerDirective, i2__namespace.DefaultValueAccessor, i2__namespace.NgControlStatus, i2__namespace.RequiredValidator, i2__namespace.NgModel], encapsulation: 2 }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ColorPickerComponent, [{
            type: i0.Component,
            args: [{ selector: '[wmColorPicker]', providers: [
                        base.provideAs(ColorPickerComponent, i2.NG_VALUE_ACCESSOR, true),
                        base.provideAs(ColorPickerComponent, i2.NG_VALIDATORS, true),
                        base.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__namespace.Injector }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], { ngModel: [{
                type: i0.ViewChild,
                args: [i2.NgModel]
            }], inputEl: [{
                type: i0.ViewChild,
                args: ['input', { static: true, read: i0.ElementRef }]
            }], cpDirective: [{
                type: i0.ViewChild,
                args: [i1.ColorPickerDirective]
            }] }); })();
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵ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__namespace.ɵɵdefineNgModule({ type: ColorPickerModule }); }
        static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [common.CommonModule,
                i1.ColorPickerModule,
                i2.FormsModule,
                base.WmComponentsModule] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ColorPickerModule, [{
            type: i0.NgModule,
            args: [{
                    imports: [
                        common.CommonModule,
                        i1.ColorPickerModule,
                        i2.FormsModule,
                        base.WmComponentsModule
                    ],
                    declarations: [...components],
                    exports: [...components]
                }]
        }], null, null); })();
    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(ColorPickerModule, { declarations: [ColorPickerComponent], imports: [common.CommonModule,
            i1.ColorPickerModule,
            i2.FormsModule,
            base.WmComponentsModule], exports: [ColorPickerComponent] }); })();

    exports.ColorPickerComponent = ColorPickerComponent;
    exports.ColorPickerModule = ColorPickerModule;

}));
