@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
114 lines • 10.1 kB
JavaScript
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { TabsService } from './tabs.service';
import * as i0 from "@angular/core";
import * as i1 from "./tabs.service";
import * as i2 from "@angular/router";
/**
* Register this component on the parent route of a view with multiple tabs where the first tab
* is displayed only conditionally.
*
* Given the following routes leading to a single view with multiple tabs:<br>
* /yourpath/tab-a -> Tab A<br>
* /yourpath/tab-b -> Tab B<br>
* /yourpath/tab-c -> Tab C
*
* Your components will be registered like
* ```typescript
* export const routes: Route[] = [
* {
* path: 'yourpath/tab-a',
* component: TabAComponent
* },
* {
* path: 'yourpath/tab-b',
* component: TabBComponent
* },
* {
* path: 'yourpath/tab-c',
* component: TabCComponent
* }
* ];
* ```
*
* In the simple case where Tab A is the first tab on the view and it is always displayed, you can register
* your view in the navigation with a similar navigator node:
*
* ```typescript
* new NavigatorNode({
* label: gettext('My tabs'),
* path: 'yourpath/tab-a',
* icon: 'gears',
* parent: gettext('Some parent node'),
* priority: 100
* })
* ```
*
* This will navigate to the first tab's component and activate the first tab in the view.
*
* In case Tab A is displayed conditionally you cannot link it from a navigator node since it may not be available in some cases.
* In this situation `ConditionalTabsOutletComponent` comes handy as it will forward users to the first available tab on your view:
*
* ```typescript
* new NavigatorNode({
* label: gettext('My tabs'),
* path: 'yourpath', // note that here we use only the parent route
* icon: 'gears',
* parent: gettext('Some parent node'),
* priority: 100
* })
*
* [...]
*
* export const routes: Route[] = [
* {
* path: 'yourpath',
* component: ConditionalTabsOutletComponent // we register ConditionalTabsOutletComponent for the parent path
* },
* {
* path: 'yourpath/tab-a',
* component: TabAComponent
* },
* {
* path: 'yourpath/tab-b',
* component: TabBComponent
* },
* {
* path: 'yourpath/tab-c',
* component: TabCComponent
* }
* ];
* ```
*/
export class ConditionalTabsOutletComponent {
constructor(tabsService, router) {
this.tabsService = tabsService;
this.router = router;
this.endSubscriptions$ = new Subject();
}
ngOnInit() {
this.tabsService.firstTab$.pipe(takeUntil(this.endSubscriptions$)).subscribe((tab) => {
if (tab) {
this.router.navigate(typeof tab.path === 'string' ? [tab.path] : tab.path, {
replaceUrl: true
});
}
});
}
ngOnDestroy() {
this.endSubscriptions$.next();
this.endSubscriptions$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConditionalTabsOutletComponent, deps: [{ token: i1.TabsService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConditionalTabsOutletComponent, selector: "c8y-conditional-tabs-outlet", ngImport: i0, template: ` <router-outlet></router-outlet> `, isInline: true, dependencies: [{ kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConditionalTabsOutletComponent, decorators: [{
type: Component,
args: [{
selector: 'c8y-conditional-tabs-outlet',
template: ` <router-outlet></router-outlet> `
}]
}], ctorParameters: () => [{ type: i1.TabsService }, { type: i2.Router }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uZGl0aW9uYWwtdGFicy1vdXRsZXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29yZS90YWJzL2NvbmRpdGlvbmFsLXRhYnMtb3V0bGV0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUM3RCxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDekMsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMvQixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFM0MsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBRTdDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0EyRUc7QUFLSCxNQUFNLE9BQU8sOEJBQThCO0lBR3pDLFlBQ1UsV0FBd0IsRUFDeEIsTUFBYztRQURkLGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBQ3hCLFdBQU0sR0FBTixNQUFNLENBQVE7UUFKaEIsc0JBQWlCLEdBQWtCLElBQUksT0FBTyxFQUFFLENBQUM7SUFLdEQsQ0FBQztJQUVKLFFBQVE7UUFDTixJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsR0FBUSxFQUFFLEVBQUU7WUFDeEYsSUFBSSxHQUFHLEVBQUUsQ0FBQztnQkFDUixJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxPQUFPLEdBQUcsQ0FBQyxJQUFJLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLElBQUksRUFBRTtvQkFDekUsVUFBVSxFQUFFLElBQUk7aUJBQ2pCLENBQUMsQ0FBQztZQUNMLENBQUM7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksRUFBRSxDQUFDO1FBQzlCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNwQyxDQUFDOytHQXJCVSw4QkFBOEI7bUdBQTlCLDhCQUE4QixtRUFGL0IsbUNBQW1DOzs0RkFFbEMsOEJBQThCO2tCQUoxQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSw2QkFBNkI7b0JBQ3ZDLFFBQVEsRUFBRSxtQ0FBbUM7aUJBQzlDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkRlc3Ryb3ksIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUm91dGVyIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IFRhYiB9IGZyb20gJy4vdGFiLm1vZGVsJztcbmltcG9ydCB7IFRhYnNTZXJ2aWNlIH0gZnJvbSAnLi90YWJzLnNlcnZpY2UnO1xuXG4vKipcbiAqIFJlZ2lzdGVyIHRoaXMgY29tcG9uZW50IG9uIHRoZSBwYXJlbnQgcm91dGUgb2YgYSB2aWV3IHdpdGggbXVsdGlwbGUgdGFicyB3aGVyZSB0aGUgZmlyc3QgdGFiXG4gKiBpcyBkaXNwbGF5ZWQgb25seSBjb25kaXRpb25hbGx5LlxuICpcbiAqIEdpdmVuIHRoZSBmb2xsb3dpbmcgcm91dGVzIGxlYWRpbmcgdG8gYSBzaW5nbGUgdmlldyB3aXRoIG11bHRpcGxlIHRhYnM6PGJyPlxuICogL3lvdXJwYXRoL3RhYi1hIC0+IFRhYiBBPGJyPlxuICogL3lvdXJwYXRoL3RhYi1iIC0+IFRhYiBCPGJyPlxuICogL3lvdXJwYXRoL3RhYi1jIC0+IFRhYiBDXG4gKlxuICogWW91ciBjb21wb25lbnRzIHdpbGwgYmUgcmVnaXN0ZXJlZCBsaWtlXG4gKiBgYGB0eXBlc2NyaXB0XG4gKiBleHBvcnQgY29uc3Qgcm91dGVzOiBSb3V0ZVtdID0gW1xuICogICB7XG4gKiAgICAgcGF0aDogJ3lvdXJwYXRoL3RhYi1hJyxcbiAqICAgICBjb21wb25lbnQ6IFRhYkFDb21wb25lbnRcbiAqICAgfSxcbiAqICAge1xuICogICAgIHBhdGg6ICd5b3VycGF0aC90YWItYicsXG4gKiAgICAgY29tcG9uZW50OiBUYWJCQ29tcG9uZW50XG4gKiAgIH0sXG4gKiAgIHtcbiAqICAgICBwYXRoOiAneW91cnBhdGgvdGFiLWMnLFxuICogICAgIGNvbXBvbmVudDogVGFiQ0NvbXBvbmVudFxuICogICB9XG4gKiBdO1xuICogYGBgXG4gKlxuICogSW4gdGhlIHNpbXBsZSBjYXNlIHdoZXJlIFRhYiBBIGlzIHRoZSBmaXJzdCB0YWIgb24gdGhlIHZpZXcgYW5kIGl0IGlzIGFsd2F5cyBkaXNwbGF5ZWQsIHlvdSBjYW4gcmVnaXN0ZXJcbiAqIHlvdXIgdmlldyBpbiB0aGUgbmF2aWdhdGlvbiB3aXRoIGEgc2ltaWxhciBuYXZpZ2F0b3Igbm9kZTpcbiAqXG4gKiBgYGB0eXBlc2NyaXB0XG4gKiBuZXcgTmF2aWdhdG9yTm9kZSh7XG4gKiAgIGxhYmVsOiBnZXR0ZXh0KCdNeSB0YWJzJyksXG4gKiAgIHBhdGg6ICd5b3VycGF0aC90YWItYScsXG4gKiAgIGljb246ICdnZWFycycsXG4gKiAgIHBhcmVudDogZ2V0dGV4dCgnU29tZSBwYXJlbnQgbm9kZScpLFxuICogICBwcmlvcml0eTogMTAwXG4gKiB9KVxuICogYGBgXG4gKlxuICogVGhpcyB3aWxsIG5hdmlnYXRlIHRvIHRoZSBmaXJzdCB0YWIncyBjb21wb25lbnQgYW5kIGFjdGl2YXRlIHRoZSBmaXJzdCB0YWIgaW4gdGhlIHZpZXcuXG4gKlxuICogSW4gY2FzZSBUYWIgQSBpcyBkaXNwbGF5ZWQgY29uZGl0aW9uYWxseSB5b3UgY2Fubm90IGxpbmsgaXQgZnJvbSBhIG5hdmlnYXRvciBub2RlIHNpbmNlIGl0IG1heSBub3QgYmUgYXZhaWxhYmxlIGluIHNvbWUgY2FzZXMuXG4gKiBJbiB0aGlzIHNpdHVhdGlvbiBgQ29uZGl0aW9uYWxUYWJzT3V0bGV0Q29tcG9uZW50YCBjb21lcyBoYW5keSBhcyBpdCB3aWxsIGZvcndhcmQgdXNlcnMgdG8gdGhlIGZpcnN0IGF2YWlsYWJsZSB0YWIgb24geW91ciB2aWV3OlxuICpcbiAqIGBgYHR5cGVzY3JpcHRcbiAqIG5ldyBOYXZpZ2F0b3JOb2RlKHtcbiAqICAgbGFiZWw6IGdldHRleHQoJ015IHRhYnMnKSxcbiAqICAgcGF0aDogJ3lvdXJwYXRoJywgLy8gbm90ZSB0aGF0IGhlcmUgd2UgdXNlIG9ubHkgdGhlIHBhcmVudCByb3V0ZVxuICogICBpY29uOiAnZ2VhcnMnLFxuICogICBwYXJlbnQ6IGdldHRleHQoJ1NvbWUgcGFyZW50IG5vZGUnKSxcbiAqICAgcHJpb3JpdHk6IDEwMFxuICogfSlcbiAqXG4gKiBbLi4uXVxuICpcbiAqIGV4cG9ydCBjb25zdCByb3V0ZXM6IFJvdXRlW10gPSBbXG4gKiAgIHtcbiAqICAgICBwYXRoOiAneW91cnBhdGgnLFxuICogICAgIGNvbXBvbmVudDogQ29uZGl0aW9uYWxUYWJzT3V0bGV0Q29tcG9uZW50IC8vIHdlIHJlZ2lzdGVyIENvbmRpdGlvbmFsVGFic091dGxldENvbXBvbmVudCBmb3IgdGhlIHBhcmVudCBwYXRoXG4gKiAgIH0sXG4gKiAgIHtcbiAqICAgICBwYXRoOiAneW91cnBhdGgvdGFiLWEnLFxuICogICAgIGNvbXBvbmVudDogVGFiQUNvbXBvbmVudFxuICogICB9LFxuICogICB7XG4gKiAgICAgcGF0aDogJ3lvdXJwYXRoL3RhYi1iJyxcbiAqICAgICBjb21wb25lbnQ6IFRhYkJDb21wb25lbnRcbiAqICAgfSxcbiAqICAge1xuICogICAgIHBhdGg6ICd5b3VycGF0aC90YWItYycsXG4gKiAgICAgY29tcG9uZW50OiBUYWJDQ29tcG9uZW50XG4gKiAgIH1cbiAqIF07XG4gKiBgYGBcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYzh5LWNvbmRpdGlvbmFsLXRhYnMtb3V0bGV0JyxcbiAgdGVtcGxhdGU6IGAgPHJvdXRlci1vdXRsZXQ+PC9yb3V0ZXItb3V0bGV0PiBgXG59KVxuZXhwb3J0IGNsYXNzIENvbmRpdGlvbmFsVGFic091dGxldENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgcHJpdmF0ZSBlbmRTdWJzY3JpcHRpb25zJDogU3ViamVjdDx2b2lkPiA9IG5ldyBTdWJqZWN0KCk7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSB0YWJzU2VydmljZTogVGFic1NlcnZpY2UsXG4gICAgcHJpdmF0ZSByb3V0ZXI6IFJvdXRlclxuICApIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy50YWJzU2VydmljZS5maXJzdFRhYiQucGlwZSh0YWtlVW50aWwodGhpcy5lbmRTdWJzY3JpcHRpb25zJCkpLnN1YnNjcmliZSgodGFiOiBUYWIpID0+IHtcbiAgICAgIGlmICh0YWIpIHtcbiAgICAgICAgdGhpcy5yb3V0ZXIubmF2aWdhdGUodHlwZW9mIHRhYi5wYXRoID09PSAnc3RyaW5nJyA/IFt0YWIucGF0aF0gOiB0YWIucGF0aCwge1xuICAgICAgICAgIHJlcGxhY2VVcmw6IHRydWVcbiAgICAgICAgfSk7XG4gICAgICB9XG4gICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLmVuZFN1YnNjcmlwdGlvbnMkLm5leHQoKTtcbiAgICB0aGlzLmVuZFN1YnNjcmlwdGlvbnMkLmNvbXBsZXRlKCk7XG4gIH1cbn1cbiJdfQ==