@leanix/components 0.4.659 → 0.4.661

package/fesm2022/leanix-components-ui5.mjs

@@ -1,9 +1,12 @@
-import { provideAppInitializer } from '@angular/core';
+import * as i0 from '@angular/core';
+import { provideAppInitializer, inject, input, effect, untracked, ChangeDetectionStrategy, Component, HostListener } from '@angular/core';
 import { setDefaultFontLoading } from '@ui5/webcomponents-base/dist/config/Fonts.js';
 import { registerIconLoader } from '@ui5/webcomponents-base/dist/asset-registries/Icons.js';
-export { BreadcrumbsComponent } from '@ui5/webcomponents-ngx/main/breadcrumbs';
-export { BreadcrumbsItemComponent } from '@ui5/webcomponents-ngx/main/breadcrumbs-item';
 export { IconComponent } from '@ui5/webcomponents-ngx/main/icon';
+import { LocationStrategy } from '@angular/common';
+import { Router, RouterLink } from '@angular/router';
+import { BreadcrumbsItemComponent as BreadcrumbsItemComponent$1 } from '@ui5/webcomponents-ngx/main/breadcrumbs-item';
+import { BreadcrumbsComponent as BreadcrumbsComponent$1 } from '@ui5/webcomponents-ngx/main/breadcrumbs';
 
 /**
  * Registers icon libraries with UI5.
@@ -36,6 +39,103 @@ const provideUi5 = () => provideAppInitializer(async () => {
     await registerIconsWithUi5();
 });
 
+/**
+ * This component extends the `ui5-breadcrumbs-item` component from `@ui5/webcomponents-ngx`.
+ * This extension is needed for Angular versions before 20 to sync Angular's `RouterLink` directive
+ * with the `href` attribute of the `ui5-breadcrumbs-item`.
+ *
+ * **Why?** Support for custom elements in the `RouterLink` directive was added in Angular 20.
+ * For older versions, this component allows using the `RouterLink` on a `ui5-breadcrumb-item`.
+ *
+ * @see https://github.com/angular/angular/commit/ff98ccb19391ed4e04528b82771c04ad67067d68
+ *
+ */
+class BreadcrumbsItemComponent extends BreadcrumbsItemComponent$1 {
+    constructor() {
+        super(...arguments);
+        this.router = inject(Router);
+        this.routerLinkInstance = inject(RouterLink, { optional: true });
+        this.locationStrategy = inject(LocationStrategy, { optional: true });
+        this.routerLink = input();
+        this.updateBreadcrumbHref = effect(() => {
+            const routerLink = this.routerLink();
+            untracked(() => {
+                if (!routerLink || !this.routerLinkInstance) {
+                    this.href = undefined;
+                    return;
+                }
+                const urlTree = this.routerLinkInstance.urlTree;
+                // See https://github.com/angular/angular/blob/main/packages/router/src/directives/router_link.ts#L430
+                if (urlTree !== null && this.locationStrategy) {
+                    this.href = this.locationStrategy?.prepareExternalUrl(this.router.serializeUrl(urlTree)) ?? '';
+                }
+                else {
+                    this.href = undefined;
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BreadcrumbsItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: BreadcrumbsItemComponent, isStandalone: true, selector: "ui5-breadcrumbs-item", inputs: { routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BreadcrumbsItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'ui5-breadcrumbs-item',
+                    template: '<ng-content />',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+/**
+ * Enables users to navigate between items by providing a list of links to previous steps in the user's navigation path.
+ *
+ * It helps the user to be aware of their location within the application and allows faster navigation.
+ *
+ * This component extends the `ui5-breadcrumbs` component from `@ui5/webcomponents-ngx`.
+ * See the [UI5 Breadcrumb documentation](https://ui5.github.io/webcomponents/components/Breadcrumbs) for more info.
+ *
+ * This extension allows using the `RouterLink` directive on `ui5-breadcrumbs-item` components.
+ *
+ * @example ```html
+ * <ui5-breadcrumbs>
+ *   <ui5-breadcrumbs-item routerLink="/inventory">Inventory</ui5-breadcrumbs-item>
+ *   <ui5-breadcrumbs-item routerLink="/inventory/agile-tracking">Agile Tracking</ui5-breadcrumbs-item>
+ *   <ui5-breadcrumbs-item routerLink="/inventory/agile-tracking/settings">Settings</ui5-breadcrumbs-item>
+ * </ui5-breadcrumbs>
+ * ```
+ */
+class BreadcrumbsComponent extends BreadcrumbsComponent$1 {
+    /**
+     * @internal
+     */
+    onClick(event) {
+        // When a breadcrumb receives a click event from the nested `ui5-link`, the parent `ui5-breadcrumbs` component
+        // emits the custom event `item-click`. However, since the `RouterLink` directive is applied on the individual breadcrumbs,
+        // and it only listens to `click` events, the directive would not act on this event.
+        // So we're triggering the `click` event on the selected breadcrumb item, to ensure `RouterLink#onClick` is called.
+        event.detail.item.click();
+        // Since the `ui5-breadcrumbs-item` already contains a nested `<a>` element, the `item-click`
+        // event needs to be cancelled to prevent a full page reload.
+        event.preventDefault();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BreadcrumbsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: BreadcrumbsComponent, isStandalone: true, selector: "ui5-breadcrumbs", host: { listeners: { "item-click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'ui5-breadcrumbs',
+                    template: '<ng-content />',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['item-click', ['$event']]
+            }] } });
+
 /**
  * All UI5-related components / directives supported by the SAP LeanIX Design System.
  */
@@ -44,5 +144,5 @@ const provideUi5 = () => provideAppInitializer(async () => {
  * Generated bundle index. Do not edit.
  */
 
-export { provideUi5 };
+export { BreadcrumbsComponent, BreadcrumbsItemComponent, provideUi5 };
 //# sourceMappingURL=leanix-components-ui5.mjs.map

package/fesm2022/leanix-components-ui5.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"leanix-components-ui5.mjs","sources":["../../../../libs/components/ui5/icons/register-icons.ts","../../../../libs/components/ui5/ui5.provider.ts","../../../../libs/components/ui5/index.ts","../../../../libs/components/ui5/leanix-components-ui5.ts"],"sourcesContent":["import { registerIconLoader } from '@ui5/webcomponents-base/dist/asset-registries/Icons.js';\n\n/**\n * Registers icon libraries with UI5.\n */\nexport async function registerIconsWithUi5() {\n  await Promise.all([\n    import('@ui5/webcomponents-icons-business-suite/dist/AllIcons.js'),\n    import('@ui5/webcomponents-icons-tnt/dist/AllIcons.js'),\n    import('@ui5/webcomponents-icons/dist/AllIcons.js')\n  ]);\n\n  registerIconLoader('lx-icons', () => import('./lx-icons.json'));\n}\n","import { provideAppInitializer } from '@angular/core';\nimport { setDefaultFontLoading } from '@ui5/webcomponents-base/dist/config/Fonts.js';\nimport { registerIconsWithUi5 } from './icons/register-icons';\n\n/**\n * Sets up providers necessary to use UI5 components in the application.\n *\n * @usageNotes\n *\n * Basic example of how you can add UI5 to your application:\n * ```ts\n * import { provideUi5 } from '@leanix/components/ui5';\n *\n * bootstrapApplication(AppComponent, {\n *   providers: [provideUi5()]\n * });\n * ```\n */\nexport const provideUi5 = () =>\n  provideAppInitializer(async () => {\n    setDefaultFontLoading(false);\n    await registerIconsWithUi5();\n  });\n","/**\n * All UI5-related components / directives supported by the SAP LeanIX Design System.\n */\nexport * from './ui5.provider';\n\n// UI5 Components\nexport { BreadcrumbsComponent } from '@ui5/webcomponents-ngx/main/breadcrumbs';\nexport { BreadcrumbsItemComponent } from '@ui5/webcomponents-ngx/main/breadcrumbs-item';\nexport { IconComponent } from '@ui5/webcomponents-ngx/main/icon';\nexport { BreadcrumbsItemClickEventDetail } from '@ui5/webcomponents/dist/Breadcrumbs';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAEA;;AAEG;AACI,eAAe,oBAAoB,GAAA;IACxC,MAAM,OAAO,CAAC,GAAG,CAAC;QAChB,OAAO,0DAA0D,CAAC;QAClE,OAAO,+CAA+C,CAAC;QACvD,OAAO,2CAA2C;AACnD,KAAA,CAAC;IAEF,kBAAkB,CAAC,UAAU,EAAE,MAAM,OAAO,+CAAiB,CAAC,CAAC;AACjE;;ACTA;;;;;;;;;;;;;AAaG;AACU,MAAA,UAAU,GAAG,MACxB,qBAAqB,CAAC,YAAW;IAC/B,qBAAqB,CAAC,KAAK,CAAC;IAC5B,MAAM,oBAAoB,EAAE;AAC9B,CAAC;;ACtBH;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"leanix-components-ui5.mjs","sources":["../../../../libs/components/ui5/icons/register-icons.ts","../../../../libs/components/ui5/ui5.provider.ts","../../../../libs/components/ui5/components/breadcrumbs-item.component.ts","../../../../libs/components/ui5/components/breadcrumbs.component.ts","../../../../libs/components/ui5/index.ts","../../../../libs/components/ui5/leanix-components-ui5.ts"],"sourcesContent":["import { registerIconLoader } from '@ui5/webcomponents-base/dist/asset-registries/Icons.js';\n\n/**\n * Registers icon libraries with UI5.\n */\nexport async function registerIconsWithUi5() {\n  await Promise.all([\n    import('@ui5/webcomponents-icons-business-suite/dist/AllIcons.js'),\n    import('@ui5/webcomponents-icons-tnt/dist/AllIcons.js'),\n    import('@ui5/webcomponents-icons/dist/AllIcons.js')\n  ]);\n\n  registerIconLoader('lx-icons', () => import('./lx-icons.json'));\n}\n","import { provideAppInitializer } from '@angular/core';\nimport { setDefaultFontLoading } from '@ui5/webcomponents-base/dist/config/Fonts.js';\nimport { registerIconsWithUi5 } from './icons/register-icons';\n\n/**\n * Sets up providers necessary to use UI5 components in the application.\n *\n * @usageNotes\n *\n * Basic example of how you can add UI5 to your application:\n * ```ts\n * import { provideUi5 } from '@leanix/components/ui5';\n *\n * bootstrapApplication(AppComponent, {\n *   providers: [provideUi5()]\n * });\n * ```\n */\nexport const provideUi5 = () =>\n  provideAppInitializer(async () => {\n    setDefaultFontLoading(false);\n    await registerIconsWithUi5();\n  });\n","import { LocationStrategy } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, effect, inject, input, untracked } from '@angular/core';\nimport { Router, RouterLink } from '@angular/router';\nimport { BreadcrumbsItemComponent as Ui5BreadcrumbsItemComponent } from '@ui5/webcomponents-ngx/main/breadcrumbs-item';\n\n/**\n * This component extends the `ui5-breadcrumbs-item` component from `@ui5/webcomponents-ngx`.\n * This extension is needed for Angular versions before 20 to sync Angular's `RouterLink` directive\n * with the `href` attribute of the `ui5-breadcrumbs-item`.\n *\n * **Why?** Support for custom elements in the `RouterLink` directive was added in Angular 20.\n * For older versions, this component allows using the `RouterLink` on a `ui5-breadcrumb-item`.\n *\n * @see https://github.com/angular/angular/commit/ff98ccb19391ed4e04528b82771c04ad67067d68\n *\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'ui5-breadcrumbs-item',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class BreadcrumbsItemComponent extends Ui5BreadcrumbsItemComponent {\n  private readonly router = inject(Router);\n  private readonly routerLinkInstance = inject(RouterLink, { optional: true });\n  private readonly locationStrategy = inject(LocationStrategy, { optional: true });\n\n  readonly routerLink = input<RouterLink['routerLink']>();\n\n  readonly updateBreadcrumbHref = effect(() => {\n    const routerLink = this.routerLink();\n\n    untracked(() => {\n      if (!routerLink || !this.routerLinkInstance) {\n        this.href = undefined;\n        return;\n      }\n      const urlTree = this.routerLinkInstance.urlTree;\n\n      // See https://github.com/angular/angular/blob/main/packages/router/src/directives/router_link.ts#L430\n      if (urlTree !== null && this.locationStrategy) {\n        this.href = this.locationStrategy?.prepareExternalUrl(this.router.serializeUrl(urlTree)) ?? '';\n      } else {\n        this.href = undefined;\n      }\n    });\n  });\n}\n","import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core';\nimport { BreadcrumbsComponent as Ui5BreadcrumbsComponent } from '@ui5/webcomponents-ngx/main/breadcrumbs';\nimport { BreadcrumbsItemClickEventDetail } from '@ui5/webcomponents/dist/Breadcrumbs';\n\n/**\n * Enables users to navigate between items by providing a list of links to previous steps in the user's navigation path.\n *\n * It helps the user to be aware of their location within the application and allows faster navigation.\n *\n * This component extends the `ui5-breadcrumbs` component from `@ui5/webcomponents-ngx`.\n * See the [UI5 Breadcrumb documentation](https://ui5.github.io/webcomponents/components/Breadcrumbs) for more info.\n *\n * This extension allows using the `RouterLink` directive on `ui5-breadcrumbs-item` components.\n *\n * @example ```html\n * <ui5-breadcrumbs>\n *   <ui5-breadcrumbs-item routerLink=\"/inventory\">Inventory</ui5-breadcrumbs-item>\n *   <ui5-breadcrumbs-item routerLink=\"/inventory/agile-tracking\">Agile Tracking</ui5-breadcrumbs-item>\n *   <ui5-breadcrumbs-item routerLink=\"/inventory/agile-tracking/settings\">Settings</ui5-breadcrumbs-item>\n * </ui5-breadcrumbs>\n * ```\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'ui5-breadcrumbs',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class BreadcrumbsComponent extends Ui5BreadcrumbsComponent {\n  /**\n   * @internal\n   */\n  @HostListener('item-click', ['$event']) onClick(event: CustomEvent<BreadcrumbsItemClickEventDetail>) {\n    // When a breadcrumb receives a click event from the nested `ui5-link`, the parent `ui5-breadcrumbs` component\n    // emits the custom event `item-click`. However, since the `RouterLink` directive is applied on the individual breadcrumbs,\n    // and it only listens to `click` events, the directive would not act on this event.\n    // So we're triggering the `click` event on the selected breadcrumb item, to ensure `RouterLink#onClick` is called.\n    event.detail.item.click();\n\n    // Since the `ui5-breadcrumbs-item` already contains a nested `<a>` element, the `item-click`\n    // event needs to be cancelled to prevent a full page reload.\n    event.preventDefault();\n  }\n}\n","/**\n * All UI5-related components / directives supported by the SAP LeanIX Design System.\n */\nexport * from './ui5.provider';\n\n// UI5 Components\nexport { IconComponent } from '@ui5/webcomponents-ngx/main/icon';\nexport { BreadcrumbsItemClickEventDetail } from '@ui5/webcomponents/dist/Breadcrumbs';\n\n// LX Extensions\nexport { BreadcrumbsItemComponent } from './components/breadcrumbs-item.component';\nexport { BreadcrumbsComponent } from './components/breadcrumbs.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["Ui5BreadcrumbsItemComponent","Ui5BreadcrumbsComponent"],"mappings":"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"}

package/fesm2022/leanix-components.mjs

@@ -2824,9 +2824,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  *
  * ### Projection slots
  * - `ui5-breadcrumbs`: Defines the breadcrumbs shown above the page title
- *   - **Important**: To set a URL for a breadcrumb item, you need to provide the `href`
- * attribute to the `ui5-breadcrumbs-item` component. `RouterLink` does not work before updating to Angular 20.
- *   - To use the `href` attribute for relative URLs, **the leading slash needs to be removed**.
  * - `header-title`: Defines the page title content
  * - `header-content`: Defines additional content below the page title
  * - `header-buttons`: Defines the header action buttons
@@ -2844,8 +2841,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * @example ```html
  * <lx-page-header [pageTitle]="'Agile Tracking'">
  *   <ui5-breadcrumbs>
- *     <ui5-breadcrumbs-item href="/">Root Page</ui5-breadcrumbs-item>
- *     <ui5-breadcrumbs-item href="/inventory">Inventory</ui5-breadcrumbs-item>
+ *     <ui5-breadcrumbs-item routerLink="/">Root Page</ui5-breadcrumbs-item>
+ *     <ui5-breadcrumbs-item routerLink="/inventory">Inventory</ui5-breadcrumbs-item>
  *     <ui5-breadcrumbs-item>Agile Tracking</ui5-breadcrumbs-item>
  *   </ui5-breadcrumbs>
  *   <ng-container header-buttons>