import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, input, booleanAttribute, viewChild, computed, Component, output, signal, ElementRef, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { elementSoundOn, elementSoundMute, elementDown2 } from '@siemens/element-icons';
import { STATUS_ICON, BlinkService, TextMeasureService } from '@siemens/element-ng/common';
import { STATUS_ICON_CONFIG, SiIconComponent, addIcons } from '@siemens/element-ng/icon';
import { ResizeObserverService, SiResizeObserverDirective } from '@siemens/element-ng/resize-observer';
import { SiTranslatePipe, t, injectSiTranslateService } from '@siemens/element-translate-ng/translate';
import { first } from 'rxjs/operators';

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiStatusBarItemComponent {
    statusIcons = inject(STATUS_ICON_CONFIG);
    status = input(...(ngDevMode ? [undefined, { debugName: "status" }] : []));
    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
    heading = input.required(...(ngDevMode ? [{ debugName: "heading" }] : []));
    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
    /** @defaultValue false */
    blink = input(false, { ...(ngDevMode ? { debugName: "blink" } : {}), transform: booleanAttribute });
    /** @defaultValue false */
    valueOnly = input(false, { ...(ngDevMode ? { debugName: "valueOnly" } : {}), transform: booleanAttribute });
    /** @defaultValue false */
    clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : {}), transform: booleanAttribute });
    bg = viewChild.required('bg');
    contrastFix = computed(() => {
        return !!this.color() && this.blink() && this.calculateContrastFix();
    }, ...(ngDevMode ? [{ debugName: "contrastFix" }] : []));
    statusIcon = computed(() => {
        const status = this.status();
        return status ? this.statusIcons[status] : undefined;
    }, ...(ngDevMode ? [{ debugName: "statusIcon" }] : []));
    background = computed(() => this.blink() && this.status() !== 'success' ? (this.statusIcon()?.background ?? '') : '', ...(ngDevMode ? [{ debugName: "background" }] : []));
    calculateContrastFix() {
        // see https://www.w3.org/TR/AERT/#color-contrast
        const rgb = getComputedStyle(this.bg().nativeElement)
            .backgroundColor?.match(/\d+/g)
            ?.map(v => +v);
        return !!rgb && Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000) <= 128;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiStatusBarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiStatusBarItemComponent, isStandalone: true, selector: "si-status-bar-item", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, blink: { classPropertyName: "blink", publicName: "blink", isSignal: true, isRequired: false, transformFunction: null }, valueOnly: { classPropertyName: "valueOnly", publicName: "valueOnly", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.clickable": "clickable()" } }, viewQueries: [{ propertyName: "bg", first: true, predicate: ["bg"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"status-item rounded-2 focus-inside d-flex align-items-center\"\n  [class.text-muted]=\"!value()\"\n  [class.blink]=\"blink() && value()\"\n  [attr.tabindex]=\"clickable() ? '0' : ''\"\n  [attr.aria-disabled]=\"!value()\"\n>\n  <div\n    #bg\n    role=\"none\"\n    class=\"bg focus-sub-inside\"\n    [class]=\"background()\"\n    [class.custom-color]=\"color()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [class.d-none]=\"!value()\"\n    [style.background-color]=\"blink() && color() ? color() : null\"\n  ></div>\n  @let icon = statusIcon();\n  @if (!icon) {\n    <div\n      class=\"color-bar me-3 mt-1 mb-1\"\n      [style.background-color]=\"value() && color() ? color() : null\"\n    ></div>\n  } @else {\n    <span class=\"indicator icon me-4 icon-stack\">\n      <si-icon [class]=\"value() ? icon.color : 'indicator-disabled'\" [icon]=\"icon.icon\" />\n      <si-icon [class]=\"value() ? icon.stackedColor : 'text-inverse'\" [icon]=\"icon.stacked\" />\n    </span>\n  }\n  <div class=\"overflow-hidden\">\n    @if (value() !== undefined) {\n      <div class=\"item-value si-h5 text-truncate\">{{ value().toString() | translate }}</div>\n    }\n    @if (!valueOnly()) {\n      <div class=\"item-title text-truncate\">{{ heading() | translate }}</div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:relative;padding-inline-end:4px;block-size:48px}:host.compact{block-size:36px}:host.compact .status-item{padding-block:4px}:host.compact .item-title{margin-block-start:-2px}:host.clickable:hover .status-item{background-color:var(--element-base-0)!important}:host.clickable:hover .bg{display:none!important}:host ::ng-deep .indicator-disabled{color:var(--element-ui-3)}.status-item{position:relative;padding-block:8px;padding-inline:4px 8px;min-inline-size:100px;color:var(--element-text-primary);white-space:nowrap}.status-item>*{pointer-events:none}.bg{position:absolute;inset:0;border-radius:var(--element-radius-2);pointer-events:none}.bg.custom-color{opacity:.5}.bg.custom-color.contrast-fix{opacity:.25}.item-title,.item-value{position:relative}.item-title:before,.item-value:before{content:\"\\200b\"}.color-bar{align-self:stretch;min-inline-size:4px;border-radius:2px;background:var(--element-ui-4)}.item-title{margin-block-start:2px;line-height:1rem}.item-value{line-height:1}\n"], dependencies: [{ 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: SiStatusBarItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-status-bar-item', imports: [SiIconComponent, SiTranslatePipe], host: {
                        '[class.clickable]': 'clickable()'
                    }, template: "<div\n  class=\"status-item rounded-2 focus-inside d-flex align-items-center\"\n  [class.text-muted]=\"!value()\"\n  [class.blink]=\"blink() && value()\"\n  [attr.tabindex]=\"clickable() ? '0' : ''\"\n  [attr.aria-disabled]=\"!value()\"\n>\n  <div\n    #bg\n    role=\"none\"\n    class=\"bg focus-sub-inside\"\n    [class]=\"background()\"\n    [class.custom-color]=\"color()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [class.d-none]=\"!value()\"\n    [style.background-color]=\"blink() && color() ? color() : null\"\n  ></div>\n  @let icon = statusIcon();\n  @if (!icon) {\n    <div\n      class=\"color-bar me-3 mt-1 mb-1\"\n      [style.background-color]=\"value() && color() ? color() : null\"\n    ></div>\n  } @else {\n    <span class=\"indicator icon me-4 icon-stack\">\n      <si-icon [class]=\"value() ? icon.color : 'indicator-disabled'\" [icon]=\"icon.icon\" />\n      <si-icon [class]=\"value() ? icon.stackedColor : 'text-inverse'\" [icon]=\"icon.stacked\" />\n    </span>\n  }\n  <div class=\"overflow-hidden\">\n    @if (value() !== undefined) {\n      <div class=\"item-value si-h5 text-truncate\">{{ value().toString() | translate }}</div>\n    }\n    @if (!valueOnly()) {\n      <div class=\"item-title text-truncate\">{{ heading() | translate }}</div>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:relative;padding-inline-end:4px;block-size:48px}:host.compact{block-size:36px}:host.compact .status-item{padding-block:4px}:host.compact .item-title{margin-block-start:-2px}:host.clickable:hover .status-item{background-color:var(--element-base-0)!important}:host.clickable:hover .bg{display:none!important}:host ::ng-deep .indicator-disabled{color:var(--element-ui-3)}.status-item{position:relative;padding-block:8px;padding-inline:4px 8px;min-inline-size:100px;color:var(--element-text-primary);white-space:nowrap}.status-item>*{pointer-events:none}.bg{position:absolute;inset:0;border-radius:var(--element-radius-2);pointer-events:none}.bg.custom-color{opacity:.5}.bg.custom-color.contrast-fix{opacity:.25}.item-title,.item-value{position:relative}.item-title:before,.item-value:before{content:\"\\200b\"}.color-bar{align-self:stretch;min-inline-size:4px;border-radius:2px;background:var(--element-ui-4)}.item-title{margin-block-start:2px;line-height:1rem}.item-value{line-height:1}\n"] }]
        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], blink: [{ type: i0.Input, args: [{ isSignal: true, alias: "blink", required: false }] }], valueOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueOnly", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], bg: [{ type: i0.ViewChild, args: ['bg', { isSignal: true }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
