@fundamental-ngx/ui5-webcomponents 0.62.2-rc.8 → 0.62.2

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

@@ -599,7 +599,14 @@ class AvatarBadge {
       - `Negative` - Red, used for error/rejected states
       - `Information` - Blue, used for informational states
          */
-        this.state = input("None", ...(ngDevMode ? [{ debugName: "state" }] : [])); // className is now passed
+        this.state = input("None", ...(ngDevMode ? [{ debugName: "state" }] : []));
+        /**
+         * Defines the tooltip text of the badge icon.
+      
+      **Note:** If not provided, the badge uses the icon accessible name.
+      If no icon accessible name is available, a generic fallback text is used.
+         */
+        this.tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : [])); // className is now passed
         this.elementRef = inject(ElementRef);
         this.injector = inject(Injector);
         /**
@@ -617,6 +624,7 @@ class AvatarBadge {
         const inputsToSync = [
             'icon',
             'state',
+            'tooltip',
         ];
         // Synchronize inputs (properties)
         for (const inputName of inputsToSync) {
@@ -638,7 +646,7 @@ class AvatarBadge {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AvatarBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: AvatarBadge, isStandalone: true, selector: "ui5-avatar-badge, [ui5-avatar-badge]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: AvatarBadge, isStandalone: true, selector: "ui5-avatar-badge, [ui5-avatar-badge]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             contentDensityObserverProviders({
                 supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
             })
@@ -658,7 +666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }] } });
 
 class AvatarGroup {
     constructor() {
@@ -1095,6 +1103,12 @@ class BreadcrumbsItem {
       **Note:** This property must only be used when the `href` property is set.
          */
         this.target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : [])); // className is now passed
+        /**
+         * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
+      
+      **Note:** The event is also fired for the current page location item (the last item), which is not a link by design.
+         */
+        this.ui5Click = output();
         /**
          * Available slots for content projection in this component.
          *
@@ -1159,9 +1173,24 @@ class BreadcrumbsItem {
                 });
             }
         }
+        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: "21.1.0", ngImport: i0, type: BreadcrumbsItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: BreadcrumbsItem, isStandalone: true, selector: "ui5-breadcrumbs-item, [ui5-breadcrumbs-item]", inputs: { accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", 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 } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: BreadcrumbsItem, isStandalone: true, selector: "ui5-breadcrumbs-item, [ui5-breadcrumbs-item]", inputs: { accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", 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 } }, outputs: { ui5Click: "ui5Click" }, providers: [
             contentDensityObserverProviders({
                 supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
             })
@@ -1181,7 +1210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
+        }], propDecorators: { accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], ui5Click: [{ type: i0.Output, args: ["ui5Click"] }] } });
 
 class BusyIndicator {
     constructor() {
@@ -2866,12 +2895,22 @@ class ColorPaletteItem {
       If more than one item is defined as selected, the last one would be considered as the selected one.
          */
         this.selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : {}), transform: booleanAttribute });
+        /**
+         * Defines the tooltip of the component. When not set, the color value is used as the tooltip.
+         */
+        this.tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : []));
         /**
          * Defines the colour of the component.
       
       **Note:** The value should be a valid CSS color.
          */
         this.value = input("", ...(ngDevMode ? [{ debugName: "value" }] : [])); // className is now passed
+        /**
+         * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
+      
+      **Note:** The event will not be fired if the `disabled` property is set to `true`.
+         */
+        this.ui5Click = output();
         this.elementRef = inject(ElementRef);
         this.injector = inject(Injector);
         /**
@@ -2888,6 +2927,7 @@ class ColorPaletteItem {
         const wcElement = this.element;
         const inputsToSync = [
             'selected',
+            'tooltip',
             'value',
         ];
         // Synchronize inputs (properties)
@@ -2908,9 +2948,24 @@ class ColorPaletteItem {
                 });
             }
         }
+        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: "21.1.0", ngImport: i0, type: ColorPaletteItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: ColorPaletteItem, isStandalone: true, selector: "ui5-color-palette-item, [ui5-color-palette-item]", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: ColorPaletteItem, isStandalone: true, selector: "ui5-color-palette-item, [ui5-color-palette-item]", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click" }, providers: [
             contentDensityObserverProviders({
                 supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
             })
@@ -2930,7 +2985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+        }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ui5Click: [{ type: i0.Output, args: ["ui5Click"] }] } });
 
 class ColorPalettePopover {
     constructor() {
@@ -4081,6 +4136,16 @@ class DateRangePicker {
          * Defines whether the clear icon of the input will be shown.
          */
         this.showClearIcon = input(false, { ...(ngDevMode ? { debugName: "showClearIcon" } : {}), transform: booleanAttribute });
