@leanix/components 0.4.756 → 0.4.757
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.
|
@@ -528,7 +528,7 @@ class ButtonComponent {
|
|
|
528
528
|
this.icon = input();
|
|
529
529
|
this.iconName = computed(() => this.getIconName(this.icon()));
|
|
530
530
|
this.iconVariant = computed(() => extractFontAwesomeVariant(this.icon()));
|
|
531
|
-
this.iconKind = computed(() => (isFontAwesomeIcon
|
|
531
|
+
this.iconKind = computed(() => (isFontAwesomeIcon(this.iconName()) ? 'fa' : 'sap'));
|
|
532
532
|
/**
|
|
533
533
|
* The icon name (font-awesome) to display inside the button.
|
|
534
534
|
* It is displayed after any additional content.
|
|
@@ -542,7 +542,7 @@ class ButtonComponent {
|
|
|
542
542
|
this.endIcon = input();
|
|
543
543
|
this.endIconName = computed(() => this.getIconName(this.endIcon()));
|
|
544
544
|
this.endIconVariant = computed(() => extractFontAwesomeVariant(this.endIcon()));
|
|
545
|
-
this.endIconKind = computed(() => (isFontAwesomeIcon
|
|
545
|
+
this.endIconKind = computed(() => (isFontAwesomeIcon(this.endIconName()) ? 'fa' : 'sap'));
|
|
546
546
|
/**
|
|
547
547
|
* This shows a spinner inside the button.
|
|
548
548
|
*/
|
|
@@ -562,7 +562,7 @@ class ButtonComponent {
|
|
|
562
562
|
// `fa-ellipsis-v` --> `overflow` is an intrusive change, therefore using the SAP icon alternative
|
|
563
563
|
return 'overflow';
|
|
564
564
|
}
|
|
565
|
-
if (!isFontAwesomeIcon
|
|
565
|
+
if (!isFontAwesomeIcon(iconName)) {
|
|
566
566
|
// Assuming SAP icon was provided
|
|
567
567
|
return iconName;
|
|
568
568
|
}
|
|
@@ -626,7 +626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
626
626
|
function isEllipsisVIcon(iconName) {
|
|
627
627
|
return iconName?.includes('fa-ellipsis-v') ?? false;
|
|
628
628
|
}
|
|
629
|
-
function isFontAwesomeIcon
|
|
629
|
+
function isFontAwesomeIcon(iconName) {
|
|
630
630
|
return iconName ? /\bfa-\w*\b/.test(iconName) : false;
|
|
631
631
|
}
|
|
632
632
|
function extractFontAwesomeVariant(iconName) {
|
|
@@ -1023,8 +1023,6 @@ class EmptyStateComponent {
|
|
|
1023
1023
|
this.title = input.required();
|
|
1024
1024
|
/**
|
|
1025
1025
|
* The SAP icon to show in the empty state.
|
|
1026
|
-
*
|
|
1027
|
-
* **Important:** Font Awesome icons are not supported anymore.
|
|
1028
1026
|
*/
|
|
1029
1027
|
this.icon = input();
|
|
1030
1028
|
/**
|
|
@@ -1060,14 +1058,6 @@ class EmptyStateComponent {
|
|
|
1060
1058
|
*/
|
|
1061
1059
|
this.size = input('medium');
|
|
1062
1060
|
this.useRouterLink = computed(() => Array.isArray(this.moreLink()));
|
|
1063
|
-
this.iconName = computed(() => {
|
|
1064
|
-
const icon = this.icon();
|
|
1065
|
-
if (!icon) {
|
|
1066
|
-
return null;
|
|
1067
|
-
}
|
|
1068
|
-
// Temporarily map icons, as long as consumers need to be adjusted.
|
|
1069
|
-
return isFontAwesomeIcon(icon) ? mapToSapIcon(icon) : icon;
|
|
1070
|
-
});
|
|
1071
1061
|
/**
|
|
1072
1062
|
* Emitted when the main call-to-action button is clicked
|
|
1073
1063
|
*/
|
|
@@ -1085,11 +1075,11 @@ class EmptyStateComponent {
|
|
|
1085
1075
|
return this.size();
|
|
1086
1076
|
}
|
|
1087
1077
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1088
|
-
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 (
|
|
1078
|
+
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"] }] }); }
|
|
1089
1079
|
}
|
|
1090
1080
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
1091
1081
|
type: Component,
|
|
1092
|
-
args: [{ selector: 'lx-empty-state', imports: [ButtonComponent, RouterLink, IconComponent$1], template: "<div class=\"tw-max-w-[434px] tw-text-center\">\n @if (
|
|
1082
|
+
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"] }]
|
|
1093
1083
|
}], propDecorators: { _size: [{
|
|
1094
1084
|
type: HostBinding,
|
|
1095
1085
|
args: ['attr.size']
|
|
@@ -1100,19 +1090,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1100
1090
|
}], moreLinkClicked: [{
|
|
1101
1091
|
type: Output
|
|
1102
1092
|
}] } });
|
|
1103
|
-
function mapToSapIcon(fontAwesomeIcon) {
|
|
1104
|
-
const sapIcons = ICON_MAP[`fa-${fontAwesomeIcon}`];
|
|
1105
|
-
if (!sapIcons || sapIcons.length === 0) {
|
|
1106
|
-
console.warn(`No SAP icon found for Font Awesome icon fa-${fontAwesomeIcon}`);
|
|
1107
|
-
return null;
|
|
1108
|
-
}
|
|
1109
|
-
const isSolid = true; // Empty state icons were always solid
|
|
1110
|
-
const sapIcon = isSolid && sapIcons[1] ? sapIcons[1] : sapIcons[0];
|
|
1111
|
-
return sapIcon ?? null;
|
|
1112
|
-
}
|
|
1113
|
-
function isFontAwesomeIcon(iconName) {
|
|
1114
|
-
return !!ICON_MAP[`fa-${iconName}`];
|
|
1115
|
-
}
|
|
1116
1093
|
|
|
1117
1094
|
class IconScaleComponent {
|
|
1118
1095
|
constructor() {
|