import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "primeng/colorpicker";
import * as i3 from "@angular/forms";
import * as i4 from "primeng/inputtext";
import * as i5 from "../validation-messages/validation-messages.component";
let ColorPickerComponent = class ColorPickerComponent {
    constructor() { }
    ngOnInit() {
        this.color = this.control.value;
        this.control.valueChanges.pipe(untilDestroyed(this)).subscribe(event => {
            // console.log('valueChanges >>>', event);
            if (event != this.color) {
                // console.log('changed');
                this.onPickerChange(event);
            }
        });
    }
    onPickerChange(event) {
        this.color = event;
    }
    onInputChange(event) {
        this.control.setValue(event);
    }
    markAsTouched() {
        this.control.markAsTouched();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: ColorPickerComponent, selector: "smz-color-picker", inputs: { input: "input", control: "control", behaviors: "behaviors" }, ngImport: i0, template: "<label *ngIf=\"input.hideLabel != true\" class=\"smz__input_name\" [innerHTML]=\"input.name\"></label>\r\n<div class=\"input_inner__wrapper grid grid-nogutter items-center justify-start flex-nowrap mt-1\">\r\n    <p-colorPicker\r\n        [id]=\"input.propertyName\"\r\n        class=\"smz__input_value\"\r\n        appendTo=\"body\"\r\n        [formControl]=\"control\">\r\n    </p-colorPicker>\r\n    <div class=\"flex-grow\">\r\n        <input\r\n        #colorinput\r\n        class=\"smz__input_value colorpicker-hexa-input ml-2\"\r\n        pInputText\r\n        [disabled]=\"input.isDisabled\"\r\n        [(ngModel)]=\"color\"\r\n        (keyup)=\"onInputChange(colorinput.value)\"\r\n        (blur)=\"markAsTouched()\"/>\r\n    </div>\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ColorPicker, selector: "p-colorPicker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.ValidationMessagesComponent, selector: "smz-validation-messages", inputs: ["input", "control", "behaviors", "extraMessages"] }] }); }
};
ColorPickerComponent = __decorate([
    UntilDestroy()
], ColorPickerComponent);
export { ColorPickerComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'smz-color-picker', template: "<label *ngIf=\"input.hideLabel != true\" class=\"smz__input_name\" [innerHTML]=\"input.name\"></label>\r\n<div class=\"input_inner__wrapper grid grid-nogutter items-center justify-start flex-nowrap mt-1\">\r\n    <p-colorPicker\r\n        [id]=\"input.propertyName\"\r\n        class=\"smz__input_value\"\r\n        appendTo=\"body\"\r\n        [formControl]=\"control\">\r\n    </p-colorPicker>\r\n    <div class=\"flex-grow\">\r\n        <input\r\n        #colorinput\r\n        class=\"smz__input_value colorpicker-hexa-input ml-2\"\r\n        pInputText\r\n        [disabled]=\"input.isDisabled\"\r\n        [(ngModel)]=\"color\"\r\n        (keyup)=\"onInputChange(colorinput.value)\"\r\n        (blur)=\"markAsTouched()\"/>\r\n    </div>\r\n    <smz-validation-messages [input]=\"input\" [control]=\"control\" [behaviors]=\"behaviors\"></smz-validation-messages>\r\n</div>" }]
        }], ctorParameters: () => [], propDecorators: { input: [{
                type: Input
            }], control: [{
                type: Input
            }], behaviors: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 