// this is a function because Angular compiler exports arrows for no good reason
// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
function itemSortFunction(a, b) {
    return a.status && b.status ? STATUS_ICON[a.status].severity - STATUS_ICON[b.status].severity : 0;
}
let idCounter = 1;
/**
 * The status bar is the main component within an application to inform users at all times
 * about important status information.
 */
class SiStatusBarComponent {
    static itemMinWidth = 100;
    static itemMaxWidth = 152;
    static itemSpacing = 4;
    static itemPaddingX = 44; // padding + icon size + icon margin
    static itemPaddingXdeprecated = 20; // padding + color bar
    static muteButtonWidth = 48;
    /**
     * Array of status bar items.
     */
    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
    /**
     * When true, items with a value have a blinking background
     *
     * @defaultValue false
     */
    blink = input(false, { ...(ngDevMode ? { debugName: "blink" } : {}), transform: booleanAttribute });
    /**
     * State of the mute button. Set to `undefined` for no button.
     */
    muteButton = input(...(ngDevMode ? [undefined, { debugName: "muteButton" }] : []));
    /**
     * Text/translation key on mute button for screen reader
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_STATUS_BAR.MUTE:Mute/unmute`)
     * ```
     */
    muteButtonText = input(t(() => $localize `:@@SI_STATUS_BAR.MUTE:Mute/unmute`), ...(ngDevMode ? [{ debugName: "muteButtonText" }] : []));
    /**
     * Text/translation key for "All OK" status in mobile
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_STATUS_BAR.ALL_OK:All OK`)
     * ```
     */
    allOkText = input(t(() => $localize `:@@SI_STATUS_BAR.ALL_OK:All OK`), ...(ngDevMode ? [{ debugName: "allOkText" }] : []));
    /**
     * compact mode
     *
     * @defaultValue false
     */
    compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : {}), transform: booleanAttribute });
    /**
     * blink pulse generator for synchronized blinking with other components
     */
    blinkPulse = input(...(ngDevMode ? [undefined, { debugName: "blinkPulse" }] : []));
    /**
     * Text for the navbar expand button. Required for a11y
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_STATUS_BAR.EXPAND:Expand`)
     * ```
     */
    expandButtonText = input(t(() => $localize `:@@SI_STATUS_BAR.EXPAND:Expand`), ...(ngDevMode ? [{ debugName: "expandButtonText" }] : []));
    /**
     * Text for the navbar collapse button. Required for a11y
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_STATUS_BAR.COLLAPSE:Collapse`)
     * ```
     */
    collapseButtonText = input(t(() => $localize `:@@SI_STATUS_BAR.COLLAPSE:Collapse`), ...(ngDevMode ? [{ debugName: "collapseButtonText" }] : []));
    /**
     * Emitted when the mute toggle button is clicked
     */
    muteToggle = output();
    theBar = viewChild.required('thebar');
    content = viewChild.required('content');
    custom = viewChild.required('custom');
    responsiveItems = signal([], ...(ngDevMode ? [{ debugName: "responsiveItems" }] : []));
    responsiveMode = 0;
    expanded = signal(0, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
    placeholderHeight = signal(0, ...(ngDevMode ? [{ debugName: "placeholderHeight" }] : []));
    contentHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "contentHeight" }] : []));
    blinkOnOff = signal(undefined, ...(ngDevMode ? [{ debugName: "blinkOnOff" }] : []));
    icons = addIcons({ elementDown2, elementSoundMute, elementSoundOn });
    statusId = `__si-status-bar-${idCounter++}`;
    timer;
    blinkSubs;
    element = inject(ElementRef);
    blinkService = inject(BlinkService);
    translateService = injectSiTranslateService();
    resizeObserver = inject(ResizeObserverService);
    measureService = inject(TextMeasureService);
    constructor() {
        this.resizeObserver
            .observe(this.element.nativeElement, 100, true)
            .pipe(takeUntilDestroyed())
            .subscribe(() => this.resizeHandler());
        this.translateService.translationChange
            .pipe(takeUntilDestroyed())
            .subscribe(() => this.resizeHandler());
    }
    ngOnChanges(changes) {
        if (this.blinkService && changes.blink) {
            this.blinkSubs?.unsubscribe();
            if (this.blink()) {
                const pulse = this.blinkPulse() ?? this.blinkService.pulse$;
                this.blinkSubs = pulse.subscribe(onOff => {
                    this.blinkOnOff.set(onOff);
                });
            }
        }
        this.resizeHandler();
    }
    ngDoCheck() {
        if (this.responsiveMode) {
            this.calcResponsiveItems();
        }
    }
    ngOnDestroy() {
        this.blinkSubs?.unsubscribe();
    }
    onItemClicked(item) {
        if (item.action) {
            item.action(item);
        }
    }
    toggleExpand() {
        clearTimeout(this.timer);
        if (!this.expanded()) {
            this.expanded.set(2);
            this.placeholderHeight.set(this.theBar().nativeElement.offsetHeight);
            this.contentHeight.set(0);
            this.timer = window.setTimeout(() => {
                this.contentHeight.set(this.content().nativeElement.scrollHeight);
                window.setTimeout(() => {
                    this.contentHeight.set(undefined);
                }, 500);
            }, 10);
        }
        else {
            this.contentHeight.set(this.content().nativeElement.scrollHeight);
            this.expanded.set(1);
            window.setTimeout(() => {
                this.contentHeight.set(0);
                window.setTimeout(() => {
                    this.placeholderHeight.set(0);
                    this.expanded.set(0);
                }, 500);
            }, 10);
        }
    }
    resizeHandler() {
        const size = this.element.nativeElement.clientWidth;
        const muteWidth = this.muteButton() !== undefined ? SiStatusBarComponent.muteButtonWidth : 0;
        const customWidth = this.custom().nativeElement.scrollWidth ?? 0;
        const minWidth = this.items().length * (SiStatusBarComponent.itemMinWidth + SiStatusBarComponent.itemSpacing) +
            SiStatusBarComponent.itemSpacing +
            muteWidth +
            customWidth;
        if (size < minWidth) {
            this.setResponsiveMode(true);
        }
        else if (this.items().length) {
            this.calculateRequiredWidth(muteWidth, customWidth);
        }
    }
    setResponsiveMode(responsive) {
        if (responsive) {
            const size = this.element.nativeElement.clientWidth;
            this.responsiveMode = Math.max(Math.floor(size / SiStatusBarComponent.itemMaxWidth) - 1, 2);
        }
        else {
            this.responsiveMode = 0;
        }
        if (this.responsiveMode) {
            this.contentHeight.set(this.expanded() ? this.content().nativeElement.scrollHeight : 0);
        }
        else {
            this.expanded.set(0);
            this.placeholderHeight.set(0);
            this.contentHeight.set(undefined);
        }
    }
    calcResponsiveItems() {
        const activeItems = this.items()
            .filter(item => item.value)
            .sort(itemSortFunction);
        if (activeItems.length > this.responsiveMode) {
            activeItems[this.responsiveMode - 1] = {
                status: activeItems[this.responsiveMode - 1].status,
                color: activeItems[this.responsiveMode - 1].color,
                value: activeItems.length - this.responsiveMode + 1 + '+',
                title: '',
                action: () => this.toggleExpand(),
                isSpecial: true
            };
            activeItems.length = this.responsiveMode;
        }
        else if (!activeItems.length) {
            activeItems.push({
                status: 'success',
                title: '',
                value: this.allOkText(),
                isSpecial: true
            });
        }
        if (activeItems.length === this.responsiveMode) {
            activeItems[activeItems.length - 1].mutePadding = true;
        }
        this.responsiveItems.set(activeItems);
    }
    calculateRequiredWidth(muteWidth, customWidth) {
        const keys = [];
        for (const item of this.items()) {
            keys.push(item.title, item.value.toString());
        }
        this.translateService
            .translateAsync(keys)
            .pipe(first())
            .subscribe(translations => {
            const size = this.element.nativeElement.clientWidth;
            const requiredWidth = this.items().reduce((acc, item) => {
                const titleWidth = this.measureService.measureText(translations[item.title]);
                const valueWidth = this.measureService.measureText(translations[item.value], undefined, { fontWeight: 'bold' });
                const textWidth = Math.max(titleWidth, valueWidth);
                const itemWidth = Math.max(SiStatusBarComponent.itemMinWidth, textWidth +
                    (item.color
                        ? SiStatusBarComponent.itemPaddingXdeprecated
                        : SiStatusBarComponent.itemPaddingX)) + SiStatusBarComponent.itemSpacing;
                return acc + itemWidth;
            }, muteWidth + customWidth + SiStatusBarComponent.itemSpacing);
            this.setResponsiveMode(size < requiredWidth);
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiStatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiStatusBarComponent, isStandalone: true, selector: "si-status-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, blink: { classPropertyName: "blink", publicName: "blink", isSignal: true, isRequired: false, transformFunction: null }, muteButton: { classPropertyName: "muteButton", publicName: "muteButton", isSignal: true, isRequired: false, transformFunction: null }, muteButtonText: { classPropertyName: "muteButtonText", publicName: "muteButtonText", isSignal: true, isRequired: false, transformFunction: null }, allOkText: { classPropertyName: "allOkText", publicName: "allOkText", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, blinkPulse: { classPropertyName: "blinkPulse", publicName: "blinkPulse", isSignal: true, isRequired: false, transformFunction: null }, expandButtonText: { classPropertyName: "expandButtonText", publicName: "expandButtonText", isSignal: true, isRequired: false, transformFunction: null }, collapseButtonText: { classPropertyName: "collapseButtonText", publicName: "collapseButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { muteToggle: "muteToggle" }, viewQueries: [{ propertyName: "theBar", first: true, predicate: ["thebar"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "custom", first: true, predicate: ["custom"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"expand-placeholder\"\n  [class.expanded]=\"expanded()\"\n  [style.height.px]=\"placeholderHeight()\"\n></div>\n<div\n  #thebar\n  aria-busy=\"true\"\n  [class]=\"responsiveMode ? `responsive-${responsiveMode}` : ''\"\n  [class.responsive]=\"responsiveMode\"\n  [class.expanded]=\"expanded()\"\n  [class.compact]=\"responsiveMode || compact()\"\n  [class.pulse-off]=\"blinkOnOff() === false\"\n  [class.pulse-on]=\"blinkOnOff()\"\n>\n  <div\n    class=\"status-bar-wrapper rounded-2\"\n    [class.elevation-2]=\"expanded()\"\n    [class.pe-2]=\"muteButton() !== undefined\"\n  >\n    @if (responsiveMode) {\n      <div class=\"align-items-center overflow-hidden\">\n        <div class=\"d-flex flex-fill position-relative\">\n          @for (item of responsiveItems(); track $index) {\n            <si-status-bar-item\n              class=\"bar-item compact\"\n              [value]=\"item.value\"\n              [heading]=\"item.title\"\n              [status]=\"item.status\"\n              [color]=\"item.color\"\n              [blink]=\"item.blink !== false && blink() && !expanded()\"\n              [clickable]=\"!!item.action\"\n              [class.mute-padding]=\"item.mutePadding && muteButton() !== undefined\"\n              [style.flex-basis.%]=\"responsiveMode ? 100 / responsiveMode : null\"\n              [valueOnly]=\"item.isSpecial\"\n              (click)=\"onItemClicked(item)\"\n              (keydown.enter)=\"onItemClicked(item)\"\n            />\n          }\n        </div>\n        @if (muteButton() !== undefined) {\n          <div class=\"mobile-mute\">\n            <ng-container *ngTemplateOutlet=\"muteButtonTemplate\" />\n          </div>\n        }\n      </div>\n    }\n    <div\n      #content\n      class=\"main-content align-items-center overflow-hidden\"\n      [style.max-height.px]=\"contentHeight()\"\n    >\n      @if (responsiveMode) {\n        <div class=\"mobile-spacer\"></div>\n      }\n      <div\n        class=\"d-flex flex-fill position-relative\"\n        [id]=\"statusId\"\n        [class.d-none]=\"responsiveMode && !expanded()\"\n        [class.flex-wrap]=\"responsiveMode\"\n      >\n        @for (item of items(); track $index) {\n          <si-status-bar-item\n            class=\"bar-item\"\n            [class.compact]=\"responsiveMode || compact()\"\n            [value]=\"item.value\"\n            [heading]=\"item.title\"\n            [status]=\"item.status\"\n            [color]=\"item.color\"\n            [blink]=\"item.blink !== false && blink()\"\n            [clickable]=\"!!item.action\"\n            [style.flex-basis.%]=\"responsiveMode ? 100 / responsiveMode : null\"\n            (click)=\"onItemClicked(item)\"\n            (keydown.enter)=\"onItemClicked(item)\"\n          />\n        }\n      </div>\n      <div class=\"custom-content bar-item d-flex\">\n        <div #custom [class.pb-2]=\"responsiveMode && expanded\" (siResizeObserver)=\"resizeHandler()\">\n          <ng-content />\n        </div>\n      </div>\n      @if (muteButton() !== undefined && !responsiveMode) {\n        <ng-container *ngTemplateOutlet=\"muteButtonTemplate\" />\n      }\n    </div>\n  </div>\n  @if (responsiveMode) {\n    <div class=\"d-flex align-items-center justify-content-center\">\n      <a\n        class=\"collapse-expand text-center p-0 focus-force\"\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(expanded() ? collapseButtonText() : expandButtonText()) | translate\"\n        [attr.aria-expanded]=\"!!expanded()\"\n        [attr.aria-controls]=\"statusId\"\n        [class.expanded]=\"expanded() === 2\"\n        (keydown.enter)=\"toggleExpand()\"\n        (click)=\"toggleExpand()\"\n      >\n        <si-icon class=\"icon\" [icon]=\"icons.elementDown2\" />\n      </a>\n    </div>\n  }\n</div>\n\n<ng-template #muteButtonTemplate>\n  <button\n    type=\"button\"\n    class=\"bar-item mute-button btn btn-circle btn-tertiary ms-5\"\n    [attr.aria-label]=\"muteButtonText() | translate\"\n    (click)=\"muteToggle.emit()\"\n  >\n    <si-icon class=\"icon\" [icon]=\"muteButton() ? icons.elementSoundOn : icons.elementSoundMute\" />\n  </button>\n</ng-template>\n", styles: [":host{display:block;position:relative}:host ::ng-deep .blink{transition:color calc(.5s * var(--element-animations-enabled, 1))}:host ::ng-deep .bg{transition:opacity calc(.5s * var(--element-animations-enabled, 1))}.pulse-off ::ng-deep .bg{opacity:.1!important}.status-bar-wrapper{padding-inline:8px;background-color:var(--element-base-1)}.status-bar-wrapper>*{display:flex}.mobile-spacer{margin-block:4px;margin-inline:0;background:var(--element-base-0);block-size:1px}.bar-item{margin-block:8px}.custom-content{margin-inline-start:auto}.clickable{cursor:pointer}.mute-padding{padding-inline-end:44px}.mobile-mute{position:absolute;inset-inline-end:8px}.main-content .mute-button{margin-inline-end:4px}.collapse-expand{background-color:var(--element-base-1);border-radius:0 0 20px 20px;inline-size:40px;cursor:pointer}.collapse-expand.expanded{box-shadow:0 8px 8px var(--element-box-shadow-color-2)}.collapse-expand.expanded si-icon{transform:rotate(180deg)}.collapse-expand si-icon{margin-block-start:0;transition:transform calc(.4s * var(--element-animations-enabled, 1))}.compact .bar-item{margin-block:2px}.responsive si-status-bar-item ::ng-deep .status-item{max-inline-size:unset;position:absolute;inset-block:0;inset-inline:0 4px}.responsive si-status-bar-item.mute-padding ::ng-deep .status-item{inset-inline-end:44px}.responsive.expanded{position:absolute;inset-block-start:0;inset-inline:0;z-index:1028}.responsive .status-bar-wrapper>.main-content{display:block;transition:max-block-size calc(.5s * var(--element-animations-enabled, 1))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiStatusBarItemComponent, selector: "si-status-bar-item", inputs: ["status", "value", "heading", "color", "blink", "valueOnly", "clickable"] }, { kind: "directive", type: SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle", "emitInitial"], outputs: ["siResizeObserver"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiStatusBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-status-bar', imports: [
                        NgTemplateOutlet,
                        SiIconComponent,
                        SiStatusBarItemComponent,
                        SiResizeObserverDirective,
                        SiTranslatePipe
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"expand-placeholder\"\n  [class.expanded]=\"expanded()\"\n  [style.height.px]=\"placeholderHeight()\"\n></div>\n<div\n  #thebar\n  aria-busy=\"true\"\n  [class]=\"responsiveMode ? `responsive-${responsiveMode}` : ''\"\n  [class.responsive]=\"responsiveMode\"\n  [class.expanded]=\"expanded()\"\n  [class.compact]=\"responsiveMode || compact()\"\n  [class.pulse-off]=\"blinkOnOff() === false\"\n  [class.pulse-on]=\"blinkOnOff()\"\n>\n  <div\n    class=\"status-bar-wrapper rounded-2\"\n    [class.elevation-2]=\"expanded()\"\n    [class.pe-2]=\"muteButton() !== undefined\"\n  >\n    @if (responsiveMode) {\n      <div class=\"align-items-center overflow-hidden\">\n        <div class=\"d-flex flex-fill position-relative\">\n          @for (item of responsiveItems(); track $index) {\n            <si-status-bar-item\n              class=\"bar-item compact\"\n              [value]=\"item.value\"\n              [heading]=\"item.title\"\n              [status]=\"item.status\"\n              [color]=\"item.color\"\n              [blink]=\"item.blink !== false && blink() && !expanded()\"\n              [clickable]=\"!!item.action\"\n              [class.mute-padding]=\"item.mutePadding && muteButton() !== undefined\"\n              [style.flex-basis.%]=\"responsiveMode ? 100 / responsiveMode : null\"\n              [valueOnly]=\"item.isSpecial\"\n              (click)=\"onItemClicked(item)\"\n              (keydown.enter)=\"onItemClicked(item)\"\n            />\n          }\n        </div>\n        @if (muteButton() !== undefined) {\n          <div class=\"mobile-mute\">\n            <ng-container *ngTemplateOutlet=\"muteButtonTemplate\" />\n          </div>\n        }\n      </div>\n    }\n    <div\n      #content\n      class=\"main-content align-items-center overflow-hidden\"\n      [style.max-height.px]=\"contentHeight()\"\n    >\n      @if (responsiveMode) {\n        <div class=\"mobile-spacer\"></div>\n      }\n      <div\n        class=\"d-flex flex-fill position-relative\"\n        [id]=\"statusId\"\n        [class.d-none]=\"responsiveMode && !expanded()\"\n        [class.flex-wrap]=\"responsiveMode\"\n      >\n        @for (item of items(); track $index) {\n          <si-status-bar-item\n            class=\"bar-item\"\n            [class.compact]=\"responsiveMode || compact()\"\n            [value]=\"item.value\"\n            [heading]=\"item.title\"\n            [status]=\"item.status\"\n            [color]=\"item.color\"\n            [blink]=\"item.blink !== false && blink()\"\n            [clickable]=\"!!item.action\"\n            [style.flex-basis.%]=\"responsiveMode ? 100 / responsiveMode : null\"\n            (click)=\"onItemClicked(item)\"\n            (keydown.enter)=\"onItemClicked(item)\"\n          />\n        }\n      </div>\n      <div class=\"custom-content bar-item d-flex\">\n        <div #custom [class.pb-2]=\"responsiveMode && expanded\" (siResizeObserver)=\"resizeHandler()\">\n          <ng-content />\n        </div>\n      </div>\n      @if (muteButton() !== undefined && !responsiveMode) {\n        <ng-container *ngTemplateOutlet=\"muteButtonTemplate\" />\n      }\n    </div>\n  </div>\n  @if (responsiveMode) {\n    <div class=\"d-flex align-items-center justify-content-center\">\n      <a\n        class=\"collapse-expand text-center p-0 focus-force\"\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(expanded() ? collapseButtonText() : expandButtonText()) | translate\"\n        [attr.aria-expanded]=\"!!expanded()\"\n        [attr.aria-controls]=\"statusId\"\n        [class.expanded]=\"expanded() === 2\"\n        (keydown.enter)=\"toggleExpand()\"\n        (click)=\"toggleExpand()\"\n      >\n        <si-icon class=\"icon\" [icon]=\"icons.elementDown2\" />\n      </a>\n    </div>\n  }\n</div>\n\n<ng-template #muteButtonTemplate>\n  <button\n    type=\"button\"\n    class=\"bar-item mute-button btn btn-circle btn-tertiary ms-5\"\n    [attr.aria-label]=\"muteButtonText() | translate\"\n    (click)=\"muteToggle.emit()\"\n  >\n    <si-icon class=\"icon\" [icon]=\"muteButton() ? icons.elementSoundOn : icons.elementSoundMute\" />\n  </button>\n</ng-template>\n", styles: [":host{display:block;position:relative}:host ::ng-deep .blink{transition:color calc(.5s * var(--element-animations-enabled, 1))}:host ::ng-deep .bg{transition:opacity calc(.5s * var(--element-animations-enabled, 1))}.pulse-off ::ng-deep .bg{opacity:.1!important}.status-bar-wrapper{padding-inline:8px;background-color:var(--element-base-1)}.status-bar-wrapper>*{display:flex}.mobile-spacer{margin-block:4px;margin-inline:0;background:var(--element-base-0);block-size:1px}.bar-item{margin-block:8px}.custom-content{margin-inline-start:auto}.clickable{cursor:pointer}.mute-padding{padding-inline-end:44px}.mobile-mute{position:absolute;inset-inline-end:8px}.main-content .mute-button{margin-inline-end:4px}.collapse-expand{background-color:var(--element-base-1);border-radius:0 0 20px 20px;inline-size:40px;cursor:pointer}.collapse-expand.expanded{box-shadow:0 8px 8px var(--element-box-shadow-color-2)}.collapse-expand.expanded si-icon{transform:rotate(180deg)}.collapse-expand si-icon{margin-block-start:0;transition:transform calc(.4s * var(--element-animations-enabled, 1))}.compact .bar-item{margin-block:2px}.responsive si-status-bar-item ::ng-deep .status-item{max-inline-size:unset;position:absolute;inset-block:0;inset-inline:0 4px}.responsive si-status-bar-item.mute-padding ::ng-deep .status-item{inset-inline-end:44px}.responsive.expanded{position:absolute;inset-block-start:0;inset-inline:0;z-index:1028}.responsive .status-bar-wrapper>.main-content{display:block;transition:max-block-size calc(.5s * var(--element-animations-enabled, 1))}\n"] }]
        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], blink: [{ type: i0.Input, args: [{ isSignal: true, alias: "blink", required: false }] }], muteButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "muteButton", required: false }] }], muteButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "muteButtonText", required: false }] }], allOkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "allOkText", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], blinkPulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "blinkPulse", required: false }] }], expandButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonText", required: false }] }], collapseButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseButtonText", required: false }] }], muteToggle: [{ type: i0.Output, args: ["muteToggle"] }], theBar: [{ type: i0.ViewChild, args: ['thebar', { isSignal: true }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], custom: [{ type: i0.ViewChild, args: ['custom', { isSignal: true }] }] } });

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

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

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

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

export { SiStatusBarComponent, SiStatusBarItemComponent, SiStatusBarModule };
//# sourceMappingURL=siemens-element-ng-status-bar.mjs.map
