@fundamental-ngx/ui5-webcomponents-fiori 0.58.0-rc.64 → 0.58.0-rc.66

package/README.md

@@ -1,3 +1,77 @@
 # ui5-webcomponents-fiori
 
-ui5-wecomponents-fiori package
+Angular component wrappers around the [@ui5/webcomponents-fiori](https://www.npmjs.com/package/@ui5/webcomponents-fiori) npm package.
+
+## Overview
+
+This library provides Angular components that wrap UI5 Fiori Web Components, enabling you to build SAP Fiori-compliant applications with Angular. These components include higher-level patterns and layouts specific to enterprise applications.
+
+- Angular-friendly API (inputs, outputs, template syntax)
+- TypeScript type definitions
+- Full integration with Angular's change detection
+- Standalone components support
+- SAP Fiori design guidelines compliance
+
+## Installation
+
+```bash
+npm install @fundamental-ngx/ui5-webcomponents-fiori
+```
+
+## Usage
+
+Import the Fiori components you need:
+
+```typescript
+import { ShellBar } from '@fundamental-ngx/ui5-webcomponents-fiori/shell-bar';
+import { DynamicPage } from '@fundamental-ngx/ui5-webcomponents-fiori/dynamic-page';
+import { Timeline } from '@fundamental-ngx/ui5-webcomponents-fiori/timeline';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [ShellBar, DynamicPage, Timeline],
+  template: `
+    <ui5-shellbar
+      primary-title="My App"
+      (profile-click)="handleProfile()">
+    </ui5-shellbar>
+    <ui5-dynamic-page>
+      <!-- Page content -->
+    </ui5-dynamic-page>
+  `
+})
+export class ExampleComponent {
+  handleProfile() {
+    console.log('Profile clicked!');
+  }
+}
+```
+
+### Using Angular Components Inside UI5 Components
+
+Angular components often use selectors with hyphens (e.g. `<app-item>`, `<app-value>`).
+UI5 interprets such tags as custom elements and may wait **up to 1 second** for their registration, causing delayed rendering inside components like `<ui5-table-cell>`.
+
+To avoid this, configure UI5 to ignore Angular component prefixes:
+
+```ts
+// ui5-init.ts
+import { ignoreCustomElements } from '@ui5/webcomponents-base/dist/IgnoreCustomElements.js';
+
+ignoreCustomElements('app-');
+```
+
+Import it before Angular bootstraps:
+```ts
+// main.ts
+import './ui5-init';
+```
+
+This prevents unnecessary waiting, ensures smooth rendering, and improves performance when mixing Angular components with UI5 Web Components.
+
+## Resources
+
+- [UI5 Web Components Documentation](https://ui5.github.io/webcomponents/)
+- [Fundamental NGX Documentation](https://sap.github.io/fundamental-ngx)
+- [GitHub Repository](https://github.com/SAP/fundamental-ngx)

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

@@ -66,6 +66,7 @@ import '@ui5/webcomponents-fiori/dist/UserMenu.js';
 import '@ui5/webcomponents-fiori/dist/UserMenuAccount.js';
 import '@ui5/webcomponents-fiori/dist/UserMenuItem.js';
 import '@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js';
+import '@ui5/webcomponents-fiori/dist/UserSettingsAccountView.js';
 import '@ui5/webcomponents-fiori/dist/UserSettingsDialog.js';
 import '@ui5/webcomponents-fiori/dist/UserSettingsItem.js';
 import '@ui5/webcomponents-fiori/dist/UserSettingsView.js';
@@ -2688,8 +2689,8 @@ class SearchItemShowMore {
     constructor() {
         /**
          * Specifies the number of additional items available to show.
-      This value replaces the placeholder (N) in the "Show more (N)" text.
-      If not set, the placeholder will remain as (N).
+      If no value is defined, the control shows "Show more" (without any counter).
+      If a number is provided, it displays "Show more (N)", where N is that number.
          */
         this.itemsToShowCount = input(...(ngDevMode ? [undefined, { debugName: "itemsToShowCount" }] : []));
         /**
@@ -5235,6 +5236,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 }]
         }] });
 
+class UserSettingsAccountView {
+    constructor() {
+        /**
+         * Defines if the User Menu shows the `Manage Account` option.
+         */
+        this.showManageAccount = input(false, ...(ngDevMode ? [{ debugName: "showManageAccount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Defines the title text of the user settings view.
+         */
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        /**
+         * Defines whether the view is selected. There can be just one selected view at a time.
+         */
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`
+      and controls the visibility of the back button.
+         */
+        this.secondary = input(false, ...(ngDevMode ? [{ debugName: "secondary", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // className is now passed
+        /**
+         * Fired when the `Edit Accounts` button is selected.
+         */
+        this.ui5EditAccountsClick = output();
+        /**
+         * Fired when the `Manage Account` button is selected.
+         */
+        this.ui5ManageAccountClick = 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.
+         *
+         * - **account**: Defines the user account.
+         * - **(default)**: Defines the content of the view.
+         *
+         * @example
+         * ```html
+         * <ui5-user-settings-account-view>
+         *   <div slot="header">Custom header content</div>
+         *   <p>Default slot content</p>
+         * </ui5-user-settings-account-view>
+         * ```
+         *
+         * @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": "account",
+                "description": "Defines the user account."
+            },
+            {
+                "name": "default",
+                "description": "Defines the content of the view."
+            }
+        ];
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'showManageAccount',
+            'text',
+            'selected',
+            'secondary',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5EditAccountsClick',
+            'ui5ManageAccountClick',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserSettingsAccountView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: UserSettingsAccountView, isStandalone: true, selector: "ui5-user-settings-account-view, [ui5-user-settings-account-view]", inputs: { showManageAccount: { classPropertyName: "showManageAccount", publicName: "showManageAccount", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5EditAccountsClick: "ui5EditAccountsClick", ui5ManageAccountClick: "ui5ManageAccountClick" }, exportAs: ["ui5UserSettingsAccountView"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UserSettingsAccountView, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-user-settings-account-view, [ui5-user-settings-account-view]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5UserSettingsAccountView',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
 class UserSettingsDialog {
     constructor() {
         /**
@@ -5971,5 +6092,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BarcodeScannerDialog, DynamicPage, DynamicPageHeader, DynamicPageTitle, DynamicSideContent, FilterItem, FilterItemOption, FlexibleColumnLayout, GenericControlValueAccessor, GroupItem, IllustratedMessage, MediaGallery, MediaGalleryItem, NavigationLayout, NotificationList, NotificationListGroupItem, NotificationListItem, Page, ProductSwitch, ProductSwitchItem, Search, SearchItem, SearchItemGroup, SearchItemShowMore, SearchMessageArea, SearchScope, ShellBar, ShellBarBranding, ShellBarItem, ShellBarSearch, ShellBarSpacer, SideNavigation, SideNavigationGroup, SideNavigationItem, SideNavigationSubItem, SortItem, Timeline, TimelineGroupItem, TimelineItem, Ui5WebcomponentsFioriThemingService, UploadCollection, UploadCollectionItem, UserMenu, UserMenuAccount, UserMenuItem, UserMenuItemGroup, UserSettingsDialog, UserSettingsItem, UserSettingsView, ViewSettingsDialog, Wizard, WizardStep };
+export { BarcodeScannerDialog, DynamicPage, DynamicPageHeader, DynamicPageTitle, DynamicSideContent, FilterItem, FilterItemOption, FlexibleColumnLayout, GenericControlValueAccessor, GroupItem, IllustratedMessage, MediaGallery, MediaGalleryItem, NavigationLayout, NotificationList, NotificationListGroupItem, NotificationListItem, Page, ProductSwitch, ProductSwitchItem, Search, SearchItem, SearchItemGroup, SearchItemShowMore, SearchMessageArea, SearchScope, ShellBar, ShellBarBranding, ShellBarItem, ShellBarSearch, ShellBarSpacer, SideNavigation, SideNavigationGroup, SideNavigationItem, SideNavigationSubItem, SortItem, Timeline, TimelineGroupItem, TimelineItem, Ui5WebcomponentsFioriThemingService, UploadCollection, UploadCollectionItem, UserMenu, UserMenuAccount, UserMenuItem, UserMenuItemGroup, UserSettingsAccountView, UserSettingsDialog, UserSettingsItem, UserSettingsView, ViewSettingsDialog, Wizard, WizardStep };
 //# sourceMappingURL=fundamental-ngx-ui5-webcomponents-fiori.mjs.map