@fundamental-ngx/ui5-webcomponents-fiori 0.58.0-rc.0

package/fesm2022/fundamental-ngx-ui5-webcomponents-fiori.mjs

@@ -0,0 +1,4620 @@
+export { default as FCLLayout } from '@ui5/webcomponents-fiori/dist/types/FCLLayout.js';
+export { default as IllustrationMessageDesign } from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageDesign.js';
+export { default as IllustrationMessageType } from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
+export { default as MediaGalleryItemLayout } from '@ui5/webcomponents-fiori/dist/types/MediaGalleryItemLayout.js';
+export { default as MediaGalleryLayout } from '@ui5/webcomponents-fiori/dist/types/MediaGalleryLayout.js';
+export { default as MediaGalleryMenuHorizontalAlign } from '@ui5/webcomponents-fiori/dist/types/MediaGalleryMenuHorizontalAlign.js';
+export { default as MediaGalleryMenuVerticalAlign } from '@ui5/webcomponents-fiori/dist/types/MediaGalleryMenuVerticalAlign.js';
+export { default as NavigationLayoutMode } from '@ui5/webcomponents-fiori/dist/types/NavigationLayoutMode.js';
+export { default as NotificationListItemImportance } from '@ui5/webcomponents-fiori/dist/types/NotificationListItemImportance.js';
+export { default as PageBackgroundDesign } from '@ui5/webcomponents-fiori/dist/types/PageBackgroundDesign.js';
+export { default as SearchMode } from '@ui5/webcomponents-fiori/dist/types/SearchMode.js';
+export { default as SideContentFallDown } from '@ui5/webcomponents-fiori/dist/types/SideContentFallDown.js';
+export { default as SideContentPosition } from '@ui5/webcomponents-fiori/dist/types/SideContentPosition.js';
+export { default as SideContentVisibility } from '@ui5/webcomponents-fiori/dist/types/SideContentVisibility.js';
+export { default as SideNavigationItemDesign } from '@ui5/webcomponents-fiori/dist/types/SideNavigationItemDesign.js';
+export { default as TimelineGrowingMode } from '@ui5/webcomponents-fiori/dist/types/TimelineGrowingMode.js';
+export { default as TimelineLayout } from '@ui5/webcomponents-fiori/dist/types/TimelineLayout.js';
+export { default as UploadCollectionSelectionMode } from '@ui5/webcomponents-fiori/dist/types/UploadCollectionSelectionMode.js';
+export { default as UploadState } from '@ui5/webcomponents-fiori/dist/types/UploadState.js';
+export { default as ViewSettingsDialogMode } from '@ui5/webcomponents-fiori/dist/types/ViewSettingsDialogMode.js';
+export { default as WizardContentLayout } from '@ui5/webcomponents-fiori/dist/types/WizardContentLayout.js';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, ChangeDetectorRef, forwardRef, Directive, input, booleanAttribute, output, Injector, runInInjectionContext, effect, ChangeDetectionStrategy, Component, computed, signal, Injectable } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import '@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js';
+import '@ui5/webcomponents-fiori/dist/DynamicPage.js';
+import '@ui5/webcomponents-fiori/dist/DynamicPageHeader.js';
+import '@ui5/webcomponents-fiori/dist/DynamicPageTitle.js';
+import '@ui5/webcomponents-fiori/dist/DynamicSideContent.js';
+import '@ui5/webcomponents-fiori/dist/FilterItem.js';
+import '@ui5/webcomponents-fiori/dist/FilterItemOption.js';
+import '@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js';
+import '@ui5/webcomponents-fiori/dist/GroupItem.js';
+import '@ui5/webcomponents-fiori/dist/IllustratedMessage.js';
+import '@ui5/webcomponents-fiori/dist/MediaGallery.js';
+import '@ui5/webcomponents-fiori/dist/MediaGalleryItem.js';
+import '@ui5/webcomponents-fiori/dist/NavigationLayout.js';
+import '@ui5/webcomponents-fiori/dist/NotificationList.js';
+import '@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js';
+import '@ui5/webcomponents-fiori/dist/NotificationListItem.js';
+import '@ui5/webcomponents-fiori/dist/Page.js';
+import '@ui5/webcomponents-fiori/dist/ProductSwitch.js';
+import '@ui5/webcomponents-fiori/dist/ProductSwitchItem.js';
+import '@ui5/webcomponents-fiori/dist/Search.js';
+import '@ui5/webcomponents-fiori/dist/SearchItem.js';
+import '@ui5/webcomponents-fiori/dist/SearchItemGroup.js';
+import '@ui5/webcomponents-fiori/dist/SearchItemShowMore.js';
+import '@ui5/webcomponents-fiori/dist/SearchMessageArea.js';
+import '@ui5/webcomponents-fiori/dist/SearchScope.js';
+import '@ui5/webcomponents-fiori/dist/ShellBar.js';
+import '@ui5/webcomponents-fiori/dist/ShellBarBranding.js';
+import '@ui5/webcomponents-fiori/dist/ShellBarItem.js';
+import '@ui5/webcomponents-fiori/dist/ShellBarSearch.js';
+import '@ui5/webcomponents-fiori/dist/ShellBarSpacer.js';
+import '@ui5/webcomponents-fiori/dist/SideNavigation.js';
+import '@ui5/webcomponents-fiori/dist/SideNavigationGroup.js';
+import '@ui5/webcomponents-fiori/dist/SideNavigationItem.js';
+import '@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js';
+import '@ui5/webcomponents-fiori/dist/SortItem.js';
+import '@ui5/webcomponents-fiori/dist/Timeline.js';
+import '@ui5/webcomponents-fiori/dist/TimelineGroupItem.js';
+import '@ui5/webcomponents-fiori/dist/TimelineItem.js';
+import '@ui5/webcomponents-fiori/dist/UploadCollection.js';
+import '@ui5/webcomponents-fiori/dist/UploadCollectionItem.js';
+import '@ui5/webcomponents-fiori/dist/UserMenu.js';
+import '@ui5/webcomponents-fiori/dist/UserMenuAccount.js';
+import '@ui5/webcomponents-fiori/dist/UserMenuItem.js';
+import '@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js';
+import '@ui5/webcomponents-fiori/dist/UserSettingsDialog.js';
+import '@ui5/webcomponents-fiori/dist/UserSettingsItem.js';
+import '@ui5/webcomponents-fiori/dist/UserSettingsView.js';
+import '@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js';
+import '@ui5/webcomponents-fiori/dist/Wizard.js';
+import '@ui5/webcomponents-fiori/dist/WizardStep.js';
+import { WebcomponentsThemingProvider } from '@fundamental-ngx/ui5-webcomponents-base/theming';
+
+class GenericControlValueAccessor {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this._value = null;
+        this._initialized = false;
+        this.setDisabledState = (isDisabled) => {
+            const element = this.elementRef.nativeElement;
+            if (element && this._initialized) {
+                element.disabled = isDisabled;
+                // Manually trigger change detection for zoneless compatibility
+                this.cdr.markForCheck();
+            }
+        };
+    }
+    ngAfterViewInit() {
+        // Initialize after the UI5 web component is ready
+        // Use requestAnimationFrame for zoneless compatibility instead of setTimeout
+        requestAnimationFrame(() => {
+            this.initializeComponent();
+        });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(val) {
+        this._value = val;
+        if (this._initialized) {
+            this.updateElementValue(val);
+        }
+    }
+    initializeComponent() {
+        const element = this.elementRef.nativeElement;
+        this._initialized = true;
+        // Set up event listeners on the UI5 web component
+        if (element && element.addEventListener) {
+            element.addEventListener('input', (e) => {
+                if (this.onChange) {
+                    this.onChange(e.target.value);
+                    // Manually trigger change detection for zoneless compatibility
+                    this.cdr.markForCheck();
+                }
+            });
+            element.addEventListener('change', (e) => {
+                if (this.onChange) {
+                    this.onChange(e.target.value);
+                    // Manually trigger change detection for zoneless compatibility
+                    this.cdr.markForCheck();
+                }
+            });
+            element.addEventListener('focusout', () => {
+                if (this.onTouched) {
+                    this.onTouched();
+                    // Manually trigger change detection for zoneless compatibility
+                    this.cdr.markForCheck();
+                }
+            });
+        }
+        // Set initial value if we have one pending
+        if (this._value !== null) {
+            this.updateElementValue(this._value);
+        }
+    }
+    updateElementValue(value) {
+        const element = this.elementRef.nativeElement;
+        if (element && this._initialized) {
+            element.value = value || '';
+            // Manually trigger change detection for zoneless compatibility
+            this.cdr.markForCheck();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GenericControlValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: GenericControlValueAccessor, isStandalone: true, selector: "[noop]", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => GenericControlValueAccessor),
+                multi: true
+            }
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GenericControlValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[noop]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GenericControlValueAccessor),
+                            multi: true
+                        }
+                    ]
+                }]
+        }] });
+
+class BarcodeScannerDialog {
+    constructor() {
+        /**
+         * Indicates whether the dialog is open.
+         */
+        this.open = input(false, ...(ngDevMode ? [{ debugName: "open", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        /**
+         * Fired when the user closes the component.
+         */
+        this.ui5Close = output();
+        /**
+         * Fires when the scan is completed successfuuly.
+         */
+        this.ui5ScanSuccess = output();
+        /**
+         * Fires when the scan fails with error.
+         */
+        this.ui5ScanError = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'open',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Close',
+            'ui5ScanSuccess',
+            'ui5ScanError',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BarcodeScannerDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: BarcodeScannerDialog, isStandalone: true, selector: "ui5-barcode-scanner-dialog, [ui5-barcode-scanner-dialog]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Close: "ui5Close", ui5ScanSuccess: "ui5ScanSuccess", ui5ScanError: "ui5ScanError" }, exportAs: ["ui5BarcodeScannerDialog"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BarcodeScannerDialog, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-barcode-scanner-dialog, [ui5-barcode-scanner-dialog]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5BarcodeScannerDialog',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class DynamicPage {
+    constructor() {
+        /**
+         * Defines if the pin button is hidden.
+         */
+        this.hidePinButton = input(false, ...(ngDevMode ? [{ debugName: "hidePinButton", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines if the header is pinned.
+         */
+        this.headerPinned = input(false, ...(ngDevMode ? [{ debugName: "headerPinned", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines if the footer is shown.
+         */
+        this.showFooter = input(false, ...(ngDevMode ? [{ debugName: "showFooter", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines if the header is snapped.
+         */
+        this.headerSnapped = input(false, ...(ngDevMode ? [{ debugName: "headerSnapped", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        /**
+         * Fired when the pin header button is toggled.
+         */
+        this.ui5PinButtonToggle = output();
+        /**
+         * Fired when the expand/collapse area of the title is toggled.
+         */
+        this.ui5TitleToggle = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'hidePinButton',
+            'headerPinned',
+            'showFooter',
+            'headerSnapped',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5PinButtonToggle',
+            'ui5TitleToggle',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DynamicPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: DynamicPage, isStandalone: true, selector: "ui5-dynamic-page, [ui5-dynamic-page]", inputs: { hidePinButton: { classPropertyName: "hidePinButton", publicName: "hidePinButton", isSignal: true, isRequired: false, transformFunction: null }, headerPinned: { classPropertyName: "headerPinned", publicName: "headerPinned", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, headerSnapped: { classPropertyName: "headerSnapped", publicName: "headerSnapped", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5PinButtonToggle: "ui5PinButtonToggle", ui5TitleToggle: "ui5TitleToggle" }, exportAs: ["ui5DynamicPage"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DynamicPage, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-dynamic-page, [ui5-dynamic-page]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5DynamicPage',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class DynamicPageHeader {
+    constructor() {
+        // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DynamicPageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: DynamicPageHeader, isStandalone: true, selector: "ui5-dynamic-page-header, [ui5-dynamic-page-header]", exportAs: ["ui5DynamicPageHeader"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DynamicPageHeader, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-dynamic-page-header, [ui5-dynamic-page-header]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5DynamicPageHeader',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class DynamicPageTitle {
+    constructor() {
+        // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DynamicPageTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: DynamicPageTitle, isStandalone: true, selector: "ui5-dynamic-page-title, [ui5-dynamic-page-title]", exportAs: ["ui5DynamicPageTitle"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DynamicPageTitle, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-dynamic-page-title, [ui5-dynamic-page-title]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5DynamicPageTitle',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class DynamicSideContent {
+    constructor() {
+        /**
+         * Defines the visibility of the main content.
+         */
+        this.hideMainContent = input(false, ...(ngDevMode ? [{ debugName: "hideMainContent", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the visibility of the side content.
+         */
+        this.hideSideContent = input(false, ...(ngDevMode ? [{ debugName: "hideSideContent", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines whether the side content is positioned before the main content (left side
+      in LTR mode), or after the the main content (right side in LTR mode).
+         */
+        this.sideContentPosition = input("End", ...(ngDevMode ? [{ debugName: "sideContentPosition" }] : []));
+        /**
+         * Defines on which breakpoints the side content is visible.
+         */
+        this.sideContentVisibility = input("ShowAboveS", ...(ngDevMode ? [{ debugName: "sideContentVisibility" }] : []));
+        /**
+         * Defines on which breakpoints the side content falls down below the main content.
+         */
+        this.sideContentFallDown = input("OnMinimumWidth", ...(ngDevMode ? [{ debugName: "sideContentFallDown" }] : []));
+        /**
+         * Defines whether the component is in equal split mode. In this mode, the side and
+      the main content take 50:50 percent of the container on all screen sizes
+      except for phone, where the main and side contents are switching visibility
+      using the toggle method.
+         */
+        this.equalSplit = input(false, ...(ngDevMode ? [{ debugName: "equalSplit", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines additional accessibility attributes on different areas of the component.
+      
+      The accessibilityAttributes object has the following fields:
+      
+       - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.
+       - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.
+         */
+        this.accessibilityAttributes = input({}, ...(ngDevMode ? [{ debugName: "accessibilityAttributes" }] : [])); // className is now passed
+        /**
+         * Fires when the current breakpoint has been changed.
+         */
+        this.ui5LayoutChange = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'hideMainContent',
+            'hideSideContent',
+            'sideContentPosition',
+            'sideContentVisibility',
+            'sideContentFallDown',
+            'equalSplit',
+            'accessibilityAttributes',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5LayoutChange',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DynamicSideContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: DynamicSideContent, isStandalone: true, selector: "ui5-dynamic-side-content, [ui5-dynamic-side-content]", inputs: { hideMainContent: { classPropertyName: "hideMainContent", publicName: "hideMainContent", isSignal: true, isRequired: false, transformFunction: null }, hideSideContent: { classPropertyName: "hideSideContent", publicName: "hideSideContent", isSignal: true, isRequired: false, transformFunction: null }, sideContentPosition: { classPropertyName: "sideContentPosition", publicName: "sideContentPosition", isSignal: true, isRequired: false, transformFunction: null }, sideContentVisibility: { classPropertyName: "sideContentVisibility", publicName: "sideContentVisibility", isSignal: true, isRequired: false, transformFunction: null }, sideContentFallDown: { classPropertyName: "sideContentFallDown", publicName: "sideContentFallDown", isSignal: true, isRequired: false, transformFunction: null }, equalSplit: { classPropertyName: "equalSplit", publicName: "equalSplit", isSignal: true, isRequired: false, transformFunction: null }, accessibilityAttributes: { classPropertyName: "accessibilityAttributes", publicName: "accessibilityAttributes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5LayoutChange: "ui5LayoutChange" }, exportAs: ["ui5DynamicSideContent"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DynamicSideContent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-dynamic-side-content, [ui5-dynamic-side-content]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5DynamicSideContent',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class FilterItem {
+    constructor() {
+        /**
+         * Defines the text of the filter item.
+         */
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        /**
+         * Defines the additional text of the filter item.
+      This text is typically used to show the number of selected filter options within this category.
+         */
+        this.additionalText = input(...(ngDevMode ? [undefined, { debugName: "additionalText" }] : [])); // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'text',
+            'additionalText',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FilterItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: FilterItem, isStandalone: true, selector: "ui5-filter-item, [ui5-filter-item]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, additionalText: { classPropertyName: "additionalText", publicName: "additionalText", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5FilterItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FilterItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-filter-item, [ui5-filter-item]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5FilterItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class FilterItemOption {
+    constructor() {
+        /**
+         * Defines the text of the filter option.
+         */
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        /**
+         * Defines if the filter option is selected.
+         */
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'text',
+            'selected',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FilterItemOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: FilterItemOption, isStandalone: true, selector: "ui5-filter-item-option, [ui5-filter-item-option]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5FilterItemOption"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FilterItemOption, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-filter-item-option, [ui5-filter-item-option]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5FilterItemOption',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class FlexibleColumnLayout {
+    constructor() {
+        /**
+         * Defines the columns layout and their proportion.
+      
+      **Note:** The layout also depends on the screen size - one column for screens smaller than 599px,
+      two columns between 599px and 1023px and three columns for sizes bigger than 1023px.
+      
+      **For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns
+      in 67%/33% proportion.
+         */
+        this.layout = input("OneColumn", ...(ngDevMode ? [{ debugName: "layout" }] : []));
+        /**
+         * Specifies if the user is allowed to change the columns layout by dragging the separator between the columns.
+         */
+        this.disableResizing = input(false, ...(ngDevMode ? [{ debugName: "disableResizing", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines additional accessibility attributes on different areas of the component.
+      
+      The accessibilityAttributes object has the following fields,
+      where each field is an object supporting one or more accessibility attributes:
+      
+       - **startColumn**: `startColumn.role` and `startColumn.name`.
+       - **midColumn**: `midColumn.role` and `midColumn.name`.
+       - **endColumn**: `endColumn.role` and `endColumn.name`.
+       - **startSeparator**: `startSeparator.role` and `startSeparator.name`.
+       - **endSeparator**: `endSeparator.role` and `endSeparator.name`.
+      
+      The accessibility attributes support the following values:
+      
+      - **role**: Defines the accessible ARIA landmark role of the area.
+      Accepts the following values: `none`, `complementary`, `contentinfo`, `main` or `region`.
+      
+      - **name**: Defines the accessible ARIA name of the area.
+      Accepts any string.
+         */
+        this.accessibilityAttributes = input({}, ...(ngDevMode ? [{ debugName: "accessibilityAttributes" }] : []));
+        /**
+         * Allows to customize the column proportions per screen size and layout.
+      If no custom proportion provided for a specific layout, the default will be used.
+      
+      **Notes:**
+      
+      - The proportions should be given in percentages. For example ["30%", "40%", "30%"], ["70%", "30%", 0], etc.
+      - The proportions should add up to 100%.
+      - Hidden columns are marked as "0px", e.g. ["0px", "70%", "30%"]. Specifying 0 or "0%" for hidden columns is also valid.
+      - If the proportions do not match the layout (e.g. if provided proportions ["70%", "30%", "0px"] for "OneColumn" layout), then the default proportions will be used instead.
+      - Whenever the user drags the columns separator to resize the columns, the `layoutsConfiguration` object will be updated with the user-specified proportions for the given layout (and the `layout-configuration-change` event will be fired).
+      - No custom configuration available for the phone screen size, as the default of 100% column width is always used there.
+         */
+        this.layoutsConfiguration = input({}, ...(ngDevMode ? [{ debugName: "layoutsConfiguration" }] : [])); // className is now passed
+        /**
+         * Returns the current column layout, based on both the `layout` property and the screen size.
+      
+      **For example:** ["67%", "33%", 0], ["100%", 0, 0], ["25%", "50%", "25%"], etc,
+      where the numbers represents the width of the start, middle and end columns.
+         * @readonly This property is managed by the web component and updates reactively.
+         * Based on schema: readonly field that updates via layout-change event parameters.
+         */
+        this.columnLayout = computed(() => this._columnLayoutSignal(), ...(ngDevMode ? [{ debugName: "columnLayout" }] : []));
+        /**
+         * Returns if the `start` column is visible.
+         * @readonly This property is managed by the web component and updates reactively.
+         * Based on schema: readonly field that updates via layout-change event parameters.
+         */
+        this.startColumnVisible = computed(() => this._startColumnVisibleSignal(), ...(ngDevMode ? [{ debugName: "startColumnVisible" }] : []));
+        /**
+         * Returns if the `middle` column is visible.
+         * @readonly This property is managed by the web component and updates reactively.
+         * Based on schema: readonly field that updates via layout-change event parameters.
+         */
+        this.midColumnVisible = computed(() => this._midColumnVisibleSignal(), ...(ngDevMode ? [{ debugName: "midColumnVisible" }] : []));
+        /**
+         * Returns if the `end` column is visible.
+         * @readonly This property is managed by the web component and updates reactively.
+         * Based on schema: readonly field that updates via layout-change event parameters.
+         */
+        this.endColumnVisible = computed(() => this._endColumnVisibleSignal(), ...(ngDevMode ? [{ debugName: "endColumnVisible" }] : []));
+        /**
+         * Fired when the layout changes via user interaction by dragging the separators
+      or by changing the component size due to resizing.
+         */
+        this.ui5LayoutChange = output();
+        /**
+         * Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators.
+         */
+        this.ui5LayoutConfigurationChange = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+        // Internal signal to track columnLayout from layout-change events
+        this._columnLayoutSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "_columnLayoutSignal" }] : []));
+        // Internal signal to track startColumnVisible from layout-change events
+        this._startColumnVisibleSignal = signal(true, ...(ngDevMode ? [{ debugName: "_startColumnVisibleSignal" }] : []));
+        // Internal signal to track midColumnVisible from layout-change events
+        this._midColumnVisibleSignal = signal(false, ...(ngDevMode ? [{ debugName: "_midColumnVisibleSignal" }] : []));
+        // Internal signal to track endColumnVisible from layout-change events
+        this._endColumnVisibleSignal = signal(false, ...(ngDevMode ? [{ debugName: "_endColumnVisibleSignal" }] : []));
+    }
+    /**
+     * Returns the number of currently visible columns.
+     * @readonly This property is managed by the web component.
+     */
+    get visibleColumns() {
+        return this.element?.visibleColumns ?? 1;
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'layout',
+            'disableResizing',
+            'accessibilityAttributes',
+            'layoutsConfiguration',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5LayoutChange',
+            'ui5LayoutConfigurationChange',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    // Update columnLayout signal when layout-change event fires
+                    if (eventName === 'layout-change') {
+                        const customEvent = e;
+                        // Use columnLayout from event detail, fallback to web component property
+                        const columnLayoutValue = customEvent.detail?.columnLayout || wcElement.columnLayout || undefined;
+                        this._columnLayoutSignal.set(columnLayoutValue);
+                    }
+                    // Update columnLayout signal when layout-configuration-change event fires
+                    if (eventName === 'layout-configuration-change') {
+                        const customEvent = e;
+                        // Use columnLayout from event detail, fallback to web component property
+                        const columnLayoutValue = customEvent.detail?.columnLayout || wcElement.columnLayout || undefined;
+                        this._columnLayoutSignal.set(columnLayoutValue);
+                    }
+                    // Update startColumnVisible signal when layout-change event fires
+                    if (eventName === 'layout-change') {
+                        const customEvent = e;
+                        // Use startColumnVisible from event detail, fallback to web component property
+                        const startColumnVisibleValue = customEvent.detail?.startColumnVisible || wcElement.startColumnVisible || true;
+                        this._startColumnVisibleSignal.set(startColumnVisibleValue);
+                    }
+                    // Update midColumnVisible signal when layout-change event fires
+                    if (eventName === 'layout-change') {
+                        const customEvent = e;
+                        // Use midColumnVisible from event detail, fallback to web component property
+                        const midColumnVisibleValue = customEvent.detail?.midColumnVisible || wcElement.midColumnVisible || false;
+                        this._midColumnVisibleSignal.set(midColumnVisibleValue);
+                    }
+                    // Update endColumnVisible signal when layout-change event fires
+                    if (eventName === 'layout-change') {
+                        const customEvent = e;
+                        // Use endColumnVisible from event detail, fallback to web component property
+                        const endColumnVisibleValue = customEvent.detail?.endColumnVisible || wcElement.endColumnVisible || false;
+                        this._endColumnVisibleSignal.set(endColumnVisibleValue);
+                    }
+                    this[outputName].emit(e);
+                });
+            }
+        }
+        // Initialize columnLayout signal with current state using delayed initialization
+        // to handle web component timing properly
+        const initializeColumnLayout = () => {
+            const currentValue = wcElement.columnLayout || undefined;
+            if (JSON.stringify(currentValue) !== JSON.stringify(this._columnLayoutSignal())) {
+                this._columnLayoutSignal.set(currentValue);
+            }
+        };
+        // Try immediate initialization
+        initializeColumnLayout();
+        // Fallback delayed initialization if web component needs more time
+        // Use requestAnimationFrame for zoneless compatibility
+        requestAnimationFrame(() => initializeColumnLayout());
+        // Initialize startColumnVisible signal with current state using delayed initialization
+        // to handle web component timing properly
+        const initializeStartColumnVisible = () => {
+            const currentValue = wcElement.startColumnVisible || true;
+            if (JSON.stringify(currentValue) !== JSON.stringify(this._startColumnVisibleSignal())) {
+                this._startColumnVisibleSignal.set(currentValue);
+            }
+        };
+        // Try immediate initialization
+        initializeStartColumnVisible();
+        // Fallback delayed initialization if web component needs more time
+        // Use requestAnimationFrame for zoneless compatibility
+        requestAnimationFrame(() => initializeStartColumnVisible());
+        // Initialize midColumnVisible signal with current state using delayed initialization
+        // to handle web component timing properly
+        const initializeMidColumnVisible = () => {
+            const currentValue = wcElement.midColumnVisible || false;
+            if (JSON.stringify(currentValue) !== JSON.stringify(this._midColumnVisibleSignal())) {
+                this._midColumnVisibleSignal.set(currentValue);
+            }
+        };
+        // Try immediate initialization
+        initializeMidColumnVisible();
+        // Fallback delayed initialization if web component needs more time
+        // Use requestAnimationFrame for zoneless compatibility
+        requestAnimationFrame(() => initializeMidColumnVisible());
+        // Initialize endColumnVisible signal with current state using delayed initialization
+        // to handle web component timing properly
+        const initializeEndColumnVisible = () => {
+            const currentValue = wcElement.endColumnVisible || false;
+            if (JSON.stringify(currentValue) !== JSON.stringify(this._endColumnVisibleSignal())) {
+                this._endColumnVisibleSignal.set(currentValue);
+            }
+        };
+        // Try immediate initialization
+        initializeEndColumnVisible();
+        // Fallback delayed initialization if web component needs more time
+        // Use requestAnimationFrame for zoneless compatibility
+        requestAnimationFrame(() => initializeEndColumnVisible());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FlexibleColumnLayout, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: FlexibleColumnLayout, isStandalone: true, selector: "ui5-flexible-column-layout, [ui5-flexible-column-layout]", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, disableResizing: { classPropertyName: "disableResizing", publicName: "disableResizing", isSignal: true, isRequired: false, transformFunction: null }, accessibilityAttributes: { classPropertyName: "accessibilityAttributes", publicName: "accessibilityAttributes", isSignal: true, isRequired: false, transformFunction: null }, layoutsConfiguration: { classPropertyName: "layoutsConfiguration", publicName: "layoutsConfiguration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5LayoutChange: "ui5LayoutChange", ui5LayoutConfigurationChange: "ui5LayoutConfigurationChange" }, exportAs: ["ui5FlexibleColumnLayout"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FlexibleColumnLayout, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-flexible-column-layout, [ui5-flexible-column-layout]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5FlexibleColumnLayout',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class GroupItem {
+    constructor() {
+        /**
+         * Defines the text of the group item.
+         */
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        /**
+         * Defines if the group item is selected.
+         */
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'text',
+            'selected',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GroupItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: GroupItem, isStandalone: true, selector: "ui5-group-item, [ui5-group-item]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5GroupItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GroupItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-group-item, [ui5-group-item]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5GroupItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class IllustratedMessage {
+    constructor() {
+        /**
+         * Defines the illustration name that will be displayed in the component.
+      
+      Example:
+      
+      `name='BeforeSearch'`, `name='UnableToUpload'`, etc..
+      
+      **Note:** To use the TNT illustrations,
+      you need to set the `tnt` or `Tnt` prefix in front of the icon's name.
+      
+      Example:
+      
+      `name='tnt/Avatar'` or `name='TntAvatar'`.
+      
+      **Note:** By default the `BeforeSearch` illustration is loaded.
+      When using an illustration type, other than the default, it should be loaded in addition:
+      
+      `import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js";`
+      
+      For TNT illustrations:
+      
+      `import "@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js";`
+         */
+        this.name = input("BeforeSearch", ...(ngDevMode ? [{ debugName: "name" }] : []));
+        /**
+         * Determines which illustration breakpoint variant is used.
+      
+      As `IllustratedMessage` adapts itself around the `Illustration`, the other
+      elements of the component are displayed differently on the different breakpoints/illustration designs.
+         */
+        this.design = input("Auto", ...(ngDevMode ? [{ debugName: "design" }] : []));
+        /**
+         * Defines the subtitle of the component.
+      
+      **Note:** Using this property, the default subtitle text of illustration will be overwritten.
+      
+      **Note:** Using `subtitle` slot, the default of this property will be overwritten.
+         */
+        this.subtitleText = input(...(ngDevMode ? [undefined, { debugName: "subtitleText" }] : []));
+        /**
+         * Defines the title of the component.
+      
+      **Note:** Using this property, the default title text of illustration will be overwritten.
+         */
+        this.titleText = input(...(ngDevMode ? [undefined, { debugName: "titleText" }] : []));
+        /**
+         * Receives id(or many ids) of the elements that label the component.
+         */
+        this.accessibleNameRef = input(...(ngDevMode ? [undefined, { debugName: "accessibleNameRef" }] : []));
+        /**
+         * Defines whether the illustration is decorative.
+      
+      When set to `true`, the attributes `role="presentation"` and `aria-hidden="true"` are applied to the SVG element.
+         */
+        this.decorative = input(false, ...(ngDevMode ? [{ debugName: "decorative", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'name',
+            'design',
+            'subtitleText',
+            'titleText',
+            'accessibleNameRef',
+            'decorative',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: IllustratedMessage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: IllustratedMessage, isStandalone: true, selector: "ui5-illustrated-message, [ui5-illustrated-message]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, subtitleText: { classPropertyName: "subtitleText", publicName: "subtitleText", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5IllustratedMessage"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: IllustratedMessage, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-illustrated-message, [ui5-illustrated-message]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5IllustratedMessage',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class MediaGallery {
+    constructor() {
+        /**
+         * If set to `true`, all thumbnails are rendered in a scrollable container.
+      If `false`, only up to five thumbnails are rendered, followed by
+      an overflow button that shows the count of the remaining thumbnails.
+         */
+        this.showAllThumbnails = input(false, ...(ngDevMode ? [{ debugName: "showAllThumbnails", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * If enabled, a `display-area-click` event is fired
+      when the user clicks or taps on the display area.
+      
+      The display area is the central area that contains
+      the enlarged content of the currently selected item.
+         */
+        this.interactiveDisplayArea = input(false, ...(ngDevMode ? [{ debugName: "interactiveDisplayArea", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Determines the layout of the component.
+         */
+        this.layout = input("Auto", ...(ngDevMode ? [{ debugName: "layout" }] : []));
+        /**
+         * Determines the horizontal alignment of the thumbnails menu
+      vs. the central display area.
+         */
+        this.menuHorizontalAlign = input("Left", ...(ngDevMode ? [{ debugName: "menuHorizontalAlign" }] : []));
+        /**
+         * Determines the vertical alignment of the thumbnails menu
+      vs. the central display area.
+         */
+        this.menuVerticalAlign = input("Bottom", ...(ngDevMode ? [{ debugName: "menuVerticalAlign" }] : [])); // className is now passed
+        /**
+         * Fired when selection is changed by user interaction.
+         */
+        this.ui5SelectionChange = output();
+        /**
+         * Fired when the thumbnails overflow button is clicked.
+         */
+        this.ui5OverflowClick = output();
+        /**
+         * Fired when the display area is clicked.
+      The display area is the central area that contains
+      the enlarged content of the currently selected item.
+         */
+        this.ui5DisplayAreaClick = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'showAllThumbnails',
+            'interactiveDisplayArea',
+            'layout',
+            'menuHorizontalAlign',
+            'menuVerticalAlign',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5SelectionChange',
+            'ui5OverflowClick',
+            'ui5DisplayAreaClick',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MediaGallery, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: MediaGallery, isStandalone: true, selector: "ui5-media-gallery, [ui5-media-gallery]", inputs: { showAllThumbnails: { classPropertyName: "showAllThumbnails", publicName: "showAllThumbnails", isSignal: true, isRequired: false, transformFunction: null }, interactiveDisplayArea: { classPropertyName: "interactiveDisplayArea", publicName: "interactiveDisplayArea", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, menuHorizontalAlign: { classPropertyName: "menuHorizontalAlign", publicName: "menuHorizontalAlign", isSignal: true, isRequired: false, transformFunction: null }, menuVerticalAlign: { classPropertyName: "menuVerticalAlign", publicName: "menuVerticalAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5SelectionChange: "ui5SelectionChange", ui5OverflowClick: "ui5OverflowClick", ui5DisplayAreaClick: "ui5DisplayAreaClick" }, exportAs: ["ui5MediaGallery"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MediaGallery, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-media-gallery, [ui5-media-gallery]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5MediaGallery',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class MediaGalleryItem {
+    constructor() {
+        /**
+         * Defines the selected state of the component.
+         */
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines whether the component is in disabled state.
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Determines the layout of the item container.
+         */
+        this.layout = input("Square", ...(ngDevMode ? [{ debugName: "layout" }] : [])); // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'selected',
+            'disabled',
+            'layout',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MediaGalleryItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: MediaGalleryItem, isStandalone: true, selector: "ui5-media-gallery-item, [ui5-media-gallery-item]", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5MediaGalleryItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MediaGalleryItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-media-gallery-item, [ui5-media-gallery-item]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5MediaGalleryItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class NavigationLayout {
+    constructor() {
+        /**
+         * Specifies the navigation layout mode.
+         */
+        this.mode = input("Auto", ...(ngDevMode ? [{ debugName: "mode" }] : [])); // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'mode',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NavigationLayout, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NavigationLayout, isStandalone: true, selector: "ui5-navigation-layout, [ui5-navigation-layout]", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5NavigationLayout"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NavigationLayout, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-navigation-layout, [ui5-navigation-layout]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5NavigationLayout',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class NotificationList {
+    constructor() {
+        /**
+         * Defines the text that is displayed when the component contains no items.
+         */
+        this.noDataText = input(...(ngDevMode ? [undefined, { debugName: "noDataText" }] : [])); // className is now passed
+        /**
+         * Fired when an item is clicked.
+         */
+        this.ui5ItemClick = output();
+        /**
+         * Fired when the `Close` button of any item is clicked.
+         */
+        this.ui5ItemClose = output();
+        /**
+         * Fired when an item is toggled.
+         */
+        this.ui5ItemToggle = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'noDataText',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5ItemClick',
+            'ui5ItemClose',
+            'ui5ItemToggle',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NotificationList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NotificationList, isStandalone: true, selector: "ui5-notification-list, [ui5-notification-list]", inputs: { noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5ItemClick: "ui5ItemClick", ui5ItemClose: "ui5ItemClose", ui5ItemToggle: "ui5ItemToggle" }, exportAs: ["ui5NotificationList"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NotificationList, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-notification-list, [ui5-notification-list]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5NotificationList',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class NotificationListGroupItem {
+    constructor() {
+        /**
+         * Defines if the group is collapsed or expanded.
+         */
+        this.collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines whether the component will have growing capability by pressing a `More` button.
+      When button is pressed `load-more` event will be fired.
+         */
+        this.growing = input("None", ...(ngDevMode ? [{ debugName: "growing" }] : []));
+        /**
+         * Defines the `titleText` of the item.
+         */
+        this.titleText = input(...(ngDevMode ? [undefined, { debugName: "titleText" }] : []));
+        /**
+         * Defines if the `notification` is new or has been already read.
+      
+      **Note:** if set to `false` the `titleText` has bold font,
+      if set to true - it has a normal font.
+         */
+        this.read = input(false, ...(ngDevMode ? [{ debugName: "read", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines if a busy indicator would be displayed over the item.
+         */
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
+         */
+        this.loadingDelay = input(1000, ...(ngDevMode ? [{ debugName: "loadingDelay" }] : [])); // className is now passed
+        /**
+         * Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction.
+         */
+        this.ui5Toggle = output();
+        /**
+         * Fired when additional items are requested.
+         */
+        this.ui5LoadMore = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'collapsed',
+            'growing',
+            'titleText',
+            'read',
+            'loading',
+            'loadingDelay',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Toggle',
+            'ui5LoadMore',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NotificationListGroupItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NotificationListGroupItem, isStandalone: true, selector: "ui5-li-notification-group, [ui5-li-notification-group]", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, growing: { classPropertyName: "growing", publicName: "growing", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, read: { classPropertyName: "read", publicName: "read", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingDelay: { classPropertyName: "loadingDelay", publicName: "loadingDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Toggle: "ui5Toggle", ui5LoadMore: "ui5LoadMore" }, exportAs: ["ui5NotificationListGroupItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NotificationListGroupItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-li-notification-group, [ui5-li-notification-group]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5NotificationListGroupItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class NotificationListItem {
+    constructor() {
+        /**
+         * Defines if the `titleText` and `description` should wrap,
+      they truncate by default.
+      
+      **Note:** by default the `titleText` and `description`,
+      and a `ShowMore/Less` button would be displayed.
+         */
+        this.wrappingType = input("None", ...(ngDevMode ? [{ debugName: "wrappingType" }] : []));
+        /**
+         * Defines the status indicator of the item.
+         */
+        this.state = input("None", ...(ngDevMode ? [{ debugName: "state" }] : []));
+        /**
+         * Defines if the `Close` button would be displayed.
+         */
+        this.showClose = input(false, ...(ngDevMode ? [{ debugName: "showClose", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the `Important` label of the item.
+         */
+        this.importance = input("Standard", ...(ngDevMode ? [{ debugName: "importance" }] : []));
+        /**
+         * Defines the `titleText` of the item.
+         */
+        this.titleText = input(...(ngDevMode ? [undefined, { debugName: "titleText" }] : []));
+        /**
+         * Defines if the `notification` is new or has been already read.
+      
+      **Note:** if set to `false` the `titleText` has bold font,
+      if set to true - it has a normal font.
+         */
+        this.read = input(false, ...(ngDevMode ? [{ debugName: "read", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines if a busy indicator would be displayed over the item.
+         */
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
+         */
+        this.loadingDelay = input(1000, ...(ngDevMode ? [{ debugName: "loadingDelay" }] : [])); // className is now passed
+        /**
+         * Fired when the `Close` button is pressed.
+         */
+        this.ui5Close = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'wrappingType',
+            'state',
+            'showClose',
+            'importance',
+            'titleText',
+            'read',
+            'loading',
+            'loadingDelay',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Close',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NotificationListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NotificationListItem, isStandalone: true, selector: "ui5-li-notification, [ui5-li-notification]", inputs: { wrappingType: { classPropertyName: "wrappingType", publicName: "wrappingType", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, importance: { classPropertyName: "importance", publicName: "importance", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, read: { classPropertyName: "read", publicName: "read", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingDelay: { classPropertyName: "loadingDelay", publicName: "loadingDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Close: "ui5Close" }, exportAs: ["ui5NotificationListItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NotificationListItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-li-notification, [ui5-li-notification]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5NotificationListItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class Page {
+    constructor() {
+        /**
+         * Defines the background color of the `ui5-page`.
+      
+      **Note:** When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.
+         */
+        this.backgroundDesign = input("Solid", ...(ngDevMode ? [{ debugName: "backgroundDesign" }] : []));
+        /**
+         * Disables vertical scrolling of page content.
+      If set to true, there will be no vertical scrolling at all.
+         */
+        this.noScrolling = input(false, ...(ngDevMode ? [{ debugName: "noScrolling", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines if the footer is fixed at the very bottom of the page.
+      
+      **Note:** When set to true the footer is fixed at the very bottom of the page, otherwise it floats over the content with a slight offset from the bottom.
+         */
+        this.fixedFooter = input(false, ...(ngDevMode ? [{ debugName: "fixedFooter", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the footer visibility.
+         */
+        this.hideFooter = input(false, ...(ngDevMode ? [{ debugName: "hideFooter", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'backgroundDesign',
+            'noScrolling',
+            'fixedFooter',
+            'hideFooter',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: Page, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: Page, isStandalone: true, selector: "ui5-page, [ui5-page]", inputs: { backgroundDesign: { classPropertyName: "backgroundDesign", publicName: "backgroundDesign", isSignal: true, isRequired: false, transformFunction: null }, noScrolling: { classPropertyName: "noScrolling", publicName: "noScrolling", isSignal: true, isRequired: false, transformFunction: null }, fixedFooter: { classPropertyName: "fixedFooter", publicName: "fixedFooter", isSignal: true, isRequired: false, transformFunction: null }, hideFooter: { classPropertyName: "hideFooter", publicName: "hideFooter", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5Page"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: Page, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-page, [ui5-page]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5Page',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class ProductSwitch {
+    constructor() {
+        // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ProductSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: ProductSwitch, isStandalone: true, selector: "ui5-product-switch, [ui5-product-switch]", exportAs: ["ui5ProductSwitch"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ProductSwitch, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-product-switch, [ui5-product-switch]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5ProductSwitch',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class ProductSwitchItem {
+    constructor() {
+        /**
+         * Defines the title of the component.
+         */
+        this.titleText = input(...(ngDevMode ? [undefined, { debugName: "titleText" }] : []));
+        /**
+         * Defines the subtitle of the component.
+         */
+        this.subtitleText = input(...(ngDevMode ? [undefined, { debugName: "subtitleText" }] : []));
+        /**
+         * Defines the icon to be displayed as a graphical element within the component.
+      
+      Example:
+      
+      `<ui5-product-switch-item icon="palette">`
+      
+      See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+         */
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        /**
+         * Defines a target where the `targetSrc` content must be open.
+      
+      Available options are:
+      
+      - `_self`
+      - `_top`
+      - `_blank`
+      - `_parent`
+      - `_search`
+      
+      **Note:** By default target will be open in the same frame as it was clicked.
+         */
+        this.target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : []));
+        /**
+         * Defines the component target URI. Supports standard hyperlink behavior.
+         */
+        this.targetSrc = input(...(ngDevMode ? [undefined, { debugName: "targetSrc" }] : [])); // className is now passed
+        /**
+         * Fired when the `ui5-product-switch-item` is activated either with a
+      click/tap or by using the Enter or Space key.
+         */
+        this.ui5Click = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'titleText',
+            'subtitleText',
+            'icon',
+            'target',
+            'targetSrc',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Click',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ProductSwitchItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: ProductSwitchItem, isStandalone: true, selector: "ui5-product-switch-item, [ui5-product-switch-item]", inputs: { titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, subtitleText: { classPropertyName: "subtitleText", publicName: "subtitleText", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, targetSrc: { classPropertyName: "targetSrc", publicName: "targetSrc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click" }, exportAs: ["ui5ProductSwitchItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ProductSwitchItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-product-switch-item, [ui5-product-switch-item]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5ProductSwitchItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class Search {
+    constructor() {
+        /**
+         * Indicates whether a loading indicator should be shown in the popup.
+         */
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines whether the value will be autcompleted to match an item.
+         */
+        this.noTypeahead = input(false, ...(ngDevMode ? [{ debugName: "noTypeahead", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Indicates whether the items picker is open.
+         */
+        this.open = input(false, ...(ngDevMode ? [{ debugName: "open", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines whether the clear icon of the search will be shown.
+         */
+        this.showClearIcon = input(false, ...(ngDevMode ? [{ debugName: "showClearIcon", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the value of the component.
+      
+      **Note:** The property is updated upon typing.
+         */
+        this.value = input("", ...(ngDevMode ? [{ debugName: "value" }] : []));
+        /**
+         * Defines a short hint intended to aid the user with data entry when the
+      component has no value.
+         */
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+        /**
+         * Defines the accessible ARIA name of the component.
+         */
+        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : []));
+        /**
+         * Defines the accessible ARIA description of the field.
+         */
+        this.accessibleDescription = input(...(ngDevMode ? [undefined, { debugName: "accessibleDescription" }] : [])); // className is now passed
+        /**
+         * Fired when the popup is opened.
+         */
+        this.ui5Open = output();
+        /**
+         * Fired when the popup is closed.
+         */
+        this.ui5Close = output();
+        /**
+         * Fired when typing in input or clear icon is pressed.
+         */
+        this.ui5Input = output();
+        /**
+         * Fired when the scope has changed.
+         */
+        this.ui5ScopeChange = output();
+        /**
+         * Fired when the user has triggered search with Enter key or Search Button press.
+         */
+        this.ui5Search = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'loading',
+            'noTypeahead',
+            'open',
+            'showClearIcon',
+            'value',
+            'placeholder',
+            'accessibleName',
+            'accessibleDescription',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Open',
+            'ui5Close',
+            'ui5Input',
+            'ui5ScopeChange',
+            'ui5Search',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: Search, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: Search, isStandalone: true, selector: "ui5-search, [ui5-search]", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, noTypeahead: { classPropertyName: "noTypeahead", publicName: "noTypeahead", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleDescription: { classPropertyName: "accessibleDescription", publicName: "accessibleDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Open: "ui5Open", ui5Close: "ui5Close", ui5Input: "ui5Input", ui5ScopeChange: "ui5ScopeChange", ui5Search: "ui5Search" }, exportAs: ["ui5Search"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: Search, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-search, [ui5-search]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5Search',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class SearchItem {
+    constructor() {
+        /**
+         * Defines the heading text of the search item.
+         */
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        /**
+         * Defines the description that appears right under the item text, if available.
+         */
+        this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+        /**
+         * Defines the icon name of the search item.
+      **Note:** If provided, the image slot will be ignored.
+         */
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        /**
+         * Defines whether the search item is selected.
+         */
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines whether the search item is deletable.
+         */
+        this.deletable = input(false, ...(ngDevMode ? [{ debugName: "deletable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the scope of the search item
+         */
+        this.scopeName = input(...(ngDevMode ? [undefined, { debugName: "scopeName" }] : [])); // className is now passed
+        /**
+         * Fired when delete button is pressed.
+         */
+        this.ui5Delete = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'text',
+            'description',
+            'icon',
+            'selected',
+            'deletable',
+            'scopeName',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Delete',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SearchItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: SearchItem, isStandalone: true, selector: "ui5-search-item, [ui5-search-item]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, scopeName: { classPropertyName: "scopeName", publicName: "scopeName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Delete: "ui5Delete" }, exportAs: ["ui5SearchItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SearchItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-search-item, [ui5-search-item]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5SearchItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class SearchItemGroup {
+    constructor() {
+        // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SearchItemGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: SearchItemGroup, isStandalone: true, selector: "ui5-search-item-group, [ui5-search-item-group]", exportAs: ["ui5SearchItemGroup"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SearchItemGroup, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-search-item-group, [ui5-search-item-group]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5SearchItemGroup',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class SearchItemShowMore {
+    constructor() {
+        /**
+         * Specifies the number of additional items available to show.
+      This value replaces the placeholder (N) in the "Show more (N)" text.
+      If not set, the placeholder will remain as (N).
+         */
+        this.itemsToShowCount = input(...(ngDevMode ? [undefined, { debugName: "itemsToShowCount" }] : []));
+        /**
+         * Defines whether the show more item is selected.
+         */
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        /**
+         * Fired when the component is activated, either with a mouse/tap
+      or by pressing the Enter or Space keys.
+         */
+        this.ui5Click = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'itemsToShowCount',
+            'selected',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Click',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SearchItemShowMore, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: SearchItemShowMore, isStandalone: true, selector: "ui5-search-item-show-more, [ui5-search-item-show-more]", inputs: { itemsToShowCount: { classPropertyName: "itemsToShowCount", publicName: "itemsToShowCount", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click" }, exportAs: ["ui5SearchItemShowMore"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SearchItemShowMore, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-search-item-show-more, [ui5-search-item-show-more]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5SearchItemShowMore',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class SearchMessageArea {
+    constructor() {
+        /**
+         * Defines the text to be displayed.
+         */
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        /**
+         * Defines the description text to be displayed.
+         */
+        this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : [])); // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'text',
+            'description',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SearchMessageArea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: SearchMessageArea, isStandalone: true, selector: "ui5-search-message-area, [ui5-search-message-area]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5SearchMessageArea"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SearchMessageArea, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-search-message-area, [ui5-search-message-area]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5SearchMessageArea',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class SearchScope {
+    constructor() {
+        /**
+         * Defines the text of the component.
+         */
+        this.text = input("", ...(ngDevMode ? [{ debugName: "text" }] : []));
+        /**
+         * Indicates whether the item is selected
+         */
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'text',
+            'selected',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SearchScope, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: SearchScope, isStandalone: true, selector: "ui5-search-scope, [ui5-search-scope]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5SearchScope"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SearchScope, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-search-scope, [ui5-search-scope]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5SearchScope',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class ShellBar {
+    constructor() {
+        /**
+         * Defines the visibility state of the search button.
+      
+      **Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.
+         */
+        this.hideSearchButton = input(false, ...(ngDevMode ? [{ debugName: "hideSearchButton", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Disables the automatic search field expansion/collapse when the available space is not enough.
+      
+      **Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.
+         */
+        this.disableSearchCollapse = input(false, ...(ngDevMode ? [{ debugName: "disableSearchCollapse", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the `primaryTitle`.
+      
+      **Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).
+         */
+        this.primaryTitle = input(...(ngDevMode ? [undefined, { debugName: "primaryTitle" }] : []));
+        /**
+         * Defines the `secondaryTitle`.
+      
+      **Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).
+         */
+        this.secondaryTitle = input(...(ngDevMode ? [undefined, { debugName: "secondaryTitle" }] : []));
+        /**
+         * Defines the `notificationsCount`,
+      displayed in the notification icon top-right corner.
+         */
+        this.notificationsCount = input(...(ngDevMode ? [undefined, { debugName: "notificationsCount" }] : []));
+        /**
+         * Defines, if the notification icon would be displayed.
+         */
+        this.showNotifications = input(false, ...(ngDevMode ? [{ debugName: "showNotifications", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines, if the product switch icon would be displayed.
+         */
+        this.showProductSwitch = input(false, ...(ngDevMode ? [{ debugName: "showProductSwitch", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines, if the Search Field would be displayed when there is a valid `searchField` slot.
+      
+      **Note:** By default the Search Field is not displayed.
+         */
+        this.showSearchField = input(false, ...(ngDevMode ? [{ debugName: "showSearchField", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines additional accessibility attributes on different areas of the component.
+      
+      The accessibilityAttributes object has the following fields,
+      where each field is an object supporting one or more accessibility attributes:
+      
+      - **logo** - `logo.role` and `logo.name`.
+      - **notifications** - `notifications.expanded` and `notifications.hasPopup`.
+      - **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.
+      - **product** - `product.expanded` and `product.hasPopup`.
+      - **search** - `search.hasPopup`.
+      - **overflow** - `overflow.expanded` and `overflow.hasPopup`.
+      - **branding** - `branding.name`.
+      
+      The accessibility attributes support the following values:
+      
+      - **role**: Defines the accessible ARIA role of the logo area.
+      Accepts the following string values: `button` or `link`.
+      
+      - **expanded**: Indicates whether the button, or another grouping element it controls,
+      is currently expanded or collapsed.
+      Accepts the following string values: `true` or `false`.
+      
+      - **hasPopup**: Indicates the availability and type of interactive popup element,
+      such as menu or dialog, that can be triggered by the button.
+      
+      Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
+      - **name**: Defines the accessible ARIA name of the area.
+      Accepts any string.
+         */
+        this.accessibilityAttributes = input({}, ...(ngDevMode ? [{ debugName: "accessibilityAttributes" }] : [])); // className is now passed
+        /**
+         * Fired, when the notification icon is activated.
+         */
+        this.ui5NotificationsClick = output();
+        /**
+         * Fired, when the profile slot is present.
+         */
+        this.ui5ProfileClick = output();
+        /**
+         * Fired, when the product switch icon is activated.
+      
+      **Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.
+         */
+        this.ui5ProductSwitchClick = output();
+        /**
+         * Fired, when the logo is activated.
+         */
+        this.ui5LogoClick = output();
+        /**
+         * Fired, when a menu item is activated
+      
+      **Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.
+         */
+        this.ui5MenuItemClick = output();
+        /**
+         * Fired, when the search button is activated.
+      
+      **Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.
+         */
+        this.ui5SearchButtonClick = output();
+        /**
+         * Fired, when the search field is expanded or collapsed.
+         */
+        this.ui5SearchFieldToggle = output();
+        /**
+         * Fired, when the search cancel button is activated.
+      
+      **Note:** You can prevent the default behavior (clearing the search field value) by calling `event.preventDefault()`. The search will still be closed.
+      **Note:** The `search-field-clear` event is in an experimental state and is a subject to change.
+         */
+        this.ui5SearchFieldClear = output();
+        /**
+         * Fired, when an item from the content slot is hidden or shown.
+      **Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change.
+         */
+        this.ui5ContentItemVisibilityChange = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    /**
+     * Returns the `logo` DOM ref.
+     * @readonly This property is managed by the web component.
+     */
+    get logoDomRef() {
+        return this.element?.logoDomRef ?? null;
+    }
+    /**
+     * Returns the `notifications` icon DOM ref.
+     * @readonly This property is managed by the web component.
+     */
+    get notificationsDomRef() {
+        return this.element?.notificationsDomRef ?? null;
+    }
+    /**
+     * Returns the `overflow` icon DOM ref.
+     * @readonly This property is managed by the web component.
+     */
+    get overflowDomRef() {
+        return this.element?.overflowDomRef ?? null;
+    }
+    /**
+     * Returns the `profile` icon DOM ref.
+     * @readonly This property is managed by the web component.
+     */
+    get profileDomRef() {
+        return this.element?.profileDomRef ?? null;
+    }
+    /**
+     * Returns the `product-switch` icon DOM ref.
+     * @readonly This property is managed by the web component.
+     */
+    get productSwitchDomRef() {
+        return this.element?.productSwitchDomRef ?? null;
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'hideSearchButton',
+            'disableSearchCollapse',
+            'primaryTitle',
+            'secondaryTitle',
+            'notificationsCount',
+            'showNotifications',
+            'showProductSwitch',
+            'showSearchField',
+            'accessibilityAttributes',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5NotificationsClick',
+            'ui5ProfileClick',
+            'ui5ProductSwitchClick',
+            'ui5LogoClick',
+            'ui5MenuItemClick',
+            'ui5SearchButtonClick',
+            'ui5SearchFieldToggle',
+            'ui5SearchFieldClear',
+            'ui5ContentItemVisibilityChange',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ShellBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: ShellBar, isStandalone: true, selector: "ui5-shellbar, [ui5-shellbar]", inputs: { hideSearchButton: { classPropertyName: "hideSearchButton", publicName: "hideSearchButton", isSignal: true, isRequired: false, transformFunction: null }, disableSearchCollapse: { classPropertyName: "disableSearchCollapse", publicName: "disableSearchCollapse", isSignal: true, isRequired: false, transformFunction: null }, primaryTitle: { classPropertyName: "primaryTitle", publicName: "primaryTitle", isSignal: true, isRequired: false, transformFunction: null }, secondaryTitle: { classPropertyName: "secondaryTitle", publicName: "secondaryTitle", isSignal: true, isRequired: false, transformFunction: null }, notificationsCount: { classPropertyName: "notificationsCount", publicName: "notificationsCount", isSignal: true, isRequired: false, transformFunction: null }, showNotifications: { classPropertyName: "showNotifications", publicName: "showNotifications", isSignal: true, isRequired: false, transformFunction: null }, showProductSwitch: { classPropertyName: "showProductSwitch", publicName: "showProductSwitch", isSignal: true, isRequired: false, transformFunction: null }, showSearchField: { classPropertyName: "showSearchField", publicName: "showSearchField", isSignal: true, isRequired: false, transformFunction: null }, accessibilityAttributes: { classPropertyName: "accessibilityAttributes", publicName: "accessibilityAttributes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5NotificationsClick: "ui5NotificationsClick", ui5ProfileClick: "ui5ProfileClick", ui5ProductSwitchClick: "ui5ProductSwitchClick", ui5LogoClick: "ui5LogoClick", ui5MenuItemClick: "ui5MenuItemClick", ui5SearchButtonClick: "ui5SearchButtonClick", ui5SearchFieldToggle: "ui5SearchFieldToggle", ui5SearchFieldClear: "ui5SearchFieldClear", ui5ContentItemVisibilityChange: "ui5ContentItemVisibilityChange" }, exportAs: ["ui5ShellBar"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ShellBar, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-shellbar, [ui5-shellbar]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5ShellBar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class ShellBarBranding {
+    constructor() {
+        /**
+         * Defines the component href.
+      
+      **Note:** Standard hyperlink behavior is supported.
+         */
+        this.href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
+        /**
+         * Defines the component target.
+      
+      **Notes:**
+      
+      - `_self`
+      - `_top`
+      - `_blank`
+      - `_parent`
+      - `_search`
+      
+      **This property must only be used when the `href` property is set.**
+         */
+        this.target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : []));
+        /**
+         * Defines the text alternative of the component.
+      If not provided a default text alternative will be set, if present.
+         */
+        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : [])); // className is now passed
+        /**
+         * Fired, when the logo is activated.
+         */
+        this.ui5Click = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'href',
+            'target',
+            'accessibleName',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Click',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ShellBarBranding, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: ShellBarBranding, isStandalone: true, selector: "ui5-shellbar-branding, [ui5-shellbar-branding]", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click" }, exportAs: ["ui5ShellBarBranding"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ShellBarBranding, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-shellbar-branding, [ui5-shellbar-branding]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5ShellBarBranding',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class ShellBarItem {
+    constructor() {
+        /**
+         * Defines the name of the item's icon.
+         */
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        /**
+         * Defines the item text.
+      
+      **Note:** The text is only displayed inside the overflow popover list view.
+         */
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        /**
+         * Defines the count displayed in the top-right corner.
+         */
+        this.count = input(...(ngDevMode ? [undefined, { debugName: "count" }] : []));
+        /**
+         * Defines additional accessibility attributes on Shellbar Items.
+      
+      The accessibility attributes support the following values:
+      
+      - **expanded**: Indicates whether the button, or another grouping element it controls,
+      is currently expanded or collapsed.
+      Accepts the following string values: `true` or `false`.
+      
+      - **hasPopup**: Indicates the availability and type of interactive popup element,
+      such as menu or dialog, that can be triggered by the button.
+      
+      - **controls**: Identifies the element (or elements) whose contents
+      or presence are controlled by the component.
+      Accepts a lowercase string value, referencing the ID of the element it controls.
+         */
+        this.accessibilityAttributes = input({}, ...(ngDevMode ? [{ debugName: "accessibilityAttributes" }] : [])); // className is now passed
+        /**
+         * Fired, when the item is pressed.
+         */
+        this.ui5Click = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'icon',
+            'text',
+            'count',
+            'accessibilityAttributes',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Click',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ShellBarItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: ShellBarItem, isStandalone: true, selector: "ui5-shellbar-item, [ui5-shellbar-item]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, accessibilityAttributes: { classPropertyName: "accessibilityAttributes", publicName: "accessibilityAttributes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click" }, exportAs: ["ui5ShellBarItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ShellBarItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-shellbar-item, [ui5-shellbar-item]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5ShellBarItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class ShellBarSearch {
+    constructor() {
+        /**
+         * Indicates whether the suggestions popover should be opened on focus.
+         */
+        this.autoOpen = input(false, ...(ngDevMode ? [{ debugName: "autoOpen", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Indicates whether a loading indicator should be shown in the popup.
+         */
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines whether the value will be autcompleted to match an item.
+         */
+        this.noTypeahead = input(false, ...(ngDevMode ? [{ debugName: "noTypeahead", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Indicates whether the items picker is open.
+         */
+        this.open = input(false, ...(ngDevMode ? [{ debugName: "open", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines whether the clear icon of the search will be shown.
+         */
+        this.showClearIcon = input(false, ...(ngDevMode ? [{ debugName: "showClearIcon", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the value of the component.
+      
+      **Note:** The property is updated upon typing.
+         */
+        this.value = input("", ...(ngDevMode ? [{ debugName: "value" }] : []));
+        /**
+         * Defines a short hint intended to aid the user with data entry when the
+      component has no value.
+         */
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+        /**
+         * Defines the accessible ARIA name of the component.
+         */
+        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : []));
+        /**
+         * Defines the accessible ARIA description of the field.
+         */
+        this.accessibleDescription = input(...(ngDevMode ? [undefined, { debugName: "accessibleDescription" }] : [])); // className is now passed
+        /**
+         * Fired when the popup is opened.
+         */
+        this.ui5Open = output();
+        /**
+         * Fired when the popup is closed.
+         */
+        this.ui5Close = output();
+        /**
+         * Fired when typing in input or clear icon is pressed.
+         */
+        this.ui5Input = output();
+        /**
+         * Fired when the scope has changed.
+         */
+        this.ui5ScopeChange = output();
+        /**
+         * Fired when the user has triggered search with Enter key or Search Button press.
+         */
+        this.ui5Search = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'autoOpen',
+            'loading',
+            'noTypeahead',
+            'open',
+            'showClearIcon',
+            'value',
+            'placeholder',
+            'accessibleName',
+            'accessibleDescription',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Open',
+            'ui5Close',
+            'ui5Input',
+            'ui5ScopeChange',
+            'ui5Search',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ShellBarSearch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: ShellBarSearch, isStandalone: true, selector: "ui5-shellbar-search, [ui5-shellbar-search]", inputs: { autoOpen: { classPropertyName: "autoOpen", publicName: "autoOpen", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, noTypeahead: { classPropertyName: "noTypeahead", publicName: "noTypeahead", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleDescription: { classPropertyName: "accessibleDescription", publicName: "accessibleDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Open: "ui5Open", ui5Close: "ui5Close", ui5Input: "ui5Input", ui5ScopeChange: "ui5ScopeChange", ui5Search: "ui5Search" }, exportAs: ["ui5ShellBarSearch"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ShellBarSearch, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-shellbar-search, [ui5-shellbar-search]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5ShellBarSearch',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class ShellBarSpacer {
+    constructor() {
+        // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ShellBarSpacer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: ShellBarSpacer, isStandalone: true, selector: "ui5-shellbar-spacer, [ui5-shellbar-spacer]", exportAs: ["ui5ShellBarSpacer"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ShellBarSpacer, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-shellbar-spacer, [ui5-shellbar-spacer]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5ShellBarSpacer',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class SideNavigation {
+    constructor() {
+        /**
+         * Defines whether the `ui5-side-navigation` is expanded or collapsed.
+      
+      **Note:** The collapsed mode is not supported on phones.
+      The `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`
+      component to ensure proper responsive behavior. If you choose not to use the
+      `ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,
+      particularly for phones where the collapsed mode should not be used.
+         */
+        this.collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the accessible ARIA name of the component.
+         */
+        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : [])); // className is now passed
+        /**
+         * Fired when the selection has changed via user interaction
+         */
+        this.ui5SelectionChange = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'collapsed',
+            'accessibleName',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5SelectionChange',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: SideNavigation, isStandalone: true, selector: "ui5-side-navigation, [ui5-side-navigation]", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5SelectionChange: "ui5SelectionChange" }, exportAs: ["ui5SideNavigation"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideNavigation, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-side-navigation, [ui5-side-navigation]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5SideNavigation',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class SideNavigationGroup {
+    constructor() {
+        /**
+         * Defines if the item is expanded
+         */
+        this.expanded = input(false, ...(ngDevMode ? [{ debugName: "expanded", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the text of the item.
+         */
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        /**
+         * Defines whether the component is disabled.
+      A disabled component can't be pressed or
+      focused, and it is not in the tab chain.
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the tooltip of the component.
+      
+      A tooltip attribute should be provided, in order to represent meaning/function,
+      when the component is collapsed ("icon only" design is visualized) or the item text is truncated.
+         */
+        this.tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : [])); // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'expanded',
+            'text',
+            'disabled',
+            'tooltip',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideNavigationGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: SideNavigationGroup, isStandalone: true, selector: "ui5-side-navigation-group, [ui5-side-navigation-group]", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5SideNavigationGroup"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideNavigationGroup, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-side-navigation-group, [ui5-side-navigation-group]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5SideNavigationGroup',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class SideNavigationItem {
+    constructor() {
+        /**
+         * Defines if the item is expanded
+         */
+        this.expanded = input(false, ...(ngDevMode ? [{ debugName: "expanded", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the icon of the item.
+      
+      The SAP-icons font provides numerous options.
+      
+      See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+         */
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        /**
+         * Defines whether the item is selected.
+      
+      **Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.
+         */
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the link target URI. Supports standard hyperlink behavior.
+      If a JavaScript action should be triggered,
+      this should not be set, but instead an event handler
+      for the `click` event should be registered.
+         */
+        this.href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
+        /**
+         * Defines the component target.
+      
+      Possible values:
+      
+      - `_self`
+      - `_top`
+      - `_blank`
+      - `_parent`
+      - `framename`
+      
+      **Note:** Items that have a defined `href` and `target`
+      attribute set to `_blank` should not be selectable.
+         */
+        this.target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : []));
+        /**
+         * Item design.
+      
+      **Note:** Items with "Action" design must not have sub-items.
+         */
+        this.design = input("Default", ...(ngDevMode ? [{ debugName: "design" }] : []));
+        /**
+         * Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.
+      
+      When a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.
+      To improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.
+      
+      
+      **Guidelines**:
+      - Items with an assigned `href` and a target of `_blank` should be marked as unselectable.
+      - Items that trigger actions (with design "Action") should be marked as unselectable.
+         */
+        this.unselectable = input(false, ...(ngDevMode ? [{ debugName: "unselectable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the additional accessibility attributes that will be applied to the component.
+      The following fields are supported:
+      
+      - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+      Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
+      
+      **Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.
+         */
+        this.accessibilityAttributes = input({}, ...(ngDevMode ? [{ debugName: "accessibilityAttributes" }] : []));
+        /**
+         * Defines the text of the item.
+         */
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        /**
+         * Defines whether the component is disabled.
+      A disabled component can't be pressed or
+      focused, and it is not in the tab chain.
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the tooltip of the component.
+      
+      A tooltip attribute should be provided, in order to represent meaning/function,
+      when the component is collapsed ("icon only" design is visualized) or the item text is truncated.
+         */
+        this.tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : [])); // className is now passed
+        /**
+         * Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.
+         */
+        this.ui5Click = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'expanded',
+            'icon',
+            'selected',
+            'href',
+            'target',
+            'design',
+            'unselectable',
+            'accessibilityAttributes',
+            'text',
+            'disabled',
+            'tooltip',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Click',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideNavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: SideNavigationItem, isStandalone: true, selector: "ui5-side-navigation-item, [ui5-side-navigation-item]", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, unselectable: { classPropertyName: "unselectable", publicName: "unselectable", isSignal: true, isRequired: false, transformFunction: null }, accessibilityAttributes: { classPropertyName: "accessibilityAttributes", publicName: "accessibilityAttributes", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click" }, exportAs: ["ui5SideNavigationItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideNavigationItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-side-navigation-item, [ui5-side-navigation-item]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5SideNavigationItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class SideNavigationSubItem {
+    constructor() {
+        /**
+         * Defines the icon of the item.
+      
+      The SAP-icons font provides numerous options.
+      
+      See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+         */
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        /**
+         * Defines whether the item is selected.
+      
+      **Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.
+         */
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the link target URI. Supports standard hyperlink behavior.
+      If a JavaScript action should be triggered,
+      this should not be set, but instead an event handler
+      for the `click` event should be registered.
+         */
+        this.href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
+        /**
+         * Defines the component target.
+      
+      Possible values:
+      
+      - `_self`
+      - `_top`
+      - `_blank`
+      - `_parent`
+      - `framename`
+      
+      **Note:** Items that have a defined `href` and `target`
+      attribute set to `_blank` should not be selectable.
+         */
+        this.target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : []));
+        /**
+         * Item design.
+      
+      **Note:** Items with "Action" design must not have sub-items.
+         */
+        this.design = input("Default", ...(ngDevMode ? [{ debugName: "design" }] : []));
+        /**
+         * Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.
+      
+      When a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.
+      To improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.
+      
+      
+      **Guidelines**:
+      - Items with an assigned `href` and a target of `_blank` should be marked as unselectable.
+      - Items that trigger actions (with design "Action") should be marked as unselectable.
+         */
+        this.unselectable = input(false, ...(ngDevMode ? [{ debugName: "unselectable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the additional accessibility attributes that will be applied to the component.
+      The following fields are supported:
+      
+      - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+      Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
+      
+      **Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.
+         */
+        this.accessibilityAttributes = input({}, ...(ngDevMode ? [{ debugName: "accessibilityAttributes" }] : []));
+        /**
+         * Defines the text of the item.
+         */
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        /**
+         * Defines whether the component is disabled.
+      A disabled component can't be pressed or
+      focused, and it is not in the tab chain.
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the tooltip of the component.
+      
+      A tooltip attribute should be provided, in order to represent meaning/function,
+      when the component is collapsed ("icon only" design is visualized) or the item text is truncated.
+         */
+        this.tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : [])); // className is now passed
+        /**
+         * Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.
+         */
+        this.ui5Click = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'icon',
+            'selected',
+            'href',
+            'target',
+            'design',
+            'unselectable',
+            'accessibilityAttributes',
+            'text',
+            'disabled',
+            'tooltip',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Click',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideNavigationSubItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: SideNavigationSubItem, isStandalone: true, selector: "ui5-side-navigation-sub-item, [ui5-side-navigation-sub-item]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, unselectable: { classPropertyName: "unselectable", publicName: "unselectable", isSignal: true, isRequired: false, transformFunction: null }, accessibilityAttributes: { classPropertyName: "accessibilityAttributes", publicName: "accessibilityAttributes", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click" }, exportAs: ["ui5SideNavigationSubItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SideNavigationSubItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-side-navigation-sub-item, [ui5-side-navigation-sub-item]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5SideNavigationSubItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class SortItem {
+    constructor() {
+        /**
+         * Defines the text of the sort item.
+         */
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        /**
+         * Defines if the sort item is selected.
+         */
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'text',
+            'selected',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SortItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: SortItem, isStandalone: true, selector: "ui5-sort-item, [ui5-sort-item]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5SortItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SortItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-sort-item, [ui5-sort-item]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5SortItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class Timeline {
+    constructor() {
+        /**
+         * Defines the items orientation.
+         */
+        this.layout = input("Vertical", ...(ngDevMode ? [{ debugName: "layout" }] : []));
+        /**
+         * Defines the accessible ARIA name of the component.
+         */
+        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : []));
+        /**
+         * Defines if the component should display a loading indicator over the Timeline.
+         */
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the delay in milliseconds, after which the loading indicator will show up for this component.
+         */
+        this.loadingDelay = input(1000, ...(ngDevMode ? [{ debugName: "loadingDelay" }] : []));
+        /**
+         * Defines whether the Timeline will have growing capability either by pressing a "More" button,
+      or via user scroll. In both cases a `load-more` event is fired.
+      
+      Available options:
+      
+      `Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.
+      
+      `Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.
+      
+      `None` (default) - The growing functionality is off.
+         */
+        this.growing = input("None", ...(ngDevMode ? [{ debugName: "growing" }] : [])); // className is now passed
+        /**
+         * Fired when the user presses the `More` button or scrolls to the Timeline's end.
+      
+      **Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.
+         */
+        this.ui5LoadMore = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'layout',
+            'accessibleName',
+            'loading',
+            'loadingDelay',
+            'growing',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5LoadMore',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: Timeline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: Timeline, isStandalone: true, selector: "ui5-timeline, [ui5-timeline]", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingDelay: { classPropertyName: "loadingDelay", publicName: "loadingDelay", isSignal: true, isRequired: false, transformFunction: null }, growing: { classPropertyName: "growing", publicName: "growing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5LoadMore: "ui5LoadMore" }, exportAs: ["ui5Timeline"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: Timeline, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-timeline, [ui5-timeline]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5Timeline',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class TimelineGroupItem {
+    constructor() {
+        /**
+         * Defines the text of the button that expands and collapses the group.
+         */
+        this.groupName = input(...(ngDevMode ? [undefined, { debugName: "groupName" }] : []));
+        /**
+         * Determines if the group is collapsed or expanded.
+         */
+        this.collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        /**
+         * Fired when the group item is expanded or collapsed.
+         */
+        this.ui5Toggle = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'groupName',
+            'collapsed',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Toggle',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TimelineGroupItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: TimelineGroupItem, isStandalone: true, selector: "ui5-timeline-group-item, [ui5-timeline-group-item]", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Toggle: "ui5Toggle" }, exportAs: ["ui5TimelineGroupItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TimelineGroupItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-timeline-group-item, [ui5-timeline-group-item]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5TimelineGroupItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class TimelineItem {
+    constructor() {
+        /**
+         * Defines the icon to be displayed as graphical element within the `ui5-timeline-item`.
+      SAP-icons font provides numerous options.
+      
+      See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+         */
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        /**
+         * Defines the name of the item, displayed before the `title-text`.
+         */
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        /**
+         * Defines if the `name` is clickable.
+         */
+        this.nameClickable = input(false, ...(ngDevMode ? [{ debugName: "nameClickable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the title text of the component.
+         */
+        this.titleText = input(...(ngDevMode ? [undefined, { debugName: "titleText" }] : []));
+        /**
+         * Defines the subtitle text of the component.
+         */
+        this.subtitleText = input(...(ngDevMode ? [undefined, { debugName: "subtitleText" }] : []));
+        /**
+         * Defines the state of the icon displayed in the `ui5-timeline-item`.
+         */
+        this.state = input("None", ...(ngDevMode ? [{ debugName: "state" }] : [])); // className is now passed
+        /**
+         * Fired when the item name is pressed either with a
+      click/tap or by using the Enter or Space key.
+      
+      **Note:** The event will not be fired if the `name-clickable`
+      attribute is not set.
+         */
+        this.ui5NameClick = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'icon',
+            'name',
+            'nameClickable',
+            'titleText',
+            'subtitleText',
+            'state',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5NameClick',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TimelineItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: TimelineItem, isStandalone: true, selector: "ui5-timeline-item, [ui5-timeline-item]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, nameClickable: { classPropertyName: "nameClickable", publicName: "nameClickable", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, subtitleText: { classPropertyName: "subtitleText", publicName: "subtitleText", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5NameClick: "ui5NameClick" }, exportAs: ["ui5TimelineItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TimelineItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-timeline-item, [ui5-timeline-item]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5TimelineItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class UploadCollection {
+    constructor() {
+        /**
+         * Defines the selection mode of the `ui5-upload-collection`.
+         */
+        this.selectionMode = input("None", ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
+        /**
+         * Allows you to set your own text for the 'No data' description.
+         */
+        this.noDataDescription = input(...(ngDevMode ? [undefined, { debugName: "noDataDescription" }] : []));
+        /**
+         * Allows you to set your own text for the 'No data' text.
+         */
+        this.noDataText = input(...(ngDevMode ? [undefined, { debugName: "noDataText" }] : []));
+        /**
+         * Defines the header level of the 'No data' text.
+         */
+        this.noDataHeaderLevel = input("H2", ...(ngDevMode ? [{ debugName: "noDataHeaderLevel" }] : []));
+        /**
+         * By default there will be drag and drop overlay shown over the `ui5-upload-collection` when files
+      are dragged. If you don't intend to use drag and drop, set this property.
+      
+      **Note:** It is up to the application developer to add handler for `drop` event and handle it.
+      `ui5-upload-collection` only displays an overlay.
+         */
+        this.hideDragOverlay = input(false, ...(ngDevMode ? [{ debugName: "hideDragOverlay", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the accessible ARIA name of the component.
+         */
+        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : [])); // className is now passed
+        /**
+         * Fired when an element is dropped inside the drag and drop overlay.
+      
+      **Note:** The `drop` event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the `ui5-upload-collection`.
+         */
+        this.ui5ItemDelete = output();
+        /**
+         * Fired when selection is changed by user interaction
+      in `Single` and `Multiple` modes.
+         */
+        this.ui5SelectionChange = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'selectionMode',
+            'noDataDescription',
+            'noDataText',
+            'noDataHeaderLevel',
+            'hideDragOverlay',
+            'accessibleName',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5ItemDelete',
+            'ui5SelectionChange',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UploadCollection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: UploadCollection, isStandalone: true, selector: "ui5-upload-collection, [ui5-upload-collection]", inputs: { selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, noDataDescription: { classPropertyName: "noDataDescription", publicName: "noDataDescription", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, noDataHeaderLevel: { classPropertyName: "noDataHeaderLevel", publicName: "noDataHeaderLevel", isSignal: true, isRequired: false, transformFunction: null }, hideDragOverlay: { classPropertyName: "hideDragOverlay", publicName: "hideDragOverlay", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5ItemDelete: "ui5ItemDelete", ui5SelectionChange: "ui5SelectionChange" }, exportAs: ["ui5UploadCollection"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UploadCollection, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-upload-collection, [ui5-upload-collection]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5UploadCollection',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class UploadCollectionItem {
+    constructor() {
+        /**
+         * Holds an instance of `File` associated with this item.
+         */
+        this.file = input(null, ...(ngDevMode ? [{ debugName: "file" }] : []));
+        /**
+         * The name of the file.
+         */
+        this.fileName = input("", ...(ngDevMode ? [{ debugName: "fileName" }] : []));
+        /**
+         * If set to `true` the file name will be clickable and it will fire `file-name-click` event upon click.
+         */
+        this.fileNameClickable = input(false, ...(ngDevMode ? [{ debugName: "fileNameClickable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Disables the delete button.
+         */
+        this.disableDeleteButton = input(false, ...(ngDevMode ? [{ debugName: "disableDeleteButton", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Hides the delete button.
+         */
+        this.hideDeleteButton = input(false, ...(ngDevMode ? [{ debugName: "hideDeleteButton", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Hides the retry button when `uploadState` property is `Error`.
+         */
+        this.hideRetryButton = input(false, ...(ngDevMode ? [{ debugName: "hideRetryButton", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Hides the terminate button when `uploadState` property is `Uploading`.
+         */
+        this.hideTerminateButton = input(false, ...(ngDevMode ? [{ debugName: "hideTerminateButton", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * The upload progress in percentage.
+      
+      **Note:** Expected values are in the interval [0, 100].
+         */
+        this.progress = input(0, ...(ngDevMode ? [{ debugName: "progress" }] : []));
+        /**
+         * Upload state.
+      
+      Depending on this property, the item displays the following:
+      
+      - `Ready` - progress indicator is displayed.
+      - `Uploading` - progress indicator and terminate button are displayed. When the terminate button is pressed, `terminate` event is fired.
+      - `Error` - progress indicator and retry button are displayed. When the retry button is pressed, `retry` event is fired.
+      - `Complete` - progress indicator is not displayed.
+         */
+        this.uploadState = input("Ready", ...(ngDevMode ? [{ debugName: "uploadState" }] : [])); // className is now passed
+        /**
+         * Fired when the file name is clicked.
+      
+      **Note:** This event is only available when `fileNameClickable` property is `true`.
+         */
+        this.ui5FileNameClick = output();
+        /**
+         * Fired when the `fileName` property gets changed.
+      
+      **Note:** An edit button is displayed on each item,
+      when the `ui5-upload-collection-item` `type` property is set to `Detail`.
+         */
+        this.ui5Rename = output();
+        /**
+         * Fired when the terminate button is pressed.
+      
+      **Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`.
+         */
+        this.ui5Terminate = output();
+        /**
+         * Fired when the retry button is pressed.
+      
+      **Note:** Retry button is displayed when `uploadState` property is set to `Error`.
+         */
+        this.ui5Retry = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'file',
+            'fileName',
+            'fileNameClickable',
+            'disableDeleteButton',
+            'hideDeleteButton',
+            'hideRetryButton',
+            'hideTerminateButton',
+            'progress',
+            'uploadState',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5FileNameClick',
+            'ui5Rename',
+            'ui5Terminate',
+            'ui5Retry',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UploadCollectionItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: UploadCollectionItem, isStandalone: true, selector: "ui5-upload-collection-item, [ui5-upload-collection-item]", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, fileNameClickable: { classPropertyName: "fileNameClickable", publicName: "fileNameClickable", isSignal: true, isRequired: false, transformFunction: null }, disableDeleteButton: { classPropertyName: "disableDeleteButton", publicName: "disableDeleteButton", isSignal: true, isRequired: false, transformFunction: null }, hideDeleteButton: { classPropertyName: "hideDeleteButton", publicName: "hideDeleteButton", isSignal: true, isRequired: false, transformFunction: null }, hideRetryButton: { classPropertyName: "hideRetryButton", publicName: "hideRetryButton", isSignal: true, isRequired: false, transformFunction: null }, hideTerminateButton: { classPropertyName: "hideTerminateButton", publicName: "hideTerminateButton", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, uploadState: { classPropertyName: "uploadState", publicName: "uploadState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5FileNameClick: "ui5FileNameClick", ui5Rename: "ui5Rename", ui5Terminate: "ui5Terminate", ui5Retry: "ui5Retry" }, exportAs: ["ui5UploadCollectionItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UploadCollectionItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-upload-collection-item, [ui5-upload-collection-item]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5UploadCollectionItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class UserMenu {
+    constructor() {
+        /**
+         * Defines if the User Menu is opened.
+         */
+        this.open = input(false, ...(ngDevMode ? [{ debugName: "open", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the ID or DOM Reference of the element at which the user menu is shown.
+      When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.
+      You can only set the `opener` attribute to a DOM Reference when using JavaScript.
+         */
+        this.opener = input(...(ngDevMode ? [undefined, { debugName: "opener" }] : []));
+        /**
+         * Defines if the User Menu shows the Manage Account option.
+         */
+        this.showManageAccount = input(false, ...(ngDevMode ? [{ debugName: "showManageAccount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines if the User Menu shows the Other Accounts option.
+         */
+        this.showOtherAccounts = input(false, ...(ngDevMode ? [{ debugName: "showOtherAccounts", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines if the User Menu shows the Edit Accounts option.
+         */
+        this.showEditAccounts = input(false, ...(ngDevMode ? [{ debugName: "showEditAccounts", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines if the User menu shows edit button.
+         */
+        this.showEditButton = input(false, ...(ngDevMode ? [{ debugName: "showEditButton", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        /**
+         * Fired when the account avatar is selected.
+         */
+        this.ui5AvatarClick = output();
+        /**
+         * Fired when the "Manage Account" button is selected.
+         */
+        this.ui5ManageAccountClick = output();
+        /**
+         * Fired when the "Edit Accounts" button is selected.
+         */
+        this.ui5EditAccountsClick = output();
+        /**
+         * Fired when the account is switched to a different one.
+         */
+        this.ui5ChangeAccount = output();
+        /**
+         * Fired when a menu item is selected.
+         */
+        this.ui5ItemClick = output();
+        /**
+         * Fired when a user menu is open.
+         */
+        this.ui5Open = output();
+        /**
+         * Fired when a user menu is close.
+         */
+        this.ui5Close = output();
+        /**
+         * Fired when the "Sign Out" button is selected.
+         */
+        this.ui5SignOutClick = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'open',
+            'opener',
+            'showManageAccount',
+            'showOtherAccounts',
+            'showEditAccounts',
+            'showEditButton',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5AvatarClick',
+            'ui5ManageAccountClick',
+            'ui5EditAccountsClick',
+            'ui5ChangeAccount',
+            'ui5ItemClick',
+            'ui5Open',
+            'ui5Close',
+            'ui5SignOutClick',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: UserMenu, isStandalone: true, selector: "ui5-user-menu, [ui5-user-menu]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, opener: { classPropertyName: "opener", publicName: "opener", isSignal: true, isRequired: false, transformFunction: null }, showManageAccount: { classPropertyName: "showManageAccount", publicName: "showManageAccount", isSignal: true, isRequired: false, transformFunction: null }, showOtherAccounts: { classPropertyName: "showOtherAccounts", publicName: "showOtherAccounts", isSignal: true, isRequired: false, transformFunction: null }, showEditAccounts: { classPropertyName: "showEditAccounts", publicName: "showEditAccounts", isSignal: true, isRequired: false, transformFunction: null }, showEditButton: { classPropertyName: "showEditButton", publicName: "showEditButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5AvatarClick: "ui5AvatarClick", ui5ManageAccountClick: "ui5ManageAccountClick", ui5EditAccountsClick: "ui5EditAccountsClick", ui5ChangeAccount: "ui5ChangeAccount", ui5ItemClick: "ui5ItemClick", ui5Open: "ui5Open", ui5Close: "ui5Close", ui5SignOutClick: "ui5SignOutClick" }, exportAs: ["ui5UserMenu"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserMenu, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-user-menu, [ui5-user-menu]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5UserMenu',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class UserMenuAccount {
+    constructor() {
+        /**
+         * Defines the avatar image url of the user.
+         */
+        this.avatarSrc = input("", ...(ngDevMode ? [{ debugName: "avatarSrc" }] : []));
+        /**
+         * Defines the avatar initials of the user.
+         */
+        this.avatarInitials = input(...(ngDevMode ? [undefined, { debugName: "avatarInitials" }] : []));
+        /**
+         * Defines the title text of the user.
+         */
+        this.titleText = input("", ...(ngDevMode ? [{ debugName: "titleText" }] : []));
+        /**
+         * Defines additional text of the user.
+         */
+        this.subtitleText = input("", ...(ngDevMode ? [{ debugName: "subtitleText" }] : []));
+        /**
+         * Defines description of the user.
+         */
+        this.description = input("", ...(ngDevMode ? [{ debugName: "description" }] : []));
+        /**
+         * Defines additional information for the user.
+         */
+        this.additionalInfo = input("", ...(ngDevMode ? [{ debugName: "additionalInfo" }] : []));
+        /**
+         * Defines if the user is selected.
+         */
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Indicates whether a loading indicator should be shown.
+         */
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'avatarSrc',
+            'avatarInitials',
+            'titleText',
+            'subtitleText',
+            'description',
+            'additionalInfo',
+            'selected',
+            'loading',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserMenuAccount, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: UserMenuAccount, isStandalone: true, selector: "ui5-user-menu-account, [ui5-user-menu-account]", inputs: { avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, subtitleText: { classPropertyName: "subtitleText", publicName: "subtitleText", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, additionalInfo: { classPropertyName: "additionalInfo", publicName: "additionalInfo", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5UserMenuAccount"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserMenuAccount, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-user-menu-account, [ui5-user-menu-account]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5UserMenuAccount',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class UserMenuItem {
+    constructor() {
+        // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: UserMenuItem, isStandalone: true, selector: "ui5-user-menu-item, [ui5-user-menu-item]", exportAs: ["ui5UserMenuItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserMenuItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-user-menu-item, [ui5-user-menu-item]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5UserMenuItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class UserMenuItemGroup {
+    constructor() {
+        // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserMenuItemGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: UserMenuItemGroup, isStandalone: true, selector: "ui5-user-menu-item-group, [ui5-user-menu-item-group]", exportAs: ["ui5UserMenuItemGroup"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserMenuItemGroup, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-user-menu-item-group, [ui5-user-menu-item-group]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5UserMenuItemGroup',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class UserSettingsDialog {
+    constructor() {
+        /**
+         * Defines, if the User Settings Dialog is opened.
+         */
+        this.open = input(false, ...(ngDevMode ? [{ debugName: "open", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the headerText of the item.
+         */
+        this.headerText = input(...(ngDevMode ? [undefined, { debugName: "headerText" }] : []));
+        /**
+         * Defines if the Search Field would be displayed.
+      
+      **Note:** By default the Search Field is not displayed.
+         */
+        this.showSearchField = input(false, ...(ngDevMode ? [{ debugName: "showSearchField", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        /**
+         * Fired when an item is selected.
+         */
+        this.ui5SelectionChange = output();
+        /**
+         * Fired when a settings dialog is open.
+         */
+        this.ui5Open = output();
+        /**
+         * Fired before the settings dialog is closed.
+         */
+        this.ui5BeforeClose = output();
+        /**
+         * Fired when a settings dialog is closed.
+         */
+        this.ui5Close = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'open',
+            'headerText',
+            'showSearchField',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5SelectionChange',
+            'ui5Open',
+            'ui5BeforeClose',
+            'ui5Close',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserSettingsDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: UserSettingsDialog, isStandalone: true, selector: "ui5-user-settings-dialog, [ui5-user-settings-dialog]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, showSearchField: { classPropertyName: "showSearchField", publicName: "showSearchField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5SelectionChange: "ui5SelectionChange", ui5Open: "ui5Open", ui5BeforeClose: "ui5BeforeClose", ui5Close: "ui5Close" }, exportAs: ["ui5UserSettingsDialog"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserSettingsDialog, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-user-settings-dialog, [ui5-user-settings-dialog]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5UserSettingsDialog',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class UserSettingsItem {
+    constructor() {
+        /**
+         * Defines the text of the user settings item.
+         */
+        this.text = input("", ...(ngDevMode ? [{ debugName: "text" }] : []));
+        /**
+         * Defines the tooltip of the component.
+      
+      A tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.
+         */
+        this.tooltip = input("", ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
+        /**
+         * Defines the headerText of the item.
+         */
+        this.headerText = input("", ...(ngDevMode ? [{ debugName: "headerText" }] : []));
+        /**
+         * Shows item tab.
+         */
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines whether the component is in disabled state.
+      
+      **Note:** A disabled component is completely noninteractive.
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Indicates whether a loading indicator should be shown.
+         */
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Indicates why the control is in loading state.
+         */
+        this.loadingReason = input(...(ngDevMode ? [undefined, { debugName: "loadingReason" }] : []));
+        /**
+         * Defines the icon of the component.
+         */
+        this.icon = input("globe", ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        /**
+         * Defines the accessible ARIA name of the component.
+         */
+        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : [])); // className is now passed
+        /**
+         * Fired when a selected view changed.
+         */
+        this.ui5SelectionChange = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'text',
+            'tooltip',
+            'headerText',
+            'selected',
+            'disabled',
+            'loading',
+            'loadingReason',
+            'icon',
+            'accessibleName',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5SelectionChange',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserSettingsItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: UserSettingsItem, isStandalone: true, selector: "ui5-user-settings-item, [ui5-user-settings-item]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingReason: { classPropertyName: "loadingReason", publicName: "loadingReason", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5SelectionChange: "ui5SelectionChange" }, exportAs: ["ui5UserSettingsItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserSettingsItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-user-settings-item, [ui5-user-settings-item]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5UserSettingsItem',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class UserSettingsView {
+    constructor() {
+        /**
+         * Defines the title text of the user settings view.
+         */
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        /**
+         * Defines whether the view is selected. There can be just one selected view at a time.
+         */
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`
+      and controls the visibility of the back button.
+         */
+        this.secondary = input(false, ...(ngDevMode ? [{ debugName: "secondary", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'text',
+            'selected',
+            'secondary',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserSettingsView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: UserSettingsView, isStandalone: true, selector: "ui5-user-settings-view, [ui5-user-settings-view]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5UserSettingsView"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserSettingsView, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-user-settings-view, [ui5-user-settings-view]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5UserSettingsView',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class ViewSettingsDialog {
+    constructor() {
+        /**
+         * Defines the initial sort order.
+         */
+        this.sortDescending = input(false, ...(ngDevMode ? [{ debugName: "sortDescending", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the initial group order.
+         */
+        this.groupDescending = input(false, ...(ngDevMode ? [{ debugName: "groupDescending", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Indicates if the dialog is open.
+         */
+        this.open = input(false, ...(ngDevMode ? [{ debugName: "open", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        /**
+         * Fired when confirmation button is activated.
+         */
+        this.ui5Confirm = output();
+        /**
+         * Fired when cancel button is activated.
+         */
+        this.ui5Cancel = output();
+        /**
+         * Fired before the component is opened.
+         */
+        this.ui5BeforeOpen = output();
+        /**
+         * Fired after the dialog is opened.
+         */
+        this.ui5Open = output();
+        /**
+         * Fired after the dialog is closed.
+         */
+        this.ui5Close = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'sortDescending',
+            'groupDescending',
+            'open',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Confirm',
+            'ui5Cancel',
+            'ui5BeforeOpen',
+            'ui5Open',
+            'ui5Close',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ViewSettingsDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: ViewSettingsDialog, isStandalone: true, selector: "ui5-view-settings-dialog, [ui5-view-settings-dialog]", inputs: { sortDescending: { classPropertyName: "sortDescending", publicName: "sortDescending", isSignal: true, isRequired: false, transformFunction: null }, groupDescending: { classPropertyName: "groupDescending", publicName: "groupDescending", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Confirm: "ui5Confirm", ui5Cancel: "ui5Cancel", ui5BeforeOpen: "ui5BeforeOpen", ui5Open: "ui5Open", ui5Close: "ui5Close" }, exportAs: ["ui5ViewSettingsDialog"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ViewSettingsDialog, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-view-settings-dialog, [ui5-view-settings-dialog]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5ViewSettingsDialog',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class Wizard {
+    constructor() {
+        /**
+         * Defines how the content of the `ui5-wizard` would be visualized.
+         */
+        this.contentLayout = input("MultipleSteps", ...(ngDevMode ? [{ debugName: "contentLayout" }] : [])); // className is now passed
+        /**
+         * Fired when the step is changed by user interaction - either with scrolling,
+      or by clicking on the steps within the component header.
+         */
+        this.ui5StepChange = output();
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'contentLayout',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5StepChange',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: Wizard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: Wizard, isStandalone: true, selector: "ui5-wizard, [ui5-wizard]", inputs: { contentLayout: { classPropertyName: "contentLayout", publicName: "contentLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5StepChange: "ui5StepChange" }, exportAs: ["ui5Wizard"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: Wizard, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-wizard, [ui5-wizard]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5Wizard',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class WizardStep {
+    constructor() {
+        /**
+         * Defines the `titleText` of the step.
+      
+      **Note:** The text is displayed in the `ui5-wizard` navigation header.
+         */
+        this.titleText = input(...(ngDevMode ? [undefined, { debugName: "titleText" }] : []));
+        /**
+         * Defines the `subtitleText` of the step.
+      
+      **Note:** the text is displayed in the `ui5-wizard` navigation header.
+         */
+        this.subtitleText = input(...(ngDevMode ? [undefined, { debugName: "subtitleText" }] : []));
+        /**
+         * Defines the `icon` of the step.
+      
+      **Note:** The icon is displayed in the `ui5-wizard` navigation header.
+      
+      The SAP-icons font provides numerous options.
+      See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+         */
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        /**
+         * Defines if the step is `disabled`. When disabled the step is displayed,
+      but the user can't select the step by clicking or navigate to it with scrolling.
+      
+      **Note:** Step can't be `selected` and `disabled` at the same time.
+      In this case the `selected` property would take precedence.
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the step's `selected` state - the step that is currently active.
+      
+      **Note:** Step can't be `selected` and `disabled` at the same time.
+      In this case the `selected` property would take precedence.
+         */
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * When `branching` is enabled a dashed line would be displayed after the step,
+      meant to indicate that the next step is not yet known and depends on user choice in the current step.
+      
+      **Note:** It is recommended to use `branching` on the last known step
+      and later add new steps when it becomes clear how the wizard flow should continue.
+         */
+        this.branching = input(false, ...(ngDevMode ? [{ debugName: "branching", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'titleText',
+            'subtitleText',
+            'icon',
+            'disabled',
+            'selected',
+            'branching',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: WizardStep, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: WizardStep, isStandalone: true, selector: "ui5-wizard-step, [ui5-wizard-step]", inputs: { titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, subtitleText: { classPropertyName: "subtitleText", publicName: "subtitleText", 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 }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, branching: { classPropertyName: "branching", publicName: "branching", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["ui5WizardStep"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: WizardStep, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-wizard-step, [ui5-wizard-step]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5WizardStep',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class Ui5WebcomponentsFioriThemingService extends WebcomponentsThemingProvider {
+    constructor() {
+        super(() => import('@ui5/webcomponents-fiori/dist/generated/json-imports/Themes.js'));
+        this.name = 'ui-5-webcomponents--fiori-theming-service';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: Ui5WebcomponentsFioriThemingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: Ui5WebcomponentsFioriThemingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: Ui5WebcomponentsFioriThemingService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BarcodeScannerDialog, DynamicPage, DynamicPageHeader, DynamicPageTitle, DynamicSideContent, FilterItem, FilterItemOption, FlexibleColumnLayout, GenericControlValueAccessor, GroupItem, IllustratedMessage, MediaGallery, MediaGalleryItem, NavigationLayout, NotificationList, NotificationListGroupItem, NotificationListItem, Page, ProductSwitch, ProductSwitchItem, Search, SearchItem, SearchItemGroup, SearchItemShowMore, SearchMessageArea, SearchScope, ShellBar, ShellBarBranding, ShellBarItem, ShellBarSearch, ShellBarSpacer, SideNavigation, SideNavigationGroup, SideNavigationItem, SideNavigationSubItem, SortItem, Timeline, TimelineGroupItem, TimelineItem, Ui5WebcomponentsFioriThemingService, UploadCollection, UploadCollectionItem, UserMenu, UserMenuAccount, UserMenuItem, UserMenuItemGroup, UserSettingsDialog, UserSettingsItem, UserSettingsView, ViewSettingsDialog, Wizard, WizardStep };
+//# sourceMappingURL=fundamental-ngx-ui5-webcomponents-fiori.mjs.map