@duoduo-oba/ng-devui/bundles/ng-devui-checkbox.umd.min.js

DevUI components based on Angular

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("lodash-es/isArray")):"function"==typeof define&&define.amd?define("ng-devui/checkbox",["exports","@angular/core","@angular/common","@angular/forms","lodash-es/isArray"],t):t(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"].checkbox={}),e.ng.core,e.ng.common,e.ng.forms,e.isArray)}(this,(function(e,t,i,o,n){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n;var c=function(){function e(i){this.changeDetectorRef=i,this.disabled=!1,this.isShowTitle=!0,this.halfchecked=!1,this.showAnimation=!0,this.change=new t.EventEmitter,this.animationUnlocked=!1,this.onChange=function(e){return null},this.onTouch=function(){return null},this.id=e.ID_SEED++}return e.prototype.writeValue=function(e){(this.animationUnlocked||null!==e)&&(this.checked=!!e,this.changeDetectorRef.markForCheck(),this.unlockAnimation())},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouch=e},e.prototype.toggle=function(e){this.disabled||(this.checked=!this.checked,this.onChange(this.checked),this.change.next(this.checked),this.onTouch())},e.prototype.unlockAnimation=function(){var e=this;this.animationUnlocked||setTimeout((function(){e.animationUnlocked=!0}),0)},e.prototype.ngOnChanges=function(e){e.hasOwnProperty("halfchecked")&&this.unlockAnimation()},e.ID_SEED=0,e.decorators=[{type:t.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:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return e})),multi:!0}],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}"]}]}],e.ctorParameters=function(){return[{type:t.ChangeDetectorRef}]},e.propDecorators={name:[{type:t.Input}],label:[{type:t.Input}],cssClass:[{type:t.Input}],color:[{type:t.Input}],disabled:[{type:t.Input}],isShowTitle:[{type:t.Input}],labelTemplate:[{type:t.Input}],halfchecked:[{type:t.Input}],showAnimation:[{type:t.Input}],change:[{type:t.Output}]},e}();var r=function(){function e(){this.direction="column",this.isShowTitle=!0,this.options=[],this.showAnimation=!0,this.change=new t.EventEmitter,this.values=[],this.options_display=[],this.onChange=function(e){return null},this.onTouch=function(){return null}}return e.prototype.ngOnChanges=function(e){e.options&&this.checkType()},e.prototype.checkType=function(){var e=this;this.options_display=[];var t=[];this.values.forEach((function(i){e.filterKey&&i[e.filterKey]?t[i[e.filterKey]]=!0:t[i]=!0})),this.options.forEach((function(i){var o={isChecked:!1};o.value=i,e.filterKey&&i[e.filterKey]?t[i[e.filterKey]]&&(o.isChecked=!0):t[i]&&(o.isChecked=!0),e.options_display.push(o)}))},e.prototype.writeValue=function(e){e&&n(e)&&(this.values=e,this.checkType())},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouch=e},e.prototype.toggle=function(e,t){this.onChange(this.getCheckedArray()),this.onTouch(),this.change.next(this.options_display[t])},e.prototype.getCheckedArray=function(){var e=[];return this.options_display.forEach((function(t){t.isChecked&&e.push(t.value)})),e},e.ID_SEED=0,e.decorators=[{type:t.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:o.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return e})),multi:!0}],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}"]}]}],e.propDecorators={name:[{type:t.Input}],color:[{type:t.Input}],direction:[{type:t.Input}],isShowTitle:[{type:t.Input}],options:[{type:t.Input}],filterKey:[{type:t.Input}],labelTemplate:[{type:t.Input}],showAnimation:[{type:t.Input}],change:[{type:t.Output}]},e}();var s=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule,o.FormsModule],exports:[c,r],declarations:[c,r],providers:[]}]}],e}();e.CheckBoxComponent=c,e.CheckBoxGroupComponent=r,e.CheckBoxModule=s,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-checkbox.umd.min.js.map