import { Component, ContentChildren, HostBinding, HostListener, input, signal } from '@angular/core';
import { NavbarLinkComponent } from './navbar-link.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/router";
import * as i3 from "@angular/material/tabs";
import * as i4 from "../icon/icon.component";
import * as i5 from "./navbar-design.directive";
import * as i6 from "../utilities/safehtml.directive";
import * as i7 from "./navbar-link-pipe";
/**
 * This component is a container for each links
 */
export class NavbarLinksComponent {
    constructor() {
        this.color = signal('primary');
        /**
         * Aria label for main navigation.
         */
        this.ariaLabel = input('');
        /**
         * Aria label for submenu navigation.
         */
        this.subItemAriaLabel = input('');
        this.classes = `mic-navbar-links`;
        this.active = signal('');
        this.wasInside = true;
    }
    select(link, element) {
        this.selected = link;
        this.selectedElement = element;
        this.active.set('');
    }
    unselect() {
        this.selected = null;
        this.selectedElement = null;
    }
    clickInside() {
        this.wasInside = true;
    }
    clickout() {
        if (!this.wasInside) {
            this.unselect();
        }
        this.wasInside = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NavbarLinksComponent, selector: "mic-navbar-links", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, subItemAriaLabel: { classPropertyName: "subItemAriaLabel", publicName: "subItemAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "clickInside()", "document:click": "clickout()" }, properties: { "class": "this.classes" } }, queries: [{ propertyName: "links", predicate: NavbarLinkComponent }], ngImport: i0, template: "<div class=\"flex flex-row {{ color() }}\">\n  <div class=\"flex flex-row justify-end\">\n    <nav #tabs mat-tab-nav-bar class=\"navbar-links\" [attr.aria-label]=\"ariaLabel()\" [tabPanel]=\"tabPanel\">\n      @for (link of links; track link; let index = $index) {\n      <a\n        mat-tab-link\n        class=\"nav-tab-link flex flex-row justify-center\"\n        (click)=\"select(link, refElement)\"\n        [routerLink]=\"link.link()\"\n        [active]=\"link | navbarLink : selected\"\n        [disableRipple]=\"true\"\n        #refElement\n      >\n        @if (link.icon()) {\n        <mic-icon [icon]=\"link.icon()\"></mic-icon>\n        }\n        <span [class.md-hidden]=\"link.icon()\" [innerHtml]=\"link.label() | safeHTML\" [ngClass]=\"{ 'align-right': link.alignRight() }\"></span>\n      </a>\n      }\n    </nav>\n    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n    @if (selected && selected.children?.length) {\n    <div class=\"navbar-children\">\n      <nav\n        #refChild\n        mat-tab-nav-bar\n        micNavbarDesign\n        [selectedElement]=\"selectedElement\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [tabPanel]=\"tabPanel2\"\n      >\n        @for (subLink of selected.children; track subLink; let index = $index) {\n        <a\n          mat-tab-link\n          class=\"nav-tab-link flex flex-row justify-center\"\n          (click)=\"unselect()\"\n          [routerLink]=\"subLink.link()\"\n          [active]=\"active() === subLink.link()\"\n          [disableRipple]=\"true\"\n        >\n          @if (subLink.icon()) {\n          <mic-icon [icon]=\"subLink.icon()\"></mic-icon>\n          }\n          <span [class.md-hidden]=\"subLink.icon()\">{{ subLink.label() }}</span>\n        </a>\n        }\n      </nav>\n      <mat-tab-nav-panel #tabPanel2></mat-tab-nav-panel>\n    </div>\n    }\n  </div>\n</div>\n", styles: [".navbar-links ::ng-deep .mdc-tab__content{height:auto}.navbar-links .mat-mdc-tab-link.nav-tab-link{opacity:1;min-width:70px;transition:.5s cubic-bezier(.35,0,.25,1);padding:10px}.navbar-links .mat-mdc-tab-link.nav-tab-link .align-right{text-align:right}.navbar-links .mat-mdc-tab-link.nav-tab-link .mic-icon{margin-right:5px}.navbar-links .closely .mat-mdc-tab-link.nav-tab-link{height:50px}.navbar-children{position:absolute;top:63px;left:0;width:100%;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.navbar-children ::ng-deep .mat-mdc-tab-header-pagination{display:none}@media screen and (max-width: 599px){.mat-mdc-tab-link.nav-tab-link{height:55px}.navbar-children{top:55px}}@media screen and (min-width: 600px){.mat-mdc-tab-link.nav-tab-link{height:63px}}@media screen and (max-width: 959px){.mat-mdc-tab-link.nav-tab-link .mic-icon{margin-right:0}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i4.IconComponent, selector: "mic-icon", inputs: ["icon", "fontSet", "ariaLabel", "decorative"] }, { kind: "directive", type: i5.NavbarDesignDirective, selector: "[micNavbarDesign]", inputs: ["selectedElement"] }, { kind: "pipe", type: i6.SafeHtmlDirective, name: "safeHTML" }, { kind: "pipe", type: i7.NavbarLinkPipe, name: "navbarLink" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarLinksComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mic-navbar-links', template: "<div class=\"flex flex-row {{ color() }}\">\n  <div class=\"flex flex-row justify-end\">\n    <nav #tabs mat-tab-nav-bar class=\"navbar-links\" [attr.aria-label]=\"ariaLabel()\" [tabPanel]=\"tabPanel\">\n      @for (link of links; track link; let index = $index) {\n      <a\n        mat-tab-link\n        class=\"nav-tab-link flex flex-row justify-center\"\n        (click)=\"select(link, refElement)\"\n        [routerLink]=\"link.link()\"\n        [active]=\"link | navbarLink : selected\"\n        [disableRipple]=\"true\"\n        #refElement\n      >\n        @if (link.icon()) {\n        <mic-icon [icon]=\"link.icon()\"></mic-icon>\n        }\n        <span [class.md-hidden]=\"link.icon()\" [innerHtml]=\"link.label() | safeHTML\" [ngClass]=\"{ 'align-right': link.alignRight() }\"></span>\n      </a>\n      }\n    </nav>\n    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n    @if (selected && selected.children?.length) {\n    <div class=\"navbar-children\">\n      <nav\n        #refChild\n        mat-tab-nav-bar\n        micNavbarDesign\n        [selectedElement]=\"selectedElement\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [tabPanel]=\"tabPanel2\"\n      >\n        @for (subLink of selected.children; track subLink; let index = $index) {\n        <a\n          mat-tab-link\n          class=\"nav-tab-link flex flex-row justify-center\"\n          (click)=\"unselect()\"\n          [routerLink]=\"subLink.link()\"\n          [active]=\"active() === subLink.link()\"\n          [disableRipple]=\"true\"\n        >\n          @if (subLink.icon()) {\n          <mic-icon [icon]=\"subLink.icon()\"></mic-icon>\n          }\n          <span [class.md-hidden]=\"subLink.icon()\">{{ subLink.label() }}</span>\n        </a>\n        }\n      </nav>\n      <mat-tab-nav-panel #tabPanel2></mat-tab-nav-panel>\n    </div>\n    }\n  </div>\n</div>\n", styles: [".navbar-links ::ng-deep .mdc-tab__content{height:auto}.navbar-links .mat-mdc-tab-link.nav-tab-link{opacity:1;min-width:70px;transition:.5s cubic-bezier(.35,0,.25,1);padding:10px}.navbar-links .mat-mdc-tab-link.nav-tab-link .align-right{text-align:right}.navbar-links .mat-mdc-tab-link.nav-tab-link .mic-icon{margin-right:5px}.navbar-links .closely .mat-mdc-tab-link.nav-tab-link{height:50px}.navbar-children{position:absolute;top:63px;left:0;width:100%;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.navbar-children ::ng-deep .mat-mdc-tab-header-pagination{display:none}@media screen and (max-width: 599px){.mat-mdc-tab-link.nav-tab-link{height:55px}.navbar-children{top:55px}}@media screen and (min-width: 600px){.mat-mdc-tab-link.nav-tab-link{height:63px}}@media screen and (max-width: 959px){.mat-mdc-tab-link.nav-tab-link .mic-icon{margin-right:0}}\n"] }]
        }], propDecorators: { classes: [{
                type: HostBinding,
                args: ['class']
            }], links: [{
                type: ContentChildren,
                args: [NavbarLinkComponent]
            }], clickInside: [{
                type: HostListener,
                args: ['click']
            }], clickout: [{
                type: HostListener,
                args: ['document:click']
            }] } });
//# sourceMappingURL=data:application/json;base64, 