@leanix/components 0.4.759 → 0.4.760

package/fesm2022/leanix-components.mjs

@@ -81,272 +81,6 @@ const DATE_FORMATS = new InjectionToken('DATE_FORMATS', {
 const DATE_FN_LOCALE = new InjectionToken('DATE_FN_LOCALE');
 const LOCALE_FN = new InjectionToken('LOCALE_FN');
 const GLOBAL_TRANSLATION_OPTIONS = new InjectionToken('GLOBAL_TRANSLATION_OPTIONS');
-/**
- * map Font Awesome -> SAP icons
- * [0]: regular icon
- * [1]: solid icon alternative (if available)
- */
-const ICON_MAP = {
-    'fa-3x3-grid': ['lx-icons/3x3-grid'],
-    'fa-align-center': ['text-align-center'],
-    'fa-align-justify': ['text-align-justified'],
-    'fa-align-left': ['text-align-left'],
-    'fa-align-right': ['text-align-right'],
-    'fa-align-slash': ['tnt/clear-all-mapping'],
-    'fa-angle-double-down': ['expand-group'],
-    'fa-angle-double-left': ['close-command-field'],
-    'fa-angle-double-right': ['open-command-field'],
-    'fa-angle-double-up': ['collapse-group'],
-    'fa-angle-down': ['slim-arrow-down'],
-    'fa-angle-left': ['slim-arrow-left'],
-    'fa-angle-right': ['slim-arrow-right'],
-    'fa-angle-up': ['slim-arrow-up'],
-    'fa-archive': ['sap-box'],
-    'fa-arrow-circle-right': ['initiative'],
-    'fa-arrow-circle-up': ['arrow-top'],
-    'fa-arrow-down': ['arrow-bottom'],
-    'fa-arrow-from-bottom': ['upload'],
-    'fa-arrow-left': ['arrow-left'],
-    'fa-arrow-right': ['arrow-right'],
-    'fa-arrow-to-bottom': ['download'],
-    'fa-arrow-to-top': ['back-to-top'],
-    'fa-arrow-up': ['arrow-top'],
-    'fa-arrows-h': ['resize-horizontal'],
-    'fa-at': ['arobase'],
-    'fa-atom': ['lx-icons/atom'],
-    'fa-badge-check': ['lx-icons/badge-sign'],
-    'fa-balance-scale-right': ['compare-2'],
-    'fa-ballot-check': ['activities'],
-    'fa-ban': ['cancel'],
-    'fa-bars': ['menu2'],
-    'fa-bell': ['bell'],
-    'fa-binoculars': ['sys-find'],
-    'fa-bold': ['bold-text'],
-    'fa-bolt': ['tnt/raise-fault'],
-    'fa-book': ['course-book'],
-    'fa-book-open': ['education'],
-    'fa-books': ['course-book'],
-    'fa-bug': ['lx-icons/bug'],
-    'fa-bullhorn': ['marketing-campaign'],
-    'fa-bullseye-arrow': ['lx-icons/bullseye-arrow'],
-    'fa-calendar': ['calendar'],
-    'fa-caret-down': ['megamenu'],
-    'fa-caret-left': ['navigation-left-arrow'],
-    'fa-caret-up': ['sorting-ranking'],
-    'fa-chart-bar': ['vertical-bar-chart'],
-    'fa-chart-pie-alt': ['pie-chart'],
-    'fa-check': ['accept'],
-    'fa-check-circle': ['status-completed'],
-    'fa-check-square': ['complete'],
-    'fa-chess-queen-alt': ['lx-icons/chess-queen'],
-    'fa-chevron-down': ['navigation-down-arrow'],
-    'fa-chevron-left': ['navigation-left-arrow'],
-    'fa-chevron-right': ['navigation-right-arrow'],
-    'fa-chevron-square-down': ['navigation-down-arrow'],
-    'fa-chevron-square-right': ['navigation-right-arrow'],
-    'fa-chevron-up': ['navigation-up-arrow'],
-    'fa-child': ['tnt/actor'],
-    'fa-circle': ['circle-task', 'circle-task-2'],
-    'fa-clipboard-list-check': ['order-status'],
-    'fa-clock': ['in-progress'],
-    'fa-clone': ['duplicate'],
-    'fa-cloud': ['cloud'],
-    'fa-code': ['source-code'],
-    'fa-code-branch': ['business-suite/empty-sequence'],
-    'fa-cog': ['action-settings'],
-    'fa-comment': ['comment'],
-    'fa-comment-alt': ['comment'],
-    'fa-comment-alt-check': ['lx-icons/comment-alt-check'],
-    'fa-comment-lines': ['comment'],
-    'fa-comments': ['discussion'],
-    'fa-comments-alt': ['discussion'],
-    'fa-compass': ['business-objects-explorer'],
-    'fa-compress': ['exit-full-screen'],
-    'fa-confluence': ['lx-icons/confluence'],
-    'fa-copy': ['copy'],
-    'fa-database': ['database'],
-    'fa-diamond': ['rhombus-milestone', 'rhombus-milestone-2'],
-    'fa-do-not-enter': ['sys-minus'],
-    'fa-dollar-sign': ['lx-icons/dollar-sign'],
-    'fa-download': ['download'],
-    'fa-edit': ['edit'],
-    'fa-ellipsis-h': ['overflow'],
-    'fa-ellipsis-v': ['overflow'],
-    'fa-envelope': ['email'],
-    'fa-euro-sign': ['lx-icons/euro-sign'],
-    'fa-exchange': ['lx-icons/exchange'],
-    'fa-exclamation': ['business-suite/priority-1'],
-    'fa-exclamation-circle': ['lx-icons/exclamation-circle'],
-    'fa-exclamation-square': ['high-priority'],
-    'fa-exclamation-triangle': ['warning'],
-    'fa-expand': ['full-screen'],
-    'fa-expand-alt': ['full-screen'],
-    'fa-expand-wide': ['full-screen'],
-    'fa-external-link': ['action'],
-    'fa-external-link-alt': ['action'],
-    'fa-eye': ['show'],
-    'fa-eye-dropper': ['business-suite/pipette'],
-    'fa-eye-slash': ['hide'],
-    'fa-feather': ['lx-icons/feather'],
-    'fa-file': ['document'],
-    'fa-file-alt': ['document'],
-    'fa-file-audio': ['attachment-audio'],
-    'fa-file-certificate': ['verified'],
-    'fa-file-download': ['download'],
-    'fa-file-excel': ['excel-attachment'],
-    'fa-file-image': ['attachment-photo'],
-    'fa-file-pdf': ['pdf-attachment'],
-    'fa-file-plus': ['add-document'],
-    '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'],
-    'fa-folder-tree': ['lx-icons/folder-tree'],
-    'fa-gavel': ['lx-icons/gavel'],
-    'fa-globe': ['world'],
-    'fa-graduation-cap': ['study-leave'],
-    'fa-grip-lines': ['media-pause'],
-    'fa-hammer': ['lx-icons/hammer'],
-    'fa-handshake': ['decision'],
-    'fa-hat-wizard': ['lx-icons/hat-wizard'],
-    'fa-heading': ['heading1'],
-    'fa-headset': ['headset'],
-    'fa-history': ['history'],
-    'fa-home': ['home'],
-    'fa-hourglass-end': ['lx-icons/hourglass-end'],
-    'fa-hourglass-half': ['lateness'],
-    'fa-house': ['home'],
-    'fa-image': ['picture'],
-    'fa-info': ['message-information'],
-    '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'],
-    'fa-lightbulb': ['lightbulb'],
-    'fa-lightbulb-on': ['lx-icons/lightbulb-check'],
-    'fa-link': ['chain-link'],
-    'fa-list': ['list'],
-    'fa-list-ol': ['business-suite/icon-bulleting-with-numbers'],
-    'fa-list-ul': ['list'],
-    'fa-lock': ['locked'],
-    'fa-lock-alt': ['locked'],
-    'fa-lock-open': ['unlocked'],
-    'fa-long-arrow-left': ['arrow-left'],
-    'fa-long-arrow-right': ['arrow-right'],
-    'fa-map': ['map-3'],
-    'fa-map-pin': ['lx-icons/map-pin'],
-    'fa-map-signs': ['lx-icons/map-signs'],
-    'fa-minus': ['less'],
-    'fa-minus-circle': ['sys-minus'],
-    'fa-minus-square': ['negative'],
-    'fa-paragraph': ['text'],
-    'fa-pause': ['media-pause'],
-    'fa-pen': ['edit'],
-    'fa-pencil': ['edit'],
-    'fa-people-arrows': ['citizen-connect'],
-    'fa-phone-alt': ['call'],
-    'fa-play': ['media-play'],
-    'fa-play-circle': ['play'],
-    'fa-plug': ['disconnected'],
-    'fa-plus': ['add'],
-    'fa-plus-circle': ['sys-add'],
-    'fa-pound-sign': ['lx-icons/pound-sign'],
-    'fa-power-off': ['log'],
-    'fa-presentation': ['projector'],
-    'fa-print': ['print'],
-    'fa-project-diagram': ['lx-icons/project-diagram'],
-    'fa-question': ['incident'],
-    'fa-question-circle': ['question-mark'],
-    'fa-question-square': ['question-mark'],
-    'fa-quote-right': ['lx-icons/quote-right'],
-    'fa-radar': ['business-suite/radius'],
-    'fa-random': ['tnt/flow'],
-    'fa-rectangle-landscape': ['iphone-2'],
-    'fa-rectangle-portrait': ['iphone'],
-    'fa-rectangle-wide': ['legend'],
-    'fa-redo': ['refresh'],
-    'fa-repeat': ['synchronize'],
-    'fa-road': ['lx-icons/road'],
-    'fa-robot': ['lx-icons/robot'],
-    'fa-rocket': ['lx-icons/rocket'],
-    'fa-save': ['save'],
-    'fa-search': ['search'],
-    'fa-seedling': ['e-care'],
-    'fa-shapes': ['program-triangles'],
-    'fa-share-alt': ['share-2'],
-    'fa-share-square': ['action'],
-    'fa-shield': ['lx-icons/shield'],
-    'fa-shield-alt': ['lx-icons/shield'],
-    'fa-shield-check': ['checklist-item'],
-    'fa-shopping-cart': ['cart'],
-    'fa-signal': ['lx-icons/signal'],
-    'fa-sitemap': ['tree'],
-    'fa-sort': ['sorting-ranking'],
-    'fa-sort-alt': ['sort'],
-    'fa-sort-down': ['megamenu'],
-    'fa-sort-up': ['sorting-ranking'],
-    'fa-sparkles': ['ai'],
-    'fa-spinner': ['pending'],
-    'fa-square': ['border'],
-    'fa-star': ['unfavorite', 'favorite'],
-    'fa-sticky-note': ['notes'],
-    'fa-strikethrough': ['strikethrough'],
-    'fa-sync': ['synchronize'],
-    'fa-sync-alt': ['synchronize'],
-    'fa-table': ['business-suite/2x2-grid-layout'],
-    'fa-tachometer': ['performance'],
-    'fa-tachometer-alt-average': ['performance'],
-    'fa-tags': ['blank-tag-2'],
-    'fa-tasks': ['activities'],
-    'fa-tasks-alt': ['lx-icons/tasks'],
-    'fa-text': ['text'],
-    'fa-th': ['business-suite/2x2-grid-layout'],
-    'fa-th-large': ['business-suite/2x2-grid-layout'],
-    'fa-thumbs-down': ['thumb-down'],
-    'fa-thumbs-up': ['thumb-up'],
-    'fa-times': ['decline'],
-    'fa-times-circle': ['error'],
-    'fa-toolbox': ['lx-icons/toolbox'],
-    'fa-tools': ['wrench'],
-    'fa-trash': ['delete'],
-    'fa-trash-restore': ['history'],
-    'fa-trophy': ['competitor'],
-    'fa-tshirt': ['lx-icons/tshirt'],
-    'fa-umbrella-beach': ['umbrella'],
-    'fa-underline': ['underline-text'],
-    'fa-undo': ['undo'],
-    'fa-unicorn': ['lx-icons/unicorn'],
-    'fa-unlink': ['broken-link'],
-    'fa-upload': ['upload'],
-    'fa-user': ['person-placeholder'],
-    'fa-user-friends': ['group'],
-    'fa-user-hard-hat': ['lx-icons/user-hard-hat'],
-    'fa-user-headset': ['headset'],
-    'fa-user-robot': ['lx-icons/robot'],
-    'fa-users': ['family-care'],
-    'fa-window': ['lx-icons/window'], // ['tnt/subject'],
-    'fa-wrench': ['wrench'],
-    'fa-yen-sign': ['lx-icons/yen-sign']
-};
-/**
- * Retrieves the SAP icon for a given Font Awesome icon name.
- * @param faIcon Font Awesome icon name (e.g., 'fa-check')
- * @param solid If true, returns solid variant when available
- * @returns SAP icon name or undefined if not mapped
- */
-function getSapIcon(faIcon, solid = false) {
-    const icons = ICON_MAP[faIcon];
-    if (!icons) {
-        return undefined;
-    }
-    return solid && icons[1] ? icons[1] : icons[0];
-}
 
 /**
  * Badge component is used to show a small piece of information in a colored badge.
@@ -875,221 +609,488 @@ class ResizeObserverService {
             target: element
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ResizeObserverService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ResizeObserverService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ResizeObserverService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const LX_ELLIPSIS_DEBOUNCE_ON_RESIZE = new InjectionToken('LX_ELLIPSIS_DEBOUNCE_ON_RESIZE', {
+    providedIn: 'root',
+    factory: () => EllipsisComponent.DEFAULT_RESIZE_DEBOUNCE_MS
+});
+/**
+ * You can set `max-width` CSS property on your `lx-ellipsis` host element or the parent element if you want its content to never exceed a specific width.
+ */
+class EllipsisComponent {
+    /** @internal */
+    static { this.DEFAULT_RESIZE_DEBOUNCE_MS = 500; }
+    constructor(debounceMsAfterResize, cdRef, hostEl, resizeObserverService, translateService) {
+        this.debounceMsAfterResize = debounceMsAfterResize;
+        this.cdRef = cdRef;
+        this.hostEl = hostEl;
+        this.resizeObserverService = resizeObserverService;
+        this.translateService = translateService;
+        this.content = '';
+        /**
+         * Only set this to false if the content is not a user provided string
+         * or if you sanitize the provided content yourself.
+         */
+        this.escapeHtmlInContent = true;
+        /** @internal */
+        this.isShowingMore$ = new BehaviorSubject(false);
+        this.destroyed$ = new Subject();
+        this.viewChecked$ = new Subject();
+    }
+    ngOnInit() {
+        this.sanitizedContent$ = this.content$.pipe(map((content) => {
+            if (this.escapeHtmlInContent && typeof content === 'string') {
+                return escape(content);
+            }
+            return content;
+        }));
+        this.showMoreButtonLabel$ = this.isShowingMore$.pipe(switchMap((isShowingMore) => {
+            const translationKey = isShowingMore ? 'common.showLess' : 'common.showMore';
+            return this.translateService.get(translationKey);
+        }));
+        const newWidthOnResize$ = new Subject();
+        const newHeightOnResize$ = new Subject();
+        this.resizeObserverService.observe(this.hostEl.nativeElement, (resizedElement) => {
+            newWidthOnResize$.next(resizedElement.contentRect.width);
+            newHeightOnResize$.next(resizedElement.contentRect.height);
+        });
+        const containerWidthChangedSignificantlyAfterResize$ = newWidthOnResize$.pipe(startWith(0), pairwise(), filter(([previousWidth, newWidth]) => Math.abs(newWidth - previousWidth) > 1), map(([, newWidth]) => newWidth));
+        const userTriggeredTriggeredShowLess$ = this.isShowingMore$.pipe(filter((isShowingMore) => !isShowingMore));
+        const reevaluateIfContentIsOverflowing$ = combineLatest([
+            this.contentSpanEl$,
+            userTriggeredTriggeredShowLess$,
+            containerWidthChangedSignificantlyAfterResize$
+        ]);
+        const isContentOverflowing$ = merge(concat(reevaluateIfContentIsOverflowing$.pipe(take(1)), // debounce all but the first output
+        reevaluateIfContentIsOverflowing$.pipe(debounceTime(this.debounceMsAfterResize))), this.content$.pipe(skip(1), switchMap(() => this.viewChecked$))).pipe(withLatestFrom(this.contentSpanEl$), map(([, contentSpanRef]) => this.isContentOverflowing(contentSpanRef)));
+        const userTriggeredTriggeredShowMore$ = this.isShowingMore$.pipe(filter((isShowingMore) => isShowingMore));
+        const buttonHeight$ = this.showMoreButtonEl$.pipe(filter((showMoreButtonEl) => !!showMoreButtonEl), map((showMoreButtonEl) => showMoreButtonEl.nativeElement.offsetHeight), distinctUntilChanged());
+        const userIncreasedBrowserWindowSizeToThePointOfNoTruncationNecessary$ = combineLatest([
+            buttonHeight$,
+            newHeightOnResize$.pipe(distinctUntilChanged())
+        ]).pipe(withLatestFrom(this.isShowingMore$), filter(([, isShowingMore]) => isShowingMore), map(([[buttonHeight, newHeight]]) => {
+            const heightOfOneLine = buttonHeight;
+            const showLessButtonMarginTop = 4;
+            const heightOfSpanInShowMoreMode = newHeight - buttonHeight - showLessButtonMarginTop;
+            const thresholdToDetectContentInSingleLine = 4;
+            const differenceBetweenContentSpanAndButtonHeight = Math.abs(heightOfOneLine - heightOfSpanInShowMoreMode);
+            const isSpanContentDisplayedInOneLineAgain = differenceBetweenContentSpanAndButtonHeight < thresholdToDetectContentInSingleLine;
+            return isSpanContentDisplayedInOneLineAgain;
+        }));
+        const contentFitsInOneLineAgainWhileShowMoreIsEnabled$ = userIncreasedBrowserWindowSizeToThePointOfNoTruncationNecessary$.pipe(startWith(false), pairwise(), filter(([previousTextIsNowInOneLineAgain]) => !previousTextIsNowInOneLineAgain), map(([, textIsNowInOneLineAgain]) => !textIsNowInOneLineAgain));
+        const contentIsOverflowingAndShowMoreIsNotEnabled$ = isContentOverflowing$.pipe(withLatestFrom(this.isShowingMore$), filter(([, isShowingMore]) => !isShowingMore), map(([isContentLongerThanContainerWidth]) => {
+            return isContentLongerThanContainerWidth;
+        }));
+        this.showButton$ = merge(userTriggeredTriggeredShowMore$, contentFitsInOneLineAgainWhileShowMoreIsEnabled$, contentIsOverflowingAndShowMoreIsNotEnabled$);
+        // As long as no parent component is listening on resize events,
+        // the ChangeDetectorRef.markForCheck() call done by the async pipe
+        // will not result in a change detection cycle in this component when its size changes.
+        // This is the least amount of ChangeDetectorRef.detectChanges() calls
+        // I was able to come up with. The Angular profiler shows acceptable numbers of change detection.
+        this.detectChangesWhenObservableEmits(isContentOverflowing$);
+        this.detectChangesWhenObservableEmits(this.showButton$);
+        this.detectChangesWhenObservableEmits(this.content$);
+        this.detectChangesWhenObservableEmits(contentIsOverflowingAndShowMoreIsNotEnabled$);
+        this.detectChangesWhenObservableEmits(isContentOverflowing$);
+    }
+    ngAfterViewChecked() {
+        this.viewChecked$.next();
+    }
+    /** @internal */
+    onShowMoreToggle() {
+        this.isShowingMore$.next(!this.isShowingMore$.getValue());
+        this.cdRef.detectChanges();
+    }
+    ngOnDestroy() {
+        this.resizeObserverService.unobserve(this.hostEl.nativeElement);
+    }
+    detectChangesWhenObservableEmits(observable$) {
+        observable$.pipe(takeUntil(this.destroyed$)).subscribe(() => this.cdRef.detectChanges());
+    }
+    isContentOverflowing(contentSpanElRef) {
+        const scrollWidth = contentSpanElRef.nativeElement.scrollWidth;
+        const offsetWidth = contentSpanElRef.nativeElement.clientWidth;
+        return offsetWidth < scrollWidth;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EllipsisComponent, deps: [{ token: LX_ELLIPSIS_DEBOUNCE_ON_RESIZE }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ResizeObserverService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EllipsisComponent, isStandalone: true, selector: "lx-ellipsis", inputs: { content: "content", escapeHtmlInContent: "escapeHtmlInContent" }, viewQueries: [{ propertyName: "contentSpanEl", first: true, predicate: ["contentEl"], descendants: true }, { propertyName: "showMoreButtonEl", first: true, predicate: ["showMoreButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<span\n  #contentEl\n  [class.showMore]=\"isShowingMore$ | async\"\n  class=\"content truncate lx-margin-right\"\n  [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n@if (showButton$ | async) {\n  <button (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n    {{ showMoreButtonLabel$ | async }}\n  </button>\n}\n", styles: [":host{display:block;white-space:pre-line;overflow-wrap:break-word}.content{display:inline-block;word-break:break-word}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow-wrap:normal;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+__decorate([
+    Observe('contentSpanEl')
+], EllipsisComponent.prototype, "contentSpanEl$", void 0);
+__decorate([
+    Observe('showMoreButtonEl')
+], EllipsisComponent.prototype, "showMoreButtonEl$", void 0);
+__decorate([
+    Observe('content')
+], EllipsisComponent.prototype, "content$", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EllipsisComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-ellipsis', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, AsyncPipe], template: "<span\n  #contentEl\n  [class.showMore]=\"isShowingMore$ | async\"\n  class=\"content truncate lx-margin-right\"\n  [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n@if (showButton$ | async) {\n  <button (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n    {{ showMoreButtonLabel$ | async }}\n  </button>\n}\n", styles: [":host{display:block;white-space:pre-line;overflow-wrap:break-word}.content{display:inline-block;word-break:break-word}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow-wrap:normal;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LX_ELLIPSIS_DEBOUNCE_ON_RESIZE]
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: ResizeObserverService }, { type: i1.TranslateService }], propDecorators: { content: [{
+                type: Input
+            }], escapeHtmlInContent: [{
+                type: Input
+            }], contentSpanEl$: [], contentSpanEl: [{
+                type: ViewChild,
+                args: ['contentEl']
+            }], showMoreButtonEl$: [], showMoreButtonEl: [{
+                type: ViewChild,
+                args: ['showMoreButton', { read: ElementRef }]
+            }], content$: [] } });
+
+class EmptyStateComponent {
+    constructor() {
+        /**
+         * The title to be displayed
+         */
+        this.title = input.required();
+        /**
+         * The SAP icon to show in the empty state.
+         */
+        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()));
+        /**
+         * 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(); as icon) {\n    <ui5-icon [name]=\"icon\" 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: ResizeObserverService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+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, IconComponent$1], template: "<div class=\"tw-max-w-[434px] tw-text-center\">\n  @if (icon(); as icon) {\n    <ui5-icon [name]=\"icon\" 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']
+            }], buttonClicked: [{
+                type: Output
+            }], secondaryButtonClicked: [{
+                type: Output
+            }], moreLinkClicked: [{
+                type: Output
+            }] } });
 
-const LX_ELLIPSIS_DEBOUNCE_ON_RESIZE = new InjectionToken('LX_ELLIPSIS_DEBOUNCE_ON_RESIZE', {
-    providedIn: 'root',
-    factory: () => EllipsisComponent.DEFAULT_RESIZE_DEBOUNCE_MS
-});
 /**
- * You can set `max-width` CSS property on your `lx-ellipsis` host element or the parent element if you want its content to never exceed a specific width.
+ * map Font Awesome -> SAP icons
+ * [0]: regular icon
+ * [1]: solid icon alternative (if available)
+ */
+const ICON_MAP = {
+    'fa-3x3-grid': ['lx-icons/3x3-grid'],
+    'fa-align-center': ['text-align-center'],
+    'fa-align-justify': ['text-align-justified'],
+    'fa-align-left': ['text-align-left'],
+    'fa-align-right': ['text-align-right'],
+    'fa-align-slash': ['tnt/clear-all-mapping'],
+    'fa-angle-double-down': ['expand-group'],
+    'fa-angle-double-left': ['close-command-field'],
+    'fa-angle-double-right': ['open-command-field'],
+    'fa-angle-double-up': ['collapse-group'],
+    'fa-angle-down': ['slim-arrow-down'],
+    'fa-angle-left': ['slim-arrow-left'],
+    'fa-angle-right': ['slim-arrow-right'],
+    'fa-angle-up': ['slim-arrow-up'],
+    'fa-archive': ['sap-box'],
+    'fa-arrow-circle-right': ['initiative'],
+    'fa-arrow-circle-up': ['arrow-top'],
+    'fa-arrow-down': ['arrow-bottom'],
+    'fa-arrow-from-bottom': ['upload'],
+    'fa-arrow-left': ['arrow-left'],
+    'fa-arrow-right': ['arrow-right'],
+    'fa-arrow-to-bottom': ['download'],
+    'fa-arrow-to-top': ['back-to-top'],
+    'fa-arrow-up': ['arrow-top'],
+    'fa-arrows-h': ['resize-horizontal'],
+    'fa-at': ['arobase'],
+    'fa-atom': ['lx-icons/atom'],
+    'fa-badge-check': ['lx-icons/badge-sign'],
+    'fa-balance-scale-right': ['compare-2'],
+    'fa-ballot-check': ['activities'],
+    'fa-ban': ['cancel'],
+    'fa-bars': ['menu2'],
+    'fa-bell': ['bell'],
+    'fa-binoculars': ['sys-find'],
+    'fa-bold': ['bold-text'],
+    'fa-bolt': ['tnt/raise-fault'],
+    'fa-book': ['course-book'],
+    'fa-book-open': ['education'],
+    'fa-books': ['course-book'],
+    'fa-bug': ['lx-icons/bug'],
+    'fa-bullhorn': ['marketing-campaign'],
+    'fa-bullseye-arrow': ['lx-icons/bullseye-arrow'],
+    'fa-calendar': ['calendar'],
+    'fa-caret-down': ['megamenu'],
+    'fa-caret-left': ['navigation-left-arrow'],
+    'fa-caret-up': ['sorting-ranking'],
+    'fa-chart-bar': ['vertical-bar-chart'],
+    'fa-chart-pie-alt': ['pie-chart'],
+    'fa-check': ['accept'],
+    'fa-check-circle': ['status-completed'],
+    'fa-check-square': ['complete'],
+    'fa-chess-queen-alt': ['lx-icons/chess-queen'],
+    'fa-chevron-down': ['navigation-down-arrow'],
+    'fa-chevron-left': ['navigation-left-arrow'],
+    'fa-chevron-right': ['navigation-right-arrow'],
+    'fa-chevron-square-down': ['navigation-down-arrow'],
+    'fa-chevron-square-right': ['navigation-right-arrow'],
+    'fa-chevron-up': ['navigation-up-arrow'],
+    'fa-child': ['tnt/actor'],
+    'fa-circle': ['circle-task', 'circle-task-2'],
+    'fa-clipboard-list-check': ['order-status'],
+    'fa-clock': ['in-progress'],
+    'fa-clone': ['duplicate'],
+    'fa-cloud': ['cloud'],
+    'fa-code': ['source-code'],
+    'fa-code-branch': ['business-suite/empty-sequence'],
+    'fa-cog': ['action-settings'],
+    'fa-comment': ['comment'],
+    'fa-comment-alt': ['comment'],
+    'fa-comment-alt-check': ['lx-icons/comment-alt-check'],
+    'fa-comment-lines': ['comment'],
+    'fa-comments': ['discussion'],
+    'fa-comments-alt': ['discussion'],
+    'fa-compass': ['business-objects-explorer'],
+    'fa-compress': ['exit-full-screen'],
+    'fa-confluence': ['lx-icons/confluence'],
+    'fa-copy': ['copy'],
+    'fa-database': ['database'],
+    'fa-diamond': ['rhombus-milestone', 'rhombus-milestone-2'],
+    'fa-do-not-enter': ['sys-minus'],
+    'fa-dollar-sign': ['lx-icons/dollar-sign'],
+    'fa-download': ['download'],
+    'fa-edit': ['edit'],
+    'fa-ellipsis-h': ['overflow'],
+    'fa-ellipsis-v': ['overflow'],
+    'fa-envelope': ['email'],
+    'fa-euro-sign': ['lx-icons/euro-sign'],
+    'fa-exchange': ['lx-icons/exchange'],
+    'fa-exclamation': ['business-suite/priority-1'],
+    'fa-exclamation-circle': ['lx-icons/exclamation-circle'],
+    'fa-exclamation-square': ['high-priority'],
+    'fa-exclamation-triangle': ['warning'],
+    'fa-expand': ['full-screen'],
+    'fa-expand-alt': ['full-screen'],
+    'fa-expand-wide': ['full-screen'],
+    'fa-external-link': ['action'],
+    'fa-external-link-alt': ['action'],
+    'fa-eye': ['show'],
+    'fa-eye-dropper': ['business-suite/pipette'],
+    'fa-eye-slash': ['hide'],
+    'fa-feather': ['lx-icons/feather'],
+    'fa-file': ['document'],
+    'fa-file-alt': ['document'],
+    'fa-file-audio': ['attachment-audio'],
+    'fa-file-certificate': ['verified'],
+    'fa-file-download': ['download'],
+    'fa-file-excel': ['excel-attachment'],
+    'fa-file-image': ['attachment-photo'],
+    'fa-file-pdf': ['pdf-attachment'],
+    'fa-file-plus': ['add-document'],
+    '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'],
+    'fa-folder-tree': ['lx-icons/folder-tree'],
+    'fa-gavel': ['lx-icons/gavel'],
+    'fa-globe': ['world'],
+    'fa-graduation-cap': ['study-leave'],
+    'fa-grip-lines': ['media-pause'],
+    'fa-hammer': ['lx-icons/hammer'],
+    'fa-handshake': ['decision'],
+    'fa-hat-wizard': ['lx-icons/hat-wizard'],
+    'fa-heading': ['heading1'],
+    'fa-headset': ['headset'],
+    'fa-history': ['history'],
+    'fa-home': ['home'],
+    'fa-hourglass-end': ['lx-icons/hourglass-end'],
+    'fa-hourglass-half': ['lateness'],
+    'fa-house': ['home'],
+    'fa-image': ['picture'],
+    'fa-info': ['message-information'],
+    'fa-info-circle': ['message-information', 'information'],
+    'fa-info-square': ['message-information', 'information'],
+    'fa-italic': ['italic-text'],
+    'fa-jira': ['rhombus-milestone'],
+    'fa-key': ['key'],
+    'fa-keyboard': ['keyboard-and-mouse'],
+    'fa-lemon': ['lx-icons/lemon'],
+    'fa-lightbulb': ['lightbulb'],
+    'fa-lightbulb-on': ['lx-icons/lightbulb-check'],
+    'fa-link': ['chain-link'],
+    'fa-list': ['list'],
+    'fa-list-ol': ['business-suite/icon-bulleting-with-numbers'],
+    'fa-list-ul': ['list'],
+    'fa-lock': ['locked'],
+    'fa-lock-alt': ['locked'],
+    'fa-lock-open': ['unlocked'],
+    'fa-long-arrow-left': ['arrow-left'],
+    'fa-long-arrow-right': ['arrow-right'],
+    'fa-map': ['map-3'],
+    'fa-map-pin': ['lx-icons/map-pin'],
+    'fa-map-signs': ['lx-icons/map-signs'],
+    'fa-minus': ['less'],
+    'fa-minus-circle': ['sys-minus'],
+    'fa-minus-square': ['negative'],
+    'fa-paragraph': ['text'],
+    'fa-pause': ['media-pause'],
+    'fa-pen': ['edit'],
+    'fa-pencil': ['edit'],
+    'fa-people-arrows': ['citizen-connect'],
+    'fa-phone-alt': ['call'],
+    'fa-play': ['media-play'],
+    'fa-play-circle': ['play'],
+    'fa-plug': ['disconnected'],
+    'fa-plus': ['add'],
+    'fa-plus-circle': ['sys-add'],
+    'fa-pound-sign': ['lx-icons/pound-sign'],
+    'fa-power-off': ['log'],
+    'fa-presentation': ['projector'],
+    'fa-print': ['print'],
+    'fa-project-diagram': ['lx-icons/project-diagram'],
+    'fa-question': ['incident'],
+    'fa-question-circle': ['question-mark'],
+    'fa-question-square': ['question-mark'],
+    'fa-quote-right': ['lx-icons/quote-right'],
+    'fa-radar': ['business-suite/radius'],
+    'fa-random': ['tnt/flow'],
+    'fa-rectangle-landscape': ['iphone-2'],
+    'fa-rectangle-portrait': ['iphone'],
+    'fa-rectangle-wide': ['legend'],
+    'fa-redo': ['refresh'],
+    'fa-repeat': ['synchronize'],
+    'fa-road': ['lx-icons/road'],
+    'fa-robot': ['lx-icons/robot'],
+    'fa-rocket': ['lx-icons/rocket'],
+    'fa-save': ['save'],
+    'fa-search': ['search'],
+    'fa-seedling': ['e-care'],
+    'fa-shapes': ['program-triangles'],
+    'fa-share-alt': ['share-2'],
+    'fa-share-square': ['action'],
+    'fa-shield': ['lx-icons/shield'],
+    'fa-shield-alt': ['lx-icons/shield'],
+    'fa-shield-check': ['checklist-item'],
+    'fa-shopping-cart': ['cart'],
+    'fa-signal': ['lx-icons/signal'],
+    'fa-sitemap': ['tree'],
+    'fa-sort': ['sorting-ranking'],
+    'fa-sort-alt': ['sort'],
+    'fa-sort-down': ['megamenu'],
+    'fa-sort-up': ['sorting-ranking'],
+    'fa-sparkles': ['ai'],
+    'fa-spinner': ['pending'],
+    'fa-square': ['border'],
+    'fa-star': ['unfavorite', 'favorite'],
+    'fa-sticky-note': ['notes'],
+    'fa-strikethrough': ['strikethrough'],
+    'fa-sync': ['synchronize'],
+    'fa-sync-alt': ['synchronize'],
+    'fa-table': ['business-suite/2x2-grid-layout'],
+    'fa-tachometer': ['performance'],
+    'fa-tachometer-alt-average': ['performance'],
+    'fa-tags': ['blank-tag-2'],
+    'fa-tasks': ['activities'],
+    'fa-tasks-alt': ['lx-icons/tasks'],
+    'fa-text': ['text'],
+    'fa-th': ['business-suite/2x2-grid-layout'],
+    'fa-th-large': ['business-suite/2x2-grid-layout'],
+    'fa-thumbs-down': ['thumb-down'],
+    'fa-thumbs-up': ['thumb-up'],
+    'fa-times': ['decline'],
+    'fa-times-circle': ['error'],
+    'fa-toolbox': ['lx-icons/toolbox'],
+    'fa-tools': ['wrench'],
+    'fa-trash': ['delete'],
+    'fa-trash-restore': ['history'],
+    'fa-trophy': ['competitor'],
+    'fa-tshirt': ['lx-icons/tshirt'],
+    'fa-umbrella-beach': ['umbrella'],
+    'fa-underline': ['underline-text'],
+    'fa-undo': ['undo'],
+    'fa-unicorn': ['lx-icons/unicorn'],
+    'fa-unlink': ['broken-link'],
+    'fa-upload': ['upload'],
+    'fa-user': ['person-placeholder'],
+    'fa-user-friends': ['group'],
+    'fa-user-hard-hat': ['lx-icons/user-hard-hat'],
+    'fa-user-headset': ['headset'],
+    'fa-user-robot': ['lx-icons/robot'],
+    'fa-users': ['family-care'],
+    'fa-window': ['lx-icons/window'], // ['tnt/subject'],
+    'fa-wrench': ['wrench'],
+    'fa-yen-sign': ['lx-icons/yen-sign']
+};
+/**
+ * Retrieves the SAP icon for a given Font Awesome icon name.
+ * @param faIcon Font Awesome icon name (e.g., 'fa-check')
+ * @param solid If true, returns solid variant when available
+ * @returns SAP icon name or undefined if not mapped
  */
-class EllipsisComponent {
-    /** @internal */
-    static { this.DEFAULT_RESIZE_DEBOUNCE_MS = 500; }
-    constructor(debounceMsAfterResize, cdRef, hostEl, resizeObserverService, translateService) {
-        this.debounceMsAfterResize = debounceMsAfterResize;
-        this.cdRef = cdRef;
-        this.hostEl = hostEl;
-        this.resizeObserverService = resizeObserverService;
-        this.translateService = translateService;
-        this.content = '';
-        /**
-         * Only set this to false if the content is not a user provided string
-         * or if you sanitize the provided content yourself.
-         */
-        this.escapeHtmlInContent = true;
-        /** @internal */
-        this.isShowingMore$ = new BehaviorSubject(false);
-        this.destroyed$ = new Subject();
-        this.viewChecked$ = new Subject();
-    }
-    ngOnInit() {
-        this.sanitizedContent$ = this.content$.pipe(map((content) => {
-            if (this.escapeHtmlInContent && typeof content === 'string') {
-                return escape(content);
-            }
-            return content;
-        }));
-        this.showMoreButtonLabel$ = this.isShowingMore$.pipe(switchMap((isShowingMore) => {
-            const translationKey = isShowingMore ? 'common.showLess' : 'common.showMore';
-            return this.translateService.get(translationKey);
-        }));
-        const newWidthOnResize$ = new Subject();
-        const newHeightOnResize$ = new Subject();
-        this.resizeObserverService.observe(this.hostEl.nativeElement, (resizedElement) => {
-            newWidthOnResize$.next(resizedElement.contentRect.width);
-            newHeightOnResize$.next(resizedElement.contentRect.height);
-        });
-        const containerWidthChangedSignificantlyAfterResize$ = newWidthOnResize$.pipe(startWith(0), pairwise(), filter(([previousWidth, newWidth]) => Math.abs(newWidth - previousWidth) > 1), map(([, newWidth]) => newWidth));
-        const userTriggeredTriggeredShowLess$ = this.isShowingMore$.pipe(filter((isShowingMore) => !isShowingMore));
-        const reevaluateIfContentIsOverflowing$ = combineLatest([
-            this.contentSpanEl$,
-            userTriggeredTriggeredShowLess$,
-            containerWidthChangedSignificantlyAfterResize$
-        ]);
-        const isContentOverflowing$ = merge(concat(reevaluateIfContentIsOverflowing$.pipe(take(1)), // debounce all but the first output
-        reevaluateIfContentIsOverflowing$.pipe(debounceTime(this.debounceMsAfterResize))), this.content$.pipe(skip(1), switchMap(() => this.viewChecked$))).pipe(withLatestFrom(this.contentSpanEl$), map(([, contentSpanRef]) => this.isContentOverflowing(contentSpanRef)));
-        const userTriggeredTriggeredShowMore$ = this.isShowingMore$.pipe(filter((isShowingMore) => isShowingMore));
-        const buttonHeight$ = this.showMoreButtonEl$.pipe(filter((showMoreButtonEl) => !!showMoreButtonEl), map((showMoreButtonEl) => showMoreButtonEl.nativeElement.offsetHeight), distinctUntilChanged());
-        const userIncreasedBrowserWindowSizeToThePointOfNoTruncationNecessary$ = combineLatest([
-            buttonHeight$,
-            newHeightOnResize$.pipe(distinctUntilChanged())
-        ]).pipe(withLatestFrom(this.isShowingMore$), filter(([, isShowingMore]) => isShowingMore), map(([[buttonHeight, newHeight]]) => {
-            const heightOfOneLine = buttonHeight;
-            const showLessButtonMarginTop = 4;
-            const heightOfSpanInShowMoreMode = newHeight - buttonHeight - showLessButtonMarginTop;
-            const thresholdToDetectContentInSingleLine = 4;
-            const differenceBetweenContentSpanAndButtonHeight = Math.abs(heightOfOneLine - heightOfSpanInShowMoreMode);
-            const isSpanContentDisplayedInOneLineAgain = differenceBetweenContentSpanAndButtonHeight < thresholdToDetectContentInSingleLine;
-            return isSpanContentDisplayedInOneLineAgain;
-        }));
-        const contentFitsInOneLineAgainWhileShowMoreIsEnabled$ = userIncreasedBrowserWindowSizeToThePointOfNoTruncationNecessary$.pipe(startWith(false), pairwise(), filter(([previousTextIsNowInOneLineAgain]) => !previousTextIsNowInOneLineAgain), map(([, textIsNowInOneLineAgain]) => !textIsNowInOneLineAgain));
-        const contentIsOverflowingAndShowMoreIsNotEnabled$ = isContentOverflowing$.pipe(withLatestFrom(this.isShowingMore$), filter(([, isShowingMore]) => !isShowingMore), map(([isContentLongerThanContainerWidth]) => {
-            return isContentLongerThanContainerWidth;
-        }));
-        this.showButton$ = merge(userTriggeredTriggeredShowMore$, contentFitsInOneLineAgainWhileShowMoreIsEnabled$, contentIsOverflowingAndShowMoreIsNotEnabled$);
-        // As long as no parent component is listening on resize events,
-        // the ChangeDetectorRef.markForCheck() call done by the async pipe
-        // will not result in a change detection cycle in this component when its size changes.
-        // This is the least amount of ChangeDetectorRef.detectChanges() calls
-        // I was able to come up with. The Angular profiler shows acceptable numbers of change detection.
-        this.detectChangesWhenObservableEmits(isContentOverflowing$);
-        this.detectChangesWhenObservableEmits(this.showButton$);
-        this.detectChangesWhenObservableEmits(this.content$);
-        this.detectChangesWhenObservableEmits(contentIsOverflowingAndShowMoreIsNotEnabled$);
-        this.detectChangesWhenObservableEmits(isContentOverflowing$);
-    }
-    ngAfterViewChecked() {
-        this.viewChecked$.next();
-    }
-    /** @internal */
-    onShowMoreToggle() {
-        this.isShowingMore$.next(!this.isShowingMore$.getValue());
-        this.cdRef.detectChanges();
-    }
-    ngOnDestroy() {
-        this.resizeObserverService.unobserve(this.hostEl.nativeElement);
-    }
-    detectChangesWhenObservableEmits(observable$) {
-        observable$.pipe(takeUntil(this.destroyed$)).subscribe(() => this.cdRef.detectChanges());
-    }
-    isContentOverflowing(contentSpanElRef) {
-        const scrollWidth = contentSpanElRef.nativeElement.scrollWidth;
-        const offsetWidth = contentSpanElRef.nativeElement.clientWidth;
-        return offsetWidth < scrollWidth;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EllipsisComponent, deps: [{ token: LX_ELLIPSIS_DEBOUNCE_ON_RESIZE }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ResizeObserverService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EllipsisComponent, isStandalone: true, selector: "lx-ellipsis", inputs: { content: "content", escapeHtmlInContent: "escapeHtmlInContent" }, viewQueries: [{ propertyName: "contentSpanEl", first: true, predicate: ["contentEl"], descendants: true }, { propertyName: "showMoreButtonEl", first: true, predicate: ["showMoreButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<span\n  #contentEl\n  [class.showMore]=\"isShowingMore$ | async\"\n  class=\"content truncate lx-margin-right\"\n  [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n@if (showButton$ | async) {\n  <button (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n    {{ showMoreButtonLabel$ | async }}\n  </button>\n}\n", styles: [":host{display:block;white-space:pre-line;overflow-wrap:break-word}.content{display:inline-block;word-break:break-word}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow-wrap:normal;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-__decorate([
-    Observe('contentSpanEl')
-], EllipsisComponent.prototype, "contentSpanEl$", void 0);
-__decorate([
-    Observe('showMoreButtonEl')
-], EllipsisComponent.prototype, "showMoreButtonEl$", void 0);
-__decorate([
-    Observe('content')
-], EllipsisComponent.prototype, "content$", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EllipsisComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lx-ellipsis', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, AsyncPipe], template: "<span\n  #contentEl\n  [class.showMore]=\"isShowingMore$ | async\"\n  class=\"content truncate lx-margin-right\"\n  [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n@if (showButton$ | async) {\n  <button (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n    {{ showMoreButtonLabel$ | async }}\n  </button>\n}\n", styles: [":host{display:block;white-space:pre-line;overflow-wrap:break-word}.content{display:inline-block;word-break:break-word}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow-wrap:normal;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LX_ELLIPSIS_DEBOUNCE_ON_RESIZE]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: ResizeObserverService }, { type: i1.TranslateService }], propDecorators: { content: [{
-                type: Input
-            }], escapeHtmlInContent: [{
-                type: Input
-            }], contentSpanEl$: [], contentSpanEl: [{
-                type: ViewChild,
-                args: ['contentEl']
-            }], showMoreButtonEl$: [], showMoreButtonEl: [{
-                type: ViewChild,
-                args: ['showMoreButton', { read: ElementRef }]
-            }], content$: [] } });
-
-class EmptyStateComponent {
-    constructor() {
-        /**
-         * The title to be displayed
-         */
-        this.title = input.required();
-        /**
-         * The SAP icon to show in the empty state.
-         */
-        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()));
-        /**
-         * 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();
+function getSapIcon(faIcon, solid = false) {
+    const icons = ICON_MAP[faIcon];
+    if (!icons) {
+        return undefined;
     }
-    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(); as icon) {\n    <ui5-icon [name]=\"icon\" 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"] }] }); }
+    return solid && icons[1] ? icons[1] : icons[0];
 }
-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, IconComponent$1], template: "<div class=\"tw-max-w-[434px] tw-text-center\">\n  @if (icon(); as icon) {\n    <ui5-icon [name]=\"icon\" 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']
-            }], buttonClicked: [{
-                type: Output
-            }], secondaryButtonClicked: [{
-                type: Output
-            }], moreLinkClicked: [{
-                type: Output
-            }] } });
 
 class IconScaleComponent {
     constructor() {