@leanix/components 0.4.643 → 0.4.645

package/fesm2022/leanix-components-ui5.mjs

@@ -1,6 +1,8 @@
 import { provideAppInitializer } 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';
 
 /**

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 { IconComponent } from '@ui5/webcomponents-ngx/main/icon';\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/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;;;;"}

package/fesm2022/leanix-components.mjs

@@ -2818,9 +2818,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * Additionally, it can include a breadcrumb.
  *
  * ### 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.
  * - `header-title`: Defines the page title content
  * - `header-content`: Defines additional content below the page title
  * - `header-buttons`: Defines the header action buttons
+ *
+ * ### Using Breadcrumbs
+ * To use breadcrumbs, import the `BreadcrumbsComponent` and `BreadcrumbsItemComponent`:
+ *
+ * ```typescript
+ * import { BreadcrumbsComponent, BreadcrumbsItemComponent } from '@leanix/components/ui5';
+ * ```
+ *
+ * ### Example
+ * @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>Agile Tracking</ui5-breadcrumbs-item>
+ *   </ui5-breadcrumbs>
+ *   <ng-container header-buttons>
+ *      <button lx-button size="large" color="primary" icon="fa-plus">Add Entity</button>
+ *      <button lx-button size="large">Settings</button>
+ *   </ng-container>
+ * </lx-page-header>
+ * ```
  */
 class PageHeaderComponent {
     constructor() {
@@ -2832,18 +2857,26 @@ class PageHeaderComponent {
         this.pageTitle = input();
         /**
          * Relative URL to navigate back to
+         * @deprecated Project the `ui5-breadcrumbs` component for navigation purposes
+         * @internal
          */
         this.backUrl = input([]);
         /**
          * Query parameters to append to the `backUrl`
+         * @deprecated Project the `ui5-breadcrumbs` component for navigation purposes
+         * @internal
          */
         this.queryParams = input({});
         /**
          * Accessible name of the back link
+         * @deprecated Project the `ui5-breadcrumbs` component for navigation purposes
+         * @internal
          */
         this.backUrlLabel = input();
         /**
          * Additional navigation state for the back link
+         * @deprecated Project the `ui5-breadcrumbs` component for navigation purposes
+         * @internal
          */
         this.navigationStateOptions = input({});
         /**
@@ -2853,15 +2886,17 @@ class PageHeaderComponent {
         this.showDivider = input(true);
         /**
          * Event emitted when the back icon is clicked.
+         * @deprecated Project the `ui5-breadcrumbs` component for navigation purposes
+         * @internal
          */
         this.backIconClick = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PageHeaderComponent, isStandalone: true, selector: "lx-page-header", inputs: { pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, backUrl: { classPropertyName: "backUrl", publicName: "backUrl", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, backUrlLabel: { classPropertyName: "backUrlLabel", publicName: "backUrlLabel", isSignal: true, isRequired: false, transformFunction: null }, navigationStateOptions: { classPropertyName: "navigationStateOptions", publicName: "navigationStateOptions", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backIconClick: "backIconClick" }, ngImport: i0, template: "<div class=\"tw-mb-l tw-flex tw-min-h-xxl tw-items-start tw-justify-between tw-gap-xl\">\n  <div class=\"tw-flex tw-flex-col tw-items-start\">\n    <div class=\"tw-flex tw-items-center tw-justify-start\">\n      @if (backUrl().length > 0) {\n        <a\n          [routerLink]=\"backUrl()\"\n          [queryParams]=\"queryParams()\"\n          [state]=\"navigationStateOptions()\"\n          class=\"tw-mr-s\"\n          data-testid=\"header-back-btn\"\n          [attr.aria-label]=\"backUrlLabel()\"\n          (click)=\"backIconClick.emit()\"\n          (keyboard.enter)=\"backIconClick.emit()\"\n        >\n          <lx-icon name=\"arrow-left\" aria-hidden=\"true\" fontAwsomeStyle=\"solid\" />\n        </a>\n      }\n      @if (pageTitle()) {\n        <h1 class=\"tw-m-0 tw-text-size-h2 tw-font-bold\" data-testid=\"header-title\">{{ pageTitle() }}</h1>\n      } @else {\n        <div class=\"tw-m-0 tw-text-size-h2 tw-font-bold\" data-testid=\"header-title\">\n          <ng-content select=\"[header-title]\" />\n        </div>\n      }\n    </div>\n    <div class=\"-tw-mb-s tw-mt-xs tw-flex tw-self-start\">\n      <ng-content select=\"[header-content]\" />\n    </div>\n  </div>\n  <div class=\"tw-flex tw-items-start tw-justify-end tw-gap-xs tw-self-center tw-text-nowrap\">\n    <ng-content select=\"[header-buttons]\" />\n  </div>\n</div>\n\n@if (showDivider()) {\n  <div data-testid=\"header-divider\" class=\"tw-mb-l tw-h-[2px] tw-w-full tw-bg-gray-95\"></div>\n}\n", dependencies: [{ kind: "component", type: IconComponent, selector: "lx-icon", inputs: ["name", "color", "fontAwsomeStyle", "size", "title"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PageHeaderComponent, isStandalone: true, selector: "lx-page-header", inputs: { pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, backUrl: { classPropertyName: "backUrl", publicName: "backUrl", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, backUrlLabel: { classPropertyName: "backUrlLabel", publicName: "backUrlLabel", isSignal: true, isRequired: false, transformFunction: null }, navigationStateOptions: { classPropertyName: "navigationStateOptions", publicName: "navigationStateOptions", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backIconClick: "backIconClick" }, ngImport: i0, template: "<div class=\"tw-flex tw-flex-col\">\n  <ng-content select=\"ui5-breadcrumbs\" />\n  <div class=\"tw-flex tw-min-h-xxl tw-items-center tw-justify-between\">\n    <div class=\"tw-flex tw-items-center\">\n      @if (backUrl().length > 0) {\n        <a\n          [routerLink]=\"backUrl()\"\n          [queryParams]=\"queryParams()\"\n          [state]=\"navigationStateOptions()\"\n          class=\"tw-mr-s\"\n          data-testid=\"header-back-btn\"\n          [attr.aria-label]=\"backUrlLabel()\"\n          (click)=\"backIconClick.emit()\"\n          (keyboard.enter)=\"backIconClick.emit()\"\n        >\n          <lx-icon name=\"arrow-left\" aria-hidden=\"true\" fontAwsomeStyle=\"solid\" />\n        </a>\n      }\n      @if (pageTitle()) {\n        <h1 class=\"tw-m-0 tw-heading-2\" data-testid=\"header-title\">{{ pageTitle() }}</h1>\n      } @else {\n        <div data-testid=\"header-title\">\n          <ng-content select=\"[header-title]\" />\n        </div>\n      }\n    </div>\n    <div class=\"tw-flex tw-gap-xs tw-text-nowrap\">\n      <ng-content select=\"[header-buttons]\" />\n    </div>\n  </div>\n  <div class=\"header-content tw-mt-m tw-flex tw-self-start\">\n    <ng-content select=\"[header-content]\" />\n  </div>\n  @if (showDivider()) {\n    <div data-testid=\"header-divider\" class=\"tw-mt-[10px] tw-h-[2px] tw-w-full tw-bg-gray-95\"></div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1rem}.header-content:empty{display:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lx-icon", inputs: ["name", "color", "fontAwsomeStyle", "size", "title"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-page-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, RouterLink], template: "<div class=\"tw-mb-l tw-flex tw-min-h-xxl tw-items-start tw-justify-between tw-gap-xl\">\n  <div class=\"tw-flex tw-flex-col tw-items-start\">\n    <div class=\"tw-flex tw-items-center tw-justify-start\">\n      @if (backUrl().length > 0) {\n        <a\n          [routerLink]=\"backUrl()\"\n          [queryParams]=\"queryParams()\"\n          [state]=\"navigationStateOptions()\"\n          class=\"tw-mr-s\"\n          data-testid=\"header-back-btn\"\n          [attr.aria-label]=\"backUrlLabel()\"\n          (click)=\"backIconClick.emit()\"\n          (keyboard.enter)=\"backIconClick.emit()\"\n        >\n          <lx-icon name=\"arrow-left\" aria-hidden=\"true\" fontAwsomeStyle=\"solid\" />\n        </a>\n      }\n      @if (pageTitle()) {\n        <h1 class=\"tw-m-0 tw-text-size-h2 tw-font-bold\" data-testid=\"header-title\">{{ pageTitle() }}</h1>\n      } @else {\n        <div class=\"tw-m-0 tw-text-size-h2 tw-font-bold\" data-testid=\"header-title\">\n          <ng-content select=\"[header-title]\" />\n        </div>\n      }\n    </div>\n    <div class=\"-tw-mb-s tw-mt-xs tw-flex tw-self-start\">\n      <ng-content select=\"[header-content]\" />\n    </div>\n  </div>\n  <div class=\"tw-flex tw-items-start tw-justify-end tw-gap-xs tw-self-center tw-text-nowrap\">\n    <ng-content select=\"[header-buttons]\" />\n  </div>\n</div>\n\n@if (showDivider()) {\n  <div data-testid=\"header-divider\" class=\"tw-mb-l tw-h-[2px] tw-w-full tw-bg-gray-95\"></div>\n}\n" }]
+            args: [{ selector: 'lx-page-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, RouterLink], template: "<div class=\"tw-flex tw-flex-col\">\n  <ng-content select=\"ui5-breadcrumbs\" />\n  <div class=\"tw-flex tw-min-h-xxl tw-items-center tw-justify-between\">\n    <div class=\"tw-flex tw-items-center\">\n      @if (backUrl().length > 0) {\n        <a\n          [routerLink]=\"backUrl()\"\n          [queryParams]=\"queryParams()\"\n          [state]=\"navigationStateOptions()\"\n          class=\"tw-mr-s\"\n          data-testid=\"header-back-btn\"\n          [attr.aria-label]=\"backUrlLabel()\"\n          (click)=\"backIconClick.emit()\"\n          (keyboard.enter)=\"backIconClick.emit()\"\n        >\n          <lx-icon name=\"arrow-left\" aria-hidden=\"true\" fontAwsomeStyle=\"solid\" />\n        </a>\n      }\n      @if (pageTitle()) {\n        <h1 class=\"tw-m-0 tw-heading-2\" data-testid=\"header-title\">{{ pageTitle() }}</h1>\n      } @else {\n        <div data-testid=\"header-title\">\n          <ng-content select=\"[header-title]\" />\n        </div>\n      }\n    </div>\n    <div class=\"tw-flex tw-gap-xs tw-text-nowrap\">\n      <ng-content select=\"[header-buttons]\" />\n    </div>\n  </div>\n  <div class=\"header-content tw-mt-m tw-flex tw-self-start\">\n    <ng-content select=\"[header-content]\" />\n  </div>\n  @if (showDivider()) {\n    <div data-testid=\"header-divider\" class=\"tw-mt-[10px] tw-h-[2px] tw-w-full tw-bg-gray-95\"></div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1rem}.header-content:empty{display:none}\n"] }]
         }] });
 
 /**
@@ -3964,6 +3999,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 /**
+ * @deprecated Use the `ui5-breadcrumbs` instead.
+ *
  * Breadcrumb component is used to show a list of labels, usually to show the path of user's navigation.
  */
 class BreadcrumbComponent {