import * as i0 from '@angular/core';
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { Subject } from 'rxjs';
import * as i1 from '@ironsource/fusion-ui/services/stogare';
import { StorageType } from '@ironsource/fusion-ui/services/stogare';
import * as i3 from '@ironsource/fusion-ui/components/header/v1';
import { HeaderModule } from '@ironsource/fusion-ui/components/header/v1';
import * as i4 from '@ironsource/fusion-ui/components/menu/v1';
import { MenuModule } from '@ironsource/fusion-ui/components/menu/v1';
import { SVG_OPTIONS_TOKEN } from '@ironsource/fusion-ui/components/svg';

const _c0 = ["mainContent"];
const _c1 = (a0, a1) => ({ collapsed: a0, "menu-opened": a1 });
const _c2 = (a0, a1) => ({ opened: a0, collapsed: a1 });
const _c3 = ["*"];
class LayoutComponent {
    constructor(storageService) {
        this.storageService = storageService;
        this.menuItems = [];
        this.state = {};
        this.userName = '';
        this.headerPrimaryMenuIconName = { iconName: 'user', iconVersion: 'v1' };
        this.headerPrimaryMenuItems = [];
        this.headerSecondaryMenuItems = [];
        this.menuItemClick = new EventEmitter();
        this.menuAdditionalItemClick = new EventEmitter();
        this.menuStateChanged = new EventEmitter();
        this.logoClicked = new EventEmitter();
        this.isMainMenuCollapsed = this.storageService.get(StorageType.SessionStorage, 'menuCollapsed') ?? false;
        this.onDestroy$ = new Subject();
    }
    onMenuItemClicked(item) {
        this.menuItemClick.emit(item);
    }
    onMenuAdditionalItemClicked(item) {
        this.menuAdditionalItemClick.emit(item);
    }
    onMenuStateChanged(isMainMenuCollapsed) {
        this.isMainMenuCollapsed = isMainMenuCollapsed;
        this.storageService.set(StorageType.SessionStorage, 'menuCollapsed', this.isMainMenuCollapsed);
        this.menuStateChanged.emit(this.isMainMenuCollapsed);
    }
    onMouseLeave() {
        this.isMenuOpened = false;
    }
    onMouseEnter() {
        this.isMenuOpened = true;
    }
    onLogoClicked() {
        this.logoClicked.emit();
    }
    routeChanged() {
        if (this.scrollTopOnRouteChange && this.mainContent) {
            this.mainContent.nativeElement.scrollTop = 0;
        }
    }
    ngOnDestroy() {
        this.onDestroy$.next();
        this.onDestroy$.complete();
    }
    static { this.ɵfac = function LayoutComponent_Factory(t) { return new (t || LayoutComponent)(i0.ɵɵdirectiveInject(i1.StorageService)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayoutComponent, selectors: [["fusion-layout"]], viewQuery: function LayoutComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 7);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.mainContent = _t.first);
        } }, inputs: { loading: "loading", menuItems: "menuItems", state: "state", scrollTopOnRouteChange: "scrollTopOnRouteChange", userName: "userName", headerPrimaryMenuIconName: "headerPrimaryMenuIconName", headerMenuUserNameIcon: "headerMenuUserNameIcon", headerPrimaryMenuItems: "headerPrimaryMenuItems", headerSecondaryMenuItems: "headerSecondaryMenuItems" }, outputs: { menuItemClick: "menuItemClick", menuAdditionalItemClick: "menuAdditionalItemClick", menuStateChanged: "menuStateChanged", logoClicked: "logoClicked" }, ngContentSelectors: _c3, decls: 8, vars: 17, consts: [[1, "layout-wrapper", 3, "ngClass"], [3, "userName", "headerMenuUserNameIcon", "primaryMenuIconName", "primaryMenuItems", "secondaryMenuItems", "state", "isMainMenuCollapsed", "menuItemClick", "menuStateChanged", "logoClick"], [3, "menuItems", "ngClass", "menuItemClicked", "menuAdditionalItemClicked", "mouseLeave", "mouseEnter", "routeChanged"], ["id", "main-view", 1, "main-content"], ["mainContent", ""], [1, "page-view"], [1, "app-route-content-holder", 3, "hidden"]], template: function LayoutComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵprojectionDef();
            i0.ɵɵelementStart(0, "div", 0)(1, "fusion-header", 1);
            i0.ɵɵlistener("menuItemClick", function LayoutComponent_Template_fusion_header_menuItemClick_1_listener($event) { return ctx.onMenuItemClicked($event); })("menuStateChanged", function LayoutComponent_Template_fusion_header_menuStateChanged_1_listener($event) { return ctx.onMenuStateChanged($event); })("logoClick", function LayoutComponent_Template_fusion_header_logoClick_1_listener() { return ctx.onLogoClicked(); });
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(2, "fusion-menu", 2);
            i0.ɵɵlistener("menuItemClicked", function LayoutComponent_Template_fusion_menu_menuItemClicked_2_listener($event) { return ctx.onMenuItemClicked($event); })("menuAdditionalItemClicked", function LayoutComponent_Template_fusion_menu_menuAdditionalItemClicked_2_listener($event) { return ctx.onMenuAdditionalItemClicked($event); })("mouseLeave", function LayoutComponent_Template_fusion_menu_mouseLeave_2_listener() { return ctx.onMouseLeave(); })("mouseEnter", function LayoutComponent_Template_fusion_menu_mouseEnter_2_listener() { return ctx.onMouseEnter(); })("routeChanged", function LayoutComponent_Template_fusion_menu_routeChanged_2_listener() { return ctx.routeChanged(); });
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(3, "div", 3, 4)(5, "div", 5)(6, "div", 6);
            i0.ɵɵprojection(7);
            i0.ɵɵelementEnd()()()();
        } if (rf & 2) {
            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(11, _c1, ctx.isMainMenuCollapsed, ctx.isMenuOpened));
            i0.ɵɵadvance();
            i0.ɵɵproperty("userName", ctx.userName)("headerMenuUserNameIcon", ctx.headerMenuUserNameIcon)("primaryMenuIconName", ctx.headerPrimaryMenuIconName)("primaryMenuItems", ctx.headerPrimaryMenuItems)("secondaryMenuItems", ctx.headerSecondaryMenuItems)("state", ctx.state)("isMainMenuCollapsed", ctx.isMainMenuCollapsed);
            i0.ɵɵadvance();
            i0.ɵɵproperty("menuItems", ctx.menuItems)("ngClass", i0.ɵɵpureFunction2(14, _c2, ctx.isMenuOpened, ctx.isMainMenuCollapsed));
            i0.ɵɵadvance(4);
            i0.ɵɵproperty("hidden", ctx.loading);
        } }, dependencies: [i2.NgClass, i3.HeaderComponent, i4.MenuComponent], styles: ["[_nghost-%COMP%]   *[_ngcontent-%COMP%]{box-sizing:border-box}[_nghost-%COMP%]{margin:0;padding:0;vertical-align:initial;text-align:initial}.main-content[_ngcontent-%COMP%]{position:relative;margin-left:var(--left-menu-width, 220px);padding-right:var(--content-margin, 2px);height:calc(100vh - var(--header-padding-small, 6px) - var(--header-panel-height, 60px));overflow-y:auto;transition:margin .45s ease-out;background-color:var(--light-color-200, #F3F5F7)}.main-content.is-components-examples[_ngcontent-%COMP%]{background-color:#fff}.main-content.is-components-examples[_ngcontent-%COMP%]   .page-view[_ngcontent-%COMP%]{padding:var(--components-page-padding, 30px)}.main-content[_ngcontent-%COMP%]   .mainLoader[_ngcontent-%COMP%]{z-index:3013;position:fixed;top:0;left:0;height:100%;width:100%;display:table;background-color:#f3f5f7}.main-content[_ngcontent-%COMP%]   .mainLoader[_ngcontent-%COMP%]   fusion-loader[_ngcontent-%COMP%]{vertical-align:middle;display:table-cell}@media (max-width: 1023.98px){.main-content[_ngcontent-%COMP%]{width:100%;margin-left:0;margin-right:0;padding-right:0;height:calc(100vh - var(--header-padding-mobile, 40px) - var(--header-panel-height, 60px))}}@media (min-width: 1024px) and (max-width: 1279.98px){.main-content[_ngcontent-%COMP%]{margin-left:var(--content-margin, 2px)}}@media (min-width: 1920px){.main-content[_ngcontent-%COMP%]{height:calc(100vh - var(--header-padding-large, 50px) - var(--header-panel-height, 60px))}}@media (min-width: 1280px){.collapsed[_ngcontent-%COMP%]   .main-content[_ngcontent-%COMP%]{margin-left:var(--left-menu-collapsed-width, 70px)}}.page-view[_ngcontent-%COMP%]{height:calc(100vh - var(--header-padding-small, 6px) - var(--header-panel-height, 60px))}.page-view[_ngcontent-%COMP%]   .app-route-content-holder[_ngcontent-%COMP%]{height:100%}@media (min-width: 1920px){.page-view[_ngcontent-%COMP%]{height:calc(100vh - var(--header-padding-small, 6px) - var(--header-panel-height, 60px) - var(--header-padding-desktop, 44px))}}"], changeDetection: 0 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutComponent, [{
        type: Component,
        args: [{ selector: 'fusion-layout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-wrapper\" [ngClass]=\"{collapsed: isMainMenuCollapsed, 'menu-opened': isMenuOpened}\">\n    <fusion-header\n        [userName]=\"userName\"\n        [headerMenuUserNameIcon]=\"headerMenuUserNameIcon\"\n        [primaryMenuIconName]=\"headerPrimaryMenuIconName\"\n        [primaryMenuItems]=\"headerPrimaryMenuItems\"\n        [secondaryMenuItems]=\"headerSecondaryMenuItems\"\n        [state]=\"state\"\n        [isMainMenuCollapsed]=\"isMainMenuCollapsed\"\n        (menuItemClick)=\"onMenuItemClicked($event)\"\n        (menuStateChanged)=\"onMenuStateChanged($event)\"\n        (logoClick)=\"onLogoClicked()\"\n    >\n    </fusion-header>\n\n    <!--Main Menu-->\n    <fusion-menu\n        [menuItems]=\"menuItems\"\n        (menuItemClicked)=\"onMenuItemClicked($event)\"\n        (menuAdditionalItemClicked)=\"onMenuAdditionalItemClicked($event)\"\n        (mouseLeave)=\"onMouseLeave()\"\n        (mouseEnter)=\"onMouseEnter()\"\n        (routeChanged)=\"routeChanged()\"\n        [ngClass]=\"{opened: isMenuOpened, collapsed: isMainMenuCollapsed}\"\n    ></fusion-menu>\n    <!--Main Menu END -->\n    <div #mainContent class=\"main-content\" id=\"main-view\">\n        <div class=\"page-view\">\n            <div class=\"app-route-content-holder\" [hidden]=\"loading\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [":host *{box-sizing:border-box}:host{margin:0;padding:0;vertical-align:initial;text-align:initial}.main-content{position:relative;margin-left:var(--left-menu-width, 220px);padding-right:var(--content-margin, 2px);height:calc(100vh - var(--header-padding-small, 6px) - var(--header-panel-height, 60px));overflow-y:auto;transition:margin .45s ease-out;background-color:var(--light-color-200, #F3F5F7)}.main-content.is-components-examples{background-color:#fff}.main-content.is-components-examples .page-view{padding:var(--components-page-padding, 30px)}.main-content .mainLoader{z-index:3013;position:fixed;top:0;left:0;height:100%;width:100%;display:table;background-color:#f3f5f7}.main-content .mainLoader fusion-loader{vertical-align:middle;display:table-cell}@media (max-width: 1023.98px){.main-content{width:100%;margin-left:0;margin-right:0;padding-right:0;height:calc(100vh - var(--header-padding-mobile, 40px) - var(--header-panel-height, 60px))}}@media (min-width: 1024px) and (max-width: 1279.98px){.main-content{margin-left:var(--content-margin, 2px)}}@media (min-width: 1920px){.main-content{height:calc(100vh - var(--header-padding-large, 50px) - var(--header-panel-height, 60px))}}@media (min-width: 1280px){.collapsed .main-content{margin-left:var(--left-menu-collapsed-width, 70px)}}.page-view{height:calc(100vh - var(--header-padding-small, 6px) - var(--header-panel-height, 60px))}.page-view .app-route-content-holder{height:100%}@media (min-width: 1920px){.page-view{height:calc(100vh - var(--header-padding-small, 6px) - var(--header-panel-height, 60px) - var(--header-padding-desktop, 44px))}}\n"] }]
    }], () => [{ type: i1.StorageService }], { loading: [{
            type: Input
        }], menuItems: [{
            type: Input
        }], state: [{
            type: Input
        }], scrollTopOnRouteChange: [{
            type: Input
        }], userName: [{
            type: Input
        }], headerPrimaryMenuIconName: [{
            type: Input
        }], headerMenuUserNameIcon: [{
            type: Input
        }], headerPrimaryMenuItems: [{
            type: Input
        }], headerSecondaryMenuItems: [{
            type: Input
        }], menuItemClick: [{
            type: Output
        }], menuAdditionalItemClick: [{
            type: Output
        }], menuStateChanged: [{
            type: Output
        }], logoClicked: [{
            type: Output
        }], mainContent: [{
            type: ViewChild,
            args: ['mainContent', { static: true }]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LayoutComponent, { className: "LayoutComponent", filePath: "layout.component.ts", lineNumber: 14 }); })();

const LAYOUT_OPTIONS_DEFAULT_VALUE = {
    svgOptions: { assetsPath: '' }
};

class LayoutModule {
    static forRoot(options) {
        return {
            ngModule: LayoutModule,
            providers: [
                {
                    provide: SVG_OPTIONS_TOKEN,
                    useValue: options ? options.svgOptions : LAYOUT_OPTIONS_DEFAULT_VALUE
                }
            ]
        };
    }
    static { this.ɵfac = function LayoutModule_Factory(t) { return new (t || LayoutModule)(); }; }
    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: LayoutModule }); }
    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, HeaderModule, MenuModule] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutModule, [{
        type: NgModule,
        args: [{
                declarations: [LayoutComponent],
                exports: [LayoutComponent],
                imports: [CommonModule, HeaderModule, MenuModule]
            }]
    }], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(LayoutModule, { declarations: [LayoutComponent], imports: [CommonModule, HeaderModule, MenuModule], exports: [LayoutComponent] }); })();

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

export { LayoutComponent, LayoutModule };
//# sourceMappingURL=ironsource-fusion-ui-components-layout-v1.mjs.map
