@leanix/components 0.4.746 → 0.4.747

package/fesm2022/leanix-components-ui5.mjs

@@ -137,6 +137,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 args: ['item-click', ['$event']]
             }] } });
 
+const TRAVERSED_ELEMENTS_SELECTOR = 'ui5-icon';
+const WEB_COMPONENT_STYLE_PROPERTIES_WHITELIST = new Set([
+    // positioning
+    'width',
+    'height',
+    'display',
+    'margin',
+    'margin-left',
+    'margin-right',
+    'margin-top',
+    'margin-bottom',
+    'padding',
+    'padding-left',
+    'padding-right',
+    'padding-top',
+    'padding-bottom',
+    // coloring
+    'color',
+    'fill',
+    'outline-color',
+    'background-color'
+]);
+/**
+ *
+ * A replacement for `HTMLElement.outerHTML`, but works with web components shadow DOM.
+ * Returns a string of outer HTML of a DOM node, inlining shadow DOM for web components.
+ * (@see TRAVERSED_ELEMENTS_SELECTOR for the list of supported web components.)
+ *
+ *
+ * @description
+ * Solves the problem of getting the full HTML structure of web components,
+ * as `element.outerHTML` does not include shadow DOM.
+ * This function inlines shadow DOM into a <template> tag inside the component root.
+ * It helps to keep the shadow DOM structure and preserve style encapsulation.
+ * Also includes whitelisted styles from computed styles into the component root as inline styles (@see WEB_COMPONENT_STYLE_PROPERTIES_WHITELIST).
+ */
+function getOuterHtmlWithShadowDom(rootNode) {
+    const lastId = addIdsToWebComponents(rootNode);
+    return getHTMLWithWebComponents(rootNode, lastId);
+}
+function addIdsToWebComponents(rootNode) {
+    const components = Array.from(rootNode.querySelectorAll(TRAVERSED_ELEMENTS_SELECTOR));
+    let lastId = 0;
+    for (const component of components) {
+        component.dataset['componentForExportId'] = lastId.toString();
+        lastId++;
+    }
+    return lastId;
+}
+function getNonDefaultStyles(cssStyleDeclaration) {
+    const cssText = Array.from(cssStyleDeclaration)
+        .filter((property) => {
+        const value = cssStyleDeclaration.getPropertyValue(property);
+        return value && WEB_COMPONENT_STYLE_PROPERTIES_WHITELIST.has(property);
+    })
+        .map((property) => `${property}: ${cssStyleDeclaration.getPropertyValue(property)}`)
+        .join('; ');
+    return cssText;
+}
+function getHTMLWithWebComponents(rootNode, lastId) {
+    let htmlString = rootNode.outerHTML.replace(/<!--[\S\s]*?-->/g, ''); // clear comments
+    if (!lastId) {
+        return htmlString;
+    }
+    for (let id = 0; id < lastId; id++) {
+        const component = rootNode.querySelector(`[data-component-for-export-id="${id}"]`);
+        const componentClone = component.cloneNode(false);
+        // Preferring defaultView to make getComputedStyle testable in custom jsdom environment
+        componentClone.style.cssText = getNonDefaultStyles(component.ownerDocument.defaultView.getComputedStyle(component));
+        // Adding shadow root to preserve style encapsulation
+        componentClone.innerHTML = `<template shadowrootmode="open">${component.shadowRoot?.innerHTML}</template>`;
+        // Regex to find the component by its data attribute
+        const componentRegex = new RegExp(`<[^>]+? data-component-for-export-id="${id}"[^>]*?>\\s*<\/[^>]+?>`, 'm');
+        htmlString = htmlString.replace(componentRegex, componentClone.outerHTML);
+    }
+    return htmlString;
+}
+
 /**
  * All UI5-related components / directives supported by the SAP LeanIX Design System.
  */
