import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
import * as i3 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { __decorate, __metadata } from 'tslib';
import * as i1 from 'ng-devui/utils';
import { WithConfig } from 'ng-devui/utils';
import { isArray } from 'lodash-es';

class CheckBoxComponent {
    constructor(changeDetectorRef, devConfigService) {
        this.changeDetectorRef = changeDetectorRef;
        this.devConfigService = devConfigService;
        this.disabled = false;
        this.isShowTitle = true;
        this.halfchecked = false;
        this.showAnimation = true;
        this.change = new EventEmitter();
        this.animationUnlocked = false;
        this.onChange = (_) => null;
        this.onTouch = () => null;
        this.id = CheckBoxComponent.ID_SEED++;
    }
    writeValue(checked) {
        if (this.animationUnlocked || checked !== null) {
            this.checked = !!checked;
            this.changeDetectorRef.markForCheck();
            this.unlockAnimation();
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouch = fn;
    }
    toggle($event) {
        this.canChange().then((val) => {
            if (this.disabled || !val) {
                return;
            }
            this.checked = !this.checked;
            this.onChange(this.checked);
            this.change.next(this.checked);
            this.onTouch();
        });
    }
    unlockAnimation() {
        if (!this.animationUnlocked) {
            setTimeout(() => {
                this.animationUnlocked = true;
            }, 0);
        }
    }
    canChange() {
        let changeResult = Promise.resolve(true);
        if (this.beforeChange) {
            const result = this.beforeChange(this.label);
            if (typeof result !== 'undefined') {
                if (result.then) {
                    changeResult = result;
                }
                else if (result.subscribe) {
                    changeResult = result.toPromise();
                }
                else {
                    changeResult = Promise.resolve(result);
                }
            }
        }
        return changeResult;
    }
    ngOnChanges(changes) {
        if (Object.prototype.hasOwnProperty.call(changes, 'halfchecked')) {
            this.unlockAnimation();
        }
    }
}
CheckBoxComponent.ID_SEED = 0;
CheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CheckBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DevConfigService }], target: i0.ɵɵFactoryTarget.Component });
CheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: CheckBoxComponent, selector: "d-checkbox", inputs: { name: "name", label: "label", cssClass: "cssClass", color: "color", disabled: "disabled", isShowTitle: "isShowTitle", title: "title", labelTemplate: "labelTemplate", halfchecked: "halfchecked", showAnimation: "showAnimation", beforeChange: "beforeChange" }, outputs: { change: "change" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => CheckBoxComponent),
            multi: true,
        },
    ], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"devui-checkbox {{ cssClass }}\"\n  [ngClass]=\"{\n    active: checked,\n    halfchecked: halfchecked,\n    disabled: disabled,\n    unchecked: !checked\n  }\"\n>\n  <label title=\"{{ isShowTitle ? title || label : '' }}\" (click)=\"toggle($event)\">\n    <input\n      [name]=\"name || 'checkbox-' + id\"\n      class=\"devui-checkbox-input\"\n      type=\"checkbox\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      [indeterminate]=\"halfchecked\"\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"$event.stopPropagation()\"\n    />\n    <span\n      class=\"devui-checkbox-material\"\n      [ngStyle]=\"{\n        'border-color': (checked || halfchecked) && color ? color : '',\n        'background-image': (color && halfchecked) || color ? 'linear-gradient(' + color + ', ' + color + ')' : '',\n        'background-color': color && halfchecked ? color : ''\n      }\"\n      [ngClass]=\"{\n        'custom-color': color,\n        'devui-checkbox-no-label': !label && !labelTemplate,\n        'devui-no-animation': !showAnimation || !animationUnlocked,\n        'devui-checkbox-default-background': !halfchecked\n      }\"\n    >\n      <span class=\"devui-checkbox-halfchecked-bg\"></span>\n      <svg\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        class=\"devui-checkbox-tick\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <polygon\n            fill-rule=\"nonzero\"\n            points=\"5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043\"\n            class=\"devui-tick\"\n            [ngClass]=\"{\n              'devui-no-animation': !showAnimation || !animationUnlocked\n            }\"\n          ></polygon>\n        </g>\n      </svg>\n    </span>\n    <ng-template [ngIf]=\"!!label && !labelTemplate\">{{ label }}</ng-template>\n    <ng-template\n      [ngIf]=\"!!labelTemplate\"\n      [ngTemplateOutlet]=\"labelTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: this, checked: checked, halfchecked: halfchecked, disabled: disabled, label: label }\"\n    >\n    </ng-template>\n  </label>\n</div>\n", styles: [".devui-checkbox{position:relative;display:flex;display:-ms-flexbox;align-items:center;-ms-flex-align:center;height:100%;margin:0}.devui-checkbox .devui-checkbox-tick{position:absolute}.devui-checkbox .devui-checkbox-tick .devui-tick{fill:#fff;fill:var(--devui-light-text, #ffffff);stroke-dashoffset:50;opacity:0;transform:scale(0);transform-origin:50% 50%;transition:stroke-dashoffset .2s cubic-bezier(.5,.05,.5,.95),opacity .2s cubic-bezier(.5,.05,.5,.95),transform .2s cubic-bezier(.5,.05,.5,.95);transition:stroke-dashoffset var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),opacity var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-checkbox.active:not(.halfchecked) .devui-tick{opacity:1;stroke-dashoffset:0;transform:scale(1);transition:stroke-dashoffset .3s cubic-bezier(.5,.05,.5,.95),opacity .2s cubic-bezier(.5,.05,.5,.95);transition:stroke-dashoffset var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),opacity var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-checkbox.active:not(.disabled) .devui-checkbox-material:not(.custom-color),.devui-checkbox.halfchecked:not(.disabled) .devui-checkbox-material:not(.custom-color){border-color:#5e7ce0;border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active:not(.disabled) .devui-checkbox-material{background-size:100% 100%;transition:background-size .2s cubic-bezier(.5,.05,.5,.95),border-color .2s cubic-bezier(.5,.05,.5,.95);transition:background-size var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),border-color var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox-material:not(.custom-color){background-size:0% 0%;transition:background-size .2s cubic-bezier(.5,.05,.5,.95),border-color .2s cubic-bezier(.5,.05,.5,.95);transition:background-size var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),border-color var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox-material:not(.custom-color):hover{border-color:#252b3a;border-color:var(--devui-icon-fill-active, #252b3a)}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox-material.custom-color{background-size:0% 0%;transition:background-size .2s cubic-bezier(.5,.05,.5,.95),border-color .2s cubic-bezier(.5,.05,.5,.95);transition:background-size var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),border-color var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-checkbox.halfchecked .devui-checkbox-material:not(.custom-color){background-color:#5e7ce0;background-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.halfchecked .devui-checkbox-material:not(.custom-color)>.devui-checkbox-halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.5,.05,.5,.95);transition:transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95));background-color:#fff;background-color:var(--devui-light-text, #ffffff)}.devui-checkbox.halfchecked .devui-checkbox-material.custom-color>.devui-checkbox-halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.5,.05,.5,.95);transition:transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95));background-color:#fff;background-color:var(--devui-light-text, #ffffff)}.devui-checkbox .devui-checkbox-material{text-align:left;text-align:initial;height:14px;width:14px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:1px solid #d7d8da;border:1px solid var(--devui-line, #d7d8da);border-radius:2px;border-radius:var(--devui-border-radius, 2px);background:linear-gradient(#5e7ce0,#5e7ce0) no-repeat center/0%;background:linear-gradient(var(--devui-brand, #5e7ce0),var(--devui-brand, #5e7ce0)) no-repeat center/0%;margin-right:8px;vertical-align:text-bottom}.devui-checkbox .devui-checkbox-material.devui-checkbox-default-background{background-color:#fff;background-color:var(--devui-base-bg, #ffffff)}.devui-checkbox .devui-checkbox-material.devui-checkbox-no-label{margin-right:0}.devui-checkbox .devui-checkbox-material>.devui-checkbox-halfchecked-bg{display:inline-block;position:absolute;content:\"\";background-color:#fff;background-color:var(--devui-light-text, #ffffff);top:0;left:0;height:100%;width:100%;transform:scale(1);opacity:0}.devui-checkbox .devui-checkbox-material>svg{width:14px;height:14px}.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):focus,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):active,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):hover{background-color:#252b3a;background-color:var(--devui-icon-fill-active, #252b3a)}.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):active,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):focus,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):hover:active,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):hover:focus{background-color:#344899;background-color:var(--devui-brand-active-focus, #344899)}.devui-checkbox-input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox label{position:relative;font-weight:400;height:16px;line-height:16px;cursor:pointer;color:#252b3a;color:var(--devui-text, #252b3a);margin:0;display:block}.devui-checkbox label>span{display:inline-block;box-sizing:content-box;vertical-align:top}.devui-checkbox.disabled label{cursor:not-allowed;color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3)}.devui-checkbox.disabled .devui-checkbox-material{border-color:#beccfa;border-color:var(--devui-icon-fill-active-disabled, #beccfa);background-color:#beccfa;background-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox.disabled.unchecked .devui-checkbox-material{border-color:#dfe1e6;border-color:var(--devui-disabled-line, #dfe1e6);background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5)}.devui-checkbox.disabled.halfchecked .devui-checkbox-material{background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5)}.devui-checkbox.disabled.halfchecked .devui-checkbox-material .devui-checkbox-halfchecked-bg{transform:scale(.4288);background-color:#cfd0d3;background-color:var(--devui-disabled-text, #cfd0d3);opacity:1}.devui-checkbox.disabled.active svg polygon{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-no-animation{transition:none!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
__decorate([
    WithConfig(),
    __metadata("design:type", Object)
], CheckBoxComponent.prototype, "showAnimation", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CheckBoxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => CheckBoxComponent),
                            multi: true,
                        },
                    ], preserveWhitespaces: false, template: "<div\n  class=\"devui-checkbox {{ cssClass }}\"\n  [ngClass]=\"{\n    active: checked,\n    halfchecked: halfchecked,\n    disabled: disabled,\n    unchecked: !checked\n  }\"\n>\n  <label title=\"{{ isShowTitle ? title || label : '' }}\" (click)=\"toggle($event)\">\n    <input\n      [name]=\"name || 'checkbox-' + id\"\n      class=\"devui-checkbox-input\"\n      type=\"checkbox\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      [indeterminate]=\"halfchecked\"\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"$event.stopPropagation()\"\n    />\n    <span\n      class=\"devui-checkbox-material\"\n      [ngStyle]=\"{\n        'border-color': (checked || halfchecked) && color ? color : '',\n        'background-image': (color && halfchecked) || color ? 'linear-gradient(' + color + ', ' + color + ')' : '',\n        'background-color': color && halfchecked ? color : ''\n      }\"\n      [ngClass]=\"{\n        'custom-color': color,\n        'devui-checkbox-no-label': !label && !labelTemplate,\n        'devui-no-animation': !showAnimation || !animationUnlocked,\n        'devui-checkbox-default-background': !halfchecked\n      }\"\n    >\n      <span class=\"devui-checkbox-halfchecked-bg\"></span>\n      <svg\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        class=\"devui-checkbox-tick\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <polygon\n            fill-rule=\"nonzero\"\n            points=\"5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043\"\n            class=\"devui-tick\"\n            [ngClass]=\"{\n              'devui-no-animation': !showAnimation || !animationUnlocked\n            }\"\n          ></polygon>\n        </g>\n      </svg>\n    </span>\n    <ng-template [ngIf]=\"!!label && !labelTemplate\">{{ label }}</ng-template>\n    <ng-template\n      [ngIf]=\"!!labelTemplate\"\n      [ngTemplateOutlet]=\"labelTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: this, checked: checked, halfchecked: halfchecked, disabled: disabled, label: label }\"\n    >\n    </ng-template>\n  </label>\n</div>\n", styles: [".devui-checkbox{position:relative;display:flex;display:-ms-flexbox;align-items:center;-ms-flex-align:center;height:100%;margin:0}.devui-checkbox .devui-checkbox-tick{position:absolute}.devui-checkbox .devui-checkbox-tick .devui-tick{fill:#fff;fill:var(--devui-light-text, #ffffff);stroke-dashoffset:50;opacity:0;transform:scale(0);transform-origin:50% 50%;transition:stroke-dashoffset .2s cubic-bezier(.5,.05,.5,.95),opacity .2s cubic-bezier(.5,.05,.5,.95),transform .2s cubic-bezier(.5,.05,.5,.95);transition:stroke-dashoffset var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),opacity var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-checkbox.active:not(.halfchecked) .devui-tick{opacity:1;stroke-dashoffset:0;transform:scale(1);transition:stroke-dashoffset .3s cubic-bezier(.5,.05,.5,.95),opacity .2s cubic-bezier(.5,.05,.5,.95);transition:stroke-dashoffset var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),opacity var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-checkbox.active:not(.disabled) .devui-checkbox-material:not(.custom-color),.devui-checkbox.halfchecked:not(.disabled) .devui-checkbox-material:not(.custom-color){border-color:#5e7ce0;border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active:not(.disabled) .devui-checkbox-material{background-size:100% 100%;transition:background-size .2s cubic-bezier(.5,.05,.5,.95),border-color .2s cubic-bezier(.5,.05,.5,.95);transition:background-size var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),border-color var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox-material:not(.custom-color){background-size:0% 0%;transition:background-size .2s cubic-bezier(.5,.05,.5,.95),border-color .2s cubic-bezier(.5,.05,.5,.95);transition:background-size var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),border-color var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox-material:not(.custom-color):hover{border-color:#252b3a;border-color:var(--devui-icon-fill-active, #252b3a)}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox-material.custom-color{background-size:0% 0%;transition:background-size .2s cubic-bezier(.5,.05,.5,.95),border-color .2s cubic-bezier(.5,.05,.5,.95);transition:background-size var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),border-color var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-checkbox.halfchecked .devui-checkbox-material:not(.custom-color){background-color:#5e7ce0;background-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.halfchecked .devui-checkbox-material:not(.custom-color)>.devui-checkbox-halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.5,.05,.5,.95);transition:transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95));background-color:#fff;background-color:var(--devui-light-text, #ffffff)}.devui-checkbox.halfchecked .devui-checkbox-material.custom-color>.devui-checkbox-halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.5,.05,.5,.95);transition:transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95));background-color:#fff;background-color:var(--devui-light-text, #ffffff)}.devui-checkbox .devui-checkbox-material{text-align:left;text-align:initial;height:14px;width:14px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:1px solid #d7d8da;border:1px solid var(--devui-line, #d7d8da);border-radius:2px;border-radius:var(--devui-border-radius, 2px);background:linear-gradient(#5e7ce0,#5e7ce0) no-repeat center/0%;background:linear-gradient(var(--devui-brand, #5e7ce0),var(--devui-brand, #5e7ce0)) no-repeat center/0%;margin-right:8px;vertical-align:text-bottom}.devui-checkbox .devui-checkbox-material.devui-checkbox-default-background{background-color:#fff;background-color:var(--devui-base-bg, #ffffff)}.devui-checkbox .devui-checkbox-material.devui-checkbox-no-label{margin-right:0}.devui-checkbox .devui-checkbox-material>.devui-checkbox-halfchecked-bg{display:inline-block;position:absolute;content:\"\";background-color:#fff;background-color:var(--devui-light-text, #ffffff);top:0;left:0;height:100%;width:100%;transform:scale(1);opacity:0}.devui-checkbox .devui-checkbox-material>svg{width:14px;height:14px}.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):focus,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):active,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):hover{background-color:#252b3a;background-color:var(--devui-icon-fill-active, #252b3a)}.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):active,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):focus,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):hover:active,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):hover:focus{background-color:#344899;background-color:var(--devui-brand-active-focus, #344899)}.devui-checkbox-input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox label{position:relative;font-weight:400;height:16px;line-height:16px;cursor:pointer;color:#252b3a;color:var(--devui-text, #252b3a);margin:0;display:block}.devui-checkbox label>span{display:inline-block;box-sizing:content-box;vertical-align:top}.devui-checkbox.disabled label{cursor:not-allowed;color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3)}.devui-checkbox.disabled .devui-checkbox-material{border-color:#beccfa;border-color:var(--devui-icon-fill-active-disabled, #beccfa);background-color:#beccfa;background-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox.disabled.unchecked .devui-checkbox-material{border-color:#dfe1e6;border-color:var(--devui-disabled-line, #dfe1e6);background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5)}.devui-checkbox.disabled.halfchecked .devui-checkbox-material{background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5)}.devui-checkbox.disabled.halfchecked .devui-checkbox-material .devui-checkbox-halfchecked-bg{transform:scale(.4288);background-color:#cfd0d3;background-color:var(--devui-disabled-text, #cfd0d3);opacity:1}.devui-checkbox.disabled.active svg polygon{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-no-animation{transition:none!important}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DevConfigService }]; }, propDecorators: { name: [{
                type: Input
            }], label: [{
                type: Input
            }], cssClass: [{
                type: Input
            }], color: [{
                type: Input
            }], disabled: [{
                type: Input
            }], isShowTitle: [{
                type: Input
            }], title: [{
                type: Input
            }], labelTemplate: [{
                type: Input
            }], halfchecked: [{
                type: Input
            }], showAnimation: [{
                type: Input
            }], beforeChange: [{
                type: Input
            }], change: [{
                type: Output
            }] } });

