@siemens/element-ng 48.10.0 → 49.0.0-rc.2

package/fesm2022/siemens-element-ng-status-bar.mjs

@@ -1,9 +1,10 @@
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+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, elementSoundOn, elementSoundMute, elementDown2 } from '@siemens/element-ng/icon';
+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';
@@ -14,25 +15,25 @@ import { first } from 'rxjs/operators';
  */
 class SiStatusBarItemComponent {
     statusIcons = inject(STATUS_ICON_CONFIG);
-    status = input();
-    value = input.required();
-    heading = input.required();
-    color = input();
+    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, { transform: booleanAttribute });
+    blink = input(false, { ...(ngDevMode ? { debugName: "blink" } : {}), transform: booleanAttribute });
     /** @defaultValue false */
-    valueOnly = input(false, { transform: booleanAttribute });
+    valueOnly = input(false, { ...(ngDevMode ? { debugName: "valueOnly" } : {}), transform: booleanAttribute });
     /** @defaultValue false */
-    clickable = input(false, { transform: booleanAttribute });
+    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;
-    });
-    background = computed(() => this.blink() && this.status() !== 'success' ? (this.statusIcon()?.background ?? '') : '');
+    }, ...(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)
@@ -40,21 +41,20 @@ class SiStatusBarItemComponent {
             ?.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: "20.0.6", ngImport: i0, type: SiStatusBarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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.custom-color]=\"color()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [ngClass]=\"background()\"\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 [ngClass]=\"value() ? icon.color : 'indicator-disabled'\" [icon]=\"icon.icon\" />\n      <si-icon [ngClass]=\"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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    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: "20.0.6", ngImport: i0, type: SiStatusBarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiStatusBarItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-status-bar-item', imports: [NgClass, SiIconComponent, SiTranslatePipe], host: {
+            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.custom-color]=\"color()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [ngClass]=\"background()\"\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 [ngClass]=\"value() ? icon.color : 'indicator-disabled'\" [icon]=\"icon.icon\" />\n      <si-icon [ngClass]=\"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"] }]
-        }] });
+                    }, 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 - 2025
  * SPDX-License-Identifier: MIT
  */
-/* eslint-disable @angular-eslint/no-conflicting-lifecycle */
 // 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) {