@@ -145,5 +223,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BreadcrumbsComponent, BreadcrumbsItemComponent, provideUi5 };
+export { BreadcrumbsComponent, BreadcrumbsItemComponent, getOuterHtmlWithShadowDom, 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/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 { BusyIndicatorComponent } from '@ui5/webcomponents-ngx/main/busy-indicator';\nexport { IconComponent } from '@ui5/webcomponents-ngx/main/icon';\nexport type { 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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"}
+{"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/utils/get-outer-html-with-shadow-dom.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","const TRAVERSED_ELEMENTS_SELECTOR = 'ui5-icon';\nconst WEB_COMPONENT_STYLE_PROPERTIES_WHITELIST = new Set([\n  // positioning\n  'width',\n  'height',\n  'display',\n  'margin',\n  'margin-left',\n  'margin-right',\n  'margin-top',\n  'margin-bottom',\n  'padding',\n  'padding-left',\n  'padding-right',\n  'padding-top',\n  'padding-bottom',\n\n  // coloring\n  'color',\n  'fill',\n  'outline-color',\n  'background-color'\n]);\n\n/**\n *\n * A replacement for `HTMLElement.outerHTML`, but works with web components shadow DOM.\n * Returns a string of outer HTML of a DOM node, inlining shadow DOM for web components.\n * (@see TRAVERSED_ELEMENTS_SELECTOR for the list of supported web components.)\n *\n *\n * @description\n * Solves the problem of getting the full HTML structure of web components,\n * as `element.outerHTML` does not include shadow DOM.\n * This function inlines shadow DOM into a <template> tag inside the component root.\n * It helps to keep the shadow DOM structure and preserve style encapsulation.\n * Also includes whitelisted styles from computed styles into the component root as inline styles (@see WEB_COMPONENT_STYLE_PROPERTIES_WHITELIST).\n */\nexport function getOuterHtmlWithShadowDom(rootNode: HTMLElement) {\n  const lastId = addIdsToWebComponents(rootNode);\n\n  return getHTMLWithWebComponents(rootNode, lastId);\n}\n\nfunction addIdsToWebComponents(rootNode: HTMLElement) {\n  const components = Array.from(rootNode.querySelectorAll<HTMLElement>(TRAVERSED_ELEMENTS_SELECTOR));\n\n  let lastId = 0;\n\n  for (const component of components) {\n    component.dataset['componentForExportId'] = lastId.toString();\n    lastId++;\n  }\n\n  return lastId;\n}\n\nfunction getNonDefaultStyles(cssStyleDeclaration: CSSStyleDeclaration) {\n  const cssText = Array.from(cssStyleDeclaration)\n    .filter((property) => {\n      const value = cssStyleDeclaration.getPropertyValue(property);\n      return value && WEB_COMPONENT_STYLE_PROPERTIES_WHITELIST.has(property);\n    })\n    .map((property) => `${property}: ${cssStyleDeclaration.getPropertyValue(property)}`)\n    .join('; ');\n\n  return cssText;\n}\n\nfunction getHTMLWithWebComponents(rootNode: HTMLElement, lastId: number) {\n  let htmlString = rootNode.outerHTML.replace(/<!--[\\S\\s]*?-->/g, ''); // clear comments\n\n  if (!lastId) {\n    return htmlString;\n  }\n\n  for (let id = 0; id < lastId; id++) {\n    const component = rootNode.querySelector(`[data-component-for-export-id=\"${id}\"]`)!;\n    const componentClone = component.cloneNode(false) as HTMLElement;\n\n    // Preferring defaultView to make getComputedStyle testable in custom jsdom environment\n    componentClone.style.cssText = getNonDefaultStyles(component.ownerDocument.defaultView!.getComputedStyle(component));\n\n    // Adding shadow root to preserve style encapsulation\n    componentClone.innerHTML = `<template shadowrootmode=\"open\">${component.shadowRoot?.innerHTML}</template>`;\n\n    // Regex to find the component by its data attribute\n    const componentRegex = new RegExp(`<[^>]+? data-component-for-export-id=\"${id}\"[^>]*?>\\\\s*<\\/[^>]+?>`, 'm');\n    htmlString = htmlString.replace(componentRegex, componentClone.outerHTML);\n  }\n\n  return htmlString;\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 { BusyIndicatorComponent } from '@ui5/webcomponents-ngx/main/busy-indicator';\nexport { IconComponent } from '@ui5/webcomponents-ngx/main/icon';\nexport type { 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// Utils\nexport { getOuterHtmlWithShadowDom } from './utils/get-outer-html-with-shadow-dom';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["Ui5BreadcrumbsItemComponent","Ui5BreadcrumbsComponent"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leanix/components",
-  "version": "0.4.746",
+  "version": "0.4.747",
   "license": "Apache-2.0",
   "author": "LeanIX GmbH",
   "repository": {

package/ui5/index.d.ts

@@ -7,3 +7,4 @@ export { IconComponent } from '@ui5/webcomponents-ngx/main/icon';
 export type { BreadcrumbsItemClickEventDetail } from '@ui5/webcomponents/dist/Breadcrumbs';
 export { BreadcrumbsItemComponent } from './components/breadcrumbs-item.component';
 export { BreadcrumbsComponent } from './components/breadcrumbs.component';
+export { getOuterHtmlWithShadowDom } from './utils/get-outer-html-with-shadow-dom';

package/ui5/utils/get-outer-html-with-shadow-dom.d.ts

@@ -0,0 +1,15 @@
+/**
+ *
+ * A replacement for `HTMLElement.outerHTML`, but works with web components shadow DOM.
+ * Returns a string of outer HTML of a DOM node, inlining shadow DOM for web components.
+ * (@see TRAVERSED_ELEMENTS_SELECTOR for the list of supported web components.)
+ *
+ *
+ * @description
+ * Solves the problem of getting the full HTML structure of web components,
+ * as `element.outerHTML` does not include shadow DOM.
+ * This function inlines shadow DOM into a <template> tag inside the component root.
+ * It helps to keep the shadow DOM structure and preserve style encapsulation.
+ * Also includes whitelisted styles from computed styles into the component root as inline styles (@see WEB_COMPONENT_STYLE_PROPERTIES_WHITELIST).
+ */
+export declare function getOuterHtmlWithShadowDom(rootNode: HTMLElement): string;