+        /**
+         * Defines whether the component displays two months side by side in the picker popup.
+      
+      When enabled, two consecutive months are shown, making it easier to select date ranges
+      that span multiple months without the need to navigate between months.
+      
+      **Note:** On mobile devices only a single month
+      will be displayed regardless of this setting.
+         */
+        this.showTwoMonths = input(false, { ...(ngDevMode ? { debugName: "showTwoMonths" } : {}), transform: booleanAttribute });
         /**
          * Defines a formatted date value.
          */
@@ -4216,6 +4281,7 @@ class DateRangePicker {
             'required',
             'secondaryCalendarType',
             'showClearIcon',
+            'showTwoMonths',
             'value',
             'valueFormat',
             'valueState',
@@ -4259,7 +4325,7 @@ class DateRangePicker {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: DateRangePicker, isStandalone: true, selector: "ui5-daterange-picker, [ui5-daterange-picker]", inputs: { accessibleDescription: { classPropertyName: "accessibleDescription", publicName: "accessibleDescription", isSignal: true, isRequired: false, transformFunction: null }, accessibleDescriptionRef: { classPropertyName: "accessibleDescriptionRef", publicName: "accessibleDescriptionRef", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, calendarWeekNumbering: { classPropertyName: "calendarWeekNumbering", publicName: "calendarWeekNumbering", isSignal: true, isRequired: false, transformFunction: null }, delimiter: { classPropertyName: "delimiter", publicName: "delimiter", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, formatPattern: { classPropertyName: "formatPattern", publicName: "formatPattern", isSignal: true, isRequired: false, transformFunction: null }, hideWeekNumbers: { classPropertyName: "hideWeekNumbers", publicName: "hideWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, primaryCalendarType: { classPropertyName: "primaryCalendarType", publicName: "primaryCalendarType", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, secondaryCalendarType: { classPropertyName: "secondaryCalendarType", publicName: "secondaryCalendarType", 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 }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, valueState: { classPropertyName: "valueState", publicName: "valueState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Change: "ui5Change", ui5Close: "ui5Close", ui5Input: "ui5Input", ui5Open: "ui5Open", ui5ValueStateChange: "ui5ValueStateChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: DateRangePicker, isStandalone: true, selector: "ui5-daterange-picker, [ui5-daterange-picker]", inputs: { accessibleDescription: { classPropertyName: "accessibleDescription", publicName: "accessibleDescription", isSignal: true, isRequired: false, transformFunction: null }, accessibleDescriptionRef: { classPropertyName: "accessibleDescriptionRef", publicName: "accessibleDescriptionRef", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, calendarWeekNumbering: { classPropertyName: "calendarWeekNumbering", publicName: "calendarWeekNumbering", isSignal: true, isRequired: false, transformFunction: null }, delimiter: { classPropertyName: "delimiter", publicName: "delimiter", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, formatPattern: { classPropertyName: "formatPattern", publicName: "formatPattern", isSignal: true, isRequired: false, transformFunction: null }, hideWeekNumbers: { classPropertyName: "hideWeekNumbers", publicName: "hideWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, primaryCalendarType: { classPropertyName: "primaryCalendarType", publicName: "primaryCalendarType", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, secondaryCalendarType: { classPropertyName: "secondaryCalendarType", publicName: "secondaryCalendarType", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", isSignal: true, isRequired: false, transformFunction: null }, showTwoMonths: { classPropertyName: "showTwoMonths", publicName: "showTwoMonths", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, valueState: { classPropertyName: "valueState", publicName: "valueState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Change: "ui5Change", ui5Close: "ui5Close", ui5Input: "ui5Input", ui5Open: "ui5Open", ui5ValueStateChange: "ui5ValueStateChange" }, providers: [
             contentDensityObserverProviders({
                 supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
             }),
@@ -4296,7 +4362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { accessibleDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleDescription", required: false }] }], accessibleDescriptionRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleDescriptionRef", required: false }] }], accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], accessibleNameRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleNameRef", required: false }] }], calendarWeekNumbering: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarWeekNumbering", required: false }] }], delimiter: [{ type: i0.Input, args: [{ isSignal: true, alias: "delimiter", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], formatPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatPattern", required: false }] }], hideWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWeekNumbers", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], primaryCalendarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryCalendarType", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], secondaryCalendarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryCalendarType", required: false }] }], showClearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearIcon", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], valueState: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueState", required: false }] }], ui5Change: [{ type: i0.Output, args: ["ui5Change"] }], ui5Close: [{ type: i0.Output, args: ["ui5Close"] }], ui5Input: [{ type: i0.Output, args: ["ui5Input"] }], ui5Open: [{ type: i0.Output, args: ["ui5Open"] }], ui5ValueStateChange: [{ type: i0.Output, args: ["ui5ValueStateChange"] }] } });
+        }], propDecorators: { accessibleDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleDescription", required: false }] }], accessibleDescriptionRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleDescriptionRef", required: false }] }], accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], accessibleNameRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleNameRef", required: false }] }], calendarWeekNumbering: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarWeekNumbering", required: false }] }], delimiter: [{ type: i0.Input, args: [{ isSignal: true, alias: "delimiter", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], formatPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatPattern", required: false }] }], hideWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWeekNumbers", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], primaryCalendarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryCalendarType", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], secondaryCalendarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryCalendarType", required: false }] }], showClearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearIcon", required: false }] }], showTwoMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTwoMonths", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], valueState: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueState", required: false }] }], ui5Change: [{ type: i0.Output, args: ["ui5Change"] }], ui5Close: [{ type: i0.Output, args: ["ui5Close"] }], ui5Input: [{ type: i0.Output, args: ["ui5Input"] }], ui5Open: [{ type: i0.Output, args: ["ui5Open"] }], ui5ValueStateChange: [{ type: i0.Output, args: ["ui5ValueStateChange"] }] } });
 
 class DateTimeInput {
     constructor() {
@@ -4381,6 +4447,7 @@ class DateTimeInput {
       and the current language settings, especially for type `Number`.
       - The property is mostly intended to be used with touch devices
       that use different soft keyboard layouts depending on the given input type.
+      - Type `Number` does not support suggestions.
          */
         this.type = input("Text", ...(ngDevMode ? [{ debugName: "type" }] : []));
         /**
@@ -4431,6 +4498,8 @@ class DateTimeInput {
       property is set to `true`.
       
       **Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.
+      
+      **Note:** Input with type `Number` does not support suggestions.
          * - **icon**: Defines the icon to be displayed in the component.
          * - **valueStateMessage**: Defines the value state message that will be displayed as pop up under the component.
       The value state message slot should contain only one root element.
@@ -4457,7 +4526,7 @@ class DateTimeInput {
         this.slots = [
             {
                 "name": "default",
-                "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items."
+                "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Input with type `Number` does not support suggestions."
             },
             {
                 "name": "icon",
@@ -6309,6 +6378,7 @@ class Input {
       and the current language settings, especially for type `Number`.
       - The property is mostly intended to be used with touch devices
       that use different soft keyboard layouts depending on the given input type.
+      - Type `Number` does not support suggestions.
          */
         this.type = input("Text", ...(ngDevMode ? [{ debugName: "type" }] : []));
         /**
@@ -6359,6 +6429,8 @@ class Input {
       property is set to `true`.
       
       **Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.
+      
+      **Note:** Input with type `Number` does not support suggestions.
          * - **icon**: Defines the icon to be displayed in the component.
          * - **valueStateMessage**: Defines the value state message that will be displayed as pop up under the component.
       The value state message slot should contain only one root element.
@@ -6385,7 +6457,7 @@ class Input {
         this.slots = [
             {
                 "name": "default",
-                "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items."
+                "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Input with type `Number` does not support suggestions."
             },
             {
                 "name": "icon",
@@ -9202,6 +9274,7 @@ class MultiInput {
       and the current language settings, especially for type `Number`.
       - The property is mostly intended to be used with touch devices
       that use different soft keyboard layouts depending on the given input type.
+      - Type `Number` does not support suggestions.
          */
         this.type = input("Text", ...(ngDevMode ? [{ debugName: "type" }] : []));
         /**
@@ -9261,6 +9334,8 @@ class MultiInput {
       property is set to `true`.
       
       **Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.
+      
+      **Note:** Input with type `Number` does not support suggestions.
          * - **icon**: Defines the icon to be displayed in the component.
          * - **tokens**: Defines the component tokens.
          * - **valueStateMessage**: Defines the value state message that will be displayed as pop up under the component.
@@ -9288,7 +9363,7 @@ class MultiInput {
         this.slots = [
             {
                 "name": "default",
-                "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items."
+                "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Input with type `Number` does not support suggestions."
             },
             {
                 "name": "icon",
@@ -11066,6 +11141,12 @@ class SegmentedButtonItem {
       **Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
          */
         this.tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : [])); // className is now passed
+        /**
+         * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
+      
+      **Note:** The event will not be fired if the `disabled` property is set to `true`.
+         */
+        this.ui5Click = output();
         /**
          * Available slots for content projection in this component.
          *
@@ -11135,9 +11216,24 @@ class SegmentedButtonItem {
                 });
             }
         }
+        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: "21.1.0", ngImport: i0, type: SegmentedButtonItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: SegmentedButtonItem, isStandalone: true, selector: "ui5-segmented-button-item, [ui5-segmented-button-item]", inputs: { accessibleDescription: { classPropertyName: "accessibleDescription", publicName: "accessibleDescription", isSignal: true, isRequired: false, transformFunction: null }, accessibleDescriptionRef: { classPropertyName: "accessibleDescriptionRef", publicName: "accessibleDescriptionRef", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: SegmentedButtonItem, isStandalone: true, selector: "ui5-segmented-button-item, [ui5-segmented-button-item]", inputs: { accessibleDescription: { classPropertyName: "accessibleDescription", publicName: "accessibleDescription", isSignal: true, isRequired: false, transformFunction: null }, accessibleDescriptionRef: { classPropertyName: "accessibleDescriptionRef", publicName: "accessibleDescriptionRef", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click" }, providers: [
             contentDensityObserverProviders({
                 supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
             })
@@ -11157,7 +11253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { accessibleDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleDescription", required: false }] }], accessibleDescriptionRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleDescriptionRef", required: false }] }], accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], accessibleNameRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleNameRef", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }] } });
+        }], propDecorators: { accessibleDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleDescription", required: false }] }], accessibleDescriptionRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleDescriptionRef", required: false }] }], accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], accessibleNameRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleNameRef", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], ui5Click: [{ type: i0.Output, args: ["ui5Click"] }] } });
 
 class Select {
     constructor() {
@@ -11610,36 +11706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 
 class SliderHandle {
     constructor() {
-        /**
-         * Defines whether the slider handle is active.
-      <br><br>
-      <b>Note:</b> An active slider handle is currently being interacted with.
-         */
-        this.active = input(false, { ...(ngDevMode ? { debugName: "active" } : {}), transform: booleanAttribute });
-        /**
-         * Defines whether the slider handle is disabled.
-      <br><br>
-      <b>Note:</b> A disabled slider handle cannot be interacted with.
-         */
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
-        /**
-         * Defines the maximum value of the slider handle.
-      <br><br>
-      <b>Note:</b> The value should be greater than the <code>min</code> property of the parent <code>ui5-slider</code>.
-         */
-        this.max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
-        /**
-         * Defines the minimum value of the slider handle.
-      <br><br>
-      <b>Note:</b> The value should be less than the <code>max</code> property of the parent <code>ui5-slider</code>.
-         */
-        this.min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
-        /**
-         * Defines the value of the slider handle.
-      <br><br>
-      <b>Note:</b> The value should be between the <code>min</code> and <code>max</code> properties of the parent <code>ui5-slider</code>.
-         */
-        this.value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : [])); // className is now passed
+        // className is now passed
         this.elementRef = inject(ElementRef);
         this.injector = inject(Injector);
         /**
@@ -11654,34 +11721,9 @@ class SliderHandle {
     }
     ngAfterViewInit() {
         const wcElement = this.element;
-        const inputsToSync = [
-            'active',
-            'disabled',
-            'max',
-            'min',
-            'value',
-        ];
-        // 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: "21.1.0", ngImport: i0, type: SliderHandle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: SliderHandle, isStandalone: true, selector: "ui5-slider-handle, [ui5-slider-handle]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: SliderHandle, isStandalone: true, selector: "ui5-slider-handle, [ui5-slider-handle]", providers: [
             contentDensityObserverProviders({
                 supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
             })
@@ -11701,7 +11743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+        }] });
 
 class SliderTooltip {
     constructor() {
@@ -13468,9 +13510,9 @@ class TableCell {
         /**
          * Defines whether the cell is visually merged with the cell directly above it.
       
-      This is useful when consecutive cells in a column have the same value and should visually appear as a single merged cell.
+      This is useful if consecutive cells in a column have the same value and should visually appear as a single merged cell.
       Although the cell is visually merged with the previous one, its content must still be provided for accessibility purposes.
-      **Note:** This feature is disabled when cells are rendered as popin, and should remain `false` for interactive cell content.
+      **Note:** This feature is disabled when cells are rendered as a popin, and should remain `false` for interactive cell content.
          */
         this.merged = input(false, { ...(ngDevMode ? { debugName: "merged" } : {}), transform: booleanAttribute }); // className is now passed
         /**
@@ -16554,7 +16596,13 @@ class Toolbar {
         /**
          * Defines the toolbar design.
          */
