@leanix/components 0.4.730 → 0.4.731
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -200,6 +200,7 @@ const ICON_MAP = {
|
|
|
200
200
|
'fa-file-video': ['attachment-video'],
|
|
201
201
|
'fa-file-word': ['doc-attachment'],
|
|
202
202
|
'fa-filter': ['filter'],
|
|
203
|
+
'fa-fire': ['business-suite/fire'],
|
|
203
204
|
'fa-fire-alt': ['business-suite/fire'],
|
|
204
205
|
'fa-folder': ['folder-blank'],
|
|
205
206
|
'fa-folder-open': ['open-folder'],
|
|
@@ -293,6 +294,7 @@ const ICON_MAP = {
|
|
|
293
294
|
'fa-spinner': ['pending'],
|
|
294
295
|
'fa-square': ['border'],
|
|
295
296
|
'fa-star': ['unfavorite', 'favorite'],
|
|
297
|
+
'fa-sticky-note': ['notes'],
|
|
296
298
|
'fa-strikethrough': ['strikethrough'],
|
|
297
299
|
'fa-sync': ['synchronize'],
|
|
298
300
|
'fa-sync-alt': ['synchronize'],
|
|
@@ -542,7 +544,7 @@ class ButtonComponent {
|
|
|
542
544
|
this.icon = input();
|
|
543
545
|
this.iconName = computed(() => this.getIconName(this.icon()));
|
|
544
546
|
this.iconVariant = computed(() => extractFontAwesomeVariant(this.icon()));
|
|
545
|
-
this.iconKind = computed(() => (isFontAwesomeIcon(this.iconName()) ? 'fa' : 'sap'));
|
|
547
|
+
this.iconKind = computed(() => (isFontAwesomeIcon$1(this.iconName()) ? 'fa' : 'sap'));
|
|
546
548
|
/**
|
|
547
549
|
* The icon name (font-awesome) to display inside the button.
|
|
548
550
|
* It is displayed after any additional content.
|
|
@@ -556,7 +558,7 @@ class ButtonComponent {
|
|
|
556
558
|
this.endIcon = input();
|
|
557
559
|
this.endIconName = computed(() => this.getIconName(this.endIcon()));
|
|
558
560
|
this.endIconVariant = computed(() => extractFontAwesomeVariant(this.endIcon()));
|
|
559
|
-
this.endIconKind = computed(() => (isFontAwesomeIcon(this.endIconName()) ? 'fa' : 'sap'));
|
|
561
|
+
this.endIconKind = computed(() => (isFontAwesomeIcon$1(this.endIconName()) ? 'fa' : 'sap'));
|
|
560
562
|
/**
|
|
561
563
|
* This shows a spinner inside the button.
|
|
562
564
|
*/
|
|
@@ -576,7 +578,7 @@ class ButtonComponent {
|
|
|
576
578
|
// `fa-ellipsis-v` --> `overflow` is an intrusive change, therefore using the SAP icon alternative
|
|
577
579
|
return 'overflow';
|
|
578
580
|
}
|
|
579
|
-
if (!isFontAwesomeIcon(iconName)) {
|
|
581
|
+
if (!isFontAwesomeIcon$1(iconName)) {
|
|
580
582
|
// Assuming SAP icon was provided
|
|
581
583
|
return iconName;
|
|
582
584
|
}
|
|
@@ -640,7 +642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
640
642
|
function isEllipsisVIcon(iconName) {
|
|
641
643
|
return iconName?.includes('fa-ellipsis-v') ?? false;
|
|
642
644
|
}
|
|
643
|
-
function isFontAwesomeIcon(iconName) {
|
|
645
|
+
function isFontAwesomeIcon$1(iconName) {
|
|
644
646
|
return iconName ? /\bfa-\w*\b/.test(iconName) : false;
|
|
645
647
|
}
|
|
646
648
|
function extractFontAwesomeVariant(iconName) {
|
|
@@ -1032,6 +1034,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1032
1034
|
class EmptyStateComponent {
|
|
1033
1035
|
constructor() {
|
|
1034
1036
|
this.title = input.required();
|
|
1037
|
+
/**
|
|
1038
|
+
* The SAP icon to show in the empty state.
|
|
1039
|
+
*
|
|
1040
|
+
* **Important:** Font Awesome icons are not supported anymore.
|
|
1041
|
+
*/
|
|
1035
1042
|
this.icon = input();
|
|
1036
1043
|
this.buttonLabel = input();
|
|
1037
1044
|
this.secondaryButtonLabel = input();
|
|
@@ -1041,6 +1048,14 @@ class EmptyStateComponent {
|
|
|
1041
1048
|
this.openMoreLinkInNewTab = input(true);
|
|
1042
1049
|
this.size = input('medium');
|
|
1043
1050
|
this.useRouterLink = computed(() => Array.isArray(this.moreLink()));
|
|
1051
|
+
this.iconName = computed(() => {
|
|
1052
|
+
const icon = this.icon();
|
|
1053
|
+
if (!icon) {
|
|
1054
|
+
return null;
|
|
1055
|
+
}
|
|
1056
|
+
// Temporarily map icons, as long as consumers need to be adjusted.
|
|
1057
|
+
return isFontAwesomeIcon(icon) ? mapToSapIcon(icon) : icon;
|
|
1058
|
+
});
|
|
1044
1059
|
this.buttonClicked = new EventEmitter();
|
|
1045
1060
|
this.secondaryButtonClicked = new EventEmitter();
|
|
1046
1061
|
this.moreLinkClicked = new EventEmitter();
|
|
@@ -1049,11 +1064,11 @@ class EmptyStateComponent {
|
|
|
1049
1064
|
return this.size();
|
|
1050
1065
|
}
|
|
1051
1066
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1052
|
-
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 (
|
|
1067
|
+
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"] }] }); }
|
|
1053
1068
|
}
|
|
1054
1069
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
1055
1070
|
type: Component,
|
|
1056
|
-
args: [{ selector: 'lx-empty-state', imports: [ButtonComponent, RouterLink], template: "<div class=\"tw-max-w-[434px] tw-text-center\">\n @if (
|
|
1071
|
+
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"] }]
|
|
1057
1072
|
}], propDecorators: { _size: [{
|
|
1058
1073
|
type: HostBinding,
|
|
1059
1074
|
args: ['attr.size']
|
|
@@ -1064,6 +1079,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1064
1079
|
}], moreLinkClicked: [{
|
|
1065
1080
|
type: Output
|
|
1066
1081
|
}] } });
|
|
1082
|
+
function mapToSapIcon(fontAwesomeIcon) {
|
|
1083
|
+
const sapIcons = ICON_MAP[`fa-${fontAwesomeIcon}`];
|
|
1084
|
+
if (!sapIcons || sapIcons.length === 0) {
|
|
1085
|
+
console.warn(`No SAP icon found for Font Awesome icon fa-${fontAwesomeIcon}`);
|
|
1086
|
+
return null;
|
|
1087
|
+
}
|
|
1088
|
+
const isSolid = true; // Empty state icons were always solid
|
|
1089
|
+
const sapIcon = isSolid && sapIcons[1] ? sapIcons[1] : sapIcons[0];
|
|
1090
|
+
return sapIcon ?? null;
|
|
1091
|
+
}
|
|
1092
|
+
function isFontAwesomeIcon(iconName) {
|
|
1093
|
+
return !!ICON_MAP[`fa-${iconName}`];
|
|
1094
|
+
}
|
|
1067
1095
|
|
|
1068
1096
|
class IconScaleComponent {
|
|
1069
1097
|
constructor() {
|