import * as i2 from '@angular/cdk/menu';
import { CdkMenuBar, CdkMenuModule } from '@angular/cdk/menu';
import * as i0 from '@angular/core';
import { input, ChangeDetectionStrategy, Component, booleanAttribute, viewChild, ElementRef, computed, linkedSignal, inject, NgModule } from '@angular/core';
import { RouterLink } from '@angular/router';
import { elementOptionsVertical, elementCancel } from '@siemens/element-icons';
import * as i3 from '@siemens/element-ng/auto-collapsable-list';
import { SiAutoCollapsableListModule } from '@siemens/element-ng/auto-collapsable-list';
import { SiIconComponent, addIcons } from '@siemens/element-ng/icon';
import * as i4 from '@siemens/element-ng/link';
import { SiLinkModule } from '@siemens/element-ng/link';
import * as i1 from '@siemens/element-ng/menu';
import { SiMenuActionService, SiMenuModule } from '@siemens/element-ng/menu';
import { SiTooltipDirective } from '@siemens/element-ng/tooltip';
import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiContentActionBarToggleComponent {
    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SiContentActionBarToggleComponent, isStandalone: true, selector: "[si-content-action-bar-toggle]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "dropdown-item flex-grow-0 focus-inside" }, ngImport: i0, template: "<si-icon class=\"icon\" [icon]=\"icon()\" />\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:1.25rem}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:0!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:4px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-primary-active);background:var(--element-action-secondary-active)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(.card-outline){background:transparent}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarToggleComponent, decorators: [{
            type: Component,
            args: [{ selector: '[si-content-action-bar-toggle]', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'dropdown-item flex-grow-0 focus-inside' }, template: "<si-icon class=\"icon\" [icon]=\"icon()\" />\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:1.25rem}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:0!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:4px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-primary-active);background:var(--element-action-secondary-active)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(.card-outline){background:transparent}\n"] }]
        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiContentActionBarComponent {
    /**
     * List of primary actions. Supports up to **4** actions and omits additional ones.
     */
    primaryActions = input(...(ngDevMode ? [undefined, { debugName: "primaryActions" }] : []));
    /**
     * List of secondary actions.
     */
    secondaryActions = input(...(ngDevMode ? [undefined, { debugName: "secondaryActions" }] : []));
    /**
     * A param that will be passed to the `action` in the primary/secondary actions.
     * This allows to re-use the same primary/secondary action arrays across rows
     * in a table.
     */
    actionParam = input(...(ngDevMode ? [undefined, { debugName: "actionParam" }] : []));
    /**
     * Selection of view type as 'collapsible', 'expanded' or 'mobile'.
     *
     * @defaultValue 'expanded'
     */
    viewType = input('expanded', ...(ngDevMode ? [{ debugName: "viewType" }] : []));
    /**
     * Toggle icon aria-label, required for a11y
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_CONTENT_ACTION_BAR.TOGGLE:Toggle`)
     * ```
     */
    toggleItemLabel = input(t(() => $localize `:@@SI_CONTENT_ACTION_BAR.TOGGLE:Toggle`), ...(ngDevMode ? [{ debugName: "toggleItemLabel" }] : []));
    /**
     * Option to remove all icons from dropdown menus of the content action bar.
     *
     * Some apps provide only few actions with icons, located in the set of primary actions.
     * The icons are visible in the `collapsible` and `expanded` view type. On reduced space,
     * primary actions are relocated in the same dropdown menu as the secondary actions. The
     * dropdown menu can look unbalanced, if a large number of secondary actions without
     * icons are presented with few actions with icons. This option balances the look and feel
     * by removing all icons from actions in the dropdown menu.
     *
     * @defaultValue false
     */
    preventIconsInDropdownMenus = input(false, { ...(ngDevMode ? { debugName: "preventIconsInDropdownMenus" } : {}), transform: booleanAttribute });
    /**
     * Disables the whole content-action-bar.
     *
     * @defaultValue false
     */
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
    expandElement = viewChild('expandElement', { ...(ngDevMode ? { debugName: "expandElement" } : {}), read: ElementRef });
    menuBarElement = viewChild(CdkMenuBar, { ...(ngDevMode ? { debugName: "menuBarElement" } : {}), read: ElementRef });
    mobileActions = computed(() => {
        const primaryActions = this.primaryActions();
        const secondaryActions = this.secondaryActions();
        const preventIcons = this.preventIconsInDropdownMenus();
        let actions = [];
        if (primaryActions?.length && secondaryActions?.length) {
            actions = [...primaryActions, { title: '-' }, ...secondaryActions];
        }
        else if (primaryActions?.length) {
            actions = primaryActions;
        }
        else if (secondaryActions?.length) {
            actions = secondaryActions;
        }
        if (preventIcons) {
            actions = actions.map(action => ({
                ...action,
                icon: undefined
            }));
        }
        return actions;
    }, ...(ngDevMode ? [{ debugName: "mobileActions" }] : []));
    secondaryActionsInternal = computed(() => {
        let secondaryActions = this.secondaryActions();
        if (this.preventIconsInDropdownMenus()) {
            secondaryActions = secondaryActions?.map(action => ({
                ...action,
                icon: undefined
            }));
        }
        return secondaryActions;
    }, ...(ngDevMode ? [{ debugName: "secondaryActionsInternal" }] : []));
    icons = addIcons({ elementCancel, elementOptionsVertical });
    expanded = linkedSignal(() => this.viewType() === 'expanded', ...(ngDevMode ? [{ debugName: "expanded" }] : []));
    parentElement;
    elementRef = inject(ElementRef);
    menuActionService = inject(SiMenuActionService, { optional: true });
    ngAfterViewInit() {
        setTimeout(() => {
            if (this.parentElement !== this.elementRef.nativeElement.parentElement) {
                this.parentElement = this.elementRef.nativeElement.parentElement;
            }
        });
    }
    expand() {
        this.expanded.set(true);
        setTimeout(() => this.menuBarElement()?.nativeElement.focus());
    }
    collapse() {
        this.expanded.set(false);
        setTimeout(() => this.expandElement()?.nativeElement.focus());
    }
    isNewItemStyle(item) {
        return 'label' in item;
    }
    runAction(item) {
        if (typeof item.action === 'function') {
            item.action(this.actionParam(), item); // typescript cannot level down the item type properly
        }
        if (typeof item.action === 'string') {
            this.menuActionService?.actionTriggered(item, this.actionParam());
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiContentActionBarComponent, isStandalone: true, selector: "si-content-action-bar", inputs: { primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, toggleItemLabel: { classPropertyName: "toggleItemLabel", publicName: "toggleItemLabel", isSignal: true, isRequired: false, transformFunction: null }, preventIconsInDropdownMenus: { classPropertyName: "preventIconsInDropdownMenus", publicName: "preventIconsInDropdownMenus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "viewType()" } }, viewQueries: [{ propertyName: "expandElement", first: true, predicate: ["expandElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "menuBarElement", first: true, predicate: CdkMenuBar, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (viewType() !== 'mobile' && primaryActions()?.length) {\n  <div siAutoCollapsableList class=\"d-flex\" [siAutoCollapsableListContainerElement]=\"parentElement\">\n    @if (viewType() === 'collapsible' && !expanded() && collapsibleListItem.canBeVisible()) {\n      <button\n        #expandElement\n        si-content-action-bar-toggle\n        type=\"button\"\n        [icon]=\"icons.elementOptionsVertical\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        (click)=\"expand()\"\n      ></button>\n    }\n    <si-menu-bar\n      #collapsibleListItem=\"siAutoCollapsableListItem\"\n      siAutoCollapsableListItem\n      [forceHide]=\"!expanded()\"\n      [disabled]=\"disabled()\"\n    >\n      <!-- ?? syntax is not working for track -->\n      @for (primaryAction of primaryActions(); track primaryAction.id ? primaryAction.id : $index) {\n        @if (isNewItemStyle(primaryAction)) {\n          @switch (primaryAction.type) {\n            @case ('action') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('checkbox') {\n              <button\n                type=\"button\"\n                si-menu-item-checkbox\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [checked]=\"primaryAction.checked\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [class.active]=\"primaryAction.checked\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('group') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [cdkMenuTriggerFor]=\"groupSubmenu\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #groupSubmenu>\n                <si-menu-factory [items]=\"primaryAction.children\" />\n              </ng-template>\n            }\n            @case ('router-link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [routerLink]=\"primaryAction.routerLink\"\n                [queryParams]=\"primaryAction.extras?.queryParams\"\n                [queryParamsHandling]=\"primaryAction.extras?.queryParamsHandling\"\n                [fragment]=\"primaryAction.extras?.fragment\"\n                [state]=\"primaryAction.extras?.state\"\n                [relativeTo]=\"primaryAction.extras?.relativeTo\"\n                [preserveFragment]=\"primaryAction.extras?.preserveFragment\"\n                [skipLocationChange]=\"primaryAction.extras?.skipLocationChange\"\n                [replaceUrl]=\"primaryAction.extras?.replaceUrl\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n            @case ('link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [href]=\"primaryAction.href\"\n                [target]=\"primaryAction.target\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n          }\n        } @else {\n          @if (primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n              [cdkMenuTriggerFor]=\"primaryAction.items ? mainItemSubmenu : null\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #mainItemSubmenu>\n                <si-menu-factory [items]=\"primaryAction.items\" />\n              </ng-template>\n            </a>\n          } @else {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n            </a>\n          }\n        }\n      }\n      @if (secondaryActions()?.length) {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementOptionsVertical\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [disabled]=\"disabled()\"\n        ></button>\n      }\n      @if (viewType() === 'collapsible') {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementCancel\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [disabled]=\"disabled()\"\n          (cdkMenuItemTriggered)=\"collapse()\"\n        >\n        </button>\n      }\n    </si-menu-bar>\n    <button\n      si-content-action-bar-toggle\n      siAutoCollapsableListOverflowItem\n      type=\"button\"\n      [icon]=\"icons.elementOptionsVertical\"\n      [cdkMenuTriggerFor]=\"mobile\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"toggleItemLabel() | translate\"\n    >\n    </button>\n  </div>\n}\n\n@if (viewType() === 'mobile' || !primaryActions()?.length) {\n  <button\n    si-content-action-bar-toggle\n    type=\"button\"\n    [icon]=\"icons.elementOptionsVertical\"\n    [cdkMenuTriggerFor]=\"mobile\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"toggleItemLabel() | translate\"\n  >\n  </button>\n}\n\n<ng-template #secondaryActionsMenu>\n  <si-menu-factory [items]=\"secondaryActionsInternal()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n\n<ng-template #mobile>\n  <si-menu-factory [items]=\"mobileActions()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n", styles: [":host.mobile [siAutoCollapsableList]{inline-size:40px}div>[si-content-action-bar-toggle]{inline-size:40px;justify-content:center;border-radius:var(--element-button-radius)}si-menu-bar>*:first-child{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}si-menu-bar>*:last-child{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}\n"], dependencies: [{ kind: "ngmodule", type: SiMenuModule }, { kind: "directive", type: i1.SiMenuBarDirective, selector: "si-menu-bar", inputs: ["disabled"] }, { kind: "component", type: i1.SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "component", type: i1.SiMenuItemCheckboxComponent, selector: "si-menu-item-checkbox, button[si-menu-item-checkbox]" }, { kind: "component", type: i1.SiMenuItemComponent, selector: "si-menu-item, a[si-menu-item], button[si-menu-item]" }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: i2.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "ngmodule", type: SiAutoCollapsableListModule }, { kind: "directive", type: i3.SiAutoCollapsableListDirective, selector: "[siAutoCollapsableList]", inputs: ["siAutoCollapsableList", "gap", "siAutoCollapsableListContainerElement"], exportAs: ["siAutoCollapsableList"] }, { kind: "directive", type: i3.SiAutoCollapsableListItemDirective, selector: "[siAutoCollapsableListItem]", inputs: ["forceHide"], exportAs: ["siAutoCollapsableListItem"] }, { kind: "directive", type: i3.SiAutoCollapsableListOverflowItemDirective, selector: "[siAutoCollapsableListOverflowItem]", exportAs: ["siAutoCollapsableListOverflowItem"] }, { kind: "ngmodule", type: SiLinkModule }, { kind: "directive", type: i4.SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiContentActionBarToggleComponent, selector: "[si-content-action-bar-toggle]", inputs: ["icon"] }, { kind: "directive", type: SiTooltipDirective, selector: "[siTooltip]", inputs: ["siTooltip", "placement", "isDisabled", "tooltipContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-content-action-bar', imports: [
                        SiMenuModule,
                        CdkMenuModule,
                        SiAutoCollapsableListModule,
                        SiTranslatePipe,
                        SiLinkModule,
                        SiContentActionBarToggleComponent,
                        SiTooltipDirective,
                        RouterLink
                    ], host: {
                        '[class]': 'viewType()'
                    }, template: "@if (viewType() !== 'mobile' && primaryActions()?.length) {\n  <div siAutoCollapsableList class=\"d-flex\" [siAutoCollapsableListContainerElement]=\"parentElement\">\n    @if (viewType() === 'collapsible' && !expanded() && collapsibleListItem.canBeVisible()) {\n      <button\n        #expandElement\n        si-content-action-bar-toggle\n        type=\"button\"\n        [icon]=\"icons.elementOptionsVertical\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        (click)=\"expand()\"\n      ></button>\n    }\n    <si-menu-bar\n      #collapsibleListItem=\"siAutoCollapsableListItem\"\n      siAutoCollapsableListItem\n      [forceHide]=\"!expanded()\"\n      [disabled]=\"disabled()\"\n    >\n      <!-- ?? syntax is not working for track -->\n      @for (primaryAction of primaryActions(); track primaryAction.id ? primaryAction.id : $index) {\n        @if (isNewItemStyle(primaryAction)) {\n          @switch (primaryAction.type) {\n            @case ('action') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('checkbox') {\n              <button\n                type=\"button\"\n                si-menu-item-checkbox\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [checked]=\"primaryAction.checked\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [class.active]=\"primaryAction.checked\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('group') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [cdkMenuTriggerFor]=\"groupSubmenu\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #groupSubmenu>\n                <si-menu-factory [items]=\"primaryAction.children\" />\n              </ng-template>\n            }\n            @case ('router-link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [routerLink]=\"primaryAction.routerLink\"\n                [queryParams]=\"primaryAction.extras?.queryParams\"\n                [queryParamsHandling]=\"primaryAction.extras?.queryParamsHandling\"\n                [fragment]=\"primaryAction.extras?.fragment\"\n                [state]=\"primaryAction.extras?.state\"\n                [relativeTo]=\"primaryAction.extras?.relativeTo\"\n                [preserveFragment]=\"primaryAction.extras?.preserveFragment\"\n                [skipLocationChange]=\"primaryAction.extras?.skipLocationChange\"\n                [replaceUrl]=\"primaryAction.extras?.replaceUrl\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n            @case ('link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.aria-label]=\"primaryAction.label | translate\"\n                [siTooltip]=\"primaryAction.iconOnly ? (primaryAction.label | translate) : ''\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [href]=\"primaryAction.href\"\n                [target]=\"primaryAction.target\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n          }\n        } @else {\n          @if (primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n              [cdkMenuTriggerFor]=\"primaryAction.items ? mainItemSubmenu : null\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #mainItemSubmenu>\n                <si-menu-factory [items]=\"primaryAction.items\" />\n              </ng-template>\n            </a>\n          } @else {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n            </a>\n          }\n        }\n      }\n      @if (secondaryActions()?.length) {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementOptionsVertical\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [disabled]=\"disabled()\"\n        ></button>\n      }\n      @if (viewType() === 'collapsible') {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementCancel\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [disabled]=\"disabled()\"\n          (cdkMenuItemTriggered)=\"collapse()\"\n        >\n        </button>\n      }\n    </si-menu-bar>\n    <button\n      si-content-action-bar-toggle\n      siAutoCollapsableListOverflowItem\n      type=\"button\"\n      [icon]=\"icons.elementOptionsVertical\"\n      [cdkMenuTriggerFor]=\"mobile\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"toggleItemLabel() | translate\"\n    >\n    </button>\n  </div>\n}\n\n@if (viewType() === 'mobile' || !primaryActions()?.length) {\n  <button\n    si-content-action-bar-toggle\n    type=\"button\"\n    [icon]=\"icons.elementOptionsVertical\"\n    [cdkMenuTriggerFor]=\"mobile\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"toggleItemLabel() | translate\"\n  >\n  </button>\n}\n\n<ng-template #secondaryActionsMenu>\n  <si-menu-factory [items]=\"secondaryActionsInternal()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n\n<ng-template #mobile>\n  <si-menu-factory [items]=\"mobileActions()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n", styles: [":host.mobile [siAutoCollapsableList]{inline-size:40px}div>[si-content-action-bar-toggle]{inline-size:40px;justify-content:center;border-radius:var(--element-button-radius)}si-menu-bar>*:first-child{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}si-menu-bar>*:last-child{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}\n"] }]
        }], propDecorators: { primaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryActions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], actionParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionParam", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], toggleItemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleItemLabel", required: false }] }], preventIconsInDropdownMenus: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventIconsInDropdownMenus", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expandElement: [{ type: i0.ViewChild, args: ['expandElement', { ...{ read: ElementRef }, isSignal: true }] }], menuBarElement: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenuBar), { ...{
                            read: ElementRef
                        }, isSignal: true }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiContentActionBarModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarModule, imports: [SiContentActionBarComponent], exports: [SiContentActionBarComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarModule, imports: [SiContentActionBarComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiContentActionBarModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [SiContentActionBarComponent],
                    exports: [SiContentActionBarComponent]
                }]
        }] });

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

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

export { SiContentActionBarComponent, SiContentActionBarModule };
//# sourceMappingURL=siemens-element-ng-content-action-bar.mjs.map
