import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { input, booleanAttribute, output, viewChild, signal, Component, inject, NgModule } from '@angular/core';
import { elementDown2 } from '@siemens/element-icons';
import { SiHeaderDropdownComponent, SiHeaderDropdownTriggerDirective, SiHeaderDropdownItemsFactoryComponent, SI_HEADER_WITH_DROPDOWNS } from '@siemens/element-ng/header-dropdown';
import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
import { SiLinkDirective } from '@siemens/element-ng/link';
import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
import { A11yModule } from '@angular/cdk/a11y';
import { SiApplicationHeaderComponent, SiHeaderCollapsibleActionsComponent, SiLaunchpadFactoryComponent, SiHeaderAccountItemComponent, SiHeaderNavigationItemComponent, SiHeaderBrandDirective, SiHeaderNavigationComponent, SiHeaderActionsDirective, SiHeaderLogoDirective } from '@siemens/element-ng/application-header';
import { defer } from 'rxjs';

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
/** @deprecated Use the new `si-application-header` instead. */
class SiNavbarPrimaryComponent {
    /**
     * List of navbar items which should be displayed at the left (in LTR) side next to the
     * banner.
     *
     * @defaultValue []
     */
    primaryItems = input([], ...(ngDevMode ? [{ debugName: "primaryItems" }] : []));
    /**
     * List of account dropdown elements (defined by `title` and `link`).
     *
     * The menu item can have submenu items (supplying `items`: MenuItem[]).
     * Submenu items can be divided into groups by separators. A separator is
     * an item with only '-' set as `title`.
     *
     * Alternatively, you can can create a custom content by putting your html
     * code between the <si-navbar-primary> tags. In this case you don't need this
     * property (will be ignored if you set anyway).
     */
    accountItems = input(...(ngDevMode ? [undefined, { debugName: "accountItems" }] : []));
    /**
     * Account settings name (`title`) and profile picture (`image` or `icon`)
     */
    account = input(...(ngDevMode ? [undefined, { debugName: "account" }] : []));
    /**
     * URL of the navbar brand.
     */
    logoUrl = input(...(ngDevMode ? [undefined, { debugName: "logoUrl" }] : []));
    /**
     * Title of the application.
     */
    appTitle = input(...(ngDevMode ? [undefined, { debugName: "appTitle" }] : []));
    /**
     * Configurable home link that is used at the logo and app title.
     * Use `undefined` to disable the link.
     *
     * @defaultValue
     * ```
     * { link: '/' }
     * ```
     */
    home = input({ link: '/' }, ...(ngDevMode ? [{ debugName: "home" }] : []));
    /**
     * title for the launchpad
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_LAUNCHPAD.TITLE:Launchpad`)
     * ```
     */
    appSwitcherTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.TITLE:Launchpad`), ...(ngDevMode ? [{ debugName: "appSwitcherTitle" }] : []));
    /**
     * sub-title for the launchpad
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_LAUNCHPAD.SUB_TITLE:Access all your apps`)
     * ```
     */
    appSwitcherSubTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.SUB_TITLE:Access all your apps`), ...(ngDevMode ? [{ debugName: "appSwitcherSubTitle" }] : []));
    /**
     * Title or translate key for the favorite apps section.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorite apps`)
     * ```
     */
    favoriteAppsTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorite apps`), ...(ngDevMode ? [{ debugName: "favoriteAppsTitle" }] : []));
    /**
     * Title or translate key for the default apps section.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_LAUNCHPAD.DEFAULT_CATEGORY_TITLE:Apps`)
     * ```
     */
    defaultAppsTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.DEFAULT_CATEGORY_TITLE:Apps`), ...(ngDevMode ? [{ debugName: "defaultAppsTitle" }] : []));
    /**
     * Title or translate key for the show more apps button.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_LAUNCHPAD.SHOW_MORE:Show more`)
     * ```
     */
    showMoreAppsTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.SHOW_MORE:Show more`), ...(ngDevMode ? [{ debugName: "showMoreAppsTitle" }] : []));
    /**
     * Title or translate key for the show less apps button.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_LAUNCHPAD.SHOW_LESS:Show less`)
     * ```
     */
    showLessAppsTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.SHOW_LESS:Show less`), ...(ngDevMode ? [{ debugName: "showLessAppsTitle" }] : []));
    /**
     * All app items shown in the launchpad. The launchpad will not be visible if the
     * app items are undefined. The launchpad will be visible if the app items are an
     * empty array.
     */
    appItems = input(...(ngDevMode ? [undefined, { debugName: "appItems" }] : []));
    /**
     * Like `appItems` but with the addition of categories. If this is set, `appItems` is ignored.
     */
    appCategoryItems = input(...(ngDevMode ? [undefined, { debugName: "appCategoryItems" }] : []));
    /**
     * Allow the user to favorite apps which will then be displayed at the top.
     *
     * @defaultValue false
     */
    appItemsFavorites = input(false, { ...(ngDevMode ? { debugName: "appItemsFavorites" } : {}), transform: booleanAttribute });
    /**
     * "all apps" link in the launchpad
     */
    allAppsLink = input(...(ngDevMode ? [undefined, { debugName: "allAppsLink" }] : []));
    /**
     * Specifies whether the component should automatically be focused as soon as it is loaded.
     *
     * @defaultValue false
     */
    focusOnLoad = input(false, { ...(ngDevMode ? { debugName: "focusOnLoad" } : {}), transform: booleanAttribute });
    /**
     * Marks the navbar as primary navigation element. Needed for a11y (screen reader).
     * Only one element should be primary. If multiple navbars are used, it's up to the
     * user of the components to label them in the correct order.
     *
     * @defaultValue 'Primary'
     */
    navAriaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "navAriaLabel" }] : []));
    /**
     * Text to close the launchpad. Needed for a11y.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_LAUNCHPAD.CLOSE:Close launchpad`)
     * ```
     */
    closeAppSwitcherText = input(t(() => $localize `:@@SI_LAUNCHPAD.CLOSE:Close launchpad`), ...(ngDevMode ? [{ debugName: "closeAppSwitcherText" }] : []));
    /**
     * Text for the launchpad icon. Needed for a11y.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_NAVBAR.OPEN_LAUNCHPAD:Open launchpad`)
     * ```
     */
    openAppSwitcherText = input(t(() => $localize `:@@SI_NAVBAR.OPEN_LAUNCHPAD:Open launchpad`), ...(ngDevMode ? [{ debugName: "openAppSwitcherText" }] : []));
    /**
     * Text or translate key for the toggle navigation icon. Needed for a11y.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_NAVBAR.TOGGLE_NAVIGATION:Toggle navigation`)
     * ```
     */
    toggleNavigationText = input(t(() => $localize `:@@SI_NAVBAR.TOGGLE_NAVIGATION:Toggle navigation`), ...(ngDevMode ? [{ debugName: "toggleNavigationText" }] : []));
    /**
     * Aria label for the main menu landmark
     *
     * @defaultValue 'Header main'
     */
    ariaLabelMainMenu = input('Header main', ...(ngDevMode ? [{ debugName: "ariaLabelMainMenu" }] : []));
    /**
     * Aria label for the secondary menu landmark
     *
     * @defaultValue 'Header secondary'
     */
    ariaLabelSecondaryMenu = input('Header secondary', ...(ngDevMode ? [{ debugName: "ariaLabelSecondaryMenu" }] : []));
    appItemFavoriteChanged = output();
    /** @internal */
    header = viewChild.required(SiApplicationHeaderComponent);
    /** @internal */
    collapsibleActions = viewChild(SiHeaderCollapsibleActionsComponent, ...(ngDevMode ? [{ debugName: "collapsibleActions" }] : []));
    /** @internal */
    navItemCount = signal(0, ...(ngDevMode ? [{ debugName: "navItemCount" }] : []));
    newAppItems;
    active;
    /** @internal */
    // defer is required as header is not available at the time of creation.`
    inlineDropdown = defer(() => this.header().inlineDropdown);
    /** @internal */
    onDropdownItemTriggered() {
        this.header().onDropdownItemTriggered();
    }
    /** @internal */
    ngOnChanges(changes) {
        if (changes.appItems || changes.appCategoryItems) {
            const appItems = this.appItems();
            const appCategoryItems = this.appCategoryItems();
            if (appCategoryItems) {
                this.newAppItems = appCategoryItems.map(category => ({
                    // Violation by intention.
                    // Empty strings should also be replaced by the default title.
                    // We rely on this in our examples, so projects might as well.
                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                    name: category.category || this.defaultAppsTitle(),
                    apps: this.convertApps(category.items)
                }));
                const allAppsLink = this.allAppsLink();
                if (allAppsLink && this.newAppItems.length) {
                    const lastCategory = this.newAppItems.at(-1);
                    lastCategory.apps.push({
                        name: allAppsLink.title,
                        iconClass: allAppsLink.icon ?? 'element-plus',
                        href: allAppsLink.href,
                        target: allAppsLink.target,
                        _noFavorite: true // this should not show up in public API, but we need it for now.
                    });
                }
            }
            else if (appItems) {
                this.newAppItems = this.convertApps(appItems);
                const allAppsLink = this.allAppsLink();
                if (allAppsLink) {
                    this.newAppItems.push({
                        name: allAppsLink.title,
                        iconClass: allAppsLink.icon ?? 'element-plus',
                        href: allAppsLink.href,
                        target: allAppsLink.target,
                        _noFavorite: true // this should not show up in public API, but we need it for now.
                    });
                }
            }
        }
    }
    convertApps(apps) {
        return apps.map(app => ({
            name: app.title,
            href: app.href,
            external: app.isExternal,
            active: app.isActive,
            target: app.target,
            iconClass: app.icon,
            favorite: app.isFavorite,
            _src: app // this should not show up in public API, but we need it for now.
        }));
    }
    onFavoriteChange({ app, favorite }) {
        this.appItemFavoriteChanged.emit([app._src, favorite]);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarPrimaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarPrimaryComponent, isStandalone: true, selector: "si-navbar-primary", inputs: { primaryItems: { classPropertyName: "primaryItems", publicName: "primaryItems", isSignal: true, isRequired: false, transformFunction: null }, accountItems: { classPropertyName: "accountItems", publicName: "accountItems", isSignal: true, isRequired: false, transformFunction: null }, account: { classPropertyName: "account", publicName: "account", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null }, appTitle: { classPropertyName: "appTitle", publicName: "appTitle", isSignal: true, isRequired: false, transformFunction: null }, home: { classPropertyName: "home", publicName: "home", isSignal: true, isRequired: false, transformFunction: null }, appSwitcherTitle: { classPropertyName: "appSwitcherTitle", publicName: "appSwitcherTitle", isSignal: true, isRequired: false, transformFunction: null }, appSwitcherSubTitle: { classPropertyName: "appSwitcherSubTitle", publicName: "appSwitcherSubTitle", isSignal: true, isRequired: false, transformFunction: null }, favoriteAppsTitle: { classPropertyName: "favoriteAppsTitle", publicName: "favoriteAppsTitle", isSignal: true, isRequired: false, transformFunction: null }, defaultAppsTitle: { classPropertyName: "defaultAppsTitle", publicName: "defaultAppsTitle", isSignal: true, isRequired: false, transformFunction: null }, showMoreAppsTitle: { classPropertyName: "showMoreAppsTitle", publicName: "showMoreAppsTitle", isSignal: true, isRequired: false, transformFunction: null }, showLessAppsTitle: { classPropertyName: "showLessAppsTitle", publicName: "showLessAppsTitle", isSignal: true, isRequired: false, transformFunction: null }, appItems: { classPropertyName: "appItems", publicName: "appItems", isSignal: true, isRequired: false, transformFunction: null }, appCategoryItems: { classPropertyName: "appCategoryItems", publicName: "appCategoryItems", isSignal: true, isRequired: false, transformFunction: null }, appItemsFavorites: { classPropertyName: "appItemsFavorites", publicName: "appItemsFavorites", isSignal: true, isRequired: false, transformFunction: null }, allAppsLink: { classPropertyName: "allAppsLink", publicName: "allAppsLink", isSignal: true, isRequired: false, transformFunction: null }, focusOnLoad: { classPropertyName: "focusOnLoad", publicName: "focusOnLoad", isSignal: true, isRequired: false, transformFunction: null }, navAriaLabel: { classPropertyName: "navAriaLabel", publicName: "navAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeAppSwitcherText: { classPropertyName: "closeAppSwitcherText", publicName: "closeAppSwitcherText", isSignal: true, isRequired: false, transformFunction: null }, openAppSwitcherText: { classPropertyName: "openAppSwitcherText", publicName: "openAppSwitcherText", isSignal: true, isRequired: false, transformFunction: null }, toggleNavigationText: { classPropertyName: "toggleNavigationText", publicName: "toggleNavigationText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelMainMenu: { classPropertyName: "ariaLabelMainMenu", publicName: "ariaLabelMainMenu", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelSecondaryMenu: { classPropertyName: "ariaLabelSecondaryMenu", publicName: "ariaLabelSecondaryMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appItemFavoriteChanged: "appItemFavoriteChanged" }, providers: [{ provide: SI_HEADER_WITH_DROPDOWNS, useExisting: SiNavbarPrimaryComponent }], viewQueries: [{ propertyName: "header", first: true, predicate: SiApplicationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "collapsibleActions", first: true, predicate: SiHeaderCollapsibleActionsComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<si-application-header [launchpad]=\"newAppItems ? launchpad : undefined\">\n  <si-header-brand>\n    @if (logoUrl()) {\n      <a class=\"header-logo header-custom-logo px-6 focus-inside\" [siLink]=\"home()\">\n        <img alt=\"Siemens logo\" [src]=\"logoUrl()\" />\n      </a>\n    } @else {\n      <a siHeaderLogo class=\"d-none d-md-flex\" [siLink]=\"home()\"></a>\n    }\n    @if (appTitle()) {\n      <h1 class=\"application-name\">{{ appTitle() }}</h1>\n    }\n  </si-header-brand>\n\n  @if (primaryItems().length) {\n    <si-header-navigation [attr.aria-label]=\"ariaLabelMainMenu()\">\n      @for (item of primaryItems(); track $index) {\n        @if (item.items) {\n          <button\n            type=\"button\"\n            si-header-navigation-item\n            [siHeaderDropdownTriggerFor]=\"dropdown\"\n            [class.active]=\"active === item\"\n          >\n            {{ item.title | translate }}\n            <ng-template #dropdown>\n              <si-header-dropdown>\n                <si-header-dropdown-items-factory\n                  [items]=\"item.items\"\n                  (activeChange)=\"$event ? (active = item) : null\"\n                />\n              </si-header-dropdown>\n            </ng-template>\n          </button>\n        } @else {\n          <a\n            si-header-navigation-item\n            activeClass=\"active\"\n            [siLink]=\"item\"\n            (activeChange)=\"$event ? (active = item) : null\"\n          >\n            {{ item.title | translate }}\n          </a>\n        }\n      }\n    </si-header-navigation>\n  }\n  @if (navItemCount() || account()) {\n    <si-header-actions [attr.aria-label]=\"ariaLabelSecondaryMenu()\">\n      @if (navItemCount()) {\n        @if (navItemCount() === 1) {\n          <ng-container *ngTemplateOutlet=\"actions\" />\n        } @else {\n          <si-header-collapsible-actions>\n            <ng-container *ngTemplateOutlet=\"actions\" />\n          </si-header-collapsible-actions>\n        }\n      }\n      @if (account()) {\n        <!--eslint-disable @angular-eslint/template/elements-content -->\n        <button\n          si-header-account-item\n          type=\"button\"\n          [name]=\"account()!.title\"\n          [initials]=\"account()!.initials\"\n          [imageUrl]=\"account()!.image\"\n          [siHeaderDropdownTriggerFor]=\"accountDropdown\"\n        ></button>\n        <!--eslint-enable @angular-eslint/template/elements-content -->\n\n        <ng-template #accountDropdown>\n          <si-header-dropdown>\n            <div class=\"d-block userinfo mx-5 mb-4\">\n              <div class=\"si-h5 text-truncate\">{{ account()!.title }}</div>\n              @if (account()!.email) {\n                <div class=\"email\">{{ account()!.email }}</div>\n              }\n              <div class=\"d-flex align-items-center text-secondary mt-2\">\n                @if (account()!.company) {\n                  <span class=\"label me-4\">{{ account()!.company | translate }}</span>\n                }\n                @if (account()!.role) {\n                  <span class=\"ms-0 badge bg-default\">\n                    {{ account()!.role | translate }}\n                  </span>\n                }\n              </div>\n            </div>\n            @if (accountItems()?.length) {\n              <div class=\"d-block dropdown-divider\" role=\"separator\"></div>\n              <si-header-dropdown-items-factory [items]=\"accountItems()!\" />\n            }\n            @if (account()!.customContent) {\n              <div class=\"d-block dropdown-divider\" role=\"separator\"></div>\n              <ng-content />\n            }\n          </si-header-dropdown>\n        </ng-template>\n      }\n    </si-header-actions>\n  } @else {\n    <!-- Seems like @if makes ng-content believe that there is always a header-actions section. So we have to add it here. -->\n    <si-header-actions />\n  }\n</si-application-header>\n\n<ng-template #launchpad>\n  <si-launchpad-factory\n    [showLessAppsText]=\"showLessAppsTitle()\"\n    [showMoreAppsText]=\"showMoreAppsTitle()\"\n    [closeText]=\"closeAppSwitcherText()\"\n    [titleText]=\"appSwitcherTitle()\"\n    [subtitleText]=\"appSwitcherSubTitle()\"\n    [enableFavorites]=\"appItemsFavorites()\"\n    [favoriteAppsText]=\"favoriteAppsTitle()\"\n    [apps]=\"newAppItems!\"\n    (favoriteChange)=\"onFavoriteChange($event)\"\n  />\n</ng-template>\n<ng-template #actions>\n  <ng-content select=\"si-navbar-item[quickAction], element-navbar-item[quickAction='true']\" />\n</ng-template>\n", styles: [".header-custom-logo{content:initial;inline-size:auto}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiApplicationHeaderComponent, selector: "si-application-header", inputs: ["expandBreakpoint", "launchpad", "launchpadLabel"] }, { kind: "component", type: SiLaunchpadFactoryComponent, selector: "si-launchpad-factory", inputs: ["closeText", "titleText", "subtitleText", "apps", "enableFavorites", "favoriteAppsText", "showMoreAppsText", "showLessAppsText"], outputs: ["favoriteChange"] }, { kind: "component", type: SiHeaderAccountItemComponent, selector: "button[si-header-account-item]", inputs: ["name", "initials", "imageUrl"] }, { kind: "component", type: SiHeaderDropdownComponent, selector: "si-header-dropdown" }, { kind: "directive", type: SiHeaderDropdownTriggerDirective, selector: "[siHeaderDropdownTriggerFor]", inputs: ["siHeaderDropdownTriggerFor", "dropdownData"], outputs: ["openChange"], exportAs: ["siHeaderDropdownTrigger"] }, { kind: "component", type: SiHeaderDropdownItemsFactoryComponent, selector: "si-header-dropdown-items-factory", inputs: ["items"], outputs: ["activeChange"] }, { kind: "component", type: SiHeaderNavigationItemComponent, selector: "button[si-header-navigation-item], a[si-header-navigation-item]" }, { kind: "directive", type: SiHeaderBrandDirective, selector: "si-header-brand" }, { kind: "component", type: SiHeaderNavigationComponent, selector: "si-header-navigation" }, { kind: "directive", type: SiHeaderActionsDirective, selector: "si-header-actions" }, { kind: "component", type: SiHeaderCollapsibleActionsComponent, selector: "si-header-collapsible-actions", inputs: ["mobileToggleLabel"] }, { kind: "directive", type: SiHeaderLogoDirective, selector: "si-header-logo, [siHeaderLogo]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarPrimaryComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-navbar-primary', imports: [
                        A11yModule,
                        NgTemplateOutlet,
                        SiLinkDirective,
                        SiTranslatePipe,
                        SiApplicationHeaderComponent,
                        SiLaunchpadFactoryComponent,
                        SiHeaderAccountItemComponent,
                        SiHeaderDropdownComponent,
                        SiHeaderDropdownTriggerDirective,
                        SiHeaderDropdownItemsFactoryComponent,
                        SiHeaderNavigationItemComponent,
                        SiHeaderBrandDirective,
                        SiHeaderNavigationComponent,
                        SiHeaderActionsDirective,
                        SiHeaderCollapsibleActionsComponent,
                        SiHeaderLogoDirective
                    ], providers: [{ provide: SI_HEADER_WITH_DROPDOWNS, useExisting: SiNavbarPrimaryComponent }], template: "<si-application-header [launchpad]=\"newAppItems ? launchpad : undefined\">\n  <si-header-brand>\n    @if (logoUrl()) {\n      <a class=\"header-logo header-custom-logo px-6 focus-inside\" [siLink]=\"home()\">\n        <img alt=\"Siemens logo\" [src]=\"logoUrl()\" />\n      </a>\n    } @else {\n      <a siHeaderLogo class=\"d-none d-md-flex\" [siLink]=\"home()\"></a>\n    }\n    @if (appTitle()) {\n      <h1 class=\"application-name\">{{ appTitle() }}</h1>\n    }\n  </si-header-brand>\n\n  @if (primaryItems().length) {\n    <si-header-navigation [attr.aria-label]=\"ariaLabelMainMenu()\">\n      @for (item of primaryItems(); track $index) {\n        @if (item.items) {\n          <button\n            type=\"button\"\n            si-header-navigation-item\n            [siHeaderDropdownTriggerFor]=\"dropdown\"\n            [class.active]=\"active === item\"\n          >\n            {{ item.title | translate }}\n            <ng-template #dropdown>\n              <si-header-dropdown>\n                <si-header-dropdown-items-factory\n                  [items]=\"item.items\"\n                  (activeChange)=\"$event ? (active = item) : null\"\n                />\n              </si-header-dropdown>\n            </ng-template>\n          </button>\n        } @else {\n          <a\n            si-header-navigation-item\n            activeClass=\"active\"\n            [siLink]=\"item\"\n            (activeChange)=\"$event ? (active = item) : null\"\n          >\n            {{ item.title | translate }}\n          </a>\n        }\n      }\n    </si-header-navigation>\n  }\n  @if (navItemCount() || account()) {\n    <si-header-actions [attr.aria-label]=\"ariaLabelSecondaryMenu()\">\n      @if (navItemCount()) {\n        @if (navItemCount() === 1) {\n          <ng-container *ngTemplateOutlet=\"actions\" />\n        } @else {\n          <si-header-collapsible-actions>\n            <ng-container *ngTemplateOutlet=\"actions\" />\n          </si-header-collapsible-actions>\n        }\n      }\n      @if (account()) {\n        <!--eslint-disable @angular-eslint/template/elements-content -->\n        <button\n          si-header-account-item\n          type=\"button\"\n          [name]=\"account()!.title\"\n          [initials]=\"account()!.initials\"\n          [imageUrl]=\"account()!.image\"\n          [siHeaderDropdownTriggerFor]=\"accountDropdown\"\n        ></button>\n        <!--eslint-enable @angular-eslint/template/elements-content -->\n\n        <ng-template #accountDropdown>\n          <si-header-dropdown>\n            <div class=\"d-block userinfo mx-5 mb-4\">\n              <div class=\"si-h5 text-truncate\">{{ account()!.title }}</div>\n              @if (account()!.email) {\n                <div class=\"email\">{{ account()!.email }}</div>\n              }\n              <div class=\"d-flex align-items-center text-secondary mt-2\">\n                @if (account()!.company) {\n                  <span class=\"label me-4\">{{ account()!.company | translate }}</span>\n                }\n                @if (account()!.role) {\n                  <span class=\"ms-0 badge bg-default\">\n                    {{ account()!.role | translate }}\n                  </span>\n                }\n              </div>\n            </div>\n            @if (accountItems()?.length) {\n              <div class=\"d-block dropdown-divider\" role=\"separator\"></div>\n              <si-header-dropdown-items-factory [items]=\"accountItems()!\" />\n            }\n            @if (account()!.customContent) {\n              <div class=\"d-block dropdown-divider\" role=\"separator\"></div>\n              <ng-content />\n            }\n          </si-header-dropdown>\n        </ng-template>\n      }\n    </si-header-actions>\n  } @else {\n    <!-- Seems like @if makes ng-content believe that there is always a header-actions section. So we have to add it here. -->\n    <si-header-actions />\n  }\n</si-application-header>\n\n<ng-template #launchpad>\n  <si-launchpad-factory\n    [showLessAppsText]=\"showLessAppsTitle()\"\n    [showMoreAppsText]=\"showMoreAppsTitle()\"\n    [closeText]=\"closeAppSwitcherText()\"\n    [titleText]=\"appSwitcherTitle()\"\n    [subtitleText]=\"appSwitcherSubTitle()\"\n    [enableFavorites]=\"appItemsFavorites()\"\n    [favoriteAppsText]=\"favoriteAppsTitle()\"\n    [apps]=\"newAppItems!\"\n    (favoriteChange)=\"onFavoriteChange($event)\"\n  />\n</ng-template>\n<ng-template #actions>\n  <ng-content select=\"si-navbar-item[quickAction], element-navbar-item[quickAction='true']\" />\n</ng-template>\n", styles: [".header-custom-logo{content:initial;inline-size:auto}\n"] }]
        }], propDecorators: { primaryItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryItems", required: false }] }], accountItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "accountItems", required: false }] }], account: [{ type: i0.Input, args: [{ isSignal: true, alias: "account", required: false }] }], logoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoUrl", required: false }] }], appTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTitle", required: false }] }], home: [{ type: i0.Input, args: [{ isSignal: true, alias: "home", required: false }] }], appSwitcherTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "appSwitcherTitle", required: false }] }], appSwitcherSubTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "appSwitcherSubTitle", required: false }] }], favoriteAppsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "favoriteAppsTitle", required: false }] }], defaultAppsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultAppsTitle", required: false }] }], showMoreAppsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMoreAppsTitle", required: false }] }], showLessAppsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLessAppsTitle", required: false }] }], appItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "appItems", required: false }] }], appCategoryItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "appCategoryItems", required: false }] }], appItemsFavorites: [{ type: i0.Input, args: [{ isSignal: true, alias: "appItemsFavorites", required: false }] }], allAppsLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "allAppsLink", required: false }] }], focusOnLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnLoad", required: false }] }], navAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navAriaLabel", required: false }] }], closeAppSwitcherText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAppSwitcherText", required: false }] }], openAppSwitcherText: [{ type: i0.Input, args: [{ isSignal: true, alias: "openAppSwitcherText", required: false }] }], toggleNavigationText: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleNavigationText", required: false }] }], ariaLabelMainMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelMainMenu", required: false }] }], ariaLabelSecondaryMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelSecondaryMenu", required: false }] }], appItemFavoriteChanged: [{ type: i0.Output, args: ["appItemFavoriteChanged"] }], header: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiApplicationHeaderComponent), { isSignal: true }] }], collapsibleActions: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiHeaderCollapsibleActionsComponent), { isSignal: true }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