@@ -75,17 +75,17 @@ class SiStatusBarComponent {
     /**
      * Array of status bar items.
      */
-    items = input.required();
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
     /**
      * When true, items with a value have a blinking background
      *
      * @defaultValue false
      */
-    blink = input(false, { transform: booleanAttribute });
+    blink = input(false, { ...(ngDevMode ? { debugName: "blink" } : {}), transform: booleanAttribute });
     /**
      * State of the mute button. Set to `undefined` for no button.
      */
-    muteButton = input();
+    muteButton = input(...(ngDevMode ? [undefined, { debugName: "muteButton" }] : []));
     /**
      * Text/translation key on mute button for screen reader
      *
@@ -94,7 +94,7 @@ class SiStatusBarComponent {
      * t(() => $localize`:@@SI_STATUS_BAR.MUTE:Mute/unmute`)
      * ```
      */
-    muteButtonText = input(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
      *
@@ -103,17 +103,17 @@ class SiStatusBarComponent {
      * t(() => $localize`:@@SI_STATUS_BAR.ALL_OK:All OK`)
      * ```
      */
-    allOkText = input(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, { transform: booleanAttribute });
+    compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : {}), transform: booleanAttribute });
     /**
      * blink pulse generator for synchronized blinking with other components
      */
-    blinkPulse = input();
+    blinkPulse = input(...(ngDevMode ? [undefined, { debugName: "blinkPulse" }] : []));
     /**
      * Text for the navbar expand button. Required for a11y
      *
@@ -122,7 +122,7 @@ class SiStatusBarComponent {
      * t(() => $localize`:@@SI_STATUS_BAR.EXPAND:Expand`)
      * ```
      */
-    expandButtonText = input(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
      *
@@ -131,7 +131,7 @@ class SiStatusBarComponent {
      * t(() => $localize`:@@SI_STATUS_BAR.COLLAPSE:Collapse`)
      * ```
      */
-    collapseButtonText = input(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
      */
@@ -139,12 +139,12 @@ class SiStatusBarComponent {
     theBar = viewChild.required('thebar');
     content = viewChild.required('content');
     custom = viewChild.required('custom');
-    responsiveItems = signal([]);
+    responsiveItems = signal([], ...(ngDevMode ? [{ debugName: "responsiveItems" }] : []));
     responsiveMode = 0;
-    expanded = signal(0);
-    placeholderHeight = signal(0);
-    contentHeight = signal(undefined);
-    blinkOnOff = signal(undefined);
+    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;
@@ -296,31 +296,30 @@ class SiStatusBarComponent {
             this.setResponsiveMode(size < requiredWidth);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiStatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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.responsive]=\"responsiveMode\"\n  [class.expanded]=\"expanded()\"\n  [class.compact]=\"responsiveMode || compact()\"\n  [class.pulse-off]=\"blinkOnOff() === false\"\n  [class.pulse-on]=\"blinkOnOff()\"\n  [ngClass]=\"responsiveMode ? 'responsive-' + responsiveMode : ''\"\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-sm 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:-4px;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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 });
+    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: "20.0.6", ngImport: i0, type: SiStatusBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiStatusBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-status-bar', imports: [
-                        NgClass,
                         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.responsive]=\"responsiveMode\"\n  [class.expanded]=\"expanded()\"\n  [class.compact]=\"responsiveMode || compact()\"\n  [class.pulse-off]=\"blinkOnOff() === false\"\n  [class.pulse-on]=\"blinkOnOff()\"\n  [ngClass]=\"responsiveMode ? 'responsive-' + responsiveMode : ''\"\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-sm 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:-4px;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: () => [] });
+                    ], 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 - 2025
  * SPDX-License-Identifier: MIT
  */
 class SiStatusBarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiStatusBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiStatusBarModule, imports: [SiStatusBarComponent], exports: [SiStatusBarComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiStatusBarModule, imports: [SiStatusBarComponent] });
+    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: "20.0.6", ngImport: i0, type: SiStatusBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiStatusBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiStatusBarComponent],

package/fesm2022/siemens-element-ng-status-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-status-bar.mjs","sources":["../../../../projects/element-ng/status-bar/si-status-bar-item/si-status-bar-item.component.ts","../../../../projects/element-ng/status-bar/si-status-bar-item/si-status-bar-item.component.html","../../../../projects/element-ng/status-bar/si-status-bar.component.ts","../../../../projects/element-ng/status-bar/si-status-bar.component.html","../../../../projects/element-ng/status-bar/si-status-bar.module.ts","../../../../projects/element-ng/status-bar/si-status-bar-item/index.ts","../../../../projects/element-ng/status-bar/index.ts","../../../../projects/element-ng/status-bar/siemens-element-ng-status-bar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n  booleanAttribute,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  viewChild\n} from '@angular/core';\nimport { ExtendedStatusType } from '@siemens/element-ng/common';\nimport { SiIconComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-status-bar-item',\n  imports: [NgClass, SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-status-bar-item.component.html',\n  styleUrl: './si-status-bar-item.component.scss',\n  host: {\n    '[class.clickable]': 'clickable()'\n  }\n})\nexport class SiStatusBarItemComponent {\n  private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n  readonly status = input<ExtendedStatusType>();\n  readonly value = input.required<TranslatableString | number>();\n  readonly heading = input.required<TranslatableString>();\n  readonly color = input<string>();\n  /** @defaultValue false */\n  readonly blink = input(false, { transform: booleanAttribute });\n  /** @defaultValue false */\n  readonly valueOnly = input<boolean | undefined, unknown>(false, { transform: booleanAttribute });\n  /** @defaultValue false */\n  readonly clickable = input(false, { transform: booleanAttribute });\n\n  private readonly bg = viewChild.required<ElementRef>('bg');\n\n  protected readonly contrastFix = computed(() => {\n    return !!this.color() && this.blink() && this.calculateContrastFix();\n  });\n  protected readonly statusIcon = computed(() => {\n    const status = this.status();\n    return status ? this.statusIcons[status] : undefined;\n  });\n  protected readonly background = computed(() =>\n    this.blink() && this.status() !== 'success' ? (this.statusIcon()?.background ?? '') : ''\n  );\n\n  private calculateContrastFix(): boolean {\n    // see https://www.w3.org/TR/AERT/#color-contrast\n    const rgb = getComputedStyle(this.bg().nativeElement)\n      .backgroundColor?.match(/\\d+/g)\n      ?.map(v => +v);\n    return !!rgb && Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000) <= 128;\n  }\n}\n","<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.custom-color]=\"color()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [ngClass]=\"background()\"\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 [ngClass]=\"value() ? icon.color : 'indicator-disabled'\" [icon]=\"icon.icon\" />\n      <si-icon [ngClass]=\"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","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\n/* eslint-disable @angular-eslint/no-conflicting-lifecycle */\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  DoCheck,\n  ElementRef,\n  inject,\n  input,\n  OnChanges,\n  OnDestroy,\n  output,\n  signal,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { BlinkService, STATUS_ICON, TextMeasureService } from '@siemens/element-ng/common';\nimport {\n  addIcons,\n  elementDown2,\n  elementSoundMute,\n  elementSoundOn,\n  SiIconComponent\n} from '@siemens/element-ng/icon';\nimport {\n  ResizeObserverService,\n  SiResizeObserverDirective\n} from '@siemens/element-ng/resize-observer';\nimport {\n  injectSiTranslateService,\n  SiTranslatePipe,\n  t\n} from '@siemens/element-translate-ng/translate';\nimport { Observable, Subscription } from 'rxjs';\nimport { first } from 'rxjs/operators';\n\nimport { SiStatusBarItemComponent } from './si-status-bar-item/si-status-bar-item.component';\nimport { StatusBarItem } from './si-status-bar-item/si-status-bar-item.model';\n\ninterface ExtendedStatusBarItem extends StatusBarItem {\n  isSpecial?: boolean;\n  mutePadding?: boolean;\n}\n\n// this is a function because Angular compiler exports arrows for no good reason\n// eslint-disable-next-line prefer-arrow/prefer-arrow-functions\nfunction itemSortFunction(a: StatusBarItem, b: StatusBarItem): number {\n  return a.status && b.status ? STATUS_ICON[a.status].severity - STATUS_ICON[b.status].severity : 0;\n}\n\nlet idCounter = 1;\n\n/**\n * The status bar is the main component within an application to inform users at all times\n * about important status information.\n */\n@Component({\n  selector: 'si-status-bar',\n  imports: [\n    NgClass,\n    NgTemplateOutlet,\n    SiIconComponent,\n    SiStatusBarItemComponent,\n    SiResizeObserverDirective,\n    SiTranslatePipe\n  ],\n  templateUrl: './si-status-bar.component.html',\n  styleUrl: './si-status-bar.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiStatusBarComponent implements DoCheck, OnDestroy, OnChanges {\n  private static readonly itemMinWidth = 100;\n  private static readonly itemMaxWidth = 152;\n  private static readonly itemSpacing = 4;\n  private static readonly itemPaddingX = 44; // padding + icon size + icon margin\n  private static readonly itemPaddingXdeprecated = 20; // padding + color bar\n  private static readonly muteButtonWidth = 48;\n\n  /**\n   * Array of status bar items.\n   */\n  readonly items = input.required<StatusBarItem[]>();\n  /**\n   * When true, items with a value have a blinking background\n   *\n   * @defaultValue false\n   */\n  readonly blink = input(false, { transform: booleanAttribute });\n  /**\n   * State of the mute button. Set to `undefined` for no button.\n   */\n  readonly muteButton = input<boolean>();\n  /**\n   * Text/translation key on mute button for screen reader\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_STATUS_BAR.MUTE:Mute/unmute`)\n   * ```\n   */\n  readonly muteButtonText = input(t(() => $localize`:@@SI_STATUS_BAR.MUTE:Mute/unmute`));\n  /**\n   * Text/translation key for \"All OK\" status in mobile\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_STATUS_BAR.ALL_OK:All OK`)\n   * ```\n   */\n  readonly allOkText = input(t(() => $localize`:@@SI_STATUS_BAR.ALL_OK:All OK`));\n  /**\n   * compact mode\n   *\n   * @defaultValue false\n   */\n  readonly compact = input(false, { transform: booleanAttribute });\n  /**\n   * blink pulse generator for synchronized blinking with other components\n   */\n  readonly blinkPulse = input<Observable<boolean>>();\n  /**\n   * Text for the navbar expand button. Required for a11y\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_STATUS_BAR.EXPAND:Expand`)\n   * ```\n   */\n  readonly expandButtonText = input(t(() => $localize`:@@SI_STATUS_BAR.EXPAND:Expand`));\n  /**\n   * Text for the navbar collapse button. Required for a11y\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_STATUS_BAR.COLLAPSE:Collapse`)\n   * ```\n   */\n  readonly collapseButtonText = input(t(() => $localize`:@@SI_STATUS_BAR.COLLAPSE:Collapse`));\n\n  /**\n   * Emitted when the mute toggle button is clicked\n   */\n  readonly muteToggle = output();\n\n  private readonly theBar = viewChild.required<ElementRef>('thebar');\n  private readonly content = viewChild.required<ElementRef>('content');\n  private readonly custom = viewChild.required<ElementRef>('custom');\n\n  protected readonly responsiveItems = signal<ExtendedStatusBarItem[]>([]);\n  protected responsiveMode = 0;\n  protected readonly expanded = signal(0);\n  protected readonly placeholderHeight = signal(0);\n  protected readonly contentHeight = signal<number | undefined>(undefined);\n  protected readonly blinkOnOff = signal<boolean | undefined>(undefined);\n  protected readonly icons = addIcons({ elementDown2, elementSoundMute, elementSoundOn });\n  protected statusId = `__si-status-bar-${idCounter++}`;\n\n  private timer: any;\n\n  private blinkSubs?: Subscription;\n\n  private readonly element = inject(ElementRef);\n  private readonly blinkService = inject(BlinkService);\n  private readonly translateService = injectSiTranslateService();\n  private readonly resizeObserver = inject(ResizeObserverService);\n  private readonly measureService = inject(TextMeasureService);\n\n  constructor() {\n    this.resizeObserver\n      .observe(this.element.nativeElement, 100, true)\n      .pipe(takeUntilDestroyed())\n      .subscribe(() => this.resizeHandler());\n    this.translateService.translationChange\n      .pipe(takeUntilDestroyed())\n      .subscribe(() => this.resizeHandler());\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (this.blinkService && changes.blink) {\n      this.blinkSubs?.unsubscribe();\n      if (this.blink()) {\n        const pulse = this.blinkPulse() ?? this.blinkService.pulse$;\n        this.blinkSubs = pulse.subscribe(onOff => {\n          this.blinkOnOff.set(onOff);\n        });\n      }\n    }\n    this.resizeHandler();\n  }\n\n  ngDoCheck(): void {\n    if (this.responsiveMode) {\n      this.calcResponsiveItems();\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.blinkSubs?.unsubscribe();\n  }\n\n  protected onItemClicked(item: StatusBarItem): void {\n    if (item.action) {\n      item.action(item);\n    }\n  }\n\n  protected toggleExpand(): void {\n    clearTimeout(this.timer);\n    if (!this.expanded()) {\n      this.expanded.set(2);\n      this.placeholderHeight.set(this.theBar().nativeElement.offsetHeight);\n      this.contentHeight.set(0);\n\n      this.timer = window.setTimeout(() => {\n        this.contentHeight.set(this.content().nativeElement.scrollHeight);\n        window.setTimeout(() => {\n          this.contentHeight.set(undefined);\n        }, 500);\n      }, 10);\n    } else {\n      this.contentHeight.set(this.content().nativeElement.scrollHeight);\n      this.expanded.set(1);\n\n      window.setTimeout(() => {\n        this.contentHeight.set(0);\n        window.setTimeout(() => {\n          this.placeholderHeight.set(0);\n          this.expanded.set(0);\n        }, 500);\n      }, 10);\n    }\n  }\n\n  protected resizeHandler(): void {\n    const size = this.element.nativeElement.clientWidth;\n    const muteWidth = this.muteButton() !== undefined ? SiStatusBarComponent.muteButtonWidth : 0;\n    const customWidth = this.custom().nativeElement.scrollWidth ?? 0;\n    const minWidth =\n      this.items().length * (SiStatusBarComponent.itemMinWidth + SiStatusBarComponent.itemSpacing) +\n      SiStatusBarComponent.itemSpacing +\n      muteWidth +\n      customWidth;\n    if (size < minWidth) {\n      this.setResponsiveMode(true);\n    } else if (this.items().length) {\n      this.calculateRequiredWidth(muteWidth, customWidth);\n    }\n  }\n\n  private setResponsiveMode(responsive: boolean): void {\n    if (responsive) {\n      const size = this.element.nativeElement.clientWidth;\n      this.responsiveMode = Math.max(Math.floor(size / SiStatusBarComponent.itemMaxWidth) - 1, 2);\n    } else {\n      this.responsiveMode = 0;\n    }\n\n    if (this.responsiveMode) {\n      this.contentHeight.set(this.expanded() ? this.content().nativeElement.scrollHeight : 0);\n    } else {\n      this.expanded.set(0);\n      this.placeholderHeight.set(0);\n      this.contentHeight.set(undefined);\n    }\n  }\n\n  private calcResponsiveItems(): void {\n    const activeItems: ExtendedStatusBarItem[] = this.items()\n      .filter(item => item.value)\n      .sort(itemSortFunction);\n\n    if (activeItems.length > this.responsiveMode) {\n      activeItems[this.responsiveMode - 1] = {\n        status: activeItems[this.responsiveMode - 1].status,\n        color: activeItems[this.responsiveMode - 1].color,\n        value: activeItems.length - this.responsiveMode + 1 + '+',\n        title: '',\n        action: () => this.toggleExpand(),\n        isSpecial: true\n      };\n      activeItems.length = this.responsiveMode;\n    } else if (!activeItems.length) {\n      activeItems.push({\n        status: 'success',\n        title: '',\n        value: this.allOkText(),\n        isSpecial: true\n      });\n    }\n    if (activeItems.length === this.responsiveMode) {\n      activeItems[activeItems.length - 1].mutePadding = true;\n    }\n    this.responsiveItems.set(activeItems);\n  }\n\n  private calculateRequiredWidth(muteWidth: number, customWidth: number): void {\n    const keys: string[] = [];\n    for (const item of this.items()) {\n      keys.push(item.title, item.value.toString());\n    }\n    this.translateService\n      .translateAsync(keys)\n      .pipe(first())\n      .subscribe(translations => {\n        const size = this.element.nativeElement.clientWidth;\n\n        const requiredWidth = this.items().reduce(\n          (acc, item) => {\n            const titleWidth = this.measureService.measureText(translations[item.title]);\n            const valueWidth = this.measureService.measureText(\n              translations[item.value],\n              undefined,\n              { fontWeight: 'bold' }\n            );\n            const textWidth = Math.max(titleWidth, valueWidth);\n            const itemWidth =\n              Math.max(\n                SiStatusBarComponent.itemMinWidth,\n                textWidth +\n                  (item.color\n                    ? SiStatusBarComponent.itemPaddingXdeprecated\n                    : SiStatusBarComponent.itemPaddingX)\n              ) + SiStatusBarComponent.itemSpacing;\n            return acc + itemWidth;\n          },\n          muteWidth + customWidth + SiStatusBarComponent.itemSpacing\n        );\n\n        this.setResponsiveMode(size < requiredWidth);\n      });\n  }\n}\n","<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.responsive]=\"responsiveMode\"\n  [class.expanded]=\"expanded()\"\n  [class.compact]=\"responsiveMode || compact()\"\n  [class.pulse-off]=\"blinkOnOff() === false\"\n  [class.pulse-on]=\"blinkOnOff()\"\n  [ngClass]=\"responsiveMode ? 'responsive-' + responsiveMode : ''\"\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-sm 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","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiStatusBarComponent } from './si-status-bar.component';\n\n@NgModule({\n  imports: [SiStatusBarComponent],\n  exports: [SiStatusBarComponent]\n})\nexport class SiStatusBarModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-status-bar-item.component';\nexport * from './si-status-bar-item.model';\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-status-bar.component';\nexport * from './si-status-bar.module';\nexport * from './si-status-bar-item/index';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-status-bar.mjs","sources":["../../../../projects/element-ng/status-bar/si-status-bar-item/si-status-bar-item.component.ts","../../../../projects/element-ng/status-bar/si-status-bar-item/si-status-bar-item.component.html","../../../../projects/element-ng/status-bar/si-status-bar.component.ts","../../../../projects/element-ng/status-bar/si-status-bar.component.html","../../../../projects/element-ng/status-bar/si-status-bar.module.ts","../../../../projects/element-ng/status-bar/si-status-bar-item/index.ts","../../../../projects/element-ng/status-bar/index.ts","../../../../projects/element-ng/status-bar/siemens-element-ng-status-bar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  viewChild\n} from '@angular/core';\nimport { ExtendedStatusType } from '@siemens/element-ng/common';\nimport { SiIconComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-status-bar-item',\n  imports: [SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-status-bar-item.component.html',\n  styleUrl: './si-status-bar-item.component.scss',\n  host: {\n    '[class.clickable]': 'clickable()'\n  }\n})\nexport class SiStatusBarItemComponent {\n  private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n  readonly status = input<ExtendedStatusType>();\n  readonly value = input.required<TranslatableString | number>();\n  readonly heading = input.required<TranslatableString>();\n  readonly color = input<string>();\n  /** @defaultValue false */\n  readonly blink = input(false, { transform: booleanAttribute });\n  /** @defaultValue false */\n  readonly valueOnly = input<boolean | undefined, unknown>(false, { transform: booleanAttribute });\n  /** @defaultValue false */\n  readonly clickable = input(false, { transform: booleanAttribute });\n\n  private readonly bg = viewChild.required<ElementRef>('bg');\n\n  protected readonly contrastFix = computed(() => {\n    return !!this.color() && this.blink() && this.calculateContrastFix();\n  });\n  protected readonly statusIcon = computed(() => {\n    const status = this.status();\n    return status ? this.statusIcons[status] : undefined;\n  });\n  protected readonly background = computed(() =>\n    this.blink() && this.status() !== 'success' ? (this.statusIcon()?.background ?? '') : ''\n  );\n\n  private calculateContrastFix(): boolean {\n    // see https://www.w3.org/TR/AERT/#color-contrast\n    const rgb = getComputedStyle(this.bg().nativeElement)\n      .backgroundColor?.match(/\\d+/g)\n      ?.map(v => +v);\n    return !!rgb && Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000) <= 128;\n  }\n}\n","<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","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\n\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  DoCheck,\n  ElementRef,\n  inject,\n  input,\n  OnChanges,\n  OnDestroy,\n  output,\n  signal,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { elementDown2, elementSoundMute, elementSoundOn } from '@siemens/element-icons';\nimport { BlinkService, STATUS_ICON, TextMeasureService } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport {\n  ResizeObserverService,\n  SiResizeObserverDirective\n} from '@siemens/element-ng/resize-observer';\nimport {\n  injectSiTranslateService,\n  SiTranslatePipe,\n  t\n} from '@siemens/element-translate-ng/translate';\nimport { Observable, Subscription } from 'rxjs';\nimport { first } from 'rxjs/operators';\n\nimport { SiStatusBarItemComponent } from './si-status-bar-item/si-status-bar-item.component';\nimport { StatusBarItem } from './si-status-bar-item/si-status-bar-item.model';\n\ninterface ExtendedStatusBarItem extends StatusBarItem {\n  isSpecial?: boolean;\n  mutePadding?: boolean;\n}\n\n// this is a function because Angular compiler exports arrows for no good reason\n// eslint-disable-next-line prefer-arrow/prefer-arrow-functions\nfunction itemSortFunction(a: StatusBarItem, b: StatusBarItem): number {\n  return a.status && b.status ? STATUS_ICON[a.status].severity - STATUS_ICON[b.status].severity : 0;\n}\n\nlet idCounter = 1;\n\n/**\n * The status bar is the main component within an application to inform users at all times\n * about important status information.\n */\n@Component({\n  selector: 'si-status-bar',\n  imports: [\n    NgTemplateOutlet,\n    SiIconComponent,\n    SiStatusBarItemComponent,\n    SiResizeObserverDirective,\n    SiTranslatePipe\n  ],\n  templateUrl: './si-status-bar.component.html',\n  styleUrl: './si-status-bar.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiStatusBarComponent implements DoCheck, OnDestroy, OnChanges {\n  private static readonly itemMinWidth = 100;\n  private static readonly itemMaxWidth = 152;\n  private static readonly itemSpacing = 4;\n  private static readonly itemPaddingX = 44; // padding + icon size + icon margin\n  private static readonly itemPaddingXdeprecated = 20; // padding + color bar\n  private static readonly muteButtonWidth = 48;\n\n  /**\n   * Array of status bar items.\n   */\n  readonly items = input.required<StatusBarItem[]>();\n  /**\n   * When true, items with a value have a blinking background\n   *\n   * @defaultValue false\n   */\n  readonly blink = input(false, { transform: booleanAttribute });\n  /**\n   * State of the mute button. Set to `undefined` for no button.\n   */\n  readonly muteButton = input<boolean>();\n  /**\n   * Text/translation key on mute button for screen reader\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_STATUS_BAR.MUTE:Mute/unmute`)\n   * ```\n   */\n  readonly muteButtonText = input(t(() => $localize`:@@SI_STATUS_BAR.MUTE:Mute/unmute`));\n  /**\n   * Text/translation key for \"All OK\" status in mobile\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_STATUS_BAR.ALL_OK:All OK`)\n   * ```\n   */\n  readonly allOkText = input(t(() => $localize`:@@SI_STATUS_BAR.ALL_OK:All OK`));\n  /**\n   * compact mode\n   *\n   * @defaultValue false\n   */\n  readonly compact = input(false, { transform: booleanAttribute });\n  /**\n   * blink pulse generator for synchronized blinking with other components\n   */\n  readonly blinkPulse = input<Observable<boolean>>();\n  /**\n   * Text for the navbar expand button. Required for a11y\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_STATUS_BAR.EXPAND:Expand`)\n   * ```\n   */\n  readonly expandButtonText = input(t(() => $localize`:@@SI_STATUS_BAR.EXPAND:Expand`));\n  /**\n   * Text for the navbar collapse button. Required for a11y\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_STATUS_BAR.COLLAPSE:Collapse`)\n   * ```\n   */\n  readonly collapseButtonText = input(t(() => $localize`:@@SI_STATUS_BAR.COLLAPSE:Collapse`));\n\n  /**\n   * Emitted when the mute toggle button is clicked\n   */\n  readonly muteToggle = output();\n\n  private readonly theBar = viewChild.required<ElementRef>('thebar');\n  private readonly content = viewChild.required<ElementRef>('content');\n  private readonly custom = viewChild.required<ElementRef>('custom');\n\n  protected readonly responsiveItems = signal<ExtendedStatusBarItem[]>([]);\n  protected responsiveMode = 0;\n  protected readonly expanded = signal(0);\n  protected readonly placeholderHeight = signal(0);\n  protected readonly contentHeight = signal<number | undefined>(undefined);\n  protected readonly blinkOnOff = signal<boolean | undefined>(undefined);\n  protected readonly icons = addIcons({ elementDown2, elementSoundMute, elementSoundOn });\n  protected statusId = `__si-status-bar-${idCounter++}`;\n\n  private timer: any;\n\n  private blinkSubs?: Subscription;\n\n  private readonly element = inject(ElementRef);\n  private readonly blinkService = inject(BlinkService);\n  private readonly translateService = injectSiTranslateService();\n  private readonly resizeObserver = inject(ResizeObserverService);\n  private readonly measureService = inject(TextMeasureService);\n\n  constructor() {\n    this.resizeObserver\n      .observe(this.element.nativeElement, 100, true)\n      .pipe(takeUntilDestroyed())\n      .subscribe(() => this.resizeHandler());\n    this.translateService.translationChange\n      .pipe(takeUntilDestroyed())\n      .subscribe(() => this.resizeHandler());\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (this.blinkService && changes.blink) {\n      this.blinkSubs?.unsubscribe();\n      if (this.blink()) {\n        const pulse = this.blinkPulse() ?? this.blinkService.pulse$;\n        this.blinkSubs = pulse.subscribe(onOff => {\n          this.blinkOnOff.set(onOff);\n        });\n      }\n    }\n    this.resizeHandler();\n  }\n\n  ngDoCheck(): void {\n    if (this.responsiveMode) {\n      this.calcResponsiveItems();\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.blinkSubs?.unsubscribe();\n  }\n\n  protected onItemClicked(item: StatusBarItem): void {\n    if (item.action) {\n      item.action(item);\n    }\n  }\n\n  protected toggleExpand(): void {\n    clearTimeout(this.timer);\n    if (!this.expanded()) {\n      this.expanded.set(2);\n      this.placeholderHeight.set(this.theBar().nativeElement.offsetHeight);\n      this.contentHeight.set(0);\n\n      this.timer = window.setTimeout(() => {\n        this.contentHeight.set(this.content().nativeElement.scrollHeight);\n        window.setTimeout(() => {\n          this.contentHeight.set(undefined);\n        }, 500);\n      }, 10);\n    } else {\n      this.contentHeight.set(this.content().nativeElement.scrollHeight);\n      this.expanded.set(1);\n\n      window.setTimeout(() => {\n        this.contentHeight.set(0);\n        window.setTimeout(() => {\n          this.placeholderHeight.set(0);\n          this.expanded.set(0);\n        }, 500);\n      }, 10);\n    }\n  }\n\n  protected resizeHandler(): void {\n    const size = this.element.nativeElement.clientWidth;\n    const muteWidth = this.muteButton() !== undefined ? SiStatusBarComponent.muteButtonWidth : 0;\n    const customWidth = this.custom().nativeElement.scrollWidth ?? 0;\n    const minWidth =\n      this.items().length * (SiStatusBarComponent.itemMinWidth + SiStatusBarComponent.itemSpacing) +\n      SiStatusBarComponent.itemSpacing +\n      muteWidth +\n      customWidth;\n    if (size < minWidth) {\n      this.setResponsiveMode(true);\n    } else if (this.items().length) {\n      this.calculateRequiredWidth(muteWidth, customWidth);\n    }\n  }\n\n  private setResponsiveMode(responsive: boolean): void {\n    if (responsive) {\n      const size = this.element.nativeElement.clientWidth;\n      this.responsiveMode = Math.max(Math.floor(size / SiStatusBarComponent.itemMaxWidth) - 1, 2);\n    } else {\n      this.responsiveMode = 0;\n    }\n\n    if (this.responsiveMode) {\n      this.contentHeight.set(this.expanded() ? this.content().nativeElement.scrollHeight : 0);\n    } else {\n      this.expanded.set(0);\n      this.placeholderHeight.set(0);\n      this.contentHeight.set(undefined);\n    }\n  }\n\n  private calcResponsiveItems(): void {\n    const activeItems: ExtendedStatusBarItem[] = this.items()\n      .filter(item => item.value)\n      .sort(itemSortFunction);\n\n    if (activeItems.length > this.responsiveMode) {\n      activeItems[this.responsiveMode - 1] = {\n        status: activeItems[this.responsiveMode - 1].status,\n        color: activeItems[this.responsiveMode - 1].color,\n        value: activeItems.length - this.responsiveMode + 1 + '+',\n        title: '',\n        action: () => this.toggleExpand(),\n        isSpecial: true\n      };\n      activeItems.length = this.responsiveMode;\n    } else if (!activeItems.length) {\n      activeItems.push({\n        status: 'success',\n        title: '',\n        value: this.allOkText(),\n        isSpecial: true\n      });\n    }\n    if (activeItems.length === this.responsiveMode) {\n      activeItems[activeItems.length - 1].mutePadding = true;\n    }\n    this.responsiveItems.set(activeItems);\n  }\n\n  private calculateRequiredWidth(muteWidth: number, customWidth: number): void {\n    const keys: string[] = [];\n    for (const item of this.items()) {\n      keys.push(item.title, item.value.toString());\n    }\n    this.translateService\n      .translateAsync(keys)\n      .pipe(first())\n      .subscribe(translations => {\n        const size = this.element.nativeElement.clientWidth;\n\n        const requiredWidth = this.items().reduce(\n          (acc, item) => {\n            const titleWidth = this.measureService.measureText(translations[item.title]);\n            const valueWidth = this.measureService.measureText(\n              translations[item.value],\n              undefined,\n              { fontWeight: 'bold' }\n            );\n            const textWidth = Math.max(titleWidth, valueWidth);\n            const itemWidth =\n              Math.max(\n                SiStatusBarComponent.itemMinWidth,\n                textWidth +\n                  (item.color\n                    ? SiStatusBarComponent.itemPaddingXdeprecated\n                    : SiStatusBarComponent.itemPaddingX)\n              ) + SiStatusBarComponent.itemSpacing;\n            return acc + itemWidth;\n          },\n          muteWidth + customWidth + SiStatusBarComponent.itemSpacing\n        );\n\n        this.setResponsiveMode(size < requiredWidth);\n      });\n  }\n}\n","<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","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiStatusBarComponent } from './si-status-bar.component';\n\n@NgModule({\n  imports: [SiStatusBarComponent],\n  exports: [SiStatusBarComponent]\n})\nexport class SiStatusBarModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-status-bar-item.component';\nexport * from './si-status-bar-item.model';\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-status-bar.component';\nexport * from './si-status-bar.module';\nexport * from './si-status-bar-item/index';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-element-ng-status-counter.mjs

@@ -1,4 +1,3 @@
-import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, numberAttribute, booleanAttribute, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { SiIconComponent } from '@siemens/element-ng/icon';
@@ -9,31 +8,31 @@ import { SiIconComponent } from '@siemens/element-ng/icon';
  */
 class SiStatusCounterComponent {
     /** Icon to display. */
-    icon = input.required();
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
     /** Stacked icon to display. */
-    stackedIcon = input();
+    stackedIcon = input(...(ngDevMode ? [undefined, { debugName: "stackedIcon" }] : []));
     /**
      * Counter below the icon
      *
      * @defaultValue 0
      */
-    count = input(0, { transform: numberAttribute });
+    count = input(0, { ...(ngDevMode ? { debugName: "count" } : {}), transform: numberAttribute });
     /** Color of the icon */
-    color = input();
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
     /**
      * Whether the icon is disabled.
      *
      * @defaultValue false
      */
-    disabled = input(false, { transform: booleanAttribute });
-    isDisabledOrCountZero = computed(() => !!this.disabled() || this.count() === 0);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiStatusCounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiStatusCounterComponent, isStandalone: true, selector: "si-status-counter, si-icon-status", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let iconValue = icon();\n<span class=\"icon icon-stack\">\n  <si-icon\n    [ngClass]=\"isDisabledOrCountZero() ? undefined : color()\"\n    [class.inactive]=\"isDisabledOrCountZero()\"\n    [icon]=\"iconValue\"\n  />\n  @let stackedValue = stackedIcon();\n  @if (stackedValue) {\n    <si-icon\n      [ngClass]=\"isDisabledOrCountZero() ? 'inactive-contrast' : color() + '-contrast'\"\n      [icon]=\"stackedValue\"\n    />\n  }\n</span>\n@if (!disabled()) {\n  <span>{{ count() }}</span>\n}\n", styles: [":host{display:flex;align-items:center;flex-direction:column;text-align:center;gap:4px}.inactive{color:var(--element-ui-3)}.inactive-contrast{color:var(--element-ui-5)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    isDisabledOrCountZero = computed(() => !!this.disabled() || this.count() === 0, ...(ngDevMode ? [{ debugName: "isDisabledOrCountZero" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiStatusCounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiStatusCounterComponent, isStandalone: true, selector: "si-status-counter, si-icon-status", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let iconValue = icon();\n<span class=\"icon icon-stack\">\n  <si-icon\n    [class]=\"isDisabledOrCountZero() ? undefined : color()\"\n    [class.inactive]=\"isDisabledOrCountZero()\"\n    [icon]=\"iconValue\"\n  />\n  @let stackedValue = stackedIcon();\n  @if (stackedValue) {\n    <si-icon\n      [class]=\"isDisabledOrCountZero() ? 'inactive-contrast' : `${color()}-contrast`\"\n      [icon]=\"stackedValue\"\n    />\n  }\n</span>\n@if (!disabled()) {\n  <span>{{ count() }}</span>\n}\n", styles: [":host{display:flex;align-items:center;flex-direction:column;text-align:center;gap:4px}.inactive{color:var(--element-ui-3)}.inactive-contrast{color:var(--element-ui-5)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiStatusCounterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiStatusCounterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-status-counter, si-icon-status', imports: [NgClass, SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let iconValue = icon();\n<span class=\"icon icon-stack\">\n  <si-icon\n    [ngClass]=\"isDisabledOrCountZero() ? undefined : color()\"\n    [class.inactive]=\"isDisabledOrCountZero()\"\n    [icon]=\"iconValue\"\n  />\n  @let stackedValue = stackedIcon();\n  @if (stackedValue) {\n    <si-icon\n      [ngClass]=\"isDisabledOrCountZero() ? 'inactive-contrast' : color() + '-contrast'\"\n      [icon]=\"stackedValue\"\n    />\n  }\n</span>\n@if (!disabled()) {\n  <span>{{ count() }}</span>\n}\n", styles: [":host{display:flex;align-items:center;flex-direction:column;text-align:center;gap:4px}.inactive{color:var(--element-ui-3)}.inactive-contrast{color:var(--element-ui-5)}\n"] }]
-        }] });
+            args: [{ selector: 'si-status-counter, si-icon-status', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let iconValue = icon();\n<span class=\"icon icon-stack\">\n  <si-icon\n    [class]=\"isDisabledOrCountZero() ? undefined : color()\"\n    [class.inactive]=\"isDisabledOrCountZero()\"\n    [icon]=\"iconValue\"\n  />\n  @let stackedValue = stackedIcon();\n  @if (stackedValue) {\n    <si-icon\n      [class]=\"isDisabledOrCountZero() ? 'inactive-contrast' : `${color()}-contrast`\"\n      [icon]=\"stackedValue\"\n    />\n  }\n</span>\n@if (!disabled()) {\n  <span>{{ count() }}</span>\n}\n", styles: [":host{display:flex;align-items:center;flex-direction:column;text-align:center;gap:4px}.inactive{color:var(--element-ui-3)}.inactive-contrast{color:var(--element-ui-5)}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], stackedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackedIcon", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025

package/fesm2022/siemens-element-ng-status-counter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-status-counter.mjs","sources":["../../../../projects/element-ng/status-counter/si-status-counter.component.ts","../../../../projects/element-ng/status-counter/si-status-counter.component.html","../../../../projects/element-ng/status-counter/index.ts","../../../../projects/element-ng/status-counter/siemens-element-ng-status-counter.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  numberAttribute\n} from '@angular/core';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\n\n@Component({\n  selector: 'si-status-counter, si-icon-status',\n  imports: [NgClass, SiIconComponent],\n  templateUrl: './si-status-counter.component.html',\n  styleUrl: './si-status-counter.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiStatusCounterComponent {\n  /** Icon to display. */\n  readonly icon = input.required<string>();\n  /** Stacked icon to display. */\n  readonly stackedIcon = input<string>();\n  /**\n   * Counter below the icon\n   *\n   * @defaultValue 0\n   */\n  readonly count = input(0, { transform: numberAttribute });\n  /** Color of the icon */\n  readonly color = input<string>();\n  /**\n   * Whether the icon is disabled.\n   *\n   * @defaultValue false\n   */\n  readonly disabled = input(false, { transform: booleanAttribute });\n\n  readonly isDisabledOrCountZero = computed(() => !!this.disabled() || this.count() === 0);\n}\n","@let iconValue = icon();\n<span class=\"icon icon-stack\">\n  <si-icon\n    [ngClass]=\"isDisabledOrCountZero() ? undefined : color()\"\n    [class.inactive]=\"isDisabledOrCountZero()\"\n    [icon]=\"iconValue\"\n  />\n  @let stackedValue = stackedIcon();\n  @if (stackedValue) {\n    <si-icon\n      [ngClass]=\"isDisabledOrCountZero() ? 'inactive-contrast' : color() + '-contrast'\"\n      [icon]=\"stackedValue\"\n    />\n  }\n</span>\n@if (!disabled()) {\n  <span>{{ count() }}</span>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-status-counter.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;;;AAGG;MAmBU,wBAAwB,CAAA;;AAE1B,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAU;;IAE/B,WAAW,GAAG,KAAK,EAAU;AACtC;;;;AAIG;IACM,KAAK,GAAG,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;;IAEhD,KAAK,GAAG,KAAK,EAAU;AAChC;;;;AAIG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAExD,qBAAqB,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;uGApB7E,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAxB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtBrC,+eAkBA,EAAA,MAAA,EAAA,CAAA,2KAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDDY,OAAO,oFAAE,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKvB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAPpC,SAAS;+BACE,mCAAmC,EAAA,OAAA,EACpC,CAAC,OAAO,EAAE,eAAe,CAAC,EAAA,eAAA,EAGlB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+eAAA,EAAA,MAAA,EAAA,CAAA,2KAAA,CAAA,EAAA;;;AEpBjD;;;AAGG;;ACHH;;AAEG;;;;"}
+{"version":3,"file":"siemens-element-ng-status-counter.mjs","sources":["../../../../projects/element-ng/status-counter/si-status-counter.component.ts","../../../../projects/element-ng/status-counter/si-status-counter.component.html","../../../../projects/element-ng/status-counter/index.ts","../../../../projects/element-ng/status-counter/siemens-element-ng-status-counter.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  numberAttribute\n} from '@angular/core';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\n\n@Component({\n  selector: 'si-status-counter, si-icon-status',\n  imports: [SiIconComponent],\n  templateUrl: './si-status-counter.component.html',\n  styleUrl: './si-status-counter.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiStatusCounterComponent {\n  /** Icon to display. */\n  readonly icon = input.required<string>();\n  /** Stacked icon to display. */\n  readonly stackedIcon = input<string>();\n  /**\n   * Counter below the icon\n   *\n   * @defaultValue 0\n   */\n  readonly count = input(0, { transform: numberAttribute });\n  /** Color of the icon */\n  readonly color = input<string>();\n  /**\n   * Whether the icon is disabled.\n   *\n   * @defaultValue false\n   */\n  readonly disabled = input(false, { transform: booleanAttribute });\n\n  readonly isDisabledOrCountZero = computed(() => !!this.disabled() || this.count() === 0);\n}\n","@let iconValue = icon();\n<span class=\"icon icon-stack\">\n  <si-icon\n    [class]=\"isDisabledOrCountZero() ? undefined : color()\"\n    [class.inactive]=\"isDisabledOrCountZero()\"\n    [icon]=\"iconValue\"\n  />\n  @let stackedValue = stackedIcon();\n  @if (stackedValue) {\n    <si-icon\n      [class]=\"isDisabledOrCountZero() ? 'inactive-contrast' : `${color()}-contrast`\"\n      [icon]=\"stackedValue\"\n    />\n  }\n</span>\n@if (!disabled()) {\n  <span>{{ count() }}</span>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-status-counter.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;AAGG;MAkBU,wBAAwB,CAAA;;AAE1B,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAU;;IAE/B,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;AACtC;;;;AAIG;IACM,KAAK,GAAG,KAAK,CAAC,CAAC,kDAAI,SAAS,EAAE,eAAe,EAAA,CAAG;;IAEhD,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;AAChC;;;;AAIG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,qDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAExD,qBAAqB,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,iEAAC;uGApB7E,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrBrC,2eAkBA,EAAA,MAAA,EAAA,CAAA,2KAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDFY,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKd,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAPpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mCAAmC,WACpC,CAAC,eAAe,CAAC,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2eAAA,EAAA,MAAA,EAAA,CAAA,2KAAA,CAAA,EAAA;;;AEnBjD;;;AAGG;;ACHH;;AAEG;;;;"}