@c8y/ngx-components/esm2022/core/drawer/drawer-outlet/drawer-outlet.component.mjs

Angular modules for Cumulocity IoT applications

import { Component, Input } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';
import { DrawerService } from '../drawer.service';
import * as i0 from "@angular/core";
import * as i1 from "../drawer.service";
import * as i2 from "@angular/cdk/a11y";
import * as i3 from "@angular/common";
import * as i4 from "../../common/component-outlet.directive";
import * as i5 from "../../i18n/c8y-translate.pipe";
export class DrawerOutletComponent {
    constructor(drawerService) {
        this.drawerService = drawerService;
        this.drawerPosition$ = new BehaviorSubject(null);
        const cleanedPosition$ = this.drawerPosition$.pipe(filter(p => !!p), distinctUntilChanged());
        this.isLeft$ = cleanedPosition$.pipe(map(position => position === 'left'));
        this.drawerItems$ = cleanedPosition$.pipe(filter(p => !!p), distinctUntilChanged(), switchMap(position => this.drawerService.getDrawersForPosition$(position)));
    }
    ngOnChanges(changes) {
        if (changes.position) {
            this.drawerPosition$.next(this.position);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerOutletComponent, deps: [{ token: i1.DrawerService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DrawerOutletComponent, selector: "c8y-drawer-outlet", inputs: { position: "position", open: "open" }, usesOnChanges: true, ngImport: i0, template: "<nav\n  id=\"navigator\"\n  class=\"navigator\"\n  [attr.aria-label]=\"'Navigator' | translate\"\n  [ngClass]=\"{ open: open }\"\n  *ngIf=\"isLeft$ | async; else right\"\n>\n  <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n</nav>\n\n<ng-template #right>\n  <aside class=\"c8y-right-drawer\" [cdkTrapFocus]=\"open\" [attr.aria-label]=\"'User menu' | translate\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </aside>\n</ng-template>\n\n<ng-template #content>\n  <ng-container *ngFor=\"let drawerItem of drawerItems$ | async\">\n    <ng-container *c8yComponentOutlet=\"drawerItem.component; environmentInjector: drawerItem.injector\"></ng-container>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector"] }, { kind: "pipe", type: i5.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DrawerOutletComponent, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-drawer-outlet', template: "<nav\n  id=\"navigator\"\n  class=\"navigator\"\n  [attr.aria-label]=\"'Navigator' | translate\"\n  [ngClass]=\"{ open: open }\"\n  *ngIf=\"isLeft$ | async; else right\"\n>\n  <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n</nav>\n\n<ng-template #right>\n  <aside class=\"c8y-right-drawer\" [cdkTrapFocus]=\"open\" [attr.aria-label]=\"'User menu' | translate\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </aside>\n</ng-template>\n\n<ng-template #content>\n  <ng-container *ngFor=\"let drawerItem of drawerItems$ | async\">\n    <ng-container *c8yComponentOutlet=\"drawerItem.component; environmentInjector: drawerItem.injector\"></ng-container>\n  </ng-container>\n</ng-template>\n" }]
        }], ctorParameters: () => [{ type: i1.DrawerService }], propDecorators: { position: [{
                type: Input
            }], open: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhd2VyLW91dGxldC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9jb3JlL2RyYXdlci9kcmF3ZXItb3V0bGV0L2RyYXdlci1vdXRsZXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vY29yZS9kcmF3ZXIvZHJhd2VyLW91dGxldC9kcmF3ZXItb3V0bGV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUE0QixNQUFNLGVBQWUsQ0FBQztBQUMzRSxPQUFPLEVBQUUsZUFBZSxFQUFjLE1BQU0sTUFBTSxDQUFDO0FBQ25ELE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTlFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7Ozs7OztBQU1sRCxNQUFNLE9BQU8scUJBQXFCO0lBU2hDLFlBQW9CLGFBQTRCO1FBQTVCLGtCQUFhLEdBQWIsYUFBYSxDQUFlO1FBRnhDLG9CQUFlLEdBQUcsSUFBSSxlQUFlLENBQWtCLElBQUksQ0FBQyxDQUFDO1FBR25FLE1BQU0sZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQ2hELE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFDaEIsb0JBQW9CLEVBQUUsQ0FDdkIsQ0FBQztRQUNGLElBQUksQ0FBQyxPQUFPLEdBQUcsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDLFFBQVEsS0FBSyxNQUFNLENBQUMsQ0FBQyxDQUFDO1FBQzNFLElBQUksQ0FBQyxZQUFZLEdBQUcsZ0JBQWdCLENBQUMsSUFBSSxDQUN2QyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQ2hCLG9CQUFvQixFQUFFLEVBQ3RCLFNBQVMsQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsc0JBQXNCLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FDM0UsQ0FBQztJQUNKLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDckIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzNDLENBQUM7SUFDSCxDQUFDOytHQTFCVSxxQkFBcUI7bUdBQXJCLHFCQUFxQiw4SENWbEMsaXRCQXFCQTs7NEZEWGEscUJBQXFCO2tCQUpqQyxTQUFTOytCQUNFLG1CQUFtQjtrRkFJcEIsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCwgT2JzZXJ2YWJsZSB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgZGlzdGluY3RVbnRpbENoYW5nZWQsIGZpbHRlciwgbWFwLCBzd2l0Y2hNYXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBEcmF3ZXJJdGVtLCBEcmF3ZXJQb3NpdGlvbnMgfSBmcm9tICcuLi9kcmF3ZXIubW9kZWwnO1xuaW1wb3J0IHsgRHJhd2VyU2VydmljZSB9IGZyb20gJy4uL2RyYXdlci5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYzh5LWRyYXdlci1vdXRsZXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vZHJhd2VyLW91dGxldC5jb21wb25lbnQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgRHJhd2VyT3V0bGV0Q29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgcG9zaXRpb246IERyYXdlclBvc2l0aW9ucztcbiAgQElucHV0KCkgb3BlbjogYm9vbGVhbjtcbiAgZHJhd2VySXRlbXMkOiBPYnNlcnZhYmxlPERyYXdlckl0ZW1bXT47XG5cbiAgaXNMZWZ0JDogT2JzZXJ2YWJsZTxib29sZWFuPjtcblxuICBwcml2YXRlIGRyYXdlclBvc2l0aW9uJCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8RHJhd2VyUG9zaXRpb25zPihudWxsKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGRyYXdlclNlcnZpY2U6IERyYXdlclNlcnZpY2UpIHtcbiAgICBjb25zdCBjbGVhbmVkUG9zaXRpb24kID0gdGhpcy5kcmF3ZXJQb3NpdGlvbiQucGlwZShcbiAgICAgIGZpbHRlcihwID0+ICEhcCksXG4gICAgICBkaXN0aW5jdFVudGlsQ2hhbmdlZCgpXG4gICAgKTtcbiAgICB0aGlzLmlzTGVmdCQgPSBjbGVhbmVkUG9zaXRpb24kLnBpcGUobWFwKHBvc2l0aW9uID0+IHBvc2l0aW9uID09PSAnbGVmdCcpKTtcbiAgICB0aGlzLmRyYXdlckl0ZW1zJCA9IGNsZWFuZWRQb3NpdGlvbiQucGlwZShcbiAgICAgIGZpbHRlcihwID0+ICEhcCksXG4gICAgICBkaXN0aW5jdFVudGlsQ2hhbmdlZCgpLFxuICAgICAgc3dpdGNoTWFwKHBvc2l0aW9uID0+IHRoaXMuZHJhd2VyU2VydmljZS5nZXREcmF3ZXJzRm9yUG9zaXRpb24kKHBvc2l0aW9uKSlcbiAgICApO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzLnBvc2l0aW9uKSB7XG4gICAgICB0aGlzLmRyYXdlclBvc2l0aW9uJC5uZXh0KHRoaXMucG9zaXRpb24pO1xuICAgIH1cbiAgfVxufVxuIiwiPG5hdlxuICBpZD1cIm5hdmlnYXRvclwiXG4gIGNsYXNzPVwibmF2aWdhdG9yXCJcbiAgW2F0dHIuYXJpYS1sYWJlbF09XCInTmF2aWdhdG9yJyB8IHRyYW5zbGF0ZVwiXG4gIFtuZ0NsYXNzXT1cInsgb3Blbjogb3BlbiB9XCJcbiAgKm5nSWY9XCJpc0xlZnQkIHwgYXN5bmM7IGVsc2UgcmlnaHRcIlxuPlxuICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwiY29udGVudFwiPjwvbmctdGVtcGxhdGU+XG48L25hdj5cblxuPG5nLXRlbXBsYXRlICNyaWdodD5cbiAgPGFzaWRlIGNsYXNzPVwiYzh5LXJpZ2h0LWRyYXdlclwiIFtjZGtUcmFwRm9jdXNdPVwib3BlblwiIFthdHRyLmFyaWEtbGFiZWxdPVwiJ1VzZXIgbWVudScgfCB0cmFuc2xhdGVcIj5cbiAgICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwiY29udGVudFwiPjwvbmctdGVtcGxhdGU+XG4gIDwvYXNpZGU+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2NvbnRlbnQ+XG4gIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGRyYXdlckl0ZW0gb2YgZHJhd2VySXRlbXMkIHwgYXN5bmNcIj5cbiAgICA8bmctY29udGFpbmVyICpjOHlDb21wb25lbnRPdXRsZXQ9XCJkcmF3ZXJJdGVtLmNvbXBvbmVudDsgZW52aXJvbm1lbnRJbmplY3RvcjogZHJhd2VySXRlbS5pbmplY3RvclwiPjwvbmctY29udGFpbmVyPlxuICA8L25nLWNvbnRhaW5lcj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=