@fundamental-ngx/ui5-webcomponents 0.63.0-rc.9 → 0.63.0

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

@@ -0,0 +1,295 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, inject, ElementRef, Injector, runInInjectionContext, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import '@ui5/webcomponents/dist/MenuItem.js';
+import { ContentDensityObserver, contentDensityObserverProviders, ContentDensityMode } from '@fundamental-ngx/core/content-density';
+
+class MenuItem {
+    constructor() {
+        /**
+         * Defines the additional accessibility attributes that will be applied to the component.
+      The following fields are supported:
+      
+      - **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.
+      
+      - **role**: Defines the role of the menu item. If not set, menu item will have default role="menuitem".
+         */
+        this.accessibilityAttributes = input({}, ...(ngDevMode ? [{ debugName: "accessibilityAttributes" }] : []));
+        /**
+         * Defines the accessible ARIA name of the component.
+         */
+        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : []));
+        /**
+         * Used to define the role of the list item.
+      
+      **Note:** If not set, the role is automatically inherited from the parent `ui5-list` based on its `accessible-role` property
+      (e.g. `Menu` -> `MenuItem`, `Tree` -> `TreeItem`, `ListBox` -> `Option`).
+      An explicitly set `accessible-role` on the list item takes precedence over the inherited role.
+         */
+        this.accessibleRole = input(...(ngDevMode ? [undefined, { debugName: "accessibleRole" }] : []));
+        /**
+         * Defines the `additionalText`, displayed in the end of the menu item.
+      
+      **Note:** The additional text will not be displayed if there are items added in `items` slot or there are
+      components added to `endContent` slot.
+      
+      The priority of what will be displayed at the end of the menu item is as follows:
+      sub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.
+         */
+        this.additionalText = input(...(ngDevMode ? [undefined, { debugName: "additionalText" }] : []));
+        /**
+         * Defines whether menu item is in checked state.
+      
+      **Note:** checked state is only taken into account when menu item is added to menu item group
+      with `checkMode` other than `None`.
+      
+      **Note:** A checked menu item has a checkmark displayed at its end.
+         */
+        this.checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : {}), transform: booleanAttribute });
+        /**
+         * Defines whether menu item is in disabled state.
+      
+      **Note:** A disabled menu item is noninteractive.
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+        /**
+         * Defines the highlight state of the list items.
+      Available options are: `"None"` (by default), `"Positive"`, `"Critical"`, `"Information"` and `"Negative"`.
+         */
+        this.highlight = input("None", ...(ngDevMode ? [{ debugName: "highlight" }] : []));
+        /**
+         * Defines the icon to be displayed as graphical element within the component.
+      The SAP-icons font provides numerous options.
+      
+      **Example:**
+      
+      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 delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.
+      
+      **Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.
+         */
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+        /**
+         * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.
+         */
+        this.loadingDelay = input(1000, ...(ngDevMode ? [{ debugName: "loadingDelay" }] : []));
+        /**
+         * The navigated state of the list item.
+      If set to `true`, a navigation indicator is displayed at the end of the list item.
+         */
+        this.navigated = input(false, { ...(ngDevMode ? { debugName: "navigated" } : {}), transform: booleanAttribute });
+        /**
+         * Defines the selected state of the component.
+         */
+        this.selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : {}), transform: booleanAttribute });
+        /**
+         * Defines the text of the tree item.
+         */
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        /**
+         * Defines the text of the tooltip for the menu item.
+         */
+        this.tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : []));
+        /**
+         * Defines the visual indication and behavior of the list items.
+      Available options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.
+      
+      **Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,
+      while with type `Inactive` and `Detail` - will not.
+         */
+        this.type = input("Active", ...(ngDevMode ? [{ debugName: "type" }] : [])); // className is now passed
+        /**
+         * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.
+         */
+        this.ui5BeforeClose = output();
+        /**
+         * Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.
+      
+      **Note:** Since 1.14.0 the event is also fired before a sub-menu opens.
+         */
+        this.ui5BeforeOpen = output();
+        /**
+         * Fired when an item is checked or unchecked.
+         */
+        this.ui5Check = output();
+        /**
+         * 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();
+        /**
+         * Fired after the menu is closed.
+         */
+        this.ui5Close = output();
+        /**
+         * Fired when the user clicks on the detail button when type is `Detail`.
+         */
+        this.ui5DetailClick = output();
+        /**
+         * Fired after the menu is opened.
+         */
+        this.ui5Open = output();
+        /**
+         * Available slots for content projection in this component.
+         *
+         * Slots allow you to insert custom content into predefined areas of the web component.
+         * Use the `slot` attribute on child elements to target specific slots.
+         *
+         * - **(default)**: Defines the items of this component.
+      
+      **Note:** The slot can hold menu item and menu separator items.
+      
+      If there are items added to this slot, an arrow will be displayed at the end
+      of the item in order to indicate that there are items added. In that case components added
+      to `endContent` slot or `additionalText` content will not be displayed.
+      
+      The priority of what will be displayed at the end of the menu item is as follows:
+      sub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.
+         * - **deleteButton**: Defines the delete button, displayed in "Delete" mode.
+      **Note:** While the slot allows custom buttons, to match
+      design guidelines, please use the `ui5-button` component.
+      **Note:** When the slot is not present, a built-in delete button will be displayed.
+         * - **endContent**: Defines the components that should be displayed at the end of the menu item.
+      
+      **Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`
+      or `ui5-icon` in order to preserve the intended design. If there are components added to this slot,
+      and there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,
+      nether `additionalText` nor components added to this slot would be displayed.
+      
+      The priority of what will be displayed at the end of the menu item is as follows:
+      sub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.
+      
+      Application developers are responsible for ensuring that interactive elements placed in the `endContent` slot
+      have the correct accessibility behaviour, including their enabled or disabled states.
+      The menu does not manage these aspects when the menu item state changes.
+         *
+         * @example
+         * ```html
+         * <ui5-menu-item>
+         *   <div slot="header">Custom header content</div>
+         *   <p>Default slot content</p>
+         * </ui5-menu-item>
+         * ```
+         *
+         * @readonly
+         * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+         */
+        this.slots = [
+            {
+                "name": "default",
+                "description": "Defines the items of this component.\n\n**Note:** The slot can hold menu item and menu separator items.\n\nIf there are items added to this slot, an arrow will be displayed at the end\nof the item in order to indicate that there are items added. In that case components added\nto `endContent` slot or `additionalText` content will not be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`."
+            },
+            {
+                "name": "deleteButton",
+                "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.",
+                "since": "1.9.0"
+            },
+            {
+                "name": "endContent",
+                "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.",
+                "since": "2.0.0"
+            }
+        ];
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+        /**
+         * Content density observer is injected to activate automatic CSS class and
+         * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.
+         * @private
+         */
+        this._contentDensityObserver = inject(ContentDensityObserver);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'accessibilityAttributes',
+            'accessibleName',
+            'accessibleRole',
+            'additionalText',
+            'checked',
+            'disabled',
+            'highlight',
+            'icon',
+            'loading',
+            'loadingDelay',
+            'navigated',
+            'selected',
+            'text',
+            'tooltip',
+            'type',
+        ];
+        // 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 = [
+            'ui5BeforeClose',
+            'ui5BeforeOpen',
+            'ui5Check',
+            'ui5Click',
+            'ui5Close',
+            'ui5DetailClick',
+            'ui5Open',
+        ];
+        // 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: MenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MenuItem, isStandalone: true, selector: "ui5-menu-item, [ui5-menu-item]", inputs: { accessibilityAttributes: { classPropertyName: "accessibilityAttributes", publicName: "accessibilityAttributes", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleRole: { classPropertyName: "accessibleRole", publicName: "accessibleRole", isSignal: true, isRequired: false, transformFunction: null }, additionalText: { classPropertyName: "additionalText", publicName: "additionalText", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", 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 }, navigated: { classPropertyName: "navigated", publicName: "navigated", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5BeforeClose: "ui5BeforeClose", ui5BeforeOpen: "ui5BeforeOpen", ui5Check: "ui5Check", ui5Click: "ui5Click", ui5Close: "ui5Close", ui5DetailClick: "ui5DetailClick", ui5Open: "ui5Open" }, providers: [
+            contentDensityObserverProviders({
+                supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+            })
+        ], exportAs: ["ui5MenuItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MenuItem, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-menu-item, [ui5-menu-item]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5MenuItem',
+                    providers: [
+                        contentDensityObserverProviders({
+                            supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+                        })
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { accessibilityAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityAttributes", required: false }] }], accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], accessibleRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleRole", required: false }] }], additionalText: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalText", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], highlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlight", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingDelay", required: false }] }], navigated: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigated", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ui5BeforeClose: [{ type: i0.Output, args: ["ui5BeforeClose"] }], ui5BeforeOpen: [{ type: i0.Output, args: ["ui5BeforeOpen"] }], ui5Check: [{ type: i0.Output, args: ["ui5Check"] }], ui5Click: [{ type: i0.Output, args: ["ui5Click"] }], ui5Close: [{ type: i0.Output, args: ["ui5Close"] }], ui5DetailClick: [{ type: i0.Output, args: ["ui5DetailClick"] }], ui5Open: [{ type: i0.Output, args: ["ui5Open"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MenuItem };
+//# sourceMappingURL=fundamental-ngx-ui5-webcomponents-menu-item.mjs.map

package/fesm2022/fundamental-ngx-ui5-webcomponents-menu-item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fundamental-ngx-ui5-webcomponents-menu-item.mjs","sources":["../../../../libs/ui5-webcomponents/menu-item/index.ts","../../../../libs/ui5-webcomponents/menu-item/fundamental-ngx-ui5-webcomponents-menu-item.ts"],"sourcesContent":["\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  input,\n  output,\n  AfterViewInit,\n  effect,\n  runInInjectionContext,\n  inject,\n  Injector,\n  booleanAttribute,\n  computed,\n  signal\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/MenuItem.js';\nimport { default as _MenuItem } from '@ui5/webcomponents/dist/MenuItem.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n  ContentDensityObserver,\n  contentDensityObserverProviders,\n  ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\nimport { MenuItemAccessibilityAttributes } from '@ui5/webcomponents/dist/MenuItem.js';\nimport { default as ListItemAccessibleRole } from '@ui5/webcomponents/dist/types/ListItemAccessibleRole.js';\nimport { default as Highlight } from '@ui5/webcomponents/dist/types/Highlight.js';\nimport { default as ListItemType } from '@ui5/webcomponents/dist/types/ListItemType.js';\n\n@Component({\n  standalone: true,\n  selector: 'ui5-menu-item, [ui5-menu-item]',\n  template: '<ng-content></ng-content>',\n  exportAs: 'ui5MenuItem',\n  providers: [\n    contentDensityObserverProviders({\n      supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n    })\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MenuItem implements AfterViewInit {\n\n  /**\n   * Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".\n   */\n  accessibilityAttributes = input<typeof _MenuItem.prototype.accessibilityAttributes | undefined>({});\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   */\n  accessibleName = input<typeof _MenuItem.prototype.accessibleName | undefined>();\n\n  /**\n   * Used to define the role of the list item.\n\n**Note:** If not set, the role is automatically inherited from the parent `ui5-list` based on its `accessible-role` property\n(e.g. `Menu` -> `MenuItem`, `Tree` -> `TreeItem`, `ListBox` -> `Option`).\nAn explicitly set `accessible-role` on the list item takes precedence over the inherited role.\n   */\n  accessibleRole = input<typeof _MenuItem.prototype.accessibleRole | undefined>();\n\n  /**\n   * Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n   */\n  additionalText = input<typeof _MenuItem.prototype.additionalText | undefined>();\n\n  /**\n   * Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.\n   */\n  checked = input(false, { transform: booleanAttribute });\n\n  /**\n   * Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.\n   */\n  disabled = input(false, { transform: booleanAttribute });\n\n  /**\n   * Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.\n   */\n  highlight = input<typeof _MenuItem.prototype.highlight | undefined>(\"None\");\n\n  /**\n   * Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n   */\n  icon = input<typeof _MenuItem.prototype.icon | undefined>();\n\n  /**\n   * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.\n   */\n  loading = input(false, { transform: booleanAttribute });\n\n  /**\n   * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n   */\n  loadingDelay = input<typeof _MenuItem.prototype.loadingDelay | undefined>(1000);\n\n  /**\n   * The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.\n   */\n  navigated = input(false, { transform: booleanAttribute });\n\n  /**\n   * Defines the selected state of the component.\n   */\n  selected = input(false, { transform: booleanAttribute });\n\n  /**\n   * Defines the text of the tree item.\n   */\n  text = input<typeof _MenuItem.prototype.text | undefined>();\n\n  /**\n   * Defines the text of the tooltip for the menu item.\n   */\n  tooltip = input<typeof _MenuItem.prototype.tooltip | undefined>();\n\n  /**\n   * Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.\n   */\n  type = input<typeof _MenuItem.prototype.type | undefined>(\"Active\"); // className is now passed\n\n\n\n  /**\n   * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.\n   */\n  ui5BeforeClose = output<UI5CustomEvent<_MenuItem, 'before-close'>>();\n\n  /**\n   * Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.\n   */\n  ui5BeforeOpen = output<UI5CustomEvent<_MenuItem, 'before-open'>>();\n\n  /**\n   * Fired when an item is checked or unchecked.\n   */\n  ui5Check = output<UI5CustomEvent<_MenuItem, 'check'>>();\n\n  /**\n   * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.\n   */\n  ui5Click = output<UI5CustomEvent<_MenuItem, 'click'>>();\n\n  /**\n   * Fired after the menu is closed.\n   */\n  ui5Close = output<UI5CustomEvent<_MenuItem, 'close'>>();\n\n  /**\n   * Fired when the user clicks on the detail button when type is `Detail`.\n   */\n  ui5DetailClick = output<UI5CustomEvent<_MenuItem, 'detail-click'>>();\n\n  /**\n   * Fired after the menu is opened.\n   */\n  ui5Open = output<UI5CustomEvent<_MenuItem, 'open'>>();\n\n  /**\n   * Available slots for content projection in this component.\n   *\n   * Slots allow you to insert custom content into predefined areas of the web component.\n   * Use the `slot` attribute on child elements to target specific slots.\n   *\n   * - **(default)**: Defines the items of this component.\n\n**Note:** The slot can hold menu item and menu separator items.\n\nIf there are items added to this slot, an arrow will be displayed at the end\nof the item in order to indicate that there are items added. In that case components added\nto `endContent` slot or `additionalText` content will not be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n   * - **deleteButton**: Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.\n   * - **endContent**: Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.\n   *\n   * @example\n   * ```html\n   * <ui5-menu-item>\n   *   <div slot=\"header\">Custom header content</div>\n   *   <p>Default slot content</p>\n   * </ui5-menu-item>\n   * ```\n   *\n   * @readonly\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}\n   */\n  readonly slots = [\n      {\n          \"name\": \"default\",\n          \"description\": \"Defines the items of this component.\\n\\n**Note:** The slot can hold menu item and menu separator items.\\n\\nIf there are items added to this slot, an arrow will be displayed at the end\\nof the item in order to indicate that there are items added. In that case components added\\nto `endContent` slot or `additionalText` content will not be displayed.\\n\\nThe priority of what will be displayed at the end of the menu item is as follows:\\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\"\n      },\n      {\n          \"name\": \"deleteButton\",\n          \"description\": \"Defines the delete button, displayed in \\\"Delete\\\" mode.\\n**Note:** While the slot allows custom buttons, to match\\ndesign guidelines, please use the `ui5-button` component.\\n**Note:** When the slot is not present, a built-in delete button will be displayed.\",\n          \"since\": \"1.9.0\"\n      },\n      {\n          \"name\": \"endContent\",\n          \"description\": \"Defines the components that should be displayed at the end of the menu item.\\n\\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\\nnether `additionalText` nor components added to this slot would be displayed.\\n\\nThe priority of what will be displayed at the end of the menu item is as follows:\\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\\n\\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\\nhave the correct accessibility behaviour, including their enabled or disabled states.\\nThe menu does not manage these aspects when the menu item state changes.\",\n          \"since\": \"2.0.0\"\n      }\n  ];\n\n\n  public elementRef: ElementRef<_MenuItem> = inject(ElementRef);\n  public injector = inject(Injector);\n\n  /**\n   * Content density observer is injected to activate automatic CSS class and\n   * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.\n   * @private\n   */\n  private readonly _contentDensityObserver = inject(ContentDensityObserver);\n\n  get element(): _MenuItem {\n    return this.elementRef.nativeElement;\n  }\n\n  ngAfterViewInit(): void {\n    const wcElement = this.element;\n    \n    const inputsToSync = [\n      'accessibilityAttributes',\n      'accessibleName',\n      'accessibleRole',\n      'additionalText',\n      'checked',\n      'disabled',\n      'highlight',\n      'icon',\n      'loading',\n      'loadingDelay',\n      'navigated',\n      'selected',\n      'text',\n      'tooltip',\n      'type',\n    ];\n    \n    // Synchronize inputs (properties)\n    for (const inputName of inputsToSync) {\n      // Find the corresponding camelCase signal property on the Angular component\n      const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n      // Use the Injector to run the effect in the correct context\n      if (this[signalName] && typeof this[signalName] === 'function') {\n        runInInjectionContext(this.injector, () => {\n          effect(() => {\n            // Read the signal value\n            const value = this[signalName]();\n            if (wcElement) {\n              // Write the value to the Web Component's property\n              wcElement[inputName] = value;\n            }\n          });\n        });\n      }\n    }\n  \n    \n    const outputsToSync = [\n      'ui5BeforeClose',\n      'ui5BeforeOpen',\n      'ui5Check',\n      'ui5Click',\n      'ui5Close',\n      'ui5DetailClick',\n      'ui5Open',\n    ];\n    \n    // Synchronize outputs (events)\n    for (const outputName of outputsToSync) {\n      // Map Angular output name to UI5 web component event name\n      const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);\n      // Ensure the output property exists and has an emit function before adding listener\n      if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {\n        // Cast the listener to the correct type to satisfy TypeScript\n        wcElement.addEventListener(eventName, (e) => {\n\n          this[outputName].emit(e as CustomEvent<any>);\n        });\n      }\n    }\n  \n\n  }\n}\n\n// Re-export types for convenience\nexport { MenuItemAccessibilityAttributes } from '@ui5/webcomponents/dist/MenuItem.js';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,73 @@
+import * as i0 from '@angular/core';
+import { output, inject, ElementRef, Injector, ChangeDetectionStrategy, Component } from '@angular/core';
+import '@ui5/webcomponents/dist/MenuSeparator.js';
+import { ContentDensityObserver, contentDensityObserverProviders, ContentDensityMode } from '@fundamental-ngx/core/content-density';
+
+class MenuSeparator {
+    constructor() {
+        // 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);
+        /**
+         * Content density observer is injected to activate automatic CSS class and
+         * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.
+         * @private
+         */
+        this._contentDensityObserver = inject(ContentDensityObserver);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        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: MenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MenuSeparator, isStandalone: true, selector: "ui5-menu-separator, [ui5-menu-separator]", outputs: { ui5Click: "ui5Click" }, providers: [
+            contentDensityObserverProviders({
+                supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+            })
+        ], exportAs: ["ui5MenuSeparator"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MenuSeparator, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-menu-separator, [ui5-menu-separator]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5MenuSeparator',
+                    providers: [
+                        contentDensityObserverProviders({
+                            supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+                        })
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { ui5Click: [{ type: i0.Output, args: ["ui5Click"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MenuSeparator };
+//# sourceMappingURL=fundamental-ngx-ui5-webcomponents-menu-separator.mjs.map

package/fesm2022/fundamental-ngx-ui5-webcomponents-menu-separator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fundamental-ngx-ui5-webcomponents-menu-separator.mjs","sources":["../../../../libs/ui5-webcomponents/menu-separator/index.ts","../../../../libs/ui5-webcomponents/menu-separator/fundamental-ngx-ui5-webcomponents-menu-separator.ts"],"sourcesContent":["\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  input,\n  output,\n  AfterViewInit,\n  effect,\n  runInInjectionContext,\n  inject,\n  Injector,\n  booleanAttribute,\n  computed,\n  signal\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/MenuSeparator.js';\nimport { default as _MenuSeparator } from '@ui5/webcomponents/dist/MenuSeparator.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n  ContentDensityObserver,\n  contentDensityObserverProviders,\n  ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\n\n\n@Component({\n  standalone: true,\n  selector: 'ui5-menu-separator, [ui5-menu-separator]',\n  template: '<ng-content></ng-content>',\n  exportAs: 'ui5MenuSeparator',\n  providers: [\n    contentDensityObserverProviders({\n      supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n    })\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MenuSeparator implements AfterViewInit {\n // className is now passed\n\n\n\n  /**\n   * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.\n   */\n  ui5Click = output<UI5CustomEvent<_MenuSeparator, 'click'>>();\n\n\n  public elementRef: ElementRef<_MenuSeparator> = inject(ElementRef);\n  public injector = inject(Injector);\n\n  /**\n   * Content density observer is injected to activate automatic CSS class and\n   * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.\n   * @private\n   */\n  private readonly _contentDensityObserver = inject(ContentDensityObserver);\n\n  get element(): _MenuSeparator {\n    return this.elementRef.nativeElement;\n  }\n\n  ngAfterViewInit(): void {\n    const wcElement = this.element;\n    \n    \n    \n    const outputsToSync = [\n      'ui5Click',\n    ];\n    \n    // Synchronize outputs (events)\n    for (const outputName of outputsToSync) {\n      // Map Angular output name to UI5 web component event name\n      const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);\n      // Ensure the output property exists and has an emit function before adding listener\n      if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {\n        // Cast the listener to the correct type to satisfy TypeScript\n        wcElement.addEventListener(eventName, (e) => {\n\n          this[outputName].emit(e as CustomEvent<any>);\n        });\n      }\n    }\n  \n\n  }\n}\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAuCa,aAAa,CAAA;AAZ1B,IAAA,WAAA,GAAA;;AAiBE;;;;AAIG;QACH,IAAA,CAAA,QAAQ,GAAG,MAAM,EAA2C;AAGrD,QAAA,IAAA,CAAA,UAAU,GAA+B,MAAM,CAAC,UAAU,CAAC;AAC3D,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAElC;;;;AAIG;AACc,QAAA,IAAA,CAAA,uBAAuB,GAAG,MAAM,CAAC,sBAAsB,CAAC;AA+B1E,IAAA;AA7BC,IAAA,IAAI,OAAO,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa;IACtC;IAEA,eAAe,GAAA;AACb,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO;AAI9B,QAAA,MAAM,aAAa,GAAG;YACpB,UAAU;SACX;;AAGD,QAAA,KAAK,MAAM,UAAU,IAAI,aAAa,EAAE;;YAEtC,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErG,YAAA,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,KAAK,UAAU,IAAI,SAAS,CAAC,gBAAgB,EAAE;;gBAEjG,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,KAAI;oBAE1C,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAqB,CAAC;AAC9C,gBAAA,CAAC,CAAC;YACJ;QACF;IAGF;8GAnDW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0CAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,SAAA,EAPb;AACT,YAAA,+BAA+B,CAAC;gBAC9B,uBAAuB,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,CAAC,IAAI;aAC9E;AACF,SAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EANS,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAS1B,aAAa,EAAA,UAAA,EAAA,CAAA;kBAZzB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,0CAA0C;AACpD,oBAAA,QAAQ,EAAE,2BAA2B;AACrC,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,SAAS,EAAE;AACT,wBAAA,+BAA+B,CAAC;4BAC9B,uBAAuB,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,CAAC,IAAI;yBAC9E;AACF,qBAAA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAChD,iBAAA;;;ACtCD;;AAEG;;;;"}

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

@@ -0,0 +1,178 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, inject, ElementRef, Injector, runInInjectionContext, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import '@ui5/webcomponents/dist/Menu.js';
+import { ContentDensityObserver, contentDensityObserverProviders, ContentDensityMode } from '@fundamental-ngx/core/content-density';
+
+class Menu {
+    constructor() {
+        /**
+         * Defines the header text of the menu (displayed on mobile).
+         */
+        this.headerText = input(...(ngDevMode ? [undefined, { debugName: "headerText" }] : []));
+        /**
+         * Determines the horizontal alignment of the menu relative to its opener control.
+         */
+        this.horizontalAlign = input("Start", ...(ngDevMode ? [{ debugName: "horizontalAlign" }] : []));
+        /**
+         * Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.
+         */
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+        /**
+         * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.
+         */
+        this.loadingDelay = input(1000, ...(ngDevMode ? [{ debugName: "loadingDelay" }] : []));
+        /**
+         * Indicates if the menu is open.
+         */
+        this.open = input(false, { ...(ngDevMode ? { debugName: "open" } : {}), transform: booleanAttribute });
+        /**
+         * Defines the ID or DOM Reference of the element at which the 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" }] : []));
+        /**
+         * Determines on which side the component is placed at.
+         */
+        this.placement = input("Bottom", ...(ngDevMode ? [{ debugName: "placement" }] : [])); // className is now passed
+        /**
+         * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.
+         */
+        this.ui5BeforeClose = output();
+        /**
+         * Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.
+      
+      **Note:** Since 1.14.0 the event is also fired before a sub-menu opens.
+         */
+        this.ui5BeforeOpen = output();
+        /**
+         * Fired after the menu is closed.
+         */
+        this.ui5Close = output();
+        /**
+         * Fired when an item is being clicked.
+      
+      **Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.
+         */
+        this.ui5ItemClick = output();
+        /**
+         * Fired after the menu is opened.
+         */
+        this.ui5Open = output();
+        /**
+         * Available slots for content projection in this component.
+         *
+         * Slots allow you to insert custom content into predefined areas of the web component.
+         * Use the `slot` attribute on child elements to target specific slots.
+         *
+         * - **(default)**: Defines the items of this component.
+      
+      **Note:** Use `ui5-menu-item` and `ui5-menu-separator` for their intended design.
+         *
+         * @example
+         * ```html
+         * <ui5-menu>
+         *   <div slot="header">Custom header content</div>
+         *   <p>Default slot content</p>
+         * </ui5-menu>
+         * ```
+         *
+         * @readonly
+         * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+         */
+        this.slots = [
+            {
+                "name": "default",
+                "description": "Defines the items of this component.\n\n**Note:** Use `ui5-menu-item` and `ui5-menu-separator` for their intended design."
+            }
+        ];
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+        /**
+         * Content density observer is injected to activate automatic CSS class and
+         * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.
+         * @private
+         */
+        this._contentDensityObserver = inject(ContentDensityObserver);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'headerText',
+            'horizontalAlign',
+            'loading',
+            'loadingDelay',
+            'open',
+            'opener',
+            'placement',
+        ];
+        // 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 = [
+            'ui5BeforeClose',
+            'ui5BeforeOpen',
+            'ui5Close',
+            'ui5ItemClick',
+            'ui5Open',
+        ];
+        // 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: Menu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: Menu, isStandalone: true, selector: "ui5-menu, [ui5-menu]", inputs: { headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlign: { classPropertyName: "horizontalAlign", publicName: "horizontalAlign", 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 }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, opener: { classPropertyName: "opener", publicName: "opener", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5BeforeClose: "ui5BeforeClose", ui5BeforeOpen: "ui5BeforeOpen", ui5Close: "ui5Close", ui5ItemClick: "ui5ItemClick", ui5Open: "ui5Open" }, providers: [
+            contentDensityObserverProviders({
+                supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+            })
+        ], exportAs: ["ui5Menu"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Menu, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-menu, [ui5-menu]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5Menu',
+                    providers: [
+                        contentDensityObserverProviders({
+                            supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+                        })
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { headerText: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerText", required: false }] }], horizontalAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalAlign", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingDelay", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], opener: [{ type: i0.Input, args: [{ isSignal: true, alias: "opener", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], ui5BeforeClose: [{ type: i0.Output, args: ["ui5BeforeClose"] }], ui5BeforeOpen: [{ type: i0.Output, args: ["ui5BeforeOpen"] }], ui5Close: [{ type: i0.Output, args: ["ui5Close"] }], ui5ItemClick: [{ type: i0.Output, args: ["ui5ItemClick"] }], ui5Open: [{ type: i0.Output, args: ["ui5Open"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Menu };
+//# sourceMappingURL=fundamental-ngx-ui5-webcomponents-menu.mjs.map