@tapsellorg/angular-material-library/fesm2022/tapsellorg-angular-material-library-src-lib-layout.mjs

Angular library for Tapsell

import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { InjectionToken, input, signal, HostListener, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, HostBinding, NgModule } from '@angular/core';
import * as i3 from '@angular/material/sidenav';
import { MatSidenavModule } from '@angular/material/sidenav';
import * as i4 from '@angular/material/toolbar';
import { MatToolbarModule } from '@angular/material/toolbar';
import * as i5 from '@angular/material/core';
import { MatRippleModule } from '@angular/material/core';
import * as i6 from 'rxjs';
import { takeUntil, BehaviorSubject } from 'rxjs';
import { withDestroy } from '@tapsellorg/angular-material-library/src/lib/common';
import { PghBreakpoints } from '@tapsellorg/angular-material-library/media';
import * as i1 from '@angular/router';
import * as i2 from '@angular/cdk/layout';

const PghSidebarItemsLength = new InjectionToken('SIDEBAR_ITEMS_LENGTH');

class PghLayoutComponent extends withDestroy() {
    constructor(sidebarItemsLength$, router, cdr, breakpointObserver) {
        super();
        this.sidebarItemsLength$ = sidebarItemsLength$;
        this.router = router;
        this.cdr = cdr;
        this.breakpointObserver = breakpointObserver;
        this.SIDEBAR_ITEM_MIN_HEIGHT = 120;
        this.sidebarStyle = input('normal');
        this.hideSideBar = input(false);
        this.isExpanded = signal(true);
        this.isScrolled = signal(false);
        this.isSmallMenu = signal(false);
        this.isMobile = signal(false);
        this.numberOfSidebarItems = 0;
        this.onObserveBreakpoints();
        this.onChangeMenuStyle();
        this.onCloseMenuAfterItemClicked();
    }
    onObserveBreakpoints() {
        this.breakpointObserver
            .observe(PghBreakpoints.md)
            .pipe(takeUntil(this._destroyed$))
            .subscribe(result => {
            this.isMobile.set(!result.matches);
            this.isExpanded.set(result.matches);
        });
    }
    onChangeMenuStyle() {
        this.sidebarItemsLength$.pipe(takeUntil(this._destroyed$)).subscribe(val => {
            this.numberOfSidebarItems += val;
            if (this.sidebarStyle() === 'small') {
                this.isSmallMenu.set(this.numberOfSidebarItems * this.SIDEBAR_ITEM_MIN_HEIGHT <= window.innerHeight);
            }
            else {
                this.isSmallMenu.set(false);
            }
        });
    }
    onCloseMenuAfterItemClicked() {
        this.router.events.pipe(takeUntil(this._destroyed$)).subscribe(() => {
            if (this.isMobile()) {
                this.isExpanded.set(false);
                this.cdr.detectChanges();
            }
        });
    }
    onScroll(_event) {
        this.isScrolled.set(window.pageYOffset > 0);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLayoutComponent, deps: [{ token: PghSidebarItemsLength }, { token: i1.Router }, { token: i0.ChangeDetectorRef }, { token: i2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PghLayoutComponent, isStandalone: false, selector: "pgh-layout", inputs: { sidebarStyle: { classPropertyName: "sidebarStyle", publicName: "sidebarStyle", isSignal: true, isRequired: false, transformFunction: null }, hideSideBar: { classPropertyName: "hideSideBar", publicName: "hideSideBar", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "onScroll($event)" } }, providers: [{ provide: PghSidebarItemsLength, useValue: new BehaviorSubject(0) }], usesInheritance: true, ngImport: i0, template: "<div class=\"pgh-layout\">\n  <mat-toolbar class=\"pgh-mat-toolbar\" [class.pgh-toolbar-shadow]=\"isScrolled()\">\n    <div\n      class=\"pgh-toggle-sidebar\"\n      [class.active]=\"isExpanded()\"\n      (click)=\"isExpanded.set(!isExpanded())\"\n      matRipple\n      [matRippleCentered]=\"true\"\n      [matRippleUnbounded]=\"true\"\n      [matRippleRadius]=\"25\"\n    >\n      @if (!hideSideBar()) {\n      <div>\n        <span class=\"pgh-toggle-sidebar-btn-bar\"></span>\n        <span class=\"pgh-toggle-sidebar-btn-bar\"></span>\n        <span class=\"pgh-toggle-sidebar-btn-bar\"></span>\n      </div>\n      }\n    </div>\n    <ng-content select=\"[pgh-header-content]\"></ng-content>\n  </mat-toolbar>\n\n  <mat-sidenav-container class=\"pgh-sidenav-container\" (backdropClick)=\"isExpanded.set(false)\">\n    @if (!hideSideBar()) {\n    <mat-sidenav\n      [fixedInViewport]=\"true\"\n      [fixedTopGap]=\"64\"\n      class=\"pgh-mat-sidenav\"\n      [mode]=\"isMobile() ? 'over' : 'side'\"\n      [opened]=\"isExpanded() || !(isSmallMenu() || isMobile())\"\n      [class.pgh-icon-menu]=\"!(isExpanded() || isSmallMenu() || isMobile())\"\n      [class.pgh-small-menu]=\"isSmallMenu() && !isMobile()\"\n    >\n      <div class=\"pgh-sidenav\">\n        <ng-content select=\"[pgh-sidebar-content]\"></ng-content>\n      </div>\n    </mat-sidenav>\n    }\n\n    <mat-sidenav-content\n      [class.pgh-icon-menu]=\"!(isSmallMenu() || isMobile()) && !hideSideBar()\"\n      [class.pgh-not-expanded-menu]=\"\n        !(isExpanded() || isSmallMenu() || isMobile()) && !hideSideBar()\n      \"\n    >\n      <ng-content></ng-content>\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n</div>\n", styles: [".pgh-layout{display:flex;flex-direction:column;min-height:100vh}.pgh-mat-toolbar{align-items:stretch;position:fixed;z-index:2;top:0;right:0;left:0;height:var(--toolbar-height);border-bottom:1px solid var(--ddd);font-size:1rem}.pgh-toolbar-shadow{box-shadow:var(--shadow-sm);border-bottom:none}.pgh-mat-sidenav{background-color:var(--fff);width:var(--mat-sidenav-container-width);transition:width .3s ease}.pgh-mat-sidenav.pgh-small-menu{border:none}.pgh-mat-sidenav.pgh-icon-menu{width:var(--short-side-nav-width)}.pgh-icon-menu .pgh-item-icon{transition:margin-inline-end .3s ease-in;margin-inline-end:0;flex-grow:1;text-align:center}.pgh-sidenav-container{flex:1 0 auto;margin-top:var(--toolbar-height)}.pgh-sidenav{padding:.75rem}.pgh-toggle-sidebar-btn-bar{height:.125rem;background-color:var(--888);display:block;transition:all .5s ease}.pgh-toggle-sidebar-btn-bar:nth-child(1){width:.9375rem}.pgh-toggle-sidebar-btn-bar:nth-child(2){margin-block:.25rem;margin-inline:0;width:1.25rem}.pgh-toggle-sidebar-btn-bar:nth-child(3){width:.625rem}.pgh-toggle-sidebar{position:relative;padding-block:0;padding-inline:1.5rem 1rem;margin-block:0;margin-inline:-1rem .5rem;vertical-align:middle;cursor:pointer;display:flex;align-items:center;justify-content:center;align-self:stretch}.pgh-toggle-sidebar.active .pgh-toggle-sidebar-btn-bar{width:1.25rem}.mat-sidenav-content{padding-bottom:2rem;transition:margin-inline-start .3s ease}.mat-sidenav-content.pgh-icon-menu{margin-inline-start:var(--mat-sidenav-container-width)!important}.mat-sidenav-content.pgh-not-expanded-menu{margin-inline-start:var(--short-side-nav-width)!important}\n"], dependencies: [{ kind: "component", type: i3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLayoutComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pgh-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: PghSidebarItemsLength, useValue: new BehaviorSubject(0) }], standalone: false, template: "<div class=\"pgh-layout\">\n  <mat-toolbar class=\"pgh-mat-toolbar\" [class.pgh-toolbar-shadow]=\"isScrolled()\">\n    <div\n      class=\"pgh-toggle-sidebar\"\n      [class.active]=\"isExpanded()\"\n      (click)=\"isExpanded.set(!isExpanded())\"\n      matRipple\n      [matRippleCentered]=\"true\"\n      [matRippleUnbounded]=\"true\"\n      [matRippleRadius]=\"25\"\n    >\n      @if (!hideSideBar()) {\n      <div>\n        <span class=\"pgh-toggle-sidebar-btn-bar\"></span>\n        <span class=\"pgh-toggle-sidebar-btn-bar\"></span>\n        <span class=\"pgh-toggle-sidebar-btn-bar\"></span>\n      </div>\n      }\n    </div>\n    <ng-content select=\"[pgh-header-content]\"></ng-content>\n  </mat-toolbar>\n\n  <mat-sidenav-container class=\"pgh-sidenav-container\" (backdropClick)=\"isExpanded.set(false)\">\n    @if (!hideSideBar()) {\n    <mat-sidenav\n      [fixedInViewport]=\"true\"\n      [fixedTopGap]=\"64\"\n      class=\"pgh-mat-sidenav\"\n      [mode]=\"isMobile() ? 'over' : 'side'\"\n      [opened]=\"isExpanded() || !(isSmallMenu() || isMobile())\"\n      [class.pgh-icon-menu]=\"!(isExpanded() || isSmallMenu() || isMobile())\"\n      [class.pgh-small-menu]=\"isSmallMenu() && !isMobile()\"\n    >\n      <div class=\"pgh-sidenav\">\n        <ng-content select=\"[pgh-sidebar-content]\"></ng-content>\n      </div>\n    </mat-sidenav>\n    }\n\n    <mat-sidenav-content\n      [class.pgh-icon-menu]=\"!(isSmallMenu() || isMobile()) && !hideSideBar()\"\n      [class.pgh-not-expanded-menu]=\"\n        !(isExpanded() || isSmallMenu() || isMobile()) && !hideSideBar()\n      \"\n    >\n      <ng-content></ng-content>\n    </mat-sidenav-content>\n  </mat-sidenav-container>\n</div>\n", styles: [".pgh-layout{display:flex;flex-direction:column;min-height:100vh}.pgh-mat-toolbar{align-items:stretch;position:fixed;z-index:2;top:0;right:0;left:0;height:var(--toolbar-height);border-bottom:1px solid var(--ddd);font-size:1rem}.pgh-toolbar-shadow{box-shadow:var(--shadow-sm);border-bottom:none}.pgh-mat-sidenav{background-color:var(--fff);width:var(--mat-sidenav-container-width);transition:width .3s ease}.pgh-mat-sidenav.pgh-small-menu{border:none}.pgh-mat-sidenav.pgh-icon-menu{width:var(--short-side-nav-width)}.pgh-icon-menu .pgh-item-icon{transition:margin-inline-end .3s ease-in;margin-inline-end:0;flex-grow:1;text-align:center}.pgh-sidenav-container{flex:1 0 auto;margin-top:var(--toolbar-height)}.pgh-sidenav{padding:.75rem}.pgh-toggle-sidebar-btn-bar{height:.125rem;background-color:var(--888);display:block;transition:all .5s ease}.pgh-toggle-sidebar-btn-bar:nth-child(1){width:.9375rem}.pgh-toggle-sidebar-btn-bar:nth-child(2){margin-block:.25rem;margin-inline:0;width:1.25rem}.pgh-toggle-sidebar-btn-bar:nth-child(3){width:.625rem}.pgh-toggle-sidebar{position:relative;padding-block:0;padding-inline:1.5rem 1rem;margin-block:0;margin-inline:-1rem .5rem;vertical-align:middle;cursor:pointer;display:flex;align-items:center;justify-content:center;align-self:stretch}.pgh-toggle-sidebar.active .pgh-toggle-sidebar-btn-bar{width:1.25rem}.mat-sidenav-content{padding-bottom:2rem;transition:margin-inline-start .3s ease}.mat-sidenav-content.pgh-icon-menu{margin-inline-start:var(--mat-sidenav-container-width)!important}.mat-sidenav-content.pgh-not-expanded-menu{margin-inline-start:var(--short-side-nav-width)!important}\n"] }]
        }], ctorParameters: () => [{ type: i6.BehaviorSubject, decorators: [{
                    type: Inject,
                    args: [PghSidebarItemsLength]
                }] }, { type: i1.Router }, { type: i0.ChangeDetectorRef }, { type: i2.BreakpointObserver }], propDecorators: { onScroll: [{
                type: HostListener,
                args: ['window:scroll', ['$event']]
            }] } });

