@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
397 lines (390 loc) • 18.6 kB
JavaScript
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, forwardRef, ChangeDetectorRef, Input, Output, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import isArray from 'lodash-es/isArray';
/**
* @fileoverview added by tsickle
* Generated from: checkbox.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CheckBoxComponent {
/**
* @param {?} changeDetectorRef
*/
constructor(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
this.disabled = false;
this.isShowTitle = true;
this.halfchecked = false;
this.showAnimation = true;
this.change = new EventEmitter();
this.animationUnlocked = false;
this.onChange = (/**
* @param {?} _
* @return {?}
*/
(_) => null);
this.onTouch = (/**
* @return {?}
*/
() => null);
this.id = CheckBoxComponent.ID_SEED++;
}
/**
* @param {?} checked
* @return {?}
*/
writeValue(checked) {
if (this.animationUnlocked || checked !== null) {
this.checked = !!checked;
this.changeDetectorRef.markForCheck();
this.unlockAnimation();
}
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouch = fn;
}
/**
* @param {?} $event
* @return {?}
*/
toggle($event) {
if (this.disabled) {
return;
}
this.checked = !this.checked;
this.onChange(this.checked);
this.change.next(this.checked);
this.onTouch();
}
/**
* @private
* @return {?}
*/
unlockAnimation() {
if (!this.animationUnlocked) {
setTimeout((/**
* @return {?}
*/
() => {
this.animationUnlocked = true;
}), 0);
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.hasOwnProperty('halfchecked')) {
this.unlockAnimation();
}
}
}
CheckBoxComponent.ID_SEED = 0;
CheckBoxComponent.decorators = [
{ type: Component, args: [{
selector: 'd-checkbox',
template: "<div\r\n class=\"devui-checkbox {{ cssClass }}\"\r\n [ngClass]=\"{\r\n active: checked,\r\n halfchecked: halfchecked,\r\n disabled: disabled,\r\n unchecked: !checked\r\n }\"\r\n>\r\n <label title=\"{{ isShowTitle ? label : '' }}\" (click)=\"toggle($event)\">\r\n <input\r\n [name]=\"name || 'checkbox-' + id\"\r\n class=\"devui-checkbox-input\"\r\n type=\"checkbox\"\r\n [attr.checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n [attr.indeterminate]=\"halfchecked\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event.stopPropagation()\"\r\n />\r\n <span class=\"devui-checkbox-material\" [ngStyle]=\"{ 'border-color': checked ? color : '' }\" [ngClass]=\"{ 'custom-color': color }\">\r\n <span\r\n class=\"devui-checkbox-bg\"\r\n [ngStyle]=\"{ 'background-color': color ? color : '' }\"\r\n [ngClass]=\"{\r\n 'devui-no-animation': !showAnimation || !animationUnlocked\r\n }\"\r\n ></span>\r\n <svg\r\n class=\"devui-checkbox-tick \"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n x=\"0px\"\r\n y=\"0px\"\r\n viewBox=\"0 0 20 20\"\r\n xml:space=\"preserve\"\r\n >\r\n <polyline\r\n class=\"devui-tick\"\r\n points=\"2.6,11 6.9,15.2 17.4,4.8\"\r\n [ngClass]=\"{\r\n 'devui-no-animation': !showAnimation || !animationUnlocked\r\n }\"\r\n />\r\n </svg>\r\n </span>\r\n <ng-template [ngIf]=\"!!label && !labelTemplate\">{{ label }}</ng-template>\r\n <ng-template\r\n [ngIf]=\"!!labelTemplate\"\r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: this, checked:checked, halfchecked: halfchecked,\r\n disabled:disabled, label: label}\"\r\n >\r\n </ng-template>\r\n </label>\r\n</div>\r\n",
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => CheckBoxComponent)),
multi: true
}
],
styles: [":host{display:inline-block}.devui-checkbox{position:relative;display:-webkit-box;display:flex;display:-ms-flexbox;-webkit-box-align:center;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:#fff;stroke-dasharray:50;stroke-width:2;stroke-miterlimit:10;fill:none;stroke-dashoffset:50;opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transition:stroke-dashoffset .2s ease-in-out,opacity .2s ease-in-out,-webkit-transform .2s ease-in-out;transition:stroke-dashoffset .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out,-webkit-transform .2s ease-in-out}.devui-checkbox.active:not(.halfchecked) .devui-tick{opacity:1;stroke-dashoffset:0;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:stroke-dashoffset .3s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06);transition:stroke-dashoffset .3s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06)}.devui-checkbox.active .devui-checkbox-material:not(.custom-color),.devui-checkbox.halfchecked .devui-checkbox-material:not(.custom-color){border-color:#5e7ce0}.devui-checkbox.active .devui-checkbox-material>.devui-checkbox-bg{opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}.devui-checkbox.unchecked .devui-checkbox-material>.devui-checkbox-bg{-webkit-transform:scale(0);transform:scale(0);-webkit-transition:opacity .2s cubic-bezier(.755,.05,.855,.06),-webkit-transform .15s cubic-bezier(.755,.05,.855,.06);transition:transform .15s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06),-webkit-transform .15s cubic-bezier(.755,.05,.855,.06)}.devui-checkbox.halfchecked .devui-checkbox-material>.devui-checkbox-bg{opacity:1;-webkit-transform:scale(.57);transform:scale(.57);-webkit-transition:-webkit-transform .2s cubic-bezier(.755,.05,.855,.06);transition:transform .2s cubic-bezier(.755,.05,.855,.06);transition:transform .2s cubic-bezier(.755,.05,.855,.06),-webkit-transform .2s cubic-bezier(.755,.05,.855,.06)}.devui-checkbox .devui-checkbox-material{text-align:initial;height:14px;width:14px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid #adb0b8;border-radius:1px;margin-right:5px;vertical-align:text-top}.devui-checkbox .devui-checkbox-material>.devui-checkbox-bg{display:inline-block;position:absolute;content:'';background-color:#5e7ce0;top:0;left:0;height:100%;width:100%;-webkit-transform:scale(0);transform:scale(0);opacity:0}.devui-checkbox:not(.disabled) .devui-checkbox-material:not(.custom-color):hover{border:1px solid #344899;-webkit-transition:border-color .2s ease-in-out;transition:border-color .2s ease-in-out}.devui-checkbox:not(.disabled) .devui-checkbox-material:not(.custom-color):hover>.devui-checkbox-bg{background-color:#344899}.devui-checkbox:not(.disabled) .devui-checkbox-material:not(.custom-color):active,.devui-checkbox:not(.disabled) .devui-checkbox-material:not(.custom-color):focus{border:1px solid #344899;-webkit-transition:border-color .2s ease-in-out;transition:border-color .2s ease-in-out}.devui-checkbox:not(.disabled) .devui-checkbox-material:not(.custom-color):active>.devui-checkbox-bg,.devui-checkbox:not(.disabled) .devui-checkbox-material:not(.custom-color):focus>.devui-checkbox-bg,.devui-checkbox:not(.disabled) .devui-checkbox-material:not(.custom-color):hover:active>.devui-checkbox-bg,.devui-checkbox:not(.disabled) .devui-checkbox-material:not(.custom-color):hover:focus>.devui-checkbox-bg{background-color:#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{display:inline-block;position:relative;font-weight:400;line-height:1;cursor:pointer;color:#252b3a;margin:0}.devui-checkbox label span{display:inline-block;box-sizing:content-box}.devui-checkbox.disabled{opacity:.3}.devui-checkbox.disabled label{cursor:not-allowed}.devui-no-animation{-webkit-transition:none!important;transition:none!important}"]
}] }
];
/** @nocollapse */
CheckBoxComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
CheckBoxComponent.propDecorators = {
name: [{ type: Input }],
label: [{ type: Input }],
cssClass: [{ type: Input }],
color: [{ type: Input }],
disabled: [{ type: Input }],
isShowTitle: [{ type: Input }],
labelTemplate: [{ type: Input }],
halfchecked: [{ type: Input }],
showAnimation: [{ type: Input }],
change: [{ type: Output }]
};
if (false) {
/** @type {?} */
CheckBoxComponent.ID_SEED;
/** @type {?} */
CheckBoxComponent.prototype.name;
/** @type {?} */
CheckBoxComponent.prototype.label;
/** @type {?} */
CheckBoxComponent.prototype.cssClass;
/** @type {?} */
CheckBoxComponent.prototype.color;
/** @type {?} */
CheckBoxComponent.prototype.disabled;
/** @type {?} */
CheckBoxComponent.prototype.isShowTitle;
/** @type {?} */
CheckBoxComponent.prototype.labelTemplate;
/** @type {?} */
CheckBoxComponent.prototype.halfchecked;
/** @type {?} */
CheckBoxComponent.prototype.showAnimation;
/** @type {?} */
CheckBoxComponent.prototype.change;
/** @type {?} */
CheckBoxComponent.prototype.animationUnlocked;
/** @type {?} */
CheckBoxComponent.prototype.id;
/** @type {?} */
CheckBoxComponent.prototype.checked;
/**
* @type {?}
* @private
*/
CheckBoxComponent.prototype.onChange;
/**
* @type {?}
* @private
*/
CheckBoxComponent.prototype.onTouch;
/**
* @type {?}
* @private
*/
CheckBoxComponent.prototype.changeDetectorRef;
}
/**
* @fileoverview added by tsickle
* Generated from: checkbox-group.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CheckBoxGroupComponent {
constructor() {
this.direction = 'column';
this.isShowTitle = true;
this.options = [];
this.showAnimation = true;
this.change = new EventEmitter();
this.values = [];
this.options_display = [];
this.onChange = (/**
* @param {?} _
* @return {?}
*/
(_) => null);
this.onTouch = (/**
* @return {?}
*/
() => null);
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes['options']) {
this.checkType();
}
}
/**
* @return {?}
*/
checkType() {
this.options_display = [];
/** @type {?} */
const checkedArray = [];
this.values.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
if (this.filterKey && item[this.filterKey]) {
checkedArray[item[this.filterKey]] = true;
}
else {
checkedArray[item] = true;
}
}));
this.options.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
/** @type {?} */
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);
}));
}
/**
* @param {?} inputArray
* @return {?}
*/
writeValue(inputArray) {
if (inputArray && isArray(inputArray)) {
this.values = inputArray;
this.checkType();
}
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouch = fn;
}
/**
* @param {?} $event
* @param {?} i
* @return {?}
*/
toggle($event, i) {
this.onChange(this.getCheckedArray());
this.onTouch();
this.change.next(this.options_display[i]);
}
/**
* @return {?}
*/
getCheckedArray() {
/** @type {?} */
const checkedArray = [];
this.options_display.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
if (item.isChecked) {
checkedArray.push(item.value);
}
}));
return checkedArray;
}
}
CheckBoxGroupComponent.ID_SEED = 0;
CheckBoxGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'd-checkbox-group',
template: "<div class=\"devui-checkbox-group\">\r\n <ul [class.devui-checkbox-list-inline]=\"direction === 'row'\">\r\n <li *ngFor=\"let item of options_display; let i = index\" [class.devui-checkbox-column-margin]=\"direction === 'column'\">\r\n <span>\r\n <d-checkbox\r\n [name]=\"name\"\r\n [label]=\"item['value'][filterKey] ? item['value'][filterKey] : item['value']\"\r\n [(ngModel)]=\"item['isChecked']\"\r\n [isShowTitle]=\"isShowTitle\"\r\n [color]=\"color\"\r\n [disabled]=\"item['value']['disabled']\"\r\n [labelTemplate]=\"labelTemplate\"\r\n [showAnimation]=\"showAnimation\"\r\n (ngModelChange)=\"toggle($event, i)\"\r\n >\r\n </d-checkbox>\r\n </span>\r\n </li>\r\n </ul>\r\n</div>\r\n",
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => CheckBoxGroupComponent)),
multi: true
}],
styles: [":host{display:block}.devui-checkbox-list-inline{height:32px;line-height:32px}.devui-checkbox-list-inline ::ng-deep li{display:inline-block}.devui-checkbox-list-inline ::ng-deep li:nth-child(n+2){margin-left:10px}.devui-checkbox-column-margin:nth-child(n+2){margin-top:15px}"]
}] }
];
CheckBoxGroupComponent.propDecorators = {
name: [{ type: Input }],
color: [{ type: Input }],
direction: [{ type: Input }],
isShowTitle: [{ type: Input }],
options: [{ type: Input }],
filterKey: [{ type: Input }],
labelTemplate: [{ type: Input }],
showAnimation: [{ type: Input }],
change: [{ type: Output }]
};
if (false) {
/** @type {?} */
CheckBoxGroupComponent.ID_SEED;
/** @type {?} */
CheckBoxGroupComponent.prototype.name;
/** @type {?} */
CheckBoxGroupComponent.prototype.color;
/** @type {?} */
CheckBoxGroupComponent.prototype.direction;
/** @type {?} */
CheckBoxGroupComponent.prototype.isShowTitle;
/** @type {?} */
CheckBoxGroupComponent.prototype.options;
/** @type {?} */
CheckBoxGroupComponent.prototype.filterKey;
/** @type {?} */
CheckBoxGroupComponent.prototype.labelTemplate;
/** @type {?} */
CheckBoxGroupComponent.prototype.showAnimation;
/** @type {?} */
CheckBoxGroupComponent.prototype.change;
/** @type {?} */
CheckBoxGroupComponent.prototype.values;
/** @type {?} */
CheckBoxGroupComponent.prototype.options_display;
/**
* @type {?}
* @private
*/
CheckBoxGroupComponent.prototype.onChange;
/**
* @type {?}
* @private
*/
CheckBoxGroupComponent.prototype.onTouch;
}
/**
* @fileoverview added by tsickle
* Generated from: checkbox.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CheckBoxModule {
}
CheckBoxModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, FormsModule],
exports: [CheckBoxComponent, CheckBoxGroupComponent],
declarations: [CheckBoxComponent, CheckBoxGroupComponent],
providers: [],
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-devui-checkbox.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { CheckBoxComponent, CheckBoxGroupComponent, CheckBoxModule };
//# sourceMappingURL=ng-devui-checkbox.js.map