-        this.design = input("Solid", ...(ngDevMode ? [{ debugName: "design" }] : [])); // className is now passed
+        this.design = input("Solid", ...(ngDevMode ? [{ debugName: "design" }] : []));
+        /**
+         * Defines the accessible ARIA name of the overflow button of the component.
+      
+      **Note:** When not set, the built-in translation for "Additional Options" is used.
+         */
+        this.overflowButtonAccessibleName = input(...(ngDevMode ? [undefined, { debugName: "overflowButtonAccessibleName" }] : [])); // className is now passed
         /**
          * Available slots for content projection in this component.
          *
@@ -16601,6 +16649,7 @@ class Toolbar {
             'accessibleNameRef',
             'alignContent',
             'design',
+            'overflowButtonAccessibleName',
         ];
         // Synchronize inputs (properties)
         for (const inputName of inputsToSync) {
@@ -16622,7 +16671,7 @@ class Toolbar {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Toolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: Toolbar, isStandalone: true, selector: "ui5-toolbar, [ui5-toolbar]", inputs: { accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, alignContent: { classPropertyName: "alignContent", publicName: "alignContent", isSignal: true, isRequired: false, transformFunction: null }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: Toolbar, isStandalone: true, selector: "ui5-toolbar, [ui5-toolbar]", inputs: { accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, alignContent: { classPropertyName: "alignContent", publicName: "alignContent", isSignal: true, isRequired: false, transformFunction: null }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, overflowButtonAccessibleName: { classPropertyName: "overflowButtonAccessibleName", publicName: "overflowButtonAccessibleName", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             contentDensityObserverProviders({
                 supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
             })
@@ -16642,7 +16691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], accessibleNameRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleNameRef", required: false }] }], alignContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignContent", required: false }] }], design: [{ type: i0.Input, args: [{ isSignal: true, alias: "design", required: false }] }] } });
+        }], propDecorators: { accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], accessibleNameRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleNameRef", required: false }] }], alignContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignContent", required: false }] }], design: [{ type: i0.Input, args: [{ isSignal: true, alias: "design", required: false }] }], overflowButtonAccessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowButtonAccessibleName", required: false }] }] } });
 
 class ToolbarButton {
     constructor() {