@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
2 lines • 8.46 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-devui/alert",["exports","@angular/core","@angular/common"],n):n(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"].alert={}),e.ng.core,e.ng.common)}(this,(function(e,n,r){"use strict";var i=function(){function e(){this.type="info",this.closeable=!0,this.showIcon=!0,this.closeEvent=new n.EventEmitter,this.hide=!1}return Object.defineProperty(e.prototype,"dismissTime",{set:function(e){var n=this;setTimeout((function(){n.close()}),e)},enumerable:!0,configurable:!0}),e.prototype.close=function(){this.closeEvent.emit(this),this.hide=!0},e.decorators=[{type:n.Component,args:[{selector:"d-alert",template:'<div class="devui-alert devui-alert-{{ type }} {{ cssClass }}" *ngIf="!hide">\r\n <button type="button" class="devui-close" (click)="close()" *ngIf="closeable">\r\n <svg\r\n width="16px"\r\n height="16px"\r\n viewBox="0 0 14 14"\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 >\r\n <defs>\r\n <polygon\r\n id="path-1"\r\n points="8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085 10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425 8.07106781 3.82842712 5.24264069 5.24264069 3.82842712"\r\n ></polygon>\r\n </defs>\r\n <g id="error" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\r\n <use *ngIf="type != \'warning\' && type != \'info\'" id="Mask" class="devui-alert-icon-close-no-warn" xlink:href="#path-1"></use>\r\n <use *ngIf="type == \'warning\' || type == \'info\'" id="Mask" class="devui-alert-icon-close-warn" xlink:href="#path-1"></use>\r\n </g>\r\n </svg>\r\n </button>\r\n <span class="devui-alert-icon" *ngIf="showIcon !== false">\r\n <svg\r\n *ngIf="type === \'success\'"\r\n class="devui-icon devui-icon-success"\r\n viewBox="0 0 16 16"\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 >\r\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\r\n <circle cx="8" cy="8" r="7"></circle>\r\n <path d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z" fill-rule="nonzero"></path>\r\n <polygon\r\n stroke-width="0.4"\r\n fill-rule="nonzero"\r\n points="8.16 10.48 7.32 11.32 6.48 10.48 6.48 10.48 3.6 7.68 4.44 6.84 7.28 9.68 11.52 5.44 12.36 6.28"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n <svg\r\n *ngIf="type === \'warning\'"\r\n class="devui-icon devui-icon-warning"\r\n viewBox="0 0 16 16"\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 >\r\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\r\n <polygon\r\n points="7.5 1.74501946 1.39184847 13.5954649 7.08947368 14.2207621 13.9973698 13.5954649 10.9383683 5.61273879 8.40084114 1.27624313"\r\n ></polygon>\r\n <path\r\n d="M8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 Z M8.87894737,11.2105263 L7.08947368,11.2105263 L7.08947368,13 L8.87894737,13 L8.87894737,11.2105263 Z M8.96842105,4.5 L7,4.5 L7.08947368,9.86842105 L8.87894737,9.86842105 L8.96842105,4.5 Z"\r\n ></path>\r\n </g>\r\n </svg>\r\n <svg\r\n *ngIf="type === \'info\'"\r\n class="devui-icon devui-icon-info"\r\n viewBox="0 0 16 16"\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 >\r\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\r\n <circle cx="8" cy="8" r="7"></circle>\r\n <g stroke-width="1">\r\n <path\r\n d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,5 L7,5 L7,3 L9,3 L9,5 Z M9,12.6 L7,12.6 L7,6.6 L9,6.6 L9,12.6 Z"\r\n ></path>\r\n </g>\r\n </g>\r\n </svg>\r\n <svg\r\n *ngIf="type === \'danger\'"\r\n class="devui-icon devui-icon-error"\r\n viewBox="0 0 16 16"\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 >\r\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\r\n <circle cx="8" cy="8" r="7"></circle>\r\n <path\r\n d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z"\r\n fill-rule="nonzero"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n <ng-content></ng-content>\r\n</div>\r\n',styles:[":host{display:block}.devui-alert{color:#252b3a;font-size:12px;border:1px solid transparent;padding:10px;line-height:20px}.devui-alert button.devui-close{color:#252b3a;opacity:1;box-shadow:none}.devui-alert button.devui-close>svg use{fill:#fff}.devui-alert button.devui-close span{color:#252b3a;font-size:12px;font-weight:700}.devui-alert.devui-alert-success{background-color:#edfff9;border-color:#50d4ab;color:#252b3a}.devui-alert.devui-alert-success button.devui-close{color:#50d4ab}.devui-alert.devui-alert-success button.devui-close>svg use{fill:#50d4ab}.devui-alert.devui-alert-info{background-color:#e9edfa;border-color:#96adfa;color:#252b3a}.devui-alert.devui-alert-info button.devui-close{color:#5e7ce0}.devui-alert.devui-alert-info button.devui-close>svg use{fill:#5e7ce0}.devui-alert.devui-alert-warning{background-color:#fff3e8;border-color:#ffbf85;color:#252b3a}.devui-alert.devui-alert-warning button.devui-close{color:#fac20a}.devui-alert.devui-alert-warning button.devui-close>svg use{fill:#fac20a}.devui-alert.devui-alert-danger{background-color:#ffeeed;border-color:#ffa4a1;color:#252b3a}.devui-alert.devui-alert-danger button.devui-close{color:#f66f6a}.devui-alert.devui-alert-danger button.devui-close>svg use{fill:#f66f6a}.devui-alert .devui-alert-icon{margin-right:10px}.devui-alert svg.devui-icon{width:16px;height:16px;vertical-align:middle;-webkit-transform:translateY(-1px);transform:translateY(-1px)}.devui-alert .devui-icon.icon-success>g>path{fill:#50d4ab}.devui-alert .devui-icon.icon-success>g>circle,.devui-alert .devui-icon.icon-success>g>polygon,.devui-alert .devui-icon.icon-warning>g>polygon{fill:#fff}.devui-alert .devui-icon.icon-warning>g>path{fill:#fac20a}.devui-alert .devui-icon.icon-info>g>g{fill:#5e7ce0}.devui-alert .devui-icon.icon-info>g>circle{fill:#fff}.devui-alert .devui-icon.icon-error>g>path{fill:#f66f6a}.devui-alert .devui-icon.icon-error>g>circle{fill:#fff}.devui-alert-icon{margin-right:10px}svg.devui-icon{width:16px;height:16px;vertical-align:middle;-webkit-transform:translateY(-1px);transform:translateY(-1px)}.devui-icon.devui-icon-success>g>path{fill:#50d4ab}.devui-icon.devui-icon-success>g>circle,.devui-icon.devui-icon-success>g>polygon,.devui-icon.devui-icon-warning>g>polygon{fill:#fff}.devui-icon.devui-icon-warning>g>path{fill:#fac20a}.devui-icon.devui-icon-info>g>g{fill:#5e7ce0}.devui-icon.devui-icon-info>g>circle{fill:#fff}.devui-icon.devui-icon-error>g>path{fill:#f66f6a}.devui-icon.devui-icon-error>g>circle{fill:#fff}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={type:[{type:n.Input}],cssClass:[{type:n.Input}],closeable:[{type:n.Input}],content:[{type:n.Input}],showIcon:[{type:n.Input}],closeEvent:[{type:n.Output}],dismissTime:[{type:n.Input}]},e}();var o=function(){function e(){}return e.decorators=[{type:n.NgModule,args:[{imports:[r.CommonModule],exports:[i],declarations:[i],providers:[]}]}],e}();e.AlertComponent=i,e.AlertModule=o,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-alert.umd.min.js.map