ng-devui
Version:
DevUI components based on Angular
283 lines (277 loc) • 35.4 kB
JavaScript
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, ChangeDetectionStrategy, Input, Output, HostBinding, 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 {
static { this.ID_SEED = 0; }
get hasGlowStyle() {
return this.showGlowStyle;
}
constructor(changeDetectorRef, devConfigService, el) {
this.changeDetectorRef = changeDetectorRef;
this.devConfigService = devConfigService;
this.el = el;
this.disabled = false;
this.isShowTitle = true;
this.halfchecked = false;
this.showAnimation = true;
this.showGlowStyle = true;
this.change = new EventEmitter();
this.onChange = (_) => null;
this.onTouch = () => null;
this.id = CheckBoxComponent.ID_SEED++;
}
ngAfterViewInit() {
if (this.showGlowStyle) {
const glowBox = this.el.nativeElement.querySelector('.devui-checkbox > .devui-checkbox-glow-box');
const labelDom = this.el.nativeElement.querySelector('.devui-checkbox > label');
const labelHeight = labelDom && getComputedStyle(labelDom).height;
if (glowBox && labelHeight && labelHeight !== '16px') {
glowBox.style.height = labelHeight;
}
}
}
writeValue(checked) {
if (checked !== null) {
this.checked = !!checked;
this.changeDetectorRef.markForCheck();
}
}
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();
});
}
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;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DevConfigService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", showGlowStyle: "showGlowStyle", beforeChange: "beforeChange" }, outputs: { change: "change" }, host: { properties: { "class.devui-glow-style": "this.hasGlowStyle" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckBoxComponent),
multi: 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 <div *ngIf=\"showGlowStyle\" class=\"devui-checkbox-glow-box\">\n <span *ngIf=\"showAnimation\" class=\"devui-checkbox-glow-bg\"></span>\n </div>\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,\n 'devui-checkbox-default-background': !halfchecked\n }\"\n >\n <span class=\"devui-checkbox-halfchecked-bg\"></span>\n <svg viewBox=\"0 0 14 14\" width=\"14\" height=\"14\" class=\"devui-checkbox-tick\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n class=\"devui-tick\"\n [ngClass]=\"{\n 'devui-no-animation': !showAnimation\n }\"\n d=\"M 2.3 7.0 5.6 9.6 11.4 3.5\"\n stroke=\"#fff\"\n stroke-width=\"1.5\"\n fill=\"none\"\n />\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-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.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{stroke:var(--devui-light-text, #ffffff);stroke-dasharray:13 13;stroke-dashoffset:13;opacity:0;transform:scale(0);transform-origin:50% 50%;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 var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25)),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:var(--devui-brand, #0a59f7)}.devui-checkbox.active:not(.disabled) .devui-checkbox-material{background-size:100% 100%;transition: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 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):hover .devui-checkbox-material:not(.custom-color){border-color:var(--devui-brand, #0a59f7)}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox-material.custom-color{background-size:0% 0%;transition: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:var(--devui-brand, #0a59f7)}.devui-checkbox.halfchecked .devui-checkbox-material:not(.custom-color)>.devui-checkbox-halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95));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 var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95));background-color:var(--devui-light-text, #ffffff)}.devui-checkbox .devui-checkbox-material{text-align:initial;height:14px;width:14px;position:relative;-webkit-user-select:none;user-select:none;border:1px solid var(--devui-line, #dbdbdb);border-radius:var(--devui-border-radius, 2px);background:linear-gradient(var(--devui-brand, #0a59f7),var(--devui-brand, #0a59f7)) no-repeat center/0%;margin-right:8px;vertical-align:text-bottom}.devui-checkbox .devui-checkbox-material.devui-checkbox-default-background{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: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:var(--devui-brand, #0a59f7)}.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:var(--devui-brand-active, #0950de)}.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-size:var(--devui-font-size, 12px);font-weight:400;height:16px;line-height:16px;cursor:pointer;color:var(--devui-text, #191919);margin:0;display:block;flex:1}.devui-checkbox label>span{display:inline-block;box-sizing:content-box;vertical-align:top}.devui-checkbox.disabled label{cursor:not-allowed;color:var(--devui-disabled-text, #c2c2c2)}.devui-checkbox.disabled .devui-checkbox-material{border-color:var(--devui-icon-fill-active-disabled, #9dbdfc);background-color:var(--devui-icon-fill-active-disabled, #9dbdfc)}.devui-checkbox.disabled.unchecked .devui-checkbox-material{border-color:var(--devui-disabled-line, #e6e6e6);background-color:var(--devui-disabled-bg, #f3f3f3)}.devui-checkbox.disabled.halfchecked .devui-checkbox-material{background-color:var(--devui-icon-fill-active-disabled, #9dbdfc)}.devui-checkbox.disabled.active svg polygon{fill:var(--devui-light-text, #ffffff)}::ng-deep :root .devui-glow-style .devui-checkbox .devui-checkbox-glow-box{position:absolute;width:16px;height:16px}::ng-deep :root .devui-glow-style .devui-checkbox .devui-checkbox-glow-box .devui-checkbox-glow-bg{display:block;width:16px;height:16px;-webkit-user-select:none;user-select:none;border-radius:var(--devui-border-radius, 2px);box-shadow:none;transition:box-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}::ng-deep :root .devui-glow-style .devui-checkbox:not(.disabled):hover .devui-checkbox-glow-bg{box-shadow:0 0 0 6px var(--devui-range-item-hover-bg, #cedefd)}.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);
__decorate([
WithConfig(),
__metadata("design:type", Object)
], CheckBoxComponent.prototype, "showGlowStyle", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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 <div *ngIf=\"showGlowStyle\" class=\"devui-checkbox-glow-box\">\n <span *ngIf=\"showAnimation\" class=\"devui-checkbox-glow-bg\"></span>\n </div>\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,\n 'devui-checkbox-default-background': !halfchecked\n }\"\n >\n <span class=\"devui-checkbox-halfchecked-bg\"></span>\n <svg viewBox=\"0 0 14 14\" width=\"14\" height=\"14\" class=\"devui-checkbox-tick\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n class=\"devui-tick\"\n [ngClass]=\"{\n 'devui-no-animation': !showAnimation\n }\"\n d=\"M 2.3 7.0 5.6 9.6 11.4 3.5\"\n stroke=\"#fff\"\n stroke-width=\"1.5\"\n fill=\"none\"\n />\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-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.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{stroke:var(--devui-light-text, #ffffff);stroke-dasharray:13 13;stroke-dashoffset:13;opacity:0;transform:scale(0);transform-origin:50% 50%;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 var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25)),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:var(--devui-brand, #0a59f7)}.devui-checkbox.active:not(.disabled) .devui-checkbox-material{background-size:100% 100%;transition: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 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):hover .devui-checkbox-material:not(.custom-color){border-color:var(--devui-brand, #0a59f7)}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox-material.custom-color{background-size:0% 0%;transition: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:var(--devui-brand, #0a59f7)}.devui-checkbox.halfchecked .devui-checkbox-material:not(.custom-color)>.devui-checkbox-halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95));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 var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95));background-color:var(--devui-light-text, #ffffff)}.devui-checkbox .devui-checkbox-material{text-align:initial;height:14px;width:14px;position:relative;-webkit-user-select:none;user-select:none;border:1px solid var(--devui-line, #dbdbdb);border-radius:var(--devui-border-radius, 2px);background:linear-gradient(var(--devui-brand, #0a59f7),var(--devui-brand, #0a59f7)) no-repeat center/0%;margin-right:8px;vertical-align:text-bottom}.devui-checkbox .devui-checkbox-material.devui-checkbox-default-background{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: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:var(--devui-brand, #0a59f7)}.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:var(--devui-brand-active, #0950de)}.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-size:var(--devui-font-size, 12px);font-weight:400;height:16px;line-height:16px;cursor:pointer;color:var(--devui-text, #191919);margin:0;display:block;flex:1}.devui-checkbox label>span{display:inline-block;box-sizing:content-box;vertical-align:top}.devui-checkbox.disabled label{cursor:not-allowed;color:var(--devui-disabled-text, #c2c2c2)}.devui-checkbox.disabled .devui-checkbox-material{border-color:var(--devui-icon-fill-active-disabled, #9dbdfc);background-color:var(--devui-icon-fill-active-disabled, #9dbdfc)}.devui-checkbox.disabled.unchecked .devui-checkbox-material{border-color:var(--devui-disabled-line, #e6e6e6);background-color:var(--devui-disabled-bg, #f3f3f3)}.devui-checkbox.disabled.halfchecked .devui-checkbox-material{background-color:var(--devui-icon-fill-active-disabled, #9dbdfc)}.devui-checkbox.disabled.active svg polygon{fill:var(--devui-light-text, #ffffff)}::ng-deep :root .devui-glow-style .devui-checkbox .devui-checkbox-glow-box{position:absolute;width:16px;height:16px}::ng-deep :root .devui-glow-style .devui-checkbox .devui-checkbox-glow-box .devui-checkbox-glow-bg{display:block;width:16px;height:16px;-webkit-user-select:none;user-select:none;border-radius:var(--devui-border-radius, 2px);box-shadow:none;transition:box-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}::ng-deep :root .devui-glow-style .devui-checkbox:not(.disabled):hover .devui-checkbox-glow-bg{box-shadow:0 0 0 6px var(--devui-range-item-hover-bg, #cedefd)}.devui-no-animation{transition:none!important}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DevConfigService }, { type: i0.ElementRef }], 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
}], showGlowStyle: [{
type: Input
}], beforeChange: [{
type: Input
}], change: [{
type: Output
}], hasGlowStyle: [{
type: HostBinding,
args: ['class.devui-glow-style']
}] } });
class CheckBoxGroupComponent {
static { this.ID_SEED = 0; }
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.values = this.values ?? [];
this.checkType();
}
}
checkType() {
this.options = this.options ?? [];
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]] === true) {
option.isChecked = true;
}
}
else {
if (checkedArray[item] === true) {
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;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckBoxGroupComponent, deps: [{ token: i1.DevConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", "showGlowStyle", "beforeChange"], outputs: ["change"] }] }); }
}
__decorate([
WithConfig(),
__metadata("design:type", Object)
], CheckBoxGroupComponent.prototype, "showAnimation", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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: () => [{ 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 {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: CheckBoxModule, declarations: [CheckBoxComponent, CheckBoxGroupComponent], imports: [CommonModule, FormsModule], exports: [CheckBoxComponent, CheckBoxGroupComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckBoxModule, imports: [CommonModule, FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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