tp-window/bundles/tp-window.umd.min.js

ThingsPro window component UI

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common"),require("@angular/material"),require("@angular/material/icon"),require("@angular/material/button"),require("@angular/material/progress-bar"),require("@angular/material/menu"),require("@angular/cdk/portal")):"function"==typeof define&&define.amd?define("tp-window",["exports","@angular/core","@angular/animations","@angular/common","@angular/material","@angular/material/icon","@angular/material/button","@angular/material/progress-bar","@angular/material/menu","@angular/cdk/portal"],n):n(t["tp-window"]={},t.ng.core,t.ng.animations,t.ng.common,t.ng.material,t.ng.material.icon,t.ng.material.button,t.ng.material["progress-bar"],t.ng.material.menu,t.ng.cdk.portal)}(this,function(t,n,e,a,o,r,i,l,s,u){"use strict";var p=function(){function t(){}return t.decorators=[{type:n.Component,args:[{selector:"tp-window-state",template:"\n    <ng-template #templateRef>\n      <ng-content></ng-content>\n    </ng-template>\n  ",inputs:["name","icon","type"]}]}],t.propDecorators={templateRef:[{type:n.ViewChild,args:["templateRef"]}],type:[{type:n.Input}]},t}(),m=e.trigger("fadeOut",[e.state("in",e.style({opacity:1})),e.transition("* => void",[e.animate(500,e.style({opacity:0}))])]),g=function(){function t(){this.maxStateNumber=5,this.stateChange=new n.EventEmitter,this.isShowLoading=!1}return Object.defineProperty(t.prototype,"loading",{set:function(t){var n=this;t&&(this.isShowLoading=!0,t.subscribe(function(){n.isShowLoading=!1}))},enumerable:!0,configurable:!0}),t.prototype.setPortal=function(t){this.optionPortal=t},t.prototype.ngAfterContentInit=function(){this.currentState=this.states.first},t.prototype.navigate=function(t){"Button"!==t.type&&(this.currentState=t),this.stateChange.emit(t)},t.decorators=[{type:n.Component,args:[{selector:"tp-window",template:'<div class="tp-window">\n  <mat-toolbar>\n    <p class="mat-body-2 toolbar-title">{{name}}</p>\n    <div class="toolbar-flex"></div>\n      <ng-template [cdkPortalOutlet]="optionPortal"></ng-template>\n      <ng-template [ngIf]="states.length <= maxStateNumber">\n        <ng-container *ngFor="let state of states">\n          <button *ngIf="state.type !== \'Content\'" mat-icon-button (click)="navigate(state)" matTooltip="{{state.name}}">\n            <mat-icon>{{state.icon}}</mat-icon>\n          </button>\n        </ng-container>\n      </ng-template>\n\n      <ng-template [ngIf]="states.length > maxStateNumber">\n        <ng-container *ngFor="let state of states">\n          <button *ngIf="state.type === \'Button\'" mat-icon-button (click)="navigate(state)" matTooltip="{{state.name}}">\n            <mat-icon>{{state.icon}}</mat-icon>\n          </button>\n        </ng-container>\n        <button mat-icon-button [matMenuTriggerFor]="menu">\n          <mat-icon>more_horiz</mat-icon>\n        </button>\n        <mat-menu #menu="matMenu">\n          <ng-container *ngFor="let state of states">\n            <button *ngIf="state.type === \'State\'" mat-menu-item (click)="navigate(state)">\n              <mat-icon>{{state.icon}}</mat-icon>\n              <span>{{state.name}}</span>\n            </button>\n          </ng-container>\n        </mat-menu>\n      </ng-template>\n\n  </mat-toolbar>\n  <div class="loading">\n    <mat-progress-bar *ngIf="isShowLoading" [@fadeOut]="\'in\'" mode="indeterminate" color="primary"></mat-progress-bar>\n  </div>\n  <div class="content padding">\n    <div *ngTemplateOutlet="currentState.templateRef"></div>\n  </div>\n  <ng-content></ng-content>\n</div>\n',styles:[".tp-window{box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12)}.tp-window mat-toolbar .toolbar-title{color:#9e9e9e}.tp-window mat-toolbar .toolbar-flex{flex:1}.tp-window button{color:#9e9e9e;transition:background ease-out .2s}.tp-window button:hover{background-color:#e0e0e0}.tp-window .padding{padding:1em 1.5em}.tp-window .loading{height:10px}"],inputs:["name"],exportAs:"tpWindow",animations:[m]}]}],t.propDecorators={loadingRef:[{type:n.ViewChild,args:["loadingPortal"]}],states:[{type:n.ContentChildren,args:[p]}],loading:[{type:n.Input}],maxStateNumber:[{type:n.Input}],optionPortal:[{type:n.Input}],stateChange:[{type:n.Output}]},t}(),c=function(){function t(){}return t.decorators=[{type:n.NgModule,args:[{imports:[u.PortalModule,s.MatMenuModule,l.MatProgressBarModule,i.MatButtonModule,r.MatIconModule,o.MatTooltipModule,a.CommonModule,o.MatToolbarModule],declarations:[g,p],exports:[g,p]}]}],t}(),d={Button:0,Content:1,State:2};d[d.Button]="Button",d[d.Content]="Content",d[d.State]="State",t.stateType=d,t.WindowComponent=g,t.WindowModule=c,t.ɵb=m,t.ɵa=p,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=tp-window.umd.min.js.map