import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, ChangeDetectorRef, input, booleanAttribute, model, output, computed, effect, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormControl, NgForm, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i3 from '@angular/material/checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
import * as i2 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import { sdIsEmpty, sdSerializeDataValue } from '@sdcorejs/angular/utilities/data-state';
import { sdViewedTransform, sdViewedInline, sdFormControlState, SdInlineErrorValidator } from '@sdcorejs/angular/forms/models';
import { TranslatePipe } from '@sdcorejs/angular/i18n';
import { Subscription } from 'rxjs';
import * as uuid from 'uuid';

class SdCheckbox {
    #ref = inject(ChangeDetectorRef);
    id = `I${uuid.v4()}`;
    #name = uuid.v4();
    formControl = new FormControl();
    #subscription = new Subscription();
    #model;
    // Inputs — all accept null|undefined at the boundary, transform to canonical shape
    autoIdInput = input(undefined, { ...(ngDevMode ? { debugName: "autoIdInput" } : /* istanbul ignore next */ {}), alias: 'autoId',
        transform: (v) => v ?? undefined });
    name = input(undefined, { ...(ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {}), transform: (v) => v ?? undefined });
    // why: parent may bind NgForm (template-driven), FormGroup (reactive), or a wrapper with `.form`.
    // Transform once at the input boundary so the rest of the component only deals with FormGroup.
    form = input(undefined, { ...(ngDevMode ? { debugName: "form" } : /* istanbul ignore next */ {}), transform: (val) => {
            if (!val)
                return undefined;
            if (val instanceof NgForm)
                return val.form;
            if (val instanceof FormGroup)
                return val;
            if (val?.form instanceof FormGroup)
                return val.form;
            return undefined;
        } });
    label = input(undefined, { ...(ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {}), transform: (v) => v ?? undefined });
    // why: full Color enum, áp dụng qua [data-sd-color] + SCSS override MDC vars.
    color = input('primary', { ...(ngDevMode ? { debugName: "color" } : /* istanbul ignore next */ {}), transform: (v) => v || 'primary' });
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */
    viewed = input(false, { ...(ngDevMode ? { debugName: "viewed" } : /* istanbul ignore next */ {}), transform: sdViewedTransform });
    // why: tri-state viewed — `'inline'` keeps the checkbox interactive; disabled `'inline'` → static.
    #viewedState = sdViewedInline(this.viewed, undefined, this.disabled);
    /** `true` when the static read-only view should render. */
    isViewed = this.#viewedState.isViewed;
    inlineError = input('', { ...(ngDevMode ? { debugName: "inlineError" } : /* istanbul ignore next */ {}), transform: (v) => v ?? '' });
    // Two-way model
    model = model(undefined, ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
    // Outputs (sdChange is in addition to auto-generated modelChange from `model` signal)
    sdChange = output();
    // Computed (template bindings)
    autoId = computed(() => (this.autoIdInput() ? `forms-checkbox-${this.autoIdInput()}` : undefined), ...(ngDevMode ? [{ debugName: "autoId" }] : /* istanbul ignore next */ []));
    #state = sdFormControlState(computed(() => this.formControl));
    dataDisabled = computed(() => (this.#state().disabled ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataDisabled" }] : /* istanbul ignore next */ []));
    dataEmpty = computed(() => (sdIsEmpty(this.#state().value) ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataEmpty" }] : /* istanbul ignore next */ []));
    dataValue = computed(() => sdSerializeDataValue(this.#state().value), ...(ngDevMode ? [{ debugName: "dataValue" }] : /* istanbul ignore next */ []));
    constructor() {
        // why: external [name] override falls back to generated uuid only when truthy
        effect(() => {
            const val = this.name();
            if (val)
                this.#name = val;
        });
        effect(() => {
            if (this.disabled())
                this.formControl.disable();
            else
                this.formControl.enable();
        });
        effect(() => {
            const value = this.model();
            if (this.#model !== value) {
                this.#model = value;
                this.formControl.setValue(value, { emitEvent: false });
            }
        });
        effect(() => {
            // touch dependency so validator re-attaches when inlineError changes
            this.inlineError();
            this.#updateValidator();
        });
    }
    ngAfterViewInit() {
        this.#subscription.add(this.formControl.valueChanges.subscribe(this.#onChange));
        this.form()?.addControl(this.#name, this.formControl);
        this.#ref.detectChanges();
    }
    ngOnDestroy() {
        this.form()?.removeControl(this.#name);
        this.#subscription.unsubscribe();
    }
    #onChange = (value) => {
        this.#model = value;
        this.model.set(value);
        this.sdChange.emit(value);
    };
    #updateValidator = () => {
        this.formControl.clearValidators();
        const validators = [];
        if (this.inlineError()) {
            validators.push(SdInlineErrorValidator);
        }
        this.formControl.setValidators(validators);
        this.formControl.updateValueAndValidity();
    };
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdCheckbox, isStandalone: true, selector: "sd-checkbox", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", sdChange: "sdChange" }, host: { properties: { "class.sd-c-primary": "color() === 'primary'", "class.sd-c-secondary": "color() === 'secondary'", "class.sd-c-info": "color() === 'info'", "class.sd-c-success": "color() === 'success'", "class.sd-c-warning": "color() === 'warning'", "class.sd-c-error": "color() === 'error'" } }, ngImport: i0, template: "@if (isViewed()) {\n  @if (label()) {\n    <div class=\"T14R text-black400\">{{ label() }}</div>\n  }\n  <div class=\"T14M\">{{ (model() ? 'core.form.checkbox.checked' : 'core.form.checkbox.unchecked') | translate }}</div>\n} @else {\n  <mat-checkbox\n    [formControl]=\"formControl\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-disabled]=\"dataDisabled()\"\n    [attr.data-empty]=\"dataEmpty()\"\n    [attr.data-value]=\"dataValue()\">\n    {{ label() }}\n  </mat-checkbox>\n  @if (formControl.errors?.['inlineError'] && formControl.touched) {\n    <mat-error>\n      {{ inlineError() }}\n    </mat-error>\n  }\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host ::ng-deep .mdc-label{margin-bottom:0}:host{--sd-c: var(--sd-primary)}:host(.sd-c-secondary){--sd-c: var(--sd-secondary)}:host(.sd-c-info){--sd-c: var(--sd-info)}:host(.sd-c-success){--sd-c: var(--sd-success)}:host(.sd-c-warning){--sd-c: var(--sd-warning)}:host(.sd-c-error){--sd-c: var(--sd-error)}:host ::ng-deep .mat-mdc-checkbox,:host ::ng-deep .mdc-checkbox{--mdc-checkbox-selected-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-focus-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-hover-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-pressed-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-focus-state-layer-color: var(--sd-c) !important;--mdc-checkbox-selected-hover-state-layer-color: var(--sd-c) !important;--mdc-checkbox-selected-pressed-state-layer-color: var(--sd-c) !important;--mat-checkbox-selected-icon-color: var(--sd-c) !important;--mat-checkbox-selected-focus-icon-color: var(--sd-c) !important;--mat-checkbox-selected-hover-icon-color: var(--sd-c) !important;--mat-checkbox-selected-pressed-icon-color: var(--sd-c) !important;--mat-checkbox-selected-focus-state-layer-color: var(--sd-c) !important;--mat-checkbox-selected-hover-state-layer-color: var(--sd-c) !important;--mat-checkbox-selected-pressed-state-layer-color: var(--sd-c) !important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdCheckbox, decorators: [{
            type: Component,
            args: [{ selector: 'sd-checkbox', standalone: true, host: {
                        // why: host class .sd-c-<x> + default sd-c-primary cho fallback. Thay data-sd-color
                        // để tránh edge case host-attr-binding không reactive trong vài cảnh build pipeline.
                        '[class.sd-c-primary]': "color() === 'primary'",
                        '[class.sd-c-secondary]': "color() === 'secondary'",
                        '[class.sd-c-info]': "color() === 'info'",
                        '[class.sd-c-success]': "color() === 'success'",
                        '[class.sd-c-warning]': "color() === 'warning'",
                        '[class.sd-c-error]': "color() === 'error'",
                    }, imports: [CommonModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatCheckboxModule, TranslatePipe], template: "@if (isViewed()) {\n  @if (label()) {\n    <div class=\"T14R text-black400\">{{ label() }}</div>\n  }\n  <div class=\"T14M\">{{ (model() ? 'core.form.checkbox.checked' : 'core.form.checkbox.unchecked') | translate }}</div>\n} @else {\n  <mat-checkbox\n    [formControl]=\"formControl\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-disabled]=\"dataDisabled()\"\n    [attr.data-empty]=\"dataEmpty()\"\n    [attr.data-value]=\"dataValue()\">\n    {{ label() }}\n  </mat-checkbox>\n  @if (formControl.errors?.['inlineError'] && formControl.touched) {\n    <mat-error>\n      {{ inlineError() }}\n    </mat-error>\n  }\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host ::ng-deep .mdc-label{margin-bottom:0}:host{--sd-c: var(--sd-primary)}:host(.sd-c-secondary){--sd-c: var(--sd-secondary)}:host(.sd-c-info){--sd-c: var(--sd-info)}:host(.sd-c-success){--sd-c: var(--sd-success)}:host(.sd-c-warning){--sd-c: var(--sd-warning)}:host(.sd-c-error){--sd-c: var(--sd-error)}:host ::ng-deep .mat-mdc-checkbox,:host ::ng-deep .mdc-checkbox{--mdc-checkbox-selected-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-focus-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-hover-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-pressed-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-focus-state-layer-color: var(--sd-c) !important;--mdc-checkbox-selected-hover-state-layer-color: var(--sd-c) !important;--mdc-checkbox-selected-pressed-state-layer-color: var(--sd-c) !important;--mat-checkbox-selected-icon-color: var(--sd-c) !important;--mat-checkbox-selected-focus-icon-color: var(--sd-c) !important;--mat-checkbox-selected-hover-icon-color: var(--sd-c) !important;--mat-checkbox-selected-pressed-icon-color: var(--sd-c) !important;--mat-checkbox-selected-focus-state-layer-color: var(--sd-c) !important;--mat-checkbox-selected-hover-state-layer-color: var(--sd-c) !important;--mat-checkbox-selected-pressed-state-layer-color: var(--sd-c) !important}\n"] }]
        }], ctorParameters: () => [], propDecorators: { autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], viewed: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewed", required: false }] }], inlineError: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineError", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], sdChange: [{ type: i0.Output, args: ["sdChange"] }] } });

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

export { SdCheckbox };
//# sourceMappingURL=sdcorejs-angular-forms-checkbox.mjs.map
