import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { model, input, output, signal, computed, forwardRef, Component } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

/**
 * @description Componente de caixa de seleção (checkbox) com suporte a três estados:
 * marcado, desmarcado e indeterminado. Implementa {@link ControlValueAccessor} para
 * integração com Reactive Forms e Template-driven Forms do Angular.
 *
 * @example
 * ```html
 * <s-checkbox
 *   formControlName="aceito"
 *   label="Aceito os termos de uso"
 *   [indeterminate]="parcialmenteSelecionado" />
 * ```
 *
 * @category Inputs
 */
class CheckboxComponent {
    /** @description Controla o estado desabilitado via two-way binding. @default false */
    disabled = model(false);
    /** @description Valor marcado/desmarcado do checkbox via two-way binding. @default false */
    checked = model(false);
    /** @description Quando `true`, o checkbox inicia no estado indeterminado (traço) até a primeira interação do usuário. @default false */
    indeterminate = input(false);
    /** @description Texto do label exibido ao lado do checkbox. @default '' */
    label = input('');
    /** @description Rótulo acessível para leitores de tela. Opcional, por padrão usa o valor de `label`. */
    ariaLabel = input(undefined);
    /** @description ID do elemento que descreve o checkbox (para usar `<label for="...">`). Opcional. */
    ariaLabelledBy = input(undefined);
    /**
     * @description Emitido quando o valor do checkbox é alterado pelo usuário.
     * Emite o novo valor booleano (`true` para marcado, `false` para desmarcado).
     */
    checkedChange = output();
    _onChange = () => { };
    _onTouched = () => { };
    _hasUserInteracted = signal(false);
    /**
     * @description Computed que indica se o estado indeterminado deve ser exibido.
     * Retorna `true` enquanto `indeterminate` for `true` e o usuário não tiver interagido.
     */
    isIndeterminate = computed(() => this.indeterminate() && !this._hasUserInteracted());
    toggle() {
        if (this.disabled()) {
            return;
        }
        if (this.indeterminate() && !this._hasUserInteracted()) {
            this._hasUserInteracted.set(true);
            this.checked.set(true);
            this.emit(true);
        }
        else {
            const newValue = !this.checked();
            this.checked.set(newValue);
            this.emit(newValue);
        }
    }
    emit(value) {
        this._onChange(value);
        this.checkedChange.emit(value);
    }
    writeValue(value) {
        this.checked.set(!!value);
    }
    registerOnChange(onChange) {
        this._onChange = onChange;
    }
    registerOnTouched(onTouched) {
        this._onTouched = onTouched;
    }
    setDisabledState(disabled) {
        this.disabled.set(disabled);
    }
    onBlur() {
        this._onTouched();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CheckboxComponent, isStandalone: true, selector: "s-checkbox", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checked: "checkedChange", checkedChange: "checkedChange" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => CheckboxComponent),
                multi: true,
            },
        ], ngImport: i0, template: "<div\n    class=\"group flex cursor-pointer select-none gap-3 outline-none\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : checked()\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || label() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"onBlur()\"\n>\n    <div\n        class=\"rounded flex h-5 w-5 flex-shrink-0 items-center justify-center border border-grayscale-30\n               transition-all duration-200 hover:border-grayscale-50\n               group-focus-visible:ring-2 group-focus-visible:ring-primary group-focus-visible:ring-offset-1\"\n        [class.bg-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:bg-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.bg-grayscale-0]=\"!checked() && !isIndeterminate()\"\n        [class.border-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:border-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.opacity-50]=\"disabled()\"\n    >\n        @if (isIndeterminate()) {\n            <svg\n                class=\"h-3 w-3 text-grayscale-0\"\n                fill=\"none\"\n                stroke=\"white\"\n                stroke-width=\"4\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                <path d=\"M6 12h12\" />\n            </svg>\n        } @else {\n            @if (checked()) {\n                <svg\n                    class=\"text-white h-3 w-3\"\n                    fill=\"none\"\n                    stroke=\"white\"\n                    stroke-width=\"4\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n                </svg>\n            }\n        }\n    </div>\n\n    @if (label()) {\n        <span\n            [class.opacity-50]=\"disabled()\"\n            class=\"text-grayscale-90 ml-2\"\n            aria-hidden=\"true\"\n        >\n            {{ label() }}\n        </span>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-checkbox', standalone: true, imports: [CommonModule], providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => CheckboxComponent),
                            multi: true,
                        },
                    ], template: "<div\n    class=\"group flex cursor-pointer select-none gap-3 outline-none\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : checked()\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || label() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"onBlur()\"\n>\n    <div\n        class=\"rounded flex h-5 w-5 flex-shrink-0 items-center justify-center border border-grayscale-30\n               transition-all duration-200 hover:border-grayscale-50\n               group-focus-visible:ring-2 group-focus-visible:ring-primary group-focus-visible:ring-offset-1\"\n        [class.bg-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:bg-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.bg-grayscale-0]=\"!checked() && !isIndeterminate()\"\n        [class.border-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:border-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.opacity-50]=\"disabled()\"\n    >\n        @if (isIndeterminate()) {\n            <svg\n                class=\"h-3 w-3 text-grayscale-0\"\n                fill=\"none\"\n                stroke=\"white\"\n                stroke-width=\"4\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                <path d=\"M6 12h12\" />\n            </svg>\n        } @else {\n            @if (checked()) {\n                <svg\n                    class=\"text-white h-3 w-3\"\n                    fill=\"none\"\n                    stroke=\"white\"\n                    stroke-width=\"4\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n                </svg>\n            }\n        }\n    </div>\n\n    @if (label()) {\n        <span\n            [class.opacity-50]=\"disabled()\"\n            class=\"text-grayscale-90 ml-2\"\n            aria-hidden=\"true\"\n        >\n            {{ label() }}\n        </span>\n    }\n</div>\n" }]
        }] });

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

export { CheckboxComponent };
//# sourceMappingURL=seniorsistemas-angular-components-checkbox.mjs.map