class CheckBoxGroupComponent {
    constructor(devConfigService) {
        this.devConfigService = devConfigService;
        this.direction = 'column';
        this.isShowTitle = true;
        this.disabled = false;
        this.options = [];
        this.showAnimation = true;
        this.change = new EventEmitter();
        this.values = [];
        this.options_display = [];
        this.onChange = (_) => null;
        this.onTouch = () => null;
    }
    ngOnChanges(changes) {
        if (changes['options']) {
            this.checkType();
        }
    }
    checkType() {
        this.options_display = [];
        const checkedArray = [];
        this.values.forEach(item => {
            if (this.filterKey && item[this.filterKey]) {
                checkedArray[item[this.filterKey]] = true;
            }
            else {
                checkedArray[item] = true;
            }
        });
        this.options.forEach(item => {
            const option = { isChecked: false };
            option['value'] = item;
            if (this.filterKey && item[this.filterKey]) {
                if (checkedArray[item[this.filterKey]]) {
                    option['isChecked'] = true;
                }
            }
            else {
                if (checkedArray[item]) {
                    option['isChecked'] = true;
                }
            }
            this.options_display.push(option);
        });
    }
    writeValue(inputArray) {
        if (inputArray && isArray(inputArray)) {
            this.values = inputArray;
            this.checkType();
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouch = fn;
    }
    toggle($event, i) {
        this.onChange(this.getCheckedArray());
        this.onTouch();
        this.change.next(this.options_display[i]);
    }
    getCheckedArray() {
        const checkedArray = [];
        this.options_display.forEach(item => {
            if (item.isChecked) {
                checkedArray.push(item.value);
            }
        });
        return checkedArray;
    }
}
CheckBoxGroupComponent.ID_SEED = 0;
CheckBoxGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CheckBoxGroupComponent, deps: [{ token: i1.DevConfigService }], target: i0.ɵɵFactoryTarget.Component });
CheckBoxGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: CheckBoxGroupComponent, selector: "d-checkbox-group", inputs: { name: "name", itemWidth: "itemWidth", color: "color", direction: "direction", isShowTitle: "isShowTitle", disabled: "disabled", options: "options", filterKey: "filterKey", labelTemplate: "labelTemplate", showAnimation: "showAnimation", beforeChange: "beforeChange" }, outputs: { change: "change" }, providers: [{
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => CheckBoxGroupComponent),
            multi: true
        }], usesOnChanges: true, ngImport: i0, template: "<div class=\"devui-checkbox-group\">\n  <ul [class.devui-checkbox-list-inline]=\"direction === 'row'\">\n    <li\n      *ngFor=\"let item of options_display; let i = index\"\n      [class.devui-checkbox-column-margin]=\"direction === 'column'\"\n      [ngStyle]=\"{ 'width.px': itemWidth }\"\n      [ngClass]=\"{ 'devui-checkbox-wrap': itemWidth !== undefined }\"\n    >\n      <span>\n        <d-checkbox\n          [name]=\"name\"\n          [label]=\"item['value'][filterKey] ? item['value'][filterKey] : item['value']\"\n          [(ngModel)]=\"item['isChecked']\"\n          [isShowTitle]=\"isShowTitle\"\n          [color]=\"color\"\n          [disabled]=\"this.disabled ? true : item['value']['disabled']\"\n          [labelTemplate]=\"labelTemplate\"\n          [showAnimation]=\"showAnimation\"\n          (ngModelChange)=\"toggle($event, i)\"\n          [beforeChange]=\"beforeChange\"\n        >\n        </d-checkbox>\n      </span>\n    </li>\n  </ul>\n</div>\n", styles: [":host{display:block}.devui-checkbox-list-inline{min-height:28px;line-height:28px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin:-8px 0 0}.devui-checkbox-list-inline>*{margin-top:8px}.devui-checkbox-list-inline ::ng-deep li{display:inline-block}.devui-checkbox-list-inline ::ng-deep li:not(:last-child){margin-right:20px}.devui-checkbox-wrap ::ng-deep .devui-checkbox label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.devui-checkbox-column-margin{height:28px;line-height:28px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckBoxComponent, selector: "d-checkbox", inputs: ["name", "label", "cssClass", "color", "disabled", "isShowTitle", "title", "labelTemplate", "halfchecked", "showAnimation", "beforeChange"], outputs: ["change"] }] });
__decorate([
    WithConfig(),
    __metadata("design:type", Object)
], CheckBoxGroupComponent.prototype, "showAnimation", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CheckBoxGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-checkbox-group', providers: [{
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => CheckBoxGroupComponent),
                            multi: true
                        }], preserveWhitespaces: false, template: "<div class=\"devui-checkbox-group\">\n  <ul [class.devui-checkbox-list-inline]=\"direction === 'row'\">\n    <li\n      *ngFor=\"let item of options_display; let i = index\"\n      [class.devui-checkbox-column-margin]=\"direction === 'column'\"\n      [ngStyle]=\"{ 'width.px': itemWidth }\"\n      [ngClass]=\"{ 'devui-checkbox-wrap': itemWidth !== undefined }\"\n    >\n      <span>\n        <d-checkbox\n          [name]=\"name\"\n          [label]=\"item['value'][filterKey] ? item['value'][filterKey] : item['value']\"\n          [(ngModel)]=\"item['isChecked']\"\n          [isShowTitle]=\"isShowTitle\"\n          [color]=\"color\"\n          [disabled]=\"this.disabled ? true : item['value']['disabled']\"\n          [labelTemplate]=\"labelTemplate\"\n          [showAnimation]=\"showAnimation\"\n          (ngModelChange)=\"toggle($event, i)\"\n          [beforeChange]=\"beforeChange\"\n        >\n        </d-checkbox>\n      </span>\n    </li>\n  </ul>\n</div>\n", styles: [":host{display:block}.devui-checkbox-list-inline{min-height:28px;line-height:28px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin:-8px 0 0}.devui-checkbox-list-inline>*{margin-top:8px}.devui-checkbox-list-inline ::ng-deep li{display:inline-block}.devui-checkbox-list-inline ::ng-deep li:not(:last-child){margin-right:20px}.devui-checkbox-wrap ::ng-deep .devui-checkbox label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.devui-checkbox-column-margin{height:28px;line-height:28px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.DevConfigService }]; }, propDecorators: { name: [{
                type: Input
            }], itemWidth: [{
                type: Input
            }], color: [{
                type: Input
            }], direction: [{
                type: Input
            }], isShowTitle: [{
                type: Input
            }], disabled: [{
                type: Input
            }], options: [{
                type: Input
            }], filterKey: [{
                type: Input
            }], labelTemplate: [{
                type: Input
            }], showAnimation: [{
                type: Input
            }], beforeChange: [{
                type: Input
            }], change: [{
                type: Output
            }] } });

class CheckBoxModule {
}
CheckBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: CheckBoxModule, declarations: [CheckBoxComponent, CheckBoxGroupComponent], imports: [CommonModule, FormsModule], exports: [CheckBoxComponent, CheckBoxGroupComponent] });
CheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CheckBoxModule, imports: [CommonModule, FormsModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CheckBoxModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, FormsModule],
                    exports: [CheckBoxComponent, CheckBoxGroupComponent],
                    declarations: [CheckBoxComponent, CheckBoxGroupComponent],
                    providers: [],
                }]
        }] });

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

export { CheckBoxComponent, CheckBoxGroupComponent, CheckBoxModule };
//# sourceMappingURL=ng-devui-checkbox.mjs.map
