import { Component, ContentChildren, EventEmitter, HostBinding, Input, Output, forwardRef } from '@angular/core';
import { NavigationStart } from '@angular/router';
import { filter } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "@angular/common";
import * as i3 from "@angular/cdk/bidi";
import * as i4 from "@angular/material/expansion";
import * as i5 from "@angular/material/core";
import * as i6 from "../icon/icon.component";
/**
 * Component to display item in the sidebar
 *
 * Item can be nested
 */
export class SidebarItemComponent {
    constructor(router) {
        this.router = router;
        /**
         * Direction : ltr or rtl (default = ltr)
         */
        this.direction = 'ltr';
        /**
         * Display mode : closely or large (default = closely)
         */
        this.mode = 'closely';
        /**
         * Add tag on items to filter selection
         */
        this.tags = [];
        /**
         * Event emit when an item is selected
         */
        this.selected = new EventEmitter();
        this.classes = 'mic-sidebar-item';
        this.hasChild = false;
    }
    ngOnInit() {
        this.router.events
            .pipe(filter((event) => event instanceof NavigationStart))
            .subscribe((event) => {
            this.active = this.getPath(event.url);
        });
        this.active = this.getPath(this.router.url);
    }
    ngAfterContentInit() {
        this.hasChild = this.children.toArray().length > 0;
    }
    /**
     * Determine path from an url
     * Exclude hash and parameters
     *
     * @param url
     * @returns
     */
    getPath(url) {
        return url.split('#')[0].split('?')[0];
    }
    /**
     * Trigger click event on the sidebar item
     * If item has children, nothing todo
     * If item is a leaf, notify the selection
     *
     * @param event
     */
    click(event, item) {
        if (item.children?.length) {
            event.preventDefault();
        }
        item.selected.emit(item);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SidebarItemComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SidebarItemComponent, selector: "mic-sidebar-item", inputs: { id: "id", direction: "direction", mode: "mode", icon: "icon", link: "link", label: "label", tags: "tags", search: "search" }, outputs: { selected: "selected" }, host: { properties: { "class": "this.classes" } }, queries: [{ propertyName: "children", predicate: i0.forwardRef(() => SidebarItemComponent) }], ngImport: i0, template: "<ng-template #simpleItem let-item=\"item\" let-subItem=\"subItem\">\n  <a\n    id=\"{{ item.id }}\"\n    dir=\"ltr\"\n    class=\"flex flex-1 items-center {{ item.mode === 'closely' && !subItem ? 'flex-col' : 'flex-row' }} {{ direction }} {{ mode }} {{\n      displayColor\n    }}\"\n    [ngClass]=\"{\n      active: (active.startsWith(item.link) && item.link !== '/') || (item.link === '/' && active === '/')\n    }\"\n    [routerLink]=\"item.link ? [item.link] : null\"\n    matRipple\n    (click)=\"click($event, item)\"\n  >\n    @if (item.icon) {\n    <mic-icon [icon]=\"item.icon\"></mic-icon>\n    } @if (item.label) {\n    <span [style.margin-left]=\"subItem && !item.icon ? '32px' : '2px'\">{{ item.label }}</span>\n    }\n  </a>\n</ng-template>\n<ng-template #itemWithChildren let-item=\"item\" let-subItem=\"subItem\">\n  <mat-expansion-panel\n    [expanded]=\"active.indexOf(item.link) >= 0\"\n    dir=\"ltr\"\n    [ngClass]=\"{ active: active.startsWith(item.link) }\"\n    class=\"mic-menu-expansion-panel {{ item.displayColor }}\"\n  >\n    <mat-expansion-panel-header>\n      <mat-panel-title class=\"mic-menu-expansion-panel-title\" [ngStyle]=\"subItem && !item.icon ? { 'padding-left': '32px' } : {}\">\n        @if (item.icon) {\n        <mic-icon [icon]=\"item.icon\"></mic-icon>\n        } @if (item.label) {\n        <span>{{ item.label }}</span>\n        }\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n    @for (subItem of item.children; track subItem) {\n    <ng-container\n      [ngTemplateOutlet]=\"!subItem.hasChild ? simpleItem : itemWithChildren\"\n      [ngTemplateOutletContext]=\"{ item: subItem, subItem: true }\"\n    >\n    </ng-container>\n    }\n  </mat-expansion-panel>\n</ng-template>\n<ng-container\n  [ngTemplateOutlet]=\"mode !== 'large' || !hasChild ? simpleItem : itemWithChildren\"\n  [ngTemplateOutletContext]=\"{ item: this, subItem: false }\"\n>\n</ng-container>\n", styles: [":host{width:100%;display:flex;flex-direction:column}a{cursor:pointer;text-align:center;text-decoration:none;height:56px;min-height:56px;padding-block:10px 5px}a span{font-size:11px;text-decoration:none;line-height:15px}a.large{padding:16px}a.large .mic-icon{margin-top:0;margin-right:5px}a.large span{font-size:15px;font-weight:400;line-height:24px;margin-left:10px;margin-right:10px}a.large.active span,a.large.active mat-icon{font-weight:700}a.closely.rtl,a.closely.ltr{padding-inline:5px;white-space:normal}a.closely.active.rtl{padding-inline-start:0;border-inline-start:5px solid}a.closely.active.rtl .mic-icon{margin-inline-start:0}a.closely.active.ltr{padding-inline-end:0;border-inline-end:5px solid}a.closely.active.ltr .mic-icon{margin-inline-end:0}.mic-menu-expansion-panel{background:none;min-height:56px;box-shadow:none;border-radius:0}.mic-menu-expansion-panel.active .mat-expansion-panel-header{font-weight:700}.mic-menu-expansion-panel .mat-expansion-panel-header{padding:0 16px}.mic-menu-expansion-panel .mat-expansion-panel-header:hover{background-color:transparent}.mic-menu-expansion-panel .mic-menu-expansion-panel-title{margin-left:0}.mic-menu-expansion-panel .mic-menu-expansion-panel-title .mic-icon{margin-right:7px}::ng-deep .mic-menu-expansion-panel>.mat-expansion-panel-content>.mat-expansion-panel-body{padding:0;flex-direction:column!important;display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i6.IconComponent, selector: "mic-icon", inputs: ["icon", "fontSet", "ariaLabel", "decorative"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SidebarItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mic-sidebar-item', template: "<ng-template #simpleItem let-item=\"item\" let-subItem=\"subItem\">\n  <a\n    id=\"{{ item.id }}\"\n    dir=\"ltr\"\n    class=\"flex flex-1 items-center {{ item.mode === 'closely' && !subItem ? 'flex-col' : 'flex-row' }} {{ direction }} {{ mode }} {{\n      displayColor\n    }}\"\n    [ngClass]=\"{\n      active: (active.startsWith(item.link) && item.link !== '/') || (item.link === '/' && active === '/')\n    }\"\n    [routerLink]=\"item.link ? [item.link] : null\"\n    matRipple\n    (click)=\"click($event, item)\"\n  >\n    @if (item.icon) {\n    <mic-icon [icon]=\"item.icon\"></mic-icon>\n    } @if (item.label) {\n    <span [style.margin-left]=\"subItem && !item.icon ? '32px' : '2px'\">{{ item.label }}</span>\n    }\n  </a>\n</ng-template>\n<ng-template #itemWithChildren let-item=\"item\" let-subItem=\"subItem\">\n  <mat-expansion-panel\n    [expanded]=\"active.indexOf(item.link) >= 0\"\n    dir=\"ltr\"\n    [ngClass]=\"{ active: active.startsWith(item.link) }\"\n    class=\"mic-menu-expansion-panel {{ item.displayColor }}\"\n  >\n    <mat-expansion-panel-header>\n      <mat-panel-title class=\"mic-menu-expansion-panel-title\" [ngStyle]=\"subItem && !item.icon ? { 'padding-left': '32px' } : {}\">\n        @if (item.icon) {\n        <mic-icon [icon]=\"item.icon\"></mic-icon>\n        } @if (item.label) {\n        <span>{{ item.label }}</span>\n        }\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n    @for (subItem of item.children; track subItem) {\n    <ng-container\n      [ngTemplateOutlet]=\"!subItem.hasChild ? simpleItem : itemWithChildren\"\n      [ngTemplateOutletContext]=\"{ item: subItem, subItem: true }\"\n    >\n    </ng-container>\n    }\n  </mat-expansion-panel>\n</ng-template>\n<ng-container\n  [ngTemplateOutlet]=\"mode !== 'large' || !hasChild ? simpleItem : itemWithChildren\"\n  [ngTemplateOutletContext]=\"{ item: this, subItem: false }\"\n>\n</ng-container>\n", styles: [":host{width:100%;display:flex;flex-direction:column}a{cursor:pointer;text-align:center;text-decoration:none;height:56px;min-height:56px;padding-block:10px 5px}a span{font-size:11px;text-decoration:none;line-height:15px}a.large{padding:16px}a.large .mic-icon{margin-top:0;margin-right:5px}a.large span{font-size:15px;font-weight:400;line-height:24px;margin-left:10px;margin-right:10px}a.large.active span,a.large.active mat-icon{font-weight:700}a.closely.rtl,a.closely.ltr{padding-inline:5px;white-space:normal}a.closely.active.rtl{padding-inline-start:0;border-inline-start:5px solid}a.closely.active.rtl .mic-icon{margin-inline-start:0}a.closely.active.ltr{padding-inline-end:0;border-inline-end:5px solid}a.closely.active.ltr .mic-icon{margin-inline-end:0}.mic-menu-expansion-panel{background:none;min-height:56px;box-shadow:none;border-radius:0}.mic-menu-expansion-panel.active .mat-expansion-panel-header{font-weight:700}.mic-menu-expansion-panel .mat-expansion-panel-header{padding:0 16px}.mic-menu-expansion-panel .mat-expansion-panel-header:hover{background-color:transparent}.mic-menu-expansion-panel .mic-menu-expansion-panel-title{margin-left:0}.mic-menu-expansion-panel .mic-menu-expansion-panel-title .mic-icon{margin-right:7px}::ng-deep .mic-menu-expansion-panel>.mat-expansion-panel-content>.mat-expansion-panel-body{padding:0;flex-direction:column!important;display:block}\n"] }]
        }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { children: [{
                type: ContentChildren,
                args: [forwardRef(() => SidebarItemComponent)]
            }], id: [{
                type: Input
            }], direction: [{
                type: Input
            }], mode: [{
                type: Input
            }], icon: [{
                type: Input
            }], link: [{
                type: Input
            }], label: [{
                type: Input
            }], tags: [{
                type: Input
            }], search: [{
                type: Input
            }], selected: [{
                type: Output
            }], classes: [{
                type: HostBinding,
                args: ['class']
            }] } });
//# sourceMappingURL=data:application/json;base64, 