@leanix/components 0.4.730 → 0.4.732

package/fesm2022/leanix-components.mjs

@@ -200,6 +200,7 @@ const ICON_MAP = {
     'fa-file-video': ['attachment-video'],
     'fa-file-word': ['doc-attachment'],
     'fa-filter': ['filter'],
+    'fa-fire': ['business-suite/fire'],
     'fa-fire-alt': ['business-suite/fire'],
     'fa-folder': ['folder-blank'],
     'fa-folder-open': ['open-folder'],
@@ -223,6 +224,7 @@ const ICON_MAP = {
     'fa-info-circle': ['message-information', 'information'],
     'fa-info-square': ['message-information', 'information'],
     'fa-italic': ['italic-text'],
+    'fa-key': ['key'],
     'fa-keyboard': ['keyboard-and-mouse'],
     'fa-jira': ['rhombus-milestone'],
     'fa-lemon': ['lx-icons/lemon'],
@@ -293,6 +295,7 @@ const ICON_MAP = {
     'fa-spinner': ['pending'],
     'fa-square': ['border'],
     'fa-star': ['unfavorite', 'favorite'],
+    'fa-sticky-note': ['notes'],
     'fa-strikethrough': ['strikethrough'],
     'fa-sync': ['synchronize'],
     'fa-sync-alt': ['synchronize'],
@@ -542,7 +545,7 @@ class ButtonComponent {
         this.icon = input();
         this.iconName = computed(() => this.getIconName(this.icon()));
         this.iconVariant = computed(() => extractFontAwesomeVariant(this.icon()));
-        this.iconKind = computed(() => (isFontAwesomeIcon(this.iconName()) ? 'fa' : 'sap'));
+        this.iconKind = computed(() => (isFontAwesomeIcon$1(this.iconName()) ? 'fa' : 'sap'));
         /**
          * The icon name (font-awesome) to display inside the button.
          * It is displayed after any additional content.
@@ -556,7 +559,7 @@ class ButtonComponent {
         this.endIcon = input();
         this.endIconName = computed(() => this.getIconName(this.endIcon()));
         this.endIconVariant = computed(() => extractFontAwesomeVariant(this.endIcon()));
-        this.endIconKind = computed(() => (isFontAwesomeIcon(this.endIconName()) ? 'fa' : 'sap'));
+        this.endIconKind = computed(() => (isFontAwesomeIcon$1(this.endIconName()) ? 'fa' : 'sap'));
         /**
          * This shows a spinner inside the button.
          */
@@ -576,7 +579,7 @@ class ButtonComponent {
             // `fa-ellipsis-v` --> `overflow` is an intrusive change, therefore using the SAP icon alternative
             return 'overflow';
         }
-        if (!isFontAwesomeIcon(iconName)) {
+        if (!isFontAwesomeIcon$1(iconName)) {
             // Assuming SAP icon was provided
             return iconName;
         }
@@ -640,7 +643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 function isEllipsisVIcon(iconName) {
     return iconName?.includes('fa-ellipsis-v') ?? false;
 }
-function isFontAwesomeIcon(iconName) {
+function isFontAwesomeIcon$1(iconName) {
     return iconName ? /\bfa-\w*\b/.test(iconName) : false;
 }
 function extractFontAwesomeVariant(iconName) {
@@ -1031,29 +1034,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 
 class EmptyStateComponent {
     constructor() {
+        /**
+         * The title to be displayed
+         */
         this.title = input.required();
+        /**
+         * The SAP icon to show in the empty state.
+         *
+         * **Important:** Font Awesome icons are not supported anymore.
+         */
         this.icon = input();
+        /**
+         * The main call-to-action button label
+         */
         this.buttonLabel = input();
+        /**
+         * The secondary call-to-action button label
+         */
         this.secondaryButtonLabel = input();
+        /**
+         * Whether the empty state is in a loading state. If true, main call-to-action button will show a spinner
+         */
         this.loading = input(false);
+        /**
+         * The more link label
+         */
         this.moreLinkLabel = input();
+        /**
+         * The URL of the more link
+         */
         this.moreLink = input();
+        /**
+         * Whether the more link should be opened in a new tab
+         *
+         * @default true
+         */
         this.openMoreLinkInNewTab = input(true);
+        /**
+         * The size of the empty state
+         *
+         * @default medium
+         */
         this.size = input('medium');
         this.useRouterLink = computed(() => Array.isArray(this.moreLink()));
+        this.iconName = computed(() => {
+            const icon = this.icon();
+            if (!icon) {
+                return null;
+            }
+            // Temporarily map icons, as long as consumers need to be adjusted.
+            return isFontAwesomeIcon(icon) ? mapToSapIcon(icon) : icon;
+        });
+        /**
+         * Emitted when the main call-to-action button is clicked
+         */
         this.buttonClicked = new EventEmitter();
+        /**
+         * Emitted when the secondary call-to-action button is clicked
+         */
         this.secondaryButtonClicked = new EventEmitter();
+        /**
+         * Emitted when the more link is clicked
+         */
         this.moreLinkClicked = new EventEmitter();
     }
     get _size() {
         return this.size();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EmptyStateComponent, isStandalone: true, selector: "lx-empty-state", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, moreLinkLabel: { classPropertyName: "moreLinkLabel", publicName: "moreLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, moreLink: { classPropertyName: "moreLink", publicName: "moreLink", isSignal: true, isRequired: false, transformFunction: null }, openMoreLinkInNewTab: { classPropertyName: "openMoreLinkInNewTab", publicName: "openMoreLinkInNewTab", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked", secondaryButtonClicked: "secondaryButtonClicked", moreLinkClicked: "moreLinkClicked" }, host: { properties: { "attr.size": "this._size" } }, ngImport: i0, template: "<div class=\"tw-max-w-[434px] tw-text-center\">\n  @if (icon()) {\n    <i class=\"emptyStateIcon fas tw-text-primary\" [class]=\"'fa-' + icon()\" aria-hidden=\"true\"></i>\n  }\n\n  <h3 class=\"empty-state-title tw-mb-m tw-mt-xl tw-text-black\" [innerHTML]=\"title()\"></h3>\n\n  <div class=\"empty-state-content tw-leading-[16px] tw-text-gray-50\">\n    <ng-content />\n  </div>\n\n  <div class=\"tw-flex tw-justify-center tw-gap-m\">\n    @if (secondaryButtonLabel()) {\n      <div class=\"secondaryButton tw-my-xl\">\n        <button lx-button size=\"large\" [showSpinner]=\"loading()\" (click)=\"secondaryButtonClicked.emit($event)\">\n          {{ secondaryButtonLabel() }}\n        </button>\n      </div>\n    }\n\n    @if (buttonLabel()) {\n      <div class=\"actionButton tw-my-xl\">\n        <button lx-button size=\"large\" color=\"primary\" [showSpinner]=\"loading()\" (click)=\"buttonClicked.emit($event)\">\n          {{ buttonLabel() }}\n        </button>\n      </div>\n    }\n  </div>\n\n  @if (moreLinkLabel() && moreLink()) {\n    <div>\n      @if (useRouterLink()) {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [routerLink]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      } @else {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [href]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;justify-content:center}:host .emptyStateIcon{font-size:var(--lxFontHeader1Size, 32px)}:host[size=small] .empty-state-title{font-size:var(--lxFontSize, 14px)}:host[size=small] .empty-state-content{font-size:var(--lxFontSmallSize, 12px)}:host[size=medium] .empty-state-title{font-size:var(--lxFontHeader2Size, 24px)}:host[size=medium] .empty-state-content{font-size:var(--lxFontSize, 14px)}i{position:relative}i:after{content:\"\";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);height:6px;width:44px;background-color:#f0f2f5;border-radius:100%}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EmptyStateComponent, isStandalone: true, selector: "lx-empty-state", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, moreLinkLabel: { classPropertyName: "moreLinkLabel", publicName: "moreLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, moreLink: { classPropertyName: "moreLink", publicName: "moreLink", isSignal: true, isRequired: false, transformFunction: null }, openMoreLinkInNewTab: { classPropertyName: "openMoreLinkInNewTab", publicName: "openMoreLinkInNewTab", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked", secondaryButtonClicked: "secondaryButtonClicked", moreLinkClicked: "moreLinkClicked" }, host: { properties: { "attr.size": "this._size" } }, ngImport: i0, template: "<div class=\"tw-max-w-[434px] tw-text-center\">\n  @if (iconName(); as iconName) {\n    <ui5-icon [name]=\"iconName\" design=\"Information\" />\n  }\n\n  <h3 class=\"empty-state-title tw-mb-m tw-mt-xl tw-text-black\" [innerHTML]=\"title()\"></h3>\n\n  <div class=\"empty-state-content tw-leading-[16px] tw-text-gray-50\">\n    <ng-content />\n  </div>\n\n  <div class=\"tw-flex tw-justify-center tw-gap-m\">\n    @if (secondaryButtonLabel()) {\n      <div class=\"secondaryButton tw-my-xl\">\n        <button lx-button size=\"large\" [showSpinner]=\"loading()\" (click)=\"secondaryButtonClicked.emit($event)\">\n          {{ secondaryButtonLabel() }}\n        </button>\n      </div>\n    }\n\n    @if (buttonLabel()) {\n      <div class=\"actionButton tw-my-xl\">\n        <button lx-button size=\"large\" color=\"primary\" [showSpinner]=\"loading()\" (click)=\"buttonClicked.emit($event)\">\n          {{ buttonLabel() }}\n        </button>\n      </div>\n    }\n  </div>\n\n  @if (moreLinkLabel() && moreLink()) {\n    <div>\n      @if (useRouterLink()) {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [routerLink]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      } @else {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [href]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;justify-content:center}:host[size=small] .empty-state-title{font-size:var(--lxFontSize, 14px)}:host[size=small] .empty-state-content{font-size:var(--lxFontSmallSize, 12px)}:host[size=medium] .empty-state-title{font-size:var(--lxFontHeader2Size, 24px)}:host[size=medium] .empty-state-content{font-size:var(--lxFontSize, 14px)}ui5-icon{position:relative;width:2rem;height:2rem}ui5-icon:after{content:\"\";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);height:6px;width:44px;background-color:#f0f2f5;border-radius:100%}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-empty-state', imports: [ButtonComponent, RouterLink], template: "<div class=\"tw-max-w-[434px] tw-text-center\">\n  @if (icon()) {\n    <i class=\"emptyStateIcon fas tw-text-primary\" [class]=\"'fa-' + icon()\" aria-hidden=\"true\"></i>\n  }\n\n  <h3 class=\"empty-state-title tw-mb-m tw-mt-xl tw-text-black\" [innerHTML]=\"title()\"></h3>\n\n  <div class=\"empty-state-content tw-leading-[16px] tw-text-gray-50\">\n    <ng-content />\n  </div>\n\n  <div class=\"tw-flex tw-justify-center tw-gap-m\">\n    @if (secondaryButtonLabel()) {\n      <div class=\"secondaryButton tw-my-xl\">\n        <button lx-button size=\"large\" [showSpinner]=\"loading()\" (click)=\"secondaryButtonClicked.emit($event)\">\n          {{ secondaryButtonLabel() }}\n        </button>\n      </div>\n    }\n\n    @if (buttonLabel()) {\n      <div class=\"actionButton tw-my-xl\">\n        <button lx-button size=\"large\" color=\"primary\" [showSpinner]=\"loading()\" (click)=\"buttonClicked.emit($event)\">\n          {{ buttonLabel() }}\n        </button>\n      </div>\n    }\n  </div>\n\n  @if (moreLinkLabel() && moreLink()) {\n    <div>\n      @if (useRouterLink()) {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [routerLink]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      } @else {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [href]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;justify-content:center}:host .emptyStateIcon{font-size:var(--lxFontHeader1Size, 32px)}:host[size=small] .empty-state-title{font-size:var(--lxFontSize, 14px)}:host[size=small] .empty-state-content{font-size:var(--lxFontSmallSize, 12px)}:host[size=medium] .empty-state-title{font-size:var(--lxFontHeader2Size, 24px)}:host[size=medium] .empty-state-content{font-size:var(--lxFontSize, 14px)}i{position:relative}i:after{content:\"\";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);height:6px;width:44px;background-color:#f0f2f5;border-radius:100%}\n"] }]
+            args: [{ selector: 'lx-empty-state', imports: [ButtonComponent, RouterLink, IconComponent$1], template: "<div class=\"tw-max-w-[434px] tw-text-center\">\n  @if (iconName(); as iconName) {\n    <ui5-icon [name]=\"iconName\" design=\"Information\" />\n  }\n\n  <h3 class=\"empty-state-title tw-mb-m tw-mt-xl tw-text-black\" [innerHTML]=\"title()\"></h3>\n\n  <div class=\"empty-state-content tw-leading-[16px] tw-text-gray-50\">\n    <ng-content />\n  </div>\n\n  <div class=\"tw-flex tw-justify-center tw-gap-m\">\n    @if (secondaryButtonLabel()) {\n      <div class=\"secondaryButton tw-my-xl\">\n        <button lx-button size=\"large\" [showSpinner]=\"loading()\" (click)=\"secondaryButtonClicked.emit($event)\">\n          {{ secondaryButtonLabel() }}\n        </button>\n      </div>\n    }\n\n    @if (buttonLabel()) {\n      <div class=\"actionButton tw-my-xl\">\n        <button lx-button size=\"large\" color=\"primary\" [showSpinner]=\"loading()\" (click)=\"buttonClicked.emit($event)\">\n          {{ buttonLabel() }}\n        </button>\n      </div>\n    }\n  </div>\n\n  @if (moreLinkLabel() && moreLink()) {\n    <div>\n      @if (useRouterLink()) {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [routerLink]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      } @else {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [href]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;justify-content:center}:host[size=small] .empty-state-title{font-size:var(--lxFontSize, 14px)}:host[size=small] .empty-state-content{font-size:var(--lxFontSmallSize, 12px)}:host[size=medium] .empty-state-title{font-size:var(--lxFontHeader2Size, 24px)}:host[size=medium] .empty-state-content{font-size:var(--lxFontSize, 14px)}ui5-icon{position:relative;width:2rem;height:2rem}ui5-icon:after{content:\"\";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);height:6px;width:44px;background-color:#f0f2f5;border-radius:100%}\n"] }]
         }], propDecorators: { _size: [{
                 type: HostBinding,
                 args: ['attr.size']
@@ -1064,6 +1117,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             }], moreLinkClicked: [{
                 type: Output
             }] } });
+function mapToSapIcon(fontAwesomeIcon) {
+    const sapIcons = ICON_MAP[`fa-${fontAwesomeIcon}`];
+    if (!sapIcons || sapIcons.length === 0) {
+        console.warn(`No SAP icon found for Font Awesome icon fa-${fontAwesomeIcon}`);
+        return null;
+    }
+    const isSolid = true; // Empty state icons were always solid
+    const sapIcon = isSolid && sapIcons[1] ? sapIcons[1] : sapIcons[0];
+    return sapIcon ?? null;
+}
+function isFontAwesomeIcon(iconName) {
+    return !!ICON_MAP[`fa-${iconName}`];
+}
 
 class IconScaleComponent {
     constructor() {