import * as i0 from '@angular/core';
import { input, output, inject, signal, effect, ViewChild, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { NgControl, Validators, FormsModule } from '@angular/forms';
import * as i2 from 'primeng/colorpicker';
import { ColorPickerModule } from 'primeng/colorpicker';
import { FieldValidation } from '@masterteam/components/field-validation';
import { TextField } from '@masterteam/components/text-field';
import { isInvalid } from '@masterteam/components';

class ColorPickerField {
    colorPicker;
    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
    variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : []));
    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
    pInputs = input(...(ngDevMode ? [undefined, { debugName: "pInputs" }] : []));
    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
    onChange = output();
    ngControl = inject(NgControl, { self: true });
    requiredValidator = Validators.required;
    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
    onTouched = () => { };
    onModelChange = () => { };
    isInvalid = isInvalid;
    constructor() {
        if (this.ngControl) {
            this.ngControl.valueAccessor = this;
        }
        // Effect to apply pInputs reactively when the pInputs signal changes
        effect(() => {
            const currentPInputs = this.pInputs();
            // Ensure colorPicker ViewChild is initialized and pInputs has a value
            // @ViewChild with static: true makes 'colorPicker' available during construction/ngOnInit
            if (this.colorPicker && currentPInputs) {
                this.applyInputsToColorPicker();
            }
        });
        // Effect to add required validator if required input is true
        effect(() => {
            if (this.ngControl.control && this.required()) {
                this.ngControl.control.addValidators(Validators.required);
                this.ngControl.control.updateValueAndValidity();
            }
            if (this.ngControl.control) {
                this.ngControl.control.addValidators(Validators.pattern(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/));
            }
        });
    }
    applyInputsToColorPicker() {
        const currentPInputs = this.pInputs();
        if (currentPInputs) {
            Object.assign(this.colorPicker, currentPInputs);
        }
    }
    onValueChange(value) {
        this.onModelChange(value);
        this.onTouched();
        this.value.set(value);
    }
    writeValue(value) {
        this.value.set(value);
    }
    registerOnChange(fn) {
        this.onModelChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(disabled) {
        this.disabled.set(disabled);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ColorPickerField, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ColorPickerField, isStandalone: true, selector: "mt-color-picker-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pInputs: { classPropertyName: "pInputs", publicName: "pInputs", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, host: { properties: { "class": "class()" } }, viewQueries: [{ propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-1 min-w-full\">\n  @if (label()) {\n    <label\n      [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n      [for]=\"ngControl?.name || label()\"\n      >{{ label() }}</label\n    >\n  }\n  <div\n    class=\"flex items-center hover:border-(--p-inputtext-hover-border-color)! p-inputtext\"\n    [class.bg-(--p-inputtext-filled-background)]=\"variant() === 'filled'\"\n    [class.border-(--p-inputtext-invalid-border-color)!]=\"\n      ngControl?.control?.invalid && ngControl?.control?.touched\n    \"\n  >\n    <p-colorpicker\n      #colorPicker=\"\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (onChange)=\"onChange.emit($event)\"\n      (blur)=\"onTouched()\"\n      [disabled]=\"disabled() || readonly()\"\n      [inputId]=\"ngControl?.name ? ngControl?.name?.toString() : label()\"\n      [class.ng-invalid]=\"ngControl?.control?.invalid\"\n      class=\"leading-none\"\n      [invalid]=\"isInvalid(ngControl?.control)\"\n    ></p-colorpicker>\n    <div class=\"ms-2 w-full\">\n      <mt-text-field\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"onValueChange($event)\"\n        (change)=\"onChange.emit($event)\"\n        (blur)=\"onTouched()\"\n        [disabled]=\"disabled() || readonly()\"\n        [class.ng-invalid]=\"ngControl?.control?.invalid\"\n        placeholder=\"No color selected\"\n        class=\"leading-none min-w-max p-0 input-no-border px-0\"\n        hint=\"Should be a hex color code, e.g. #ff5733 or #f00\"\n      ></mt-text-field>\n    </div>\n  </div>\n  <mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n</div>\n", styles: [":host{display:flex;align-items:center}::ng-deep .input-no-border .p-component{border:none;box-shadow:none;background-color:transparent;width:100%}::ng-deep .input-no-border .p-inputgroupaddon{border-inline:none;border-block-start:none;border-block-end:none;padding:0!important}::ng-deep .input-no-border .p-inputgroupaddon:last-child{border-inline-end:none}::ng-deep .p-inputtext .p-inputtext{padding:0!important}\n"], dependencies: [{ 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: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i2.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "showTransitionOptions", "hideTransitionOptions", "inline", "format", "tabindex", "inputId", "autoZIndex", "autofocus", "defaultColor", "appendTo", "overlayOptions", "motionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ColorPickerField, decorators: [{
            type: Component,
            args: [{ selector: 'mt-color-picker-field', standalone: true, imports: [FormsModule, ColorPickerModule, FieldValidation, TextField], host: {
                        '[class]': 'class()',
                    }, template: "<div class=\"flex flex-col gap-1 min-w-full\">\n  @if (label()) {\n    <label\n      [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n      [for]=\"ngControl?.name || label()\"\n      >{{ label() }}</label\n    >\n  }\n  <div\n    class=\"flex items-center hover:border-(--p-inputtext-hover-border-color)! p-inputtext\"\n    [class.bg-(--p-inputtext-filled-background)]=\"variant() === 'filled'\"\n    [class.border-(--p-inputtext-invalid-border-color)!]=\"\n      ngControl?.control?.invalid && ngControl?.control?.touched\n    \"\n  >\n    <p-colorpicker\n      #colorPicker=\"\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (onChange)=\"onChange.emit($event)\"\n      (blur)=\"onTouched()\"\n      [disabled]=\"disabled() || readonly()\"\n      [inputId]=\"ngControl?.name ? ngControl?.name?.toString() : label()\"\n      [class.ng-invalid]=\"ngControl?.control?.invalid\"\n      class=\"leading-none\"\n      [invalid]=\"isInvalid(ngControl?.control)\"\n    ></p-colorpicker>\n    <div class=\"ms-2 w-full\">\n      <mt-text-field\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"onValueChange($event)\"\n        (change)=\"onChange.emit($event)\"\n        (blur)=\"onTouched()\"\n        [disabled]=\"disabled() || readonly()\"\n        [class.ng-invalid]=\"ngControl?.control?.invalid\"\n        placeholder=\"No color selected\"\n        class=\"leading-none min-w-max p-0 input-no-border px-0\"\n        hint=\"Should be a hex color code, e.g. #ff5733 or #f00\"\n      ></mt-text-field>\n    </div>\n  </div>\n  <mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n</div>\n", styles: [":host{display:flex;align-items:center}::ng-deep .input-no-border .p-component{border:none;box-shadow:none;background-color:transparent;width:100%}::ng-deep .input-no-border .p-inputgroupaddon{border-inline:none;border-block-start:none;border-block-end:none;padding:0!important}::ng-deep .input-no-border .p-inputgroupaddon:last-child{border-inline-end:none}::ng-deep .p-inputtext .p-inputtext{padding:0!important}\n"] }]
        }], ctorParameters: () => [], propDecorators: { colorPicker: [{
                type: ViewChild,
                args: ['colorPicker', { static: true }]
            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], pInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "pInputs", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }] } });

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

export { ColorPickerField };
//# sourceMappingURL=masterteam-components-color-picker-field.mjs.map
