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

class CheckboxComponent {
    disabled = model(false);
    checked = model(false);
    indeterminate = model(false);
    label = input('');
    _onChange = () => { };
    _onTouched = () => { };
    toggle() {
        if (this.disabled()) {
            return;
        }
        if (this.indeterminate()) {
            this.indeterminate.set(false);
            this.checked.set(false);
            this.emit(false);
        }
        else {
            const newValue = !this.checked();
            this.checked.set(newValue);
            this.emit(newValue);
        }
    }
    emit(value) {
        this._onChange(value);
        this.checked.set(value);
        this.indeterminate.set(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 } }, outputs: { disabled: "disabledChange", checked: "checkedChange", indeterminate: "indeterminateChange" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => CheckboxComponent),
                multi: true,
            },
        ], ngImport: i0, template: "<div\n    class=\"flex cursor-pointer select-none gap-3\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n    [attr.aria-disabled]=\"disabled()\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"toggle()\"\n    (blur)=\"onBlur()\"\n>\n    <div\n        class=\"flex h-5 w-5 items-center justify-center rounded border border-grayscale-30 transition-all duration-200 hover:border-grayscale-50\"\n        [ngClass]=\"{\n            'bg-primary hover:bg-tarawera-500': checked() || indeterminate(),\n            'bg-grayscale-0': !checked() && !indeterminate(),\n            'border-primary hover:border-tarawera-500': checked() || indeterminate(),\n            'opacity-50': disabled(),\n        }\"\n    >\n        @if (indeterminate()) {\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            >\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                >\n                    <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n                </svg>\n            }\n        }\n    </div>\n    <span\n        [class.opacity-50]=\"disabled()\"\n        class=\"text-grayscale-90\"\n    >\n        {{ label() }}\n    </span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
}
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=\"flex cursor-pointer select-none gap-3\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n    [attr.aria-disabled]=\"disabled()\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"toggle()\"\n    (blur)=\"onBlur()\"\n>\n    <div\n        class=\"flex h-5 w-5 items-center justify-center rounded border border-grayscale-30 transition-all duration-200 hover:border-grayscale-50\"\n        [ngClass]=\"{\n            'bg-primary hover:bg-tarawera-500': checked() || indeterminate(),\n            'bg-grayscale-0': !checked() && !indeterminate(),\n            'border-primary hover:border-tarawera-500': checked() || indeterminate(),\n            'opacity-50': disabled(),\n        }\"\n    >\n        @if (indeterminate()) {\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            >\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                >\n                    <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n                </svg>\n            }\n        }\n    </div>\n    <span\n        [class.opacity-50]=\"disabled()\"\n        class=\"text-grayscale-90\"\n    >\n        {{ label() }}\n    </span>\n</div>\n" }]
        }] });

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

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