class PghSidebarItemComponent {
    constructor(sidebarItemsLength$) {
        this._pghSidebarItem = true;
        sidebarItemsLength$.next(1);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghSidebarItemComponent, deps: [{ token: PghSidebarItemsLength }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: PghSidebarItemComponent, isStandalone: false, selector: "a[pghSidebarItem]", host: { properties: { "class.pgh-sidebar-item": "this._pghSidebarItem" } }, ngImport: i0, template: "<div class=\"pgh-item-icon\">\n  <ng-content select=\"[pgh-icon]\"></ng-content>\n</div>\n<div class=\"pgh-item-title\">\n  <ng-content select=\"[pgh-middle]\"></ng-content>\n</div>\n<div class=\"ms-auto\">\n  <ng-content select=\"[pgh-left]\"></ng-content>\n</div>\n", styles: [".pgh-sidebar-item{text-decoration:none;color:inherit;display:flex;align-items:center;padding:.75rem;font-size:1rem;cursor:pointer;position:relative;transition:all .2s ease;border-radius:var(--box-radius)}.pgh-sidebar-item:hover,.pgh-sidebar-item:focus{text-decoration:none}.pgh-item-icon{width:1.5rem;height:1.5rem;line-height:1.5rem;margin-inline-end:.75rem;opacity:.8;filter:drop-shadow(0 0 1px rgba(0,0,0,.1333333333))}.pgh-small-menu .pgh-sidebar-item{flex-direction:column;justify-content:center;min-height:5rem;padding:.75rem}.pgh-small-menu .pgh-sidebar-item .pgh-item-icon{margin-inline-end:0;margin-bottom:.5rem}.pgh-small-menu .pgh-sidebar-item.active{color:var(--primary-900);background:var(--primary-50)}.pgh-mat-sidenav:not(.pgh-small-menu) .pgh-sidebar-item.active{color:var(--primary-900);background:var(--primary-50)}.pgh-item-title{width:200px;white-space:nowrap}.pgh-small-menu .pgh-item-title{text-align:center;width:unset;white-space:unset}.pgh-icon-menu .pgh-item-title{transition:width .3s ease;overflow:hidden;width:0}\n"], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghSidebarItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'a[pghSidebarItem]', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"pgh-item-icon\">\n  <ng-content select=\"[pgh-icon]\"></ng-content>\n</div>\n<div class=\"pgh-item-title\">\n  <ng-content select=\"[pgh-middle]\"></ng-content>\n</div>\n<div class=\"ms-auto\">\n  <ng-content select=\"[pgh-left]\"></ng-content>\n</div>\n", styles: [".pgh-sidebar-item{text-decoration:none;color:inherit;display:flex;align-items:center;padding:.75rem;font-size:1rem;cursor:pointer;position:relative;transition:all .2s ease;border-radius:var(--box-radius)}.pgh-sidebar-item:hover,.pgh-sidebar-item:focus{text-decoration:none}.pgh-item-icon{width:1.5rem;height:1.5rem;line-height:1.5rem;margin-inline-end:.75rem;opacity:.8;filter:drop-shadow(0 0 1px rgba(0,0,0,.1333333333))}.pgh-small-menu .pgh-sidebar-item{flex-direction:column;justify-content:center;min-height:5rem;padding:.75rem}.pgh-small-menu .pgh-sidebar-item .pgh-item-icon{margin-inline-end:0;margin-bottom:.5rem}.pgh-small-menu .pgh-sidebar-item.active{color:var(--primary-900);background:var(--primary-50)}.pgh-mat-sidenav:not(.pgh-small-menu) .pgh-sidebar-item.active{color:var(--primary-900);background:var(--primary-50)}.pgh-item-title{width:200px;white-space:nowrap}.pgh-small-menu .pgh-item-title{text-align:center;width:unset;white-space:unset}.pgh-icon-menu .pgh-item-title{transition:width .3s ease;overflow:hidden;width:0}\n"] }]
        }], ctorParameters: () => [{ type: i6.BehaviorSubject, decorators: [{
                    type: Inject,
                    args: [PghSidebarItemsLength]
                }] }], propDecorators: { _pghSidebarItem: [{
                type: HostBinding,
                args: ['class.pgh-sidebar-item']
            }] } });

class PghLayoutModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: PghLayoutModule, declarations: [PghLayoutComponent, PghSidebarItemComponent], imports: [CommonModule, MatSidenavModule, MatToolbarModule, MatRippleModule], exports: [PghLayoutComponent, PghSidebarItemComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLayoutModule, imports: [CommonModule, MatSidenavModule, MatToolbarModule, MatRippleModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghLayoutModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [PghLayoutComponent, PghSidebarItemComponent],
                    imports: [CommonModule, MatSidenavModule, MatToolbarModule, MatRippleModule],
                    exports: [PghLayoutComponent, PghSidebarItemComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { PghLayoutComponent, PghLayoutModule, PghSidebarItemComponent };
//# sourceMappingURL=tapsellorg-angular-material-library-src-lib-layout.mjs.map