ems-web-app-view-container
Version:
This angular.io module includes a component and service that can be used to render nested view containers that transition between screens (e.g., a tab container).
104 lines • 13.1 kB
JavaScript
import { Component, HostBinding, Input, Output, EventEmitter } from '@angular/core';
import { sleep, delay } from "ems-web-app-utils";
import * as i0 from "@angular/core";
import * as i1 from "./view-container.service";
import * as i2 from "@angular/common";
export class ViewContainerComponent {
constructor(service) {
this.service = service;
this.generatedId = "";
this.currentViewClass = "";
this.transitioning = true;
this.speed = 250;
this.onReady = new EventEmitter();
this.onBegin = new EventEmitter();
this.onExecute = new EventEmitter();
this.onComplete = new EventEmitter();
this.requestedView = null;
this.currentView = null;
}
ngOnInit() {
if (!this.id) {
//auto-create ids if none supplied
this.id = `generated-vcid-${ViewContainerComponent.counter}`;
ViewContainerComponent.counter++;
}
this.generatedId = this.id;
}
ngAfterViewInit() {
delay(() => this.initialize());
}
ngOnDestroy() {
if (this.subscription)
this.subscription.unsubscribe();
}
setCurrentView(view, callback) {
this.requestedView = view;
this.callback = callback;
this.beginViewTransition();
}
async beginViewTransition() {
this.transitioning = true; //begin fadeout
this.onBegin.emit();
await sleep(this.speed);
this.executeViewTransition();
}
async executeViewTransition() {
this.currentView = null; //completely destroy current view/logic/listeners
await sleep(0);
this.currentView = this.requestedView;
await sleep(0); //allow a tick to paint the transparent state of the view
this.onExecute.emit();
if (this.callback)
this.callback();
this.transitioning = false; //begin fade in
await sleep(this.speed);
this.completeViewTransition();
}
completeViewTransition() {
this.onComplete.emit();
}
initialize() {
this.subscription = this.service.view.subscribe(view => {
if (view?.containerId !== this.id)
return;
this.setCurrentView(view);
});
this.onReady.emit(); //component is subscribed and ready to respond to view requests
}
}
ViewContainerComponent.counter = 1;
ViewContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ViewContainerComponent, deps: [{ token: i1.ViewContainerService }], target: i0.ɵɵFactoryTarget.Component });
ViewContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ViewContainerComponent, selector: "view-container", inputs: { id: "id", speed: ["transition-speed", "speed"] }, outputs: { onReady: "ready", onBegin: "begin", onExecute: "execute", onComplete: "complete" }, host: { properties: { "attr.id": "this.generatedId", "class": "this.currentViewClass", "class.transitioning": "this.transitioning" } }, ngImport: i0, template: `<ng-container *ngIf="currentView"><ng-container *ngTemplateOutlet="currentView.template"></ng-container></ng-container><ng-content></ng-content>`, isInline: true, styles: [":host{transition:opacity .25s;transition-property:opacity;display:flex;flex-direction:column;flex:1 1 auto;width:100%;overflow:auto}:host.transitioning{transition-property:opacity;opacity:0;transition:opacity .25s;pointer-events:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ViewContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'view-container', template: `<ng-container *ngIf="currentView"><ng-container *ngTemplateOutlet="currentView.template"></ng-container></ng-container><ng-content></ng-content>`, styles: [":host{transition:opacity .25s;transition-property:opacity;display:flex;flex-direction:column;flex:1 1 auto;width:100%;overflow:auto}:host.transitioning{transition-property:opacity;opacity:0;transition:opacity .25s;pointer-events:none}\n"] }]
}], ctorParameters: function () { return [{ type: i1.ViewContainerService }]; }, propDecorators: { generatedId: [{
type: HostBinding,
args: ["attr.id"]
}], currentViewClass: [{
type: HostBinding,
args: ["class"]
}], transitioning: [{
type: HostBinding,
args: ["class.transitioning"]
}], id: [{
type: Input,
args: ["id"]
}], speed: [{
type: Input,
args: ["transition-speed"]
}], onReady: [{
type: Output,
args: ["ready"]
}], onBegin: [{
type: Output,
args: ["begin"]
}], onExecute: [{
type: Output,
args: ["execute"]
}], onComplete: [{
type: Output,
args: ["complete"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlldy1jb250YWluZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi92aWV3LWNvbnRhaW5lci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQWlELE1BQU0sZUFBZSxDQUFDO0FBR25JLE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7Ozs7QUFRakQsTUFBTSxPQUFPLHNCQUFzQjtJQXNCakMsWUFBb0IsT0FBNkI7UUFBN0IsWUFBTyxHQUFQLE9BQU8sQ0FBc0I7UUFsQnpCLGdCQUFXLEdBQVcsRUFBRSxDQUFDO1FBQzNCLHFCQUFnQixHQUFXLEVBQUUsQ0FBQztRQUNoQixrQkFBYSxHQUFZLElBQUksQ0FBQztRQUd2QyxVQUFLLEdBQVcsR0FBRyxDQUFDO1FBRTlCLFlBQU8sR0FBc0IsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNoRCxZQUFPLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7UUFDOUMsY0FBUyxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ2pELGVBQVUsR0FBc0IsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUVoRSxrQkFBYSxHQUFnQixJQUFJLENBQUM7UUFDbEMsZ0JBQVcsR0FBZ0IsSUFBSSxDQUFDO0lBS2EsQ0FBQztJQUVyRCxRQUFRO1FBQ04sSUFBRyxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUU7WUFDWCxrQ0FBa0M7WUFDbEMsSUFBSSxDQUFDLEVBQUUsR0FBRyxrQkFBa0Isc0JBQXNCLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDN0Qsc0JBQXNCLENBQUMsT0FBTyxFQUFHLENBQUM7U0FDbkM7UUFDRCxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVELGVBQWU7UUFDYixLQUFLLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFHLElBQUksQ0FBQyxZQUFZO1lBQUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN4RCxDQUFDO0lBRU0sY0FBYyxDQUFDLElBQWlCLEVBQUUsUUFBcUI7UUFDNUQsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7UUFDMUIsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUM7UUFDekIsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVTLEtBQUssQ0FBQyxtQkFBbUI7UUFDakMsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsQ0FBQyxlQUFlO1FBQzFDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDcEIsTUFBTSxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3hCLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO0lBQy9CLENBQUM7SUFFUyxLQUFLLENBQUMscUJBQXFCO1FBQ25DLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLENBQUMsaURBQWlEO1FBQzFFLE1BQU0sS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ2YsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDO1FBQ3RDLE1BQU0sS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMseURBQXlEO1FBQ3pFLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDdEIsSUFBRyxJQUFJLENBQUMsUUFBUTtZQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNsQyxJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQyxDQUFDLGVBQWU7UUFDM0MsTUFBTSxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3hCLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxDQUFDO0lBQ2hDLENBQUM7SUFFUyxzQkFBc0I7UUFDOUIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRVMsVUFBVTtRQUNsQixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUNyRCxJQUFHLElBQUksRUFBRSxXQUFXLEtBQUssSUFBSSxDQUFDLEVBQUU7Z0JBQUUsT0FBTztZQUN6QyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzVCLENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDLCtEQUErRDtJQUN0RixDQUFDOztBQTNFYyw4QkFBTyxHQUFXLENBQUUsQ0FBQTttSEFGeEIsc0JBQXNCO3VHQUF0QixzQkFBc0IseVZBSHZCLGtKQUFrSjsyRkFHakosc0JBQXNCO2tCQUxsQyxTQUFTOytCQUNFLGdCQUFnQixZQUNoQixrSkFBa0o7MkdBT3BJLFdBQVc7c0JBQWxDLFdBQVc7dUJBQUMsU0FBUztnQkFDQSxnQkFBZ0I7c0JBQXJDLFdBQVc7dUJBQUMsT0FBTztnQkFDZ0IsYUFBYTtzQkFBaEQsV0FBVzt1QkFBQyxxQkFBcUI7Z0JBRXJCLEVBQUU7c0JBQWQsS0FBSzt1QkFBQyxJQUFJO2dCQUNnQixLQUFLO3NCQUEvQixLQUFLO3VCQUFDLGtCQUFrQjtnQkFFUixPQUFPO3NCQUF2QixNQUFNO3VCQUFDLE9BQU87Z0JBQ0UsT0FBTztzQkFBdkIsTUFBTTt1QkFBQyxPQUFPO2dCQUNJLFNBQVM7c0JBQTNCLE1BQU07dUJBQUMsU0FBUztnQkFDRyxVQUFVO3NCQUE3QixNQUFNO3VCQUFDLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95LCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVmlld0NvbnRhaW5lclNlcnZpY2UgfSBmcm9tIFwiLi92aWV3LWNvbnRhaW5lci5zZXJ2aWNlXCI7XG5pbXBvcnQgeyBJVmlldyB9IGZyb20gXCIuL3ZpZXctY29udGFpbmVyLmludGVyZmFjZXNcIjtcbmltcG9ydCB7IHNsZWVwLCBkZWxheSB9IGZyb20gXCJlbXMtd2ViLWFwcC11dGlsc1wiO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3ZpZXctY29udGFpbmVyJyxcbiAgdGVtcGxhdGU6IGA8bmctY29udGFpbmVyICpuZ0lmPVwiY3VycmVudFZpZXdcIj48bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY3VycmVudFZpZXcudGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj48L25nLWNvbnRhaW5lcj48bmctY29udGVudD48L25nLWNvbnRlbnQ+YCxcbiAgc3R5bGVVcmxzOiBbJy4vdmlldy1jb250YWluZXIuY29tcG9uZW50Lmxlc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBWaWV3Q29udGFpbmVyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kge1xuXG4gIHByaXZhdGUgc3RhdGljIGNvdW50ZXI6IG51bWJlciA9IDE7XG5cbiAgQEhvc3RCaW5kaW5nKFwiYXR0ci5pZFwiKSBnZW5lcmF0ZWRJZDogc3RyaW5nID0gXCJcIjtcbiAgQEhvc3RCaW5kaW5nKFwiY2xhc3NcIikgY3VycmVudFZpZXdDbGFzczogc3RyaW5nID0gXCJcIjtcbiAgQEhvc3RCaW5kaW5nKFwiY2xhc3MudHJhbnNpdGlvbmluZ1wiKSB0cmFuc2l0aW9uaW5nOiBib29sZWFuID0gdHJ1ZTtcbiAgXG4gIEBJbnB1dChcImlkXCIpIGlkPzogc3RyaW5nO1xuICBASW5wdXQoXCJ0cmFuc2l0aW9uLXNwZWVkXCIpIHNwZWVkOiBudW1iZXIgPSAyNTA7XG5cbiAgQE91dHB1dChcInJlYWR5XCIpIG9uUmVhZHk6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KFwiYmVnaW5cIikgb25CZWdpbjogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBPdXRwdXQoXCJleGVjdXRlXCIpIG9uRXhlY3V0ZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBPdXRwdXQoXCJjb21wbGV0ZVwiKSBvbkNvbXBsZXRlOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBwdWJsaWMgcmVxdWVzdGVkVmlldzpJVmlldyB8IG51bGwgPSBudWxsO1xuICBwdWJsaWMgY3VycmVudFZpZXc6SVZpZXcgfCBudWxsID0gbnVsbDtcblxuICBwcm90ZWN0ZWQgY2FsbGJhY2s/OiAoKSA9PiB2b2lkO1xuICBwcm90ZWN0ZWQgc3Vic2NyaXB0aW9uITogU3Vic2NyaXB0aW9uO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgc2VydmljZTogVmlld0NvbnRhaW5lclNlcnZpY2UpIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgaWYoIXRoaXMuaWQpIHtcbiAgICAgIC8vYXV0by1jcmVhdGUgaWRzIGlmIG5vbmUgc3VwcGxpZWRcbiAgICAgIHRoaXMuaWQgPSBgZ2VuZXJhdGVkLXZjaWQtJHtWaWV3Q29udGFpbmVyQ29tcG9uZW50LmNvdW50ZXJ9YDtcbiAgICAgIFZpZXdDb250YWluZXJDb21wb25lbnQuY291bnRlciArKztcbiAgICB9XG4gICAgdGhpcy5nZW5lcmF0ZWRJZCA9IHRoaXMuaWQ7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgZGVsYXkoKCkgPT4gdGhpcy5pbml0aWFsaXplKCkpO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgaWYodGhpcy5zdWJzY3JpcHRpb24pIHRoaXMuc3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBwdWJsaWMgc2V0Q3VycmVudFZpZXcodmlldzpJVmlldyB8IG51bGwsIGNhbGxiYWNrPzogKCkgPT4gdm9pZCkge1xuICAgIHRoaXMucmVxdWVzdGVkVmlldyA9IHZpZXc7XG4gICAgdGhpcy5jYWxsYmFjayA9IGNhbGxiYWNrO1xuICAgIHRoaXMuYmVnaW5WaWV3VHJhbnNpdGlvbigpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGFzeW5jIGJlZ2luVmlld1RyYW5zaXRpb24oKSB7XG4gICAgdGhpcy50cmFuc2l0aW9uaW5nID0gdHJ1ZTsgLy9iZWdpbiBmYWRlb3V0XG4gICAgdGhpcy5vbkJlZ2luLmVtaXQoKTtcbiAgICBhd2FpdCBzbGVlcCh0aGlzLnNwZWVkKTtcbiAgICB0aGlzLmV4ZWN1dGVWaWV3VHJhbnNpdGlvbigpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGFzeW5jIGV4ZWN1dGVWaWV3VHJhbnNpdGlvbigpIHtcbiAgICB0aGlzLmN1cnJlbnRWaWV3ID0gbnVsbDsgLy9jb21wbGV0ZWx5IGRlc3Ryb3kgY3VycmVudCB2aWV3L2xvZ2ljL2xpc3RlbmVyc1xuICAgIGF3YWl0IHNsZWVwKDApO1xuICAgIHRoaXMuY3VycmVudFZpZXcgPSB0aGlzLnJlcXVlc3RlZFZpZXc7XG4gICAgYXdhaXQgc2xlZXAoMCk7IC8vYWxsb3cgYSB0aWNrIHRvIHBhaW50IHRoZSB0cmFuc3BhcmVudCBzdGF0ZSBvZiB0aGUgdmlld1xuICAgIHRoaXMub25FeGVjdXRlLmVtaXQoKTtcbiAgICBpZih0aGlzLmNhbGxiYWNrKSB0aGlzLmNhbGxiYWNrKCk7XG4gICAgdGhpcy50cmFuc2l0aW9uaW5nID0gZmFsc2U7IC8vYmVnaW4gZmFkZSBpblxuICAgIGF3YWl0IHNsZWVwKHRoaXMuc3BlZWQpO1xuICAgIHRoaXMuY29tcGxldGVWaWV3VHJhbnNpdGlvbigpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGNvbXBsZXRlVmlld1RyYW5zaXRpb24oKSB7XG4gICAgdGhpcy5vbkNvbXBsZXRlLmVtaXQoKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBpbml0aWFsaXplKCkge1xuICAgIHRoaXMuc3Vic2NyaXB0aW9uID0gdGhpcy5zZXJ2aWNlLnZpZXcuc3Vic2NyaWJlKHZpZXcgPT4ge1xuICAgICAgaWYodmlldz8uY29udGFpbmVySWQgIT09IHRoaXMuaWQpIHJldHVybjtcbiAgICAgIHRoaXMuc2V0Q3VycmVudFZpZXcodmlldyk7XG4gICAgfSk7XG5cbiAgICB0aGlzLm9uUmVhZHkuZW1pdCgpOyAvL2NvbXBvbmVudCBpcyBzdWJzY3JpYmVkIGFuZCByZWFkeSB0byByZXNwb25kIHRvIHZpZXcgcmVxdWVzdHNcbiAgfVxufVxuIl19