@leanix/components 0.4.433 → 0.4.434
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CommonModule
|
|
1
|
+
import { CommonModule } from '@angular/common';
|
|
2
2
|
import { Component, EventEmitter, HostBinding, Output, computed, input } from '@angular/core';
|
|
3
3
|
import { RouterLink } from '@angular/router';
|
|
4
4
|
import { ButtonComponent } from '../button/button.component';
|
|
@@ -8,6 +8,7 @@ export class EmptyStateComponent {
|
|
|
8
8
|
this.title = input.required();
|
|
9
9
|
this.icon = input();
|
|
10
10
|
this.buttonLabel = input();
|
|
11
|
+
this.secondaryButtonLabel = input();
|
|
11
12
|
this.loading = input(false);
|
|
12
13
|
this.moreLinkLabel = input();
|
|
13
14
|
this.moreLink = input();
|
|
@@ -15,23 +16,26 @@ export class EmptyStateComponent {
|
|
|
15
16
|
this.size = input('medium');
|
|
16
17
|
this.useRouterLink = computed(() => Array.isArray(this.moreLink()));
|
|
17
18
|
this.buttonClicked = new EventEmitter();
|
|
19
|
+
this.secondaryButtonClicked = new EventEmitter();
|
|
18
20
|
this.moreLinkClicked = new EventEmitter();
|
|
19
21
|
}
|
|
20
22
|
get _size() {
|
|
21
23
|
return this.size();
|
|
22
24
|
}
|
|
23
25
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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 }, 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", 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 @if (buttonLabel()) {\n
|
|
26
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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, 13.5px)}: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, 13.5px)}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: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
25
27
|
}
|
|
26
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
27
29
|
type: Component,
|
|
28
|
-
args: [{ selector: 'lx-empty-state', standalone: true, imports: [CommonModule,
|
|
30
|
+
args: [{ selector: 'lx-empty-state', standalone: true, imports: [CommonModule, 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, 13.5px)}: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, 13.5px)}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"] }]
|
|
29
31
|
}], propDecorators: { _size: [{
|
|
30
32
|
type: HostBinding,
|
|
31
33
|
args: ['attr.size']
|
|
32
34
|
}], buttonClicked: [{
|
|
33
35
|
type: Output
|
|
36
|
+
}], secondaryButtonClicked: [{
|
|
37
|
+
type: Output
|
|
34
38
|
}], moreLinkClicked: [{
|
|
35
39
|
type: Output
|
|
36
40
|
}] } });
|
|
37
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
41
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW1wdHktc3RhdGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL3NyYy9saWIvY29yZS11aS9jb21wb25lbnRzL2VtcHR5LXN0YXRlL2VtcHR5LXN0YXRlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9zcmMvbGliL2NvcmUtdWkvY29tcG9uZW50cy9lbXB0eS1zdGF0ZS9lbXB0eS1zdGF0ZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLE1BQU0sRUFBVSxRQUFRLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RHLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUM3QyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7O0FBUzdELE1BQU0sT0FBTyxtQkFBbUI7SUFQaEM7UUFRRSxVQUFLLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBVSxDQUFDO1FBRWpDLFNBQUksR0FBRyxLQUFLLEVBQVUsQ0FBQztRQUN2QixnQkFBVyxHQUFHLEtBQUssRUFBVSxDQUFDO1FBQzlCLHlCQUFvQixHQUFHLEtBQUssRUFBVSxDQUFDO1FBQ3ZDLFlBQU8sR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFDaEMsa0JBQWEsR0FBRyxLQUFLLEVBQVUsQ0FBQztRQUNoQyxhQUFRLEdBQUcsS0FBSyxFQUFxQixDQUFDO1FBQ3RDLHlCQUFvQixHQUFHLEtBQUssQ0FBVSxJQUFJLENBQUMsQ0FBQztRQUM1QyxTQUFJLEdBQUcsS0FBSyxDQUFxQixRQUFRLENBQUMsQ0FBQztRQUVwQyxrQkFBYSxHQUFvQixRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBTzdFLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQWMsQ0FBQztRQUMvQywyQkFBc0IsR0FBRyxJQUFJLFlBQVksRUFBYyxDQUFDO1FBQ3hELG9CQUFlLEdBQUcsSUFBSSxZQUFZLEVBQWMsQ0FBQztLQUM1RDtJQVJDLElBQ0ksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3JCLENBQUM7OEdBakJVLG1CQUFtQjtrR0FBbkIsbUJBQW1CLGs5Q0NaaEMsNnREQXFEQSxrb0JEN0NZLFlBQVksK0JBQUUsZUFBZSx1S0FBRSxVQUFVOzsyRkFJeEMsbUJBQW1CO2tCQVAvQixTQUFTOytCQUNFLGdCQUFnQixjQUNkLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxlQUFlLEVBQUUsVUFBVSxDQUFDOzhCQW1CaEQsS0FBSztzQkFEUixXQUFXO3VCQUFDLFdBQVc7Z0JBS2QsYUFBYTtzQkFBdEIsTUFBTTtnQkFDRyxzQkFBc0I7c0JBQS9CLE1BQU07Z0JBQ0csZUFBZTtzQkFBeEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSG9zdEJpbmRpbmcsIE91dHB1dCwgU2lnbmFsLCBjb21wdXRlZCwgaW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFJvdXRlckxpbmsgfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xuaW1wb3J0IHsgQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi4vYnV0dG9uL2J1dHRvbi5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdseC1lbXB0eS1zdGF0ZScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEJ1dHRvbkNvbXBvbmVudCwgUm91dGVyTGlua10sXG4gIHRlbXBsYXRlVXJsOiAnLi9lbXB0eS1zdGF0ZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9lbXB0eS1zdGF0ZS5jb21wb25lbnQuc2Nzcydcbn0pXG5leHBvcnQgY2xhc3MgRW1wdHlTdGF0ZUNvbXBvbmVudCB7XG4gIHRpdGxlID0gaW5wdXQucmVxdWlyZWQ8c3RyaW5nPigpO1xuXG4gIGljb24gPSBpbnB1dDxzdHJpbmc+KCk7XG4gIGJ1dHRvbkxhYmVsID0gaW5wdXQ8c3RyaW5nPigpO1xuICBzZWNvbmRhcnlCdXR0b25MYWJlbCA9IGlucHV0PHN0cmluZz4oKTtcbiAgbG9hZGluZyA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcbiAgbW9yZUxpbmtMYWJlbCA9IGlucHV0PHN0cmluZz4oKTtcbiAgbW9yZUxpbmsgPSBpbnB1dDxzdHJpbmcgfCBzdHJpbmdbXT4oKTtcbiAgb3Blbk1vcmVMaW5rSW5OZXdUYWIgPSBpbnB1dDxib29sZWFuPih0cnVlKTtcbiAgc2l6ZSA9IGlucHV0PCdzbWFsbCcgfCAnbWVkaXVtJz4oJ21lZGl1bScpO1xuXG4gIHB1YmxpYyB1c2VSb3V0ZXJMaW5rOiBTaWduYWw8Ym9vbGVhbj4gPSBjb21wdXRlZCgoKSA9PiBBcnJheS5pc0FycmF5KHRoaXMubW9yZUxpbmsoKSkpO1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5zaXplJylcbiAgZ2V0IF9zaXplKCkge1xuICAgIHJldHVybiB0aGlzLnNpemUoKTtcbiAgfVxuXG4gIEBPdXRwdXQoKSBidXR0b25DbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PigpO1xuICBAT3V0cHV0KCkgc2Vjb25kYXJ5QnV0dG9uQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4oKTtcbiAgQE91dHB1dCgpIG1vcmVMaW5rQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4oKTtcbn1cbiIsIjxkaXYgY2xhc3M9XCJ0dy1tYXgtdy1bNDM0cHhdIHR3LXRleHQtY2VudGVyXCI+XG4gIEBpZiAoaWNvbigpKSB7XG4gICAgPGkgY2xhc3M9XCJlbXB0eVN0YXRlSWNvbiBmYXMgdHctdGV4dC1wcmltYXJ5XCIgW2NsYXNzXT1cIidmYS0nICsgaWNvbigpXCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+PC9pPlxuICB9XG5cbiAgPGgzIGNsYXNzPVwiZW1wdHktc3RhdGUtdGl0bGUgdHctbWItbSB0dy1tdC14bCB0dy10ZXh0LWJsYWNrXCIgW2lubmVySFRNTF09XCJ0aXRsZSgpXCI+PC9oMz5cblxuICA8ZGl2IGNsYXNzPVwiZW1wdHktc3RhdGUtY29udGVudCB0dy1sZWFkaW5nLVsxNnB4XSB0dy10ZXh0LWdyYXktNTBcIj5cbiAgICA8bmctY29udGVudCAvPlxuICA8L2Rpdj5cblxuICA8ZGl2IGNsYXNzPVwidHctZmxleCB0dy1qdXN0aWZ5LWNlbnRlciB0dy1nYXAtbVwiPlxuICAgIEBpZiAoc2Vjb25kYXJ5QnV0dG9uTGFiZWwoKSkge1xuICAgICAgPGRpdiBjbGFzcz1cInNlY29uZGFyeUJ1dHRvbiB0dy1teS14bFwiPlxuICAgICAgICA8YnV0dG9uIGx4LWJ1dHRvbiBzaXplPVwibGFyZ2VcIiBbc2hvd1NwaW5uZXJdPVwibG9hZGluZygpXCIgKGNsaWNrKT1cInNlY29uZGFyeUJ1dHRvbkNsaWNrZWQuZW1pdCgkZXZlbnQpXCI+XG4gICAgICAgICAge3sgc2Vjb25kYXJ5QnV0dG9uTGFiZWwoKSB9fVxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgIDwvZGl2PlxuICAgIH1cblxuICAgIEBpZiAoYnV0dG9uTGFiZWwoKSkge1xuICAgICAgPGRpdiBjbGFzcz1cImFjdGlvbkJ1dHRvbiB0dy1teS14bFwiPlxuICAgICAgICA8YnV0dG9uIGx4LWJ1dHRvbiBzaXplPVwibGFyZ2VcIiBjb2xvcj1cInByaW1hcnlcIiBbc2hvd1NwaW5uZXJdPVwibG9hZGluZygpXCIgKGNsaWNrKT1cImJ1dHRvbkNsaWNrZWQuZW1pdCgkZXZlbnQpXCI+XG4gICAgICAgICAge3sgYnV0dG9uTGFiZWwoKSB9fVxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgIDwvZGl2PlxuICAgIH1cbiAgPC9kaXY+XG5cbiAgQGlmIChtb3JlTGlua0xhYmVsKCkgJiYgbW9yZUxpbmsoKSkge1xuICAgIDxkaXY+XG4gICAgICBAaWYgKHVzZVJvdXRlckxpbmsoKSkge1xuICAgICAgICA8YVxuICAgICAgICAgIHJlbD1cIm5vb3BlbmVyIG5vcmVmZXJyZXJcIlxuICAgICAgICAgIGNsYXNzPVwidHctdGV4dC1zaXplLW1kIHR3LXRleHQtcHJpbWFyeVwiXG4gICAgICAgICAgW3JvdXRlckxpbmtdPVwibW9yZUxpbmsoKVwiXG4gICAgICAgICAgKGNsaWNrKT1cIm1vcmVMaW5rQ2xpY2tlZC5lbWl0KCRldmVudClcIlxuICAgICAgICAgIFt0YXJnZXRdPVwib3Blbk1vcmVMaW5rSW5OZXdUYWIoKSA/ICdfYmxhbmsnIDogJ19zZWxmJ1wiXG4gICAgICAgICAgPnt7IG1vcmVMaW5rTGFiZWwoKSB9fTwvYVxuICAgICAgICA+XG4gICAgICB9IEBlbHNlIHtcbiAgICAgICAgPGFcbiAgICAgICAgICByZWw9XCJub29wZW5lciBub3JlZmVycmVyXCJcbiAgICAgICAgICBjbGFzcz1cInR3LXRleHQtc2l6ZS1tZCB0dy10ZXh0LXByaW1hcnlcIlxuICAgICAgICAgIFtocmVmXT1cIm1vcmVMaW5rKClcIlxuICAgICAgICAgIChjbGljayk9XCJtb3JlTGlua0NsaWNrZWQuZW1pdCgkZXZlbnQpXCJcbiAgICAgICAgICBbdGFyZ2V0XT1cIm9wZW5Nb3JlTGlua0luTmV3VGFiKCkgPyAnX2JsYW5rJyA6ICdfc2VsZidcIlxuICAgICAgICAgID57eyBtb3JlTGlua0xhYmVsKCkgfX08L2FcbiAgICAgICAgPlxuICAgICAgfVxuICAgIDwvZGl2PlxuICB9XG48L2Rpdj5cbiJdfQ==
|
|
@@ -753,6 +753,7 @@ class EmptyStateComponent {
|
|
|
753
753
|
this.title = input.required();
|
|
754
754
|
this.icon = input();
|
|
755
755
|
this.buttonLabel = input();
|
|
756
|
+
this.secondaryButtonLabel = input();
|
|
756
757
|
this.loading = input(false);
|
|
757
758
|
this.moreLinkLabel = input();
|
|
758
759
|
this.moreLink = input();
|
|
@@ -760,22 +761,25 @@ class EmptyStateComponent {
|
|
|
760
761
|
this.size = input('medium');
|
|
761
762
|
this.useRouterLink = computed(() => Array.isArray(this.moreLink()));
|
|
762
763
|
this.buttonClicked = new EventEmitter();
|
|
764
|
+
this.secondaryButtonClicked = new EventEmitter();
|
|
763
765
|
this.moreLinkClicked = new EventEmitter();
|
|
764
766
|
}
|
|
765
767
|
get _size() {
|
|
766
768
|
return this.size();
|
|
767
769
|
}
|
|
768
770
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
769
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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 }, 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", 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 @if (buttonLabel()) {\n
|
|
771
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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, 13.5px)}: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, 13.5px)}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: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
770
772
|
}
|
|
771
773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
772
774
|
type: Component,
|
|
773
|
-
args: [{ selector: 'lx-empty-state', standalone: true, imports: [CommonModule,
|
|
775
|
+
args: [{ selector: 'lx-empty-state', standalone: true, imports: [CommonModule, 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, 13.5px)}: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, 13.5px)}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"] }]
|
|
774
776
|
}], propDecorators: { _size: [{
|
|
775
777
|
type: HostBinding,
|
|
776
778
|
args: ['attr.size']
|
|
777
779
|
}], buttonClicked: [{
|
|
778
780
|
type: Output
|
|
781
|
+
}], secondaryButtonClicked: [{
|
|
782
|
+
type: Output
|
|
779
783
|
}], moreLinkClicked: [{
|
|
780
784
|
type: Output
|
|
781
785
|
}] } });
|