@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
2 lines • 9.22 kB
JavaScript
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/common"),require("@angular/core"),require("ng-devui/loading")):"function"==typeof define&&define.amd?define("ng-devui/button",["exports","@angular/common","@angular/core","ng-devui/loading"],n):n(((t=t||self)["ng-devui"]=t["ng-devui"]||{},t["ng-devui"].button={}),t.ng.common,t.ng.core,t["ng-devui"].loading)}(this,(function(t,n,e,i){"use strict";var a=function(){function t(){this.type="button",this.bsStyle="primary",this.bsSize="md",this.disabled=!1,this.showLoading=!1,this.autofocus=!1,this.btnClick=new e.EventEmitter}return t.prototype.onClick=function(t){this.btnClick.emit(t)},t.prototype.hasContent=function(){return!!this.buttonContent&&this.buttonContent.nativeElement&&this.buttonContent.nativeElement.innerHTML.trim()},t.decorators=[{type:e.Component,args:[{selector:"d-button",template:'<button\r\n [attr.id]="id"\r\n d-btn\r\n class="devui-btn devui-btn-{{ bsStyle }} devui-btn-{{ bsSize }}"\r\n [type]="type"\r\n [disabled]="disabled"\r\n [class.bordered]="bordered"\r\n [class.devui-loading]="showLoading"\r\n [showLoading]="showLoading"\r\n [loadingTemplateRef]="buttonWithLoading"\r\n [backdrop]="true"\r\n dLoading\r\n [ngStyle]="{ width: width }"\r\n [dBtnAutofocus]="autofocus"\r\n (click)="onClick($event)"\r\n [ngClass]="{ \'d-btn-icon\': !!icon && !hasContent() }"\r\n>\r\n <span *ngIf="!!icon" class="devui-icon-fix icon {{ icon }}"></span\r\n >\x3c!--\r\n --\x3e<span class="button-content" #buttonContent><ng-content></ng-content></span>\r\n</button>\r\n\r\n<ng-template #buttonWithLoading>\r\n <div class="devui-loading-spinner-wrapper">\r\n <div class="devui-loading-default-spinner">\r\n <div class="bar1"></div>\r\n <div class="bar2"></div>\r\n <div class="bar3"></div>\r\n <div class="bar4"></div>\r\n <div class="bar5"></div>\r\n <div class="bar6"></div>\r\n <div class="bar7"></div>\r\n <div class="bar8"></div>\r\n <div class="bar9"></div>\r\n <div class="bar10"></div>\r\n <div class="bar11"></div>\r\n <div class="bar12"></div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n',styles:[".devui-btn{padding:5px 20px;font-size:14px;height:32px;line-height:20px;border-radius:1px;background-color:transparent;-webkit-transition:.2s;transition:.2s;white-space:nowrap;border:1px solid transparent}.devui-btn.devui-btn-text{color:#5e7ce0;padding:0}.devui-btn.devui-btn-text-dark{color:#252b3a;padding:0}.devui-btn.devui-btn-common{color:#252b3a;min-width:80px;background-color:#fff;border-color:#adb0b8}.devui-btn.devui-btn-primary,.devui-btn.devui-btn-stress{color:#fff;min-width:80px;background-color:#5e7ce0}.devui-btn.devui-btn-xs{padding:1px 5px;height:28px;font-size:12px}.devui-btn.devui-btn-sm{padding:5px 10px;height:30px;font-size:12px}.devui-btn.devui-btn-lg{padding:10px 16px;height:46px;font-size:18px}.devui-btn.devui-btn-text-dark:active,.devui-btn.devui-btn-text-dark:focus,.devui-btn.devui-btn-text-dark:hover,.devui-btn.devui-btn-text:active,.devui-btn.devui-btn-text:focus,.devui-btn.devui-btn-text:hover{background-color:transparent;color:#344899}.devui-btn.devui-btn-common:active,.devui-btn.devui-btn-common:focus,.devui-btn.devui-btn-common:hover{border-color:#344899}.devui-btn.devui-btn-primary:active,.devui-btn.devui-btn-primary:focus,.devui-btn.devui-btn-primary:hover,.devui-btn.devui-btn-stress:active,.devui-btn.devui-btn-stress:focus,.devui-btn.devui-btn-stress:hover{background-color:#344899}.devui-btn.devui-btn-common:disabled{color:#252b3a;opacity:.3;background:#fff;border:1px solid #adb0b8}.devui-btn.devui-btn-primary:disabled{color:#252b3a;background:#fff;border:1px solid #adb0b8}.devui-btn.devui-btn-text-dark:disabled{color:#252b3a;background:#fff}.devui-btn.bordered.devui-btn-common{color:#252b3a;border-color:transparent}.devui-btn.bordered.devui-btn-common:active,.devui-btn.bordered.devui-btn-common:focus,.devui-btn.bordered.devui-btn-common:hover{border-color:#344899}.devui-btn.bordered.devui-btn-primary,.devui-btn.bordered.devui-btn-stress{border-color:#5e7ce0;color:#5e7ce0;background-color:#fff}.devui-btn.bordered.devui-btn-success{border-color:#50d4ab;color:#50d4ab;background-color:#fff}.devui-btn.bordered.devui-btn-warning{border-color:#fac20a;color:#fac20a;background-color:#fff}.devui-btn.bordered.devui-btn-danger{border-color:#f66f6a;color:#f66f6a;background-color:#fff}.devui-btn.d-btn-icon:focus,.devui-btn.d-btn-icon:hover{border:1px solid #f2f5fc;background-color:#f2f5fc}.devui-btn.d-btn-icon:disabled{background-color:#fff}:host{display:inline-block}.devui-btn:disabled,.devui-btn[disabled]{cursor:not-allowed;opacity:.3}.devui-btn.d-btn-icon{padding:7px 8px;line-height:1em;border:1px solid transparent}.devui-btn:not(.d-btn-icon) .icon-fix{font-size:16px}.devui-loading .devui-loading-spinner-wrapper{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1001}.devui-loading .devui-loading-default-spinner{position:relative;display:inline-block;vertical-align:middle;width:20px;height:20px}.devui-loading .devui-loading-default-spinner div{background-color:#252b3a;position:absolute;left:44.5%;top:37%;width:10%;height:26%;border-radius:50px;opacity:0;-webkit-animation:1s linear infinite spinner-anim;animation:1s linear infinite spinner-anim}.devui-loading .devui-loading-default-spinner .bar1{-webkit-transform:rotate(0) translate(0,-142%);transform:rotate(0) translate(0,-142%);-webkit-animation-delay:-1s;animation-delay:-1s}.devui-loading .devui-loading-default-spinner .bar2{-webkit-transform:rotate(30deg) translate(0,-142%);transform:rotate(30deg) translate(0,-142%);-webkit-animation-delay:-.91667s;animation-delay:-.91667s}.devui-loading .devui-loading-default-spinner .bar3{-webkit-transform:rotate(60deg) translate(0,-142%);transform:rotate(60deg) translate(0,-142%);-webkit-animation-delay:-.83333s;animation-delay:-.83333s}.devui-loading .devui-loading-default-spinner .bar4{-webkit-transform:rotate(90deg) translate(0,-142%);transform:rotate(90deg) translate(0,-142%);-webkit-animation-delay:-.75s;animation-delay:-.75s}.devui-loading .devui-loading-default-spinner .bar5{-webkit-transform:rotate(120deg) translate(0,-142%);transform:rotate(120deg) translate(0,-142%);-webkit-animation-delay:-.66667s;animation-delay:-.66667s}.devui-loading .devui-loading-default-spinner .bar6{-webkit-transform:rotate(150deg) translate(0,-142%);transform:rotate(150deg) translate(0,-142%);-webkit-animation-delay:-.58333s;animation-delay:-.58333s}.devui-loading .devui-loading-default-spinner .bar7{-webkit-transform:rotate(180deg) translate(0,-142%);transform:rotate(180deg) translate(0,-142%);-webkit-animation-delay:-.5s;animation-delay:-.5s}.devui-loading .devui-loading-default-spinner .bar8{-webkit-transform:rotate(210deg) translate(0,-142%);transform:rotate(210deg) translate(0,-142%);-webkit-animation-delay:-.41667s;animation-delay:-.41667s}.devui-loading .devui-loading-default-spinner .bar9{-webkit-transform:rotate(240deg) translate(0,-142%);transform:rotate(240deg) translate(0,-142%);-webkit-animation-delay:-.33333s;animation-delay:-.33333s}.devui-loading .devui-loading-default-spinner .bar10{-webkit-transform:rotate(270deg) translate(0,-142%);transform:rotate(270deg) translate(0,-142%);-webkit-animation-delay:-.25s;animation-delay:-.25s}.devui-loading .devui-loading-default-spinner .bar11{-webkit-transform:rotate(300deg) translate(0,-142%);transform:rotate(300deg) translate(0,-142%);-webkit-animation-delay:-.16667s;animation-delay:-.16667s}.devui-loading .devui-loading-default-spinner .bar12{-webkit-transform:rotate(330deg) translate(0,-142%);transform:rotate(330deg) translate(0,-142%);-webkit-animation-delay:-83.33ms;animation-delay:-83.33ms}.devui-loading .devui-loading-default-text{display:inline-block;margin-left:6px;max-width:400px}@-webkit-keyframes spinner-anim{from{opacity:1}to{opacity:.25}}@keyframes spinner-anim{from{opacity:1}to{opacity:.25}}.devui-icon-fix{position:relative;top:2px}.button-content{display:inline-block;vertical-align:top}"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={id:[{type:e.Input}],type:[{type:e.Input}],bsStyle:[{type:e.Input}],bsSize:[{type:e.Input}],bordered:[{type:e.Input}],icon:[{type:e.Input}],disabled:[{type:e.Input}],showLoading:[{type:e.Input}],width:[{type:e.Input}],autofocus:[{type:e.Input}],btnClick:[{type:e.Output}],buttonContent:[{type:e.ViewChild,args:["buttonContent",{static:!0}]}]},t}();var o=function(){function t(t){this.element=t,this.dBtnAutofocus=!1}return t.prototype.ngOnInit=function(){this.dBtnAutofocus&&this.element.nativeElement.focus()},t.decorators=[{type:e.Directive,args:[{selector:"[dBtnAutofocus]"}]}],t.ctorParameters=function(){return[{type:e.ElementRef}]},t.propDecorators={dBtnAutofocus:[{type:e.Input}]},t}();var r=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule,i.LoadingModule],exports:[a],declarations:[a,o],providers:[]}]}],t}();t.BtnAutoFocusDirective=o,t.ButtonComponent=a,t.ButtonModule=r,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-button.umd.min.js.map