@kato-lee/components 1.0.3

package/fesm2022/kato-lee-components-layouts-origin.mjs

@@ -0,0 +1,872 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Injectable, EventEmitter, Output, Input, HostListener, Pipe, ViewChild, NgModule } from '@angular/core';
+import * as i2 from '@angular/router';
+import { NavigationEnd, RouteConfigLoadStart, ResolveStart, RouteConfigLoadEnd, ResolveEnd, RouterModule } from '@angular/router';
+import { filter, debounceTime, BehaviorSubject } from 'rxjs';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from '@angular/platform-browser';
+
+class TakFooterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: TakFooterComponent, selector: "tak-footer", ngImport: i0, template: "<footer class=\"tak__footer\">\r\n  <ng-content select=\"[tak-custom-footer]\"></ng-content>\r\n</footer>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tak-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer class=\"tak__footer\">\r\n  <ng-content select=\"[tak-custom-footer]\"></ng-content>\r\n</footer>\r\n" }]
+        }] });
+
+const LAYOUT_CONTAINER = 'tak__layout__container';
+class ToggleSidebar {
+    openSidebar() {
+        try {
+            document.getElementsByClassName(LAYOUT_CONTAINER)[0].classList.remove('compact');
+            document.getElementsByClassName(LAYOUT_CONTAINER)[0].classList.add('full');
+        }
+        catch (error) { }
+    }
+    closeSidebar() {
+        try {
+            document.getElementsByClassName(LAYOUT_CONTAINER)[0].classList.add('compact');
+            document.getElementsByClassName(LAYOUT_CONTAINER)[0].classList.remove('full');
+        }
+        catch (error) { }
+    }
+    toggleMobile(isMobile) {
+        try {
+            if (!isMobile)
+                document.getElementsByClassName(LAYOUT_CONTAINER)[0].classList.remove('mobile');
+            else
+                document.getElementsByClassName(LAYOUT_CONTAINER)[0].classList.add('mobile');
+        }
+        catch (error) { }
+    }
+    expansionButton(expand) {
+        try {
+            if (!expand) {
+                document.getElementsByClassName(LAYOUT_CONTAINER)[0].classList.add('expand');
+                document.getElementsByClassName('tak__container')[0].classList.add('sidebar-fixed');
+            }
+            else {
+                document.getElementsByClassName(LAYOUT_CONTAINER)[0].classList.remove('expand');
+                document.getElementsByClassName('tak__container')[0].classList.remove('sidebar-fixed');
+            }
+        }
+        catch (error) { }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ToggleSidebar, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ToggleSidebar, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ToggleSidebar, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class TakHeaderComponent {
+    constructor(_cd) {
+        this._cd = _cd;
+        this.toggleSidebar = new EventEmitter();
+        this.mdWidth = 640;
+        this.isActionButton = false;
+        this.isScreenMd = false;
+    }
+    onResize() {
+        this.isScreenMd = window.matchMedia(`(max-width:${this.mdWidth}px)`).matches;
+        this._cd.markForCheck();
+    }
+    onToggleSidebar() {
+        const isOpen = document
+            .getElementsByClassName(LAYOUT_CONTAINER)[0]
+            .classList.contains('compact');
+        if (isOpen) {
+            this.toggleSidebar.emit(false);
+        }
+        else {
+            this.toggleSidebar.emit(true);
+        }
+    }
+    ngAfterViewInit() {
+        this.onResize();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakHeaderComponent, selector: "tak-header", inputs: { mdWidth: "mdWidth", isActionButton: "isActionButton" }, outputs: { toggleSidebar: "toggleSidebar" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<header class=\"tak__header\">\r\n  @if (!isActionButton || isScreenMd) {\r\n    <div class=\"tak__header__toggle-sbar-btn__container\">\r\n      <button mat-icon-button (click)=\"onToggleSidebar()\">\r\n        <span class=\"material-icons\">menu</span>\r\n      </button>\r\n    </div>\r\n  }\r\n  <div class=\"tak__header__custom__container\">\r\n    <ng-content select=\"[tak-custom-header]\"></ng-content>\r\n  </div>\r\n</header>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tak-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"tak__header\">\r\n  @if (!isActionButton || isScreenMd) {\r\n    <div class=\"tak__header__toggle-sbar-btn__container\">\r\n      <button mat-icon-button (click)=\"onToggleSidebar()\">\r\n        <span class=\"material-icons\">menu</span>\r\n      </button>\r\n    </div>\r\n  }\r\n  <div class=\"tak__header__custom__container\">\r\n    <ng-content select=\"[tak-custom-header]\"></ng-content>\r\n  </div>\r\n</header>\r\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { toggleSidebar: [{
+                type: Output
+            }], mdWidth: [{
+                type: Input
+            }], isActionButton: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class RoutePartsService {
+    generateRouteParts(snapshot) {
+        var routeParts = [];
+        if (snapshot) {
+            if (snapshot.firstChild) {
+                routeParts = routeParts.concat(this.generateRouteParts(snapshot.firstChild));
+            }
+            if (snapshot.data['title'] && snapshot.url.length) {
+                routeParts.push({
+                    title: snapshot.data['title'],
+                    breadcrumb: snapshot.data['breadcrumb'],
+                    url: snapshot.url[0].path,
+                    urlSegments: snapshot.url,
+                    params: snapshot.params,
+                });
+            }
+        }
+        return routeParts;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RoutePartsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RoutePartsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: RoutePartsService, decorators: [{
+            type: Injectable
+        }] });
+
+class ValidateAccessPipe {
+    transform(_valuesToCompare, _user) {
+        const valuesToCompare = {
+            authorities: _valuesToCompare[0],
+            blockOnCtxs: _valuesToCompare[1],
+        };
+        const user = {
+            context: _user[0],
+            authorities: _user[1],
+        };
+        let contextIsValid = true;
+        let permissionsIsValid = true;
+        let authorities;
+        let blockOnCtxs;
+        let userAuthorities;
+        let userContext = user.context;
+        if (valuesToCompare.authorities) {
+            authorities = Array.isArray(valuesToCompare.authorities)
+                ? valuesToCompare.authorities
+                : [valuesToCompare.authorities];
+        }
+        if (valuesToCompare.blockOnCtxs) {
+            blockOnCtxs = Array.isArray(valuesToCompare.blockOnCtxs)
+                ? valuesToCompare.blockOnCtxs
+                : [valuesToCompare.blockOnCtxs];
+        }
+        if (user.authorities) {
+            userAuthorities = Array.isArray(user.authorities) ? user.authorities : [user.authorities];
+        }
+        if (blockOnCtxs)
+            if (userContext)
+                contextIsValid = !(blockOnCtxs.indexOf(userContext) >= 0);
+        if (authorities) {
+            if (userAuthorities) {
+                permissionsIsValid = false;
+                userAuthorities.forEach(userAuthority => {
+                    if (authorities.indexOf(userAuthority) >= 0)
+                        permissionsIsValid = true;
+                });
+            }
+        }
+        return !(contextIsValid && permissionsIsValid);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ValidateAccessPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: ValidateAccessPipe, name: "validateAccess" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ValidateAccessPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'validateAccess' }]
+        }] });
+
+class TakBreadcrumbComponent {
+    constructor(router, routePartsService, _cd, activeRoute) {
+        this.router = router;
+        this.routePartsService = routePartsService;
+        this._cd = _cd;
+        this.activeRoute = activeRoute;
+        this._base = '';
+        this._title = '';
+        this._singleRoute = false;
+    }
+    ngOnInit() {
+        this._generateTitle();
+        this._routerEventSub = this.router.events
+            .pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe(() => {
+            this._generateTitle();
+        });
+    }
+    _generateTitle() {
+        this._routeParts = this.routePartsService.generateRouteParts(this.activeRoute.snapshot);
+        this._routeParts.reverse().map((item, i) => {
+            if (this._routeParts.reverse().length === 1) {
+                this._base = item.title;
+                this._title = item.title;
+                this._singleRoute = true;
+            }
+            else {
+                this._singleRoute = false;
+                if (!i)
+                    this._base = item.title;
+                if (i === 1)
+                    this._title = item.title;
+                if (i === 2)
+                    this._title += ` / ${item.title}`;
+            }
+        });
+        this._cd.markForCheck();
+    }
+    ngOnDestroy() {
+        if (this._routerEventSub)
+            this._routerEventSub.unsubscribe();
+    }
+    get base() {
+        return this._base;
+    }
+    get title() {
+        return this._title;
+    }
+    get singleRoute() {
+        return this._singleRoute;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakBreadcrumbComponent, deps: [{ token: i2.Router }, { token: RoutePartsService }, { token: i0.ChangeDetectorRef }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakBreadcrumbComponent, selector: "tak-breadcrumb", ngImport: i0, template: "<div class=\"tak-breadcrumb-pagetitle\">\r\n  <h1>{{ title }}</h1>\r\n  <nav>\r\n    <ol class=\"tak-breadcrumb\">\r\n      <li class=\"tak-breadcrumb-item\">\r\n        <span>{{ base }}</span>\r\n      </li>\r\n      @if (!singleRoute) {\r\n        <li class=\"tak-breadcrumb-item active\">{{ title }}</li>\r\n      }\r\n    </ol>\r\n  </nav>\r\n</div>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tak-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tak-breadcrumb-pagetitle\">\r\n  <h1>{{ title }}</h1>\r\n  <nav>\r\n    <ol class=\"tak-breadcrumb\">\r\n      <li class=\"tak-breadcrumb-item\">\r\n        <span>{{ base }}</span>\r\n      </li>\r\n      @if (!singleRoute) {\r\n        <li class=\"tak-breadcrumb-item active\">{{ title }}</li>\r\n      }\r\n    </ol>\r\n  </nav>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: i2.Router }, { type: RoutePartsService }, { type: i0.ChangeDetectorRef }, { type: i2.ActivatedRoute }] });
+
+class TakExpansionPanelHeaderComponent {
+    constructor() {
+        this.style = '';
+        this.class = '';
+    }
+    ngAfterViewInit() { }
+    toggle() {
+        const expansionPanelHeader = this.expansionPanelHeader?.nativeElement;
+        if (!expansionPanelHeader.classList.contains('tak-layout-accordion')) {
+            expansionPanelHeader.classList.toggle('active');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakExpansionPanelHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: TakExpansionPanelHeaderComponent, selector: "tak-layout-expansion-panel-header", inputs: { style: "style", class: "class" }, viewQueries: [{ propertyName: "expansionPanelHeader", first: true, predicate: ["expansionPanelHeader"], descendants: true }], ngImport: i0, template: `
+    <button
+      class="tak-layout-expansion-panel-header {{ class }}"
+      style="{{ style }}"
+      #expansionPanelHeader
+      (click)="toggle()"
+    >
+      <ng-content></ng-content>
+    </button>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakExpansionPanelHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tak-layout-expansion-panel-header',
+                    template: `
+    <button
+      class="tak-layout-expansion-panel-header {{ class }}"
+      style="{{ style }}"
+      #expansionPanelHeader
+      (click)="toggle()"
+    >
+      <ng-content></ng-content>
+    </button>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { expansionPanelHeader: [{
+                type: ViewChild,
+                args: ['expansionPanelHeader']
+            }], style: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
+class TakExpansionPanelComponent {
+    constructor(_cd) {
+        this._cd = _cd;
+        this.style = '';
+        this.class = '';
+    }
+    ngAfterViewInit() {
+        const expansionPanelHeader = this.expansionPanelHeader?.nativeElement;
+        setTimeout(() => {
+            if (!expansionPanelHeader.classList.contains('tak-layout-accordion')) {
+                expansionPanelHeader.addEventListener('click', () => {
+                    expansionPanelHeader.classList.toggle('active');
+                    const accordionItemBody = expansionPanelHeader.nextElementSibling;
+                    if (expansionPanelHeader.classList.contains('active')) {
+                        accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + 'px';
+                    }
+                    else {
+                        accordionItemBody.style.maxHeight = 0;
+                    }
+                });
+            }
+            this._cd.markForCheck();
+        }, 100);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakExpansionPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: TakExpansionPanelComponent, selector: "tak-layout-expansion-panel", inputs: { style: "style", class: "class" }, viewQueries: [{ propertyName: "expansionPanelHeader", first: true, predicate: ["expansionPanelHeader"], descendants: true }], ngImport: i0, template: `
+    <div class="tak-layout-expansion-panel-container">
+      <div class="tak-layout-expansion-panel {{ class }}" style="{{ style }}" #expansionPanelHeader>
+        <ng-content select="tak-layout-expansion-panel-header"></ng-content>
+      </div>
+      <div class="tak-layout-expansion-panel-body">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakExpansionPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tak-layout-expansion-panel',
+                    template: `
+    <div class="tak-layout-expansion-panel-container">
+      <div class="tak-layout-expansion-panel {{ class }}" style="{{ style }}" #expansionPanelHeader>
+        <ng-content select="tak-layout-expansion-panel-header"></ng-content>
+      </div>
+      <div class="tak-layout-expansion-panel-body">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { expansionPanelHeader: [{
+                type: ViewChild,
+                args: ['expansionPanelHeader']
+            }], style: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
+class TakAccordionComponent {
+    ngAfterViewInit() {
+        const expansionPanels = this.accordion.nativeElement.querySelectorAll('.tak-layout-expansion-panel');
+        expansionPanels.forEach((expansionPanel) => {
+            expansionPanel.classList.add(`tak-layout-accordion`);
+        });
+        const expansionPanelHeaders = this.accordion.nativeElement.querySelectorAll('.tak-layout-expansion-panel-header');
+        expansionPanelHeaders.forEach((expansionPanelHeader) => {
+            expansionPanelHeader.classList.add(`tak-layout-accordion`);
+        });
+        this._subscribeToExpansionPanels(expansionPanels);
+    }
+    _subscribeToExpansionPanels(expansionPanels) {
+        expansionPanels.forEach((expansionPanel) => {
+            expansionPanel.addEventListener('click', () => {
+                this._activeAccordionMode(expansionPanel);
+                expansionPanel.classList.toggle('active');
+                try {
+                    const currentlyActiveExpansionPanel = this.accordion.nativeElement.querySelector('.tak-layout-expansion-panel.active');
+                    currentlyActiveExpansionPanel
+                        .querySelector('.tak-layout-expansion-panel-header')
+                        .classList.toggle('active');
+                }
+                catch (error) {
+                    const expansionPanelHeaders = this.accordion.nativeElement.querySelectorAll('.tak-layout-expansion-panel-header');
+                    expansionPanelHeaders.forEach((expansionPanelHeader) => {
+                        expansionPanelHeader.classList.remove('active');
+                    });
+                }
+                const expansionPanelBody = expansionPanel.nextElementSibling;
+                if (expansionPanel.classList.contains('active')) {
+                    expansionPanelBody.style.maxHeight = expansionPanelBody.scrollHeight + 'px';
+                }
+                else {
+                    expansionPanelBody.style.maxHeight = 0;
+                }
+            });
+        });
+    }
+    _activeAccordionMode(expansionPanel) {
+        const currentlyActiveExpansionPanel = this.accordion.nativeElement.querySelector('.tak-layout-expansion-panel.active');
+        if (currentlyActiveExpansionPanel && currentlyActiveExpansionPanel !== expansionPanel) {
+            currentlyActiveExpansionPanel
+                .querySelector('.tak-layout-expansion-panel-header')
+                .classList.toggle('active');
+            currentlyActiveExpansionPanel.classList.toggle('active');
+            currentlyActiveExpansionPanel.nextElementSibling.style.maxHeight = 0;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: TakAccordionComponent, selector: "tak-layout-accordion", viewQueries: [{ propertyName: "accordion", first: true, predicate: ["accordion"], descendants: true }], ngImport: i0, template: `
+    <div #accordion>
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakAccordionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tak-layout-accordion',
+                    template: `
+    <div #accordion>
+      <ng-content></ng-content>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { accordion: [{
+                type: ViewChild,
+                args: ['accordion']
+            }] } });
+
+class TakSidenavComponent {
+    constructor(_toggleSidebar, _cd) {
+        this._toggleSidebar = _toggleSidebar;
+        this._cd = _cd;
+        this.navigation = [];
+        this.authorities = [];
+        this.mdWidth = 640;
+        this.accordionInCollections = true;
+        this.disableHiddenCollections = false;
+        this._isMobile = false;
+    }
+    ngOnInit() {
+        this.navigation.map(item => {
+            if (item.showCollectionContent === undefined) {
+                if (this.disableHiddenCollections)
+                    item.showCollectionContent = true;
+                else
+                    item.showCollectionContent = false;
+            }
+            if (['dropdown', 'collection'].indexOf(item.type) >= 0) {
+                const dropdowns = item.type === 'dropdown' ? [item] : item.objects;
+                let avalaibleModules = 0;
+                dropdowns?.map(dr => {
+                    if (dr.dropdownLinks) {
+                        let avalaibleModulesDropdown = 0;
+                        dr.dropdownLinks.forEach(dl => {
+                            if (dl.authorities) {
+                                this.authorities.forEach(au => {
+                                    if (dl.authorities.includes(au)) {
+                                        if (!dl.disableOnContexts?.includes(this.context) && !dl.forceDisabledContent) {
+                                            avalaibleModules++;
+                                            avalaibleModulesDropdown++;
+                                        }
+                                    }
+                                });
+                            }
+                            else {
+                                if (!dl.disableOnContexts?.includes(this.context) && !dl.forceDisabledContent) {
+                                    avalaibleModules++;
+                                    avalaibleModulesDropdown++;
+                                }
+                            }
+                        });
+                        if (!avalaibleModulesDropdown)
+                            dr.forceDisabledContent = true;
+                        else
+                            dr.forceDisabledContent = false;
+                    }
+                    else {
+                        if (dr.authorities) {
+                            this.authorities.forEach(au => {
+                                if (dr.authorities.includes(au)) {
+                                    if (!dr.disableOnContexts?.includes(this.context) && !dr.forceDisabledContent) {
+                                        avalaibleModules++;
+                                    }
+                                }
+                            });
+                        }
+                        else {
+                            if (!dr.disableOnContexts?.includes(this.context) && !dr.forceDisabledContent) {
+                                avalaibleModules++;
+                            }
+                        }
+                    }
+                    if (!avalaibleModules)
+                        item.forceDisabledContent = true;
+                    else
+                        item.forceDisabledContent = false;
+                });
+            }
+        });
+    }
+    onCloseSidebar() {
+        const matches = window.matchMedia(`(max-width:${this.mdWidth}px)`).matches;
+        if (matches)
+            this._toggleSidebar.closeSidebar();
+        else
+            this._isMobile = false;
+        this._cd.markForCheck();
+    }
+    toggleModule(index) {
+        if (!this.disableHiddenCollections)
+            this.navigation.map((item, i) => {
+                if (index === i && item.showCollectionContent === false)
+                    item.showCollectionContent = true;
+                else if (index === i && item.showCollectionContent === true) {
+                    item.showCollectionContent = false;
+                }
+                else if (this.accordionInCollections) {
+                    item.showCollectionContent = false;
+                }
+            });
+    }
+    onResize() {
+        this.onCloseSidebar();
+    }
+    get isMobile() {
+        return this._isMobile;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakSidenavComponent, deps: [{ token: ToggleSidebar }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakSidenavComponent, selector: "tak-sidenav", inputs: { navigation: "navigation", authorities: "authorities", context: "context", mdWidth: "mdWidth", accordionInCollections: "accordionInCollections", disableHiddenCollections: "disableHiddenCollections" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"tak__sidenav__container\">\r\n  <tak-layout-accordion>\r\n    @for (item of navigation; track item; let i = $index) {\r\n      <div>\r\n        <!-- Links -->\r\n        @if (item.type === 'link') {\r\n          <a\r\n            class=\"tak__txt-dec-none\"\r\n            [class.tak__admin-layout__not-exist]=\"\r\n              ([authorities, item.disableOnContexts!]\r\n                | validateAccess: [context, item.authorities!]) || item.forceDisabledContent\r\n            \"\r\n            routerLink=\"{{ item.url }}\"\r\n            routerLinkActive=\"tak__snav-link-active\"\r\n            (click)=\"onCloseSidebar()\"\r\n          >\r\n            <tak-layout-expansion-panel-header class=\"tak__sidenav__accordion__header is-link\">\r\n              <span class=\"material-icons tak__min-wdh-32 icon-link\">{{ item.icon }}</span>\r\n              <span class=\"tak__sidenav__link-name accordion\">{{ item.name }}</span>\r\n            </tak-layout-expansion-panel-header>\r\n          </a>\r\n        }\r\n        <!-- Dropdowns -->\r\n        @if (item.type === 'dropdown') {\r\n          <tak-layout-expansion-panel\r\n            [class.tak__admin-layout__not-exist]=\"\r\n              ([authorities, item.disableOnContexts!]\r\n                | validateAccess: [context, item.authorities!]) || item.forceDisabledContent\r\n            \"\r\n          >\r\n            <tak-layout-expansion-panel-header class=\"tak__sidenav__accordion__header\">\r\n              <span class=\"material-icons tak__min-wdh-32 icon-link\">{{ item.icon }}</span>\r\n              <span class=\"tak__sidenav__link-name accordion\">{{ item.name }}</span>\r\n            </tak-layout-expansion-panel-header>\r\n            @for (link of item.dropdownLinks; track link) {\r\n              <div\r\n                [class.tak__admin-layout__not-exist]=\"\r\n                  ([authorities, link.disableOnContexts!]\r\n                    | validateAccess: [context, link.authorities!]) || link.forceDisabledContent\r\n                \"\r\n              >\r\n                <div takRipple class=\"tak__sidenav__accordion__link-container\">\r\n                  <a\r\n                    class=\"tak__txt-dec-none\"\r\n                    routerLink=\"{{\r\n                      link.urlIsNotAutoCompleted ? link.url : item.url + '/' + link.url\r\n                    }}\"\r\n                    routerLinkActive=\"tak__snav-link-active\"\r\n                    (click)=\"onCloseSidebar()\"\r\n                  >\r\n                    <button class=\"tak__sidenav__accordion__link-button\">\r\n                      <span>\r\n                        {{ link.name }}\r\n                      </span>\r\n                    </button>\r\n                  </a>\r\n                </div>\r\n              </div>\r\n            }\r\n          </tak-layout-expansion-panel>\r\n        }\r\n        <!-- Collections -->\r\n        @if (item.type === 'collection') {\r\n          <section>\r\n            <div\r\n              [class.tak__admin-layout__not-exist]=\"\r\n                ([authorities, item.disableOnContexts!]\r\n                  | validateAccess: [context, item.authorities!]) || item.forceDisabledContent\r\n              \"\r\n            >\r\n              <tak-layout-expansion-panel-header\r\n                (click)=\"toggleModule(i)\"\r\n                class=\"tak__sidenav__accordion__header is-module\"\r\n              >\r\n                <span class=\"material-icons tak__min-wdh-32 icon-link is-module\">\r\n                  {{\r\n                    !disableHiddenCollections\r\n                      ? item.showCollectionContent\r\n                        ? 'visibility'\r\n                        : 'visibility_off'\r\n                      : 'radio_button_checked'\r\n                  }}\r\n                </span>\r\n                <span class=\"tak__sidenav__link-name accordion\">{{ item.name }}</span>\r\n              </tak-layout-expansion-panel-header>\r\n              <div\r\n                class=\"tak-divider custom\"\r\n                [class.tak__admin-layout__not-exist]=\"\r\n                  ([authorities, item.disableOnContexts!]\r\n                    | validateAccess: [context, item.authorities!]) || item.forceDisabledContent\r\n                \"\r\n              ></div>\r\n              @for (el of item.objects; track el) {\r\n                <div [hidden]=\"!item.showCollectionContent\">\r\n                  <a\r\n                    class=\"tak__txt-dec-none\"\r\n                    [class.tak__admin-layout__not-exist]=\"\r\n                      ([authorities, el.disableOnContexts!]\r\n                        | validateAccess: [context, el.authorities!]) || el.forceDisabledContent\r\n                    \"\r\n                    routerLink=\"{{ !el.urlIsNotAutoCompleted ? item.url + '/' + el.url : el.url }}\"\r\n                    routerLinkActive=\"tak__snav-link-active\"\r\n                    (click)=\"onCloseSidebar()\"\r\n                  >\r\n                    @if (el.type === 'link') {\r\n                      <tak-layout-expansion-panel-header\r\n                        class=\"tak__sidenav__accordion__header is-link\"\r\n                      >\r\n                        <span class=\"material-icons tak__min-wdh-32 icon-link\">{{ el.icon }}</span>\r\n                        <span class=\"tak__sidenav__link-name accordion\">{{ el.name }}</span>\r\n                      </tak-layout-expansion-panel-header>\r\n                    }\r\n                  </a>\r\n                  @if (el.type === 'dropdown') {\r\n                    <tak-layout-expansion-panel\r\n                      [class.tak__admin-layout__not-exist]=\"\r\n                        ([authorities, el.disableOnContexts!]\r\n                          | validateAccess: [context, el.authorities!]) || el.forceDisabledContent\r\n                      \"\r\n                    >\r\n                      <tak-layout-expansion-panel-header class=\"tak__sidenav__accordion__header\">\r\n                        <span class=\"material-icons tak__min-wdh-32 icon-link\">{{ el.icon }}</span>\r\n                        <span class=\"tak__sidenav__link-name accordion\">{{ el.name }}</span>\r\n                      </tak-layout-expansion-panel-header>\r\n                      @for (link of el.dropdownLinks; track link) {\r\n                        <div\r\n                          [class.tak__admin-layout__not-exist]=\"\r\n                            ([authorities, link.disableOnContexts!]\r\n                              | validateAccess: [context, link.authorities!]) ||\r\n                            link.forceDisabledContent\r\n                          \"\r\n                        >\r\n                          <div takRipple class=\"tak__sidenav__accordion__link-container\">\r\n                            <a\r\n                              class=\"tak__txt-dec-none\"\r\n                              routerLink=\"{{\r\n                                !link.urlIsNotAutoCompleted\r\n                                  ? item.url + '/' + el.url + '/' + link.url\r\n                                  : link.url\r\n                              }}\"\r\n                              routerLinkActive=\"tak__snav-link-active\"\r\n                              (click)=\"onCloseSidebar()\"\r\n                            >\r\n                              <button class=\"tak__sidenav__accordion__link-button\">\r\n                                <span>\r\n                                  {{ link.name }}\r\n                                </span>\r\n                              </button>\r\n                            </a>\r\n                          </div>\r\n                        </div>\r\n                      }\r\n                    </tak-layout-expansion-panel>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          </section>\r\n        }\r\n      </div>\r\n    }\r\n  </tak-layout-accordion>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: TakExpansionPanelHeaderComponent, selector: "tak-layout-expansion-panel-header", inputs: ["style", "class"] }, { kind: "component", type: TakExpansionPanelComponent, selector: "tak-layout-expansion-panel", inputs: ["style", "class"] }, { kind: "component", type: TakAccordionComponent, selector: "tak-layout-accordion" }, { kind: "pipe", type: ValidateAccessPipe, name: "validateAccess" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakSidenavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tak-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tak__sidenav__container\">\r\n  <tak-layout-accordion>\r\n    @for (item of navigation; track item; let i = $index) {\r\n      <div>\r\n        <!-- Links -->\r\n        @if (item.type === 'link') {\r\n          <a\r\n            class=\"tak__txt-dec-none\"\r\n            [class.tak__admin-layout__not-exist]=\"\r\n              ([authorities, item.disableOnContexts!]\r\n                | validateAccess: [context, item.authorities!]) || item.forceDisabledContent\r\n            \"\r\n            routerLink=\"{{ item.url }}\"\r\n            routerLinkActive=\"tak__snav-link-active\"\r\n            (click)=\"onCloseSidebar()\"\r\n          >\r\n            <tak-layout-expansion-panel-header class=\"tak__sidenav__accordion__header is-link\">\r\n              <span class=\"material-icons tak__min-wdh-32 icon-link\">{{ item.icon }}</span>\r\n              <span class=\"tak__sidenav__link-name accordion\">{{ item.name }}</span>\r\n            </tak-layout-expansion-panel-header>\r\n          </a>\r\n        }\r\n        <!-- Dropdowns -->\r\n        @if (item.type === 'dropdown') {\r\n          <tak-layout-expansion-panel\r\n            [class.tak__admin-layout__not-exist]=\"\r\n              ([authorities, item.disableOnContexts!]\r\n                | validateAccess: [context, item.authorities!]) || item.forceDisabledContent\r\n            \"\r\n          >\r\n            <tak-layout-expansion-panel-header class=\"tak__sidenav__accordion__header\">\r\n              <span class=\"material-icons tak__min-wdh-32 icon-link\">{{ item.icon }}</span>\r\n              <span class=\"tak__sidenav__link-name accordion\">{{ item.name }}</span>\r\n            </tak-layout-expansion-panel-header>\r\n            @for (link of item.dropdownLinks; track link) {\r\n              <div\r\n                [class.tak__admin-layout__not-exist]=\"\r\n                  ([authorities, link.disableOnContexts!]\r\n                    | validateAccess: [context, link.authorities!]) || link.forceDisabledContent\r\n                \"\r\n              >\r\n                <div takRipple class=\"tak__sidenav__accordion__link-container\">\r\n                  <a\r\n                    class=\"tak__txt-dec-none\"\r\n                    routerLink=\"{{\r\n                      link.urlIsNotAutoCompleted ? link.url : item.url + '/' + link.url\r\n                    }}\"\r\n                    routerLinkActive=\"tak__snav-link-active\"\r\n                    (click)=\"onCloseSidebar()\"\r\n                  >\r\n                    <button class=\"tak__sidenav__accordion__link-button\">\r\n                      <span>\r\n                        {{ link.name }}\r\n                      </span>\r\n                    </button>\r\n                  </a>\r\n                </div>\r\n              </div>\r\n            }\r\n          </tak-layout-expansion-panel>\r\n        }\r\n        <!-- Collections -->\r\n        @if (item.type === 'collection') {\r\n          <section>\r\n            <div\r\n              [class.tak__admin-layout__not-exist]=\"\r\n                ([authorities, item.disableOnContexts!]\r\n                  | validateAccess: [context, item.authorities!]) || item.forceDisabledContent\r\n              \"\r\n            >\r\n              <tak-layout-expansion-panel-header\r\n                (click)=\"toggleModule(i)\"\r\n                class=\"tak__sidenav__accordion__header is-module\"\r\n              >\r\n                <span class=\"material-icons tak__min-wdh-32 icon-link is-module\">\r\n                  {{\r\n                    !disableHiddenCollections\r\n                      ? item.showCollectionContent\r\n                        ? 'visibility'\r\n                        : 'visibility_off'\r\n                      : 'radio_button_checked'\r\n                  }}\r\n                </span>\r\n                <span class=\"tak__sidenav__link-name accordion\">{{ item.name }}</span>\r\n              </tak-layout-expansion-panel-header>\r\n              <div\r\n                class=\"tak-divider custom\"\r\n                [class.tak__admin-layout__not-exist]=\"\r\n                  ([authorities, item.disableOnContexts!]\r\n                    | validateAccess: [context, item.authorities!]) || item.forceDisabledContent\r\n                \"\r\n              ></div>\r\n              @for (el of item.objects; track el) {\r\n                <div [hidden]=\"!item.showCollectionContent\">\r\n                  <a\r\n                    class=\"tak__txt-dec-none\"\r\n                    [class.tak__admin-layout__not-exist]=\"\r\n                      ([authorities, el.disableOnContexts!]\r\n                        | validateAccess: [context, el.authorities!]) || el.forceDisabledContent\r\n                    \"\r\n                    routerLink=\"{{ !el.urlIsNotAutoCompleted ? item.url + '/' + el.url : el.url }}\"\r\n                    routerLinkActive=\"tak__snav-link-active\"\r\n                    (click)=\"onCloseSidebar()\"\r\n                  >\r\n                    @if (el.type === 'link') {\r\n                      <tak-layout-expansion-panel-header\r\n                        class=\"tak__sidenav__accordion__header is-link\"\r\n                      >\r\n                        <span class=\"material-icons tak__min-wdh-32 icon-link\">{{ el.icon }}</span>\r\n                        <span class=\"tak__sidenav__link-name accordion\">{{ el.name }}</span>\r\n                      </tak-layout-expansion-panel-header>\r\n                    }\r\n                  </a>\r\n                  @if (el.type === 'dropdown') {\r\n                    <tak-layout-expansion-panel\r\n                      [class.tak__admin-layout__not-exist]=\"\r\n                        ([authorities, el.disableOnContexts!]\r\n                          | validateAccess: [context, el.authorities!]) || el.forceDisabledContent\r\n                      \"\r\n                    >\r\n                      <tak-layout-expansion-panel-header class=\"tak__sidenav__accordion__header\">\r\n                        <span class=\"material-icons tak__min-wdh-32 icon-link\">{{ el.icon }}</span>\r\n                        <span class=\"tak__sidenav__link-name accordion\">{{ el.name }}</span>\r\n                      </tak-layout-expansion-panel-header>\r\n                      @for (link of el.dropdownLinks; track link) {\r\n                        <div\r\n                          [class.tak__admin-layout__not-exist]=\"\r\n                            ([authorities, link.disableOnContexts!]\r\n                              | validateAccess: [context, link.authorities!]) ||\r\n                            link.forceDisabledContent\r\n                          \"\r\n                        >\r\n                          <div takRipple class=\"tak__sidenav__accordion__link-container\">\r\n                            <a\r\n                              class=\"tak__txt-dec-none\"\r\n                              routerLink=\"{{\r\n                                !link.urlIsNotAutoCompleted\r\n                                  ? item.url + '/' + el.url + '/' + link.url\r\n                                  : link.url\r\n                              }}\"\r\n                              routerLinkActive=\"tak__snav-link-active\"\r\n                              (click)=\"onCloseSidebar()\"\r\n                            >\r\n                              <button class=\"tak__sidenav__accordion__link-button\">\r\n                                <span>\r\n                                  {{ link.name }}\r\n                                </span>\r\n                              </button>\r\n                            </a>\r\n                          </div>\r\n                        </div>\r\n                      }\r\n                    </tak-layout-expansion-panel>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          </section>\r\n        }\r\n      </div>\r\n    }\r\n  </tak-layout-accordion>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: ToggleSidebar }, { type: i0.ChangeDetectorRef }], propDecorators: { navigation: [{
+                type: Input
+            }], authorities: [{
+                type: Input
+            }], context: [{
+                type: Input
+            }], mdWidth: [{
+                type: Input
+            }], accordionInCollections: [{
+                type: Input
+            }], disableHiddenCollections: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+class TakSidebarComponent {
+    constructor() {
+        this.blockSidebar = new EventEmitter();
+        this.toggleSidebar = new EventEmitter();
+        this.mdWidth = 640;
+        this.navigation = [];
+        this.authorities = [];
+        this.isToggleShow = false;
+        this.isCompact = false;
+        this.isMd = false;
+        this.accordionInCollections = true;
+        this.disableHiddenCollections = false;
+        this.hideSidebar = new FormControl(true);
+    }
+    ngAfterViewInit() {
+        if (this.isCompact)
+            this.onBlockSidebar(true);
+    }
+    onToggleSidebar() {
+        this.toggleSidebar.emit(true);
+    }
+    onBlockSidebar(checked) {
+        const isChecked = checked || this.checkbox.nativeElement.checked;
+        localStorage.setItem('tak-sidebar-is-compact', isChecked);
+        this.blockSidebar.emit(isChecked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: TakSidebarComponent, selector: "tak-sidebar", inputs: { appIcon: "appIcon", appTitle: "appTitle", appSubtitle: "appSubtitle", mdWidth: "mdWidth", navigation: "navigation", authorities: "authorities", context: "context", isToggleShow: "isToggleShow", isCompact: "isCompact", isMd: "isMd", accordionInCollections: "accordionInCollections", disableHiddenCollections: "disableHiddenCollections" }, outputs: { blockSidebar: "blockSidebar", toggleSidebar: "toggleSidebar" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true }], ngImport: i0, template: "<button class=\"tak__sidebar__mobile-toggle-sidebar-button\" (click)=\"onToggleSidebar()\"></button>\r\n<div class=\"tak__sidebar__container\">\r\n  <div class=\"tak__sidebar__branding\">\r\n    <img class=\"tak__sidebar__branding__logo\" [src]=\"appIcon\" />\r\n    <div class=\"tak__sidebar__branding__container\" style=\"margin: 0 5px 0 5px\">\r\n      <h1 class=\"tak__sidebar__branding__title\">{{ appTitle }}</h1>\r\n      <h2 class=\"tak__sidebar__branding__subtitle\">{{ appSubtitle }}</h2>\r\n    </div>\r\n    <div class=\"tak__sidebar__branding__toggle__container\">\r\n      <div class=\"tak__sidebar__branding__toggle\">\r\n        <div class=\"button r\" id=\"button-1\">\r\n          <input\r\n            #checkbox\r\n            type=\"checkbox\"\r\n            class=\"checkbox\"\r\n            [checked]=\"isCompact\"\r\n            (change)=\"onBlockSidebar()\"\r\n          />\r\n          <div class=\"knobs\"></div>\r\n          <div class=\"layer\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"tak__sidebar__divider\" style=\"padding: 0\"></div>\r\n  <div class=\"tak__sidebar__content\">\r\n    <tak-sidenav\r\n      [mdWidth]=\"mdWidth\"\r\n      [navigation]=\"navigation\"\r\n      [authorities]=\"authorities\"\r\n      [context]=\"context\"\r\n      [accordionInCollections]=\"accordionInCollections\"\r\n      [disableHiddenCollections]=\"disableHiddenCollections\"\r\n    ></tak-sidenav>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: TakSidenavComponent, selector: "tak-sidenav", inputs: ["navigation", "authorities", "context", "mdWidth", "accordionInCollections", "disableHiddenCollections"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tak-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"tak__sidebar__mobile-toggle-sidebar-button\" (click)=\"onToggleSidebar()\"></button>\r\n<div class=\"tak__sidebar__container\">\r\n  <div class=\"tak__sidebar__branding\">\r\n    <img class=\"tak__sidebar__branding__logo\" [src]=\"appIcon\" />\r\n    <div class=\"tak__sidebar__branding__container\" style=\"margin: 0 5px 0 5px\">\r\n      <h1 class=\"tak__sidebar__branding__title\">{{ appTitle }}</h1>\r\n      <h2 class=\"tak__sidebar__branding__subtitle\">{{ appSubtitle }}</h2>\r\n    </div>\r\n    <div class=\"tak__sidebar__branding__toggle__container\">\r\n      <div class=\"tak__sidebar__branding__toggle\">\r\n        <div class=\"button r\" id=\"button-1\">\r\n          <input\r\n            #checkbox\r\n            type=\"checkbox\"\r\n            class=\"checkbox\"\r\n            [checked]=\"isCompact\"\r\n            (change)=\"onBlockSidebar()\"\r\n          />\r\n          <div class=\"knobs\"></div>\r\n          <div class=\"layer\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"tak__sidebar__divider\" style=\"padding: 0\"></div>\r\n  <div class=\"tak__sidebar__content\">\r\n    <tak-sidenav\r\n      [mdWidth]=\"mdWidth\"\r\n      [navigation]=\"navigation\"\r\n      [authorities]=\"authorities\"\r\n      [context]=\"context\"\r\n      [accordionInCollections]=\"accordionInCollections\"\r\n      [disableHiddenCollections]=\"disableHiddenCollections\"\r\n    ></tak-sidenav>\r\n  </div>\r\n</div>\r\n" }]
+        }], propDecorators: { checkbox: [{
+                type: ViewChild,
+                args: ['checkbox']
+            }], blockSidebar: [{
+                type: Output
+            }], toggleSidebar: [{
+                type: Output
+            }], appIcon: [{
+                type: Input
+            }], appTitle: [{
+                type: Input
+            }], appSubtitle: [{
+                type: Input
+            }], mdWidth: [{
+                type: Input
+            }], navigation: [{
+                type: Input
+            }], authorities: [{
+                type: Input
+            }], context: [{
+                type: Input
+            }], isToggleShow: [{
+                type: Input
+            }], isCompact: [{
+                type: Input
+            }], isMd: [{
+                type: Input
+            }], accordionInCollections: [{
+                type: Input
+            }], disableHiddenCollections: [{
+                type: Input
+            }] } });
+
+class TakOriginLayoutComponent {
+    constructor(_routePartsService, _toggleSidebar, _activeRoute, _cd, _router, _title) {
+        this._routePartsService = _routePartsService;
+        this._toggleSidebar = _toggleSidebar;
+        this._activeRoute = _activeRoute;
+        this._cd = _cd;
+        this._router = _router;
+        this._title = _title;
+        this.navigation = [];
+        this.appIcon = 'favicon.ico';
+        this.appTitle = 'KatoLee Devs';
+        this.appSidebarTitle = 'KatoLee (Sidebar)';
+        this.appSidebarSubtitle = 'KatoLee (Sidebar)';
+        this.sidebarDebounceTime = 250;
+        this.mdWidth = 640;
+        this.isDinamicSidebar = true;
+        this.includeBreadcrumbs = false;
+        this.accordionInCollections = true;
+        this.disableHiddenCollections = false;
+        this.hasFooter = true;
+        this.authorities = [];
+        this._isModuleLoading = false;
+        this._pageTitle = '';
+        this._isSidebarCompact = localStorage.getItem('tak-sidebar-is-compact') === 'true' ? true : false;
+        this.isSidebarFixed = false;
+        this.isMd = false;
+        this.sidebarRespForm = new FormControl();
+    }
+    ngOnInit() {
+        this._title.setTitle(this.appTitle);
+        this._changePageTitle();
+        this._routerSubs = this._router.events.subscribe(event => {
+            if (event instanceof RouteConfigLoadStart || event instanceof ResolveStart) {
+                this._isModuleLoading = true;
+            }
+            if (event instanceof RouteConfigLoadEnd || event instanceof ResolveEnd) {
+                this._isModuleLoading = false;
+                this.scrollToTop();
+            }
+            this._cd.markForCheck();
+        });
+        document.getElementsByTagName('body')[0].classList.add('tak-layout');
+    }
+    ngAfterViewInit() {
+        if (window.matchMedia(`(max-width:${this.mdWidth}px)`).matches) {
+            this._toggleSidebar.closeSidebar();
+        }
+        this.onResize();
+        if (this.isDinamicSidebar) {
+            this._sidebarStatus = this.sidebarRespForm.valueChanges
+                .pipe(debounceTime(this.sidebarDebounceTime))
+                .subscribe(_ => {
+                if (!this.isMd && _)
+                    this._toggleSidebar.openSidebar();
+            });
+        }
+    }
+    onResize() {
+        this.isMd = window.matchMedia(`(max-width:${this.mdWidth}px)`).matches;
+        if (this.isMd) {
+            this._toggleSidebar.toggleMobile(true);
+        }
+        else {
+            this._toggleSidebar.toggleMobile(false);
+            if (this.isSidebarFixed) {
+                this._toggleSidebar.openSidebar();
+            }
+            else {
+                this._toggleSidebar.closeSidebar();
+            }
+            if (!this.isDinamicSidebar)
+                this._toggleSidebar.expansionButton(this.isDinamicSidebar);
+        }
+        this._cd.markForCheck();
+    }
+    sidebarMouseEnter() {
+        this.sidebarRespForm.setValue(true);
+    }
+    sidebarMouseLeave() {
+        if (!this.isSidebarFixed && !this.isMd) {
+            this.sidebarRespForm.setValue(false);
+            this._toggleSidebar.closeSidebar();
+        }
+    }
+    toggleSidebar(event) {
+        if (event) {
+            this._toggleSidebar.closeSidebar();
+        }
+        else {
+            this._toggleSidebar.openSidebar();
+        }
+    }
+    onBlockSidebar(event) {
+        this.isSidebarFixed = event;
+        if (event)
+            this.sidebarMouseEnter();
+        if (event)
+            document.getElementsByClassName('tak__container')[0].classList.add('sidebar-fixed');
+        else
+            document.getElementsByClassName('tak__container')[0].classList.remove('sidebar-fixed');
+    }
+    scrollToTop() {
+        if (this.scrollLayout)
+            this.scrollLayout.nativeElement.scrollTo({ top: 0 });
+    }
+    _changePageTitle() {
+        this._routerChangeTitleSubs = this._router.events
+            .pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe(() => {
+            const routeParts = this._routePartsService.generateRouteParts(this._activeRoute.snapshot);
+            if (routeParts.length) {
+                this._pageTitle = routeParts
+                    .reverse()
+                    .map(part => part.title)
+                    .reduce((partA, partI) => {
+                    return `${partA} > ${partI}`;
+                });
+                this._pageTitle = `${this.appTitle} | ${this._pageTitle}`;
+                this._title.setTitle(this._pageTitle);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._routerSubs.unsubscribe();
+        this._routerChangeTitleSubs.unsubscribe();
+        if (this._sidebarStatus)
+            this._sidebarStatus.unsubscribe();
+    }
+    get isModuleLoading() {
+        return this._isModuleLoading;
+    }
+    get isSidebarCompact() {
+        return this._isSidebarCompact;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakOriginLayoutComponent, deps: [{ token: RoutePartsService }, { token: ToggleSidebar }, { token: i2.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i2.Router }, { token: i3.Title }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TakOriginLayoutComponent, selector: "tak-origin-layout", inputs: { navigation: "navigation", appIcon: "appIcon", appTitle: "appTitle", appSidebarTitle: "appSidebarTitle", appSidebarSubtitle: "appSidebarSubtitle", sidebarDebounceTime: "sidebarDebounceTime", mdWidth: "mdWidth", isDinamicSidebar: "isDinamicSidebar", includeBreadcrumbs: "includeBreadcrumbs", accordionInCollections: "accordionInCollections", disableHiddenCollections: "disableHiddenCollections", hasFooter: "hasFooter", authorities: "authorities", context: "context" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "scrollLayout", first: true, predicate: ["scrollLayout"], descendants: true }], ngImport: i0, template: "<div class=\"tak__layout__container {{ isSidebarCompact ? 'compact' : 'full' }}\">\r\n  <tak-sidebar\r\n    [isCompact]=\"isSidebarCompact\"\r\n    [isMd]=\"isMd\"\r\n    [navigation]=\"navigation\"\r\n    [authorities]=\"authorities\"\r\n    [appIcon]=\"appIcon\"\r\n    [appTitle]=\"appSidebarTitle\"\r\n    [appSubtitle]=\"appSidebarSubtitle\"\r\n    [isToggleShow]=\"isDinamicSidebar\"\r\n    [mdWidth]=\"mdWidth\"\r\n    [context]=\"context\"\r\n    [accordionInCollections]=\"accordionInCollections\"\r\n    [disableHiddenCollections]=\"disableHiddenCollections\"\r\n    (mouseenter)=\"isDinamicSidebar ? sidebarMouseEnter() : ''\"\r\n    (mouseleave)=\"isDinamicSidebar ? sidebarMouseLeave() : ''\"\r\n    (blockSidebar)=\"onBlockSidebar($event)\"\r\n    (toggleSidebar)=\"toggleSidebar($event)\"\r\n  ></tak-sidebar>\r\n  <div class=\"tak__container\">\r\n    <div class=\"tak__header-container\">\r\n      <tak-header\r\n        (toggleSidebar)=\"toggleSidebar($event)\"\r\n        [mdWidth]=\"mdWidth\"\r\n        [isActionButton]=\"isDinamicSidebar\"\r\n      >\r\n        <ng-content tak-custom-header select=\"[tak-custom-header]\"></ng-content>\r\n      </tak-header>\r\n    </div>\r\n    <div class=\"tak__scroll\" #scrollLayout>\r\n      <div class=\"tak__content\">\r\n        <!-- View Loader -->\r\n        @if (isModuleLoading) {\r\n          <div class=\"view-loader\" style=\"position: fixed\">\r\n            <div class=\"spinner\">\r\n              <div class=\"double-bounce1\"></div>\r\n              <div class=\"double-bounce2\"></div>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div class=\"tak__outlet\">\r\n          <tak-breadcrumb [class.tak-breadcrumb-hidden]=\"!includeBreadcrumbs\"></tak-breadcrumb>\r\n          <div>\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n        @if (hasFooter) {\r\n          <tak-footer>\r\n            <ng-content tak-custom-footer select=\"[tak-custom-footer]\"></ng-content>\r\n          </tak-footer>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: TakBreadcrumbComponent, selector: "tak-breadcrumb" }, { kind: "component", type: TakSidebarComponent, selector: "tak-sidebar", inputs: ["appIcon", "appTitle", "appSubtitle", "mdWidth", "navigation", "authorities", "context", "isToggleShow", "isCompact", "isMd", "accordionInCollections", "disableHiddenCollections"], outputs: ["blockSidebar", "toggleSidebar"] }, { kind: "component", type: TakHeaderComponent, selector: "tak-header", inputs: ["mdWidth", "isActionButton"], outputs: ["toggleSidebar"] }, { kind: "component", type: TakFooterComponent, selector: "tak-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakOriginLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tak-origin-layout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tak__layout__container {{ isSidebarCompact ? 'compact' : 'full' }}\">\r\n  <tak-sidebar\r\n    [isCompact]=\"isSidebarCompact\"\r\n    [isMd]=\"isMd\"\r\n    [navigation]=\"navigation\"\r\n    [authorities]=\"authorities\"\r\n    [appIcon]=\"appIcon\"\r\n    [appTitle]=\"appSidebarTitle\"\r\n    [appSubtitle]=\"appSidebarSubtitle\"\r\n    [isToggleShow]=\"isDinamicSidebar\"\r\n    [mdWidth]=\"mdWidth\"\r\n    [context]=\"context\"\r\n    [accordionInCollections]=\"accordionInCollections\"\r\n    [disableHiddenCollections]=\"disableHiddenCollections\"\r\n    (mouseenter)=\"isDinamicSidebar ? sidebarMouseEnter() : ''\"\r\n    (mouseleave)=\"isDinamicSidebar ? sidebarMouseLeave() : ''\"\r\n    (blockSidebar)=\"onBlockSidebar($event)\"\r\n    (toggleSidebar)=\"toggleSidebar($event)\"\r\n  ></tak-sidebar>\r\n  <div class=\"tak__container\">\r\n    <div class=\"tak__header-container\">\r\n      <tak-header\r\n        (toggleSidebar)=\"toggleSidebar($event)\"\r\n        [mdWidth]=\"mdWidth\"\r\n        [isActionButton]=\"isDinamicSidebar\"\r\n      >\r\n        <ng-content tak-custom-header select=\"[tak-custom-header]\"></ng-content>\r\n      </tak-header>\r\n    </div>\r\n    <div class=\"tak__scroll\" #scrollLayout>\r\n      <div class=\"tak__content\">\r\n        <!-- View Loader -->\r\n        @if (isModuleLoading) {\r\n          <div class=\"view-loader\" style=\"position: fixed\">\r\n            <div class=\"spinner\">\r\n              <div class=\"double-bounce1\"></div>\r\n              <div class=\"double-bounce2\"></div>\r\n            </div>\r\n          </div>\r\n        }\r\n        <div class=\"tak__outlet\">\r\n          <tak-breadcrumb [class.tak-breadcrumb-hidden]=\"!includeBreadcrumbs\"></tak-breadcrumb>\r\n          <div>\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n        @if (hasFooter) {\r\n          <tak-footer>\r\n            <ng-content tak-custom-footer select=\"[tak-custom-footer]\"></ng-content>\r\n          </tak-footer>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: RoutePartsService }, { type: ToggleSidebar }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i2.Router }, { type: i3.Title }], propDecorators: { scrollLayout: [{
+                type: ViewChild,
+                args: ['scrollLayout']
+            }], navigation: [{
+                type: Input
+            }], appIcon: [{
+                type: Input
+            }], appTitle: [{
+                type: Input
+            }], appSidebarTitle: [{
+                type: Input
+            }], appSidebarSubtitle: [{
+                type: Input
+            }], sidebarDebounceTime: [{
+                type: Input
+            }], mdWidth: [{
+                type: Input
+            }], isDinamicSidebar: [{
+                type: Input
+            }], includeBreadcrumbs: [{
+                type: Input
+            }], accordionInCollections: [{
+                type: Input
+            }], disableHiddenCollections: [{
+                type: Input
+            }], hasFooter: [{
+                type: Input
+            }], authorities: [{
+                type: Input
+            }], context: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+class TakLoader {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: TakLoader, selector: "tak-loader", ngImport: i0, template: `<div class="app-loader">
+    <div class="spinner">
+      <div class="double-bounce1"></div>
+      <div class="double-bounce2"></div>
+    </div>
+  </div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakLoader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tak-loader',
+                    template: `<div class="app-loader">
+    <div class="spinner">
+      <div class="double-bounce1"></div>
+      <div class="double-bounce2"></div>
+    </div>
+  </div>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class TakOriginLayoutModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakOriginLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TakOriginLayoutModule, declarations: [ValidateAccessPipe,
+            TakExpansionPanelHeaderComponent,
+            TakExpansionPanelComponent,
+            TakBreadcrumbComponent,
+            TakAccordionComponent,
+            TakSidebarComponent,
+            TakSidenavComponent,
+            TakOriginLayoutComponent,
+            TakHeaderComponent,
+            TakFooterComponent,
+            TakLoader], imports: [ReactiveFormsModule, RouterModule], exports: [TakOriginLayoutComponent, TakLoader] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakOriginLayoutModule, providers: [RoutePartsService], imports: [ReactiveFormsModule, RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TakOriginLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ValidateAccessPipe,
+                        TakExpansionPanelHeaderComponent,
+                        TakExpansionPanelComponent,
+                        TakBreadcrumbComponent,
+                        TakAccordionComponent,
+                        TakSidebarComponent,
+                        TakSidenavComponent,
+                        TakOriginLayoutComponent,
+                        TakHeaderComponent,
+                        TakFooterComponent,
+                        TakLoader,
+                    ],
+                    imports: [ReactiveFormsModule, RouterModule],
+                    exports: [TakOriginLayoutComponent, TakLoader],
+                    providers: [RoutePartsService],
+                }]
+        }] });
+
+class NavigationService {
+    constructor() {
+        this.iconMenu = [];
+        this.menuItems = new BehaviorSubject(this.iconMenu);
+        this.menuItems$ = this.menuItems.asObservable();
+    }
+    publishNavigationChange() {
+        this.menuItems.next(this.iconMenu);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NavigationService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable
+        }] });
+
+/*
+ * Public API Surface of @kato-lee/components/layouts/origin
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LAYOUT_CONTAINER, NavigationService, RoutePartsService, TakFooterComponent, TakHeaderComponent, TakLoader, TakOriginLayoutComponent, TakOriginLayoutModule, TakSidebarComponent, ToggleSidebar, ValidateAccessPipe };
+//# sourceMappingURL=kato-lee-components-layouts-origin.mjs.map