/** @deprecated Use the new `si-application-header` instead. */
class SiNavbarItemComponent {
    icons = addIcons({ elementDown2 });
    /**
     * MenuItem to display in the navbar.
     */
    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
    /**
     * Is the item a quick action displayed on the end (right in LTR) side
     *
     * @defaultValue false
     */
    quickAction = input(false, { ...(ngDevMode ? { debugName: "quickAction" } : {}), transform: booleanAttribute });
    dropdownTrigger = viewChild(SiHeaderDropdownTriggerDirective, ...(ngDevMode ? [{ debugName: "dropdownTrigger" }] : []));
    active = false;
    navbar = inject(SiNavbarPrimaryComponent);
    hasBadge = false;
    ngOnInit() {
        this.navbar.header().closeMobileMenus.subscribe(() => this.dropdownTrigger()?.close());
        this.navbar.navItemCount.update(value => value + 1);
    }
    ngDoCheck() {
        const item = this.item();
        const newHasBadge = !!(item.badge ?? item.badgeDot);
        if (this.quickAction() && this.hasBadge !== newHasBadge) {
            this.hasBadge = newHasBadge;
            if (this.hasBadge) {
                this.navbar.collapsibleActions()?.badgeCount.update(value => value + 1);
            }
            else {
                this.navbar.collapsibleActions()?.badgeCount.update(value => value - 1);
            }
        }
    }
    ngOnDestroy() {
        this.navbar.navItemCount.update(value => value - 1);
    }
    click() {
        if (!this.dropdownTrigger()) {
            this.navbar.header().closeMobileMenus.next();
        }
    }
    get visuallyHideTitle() {
        return !this.navbar.collapsibleActions()?.mobileExpanded();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarItemComponent, isStandalone: true, selector: "si-navbar-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, quickAction: { classPropertyName: "quickAction", publicName: "quickAction", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: SiHeaderDropdownTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (item().items || item().customContent) {\n  <button\n    type=\"button\"\n    class=\"header-item focus-inside\"\n    [class.active]=\"active\"\n    [attr.aria-label]=\"item().title | translate\"\n    [siHeaderDropdownTriggerFor]=\"dropdown\"\n    (click)=\"click()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemContent\" />\n    <si-icon class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n  </button>\n} @else {\n  <a\n    class=\"header-item focus-inside\"\n    activeClass=\"active\"\n    [siLink]=\"item()\"\n    [attr.aria-label]=\"item().title | translate\"\n    (activeChange)=\"active = $event\"\n    (click)=\"click()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemContent\" />\n  </a>\n}\n\n<ng-template #itemContent>\n  @let icon = item().icon;\n  @if (icon) {\n    <si-icon class=\"icon\" [icon]=\"icon\" />\n  }\n  @if (item().badge) {\n    <div class=\"badge-text\">{{ item().badge }}</div>\n  }\n  <ng-content select=\"si-avatar\" />\n  <div class=\"item-title\" [class.visually-hidden]=\"visuallyHideTitle\">\n    {{ item().title | translate }}\n  </div>\n</ng-template>\n\n<ng-template #dropdown>\n  <si-header-dropdown>\n    @if (item().items) {\n      <si-header-dropdown-items-factory [items]=\"item().items!\" (activeChange)=\"active = $event\" />\n    }\n    @if (item().customContent) {\n      <ng-content />\n    }\n  </si-header-dropdown>\n</ng-template>\n", dependencies: [{ kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiHeaderDropdownComponent, selector: "si-header-dropdown" }, { kind: "component", type: SiHeaderDropdownItemsFactoryComponent, selector: "si-header-dropdown-items-factory", inputs: ["items"], outputs: ["activeChange"] }, { kind: "directive", type: SiHeaderDropdownTriggerDirective, selector: "[siHeaderDropdownTriggerFor]", inputs: ["siHeaderDropdownTriggerFor", "dropdownData"], outputs: ["openChange"], exportAs: ["siHeaderDropdownTrigger"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-navbar-item', imports: [
                        SiLinkDirective,
                        SiTranslatePipe,
                        NgTemplateOutlet,
                        SiHeaderDropdownComponent,
                        SiHeaderDropdownItemsFactoryComponent,
                        SiHeaderDropdownTriggerDirective,
                        SiIconComponent
                    ], host: { class: 'd-contents' }, template: "@if (item().items || item().customContent) {\n  <button\n    type=\"button\"\n    class=\"header-item focus-inside\"\n    [class.active]=\"active\"\n    [attr.aria-label]=\"item().title | translate\"\n    [siHeaderDropdownTriggerFor]=\"dropdown\"\n    (click)=\"click()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemContent\" />\n    <si-icon class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n  </button>\n} @else {\n  <a\n    class=\"header-item focus-inside\"\n    activeClass=\"active\"\n    [siLink]=\"item()\"\n    [attr.aria-label]=\"item().title | translate\"\n    (activeChange)=\"active = $event\"\n    (click)=\"click()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemContent\" />\n  </a>\n}\n\n<ng-template #itemContent>\n  @let icon = item().icon;\n  @if (icon) {\n    <si-icon class=\"icon\" [icon]=\"icon\" />\n  }\n  @if (item().badge) {\n    <div class=\"badge-text\">{{ item().badge }}</div>\n  }\n  <ng-content select=\"si-avatar\" />\n  <div class=\"item-title\" [class.visually-hidden]=\"visuallyHideTitle\">\n    {{ item().title | translate }}\n  </div>\n</ng-template>\n\n<ng-template #dropdown>\n  <si-header-dropdown>\n    @if (item().items) {\n      <si-header-dropdown-items-factory [items]=\"item().items!\" (activeChange)=\"active = $event\" />\n    }\n    @if (item().customContent) {\n      <ng-content />\n    }\n  </si-header-dropdown>\n</ng-template>\n" }]
        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], quickAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickAction", required: false }] }], dropdownTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiHeaderDropdownTriggerDirective), { isSignal: true }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
const components = [SiNavbarItemComponent, SiNavbarPrimaryComponent];
/** @deprecated Use the new `si-application-header` instead. */
class SiNavbarModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarModule, imports: [SiNavbarItemComponent, SiNavbarPrimaryComponent], exports: [SiNavbarItemComponent, SiNavbarPrimaryComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarModule, imports: [components] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: components,
                    exports: components
                }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */

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

export { SiNavbarItemComponent, SiNavbarModule, SiNavbarPrimaryComponent };
//# sourceMappingURL=siemens-element-ng-navbar.mjs.map
