tp-window
Version:
ThingsPro window component UI
130 lines (127 loc) • 11.5 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import { Component, ContentChildren, QueryList, TemplateRef, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { Portal } from '@angular/cdk/portal';
import { WindowStateComponent } from './tp-window.state.component';
import { Observable } from 'rxjs';
import { fadeOutAnimation } from './tp-window.animation';
export class WindowComponent {
constructor() {
this.maxStateNumber = 5;
this.stateChange = new EventEmitter();
this.isShowLoading = false;
}
/**
* @param {?} loading
* @return {?}
*/
set loading(loading) {
if (loading) {
this.isShowLoading = true;
loading.subscribe(() => {
this.isShowLoading = false;
});
}
}
/**
* @param {?} portal
* @return {?}
*/
setPortal(portal) {
this.optionPortal = portal;
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.currentState = this.states.first;
}
/**
* @param {?} state
* @return {?}
*/
navigate(state) {
if (state.type !== 'Button') {
this.currentState = state;
}
this.stateChange.emit(state);
}
}
WindowComponent.decorators = [
{ type: Component, args: [{
selector: 'tp-window',
template: `<div class="tp-window">
<mat-toolbar>
<p class="mat-body-2 toolbar-title">{{name}}</p>
<div class="toolbar-flex"></div>
<ng-template [cdkPortalOutlet]="optionPortal"></ng-template>
<ng-template [ngIf]="states.length <= maxStateNumber">
<ng-container *ngFor="let state of states">
<button *ngIf="state.type !== 'Content'" mat-icon-button (click)="navigate(state)" matTooltip="{{state.name}}">
<mat-icon>{{state.icon}}</mat-icon>
</button>
</ng-container>
</ng-template>
<ng-template [ngIf]="states.length > maxStateNumber">
<ng-container *ngFor="let state of states">
<button *ngIf="state.type === 'Button'" mat-icon-button (click)="navigate(state)" matTooltip="{{state.name}}">
<mat-icon>{{state.icon}}</mat-icon>
</button>
</ng-container>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #menu="matMenu">
<ng-container *ngFor="let state of states">
<button *ngIf="state.type === 'State'" mat-menu-item (click)="navigate(state)">
<mat-icon>{{state.icon}}</mat-icon>
<span>{{state.name}}</span>
</button>
</ng-container>
</mat-menu>
</ng-template>
</mat-toolbar>
<div class="loading">
<mat-progress-bar *ngIf="isShowLoading" []="'in'" mode="indeterminate" color="primary"></mat-progress-bar>
</div>
<div class="content padding">
<div *ngTemplateOutlet="currentState.templateRef"></div>
</div>
<ng-content></ng-content>
</div>
`,
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: [fadeOutAnimation]
},] },
];
WindowComponent.propDecorators = {
loadingRef: [{ type: ViewChild, args: ['loadingPortal',] }],
states: [{ type: ContentChildren, args: [WindowStateComponent,] }],
loading: [{ type: Input }],
maxStateNumber: [{ type: Input }],
optionPortal: [{ type: Input }],
stateChange: [{ type: Output }]
};
function WindowComponent_tsickle_Closure_declarations() {
/** @type {?} */
WindowComponent.prototype.loadingRef;
/** @type {?} */
WindowComponent.prototype.states;
/** @type {?} */
WindowComponent.prototype.maxStateNumber;
/** @type {?} */
WindowComponent.prototype.optionPortal;
/** @type {?} */
WindowComponent.prototype.stateChange;
/** @type {?} */
WindowComponent.prototype.name;
/** @type {?} */
WindowComponent.prototype.currentState;
/** @type {?} */
WindowComponent.prototype.isShowLoading;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHAtd2luZG93LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL3RwLXdpbmRvdy8iLCJzb3VyY2VzIjpbImxpYi90cC13aW5kb3cuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULGVBQWUsRUFDZixTQUFTLEVBRVQsV0FBVyxFQUNYLEtBQUssRUFDTCxNQUFNLEVBQ04sWUFBWSxFQUNaLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNuQyxPQUFPLEVBQW1CLE1BQU0sRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQzlELE9BQU8sRUFBRSxvQkFBb0IsRUFBWSxNQUFNLDZCQUE2QixDQUFDO0FBQzdFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDbEMsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFvRHpELE1BQU07OzhCQVk4QixDQUFDOzJCQUV5QixJQUFJLFlBQVksRUFBd0I7NkJBRzNFLEtBQUs7Ozs7OztJQWQ5QixJQUNJLE9BQU8sQ0FBQyxPQUF1QjtRQUNqQyxFQUFFLENBQUEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO1lBQ1gsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7WUFDMUIsT0FBTyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7Z0JBQ3JCLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO2FBQzVCLENBQUMsQ0FBQztTQUNKO0tBQ0Y7Ozs7O0lBUUQsU0FBUyxDQUFDLE1BQW1CO1FBQzNCLElBQUksQ0FBQyxZQUFZLEdBQUcsTUFBTSxDQUFDO0tBQzVCOzs7O0lBRUQsa0JBQWtCO1FBQ2hCLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7S0FDdkM7Ozs7O0lBRUQsUUFBUSxDQUFDLEtBQTJCO1FBQ2xDLEVBQUUsQ0FBQSxDQUFDLEtBQUssQ0FBQyxJQUFJLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQztZQUMzQixJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQztTQUMzQjtRQUNELElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0tBQzlCOzs7WUFqRkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxXQUFXO2dCQUNyQixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBeUNYO2dCQUNDLE1BQU0sRUFBRSxDQUFDLHdZQUF3WSxDQUFDO2dCQUNsWixNQUFNLEVBQUUsQ0FBQyxNQUFNLENBQUM7Z0JBQ2hCLFFBQVEsRUFBRSxVQUFVO2dCQUNwQixVQUFVLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQzthQUMvQjs7O3lCQUVFLFNBQVMsU0FBQyxlQUFlO3FCQUN6QixlQUFlLFNBQUMsb0JBQW9CO3NCQUNwQyxLQUFLOzZCQVNMLEtBQUs7MkJBQ0wsS0FBSzswQkFDTCxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGRyZW4sXG4gIFF1ZXJ5TGlzdCxcbiAgQWZ0ZXJDb250ZW50SW5pdCxcbiAgVGVtcGxhdGVSZWYsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIEV2ZW50RW1pdHRlcixcbiAgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDZGtQb3J0YWxPdXRsZXQsIFBvcnRhbCB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9wb3J0YWwnO1xuaW1wb3J0IHsgV2luZG93U3RhdGVDb21wb25lbnQsc3RhdGVUeXBlIH0gZnJvbSAnLi90cC13aW5kb3cuc3RhdGUuY29tcG9uZW50JztcbmltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IGZhZGVPdXRBbmltYXRpb24gfSBmcm9tICcuL3RwLXdpbmRvdy5hbmltYXRpb24nO1xuZXhwb3J0IHsgc3RhdGVUeXBlIH0gZnJvbSAnLi90cC13aW5kb3cuc3RhdGUuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndHAtd2luZG93JyxcbiAgdGVtcGxhdGU6IGA8ZGl2IGNsYXNzPVwidHAtd2luZG93XCI+XG4gIDxtYXQtdG9vbGJhcj5cbiAgICA8cCBjbGFzcz1cIm1hdC1ib2R5LTIgdG9vbGJhci10aXRsZVwiPnt7bmFtZX19PC9wPlxuICAgIDxkaXYgY2xhc3M9XCJ0b29sYmFyLWZsZXhcIj48L2Rpdj5cbiAgICAgIDxuZy10ZW1wbGF0ZSBbY2RrUG9ydGFsT3V0bGV0XT1cIm9wdGlvblBvcnRhbFwiPjwvbmctdGVtcGxhdGU+XG4gICAgICA8bmctdGVtcGxhdGUgW25nSWZdPVwic3RhdGVzLmxlbmd0aCA8PSBtYXhTdGF0ZU51bWJlclwiPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBzdGF0ZSBvZiBzdGF0ZXNcIj5cbiAgICAgICAgICA8YnV0dG9uICpuZ0lmPVwic3RhdGUudHlwZSAhPT0gJ0NvbnRlbnQnXCIgbWF0LWljb24tYnV0dG9uIChjbGljayk9XCJuYXZpZ2F0ZShzdGF0ZSlcIiBtYXRUb29sdGlwPVwie3tzdGF0ZS5uYW1lfX1cIj5cbiAgICAgICAgICAgIDxtYXQtaWNvbj57e3N0YXRlLmljb259fTwvbWF0LWljb24+XG4gICAgICAgICAgPC9idXR0b24+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cblxuICAgICAgPG5nLXRlbXBsYXRlIFtuZ0lmXT1cInN0YXRlcy5sZW5ndGggPiBtYXhTdGF0ZU51bWJlclwiPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBzdGF0ZSBvZiBzdGF0ZXNcIj5cbiAgICAgICAgICA8YnV0dG9uICpuZ0lmPVwic3RhdGUudHlwZSA9PT0gJ0J1dHRvbidcIiBtYXQtaWNvbi1idXR0b24gKGNsaWNrKT1cIm5hdmlnYXRlKHN0YXRlKVwiIG1hdFRvb2x0aXA9XCJ7e3N0YXRlLm5hbWV9fVwiPlxuICAgICAgICAgICAgPG1hdC1pY29uPnt7c3RhdGUuaWNvbn19PC9tYXQtaWNvbj5cbiAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDxidXR0b24gbWF0LWljb24tYnV0dG9uIFttYXRNZW51VHJpZ2dlckZvcl09XCJtZW51XCI+XG4gICAgICAgICAgPG1hdC1pY29uPm1vcmVfaG9yaXo8L21hdC1pY29uPlxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgPG1hdC1tZW51ICNtZW51PVwibWF0TWVudVwiPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IHN0YXRlIG9mIHN0YXRlc1wiPlxuICAgICAgICAgICAgPGJ1dHRvbiAqbmdJZj1cInN0YXRlLnR5cGUgPT09ICdTdGF0ZSdcIiBtYXQtbWVudS1pdGVtIChjbGljayk9XCJuYXZpZ2F0ZShzdGF0ZSlcIj5cbiAgICAgICAgICAgICAgPG1hdC1pY29uPnt7c3RhdGUuaWNvbn19PC9tYXQtaWNvbj5cbiAgICAgICAgICAgICAgPHNwYW4+e3tzdGF0ZS5uYW1lfX08L3NwYW4+XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPC9tYXQtbWVudT5cbiAgICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgPC9tYXQtdG9vbGJhcj5cbiAgPGRpdiBjbGFzcz1cImxvYWRpbmdcIj5cbiAgICA8bWF0LXByb2dyZXNzLWJhciAqbmdJZj1cImlzU2hvd0xvYWRpbmdcIiBbQGZhZGVPdXRdPVwiJ2luJ1wiIG1vZGU9XCJpbmRldGVybWluYXRlXCIgY29sb3I9XCJwcmltYXJ5XCI+PC9tYXQtcHJvZ3Jlc3MtYmFyPlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImNvbnRlbnQgcGFkZGluZ1wiPlxuICAgIDxkaXYgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjdXJyZW50U3RhdGUudGVtcGxhdGVSZWZcIj48L2Rpdj5cbiAgPC9kaXY+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvZGl2PlxuYCxcbiAgc3R5bGVzOiBbYC50cC13aW5kb3d7Ym94LXNoYWRvdzowIDFweCAzcHggMCByZ2JhKDAsMCwwLC4yKSwwIDFweCAxcHggMCByZ2JhKDAsMCwwLC4xNCksMCAycHggMXB4IC0xcHggcmdiYSgwLDAsMCwuMTIpfS50cC13aW5kb3cgbWF0LXRvb2xiYXIgLnRvb2xiYXItdGl0bGV7Y29sb3I6IzllOWU5ZX0udHAtd2luZG93IG1hdC10b29sYmFyIC50b29sYmFyLWZsZXh7ZmxleDoxfS50cC13aW5kb3cgYnV0dG9ue2NvbG9yOiM5ZTllOWU7dHJhbnNpdGlvbjpiYWNrZ3JvdW5kIGVhc2Utb3V0IC4yc30udHAtd2luZG93IGJ1dHRvbjpob3ZlcntiYWNrZ3JvdW5kLWNvbG9yOiNlMGUwZTB9LnRwLXdpbmRvdyAucGFkZGluZ3twYWRkaW5nOjFlbSAxLjVlbX0udHAtd2luZG93IC5sb2FkaW5ne2hlaWdodDoxMHB4fWBdLFxuICBpbnB1dHM6IFsnbmFtZSddLFxuICBleHBvcnRBczogJ3RwV2luZG93JyxcbiAgYW5pbWF0aW9uczogW2ZhZGVPdXRBbmltYXRpb25dXG59KVxuZXhwb3J0IGNsYXNzIFdpbmRvd0NvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xuICBAVmlld0NoaWxkKCdsb2FkaW5nUG9ydGFsJykgbG9hZGluZ1JlZjogVGVtcGxhdGVSZWY8YW55PjtcbiAgQENvbnRlbnRDaGlsZHJlbihXaW5kb3dTdGF0ZUNvbXBvbmVudCkgc3RhdGVzOiBRdWVyeUxpc3Q8V2luZG93U3RhdGVDb21wb25lbnQ+O1xuICBASW5wdXQoKVxuICBzZXQgbG9hZGluZyhsb2FkaW5nOk9ic2VydmFibGU8YW55Pikge1xuICAgIGlmKGxvYWRpbmcpIHtcbiAgICAgIHRoaXMuaXNTaG93TG9hZGluZyA9IHRydWU7XG4gICAgICBsb2FkaW5nLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICAgIHRoaXMuaXNTaG93TG9hZGluZyA9IGZhbHNlO1xuICAgICAgfSk7XG4gICAgfVxuICB9XG4gIEBJbnB1dCgpIG1heFN0YXRlTnVtYmVyOiBudW1iZXIgPSA1O1xuICBASW5wdXQoKSBvcHRpb25Qb3J0YWw6IFBvcnRhbDxhbnk+IHwgdW5kZWZpbmVkO1xuICBAT3V0cHV0KCkgc3RhdGVDaGFuZ2U6IEV2ZW50RW1pdHRlcjxXaW5kb3dTdGF0ZUNvbXBvbmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyPFdpbmRvd1N0YXRlQ29tcG9uZW50PigpO1xuICBuYW1lOiBzdHJpbmc7XG4gIGN1cnJlbnRTdGF0ZTogV2luZG93U3RhdGVDb21wb25lbnQ7XG4gIGlzU2hvd0xvYWRpbmc6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBzZXRQb3J0YWwocG9ydGFsOiBQb3J0YWw8YW55Pikge1xuICAgIHRoaXMub3B0aW9uUG9ydGFsID0gcG9ydGFsO1xuICB9XG5cbiAgbmdBZnRlckNvbnRlbnRJbml0KCkge1xuICAgIHRoaXMuY3VycmVudFN0YXRlID0gdGhpcy5zdGF0ZXMuZmlyc3Q7XG4gIH1cblxuICBuYXZpZ2F0ZShzdGF0ZTogV2luZG93U3RhdGVDb21wb25lbnQpIHtcbiAgICBpZihzdGF0ZS50eXBlICE9PSAnQnV0dG9uJykge1xuICAgICAgdGhpcy5jdXJyZW50U3RhdGUgPSBzdGF0ZTtcbiAgICB9XG4gICAgdGhpcy5zdGF0ZUNoYW5nZS5lbWl0KHN0YXRlKTtcbiAgfVxufVxuIl19