@siemens/element-ng 47.1.0 → 47.2.0

package/auto-collapsable-list/si-auto-collapsable-list.directive.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { AfterViewInit, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
+import { SiAutoCollapsableListItemDirective } from './si-auto-collapsable-list-item.directive';
+import * as i0 from "@angular/core";
+export declare class SiAutoCollapsableListDirective implements AfterViewInit, OnChanges, OnDestroy {
+    /**
+     * The items which are displayed in the siAutoCollapsableList.
+     */
+    items: QueryList<SiAutoCollapsableListItemDirective>;
+    private readonly overflowItem;
+    private additionalContent;
+    /** @defaultValue true */
+    readonly siAutoCollapsableList: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The (flex) gap in pixels, will automatically be set if a pixel value is used in CSS.
+     */
+    readonly gap: import("@angular/core").InputSignal<number | undefined>;
+    /**
+     * The element which size is available for the content of the siAutoCollapsableList.
+     *
+     * @defaultValue undefined
+     */
+    readonly containerElement: import("@angular/core").InputSignal<HTMLElement | null | undefined>;
+    private resizeSubscription?;
+    private disableInitSubscription?;
+    private readonly elementRef;
+    private readonly resizeObserverService;
+    private readonly changeDetectorRef;
+    private readonly containerElementSubject;
+    /**
+     * The same as {@link gap}, but automatically read from the computed styles.
+     * Used if not set by user.
+     */
+    private computedGap;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private setupResizeListener;
+    private updateItemVisibility;
+    private reset;
+    private readGapSize;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiAutoCollapsableListDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiAutoCollapsableListDirective, "[siAutoCollapsableList]", ["siAutoCollapsableList"], { "siAutoCollapsableList": { "alias": "siAutoCollapsableList"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "containerElement": { "alias": "siAutoCollapsableListContainerElement"; "required": false; "isSignal": true; }; }, {}, ["overflowItem", "items", "additionalContent"], never, true, never>;
+}

package/auto-collapsable-list/si-auto-collapsable-list.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./si-auto-collapsable-list-additional-content.directive";
+import * as i2 from "./si-auto-collapsable-list.directive";
+import * as i3 from "./si-auto-collapsable-list-item.directive";
+import * as i4 from "./si-auto-collapsable-list-overflow-item.directive";
+export declare class SiAutoCollapsableListModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiAutoCollapsableListModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SiAutoCollapsableListModule, never, [typeof i1.SiAutoCollapsableListAdditionalContentDirective, typeof i2.SiAutoCollapsableListDirective, typeof i3.SiAutoCollapsableListItemDirective, typeof i4.SiAutoCollapsableListOverflowItemDirective], [typeof i1.SiAutoCollapsableListAdditionalContentDirective, typeof i2.SiAutoCollapsableListDirective, typeof i3.SiAutoCollapsableListItemDirective, typeof i4.SiAutoCollapsableListOverflowItemDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SiAutoCollapsableListModule>;
+}

package/color-picker/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-color-picker.component';

package/color-picker/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-color-picker.mjs"
+}

package/color-picker/si-color-picker.component.d.ts

@@ -0,0 +1,61 @@
+import { ControlValueAccessor } from '@angular/forms';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
+import * as i0 from "@angular/core";
+export declare class SiColorPickerComponent implements ControlValueAccessor {
+    /**
+     * The color palette to choose the colors from. As colors, only valid CSS
+     * variable names omitting the `--` prefix or Element color tokens omitting
+     * the `$` prefix are supported.
+     *
+     * Note: If custom CSS variables are provided, they need to be defined for
+     * both light and dark mode.
+     *
+     * @defaultValue The first 16 colors of the Element data color palette.
+     */
+    readonly colorPalette: import("@angular/core").InputSignal<string[]>;
+    /**
+     * The selected color.
+     */
+    readonly color: import("@angular/core").ModelSignal<string | undefined>;
+    /**
+     * Specifies whether the color popup should automatically close on a color selection.
+     *
+     * @defaultValue false
+     */
+    readonly autoClose: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Specifies whether the color picker component is disabled.
+     *
+     * @defaultValue false
+     */
+    readonly disabledInput: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Aria label for the color input button.
+     */
+    readonly ariaLabel: import("@angular/core").InputSignal<TranslatableString | undefined>;
+    private onChange;
+    private onTouched;
+    private readonly colorInputRef;
+    private readonly colorPaletteRef;
+    private readonly disabledNgControl;
+    private readonly numberOfColumns;
+    protected readonly disabled: import("@angular/core").Signal<boolean>;
+    protected readonly isOverlayOpen: import("@angular/core").WritableSignal<boolean>;
+    protected readonly icons: Record<"elementOk", string>;
+    protected blur(): void;
+    protected arrowDown(index: number, event: Event): void;
+    protected arrowUp(index: number, event: Event): void;
+    protected arrowLeft(index: number, event: Event): void;
+    protected arrowRight(index: number, event: Event): void;
+    private focusLabel;
+    protected openOverlay(): void;
+    protected overlayDetach(): void;
+    private focusSelectedColor;
+    protected selectColor(color: string): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiColorPickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiColorPickerComponent, "si-color-picker", never, { "colorPalette": { "alias": "colorPalette"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "autoClose": { "alias": "autoClose"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "color": "colorChange"; }, never, never, true, never>;
+}

package/common/models/menu.model.d.ts

@@ -12,8 +12,8 @@ import { Link } from '@siemens/element-ng/link';
  * - for {@link SiMenuFactoryComponent} use {@link @siemens/element-ng/menu#MenuItem}
  * - for {@link SiContentActionBarComponent} use {@link @siemens/element-ng/menu#MenuItem} and {@link ContentActionBarMainItem}
  * - for {@link SiNavbarVerticalComponent} use {@link NavbarVerticalItem}
- * - for {@link @simpl/dashboards-ng#SiFlexibleDashboardComponent}
- *   use {@link @simpl/dashboards-ng#DashboardToolbarItem}
+ * - for {@link @siemens/dashboards-ng#SiFlexibleDashboardComponent}
+ *   use {@link @siemens/dashboards-ng#DashboardToolbarItem}
  */
 export interface MenuItem extends Link {
     /**

package/connection-strength/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-connection-strength.component';
+export * from './si-connection-strength.module';

package/connection-strength/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-connection-strength.mjs"
+}

package/connection-strength/si-connection-strength.component.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+export type ConnectionStrength = 'none' | 'low' | 'medium' | 'strong';
+export declare class SiConnectionStrengthComponent {
+    /**
+     * Shows the signal representation in an alternative *WLAN* format
+     *
+     * @defaultValue false
+     */
+    readonly wlan: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Main value representing the current connection strength.
+     *
+     * @defaultValue 'none'
+     */
+    readonly value: import("@angular/core").InputSignal<ConnectionStrength>;
+    protected readonly numberValue: import("@angular/core").Signal<number>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiConnectionStrengthComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiConnectionStrengthComponent, "si-connection-strength", never, { "wlan": { "alias": "wlan"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/connection-strength/si-connection-strength.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./si-connection-strength.component";
+export declare class SiConnectionStrengthModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiConnectionStrengthModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SiConnectionStrengthModule, never, [typeof i1.SiConnectionStrengthComponent], [typeof i1.SiConnectionStrengthComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SiConnectionStrengthModule>;
+}

package/copyright-notice/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-copyright-notice.component';
+export * from './si-copyright-notice.module';
+export * from './si-copyright-notice';

package/copyright-notice/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-copyright-notice.mjs"
+}

package/copyright-notice/si-copyright-notice.component.d.ts

@@ -0,0 +1,18 @@
+import { CopyrightDetails } from './si-copyright-notice';
+import * as i0 from "@angular/core";
+export declare class SiCopyrightNoticeComponent {
+    private globalCopyrightInfo;
+    /**
+     * Copyright information to be displayed.
+     *
+     * Note: The {@link CopyrightDetails#company} defaults to `Sample Company`,
+     * only set it for other companies.
+     */
+    readonly copyright: import("@angular/core").InputSignal<CopyrightDetails | undefined>;
+    protected readonly copyrightInfo: import("@angular/core").Signal<string>;
+    protected readonly company: import("@angular/core").Signal<string>;
+    protected readonly startYear: import("@angular/core").Signal<number>;
+    protected readonly lastUpdateYear: import("@angular/core").Signal<number | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiCopyrightNoticeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiCopyrightNoticeComponent, "si-copyright-notice", never, { "copyright": { "alias": "copyright"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/copyright-notice/si-copyright-notice.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { InjectionToken } from '@angular/core';
+export interface CopyrightDetails {
+    /**
+     * The year when the app was first released.
+     */
+    startYear: number;
+    /**
+     * The year when the app was last updated. Must be left blank if it equals {@link startYear}
+     */
+    lastUpdateYear?: number;
+    /**
+     * The company name to be displayed in the copyright notice (not to be translated).
+     */
+    company?: string;
+}
+/**
+ * The injection token to be used when used globally across the app
+ */
+export declare const SI_COPYRIGHT_DETAILS: InjectionToken<CopyrightDetails>;

package/copyright-notice/si-copyright-notice.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./si-copyright-notice.component";
+export declare class SiCopyrightNoticeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiCopyrightNoticeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SiCopyrightNoticeModule, never, [typeof i1.SiCopyrightNoticeComponent], [typeof i1.SiCopyrightNoticeComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SiCopyrightNoticeModule>;
+}

package/empty-state/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-empty-state.component';
+export * from './si-empty-state.module';

package/empty-state/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-empty-state.mjs"
+}

package/empty-state/si-empty-state.component.d.ts

@@ -0,0 +1,18 @@
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
+import * as i0 from "@angular/core";
+export declare class SiEmptyStateComponent {
+    /**
+     * CSS class name of the desired icon.
+     */
+    readonly icon: import("@angular/core").InputSignal<string>;
+    /**
+     * Heading of empty state content.
+     */
+    readonly heading: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Description of empty state content.
+     */
+    readonly content: import("@angular/core").InputSignal<TranslatableString | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiEmptyStateComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiEmptyStateComponent, "si-empty-state", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/empty-state/si-empty-state.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./si-empty-state.component";
+export declare class SiEmptyStateModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiEmptyStateModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SiEmptyStateModule, never, [typeof i1.SiEmptyStateComponent], [typeof i1.SiEmptyStateComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SiEmptyStateModule>;
+}

package/fesm2022/siemens-element-ng-accordion.mjs

@@ -0,0 +1,314 @@
+import { trigger, transition, style, query, animate } from '@angular/animations';
+import { NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { signal, Injectable, input, model, booleanAttribute, output, computed, inject, DestroyRef, viewChild, ChangeDetectionStrategy, Component, contentChildren, ElementRef, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { areAnimationsDisabled } from '@siemens/element-ng/common';
+import { addIcons, elementDown2, SiIconNextComponent } from '@siemens/element-ng/icon';
+import * as i1 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+import { Subject, filter } from 'rxjs';
+import { ResizeObserverService } from '@siemens/element-ng/resize-observer';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/** @internal */
+class SiAccordionHCollapseService {
+    /**
+     * Emitting the current horizontal collapsed state.
+     *
+     * @defaultValue undefined
+     */
+    hcollapsed = signal(undefined);
+    /**
+     * Subject to emit to open the accordion.
+     */
+    open$ = new Subject();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAccordionHCollapseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAccordionHCollapseService, providedIn: null });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAccordionHCollapseService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: null
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/** @internal */
+class SiAccordionService {
+    /**
+     * Emit an item in the accordion which should be toggled.
+     */
+    toggle$ = new Subject();
+    /**
+     * Subject to emit when the items should be expanded to their full height or restored to normal height.
+     *
+     * @defaultValue null
+     */
+    fullHeight = signal(null);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAccordionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAccordionService, providedIn: null });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAccordionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: null
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+let controlIdCounter = 1;
+class SiCollapsiblePanelComponent {
+    /**
+     * Heading for the collapsible panel.
+     */
+    heading = input();
+    /**
+     * Additional CSS classes for the top element.
+     *
+     * @defaultValue ''
+     */
+    headerCssClasses = input('');
+    /**
+     * Additional CSS classes for the collapsible content region.
+     *
+     * @defaultValue ''
+     */
+    contentBgClasses = input('');
+    /**
+     * Additional CSS classes for the wrapping content element.
+     *
+     * @defaultValue ''
+     */
+    contentCssClasses = input('');
+    /**
+     * Expand/collapse the panel.
+     *
+     * @defaultValue false
+     */
+    opened = model(false);
+    /**
+     * The icon to be displayed besides the heading.
+     */
+    icon = input();
+    /**
+     * Whether the si-collapsible-panel is disabled.
+     *
+     * @defaultValue false
+     */
+    disabled = input(false, { transform: booleanAttribute });
+    /** Color to use for component background */
+    colorVariant = input();
+    /**
+     * Defines the content of the optional badge. Should be a number or something like "100+".
+     * if undefined or empty string, no badge is displayed
+     */
+    badge = input();
+    /**
+     * Defines the background color of the badge. Default is specific to SiMPL flavour.
+     */
+    badgeColor = input();
+    /**
+     * An event emitted when the user triggered expand/collapse and emit with the new open state.
+     * The event is emitted before the animation happens.
+     */
+    panelToggle = output();
+    /**
+     * An event emitted when the user triggered expand/collapse.
+     * The event is emitted before the animation happens.
+     * @deprecated use {@link panelToggle} instead
+     */
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    toggle = output();
+    hcollapsed = computed(() => this.accordionHCollapseService?.hcollapsed() ?? false);
+    fullHeight = computed(() => this.accordionService?.fullHeight() ?? false);
+    controlId = '__si-collapsible-' + controlIdCounter++;
+    headerId = this.controlId + '-header';
+    isHCollapsible = false;
+    icons = addIcons({ elementDown2 });
+    destroyRef = inject(DestroyRef);
+    accordionService = inject(SiAccordionService, { optional: true });
+    accordionHCollapseService = inject(SiAccordionHCollapseService, {
+        optional: true
+    });
+    enableAnimation = true;
+    animationsGloballyDisabled = areAnimationsDisabled();
+    lastScrollPos = 0;
+    contentRef = viewChild.required('content');
+    constructor() {
+        this.isHCollapsible = !!this.accordionHCollapseService;
+        this.accordionService?.toggle$
+            .pipe(takeUntilDestroyed(this.destroyRef), filter(item => item !== this))
+            .subscribe(() => this.openClose(false));
+        this.panelToggle.subscribe(open => this.toggle.emit(open));
+    }
+    get showHide() {
+        if (this.enableAnimation && !this.animationsGloballyDisabled) {
+            return this.opened() ? 'show' : 'hide';
+        }
+        return 'disabled';
+    }
+    /**
+     * Expand/collapse panel.
+     * @param open - indicate the panel shall open or close
+     * @param enableAnimation - with animation
+     */
+    openClose(open, enableAnimation = true) {
+        this.opened.set(open);
+        this.enableAnimation = enableAnimation;
+        if (open) {
+            setTimeout(() => {
+                this.contentRef().nativeElement.scrollTop = this.lastScrollPos;
+            });
+        }
+        else {
+            this.lastScrollPos = this.contentRef().nativeElement.scrollTop;
+        }
+    }
+    doToggle(event) {
+        if (this.disabled()) {
+            return;
+        }
+        event?.preventDefault();
+        const opened = this.opened();
+        this.panelToggle.emit(!opened);
+        this.openClose(this.hcollapsed() || !opened);
+        this.accordionService?.toggle$.next(this);
+        if (this.hcollapsed()) {
+            this.accordionHCollapseService?.open$.next(this);
+        }
+    }
+    keydown(event) {
+        if (event.key === 'Enter' || event.key === 'Space' || event.key === ' ') {
+            this.doToggle(undefined);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCollapsiblePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiCollapsiblePanelComponent, isStandalone: true, selector: "si-collapsible-panel", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, headerCssClasses: { classPropertyName: "headerCssClasses", publicName: "headerCssClasses", isSignal: true, isRequired: false, transformFunction: null }, contentBgClasses: { classPropertyName: "contentBgClasses", publicName: "contentBgClasses", isSignal: true, isRequired: false, transformFunction: null }, contentCssClasses: { classPropertyName: "contentCssClasses", publicName: "contentCssClasses", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange", panelToggle: "panelToggle", toggle: "toggle" }, host: { properties: { "class": "colorVariant()", "class.opened": "opened()", "class.hcollapsed": "hcollapsed()", "class.full-height": "fullHeight()" } }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"collapsible-header focus-inside px-6\"\n  role=\"button\"\n  [ngClass]=\"headerCssClasses()\"\n  [attr.tabindex]=\"disabled() ? '' : '0'\"\n  [id]=\"headerId\"\n  [class.open]=\"opened()\"\n  [class.disabled]=\"disabled()\"\n  [title]=\"hcollapsed() ? (heading() | translate) : ''\"\n  [attr.aria-expanded]=\"opened() && !hcollapsed()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-controls]=\"controlId\"\n  [attr.aria-label]=\"hcollapsed() ? (heading() | translate) : ''\"\n  (keydown)=\"keydown($event)\"\n  (click)=\"doToggle($event)\"\n>\n  @let headerIcon = icon();\n  @if (headerIcon) {\n    <si-icon-next\n      class=\"icon ms-n2 me-2\"\n      [icon]=\"headerIcon\"\n      [class.collapsed-icon]=\"isHCollapsible\"\n    />\n  }\n  @if (icon() && badge() !== undefined && badge() !== '') {\n    <span class=\"badge-text\">\n      {{ badge() }}\n    </span>\n  }\n  <div class=\"si-title-2 autohide\">\n    {{ heading() | translate }}\n    <ng-content select=\"[si-panel-heading]\" />\n  </div>\n\n  @if (badge() !== undefined && badge() !== '') {\n    <span class=\"badge autohide\" [ngClass]=\"'bg-' + badgeColor()\">\n      {{ badge() }}\n    </span>\n  }\n  <span class=\"ms-auto overflow-hidden\">\n    <si-icon-next class=\"icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n  </span>\n</div>\n<div\n  #content\n  class=\"collapsible-content\"\n  role=\"region\"\n  [id]=\"controlId\"\n  [ngClass]=\"contentBgClasses()\"\n  [@showHide]=\"showHide\"\n  [attr.aria-labelledby]=\"headerId\"\n  [class.full-height]=\"fullHeight()\"\n>\n  @if (opened()) {\n    <div>\n      <div [ngClass]=\"contentCssClasses()\">\n        <ng-content />\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--__radius: var(--si-accordion-radius, var(--element-button-radius));display:flex;flex-direction:column;background:var(--element-base-0);padding-block-end:2px}:host:not(.hcollapsed) .collapsed-icon,:host:not(.hcollapsed) .badge-text{display:none}:host.hcollapsed{background:var(--element-base-1)}:host.hcollapsed .collapsible-header .autohide,:host.hcollapsed .collapsible-content{display:none}:host.hcollapsed .collapsible-header{padding-block:8px}:host.hcollapsed .collapsible-header:hover{background:var(--element-base-1-hover)}:host.full-height{transition:flex-grow calc(.5s * var(--element-animations-enabled, 1))}:host.full-height.opened,:host.full-height .collapsible-content{flex:1 1 0}:host.full-height .collapsible-content>div{flex:1 0 0}.collapsible-header{display:flex;align-items:center;background:var(--element-base-1);color:var(--element-text-primary);padding-block:12px;border-radius:var(--__radius)}.collapsible-header.disabled{color:var(--element-text-disabled)}.collapsible-header.open{border-end-start-radius:0;border-end-end-radius:0}.collapsible-header:not(.disabled){cursor:pointer}.collapsible-header:not(.disabled):hover{text-decoration:none;background:var(--element-base-1-hover)}.dropdown-caret{transition:transform calc(.5s * var(--element-animations-enabled, 1));color:var(--element-ui-1)}.open .dropdown-caret{transform:rotate(180deg)}.collapsible-content{overflow:hidden;display:flex;flex-direction:column;background:var(--element-base-1);border-end-start-radius:var(--__radius);border-end-end-radius:var(--__radius)}.collapsible-content.full-height{overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }], animations: [
+            trigger('showHide', [
+                transition('*=>hide', [
+                    style({ overflow: 'hidden' }),
+                    query(':leave', [style({ blockSize: '*' }), animate('0.5s ease', style({ blockSize: '0' }))], { optional: true })
+                ]),
+                transition('*=>show', [
+                    style({ overflow: 'hidden' }),
+                    query(':enter', [style({ blockSize: '0' }), animate('0.5s ease', style({ blockSize: '*' }))], { optional: true })
+                ])
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCollapsiblePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-collapsible-panel', animations: [
+                        trigger('showHide', [
+                            transition('*=>hide', [
+                                style({ overflow: 'hidden' }),
+                                query(':leave', [style({ blockSize: '*' }), animate('0.5s ease', style({ blockSize: '0' }))], { optional: true })
+                            ]),
+                            transition('*=>show', [
+                                style({ overflow: 'hidden' }),
+                                query(':enter', [style({ blockSize: '0' }), animate('0.5s ease', style({ blockSize: '*' }))], { optional: true })
+                            ])
+                        ])
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, SiIconNextComponent, SiTranslateModule], host: {
+                        '[class]': 'colorVariant()',
+                        '[class.opened]': 'opened()',
+                        '[class.hcollapsed]': 'hcollapsed()',
+                        '[class.full-height]': 'fullHeight()'
+                    }, template: "<div\n  class=\"collapsible-header focus-inside px-6\"\n  role=\"button\"\n  [ngClass]=\"headerCssClasses()\"\n  [attr.tabindex]=\"disabled() ? '' : '0'\"\n  [id]=\"headerId\"\n  [class.open]=\"opened()\"\n  [class.disabled]=\"disabled()\"\n  [title]=\"hcollapsed() ? (heading() | translate) : ''\"\n  [attr.aria-expanded]=\"opened() && !hcollapsed()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-controls]=\"controlId\"\n  [attr.aria-label]=\"hcollapsed() ? (heading() | translate) : ''\"\n  (keydown)=\"keydown($event)\"\n  (click)=\"doToggle($event)\"\n>\n  @let headerIcon = icon();\n  @if (headerIcon) {\n    <si-icon-next\n      class=\"icon ms-n2 me-2\"\n      [icon]=\"headerIcon\"\n      [class.collapsed-icon]=\"isHCollapsible\"\n    />\n  }\n  @if (icon() && badge() !== undefined && badge() !== '') {\n    <span class=\"badge-text\">\n      {{ badge() }}\n    </span>\n  }\n  <div class=\"si-title-2 autohide\">\n    {{ heading() | translate }}\n    <ng-content select=\"[si-panel-heading]\" />\n  </div>\n\n  @if (badge() !== undefined && badge() !== '') {\n    <span class=\"badge autohide\" [ngClass]=\"'bg-' + badgeColor()\">\n      {{ badge() }}\n    </span>\n  }\n  <span class=\"ms-auto overflow-hidden\">\n    <si-icon-next class=\"icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n  </span>\n</div>\n<div\n  #content\n  class=\"collapsible-content\"\n  role=\"region\"\n  [id]=\"controlId\"\n  [ngClass]=\"contentBgClasses()\"\n  [@showHide]=\"showHide\"\n  [attr.aria-labelledby]=\"headerId\"\n  [class.full-height]=\"fullHeight()\"\n>\n  @if (opened()) {\n    <div>\n      <div [ngClass]=\"contentCssClasses()\">\n        <ng-content />\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--__radius: var(--si-accordion-radius, var(--element-button-radius));display:flex;flex-direction:column;background:var(--element-base-0);padding-block-end:2px}:host:not(.hcollapsed) .collapsed-icon,:host:not(.hcollapsed) .badge-text{display:none}:host.hcollapsed{background:var(--element-base-1)}:host.hcollapsed .collapsible-header .autohide,:host.hcollapsed .collapsible-content{display:none}:host.hcollapsed .collapsible-header{padding-block:8px}:host.hcollapsed .collapsible-header:hover{background:var(--element-base-1-hover)}:host.full-height{transition:flex-grow calc(.5s * var(--element-animations-enabled, 1))}:host.full-height.opened,:host.full-height .collapsible-content{flex:1 1 0}:host.full-height .collapsible-content>div{flex:1 0 0}.collapsible-header{display:flex;align-items:center;background:var(--element-base-1);color:var(--element-text-primary);padding-block:12px;border-radius:var(--__radius)}.collapsible-header.disabled{color:var(--element-text-disabled)}.collapsible-header.open{border-end-start-radius:0;border-end-end-radius:0}.collapsible-header:not(.disabled){cursor:pointer}.collapsible-header:not(.disabled):hover{text-decoration:none;background:var(--element-base-1-hover)}.dropdown-caret{transition:transform calc(.5s * var(--element-animations-enabled, 1));color:var(--element-ui-1)}.open .dropdown-caret{transform:rotate(180deg)}.collapsible-content{overflow:hidden;display:flex;flex-direction:column;background:var(--element-base-1);border-end-start-radius:var(--__radius);border-end-end-radius:var(--__radius)}.collapsible-content.full-height{overflow:auto}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+const PANEL_MIN_HEIGHT = 100;
+class SiAccordionComponent {
+    /** @defaultValue true */
+    expandFirstPanel = input(true, { transform: booleanAttribute });
+    /** @defaultValue false */
+    fullHeight = input(false, { transform: booleanAttribute });
+    /** @defaultValue false */
+    hcollapsed = input(false);
+    /**
+     * Color to use for component background
+     * @deprecated This has no effect anymore. Will be removed in v48
+     **/
+    colorVariant = input();
+    /**
+     * Indicate whether the accordion is collapsed.
+     * @internal
+     */
+    collapsed = computed(() => this.accordionHCollapseService?.hcollapsed() ?? this.hcollapsed());
+    panels = contentChildren(SiCollapsiblePanelComponent);
+    responsive = false;
+    destroyer = inject(DestroyRef);
+    service = inject(SiAccordionService);
+    resizeObserver = inject(ResizeObserverService);
+    element = inject(ElementRef);
+    accordionHCollapseService = inject(SiAccordionHCollapseService, { optional: true });
+    ngOnChanges() {
+        this.service.fullHeight.set(this.fullHeight() && !this.responsive);
+    }
+    ngAfterContentInit() {
+        this.resizeObserver
+            .observe(this.element.nativeElement, 100, true, true)
+            .pipe(takeUntilDestroyed(this.destroyer))
+            .subscribe(() => this.calcFullHeight());
+        this.panels().at(0)?.openClose(this.expandFirstPanel(), false);
+    }
+    calcFullHeight() {
+        if (this.panels?.length) {
+            const height = this.element.nativeElement.offsetHeight;
+            this.responsive = !this.hcollapsed() && height < this.panels.length * PANEL_MIN_HEIGHT;
+            this.service.fullHeight.set(this.fullHeight() && !this.responsive);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.6", type: SiAccordionComponent, isStandalone: true, selector: "si-accordion", inputs: { expandFirstPanel: { classPropertyName: "expandFirstPanel", publicName: "expandFirstPanel", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, hcollapsed: { classPropertyName: "hcollapsed", publicName: "hcollapsed", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.full-height": "fullHeight()", "class.hcollapsed": "collapsed()" } }, providers: [SiAccordionService], queries: [{ propertyName: "panels", predicate: SiCollapsiblePanelComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: '<div><ng-content /></div>', isInline: true, styles: [":host,:host>div{display:flex;flex-direction:column}:host.full-height{block-size:100%}:host.full-height>div{overflow-y:auto;flex:1 1 0}:host.full-height.hcollapsed>div{overflow-y:unset;flex-basis:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-accordion', template: '<div><ng-content /></div>', providers: [SiAccordionService], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.full-height]': 'fullHeight()',
+                        '[class.hcollapsed]': 'collapsed()'
+                    }, styles: [":host,:host>div{display:flex;flex-direction:column}:host.full-height{block-size:100%}:host.full-height>div{overflow-y:auto;flex:1 1 0}:host.full-height.hcollapsed>div{overflow-y:unset;flex-basis:auto}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiAccordionModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiAccordionModule, imports: [SiAccordionComponent, SiCollapsiblePanelComponent], exports: [SiAccordionComponent, SiCollapsiblePanelComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAccordionModule, imports: [SiCollapsiblePanelComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAccordionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SiAccordionComponent, SiCollapsiblePanelComponent],
+                    exports: [SiAccordionComponent, SiCollapsiblePanelComponent]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiAccordionComponent, SiAccordionHCollapseService, SiAccordionModule, SiAccordionService, SiCollapsiblePanelComponent };
+//# sourceMappingURL=siemens-element-ng-accordion.mjs.map