import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
const CHECKBOX_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CheckboxComponent),
    multi: true,
};
export class CheckboxComponent {
    constructor() {
        this.onChanged = (value) => { };
        this.onTouched = () => { };
    }
    writeValue(value) {
        this.checked = value ?? false;
    }
    registerOnChange(fn) {
        this.onChanged = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    valueChanged() {
        this.checked = !this.checked;
        this.onChanged(this.checked);
        this.onTouched();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxComponent, selector: "vui-checkbox", inputs: { disabled: "disabled", checked: "checked", indeterminateEnabled: "indeterminateEnabled" }, providers: [CHECKBOX_VALUE_ACCESSOR], ngImport: i0, template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\n    <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"valueChanged()\"/>\n    <span class=\"checkbox\">\n      <span class=\"inner\"></span>\n    </span>\n    <!-- svg for checkmark -->\n    <ng-container *ngIf=\"!indeterminateEnabled\">\n        <svg  class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n          </svg>\n    </ng-container>\n   \n    <ng-container *ngIf=\"indeterminateEnabled\">\n        <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path fill=\"none\" d=\"M37.9,27H14v-2h23.9V27z\"/>\n          </svg>\n    </ng-container>\n \n    <span class=\"value\"><ng-content></ng-content></span>\n  </label>\n  ", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;width:100%;position:relative;padding:0 0 0 16px}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:absolute;top:0;left:0;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px);-webkit-user-select:none;user-select:none}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7;pointer-events:none}label.disabled .checkbox,label.disabled .checkmark{opacity:.4!important}label.disabled .checkbox{background:#dbdbdb!important}.disabled{opacity:1!important;pointer-events:none;filter:unset!important}.checkmark{width:16px;height:16px;border-radius:2px;position:absolute;top:0;left:0;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vui-checkbox', providers: [CHECKBOX_VALUE_ACCESSOR], inputs: ['disabled', 'checked', 'indeterminateEnabled'], template: "<label class=\"checkbox-item\" [class.disabled]=\"disabled\">\n    <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"valueChanged()\"/>\n    <span class=\"checkbox\">\n      <span class=\"inner\"></span>\n    </span>\n    <!-- svg for checkmark -->\n    <ng-container *ngIf=\"!indeterminateEnabled\">\n        <svg  class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path class=\"checkmark__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\n          </svg>\n    </ng-container>\n   \n    <ng-container *ngIf=\"indeterminateEnabled\">\n        <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\n            <circle class=\"checkmark__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\n            <path fill=\"none\" d=\"M37.9,27H14v-2h23.9V27z\"/>\n          </svg>\n    </ng-container>\n \n    <span class=\"value\"><ng-content></ng-content></span>\n  </label>\n  ", styles: ["label.checkbox-item{display:inline-flex;align-items:center;cursor:pointer;margin:0;width:100%;position:relative;padding:0 0 0 16px}label.checkbox-item span{display:inline-flex;align-items:center;justify-content:center}label.checkbox-item span.checkbox{height:16px;width:16px;border-radius:2px;border:1px solid #dbdbdb;position:absolute;top:0;left:0;padding:2px;margin-top:0}label.checkbox-item span.value{color:#4e4e4e;font-size:14px;line-height:16px;font-weight:400;margin-left:10px;max-width:calc(100% - 26px);-webkit-user-select:none;user-select:none}label.checkbox-item span.value:empty{display:none}label.checkbox-item svg{display:none;margin-top:0}label.checkbox-item input[type=checkbox]{display:none}label.checkbox-item input[type=checkbox]:checked~svg{display:block}label.checkbox-item input[type=checkbox]:checked+.checkbox{display:none}label.checkbox-item input[type=checkbox]:disabled~*{opacity:.7;pointer-events:none}label.disabled .checkbox,label.disabled .checkmark{opacity:.4!important}label.disabled .checkbox{background:#dbdbdb!important}.disabled{opacity:1!important;pointer-events:none;filter:unset!important}.checkmark{width:16px;height:16px;border-radius:2px;position:absolute;top:0;left:0;stroke-width:4;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #34aa44}}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 