@lucca-front/ng 21.0.0-rc.3 → 21.0.0-rc.4

package/fesm2022/lucca-front-ng-empty-state.mjs

@@ -1,69 +1,110 @@
 import * as i0 from '@angular/core';
-import { input, numberAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, computed } from '@angular/core';
+import { numberAttribute, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute } from '@angular/core';
 import { PortalDirective } from '@lucca-front/ng/core';
 import { LuSafeExternalSvgPipe } from '@lucca-front/ng/safe-content';
 
 class EmptyStatePageComponent {
     constructor() {
-        /**
-         * Icon image (URL)
-         */
-        this.icon = input(null);
+        this.icon = null;
         /**
          * Top right background image (URL)
          */
-        this.topRightBackground = input('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg');
+        this.topRightBackground = 'https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg';
         /**
          * Top right foreground image (URL)
          */
-        this.topRightForeground = input('https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg');
+        this.topRightForeground = 'https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg';
         /**
          * Bottom left background image (URL)
          */
-        this.bottomLeftBackground = input('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg');
+        this.bottomLeftBackground = 'https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg';
         /**
          * Bottom left foreground image (URL)
          */
-        this.bottomLeftForeground = input('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg');
+        this.bottomLeftForeground = 'https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg';
         /**
          * Background color for content (text)
          */
-        this.contentBackgroundColor = input('var(--pr-t-elevation-surface-default)');
-        this.slotTop = input();
-        this.heading = input();
-        this.description = input();
-        this.hx = input(1, { transform: numberAttribute });
+        this.contentBackgroundColor = 'var(--pr-t-elevation-surface-default)';
+        this.hx = 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: EmptyStatePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: EmptyStatePageComponent, isStandalone: true, selector: "lu-empty-state-page", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, topRightBackground: { classPropertyName: "topRightBackground", publicName: "topRightBackground", isSignal: true, isRequired: false, transformFunction: null }, topRightForeground: { classPropertyName: "topRightForeground", publicName: "topRightForeground", isSignal: true, isRequired: false, transformFunction: null }, bottomLeftBackground: { classPropertyName: "bottomLeftBackground", publicName: "bottomLeftBackground", isSignal: true, isRequired: false, transformFunction: null }, bottomLeftForeground: { classPropertyName: "bottomLeftForeground", publicName: "bottomLeftForeground", isSignal: true, isRequired: false, transformFunction: null }, contentBackgroundColor: { classPropertyName: "contentBackgroundColor", publicName: "contentBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, slotTop: { classPropertyName: "slotTop", publicName: "slotTop", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, hx: { classPropertyName: "hx", publicName: "hx", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "emptyState-wrapper" }, ngImport: i0, template: "<section\n\tclass=\"emptyState mod-page\"\n\t[attr.role]=\"heading() ? null : 'presentation'\"\n\t[style.--components-emptyState-background-color]=\"contentBackgroundColor()\"\n\tstyle.--components-emptyState-illustration-background-bottom-left=\"url({{ bottomLeftBackground() }})\"\n\tstyle.--components-emptyState-illustration-foreground-bottom-left=\"url({{ bottomLeftForeground() }})\"\n\tstyle.--components-emptyState-illustration-background-top-right=\"url({{ topRightBackground() }})\"\n\tstyle.--components-emptyState-illustration-foreground-top-right=\"url({{ topRightForeground() }})\"\n>\n\t<div class=\"emptyState-container\">\n\t\t<div class=\"emptyState-content\">\n\t\t\t@if (icon()) {\n\t\t\t\t<div class=\"emptyState-content-icon\" aria-hidden=\"true\" [innerHtml]=\"icon() | luSafeExternalSvg\"></div>\n\t\t\t}\n\t\t\t<div class=\"emptyState-content-text\">\n\t\t\t\t@if (slotTop()) {\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<ng-container *luPortal=\"slotTop()\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (heading()) {\n\t\t\t\t\t<div role=\"heading\" [attr.aria-level]=\"hx()\" class=\"emptyState-content-heading\">{{ heading() }}</div>\n\t\t\t\t}\n\t\t\t\t@if (description()) {\n\t\t\t\t\t<p class=\"emptyState-content-description\">\n\t\t\t\t\t\t<ng-container *luPortal=\"description()\" />\n\t\t\t\t\t</p>\n\t\t\t\t}\n\t\t\t\t<div class=\"emptyState-actions\">\n\t\t\t\t\t<ng-content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n", styles: ["@layer components{.emptyState{--components-emptyState-container-maxWidth: calc(100vw - var(--commons-navSide-width) - 7rem);--components-emptyState-container-left: calc(var(--commons-navSide-width) + 3.5rem);--components-emptyState-background-color: var(--pr-t-elevation-surface-default);--components-emptyState-illustration-top-right-offset-left: min( calc(100% + 5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--components-emptyState-illustration-top-right-offset-left-S: min( calc(100% + 3.5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--background-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg);--foreground-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg);--background-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg);--foreground-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg);--components-emptyState-illustration-background-bottom-left: var(--background-left-01);--components-emptyState-illustration-foreground-bottom-left: var(--foreground-left-01);--components-emptyState-illustration-background-top-right: var(--background-right-01);--components-emptyState-illustration-foreground-top-right: var(--foreground-right-01);display:flex;flex-direction:column;flex-grow:1;padding:var(--pr-t-spacings-200)}.emptyState-container{align-items:center;display:flex;flex-grow:1;justify-content:center;max-inline-size:var(--components-emptyState-container-maxWidth);inset-inline-start:var(--components-emptyState-container-left);padding:0;inline-size:100%;position:sticky}.container .emptyState-container{--components-emptyState-container-maxWidth: none;--components-emptyState-container-left: auto}.emptyState-content{border-radius:var(--pr-t-border-radius-structure);max-inline-size:100%;padding:var(--pr-t-spacings-50);inline-size:calc(25rem + var(--pr-t-spacings-50) * 2)}.emptyState-content-icon{--components-emptyState-icon-background-color: var(--palettes-100, var(--palettes-product-100));--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600));display:inline-flex;margin-block-end:var(--pr-t-spacings-200)}.emptyState-content-text{padding-inline:var(--pr-t-spacings-50)}.emptyState-content-heading{font:var(--pr-t-font-heading-3);margin-block-end:var(--pr-t-spacings-50)}.emptyState-content-description{margin:0}.emptyState-actions{display:flex;flex-wrap:wrap;align-items:center;margin-block-start:var(--pr-t-spacings-200);gap:var(--pr-t-spacings-200)}.emptyState-actions .button{margin:0}.emptyState-actions:empty{display:none}}@layer mods{.emptyState.mod-page{--components-emptyState-container-maxWidth: var(--commons-container-maxWidth);background-image:var(--components-emptyState-illustration-foreground-bottom-left),var(--components-emptyState-illustration-background-bottom-left),var(--components-emptyState-illustration-foreground-top-right),var(--components-emptyState-illustration-background-top-right);background-repeat:no-repeat;background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left),top left var(--components-emptyState-illustration-top-right-offset-left)}@media not all and (min-width: 50em){.emptyState.mod-page{background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left-S),top left var(--components-emptyState-illustration-top-right-offset-left-S);background-size:auto 10.875rem}}.emptyState.mod-page .emptyState-content{background-color:var(--components-emptyState-background-color);box-shadow:0 0 8px 4px var(--components-emptyState-background-color)}.emptyState.mod-page .emptyState-content-text{padding:0}.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-1)}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-2)}}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-actions .button{flex-basis:100%}}.emptyState.mod-center{text-align:center}.emptyState.mod-center .emptyState-actions{justify-content:center}}@layer components{.emptyState-wrapper{display:flex;flex-direction:column;flex-grow:1}}\n"], dependencies: [{ kind: "pipe", type: LuSafeExternalSvgPipe, name: "luSafeExternalSvg" }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: EmptyStatePageComponent, isStandalone: true, selector: "lu-empty-state-page", inputs: { icon: "icon", topRightBackground: "topRightBackground", topRightForeground: "topRightForeground", bottomLeftBackground: "bottomLeftBackground", bottomLeftForeground: "bottomLeftForeground", contentBackgroundColor: "contentBackgroundColor", slotTop: "slotTop", heading: "heading", description: "description", hx: ["hx", "hx", numberAttribute] }, host: { classAttribute: "emptyState-wrapper" }, ngImport: i0, template: "<section\n\tclass=\"emptyState mod-page\"\n\t[attr.role]=\"heading ? null : 'presentation'\"\n\t[style.--components-emptyState-background-color]=\"contentBackgroundColor\"\n\tstyle.--components-emptyState-illustration-background-bottom-left=\"url({{ bottomLeftBackground }})\"\n\tstyle.--components-emptyState-illustration-foreground-bottom-left=\"url({{ bottomLeftForeground }})\"\n\tstyle.--components-emptyState-illustration-background-top-right=\"url({{ topRightBackground }})\"\n\tstyle.--components-emptyState-illustration-foreground-top-right=\"url({{ topRightForeground }})\"\n>\n\t<div class=\"emptyState-container\">\n\t\t<div class=\"emptyState-content\">\n\t\t\t@if (icon) {\n\t\t\t\t<div class=\"emptyState-content-icon\" aria-hidden=\"true\" [innerHtml]=\"icon | luSafeExternalSvg\"></div>\n\t\t\t}\n\t\t\t<div class=\"emptyState-content-text\">\n\t\t\t\t@if (slotTop) {\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<ng-container *luPortal=\"slotTop\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (heading) {\n\t\t\t\t\t<div role=\"heading\" [attr.aria-level]=\"hx\" class=\"emptyState-content-heading\">{{ heading }}</div>\n\t\t\t\t}\n\t\t\t\t@if (description) {\n\t\t\t\t\t<p class=\"emptyState-content-description\">\n\t\t\t\t\t\t<ng-container *luPortal=\"description\" />\n\t\t\t\t\t</p>\n\t\t\t\t}\n\t\t\t\t<div class=\"emptyState-actions\">\n\t\t\t\t\t<ng-content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n", styles: ["@layer components{.emptyState{--components-emptyState-container-maxWidth: calc(100vw - var(--commons-navSide-width) - 7rem);--components-emptyState-container-left: calc(var(--commons-navSide-width) + 3.5rem);--components-emptyState-background-color: var(--pr-t-elevation-surface-default);--components-emptyState-illustration-top-right-offset-left: min( calc(100% + 5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--components-emptyState-illustration-top-right-offset-left-S: min( calc(100% + 3.5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--background-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg);--foreground-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg);--background-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg);--foreground-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg);--components-emptyState-illustration-background-bottom-left: var(--background-left-01);--components-emptyState-illustration-foreground-bottom-left: var(--foreground-left-01);--components-emptyState-illustration-background-top-right: var(--background-right-01);--components-emptyState-illustration-foreground-top-right: var(--foreground-right-01);display:flex;flex-direction:column;flex-grow:1;padding:var(--pr-t-spacings-200)}.emptyState-container{align-items:center;display:flex;flex-grow:1;justify-content:center;max-inline-size:var(--components-emptyState-container-maxWidth);inset-inline-start:var(--components-emptyState-container-left);padding:0;inline-size:100%;position:sticky}.container .emptyState-container{--components-emptyState-container-maxWidth: none;--components-emptyState-container-left: auto}.emptyState-content{border-radius:var(--pr-t-border-radius-structure);max-inline-size:100%;padding:var(--pr-t-spacings-50);inline-size:calc(25rem + var(--pr-t-spacings-50) * 2)}.emptyState-content-icon{--components-emptyState-icon-background-color: var(--palettes-100, var(--palettes-product-100));--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600));display:inline-flex;margin-block-end:var(--pr-t-spacings-200)}.emptyState-content-text{padding-inline:var(--pr-t-spacings-50)}.emptyState-content-heading{font:var(--pr-t-font-heading-3);margin-block-end:var(--pr-t-spacings-50)}.emptyState-content-description{margin:0}.emptyState-actions{display:flex;flex-wrap:wrap;align-items:center;margin-block-start:var(--pr-t-spacings-200);gap:var(--pr-t-spacings-200)}.emptyState-actions .button{margin:0}.emptyState-actions:empty{display:none}}@layer mods{.emptyState.mod-page{--components-emptyState-container-maxWidth: var(--commons-container-maxWidth);background-image:var(--components-emptyState-illustration-foreground-bottom-left),var(--components-emptyState-illustration-background-bottom-left),var(--components-emptyState-illustration-foreground-top-right),var(--components-emptyState-illustration-background-top-right);background-repeat:no-repeat;background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left),top left var(--components-emptyState-illustration-top-right-offset-left)}@media not all and (min-width: 50em){.emptyState.mod-page{background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left-S),top left var(--components-emptyState-illustration-top-right-offset-left-S);background-size:auto 10.875rem}}.emptyState.mod-page .emptyState-content{background-color:var(--components-emptyState-background-color);box-shadow:0 0 8px 4px var(--components-emptyState-background-color)}.emptyState.mod-page .emptyState-content-text{padding:0}.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-1)}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-2)}}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-actions .button{flex-basis:100%}}.emptyState.mod-center{text-align:center}.emptyState.mod-center .emptyState-actions{justify-content:center}}@layer components{.emptyState-wrapper{display:flex;flex-direction:column;flex-grow:1}}\n"], dependencies: [{ kind: "pipe", type: LuSafeExternalSvgPipe, name: "luSafeExternalSvg" }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: EmptyStatePageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-empty-state-page', imports: [LuSafeExternalSvgPipe, PortalDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'emptyState-wrapper',
-                    }, template: "<section\n\tclass=\"emptyState mod-page\"\n\t[attr.role]=\"heading() ? null : 'presentation'\"\n\t[style.--components-emptyState-background-color]=\"contentBackgroundColor()\"\n\tstyle.--components-emptyState-illustration-background-bottom-left=\"url({{ bottomLeftBackground() }})\"\n\tstyle.--components-emptyState-illustration-foreground-bottom-left=\"url({{ bottomLeftForeground() }})\"\n\tstyle.--components-emptyState-illustration-background-top-right=\"url({{ topRightBackground() }})\"\n\tstyle.--components-emptyState-illustration-foreground-top-right=\"url({{ topRightForeground() }})\"\n>\n\t<div class=\"emptyState-container\">\n\t\t<div class=\"emptyState-content\">\n\t\t\t@if (icon()) {\n\t\t\t\t<div class=\"emptyState-content-icon\" aria-hidden=\"true\" [innerHtml]=\"icon() | luSafeExternalSvg\"></div>\n\t\t\t}\n\t\t\t<div class=\"emptyState-content-text\">\n\t\t\t\t@if (slotTop()) {\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<ng-container *luPortal=\"slotTop()\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (heading()) {\n\t\t\t\t\t<div role=\"heading\" [attr.aria-level]=\"hx()\" class=\"emptyState-content-heading\">{{ heading() }}</div>\n\t\t\t\t}\n\t\t\t\t@if (description()) {\n\t\t\t\t\t<p class=\"emptyState-content-description\">\n\t\t\t\t\t\t<ng-container *luPortal=\"description()\" />\n\t\t\t\t\t</p>\n\t\t\t\t}\n\t\t\t\t<div class=\"emptyState-actions\">\n\t\t\t\t\t<ng-content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n", styles: ["@layer components{.emptyState{--components-emptyState-container-maxWidth: calc(100vw - var(--commons-navSide-width) - 7rem);--components-emptyState-container-left: calc(var(--commons-navSide-width) + 3.5rem);--components-emptyState-background-color: var(--pr-t-elevation-surface-default);--components-emptyState-illustration-top-right-offset-left: min( calc(100% + 5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--components-emptyState-illustration-top-right-offset-left-S: min( calc(100% + 3.5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--background-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg);--foreground-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg);--background-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg);--foreground-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg);--components-emptyState-illustration-background-bottom-left: var(--background-left-01);--components-emptyState-illustration-foreground-bottom-left: var(--foreground-left-01);--components-emptyState-illustration-background-top-right: var(--background-right-01);--components-emptyState-illustration-foreground-top-right: var(--foreground-right-01);display:flex;flex-direction:column;flex-grow:1;padding:var(--pr-t-spacings-200)}.emptyState-container{align-items:center;display:flex;flex-grow:1;justify-content:center;max-inline-size:var(--components-emptyState-container-maxWidth);inset-inline-start:var(--components-emptyState-container-left);padding:0;inline-size:100%;position:sticky}.container .emptyState-container{--components-emptyState-container-maxWidth: none;--components-emptyState-container-left: auto}.emptyState-content{border-radius:var(--pr-t-border-radius-structure);max-inline-size:100%;padding:var(--pr-t-spacings-50);inline-size:calc(25rem + var(--pr-t-spacings-50) * 2)}.emptyState-content-icon{--components-emptyState-icon-background-color: var(--palettes-100, var(--palettes-product-100));--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600));display:inline-flex;margin-block-end:var(--pr-t-spacings-200)}.emptyState-content-text{padding-inline:var(--pr-t-spacings-50)}.emptyState-content-heading{font:var(--pr-t-font-heading-3);margin-block-end:var(--pr-t-spacings-50)}.emptyState-content-description{margin:0}.emptyState-actions{display:flex;flex-wrap:wrap;align-items:center;margin-block-start:var(--pr-t-spacings-200);gap:var(--pr-t-spacings-200)}.emptyState-actions .button{margin:0}.emptyState-actions:empty{display:none}}@layer mods{.emptyState.mod-page{--components-emptyState-container-maxWidth: var(--commons-container-maxWidth);background-image:var(--components-emptyState-illustration-foreground-bottom-left),var(--components-emptyState-illustration-background-bottom-left),var(--components-emptyState-illustration-foreground-top-right),var(--components-emptyState-illustration-background-top-right);background-repeat:no-repeat;background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left),top left var(--components-emptyState-illustration-top-right-offset-left)}@media not all and (min-width: 50em){.emptyState.mod-page{background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left-S),top left var(--components-emptyState-illustration-top-right-offset-left-S);background-size:auto 10.875rem}}.emptyState.mod-page .emptyState-content{background-color:var(--components-emptyState-background-color);box-shadow:0 0 8px 4px var(--components-emptyState-background-color)}.emptyState.mod-page .emptyState-content-text{padding:0}.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-1)}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-2)}}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-actions .button{flex-basis:100%}}.emptyState.mod-center{text-align:center}.emptyState.mod-center .emptyState-actions{justify-content:center}}@layer components{.emptyState-wrapper{display:flex;flex-direction:column;flex-grow:1}}\n"] }]
-        }] });
+                    }, template: "<section\n\tclass=\"emptyState mod-page\"\n\t[attr.role]=\"heading ? null : 'presentation'\"\n\t[style.--components-emptyState-background-color]=\"contentBackgroundColor\"\n\tstyle.--components-emptyState-illustration-background-bottom-left=\"url({{ bottomLeftBackground }})\"\n\tstyle.--components-emptyState-illustration-foreground-bottom-left=\"url({{ bottomLeftForeground }})\"\n\tstyle.--components-emptyState-illustration-background-top-right=\"url({{ topRightBackground }})\"\n\tstyle.--components-emptyState-illustration-foreground-top-right=\"url({{ topRightForeground }})\"\n>\n\t<div class=\"emptyState-container\">\n\t\t<div class=\"emptyState-content\">\n\t\t\t@if (icon) {\n\t\t\t\t<div class=\"emptyState-content-icon\" aria-hidden=\"true\" [innerHtml]=\"icon | luSafeExternalSvg\"></div>\n\t\t\t}\n\t\t\t<div class=\"emptyState-content-text\">\n\t\t\t\t@if (slotTop) {\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<ng-container *luPortal=\"slotTop\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (heading) {\n\t\t\t\t\t<div role=\"heading\" [attr.aria-level]=\"hx\" class=\"emptyState-content-heading\">{{ heading }}</div>\n\t\t\t\t}\n\t\t\t\t@if (description) {\n\t\t\t\t\t<p class=\"emptyState-content-description\">\n\t\t\t\t\t\t<ng-container *luPortal=\"description\" />\n\t\t\t\t\t</p>\n\t\t\t\t}\n\t\t\t\t<div class=\"emptyState-actions\">\n\t\t\t\t\t<ng-content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n", styles: ["@layer components{.emptyState{--components-emptyState-container-maxWidth: calc(100vw - var(--commons-navSide-width) - 7rem);--components-emptyState-container-left: calc(var(--commons-navSide-width) + 3.5rem);--components-emptyState-background-color: var(--pr-t-elevation-surface-default);--components-emptyState-illustration-top-right-offset-left: min( calc(100% + 5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--components-emptyState-illustration-top-right-offset-left-S: min( calc(100% + 3.5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--background-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg);--foreground-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg);--background-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg);--foreground-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg);--components-emptyState-illustration-background-bottom-left: var(--background-left-01);--components-emptyState-illustration-foreground-bottom-left: var(--foreground-left-01);--components-emptyState-illustration-background-top-right: var(--background-right-01);--components-emptyState-illustration-foreground-top-right: var(--foreground-right-01);display:flex;flex-direction:column;flex-grow:1;padding:var(--pr-t-spacings-200)}.emptyState-container{align-items:center;display:flex;flex-grow:1;justify-content:center;max-inline-size:var(--components-emptyState-container-maxWidth);inset-inline-start:var(--components-emptyState-container-left);padding:0;inline-size:100%;position:sticky}.container .emptyState-container{--components-emptyState-container-maxWidth: none;--components-emptyState-container-left: auto}.emptyState-content{border-radius:var(--pr-t-border-radius-structure);max-inline-size:100%;padding:var(--pr-t-spacings-50);inline-size:calc(25rem + var(--pr-t-spacings-50) * 2)}.emptyState-content-icon{--components-emptyState-icon-background-color: var(--palettes-100, var(--palettes-product-100));--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600));display:inline-flex;margin-block-end:var(--pr-t-spacings-200)}.emptyState-content-text{padding-inline:var(--pr-t-spacings-50)}.emptyState-content-heading{font:var(--pr-t-font-heading-3);margin-block-end:var(--pr-t-spacings-50)}.emptyState-content-description{margin:0}.emptyState-actions{display:flex;flex-wrap:wrap;align-items:center;margin-block-start:var(--pr-t-spacings-200);gap:var(--pr-t-spacings-200)}.emptyState-actions .button{margin:0}.emptyState-actions:empty{display:none}}@layer mods{.emptyState.mod-page{--components-emptyState-container-maxWidth: var(--commons-container-maxWidth);background-image:var(--components-emptyState-illustration-foreground-bottom-left),var(--components-emptyState-illustration-background-bottom-left),var(--components-emptyState-illustration-foreground-top-right),var(--components-emptyState-illustration-background-top-right);background-repeat:no-repeat;background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left),top left var(--components-emptyState-illustration-top-right-offset-left)}@media not all and (min-width: 50em){.emptyState.mod-page{background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left-S),top left var(--components-emptyState-illustration-top-right-offset-left-S);background-size:auto 10.875rem}}.emptyState.mod-page .emptyState-content{background-color:var(--components-emptyState-background-color);box-shadow:0 0 8px 4px var(--components-emptyState-background-color)}.emptyState.mod-page .emptyState-content-text{padding:0}.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-1)}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-2)}}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-actions .button{flex-basis:100%}}.emptyState.mod-center{text-align:center}.emptyState.mod-center .emptyState-actions{justify-content:center}}@layer components{.emptyState-wrapper{display:flex;flex-direction:column;flex-grow:1}}\n"] }]
+        }], propDecorators: { 
+        /**
+         * Icon image (URL)
+         */
+        icon: [{
+                type: Input
+            }], topRightBackground: [{
+                type: Input
+            }], topRightForeground: [{
+                type: Input
+            }], bottomLeftBackground: [{
+                type: Input
+            }], bottomLeftForeground: [{
+                type: Input
+            }], contentBackgroundColor: [{
+                type: Input
+            }], slotTop: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], hx: [{
+                type: Input,
+                args: [{
+                        transform: numberAttribute,
+                    }]
+            }] } });
 
 class EmptyStateSectionComponent {
     constructor() {
         /**
          * Icon URL
          */
-        this.icon = input('https://cdn.lucca.fr/lucca-front/assets/empty-states/icons/iconBanknote.svg');
-        this.palette = input('none');
-        this.center = input(false, { transform: booleanAttribute });
-        this.heading = input();
-        this.description = input();
-        this.hx = input(3, { transform: numberAttribute });
-        this.emptyStateClasses = computed(() => ({ [`palette-${this.palette()}`]: !!this.palette() }));
+        this.icon = 'https://cdn.lucca.fr/lucca-front/assets/empty-states/icons/iconBanknote.svg';
+        this.palette = 'none';
+        this.center = false;
+        this.hx = 3;
+    }
+    get emptyStateClasses() {
+        return {
+            [`palette-${this.palette}`]: !!this.palette,
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: EmptyStateSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: EmptyStateSectionComponent, isStandalone: true, selector: "lu-empty-state-section", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, hx: { classPropertyName: "hx", publicName: "hx", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"emptyState\" [class.mod-center]=\"center()\" [attr.role]=\"heading() ? null : 'presentation'\">\n\t<div class=\"emptyState-container\">\n\t\t<div class=\"emptyState-content\">\n\t\t\t@if (icon()) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"emptyState-content-icon\"\n\t\t\t\t\t[class]=\"emptyStateClasses()\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t[innerHtml]=\"icon() | luSafeExternalSvg\"\n\t\t\t\t></div>\n\t\t\t}\n\t\t\t<div class=\"emptyState-content-text\">\n\t\t\t\t@if (heading()) {\n\t\t\t\t\t<div role=\"heading\" [attr.aria-level]=\"hx()\" class=\"emptyState-content-heading\">{{ heading() }}</div>\n\t\t\t\t}\n\t\t\t\t@if (description()) {\n\t\t\t\t\t<p class=\"emptyState-content-description\">\n\t\t\t\t\t\t<ng-container *luPortal=\"description()\" />\n\t\t\t\t\t</p>\n\t\t\t\t}\n\t\t\t\t<div class=\"emptyState-actions\">\n\t\t\t\t\t<ng-content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n", styles: ["@layer components{.emptyState{--components-emptyState-container-maxWidth: calc(100vw - var(--commons-navSide-width) - 7rem);--components-emptyState-container-left: calc(var(--commons-navSide-width) + 3.5rem);--components-emptyState-background-color: var(--pr-t-elevation-surface-default);--components-emptyState-illustration-top-right-offset-left: min( calc(100% + 5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--components-emptyState-illustration-top-right-offset-left-S: min( calc(100% + 3.5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--background-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg);--foreground-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg);--background-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg);--foreground-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg);--components-emptyState-illustration-background-bottom-left: var(--background-left-01);--components-emptyState-illustration-foreground-bottom-left: var(--foreground-left-01);--components-emptyState-illustration-background-top-right: var(--background-right-01);--components-emptyState-illustration-foreground-top-right: var(--foreground-right-01);display:flex;flex-direction:column;flex-grow:1;padding:var(--pr-t-spacings-200)}.emptyState-container{align-items:center;display:flex;flex-grow:1;justify-content:center;max-inline-size:var(--components-emptyState-container-maxWidth);inset-inline-start:var(--components-emptyState-container-left);padding:0;inline-size:100%;position:sticky}.container .emptyState-container{--components-emptyState-container-maxWidth: none;--components-emptyState-container-left: auto}.emptyState-content{border-radius:var(--pr-t-border-radius-structure);max-inline-size:100%;padding:var(--pr-t-spacings-50);inline-size:calc(25rem + var(--pr-t-spacings-50) * 2)}.emptyState-content-icon{--components-emptyState-icon-background-color: var(--palettes-100, var(--palettes-product-100));--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600));display:inline-flex;margin-block-end:var(--pr-t-spacings-200)}.emptyState-content-text{padding-inline:var(--pr-t-spacings-50)}.emptyState-content-heading{font:var(--pr-t-font-heading-3);margin-block-end:var(--pr-t-spacings-50)}.emptyState-content-description{margin:0}.emptyState-actions{display:flex;flex-wrap:wrap;align-items:center;margin-block-start:var(--pr-t-spacings-200);gap:var(--pr-t-spacings-200)}.emptyState-actions .button{margin:0}.emptyState-actions:empty{display:none}}@layer mods{.emptyState.mod-page{--components-emptyState-container-maxWidth: var(--commons-container-maxWidth);background-image:var(--components-emptyState-illustration-foreground-bottom-left),var(--components-emptyState-illustration-background-bottom-left),var(--components-emptyState-illustration-foreground-top-right),var(--components-emptyState-illustration-background-top-right);background-repeat:no-repeat;background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left),top left var(--components-emptyState-illustration-top-right-offset-left)}@media not all and (min-width: 50em){.emptyState.mod-page{background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left-S),top left var(--components-emptyState-illustration-top-right-offset-left-S);background-size:auto 10.875rem}}.emptyState.mod-page .emptyState-content{background-color:var(--components-emptyState-background-color);box-shadow:0 0 8px 4px var(--components-emptyState-background-color)}.emptyState.mod-page .emptyState-content-text{padding:0}.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-1)}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-2)}}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-actions .button{flex-basis:100%}}.emptyState.mod-center{text-align:center}.emptyState.mod-center .emptyState-actions{justify-content:center}}@layer base{lu-empty-state-section{inline-size:100%}}\n"], dependencies: [{ kind: "pipe", type: LuSafeExternalSvgPipe, name: "luSafeExternalSvg" }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: EmptyStateSectionComponent, isStandalone: true, selector: "lu-empty-state-section", inputs: { icon: "icon", palette: "palette", center: ["center", "center", booleanAttribute], heading: "heading", description: "description", hx: ["hx", "hx", numberAttribute] }, ngImport: i0, template: "<section class=\"emptyState\" [class.mod-center]=\"center\" [attr.role]=\"heading ? null : 'presentation'\">\n\t<div class=\"emptyState-container\">\n\t\t<div class=\"emptyState-content\">\n\t\t\t@if (icon) {\n\t\t\t\t<div class=\"emptyState-content-icon\" [class]=\"emptyStateClasses\" aria-hidden=\"true\" [innerHtml]=\"icon | luSafeExternalSvg\"></div>\n\t\t\t}\n\t\t\t<div class=\"emptyState-content-text\">\n\t\t\t\t@if (heading) {\n\t\t\t\t\t<div role=\"heading\" [attr.aria-level]=\"hx\" class=\"emptyState-content-heading\">{{ heading }}</div>\n\t\t\t\t}\n\t\t\t\t@if (description) {\n\t\t\t\t\t<p class=\"emptyState-content-description\">\n\t\t\t\t\t\t<ng-container *luPortal=\"description\" />\n\t\t\t\t\t</p>\n\t\t\t\t}\n\t\t\t\t<div class=\"emptyState-actions\">\n\t\t\t\t\t<ng-content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n", styles: ["@layer components{.emptyState{--components-emptyState-container-maxWidth: calc(100vw - var(--commons-navSide-width) - 7rem);--components-emptyState-container-left: calc(var(--commons-navSide-width) + 3.5rem);--components-emptyState-background-color: var(--pr-t-elevation-surface-default);--components-emptyState-illustration-top-right-offset-left: min( calc(100% + 5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--components-emptyState-illustration-top-right-offset-left-S: min( calc(100% + 3.5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--background-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg);--foreground-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg);--background-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg);--foreground-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg);--components-emptyState-illustration-background-bottom-left: var(--background-left-01);--components-emptyState-illustration-foreground-bottom-left: var(--foreground-left-01);--components-emptyState-illustration-background-top-right: var(--background-right-01);--components-emptyState-illustration-foreground-top-right: var(--foreground-right-01);display:flex;flex-direction:column;flex-grow:1;padding:var(--pr-t-spacings-200)}.emptyState-container{align-items:center;display:flex;flex-grow:1;justify-content:center;max-inline-size:var(--components-emptyState-container-maxWidth);inset-inline-start:var(--components-emptyState-container-left);padding:0;inline-size:100%;position:sticky}.container .emptyState-container{--components-emptyState-container-maxWidth: none;--components-emptyState-container-left: auto}.emptyState-content{border-radius:var(--pr-t-border-radius-structure);max-inline-size:100%;padding:var(--pr-t-spacings-50);inline-size:calc(25rem + var(--pr-t-spacings-50) * 2)}.emptyState-content-icon{--components-emptyState-icon-background-color: var(--palettes-100, var(--palettes-product-100));--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600));display:inline-flex;margin-block-end:var(--pr-t-spacings-200)}.emptyState-content-text{padding-inline:var(--pr-t-spacings-50)}.emptyState-content-heading{font:var(--pr-t-font-heading-3);margin-block-end:var(--pr-t-spacings-50)}.emptyState-content-description{margin:0}.emptyState-actions{display:flex;flex-wrap:wrap;align-items:center;margin-block-start:var(--pr-t-spacings-200);gap:var(--pr-t-spacings-200)}.emptyState-actions .button{margin:0}.emptyState-actions:empty{display:none}}@layer mods{.emptyState.mod-page{--components-emptyState-container-maxWidth: var(--commons-container-maxWidth);background-image:var(--components-emptyState-illustration-foreground-bottom-left),var(--components-emptyState-illustration-background-bottom-left),var(--components-emptyState-illustration-foreground-top-right),var(--components-emptyState-illustration-background-top-right);background-repeat:no-repeat;background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left),top left var(--components-emptyState-illustration-top-right-offset-left)}@media not all and (min-width: 50em){.emptyState.mod-page{background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left-S),top left var(--components-emptyState-illustration-top-right-offset-left-S);background-size:auto 10.875rem}}.emptyState.mod-page .emptyState-content{background-color:var(--components-emptyState-background-color);box-shadow:0 0 8px 4px var(--components-emptyState-background-color)}.emptyState.mod-page .emptyState-content-text{padding:0}.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-1)}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-2)}}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-actions .button{flex-basis:100%}}.emptyState.mod-center{text-align:center}.emptyState.mod-center .emptyState-actions{justify-content:center}}@layer base{lu-empty-state-section{inline-size:100%}}\n"], dependencies: [{ kind: "pipe", type: LuSafeExternalSvgPipe, name: "luSafeExternalSvg" }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: EmptyStateSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-empty-state-section', imports: [LuSafeExternalSvgPipe, PortalDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<section class=\"emptyState\" [class.mod-center]=\"center()\" [attr.role]=\"heading() ? null : 'presentation'\">\n\t<div class=\"emptyState-container\">\n\t\t<div class=\"emptyState-content\">\n\t\t\t@if (icon()) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"emptyState-content-icon\"\n\t\t\t\t\t[class]=\"emptyStateClasses()\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t[innerHtml]=\"icon() | luSafeExternalSvg\"\n\t\t\t\t></div>\n\t\t\t}\n\t\t\t<div class=\"emptyState-content-text\">\n\t\t\t\t@if (heading()) {\n\t\t\t\t\t<div role=\"heading\" [attr.aria-level]=\"hx()\" class=\"emptyState-content-heading\">{{ heading() }}</div>\n\t\t\t\t}\n\t\t\t\t@if (description()) {\n\t\t\t\t\t<p class=\"emptyState-content-description\">\n\t\t\t\t\t\t<ng-container *luPortal=\"description()\" />\n\t\t\t\t\t</p>\n\t\t\t\t}\n\t\t\t\t<div class=\"emptyState-actions\">\n\t\t\t\t\t<ng-content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n", styles: ["@layer components{.emptyState{--components-emptyState-container-maxWidth: calc(100vw - var(--commons-navSide-width) - 7rem);--components-emptyState-container-left: calc(var(--commons-navSide-width) + 3.5rem);--components-emptyState-background-color: var(--pr-t-elevation-surface-default);--components-emptyState-illustration-top-right-offset-left: min( calc(100% + 5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--components-emptyState-illustration-top-right-offset-left-S: min( calc(100% + 3.5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--background-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg);--foreground-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg);--background-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg);--foreground-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg);--components-emptyState-illustration-background-bottom-left: var(--background-left-01);--components-emptyState-illustration-foreground-bottom-left: var(--foreground-left-01);--components-emptyState-illustration-background-top-right: var(--background-right-01);--components-emptyState-illustration-foreground-top-right: var(--foreground-right-01);display:flex;flex-direction:column;flex-grow:1;padding:var(--pr-t-spacings-200)}.emptyState-container{align-items:center;display:flex;flex-grow:1;justify-content:center;max-inline-size:var(--components-emptyState-container-maxWidth);inset-inline-start:var(--components-emptyState-container-left);padding:0;inline-size:100%;position:sticky}.container .emptyState-container{--components-emptyState-container-maxWidth: none;--components-emptyState-container-left: auto}.emptyState-content{border-radius:var(--pr-t-border-radius-structure);max-inline-size:100%;padding:var(--pr-t-spacings-50);inline-size:calc(25rem + var(--pr-t-spacings-50) * 2)}.emptyState-content-icon{--components-emptyState-icon-background-color: var(--palettes-100, var(--palettes-product-100));--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600));display:inline-flex;margin-block-end:var(--pr-t-spacings-200)}.emptyState-content-text{padding-inline:var(--pr-t-spacings-50)}.emptyState-content-heading{font:var(--pr-t-font-heading-3);margin-block-end:var(--pr-t-spacings-50)}.emptyState-content-description{margin:0}.emptyState-actions{display:flex;flex-wrap:wrap;align-items:center;margin-block-start:var(--pr-t-spacings-200);gap:var(--pr-t-spacings-200)}.emptyState-actions .button{margin:0}.emptyState-actions:empty{display:none}}@layer mods{.emptyState.mod-page{--components-emptyState-container-maxWidth: var(--commons-container-maxWidth);background-image:var(--components-emptyState-illustration-foreground-bottom-left),var(--components-emptyState-illustration-background-bottom-left),var(--components-emptyState-illustration-foreground-top-right),var(--components-emptyState-illustration-background-top-right);background-repeat:no-repeat;background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left),top left var(--components-emptyState-illustration-top-right-offset-left)}@media not all and (min-width: 50em){.emptyState.mod-page{background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left-S),top left var(--components-emptyState-illustration-top-right-offset-left-S);background-size:auto 10.875rem}}.emptyState.mod-page .emptyState-content{background-color:var(--components-emptyState-background-color);box-shadow:0 0 8px 4px var(--components-emptyState-background-color)}.emptyState.mod-page .emptyState-content-text{padding:0}.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-1)}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-2)}}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-actions .button{flex-basis:100%}}.emptyState.mod-center{text-align:center}.emptyState.mod-center .emptyState-actions{justify-content:center}}@layer base{lu-empty-state-section{inline-size:100%}}\n"] }]
-        }] });
+            args: [{ selector: 'lu-empty-state-section', imports: [LuSafeExternalSvgPipe, PortalDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<section class=\"emptyState\" [class.mod-center]=\"center\" [attr.role]=\"heading ? null : 'presentation'\">\n\t<div class=\"emptyState-container\">\n\t\t<div class=\"emptyState-content\">\n\t\t\t@if (icon) {\n\t\t\t\t<div class=\"emptyState-content-icon\" [class]=\"emptyStateClasses\" aria-hidden=\"true\" [innerHtml]=\"icon | luSafeExternalSvg\"></div>\n\t\t\t}\n\t\t\t<div class=\"emptyState-content-text\">\n\t\t\t\t@if (heading) {\n\t\t\t\t\t<div role=\"heading\" [attr.aria-level]=\"hx\" class=\"emptyState-content-heading\">{{ heading }}</div>\n\t\t\t\t}\n\t\t\t\t@if (description) {\n\t\t\t\t\t<p class=\"emptyState-content-description\">\n\t\t\t\t\t\t<ng-container *luPortal=\"description\" />\n\t\t\t\t\t</p>\n\t\t\t\t}\n\t\t\t\t<div class=\"emptyState-actions\">\n\t\t\t\t\t<ng-content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n", styles: ["@layer components{.emptyState{--components-emptyState-container-maxWidth: calc(100vw - var(--commons-navSide-width) - 7rem);--components-emptyState-container-left: calc(var(--commons-navSide-width) + 3.5rem);--components-emptyState-background-color: var(--pr-t-elevation-surface-default);--components-emptyState-illustration-top-right-offset-left: min( calc(100% + 5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--components-emptyState-illustration-top-right-offset-left-S: min( calc(100% + 3.5rem) , calc(var(--components-emptyState-container-maxWidth) - 8.5rem) );--background-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg);--foreground-left-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg);--background-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg);--foreground-right-01: url(https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg);--components-emptyState-illustration-background-bottom-left: var(--background-left-01);--components-emptyState-illustration-foreground-bottom-left: var(--foreground-left-01);--components-emptyState-illustration-background-top-right: var(--background-right-01);--components-emptyState-illustration-foreground-top-right: var(--foreground-right-01);display:flex;flex-direction:column;flex-grow:1;padding:var(--pr-t-spacings-200)}.emptyState-container{align-items:center;display:flex;flex-grow:1;justify-content:center;max-inline-size:var(--components-emptyState-container-maxWidth);inset-inline-start:var(--components-emptyState-container-left);padding:0;inline-size:100%;position:sticky}.container .emptyState-container{--components-emptyState-container-maxWidth: none;--components-emptyState-container-left: auto}.emptyState-content{border-radius:var(--pr-t-border-radius-structure);max-inline-size:100%;padding:var(--pr-t-spacings-50);inline-size:calc(25rem + var(--pr-t-spacings-50) * 2)}.emptyState-content-icon{--components-emptyState-icon-background-color: var(--palettes-100, var(--palettes-product-100));--components-emptyState-icon-action-color: var(--palettes-600, var(--palettes-brand-600));display:inline-flex;margin-block-end:var(--pr-t-spacings-200)}.emptyState-content-text{padding-inline:var(--pr-t-spacings-50)}.emptyState-content-heading{font:var(--pr-t-font-heading-3);margin-block-end:var(--pr-t-spacings-50)}.emptyState-content-description{margin:0}.emptyState-actions{display:flex;flex-wrap:wrap;align-items:center;margin-block-start:var(--pr-t-spacings-200);gap:var(--pr-t-spacings-200)}.emptyState-actions .button{margin:0}.emptyState-actions:empty{display:none}}@layer mods{.emptyState.mod-page{--components-emptyState-container-maxWidth: var(--commons-container-maxWidth);background-image:var(--components-emptyState-illustration-foreground-bottom-left),var(--components-emptyState-illustration-background-bottom-left),var(--components-emptyState-illustration-foreground-top-right),var(--components-emptyState-illustration-background-top-right);background-repeat:no-repeat;background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left),top left var(--components-emptyState-illustration-top-right-offset-left)}@media not all and (min-width: 50em){.emptyState.mod-page{background-position:bottom left,bottom left,top left var(--components-emptyState-illustration-top-right-offset-left-S),top left var(--components-emptyState-illustration-top-right-offset-left-S);background-size:auto 10.875rem}}.emptyState.mod-page .emptyState-content{background-color:var(--components-emptyState-background-color);box-shadow:0 0 8px 4px var(--components-emptyState-background-color)}.emptyState.mod-page .emptyState-content-text{padding:0}.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-1)}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-content-heading{font:var(--pr-t-font-heading-2)}}@media not all and (min-width: 30em){.emptyState.mod-page .emptyState-actions .button{flex-basis:100%}}.emptyState.mod-center{text-align:center}.emptyState.mod-center .emptyState-actions{justify-content:center}}@layer base{lu-empty-state-section{inline-size:100%}}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], palette: [{
+                type: Input
+            }], center: [{
+                type: Input,
+                args: [{
+                        transform: booleanAttribute,
+                    }]
+            }], heading: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], hx: [{
+                type: Input,
+                args: [{
+                        transform: numberAttribute,
+                    }]
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/lucca-front-ng-empty-state.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lucca-front-ng-empty-state.mjs","sources":["../../../packages/ng/empty-state/empty-state-page/empty-state-page.component.ts","../../../packages/ng/empty-state/empty-state-page/empty-state-page.component.html","../../../packages/ng/empty-state/empty-state-section/empty-state-section.component.ts","../../../packages/ng/empty-state/empty-state-section/empty-state-section.component.html","../../../packages/ng/empty-state/lucca-front-ng-empty-state.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, numberAttribute, ViewEncapsulation } from '@angular/core';\nimport { PortalContent, PortalDirective } from '@lucca-front/ng/core';\nimport { LuSafeExternalSvgPipe } from '@lucca-front/ng/safe-content';\nimport { Hx } from '../empty-state.model';\n\n@Component({\n\tselector: 'lu-empty-state-page',\n\timports: [LuSafeExternalSvgPipe, PortalDirective],\n\ttemplateUrl: './empty-state-page.component.html',\n\tstyleUrl: './empty-state-page.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tencapsulation: ViewEncapsulation.None,\n\thost: {\n\t\tclass: 'emptyState-wrapper',\n\t},\n})\nexport class EmptyStatePageComponent {\n\t/**\n\t * Icon image (URL)\n\t */\n\treadonly icon = input<string | null>(null);\n\n\t/**\n\t * Top right background image (URL)\n\t */\n\treadonly topRightBackground = input<string>('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg');\n\n\t/**\n\t * Top right foreground image (URL)\n\t */\n\n\treadonly topRightForeground = input<string>('https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg');\n\n\t/**\n\t * Bottom left background image (URL)\n\t */\n\treadonly bottomLeftBackground = input<string>('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg');\n\n\t/**\n\t * Bottom left foreground image (URL)\n\t */\n\treadonly bottomLeftForeground = input<string>('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg');\n\n\t/**\n\t * Background color for content (text)\n\t */\n\treadonly contentBackgroundColor = input<string>('var(--pr-t-elevation-surface-default)');\n\n\treadonly slotTop = input<PortalContent>();\n\n\treadonly heading = input<string>();\n\n\treadonly description = input<PortalContent>();\n\n\treadonly hx = input(1, { transform: numberAttribute as (value: Hx | `${Hx}`) => Hx });\n}\n","<section\n\tclass=\"emptyState mod-page\"\n\t[attr.role]=\"heading() ? null : 'presentation'\"\n\t[style.--components-emptyState-background-color]=\"contentBackgroundColor()\"\n\tstyle.--components-emptyState-illustration-background-bottom-left=\"url({{ bottomLeftBackground() }})\"\n\tstyle.--components-emptyState-illustration-foreground-bottom-left=\"url({{ bottomLeftForeground() }})\"\n\tstyle.--components-emptyState-illustration-background-top-right=\"url({{ topRightBackground() }})\"\n\tstyle.--components-emptyState-illustration-foreground-top-right=\"url({{ topRightForeground() }})\"\n>\n\t<div class=\"emptyState-container\">\n\t\t<div class=\"emptyState-content\">\n\t\t\t@if (icon()) {\n\t\t\t\t<div class=\"emptyState-content-icon\" aria-hidden=\"true\" [innerHtml]=\"icon() | luSafeExternalSvg\"></div>\n\t\t\t}\n\t\t\t<div class=\"emptyState-content-text\">\n\t\t\t\t@if (slotTop()) {\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<ng-container *luPortal=\"slotTop()\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (heading()) {\n\t\t\t\t\t<div role=\"heading\" [attr.aria-level]=\"hx()\" class=\"emptyState-content-heading\">{{ heading() }}</div>\n\t\t\t\t}\n\t\t\t\t@if (description()) {\n\t\t\t\t\t<p class=\"emptyState-content-description\">\n\t\t\t\t\t\t<ng-container *luPortal=\"description()\" />\n\t\t\t\t\t</p>\n\t\t\t\t}\n\t\t\t\t<div class=\"emptyState-actions\">\n\t\t\t\t\t<ng-content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, computed, input, numberAttribute } from '@angular/core';\nimport { Palette, PortalContent, PortalDirective } from '@lucca-front/ng/core';\nimport { LuSafeExternalSvgPipe } from '@lucca-front/ng/safe-content';\nimport { Hx } from '../empty-state.model';\n\n@Component({\n\tselector: 'lu-empty-state-section',\n\timports: [LuSafeExternalSvgPipe, PortalDirective],\n\ttemplateUrl: './empty-state-section.component.html',\n\tstyleUrl: './empty-state-section.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tencapsulation: ViewEncapsulation.None,\n})\nexport class EmptyStateSectionComponent {\n\t/**\n\t * Icon URL\n\t */\n\treadonly icon = input<string>('https://cdn.lucca.fr/lucca-front/assets/empty-states/icons/iconBanknote.svg');\n\n\treadonly palette = input<Palette>('none');\n\n\treadonly center = input(false, { transform: booleanAttribute });\n\n\treadonly heading = input<string>();\n\n\treadonly description = input<PortalContent>();\n\n\treadonly hx = input(3, { transform: numberAttribute as (value: Hx | `${Hx}`) => Hx });\n\n\treadonly emptyStateClasses = computed(() => ({ [`palette-${this.palette()}`]: !!this.palette() }));\n}\n","<section class=\"emptyState\" [class.mod-center]=\"center()\" [attr.role]=\"heading() ? null : 'presentation'\">\n\t<div class=\"emptyState-container\">\n\t\t<div class=\"emptyState-content\">\n\t\t\t@if (icon()) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"emptyState-content-icon\"\n\t\t\t\t\t[class]=\"emptyStateClasses()\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t[innerHtml]=\"icon() | luSafeExternalSvg\"\n\t\t\t\t></div>\n\t\t\t}\n\t\t\t<div class=\"emptyState-content-text\">\n\t\t\t\t@if (heading()) {\n\t\t\t\t\t<div role=\"heading\" [attr.aria-level]=\"hx()\" class=\"emptyState-content-heading\">{{ heading() }}</div>\n\t\t\t\t}\n\t\t\t\t@if (description()) {\n\t\t\t\t\t<p class=\"emptyState-content-description\">\n\t\t\t\t\t\t<ng-container *luPortal=\"description()\" />\n\t\t\t\t\t</p>\n\t\t\t\t}\n\t\t\t\t<div class=\"emptyState-actions\">\n\t\t\t\t\t<ng-content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"lucca-front-ng-empty-state.mjs","sources":["../../../packages/ng/empty-state/empty-state-page/empty-state-page.component.ts","../../../packages/ng/empty-state/empty-state-page/empty-state-page.component.html","../../../packages/ng/empty-state/empty-state-section/empty-state-section.component.ts","../../../packages/ng/empty-state/empty-state-section/empty-state-section.component.html","../../../packages/ng/empty-state/lucca-front-ng-empty-state.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, numberAttribute, ViewEncapsulation } from '@angular/core';\nimport { PortalContent, PortalDirective } from '@lucca-front/ng/core';\nimport { LuSafeExternalSvgPipe } from '@lucca-front/ng/safe-content';\nimport { Hx } from '../empty-state.model';\n\n@Component({\n\tselector: 'lu-empty-state-page',\n\timports: [LuSafeExternalSvgPipe, PortalDirective],\n\ttemplateUrl: './empty-state-page.component.html',\n\tstyleUrl: './empty-state-page.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tencapsulation: ViewEncapsulation.None,\n\thost: {\n\t\tclass: 'emptyState-wrapper',\n\t},\n})\nexport class EmptyStatePageComponent {\n\t@Input()\n\n\t/**\n\t * Icon image (URL)\n\t */\n\ticon = null;\n\n\t/**\n\t * Top right background image (URL)\n\t */\n\t@Input()\n\ttopRightBackground = 'https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg';\n\n\t/**\n\t * Top right foreground image (URL)\n\t */\n\t@Input()\n\ttopRightForeground = 'https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg';\n\n\t/**\n\t * Bottom left background image (URL)\n\t */\n\t@Input()\n\tbottomLeftBackground = 'https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg';\n\n\t/**\n\t * Bottom left foreground image (URL)\n\t */\n\t@Input()\n\tbottomLeftForeground = 'https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg';\n\n\t/**\n\t * Background color for content (text)\n\t */\n\t@Input()\n\tcontentBackgroundColor = 'var(--pr-t-elevation-surface-default)';\n\n\t@Input()\n\tslotTop: PortalContent;\n\n\t@Input()\n\theading: string;\n\n\t@Input()\n\tdescription: PortalContent;\n\n\t@Input({\n\t\ttransform: numberAttribute as (value: Hx | `${Hx}`) => Hx,\n\t})\n\thx: Hx = 1;\n}\n","<section\n\tclass=\"emptyState mod-page\"\n\t[attr.role]=\"heading ? null : 'presentation'\"\n\t[style.--components-emptyState-background-color]=\"contentBackgroundColor\"\n\tstyle.--components-emptyState-illustration-background-bottom-left=\"url({{ bottomLeftBackground }})\"\n\tstyle.--components-emptyState-illustration-foreground-bottom-left=\"url({{ bottomLeftForeground }})\"\n\tstyle.--components-emptyState-illustration-background-top-right=\"url({{ topRightBackground }})\"\n\tstyle.--components-emptyState-illustration-foreground-top-right=\"url({{ topRightForeground }})\"\n>\n\t<div class=\"emptyState-container\">\n\t\t<div class=\"emptyState-content\">\n\t\t\t@if (icon) {\n\t\t\t\t<div class=\"emptyState-content-icon\" aria-hidden=\"true\" [innerHtml]=\"icon | luSafeExternalSvg\"></div>\n\t\t\t}\n\t\t\t<div class=\"emptyState-content-text\">\n\t\t\t\t@if (slotTop) {\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<ng-container *luPortal=\"slotTop\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (heading) {\n\t\t\t\t\t<div role=\"heading\" [attr.aria-level]=\"hx\" class=\"emptyState-content-heading\">{{ heading }}</div>\n\t\t\t\t}\n\t\t\t\t@if (description) {\n\t\t\t\t\t<p class=\"emptyState-content-description\">\n\t\t\t\t\t\t<ng-container *luPortal=\"description\" />\n\t\t\t\t\t</p>\n\t\t\t\t}\n\t\t\t\t<div class=\"emptyState-actions\">\n\t\t\t\t\t<ng-content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n","import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, booleanAttribute, numberAttribute } from '@angular/core';\nimport { Palette, PortalContent, PortalDirective } from '@lucca-front/ng/core';\nimport { LuSafeExternalSvgPipe } from '@lucca-front/ng/safe-content';\nimport { Hx } from '../empty-state.model';\n\n@Component({\n\tselector: 'lu-empty-state-section',\n\timports: [LuSafeExternalSvgPipe, PortalDirective],\n\ttemplateUrl: './empty-state-section.component.html',\n\tstyleUrl: './empty-state-section.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tencapsulation: ViewEncapsulation.None,\n})\nexport class EmptyStateSectionComponent {\n\t/**\n\t * Icon URL\n\t */\n\t@Input()\n\ticon = 'https://cdn.lucca.fr/lucca-front/assets/empty-states/icons/iconBanknote.svg';\n\n\t@Input()\n\tpalette: Palette = 'none';\n\n\t@Input({\n\t\ttransform: booleanAttribute,\n\t})\n\tcenter = false;\n\n\t@Input()\n\theading: string;\n\n\t@Input()\n\tdescription: PortalContent;\n\n\t@Input({\n\t\ttransform: numberAttribute as (value: Hx | `${Hx}`) => Hx,\n\t})\n\thx: Hx = 3;\n\n\tget emptyStateClasses() {\n\t\treturn {\n\t\t\t[`palette-${this.palette}`]: !!this.palette,\n\t\t};\n\t}\n}\n","<section class=\"emptyState\" [class.mod-center]=\"center\" [attr.role]=\"heading ? null : 'presentation'\">\n\t<div class=\"emptyState-container\">\n\t\t<div class=\"emptyState-content\">\n\t\t\t@if (icon) {\n\t\t\t\t<div class=\"emptyState-content-icon\" [class]=\"emptyStateClasses\" aria-hidden=\"true\" [innerHtml]=\"icon | luSafeExternalSvg\"></div>\n\t\t\t}\n\t\t\t<div class=\"emptyState-content-text\">\n\t\t\t\t@if (heading) {\n\t\t\t\t\t<div role=\"heading\" [attr.aria-level]=\"hx\" class=\"emptyState-content-heading\">{{ heading }}</div>\n\t\t\t\t}\n\t\t\t\t@if (description) {\n\t\t\t\t\t<p class=\"emptyState-content-description\">\n\t\t\t\t\t\t<ng-container *luPortal=\"description\" />\n\t\t\t\t\t</p>\n\t\t\t\t}\n\t\t\t\t<div class=\"emptyState-actions\">\n\t\t\t\t\t<ng-content />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/lucca-front-ng-fancy-box.mjs

@@ -1,32 +1,46 @@
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, HostBinding, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 
 class FancyBoxComponent {
     constructor() {
-        this.foreground = input();
-        this.backgroundLeft = input.required();
-        this.backgroundRight = input.required();
         this.size = input(null);
-        this.foregroundStyle = computed(() => this.buildUrl(this.foreground()));
-        this.backgroundLeftStyle = computed(() => this.buildUrl(this.backgroundLeft()));
-        this.backgroundRightStyle = computed(() => this.buildUrl(this.backgroundRight()));
     }
-    buildUrl(text) {
-        return text ? `url(${text})` : ``;
+    get foregroundStyle() {
+        return this.foreground ? `url(${this.foreground})` : ``;
+    }
+    get backgroundLeftStyle() {
+        return this.backgroundLeft ? `url(${this.backgroundLeft})` : ``;
+    }
+    get backgroundRightStyle() {
+        return this.backgroundRight ? `url(${this.backgroundRight})` : ``;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: FancyBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", type: FancyBoxComponent, isStandalone: true, selector: "lu-fancy-box", inputs: { foreground: { classPropertyName: "foreground", publicName: "foreground", isSignal: true, isRequired: false, transformFunction: null }, backgroundLeft: { classPropertyName: "backgroundLeft", publicName: "backgroundLeft", isSignal: true, isRequired: true, transformFunction: null }, backgroundRight: { classPropertyName: "backgroundRight", publicName: "backgroundRight", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mod-S": "size() === \"S\"", "style.--components-fancyBox-foreground": "foregroundStyle()", "style.--components-fancyBox-background-left": "backgroundLeftStyle()", "style.--components-fancyBox-background-right": "backgroundRightStyle()" }, classAttribute: "fancyBox" }, ngImport: i0, template: "<div class=\"fancyBox-content\">\n\t<ng-content />\n\t<div class=\"fancyBox-content-foreground\"></div>\n</div>\n", styles: ["@layer components{.fancyBox{--components-fancyBox-paddingInline: var(--pr-t-spacings-200);--components-fancyBox-marginInline: auto;--components-fancyBox-contentMinBlockSize: 11.25rem;--components-fancyBox-contentMinInlineSize: min(22rem, 100%);--components-fancyBox-contentPaddingBlock: var(--pr-t-spacings-300);--components-fancyBox-contentPaddingInline: var(--pr-t-spacings-700);--components-fancyBox-background-left: none;--components-fancyBox-background-right: none;--components-fancyBox-foreground: none;--components-fancyBox-imageWidth: 12.5rem;--components-fancyBox-imageHeight: 10rem;--components-fancyBox-offsetInline: -10rem;--components-fancyBox-offsetBlock: -1.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-inline:var(--components-fancyBox-paddingInline);margin-inline:var(--components-fancyBox-marginInline);contain:layout}.fancyBox-content{position:relative;min-block-size:var(--components-fancyBox-contentMinBlockSize);min-inline-size:var(--components-fancyBox-contentMinInlineSize);max-inline-size:100%;padding-block:var(--components-fancyBox-contentPaddingBlock);padding-inline:var(--components-fancyBox-contentPaddingInline);background-color:var(--pr-t-elevation-surface-raised);border-radius:var(--pr-t-border-radius-structure);flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.fancyBox-content:before,.fancyBox-content:after{content:\"\";z-index:-1;position:absolute;inline-size:var(--components-fancyBox-imageWidth);block-size:var(--components-fancyBox-imageHeight);background-repeat:no-repeat;background-size:contain;transition-duration:var(--commons-animations-durations-slow);pointer-events:none}.fancyBox-content:before{transition-property:width,height,bottom,left;inset-block-end:var(--components-fancyBox-offsetBlock);inset-inline-start:var(--components-fancyBox-offsetInline);background-image:var(--components-fancyBox-background-left)}.fancyBox-content:after{transition-property:width,height,top,right;inset-block-start:var(--components-fancyBox-offsetBlock);inset-inline-end:var(--components-fancyBox-offsetInline);background-image:var(--components-fancyBox-background-right)}.fancyBox-content-foreground{position:absolute;inline-size:var(--components-fancyBox-imageWidth);block-size:var(--components-fancyBox-imageHeight);background-repeat:no-repeat;inset-block-start:var(--components-fancyBox-offsetBlock);inset-inline-end:var(--components-fancyBox-offsetInline);background-image:var(--components-fancyBox-foreground);background-size:contain;transition-property:width,height,top,right;transition-duration:var(--commons-animations-durations-slow);pointer-events:none}}@layer mods{@media not all and (min-width: 40em){.fancyBox{--components-fancyBox-imageWidth: 11.25rem;--components-fancyBox-imageHeight: 9rem;--components-fancyBox-offsetInline: -8.75rem;--components-fancyBox-offsetBlock: -.5rem}}}.fancyBox.mod-S{--components-fancyBox-contentMinBlockSize: 9.75rem;--components-fancyBox-offsetInline: -9rem;--components-fancyBox-offsetBlock: -.75rem;--components-fancyBox-imageWidth: 9.375rem;--components-fancyBox-imageHeight: 7.5rem;--components-fancyBox-contentMinInlineSize: min(17rem, 100%);--components-fancyBox-contentPaddingBlock: var(--pr-t-spacings-150);--components-fancyBox-contentPaddingInline: var(--pr-t-spacings-200)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", type: FancyBoxComponent, isStandalone: true, selector: "lu-fancy-box", inputs: { foreground: { classPropertyName: "foreground", publicName: "foreground", isSignal: false, isRequired: false, transformFunction: null }, backgroundLeft: { classPropertyName: "backgroundLeft", publicName: "backgroundLeft", isSignal: false, isRequired: true, transformFunction: null }, backgroundRight: { classPropertyName: "backgroundRight", publicName: "backgroundRight", isSignal: false, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mod-S": "size() === \"S\"", "style.--components-fancyBox-foreground": "this.foregroundStyle", "style.--components-fancyBox-background-left": "this.backgroundLeftStyle", "style.--components-fancyBox-background-right": "this.backgroundRightStyle" }, classAttribute: "fancyBox" }, ngImport: i0, template: "<div class=\"fancyBox-content\">\n\t<ng-content />\n\t<div class=\"fancyBox-content-foreground\"></div>\n</div>\n", styles: ["@layer components{.fancyBox{--components-fancyBox-paddingInline: var(--pr-t-spacings-200);--components-fancyBox-marginInline: auto;--components-fancyBox-contentMinBlockSize: 11.25rem;--components-fancyBox-contentMinInlineSize: min(22rem, 100%);--components-fancyBox-contentPaddingBlock: var(--pr-t-spacings-300);--components-fancyBox-contentPaddingInline: var(--pr-t-spacings-700);--components-fancyBox-background-left: none;--components-fancyBox-background-right: none;--components-fancyBox-foreground: none;--components-fancyBox-imageWidth: 12.5rem;--components-fancyBox-imageHeight: 10rem;--components-fancyBox-offsetInline: -10rem;--components-fancyBox-offsetBlock: -1.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-inline:var(--components-fancyBox-paddingInline);margin-inline:var(--components-fancyBox-marginInline);contain:layout}.fancyBox-content{position:relative;min-block-size:var(--components-fancyBox-contentMinBlockSize);min-inline-size:var(--components-fancyBox-contentMinInlineSize);max-inline-size:100%;padding-block:var(--components-fancyBox-contentPaddingBlock);padding-inline:var(--components-fancyBox-contentPaddingInline);background-color:var(--pr-t-elevation-surface-raised);border-radius:var(--pr-t-border-radius-structure);flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.fancyBox-content:before,.fancyBox-content:after{content:\"\";z-index:-1;position:absolute;inline-size:var(--components-fancyBox-imageWidth);block-size:var(--components-fancyBox-imageHeight);background-repeat:no-repeat;background-size:contain;transition-duration:var(--commons-animations-durations-slow);pointer-events:none}.fancyBox-content:before{transition-property:width,height,bottom,left;inset-block-end:var(--components-fancyBox-offsetBlock);inset-inline-start:var(--components-fancyBox-offsetInline);background-image:var(--components-fancyBox-background-left)}.fancyBox-content:after{transition-property:width,height,top,right;inset-block-start:var(--components-fancyBox-offsetBlock);inset-inline-end:var(--components-fancyBox-offsetInline);background-image:var(--components-fancyBox-background-right)}.fancyBox-content-foreground{position:absolute;inline-size:var(--components-fancyBox-imageWidth);block-size:var(--components-fancyBox-imageHeight);background-repeat:no-repeat;inset-block-start:var(--components-fancyBox-offsetBlock);inset-inline-end:var(--components-fancyBox-offsetInline);background-image:var(--components-fancyBox-foreground);background-size:contain;transition-property:width,height,top,right;transition-duration:var(--commons-animations-durations-slow);pointer-events:none}}@layer mods{@media not all and (min-width: 40em){.fancyBox{--components-fancyBox-imageWidth: 11.25rem;--components-fancyBox-imageHeight: 9rem;--components-fancyBox-offsetInline: -8.75rem;--components-fancyBox-offsetBlock: -.5rem}}}.fancyBox.mod-S{--components-fancyBox-contentMinBlockSize: 9.75rem;--components-fancyBox-offsetInline: -9rem;--components-fancyBox-offsetBlock: -.75rem;--components-fancyBox-imageWidth: 9.375rem;--components-fancyBox-imageHeight: 7.5rem;--components-fancyBox-contentMinInlineSize: min(17rem, 100%);--components-fancyBox-contentPaddingBlock: var(--pr-t-spacings-150);--components-fancyBox-contentPaddingInline: var(--pr-t-spacings-200)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: FancyBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-fancy-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'fancyBox',
                         '[class.mod-S]': 'size() === "S"',
-                        '[style.--components-fancyBox-foreground]': 'foregroundStyle()',
-                        '[style.--components-fancyBox-background-left]': 'backgroundLeftStyle()',
-                        '[style.--components-fancyBox-background-right]': 'backgroundRightStyle()',
                     }, template: "<div class=\"fancyBox-content\">\n\t<ng-content />\n\t<div class=\"fancyBox-content-foreground\"></div>\n</div>\n", styles: ["@layer components{.fancyBox{--components-fancyBox-paddingInline: var(--pr-t-spacings-200);--components-fancyBox-marginInline: auto;--components-fancyBox-contentMinBlockSize: 11.25rem;--components-fancyBox-contentMinInlineSize: min(22rem, 100%);--components-fancyBox-contentPaddingBlock: var(--pr-t-spacings-300);--components-fancyBox-contentPaddingInline: var(--pr-t-spacings-700);--components-fancyBox-background-left: none;--components-fancyBox-background-right: none;--components-fancyBox-foreground: none;--components-fancyBox-imageWidth: 12.5rem;--components-fancyBox-imageHeight: 10rem;--components-fancyBox-offsetInline: -10rem;--components-fancyBox-offsetBlock: -1.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-inline:var(--components-fancyBox-paddingInline);margin-inline:var(--components-fancyBox-marginInline);contain:layout}.fancyBox-content{position:relative;min-block-size:var(--components-fancyBox-contentMinBlockSize);min-inline-size:var(--components-fancyBox-contentMinInlineSize);max-inline-size:100%;padding-block:var(--components-fancyBox-contentPaddingBlock);padding-inline:var(--components-fancyBox-contentPaddingInline);background-color:var(--pr-t-elevation-surface-raised);border-radius:var(--pr-t-border-radius-structure);flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.fancyBox-content:before,.fancyBox-content:after{content:\"\";z-index:-1;position:absolute;inline-size:var(--components-fancyBox-imageWidth);block-size:var(--components-fancyBox-imageHeight);background-repeat:no-repeat;background-size:contain;transition-duration:var(--commons-animations-durations-slow);pointer-events:none}.fancyBox-content:before{transition-property:width,height,bottom,left;inset-block-end:var(--components-fancyBox-offsetBlock);inset-inline-start:var(--components-fancyBox-offsetInline);background-image:var(--components-fancyBox-background-left)}.fancyBox-content:after{transition-property:width,height,top,right;inset-block-start:var(--components-fancyBox-offsetBlock);inset-inline-end:var(--components-fancyBox-offsetInline);background-image:var(--components-fancyBox-background-right)}.fancyBox-content-foreground{position:absolute;inline-size:var(--components-fancyBox-imageWidth);block-size:var(--components-fancyBox-imageHeight);background-repeat:no-repeat;inset-block-start:var(--components-fancyBox-offsetBlock);inset-inline-end:var(--components-fancyBox-offsetInline);background-image:var(--components-fancyBox-foreground);background-size:contain;transition-property:width,height,top,right;transition-duration:var(--commons-animations-durations-slow);pointer-events:none}}@layer mods{@media not all and (min-width: 40em){.fancyBox{--components-fancyBox-imageWidth: 11.25rem;--components-fancyBox-imageHeight: 9rem;--components-fancyBox-offsetInline: -8.75rem;--components-fancyBox-offsetBlock: -.5rem}}}.fancyBox.mod-S{--components-fancyBox-contentMinBlockSize: 9.75rem;--components-fancyBox-offsetInline: -9rem;--components-fancyBox-offsetBlock: -.75rem;--components-fancyBox-imageWidth: 9.375rem;--components-fancyBox-imageHeight: 7.5rem;--components-fancyBox-contentMinInlineSize: min(17rem, 100%);--components-fancyBox-contentPaddingBlock: var(--pr-t-spacings-150);--components-fancyBox-contentPaddingInline: var(--pr-t-spacings-200)}\n"] }]
-        }] });
+        }], propDecorators: { foreground: [{
+                type: Input
+            }], foregroundStyle: [{
+                type: HostBinding,
+                args: ['style.--components-fancyBox-foreground']
+            }], backgroundLeft: [{
+                type: Input,
+                args: [{ required: true }]
+            }], backgroundLeftStyle: [{
+                type: HostBinding,
+                args: ['style.--components-fancyBox-background-left']
+            }], backgroundRight: [{
+                type: Input,
+                args: [{ required: true }]
+            }], backgroundRightStyle: [{
+                type: HostBinding,
+                args: ['style.--components-fancyBox-background-right']
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/lucca-front-ng-fancy-box.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lucca-front-ng-fancy-box.mjs","sources":["../../../packages/ng/fancy-box/fancy-box.component.ts","../../../packages/ng/fancy-box/fancy-box.component.html","../../../packages/ng/fancy-box/lucca-front-ng-fancy-box.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\n\n@Component({\n\tselector: 'lu-fancy-box',\n\ttemplateUrl: './fancy-box.component.html',\n\tstyleUrl: './fancy-box.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tencapsulation: ViewEncapsulation.None,\n\thost: {\n\t\tclass: 'fancyBox',\n\t\t'[class.mod-S]': 'size() === \"S\"',\n\t\t'[style.--components-fancyBox-foreground]': 'foregroundStyle()',\n\t\t'[style.--components-fancyBox-background-left]': 'backgroundLeftStyle()',\n\t\t'[style.--components-fancyBox-background-right]': 'backgroundRightStyle()',\n\t},\n})\nexport class FancyBoxComponent {\n\treadonly foreground = input<string>();\n\n\treadonly backgroundLeft = input.required<string>();\n\n\treadonly backgroundRight = input.required<string>();\n\n\treadonly size = input<null | 'S'>(null);\n\n\treadonly foregroundStyle = computed(() => this.buildUrl(this.foreground()));\n\treadonly backgroundLeftStyle = computed(() => this.buildUrl(this.backgroundLeft()));\n\treadonly backgroundRightStyle = computed(() => this.buildUrl(this.backgroundRight()));\n\n\tbuildUrl(text: string) {\n\t\treturn text ? `url(${text})` : ``;\n\t}\n}\n","<div class=\"fancyBox-content\">\n\t<ng-content />\n\t<div class=\"fancyBox-content-foreground\"></div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAgBa,iBAAiB,CAAA;AAd9B,IAAA,WAAA,GAAA;QAeU,IAAU,CAAA,UAAA,GAAG,KAAK,EAAU;AAE5B,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAC,QAAQ,EAAU;AAEzC,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAC,QAAQ,EAAU;AAE1C,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAa,IAAI,CAAC;AAE9B,QAAA,IAAA,CAAA,eAAe,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;AAClE,QAAA,IAAA,CAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;AAC1E,QAAA,IAAA,CAAA,oBAAoB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;AAKrF;AAHA,IAAA,QAAQ,CAAC,IAAY,EAAA;QACpB,OAAO,IAAI,GAAG,CAAA,IAAA,EAAO,IAAI,CAAA,CAAA,CAAG,GAAG,CAAA,CAAE;;8GAdtB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,i6BChB9B,mHAIA,EAAA,MAAA,EAAA,CAAA,yxGAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDYa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAd7B,SAAS;+BACC,cAAc,EAAA,eAAA,EAGP,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAC/B,IAAA,EAAA;AACL,wBAAA,KAAK,EAAE,UAAU;AACjB,wBAAA,eAAe,EAAE,gBAAgB;AACjC,wBAAA,0CAA0C,EAAE,mBAAmB;AAC/D,wBAAA,+CAA+C,EAAE,uBAAuB;AACxE,wBAAA,gDAAgD,EAAE,wBAAwB;AAC1E,qBAAA,EAAA,QAAA,EAAA,mHAAA,EAAA,MAAA,EAAA,CAAA,yxGAAA,CAAA,EAAA;;;AEdF;;AAEG;;;;"}
+{"version":3,"file":"lucca-front-ng-fancy-box.mjs","sources":["../../../packages/ng/fancy-box/fancy-box.component.ts","../../../packages/ng/fancy-box/fancy-box.component.html","../../../packages/ng/fancy-box/lucca-front-ng-fancy-box.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, input, Input, ViewEncapsulation } from '@angular/core';\n\n@Component({\n\tselector: 'lu-fancy-box',\n\ttemplateUrl: './fancy-box.component.html',\n\tstyleUrl: './fancy-box.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tencapsulation: ViewEncapsulation.None,\n\thost: {\n\t\tclass: 'fancyBox',\n\t\t'[class.mod-S]': 'size() === \"S\"',\n\t},\n})\nexport class FancyBoxComponent {\n\t@Input()\n\tforeground?: string;\n\t@HostBinding('style.--components-fancyBox-foreground')\n\tget foregroundStyle(): string {\n\t\treturn this.foreground ? `url(${this.foreground})` : ``;\n\t}\n\n\t@Input({ required: true })\n\tbackgroundLeft: string;\n\t@HostBinding('style.--components-fancyBox-background-left')\n\tget backgroundLeftStyle(): string {\n\t\treturn this.backgroundLeft ? `url(${this.backgroundLeft})` : ``;\n\t}\n\n\t@Input({ required: true })\n\tbackgroundRight: string;\n\t@HostBinding('style.--components-fancyBox-background-right')\n\tget backgroundRightStyle(): string {\n\t\treturn this.backgroundRight ? `url(${this.backgroundRight})` : ``;\n\t}\n\n\tsize = input<null | 'S'>(null);\n}\n","<div class=\"fancyBox-content\">\n\t<ng-content />\n\t<div class=\"fancyBox-content-foreground\"></div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAaa,iBAAiB,CAAA;AAX9B,IAAA,WAAA,GAAA;AAiCC,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAa,IAAI,CAAC;AAC9B;AApBA,IAAA,IACI,eAAe,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,UAAU,GAAG,CAAA,IAAA,EAAO,IAAI,CAAC,UAAU,CAAG,CAAA,CAAA,GAAG,EAAE;;AAKxD,IAAA,IACI,mBAAmB,GAAA;AACtB,QAAA,OAAO,IAAI,CAAC,cAAc,GAAG,CAAA,IAAA,EAAO,IAAI,CAAC,cAAc,CAAG,CAAA,CAAA,GAAG,EAAE;;AAKhE,IAAA,IACI,oBAAoB,GAAA;AACvB,QAAA,OAAO,IAAI,CAAC,eAAe,GAAG,CAAA,IAAA,EAAO,IAAI,CAAC,eAAe,CAAG,CAAA,CAAA,GAAG,EAAE;;8GAnBtD,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,66BCb9B,mHAIA,EAAA,MAAA,EAAA,CAAA,yxGAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDSa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAX7B,SAAS;+BACC,cAAc,EAAA,eAAA,EAGP,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAC/B,IAAA,EAAA;AACL,wBAAA,KAAK,EAAE,UAAU;AACjB,wBAAA,eAAe,EAAE,gBAAgB;AACjC,qBAAA,EAAA,QAAA,EAAA,mHAAA,EAAA,MAAA,EAAA,CAAA,yxGAAA,CAAA,EAAA;8BAID,UAAU,EAAA,CAAA;sBADT;gBAGG,eAAe,EAAA,CAAA;sBADlB,WAAW;uBAAC,wCAAwC;gBAMrD,cAAc,EAAA,CAAA;sBADb,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAGrB,mBAAmB,EAAA,CAAA;sBADtB,WAAW;uBAAC,6CAA6C;gBAM1D,eAAe,EAAA,CAAA;sBADd,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAGrB,oBAAoB,EAAA,CAAA;sBADvB,WAAW;uBAAC,8CAA8C;;;AE9B5D;;AAEG;;;;"}

package/fesm2022/lucca-front-ng-file-upload.mjs

@@ -304,7 +304,7 @@ class FileEntryComponent {
         return this.deleteFile$.observed;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: FileEntryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: FileEntryComponent, isStandalone: true, selector: "lu-file-entry", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, displayFileName: { classPropertyName: "displayFileName", publicName: "displayFileName", isSignal: true, isRequired: false, transformFunction: null }, inlineMessageError: { classPropertyName: "inlineMessageError", publicName: "inlineMessageError", isSignal: true, isRequired: false, transformFunction: null }, entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOverride: { classPropertyName: "iconOverride", publicName: "iconOverride", isSignal: true, isRequired: false, transformFunction: null }, downloadURL: { classPropertyName: "downloadURL", publicName: "downloadURL", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null }, media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, previewUrl: { classPropertyName: "previewUrl", publicName: "previewUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { passwordChange: "passwordChange", deleteFile: "deleteFile" }, host: { classAttribute: "pr-u-displayContents" }, ngImport: i0, template: "<dl class=\"fileEntry\" [class.mod-media]=\"media()\" [class]=\"dlClasses()\">\n\t@if (!media()) {\n\t\t<dt class=\"fileEntry-filename\">\n\t\t\t<div class=\"fileEntry-filename-tooltip\" luTooltip luTooltipWhenEllipsis>{{ fileName() }}</div>\n\t\t</dt>\n\t\t@if (state() === \"error\" && inlineMessageError()) {\n\t\t\t<dd class=\"fileEntry-inlineMessage\">\n\t\t\t\t<lu-inline-message withTooltip [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t\t\t</dd>\n\t\t} @else {\n\t\t\t<dd class=\"fileEntry-description\">\n\t\t\t\t<span class=\"fileEntry-description-format\" luTooltip luTooltipWhenEllipsis>{{ fileTypeDisplay() }}</span\n\t\t\t\t><span class=\"pr-u-mask\"> \u2013 </span>\n\t\t\t\t<lu-divider vertical />\n\t\t\t\t<span class=\"fileEntry-description-size\">{{ fileSizeDisplay() }}</span>\n\t\t\t</dd>\n\t\t}\n\t}\n\t<dd class=\"fileEntry-status\">\n\t\t<div class=\"fileEntry-status-content\" [luTooltip]=\"tooltip()\">\n\t\t\t@if (state() === \"error\" && inlineMessageError()) {\n\t\t\t\t@if (media()) {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<lu-inline-message class=\"fileEntry-status-content-inlineMessage\" [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<lu-icon class=\"fileEntry-status-content-inside-icon\" icon=\"signError\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@if (previewUrl() && state() !== \"error\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<img class=\"fileEntry-status-content-inside-img\" [src]=\"previewUrl()\" alt=\"\" loading=\"lazy\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (state() === \"loading\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<div class=\"fileEntry-status-content-inside-loading loading\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (!previewUrl() && state() !== \"loading\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tclass=\"fileEntry-status-content-inside-svg\"\n\t\t\t\t\t\t\t[attr.src]=\"iconOverride() || fileEntryIconSrc()\"\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\twidth=\"32\"\n\t\t\t\t\t\t\theight=\"32\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t@if (displayFileName() && media()) {\n\t\t\t\t<div class=\"fileEntry-status-content-fileName\" aria-hidden=\"true\">{{ fileName() }}</div>\n\t\t\t}\n\t\t</div>\n\t</dd>\n\t@if (downloadURL() || deletable) {\n\t\t<dd class=\"fileEntry-toolbar\">\n\t\t\t<div class=\"fileToolbar\" [class.mod-disablePositioning]=\"!media()\" [class.mod-S]=\"size() === 'S'\">\n\t\t\t\t<ul class=\"fileToolbar-list\">\n\t\t\t\t\t@if (downloadURL()) {\n\t\t\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t[href]=\"downloadURL()\"\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\tdownload=\"download\"\n\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tluButton\n\t\t\t\t\t\t\t\t[luTooltip]=\"intl.download\"\n\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\t\t\ticon=\"arrowDownload\"\n\t\t\t\t\t\t\t\t\t[alt]=\"intl.downloadFile | intlParams: { fileName: fileName() }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t\t@if (deletable) {\n\t\t\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\t\t\t[class.palette-critical]=\"state() === 'error'\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tluButton\n\t\t\t\t\t\t\t\t[luTooltip]=\"intl.delete\"\n\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t\t(click)=\"deleteFile$.next()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\t\t\ticon=\"trashDelete\"\n\t\t\t\t\t\t\t\t\t[alt]=\"intl.deleteFile | intlParams: { fileName: fileName() }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t</dd>\n\t}\n</dl>\n@if (withPassword) {\n\t<div class=\"fileEntry_box box mod-withArrow mod-neutral\">\n\t\t<div class=\"box-arrow mod-neutral\"></div>\n\t\t<lu-form-field [label]=\"intl.password\">\n\t\t\t<div class=\"fileEntry_box-field\">\n\t\t\t\t<lu-text-input\n\t\t\t\t\tclass=\"fileEntry_box-field-textField\"\n\t\t\t\t\trequired\n\t\t\t\t\thasClearer\n\t\t\t\t\tsearchIcon=\"searchMagnifyingGlass\"\n\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t[ngModel]=\"password()\"\n\t\t\t\t\t(ngModelChange)=\"passwordChange$.next($event)\"\n\t\t\t\t/>\n\t\t\t\t<button class=\"fileEntry_box-field-button\" luButton type=\"button\">{{ intl.confirmPassword }}</button>\n\t\t\t</div>\n\t\t</lu-form-field>\n\t</div>\n}\n", styles: ["@layer components{.fileEntry{--components-fileEntry-padding: var(--pr-t-spacings-150);--components-fileEntry-gapInline: var(--components-fileEntry-padding);--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-borderColor: var(--palettes-neutral-100);--components-fileEntry-minHeight: auto;--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-neutral-25);--components-fileEntry-status-content-img-opacity: 1;--components-fileEntry-status-content-svg-width: 48px;--components-fileEntry-status-content-svg-height: var(--components-fileEntry-status-content-svg-width);--components-fileEntry-status-content-svg-margin: 0;--components-fileEntry-filename-alignSelf: end;--components-fileEntry-status-inlineSize: 48px;--components-fileEntry-status-blockSize: var(--components-fileEntry-status-inlineSize);--components-fileEntry-status-margin: 0;--components-fileEntry-description-display: flex;--components-fileEntry-display: grid;--components-fileEntry-status-content-padding: 0;--components-fileEntry-status-content-inside-insetBlockEnd: 0;border:1px solid var(--components-fileEntry-borderColor);padding:var(--components-fileEntry-padding);margin:0;border-radius:var(--pr-t-border-radius-default);background-color:var(--pr-t-elevation-surface-raised);gap:0 var(--components-fileEntry-gapInline);position:relative;grid-column:var(--components-fileEntry-gridColumn);min-block-size:var(--components-fileEntry-minHeight);display:var(--components-fileEntry-display);align-items:center;grid-template-columns:auto 1fr auto;grid-template-areas:var(--components-fileEntry-gridTemplateAreas)}.fileEntry:has(.fileEntry-status-content-fileName) .fileToolbar{--components-fileToolbar-insetBlockEnd: calc(var(--pr-t-spacings-150) + var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry:has(.fileEntry-filename-tooltip:focus-visible,.fileEntry-status-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.fileEntryDisplayWrapper{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:var(--pr-t-spacings-100)}.fileEntryDisplayWrapper:empty{display:none}.form-field:has(.fileUpload)+.fileEntryDisplayWrapper{margin-top:var(--pr-t-spacings-100)}.fileEntry-status{inline-size:var(--components-fileEntry-status-inlineSize);block-size:var(--components-fileEntry-status-blockSize);color:var(--palettes-neutral-700);flex-shrink:0;aspect-ratio:var(--components-fileEntry-status-aspectRatio);margin:var(--components-fileEntry-status-margin);grid-area:picture;display:flex;flex-direction:column}.fileEntry-status-content{display:flex;flex-direction:column;flex-grow:1;outline:none;justify-content:center;align-items:center;padding:var(--components-fileEntry-status-content-padding);position:relative}.fileEntry-status-content-fileName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;text-align:center;padding:var(--pr-t-spacings-100);padding-block-end:var(--pr-t-spacings-25);inline-size:100%}.fileEntry-status-content-inside-icon{color:var(--palettes-critical-700)}.fileEntry-status-content-inlineMessage.inlineMessage{flex-direction:column;align-items:center;text-align:center}.fileEntry-status-content-inlineMessage.inlineMessage .inlineMessage-statusIcon:first-child{--icon-size: 1.5rem}.fileEntry-status-content-inside{position:relative;flex-grow:1;inline-size:100%;border-radius:var(--pr-t-border-radius-50);overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--components-fileEntry-status-content-inside-backgroundColor)}.fileEntry-status-content-inside+.fileEntry-status-content-inside{position:absolute;inset-block-start:0;inset-block-end:var(--components-fileEntry-status-content-inside-insetBlockEnd)}.fileEntry-status-content-inside-svg{inline-size:var(--components-fileEntry-status-content-svg-width);block-size:var(--components-fileEntry-status-content-svg-height);margin:var(--components-fileEntry-status-content-svg-margin)}.fileEntry-status-content-inside-img{object-fit:cover;inline-size:100%;block-size:100%;position:absolute;inset:0;opacity:var(--components-fileEntry-status-content-img-opacity)}.fileEntry-toolbar{grid-area:toolbar;margin:0}.fileEntry-filename{grid-area:title;align-self:var(--components-fileEntry-filename-alignSelf);min-inline-size:0}.fileEntry-filename-tooltip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none}.fileEntry-description{grid-area:description;align-self:start;color:var(--palettes-neutral-600);font:var(--pr-t-font-body-S);display:var(--components-fileEntry-description-display);margin:0;gap:var(--pr-t-spacings-100);min-inline-size:0}.fileEntry-description-format{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--pr-t-border-radius-50);max-inline-size:20ch}.fileEntry-description-format:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.fileEntry-inlineMessage{grid-area:description;margin:0;align-self:start;min-inline-size:0}.fileEntry-inlineMessage .inlineMessage-statusIcon{display:none}.fileEntry_box.box{margin-top:var(--pr-t-spacings-150)}.fileEntry_box-field{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-100)}.fileEntry_box-field-textField{flex-grow:1}.fileEntry_box-field-button.button{flex-grow:1;flex-basis:0;min-inline-size:fit-content}}@layer mods{.fileEntry.mod-S{--components-fileEntry-padding: var(--pr-t-spacings-50);--components-fileEntry-status-inlineSize: 32px;--components-fileEntry-description-display: none;--components-fileEntry-gridTemplateAreas: \"picture title title toolbar\";--components-fileEntry-filename-alignSelf: center;--components-fileEntry-gapInline: var(--pr-t-spacings-75);--components-fileEntry-status-content-svg-margin: calc(var(--pr-t-spacings-100) * -1)}.fileEntry.mod-S .fileEntry-status-content-inside-icon{--icon-size: 1.25rem}.fileEntry.mod-media{--components-fileEntry-padding: var(--pr-t-spacings-75);--components-fileEntry-status-aspectRatio: auto;--components-fileEntry-status-inlineSize: 100%;--components-fileEntry-status-blockSize: calc(20.5rem + 2px) ;--components-fileEntry-description-display: none;--components-fileEntry-display: block;--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-status-content-svg-width: 72px}.fileEntry.mod-media:has(.fileEntry-status-content-fileName){--components-fileEntry-status-content-inside-insetBlockEnd: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry.mod-media.mod-S{--components-fileEntry-minHeight: calc(5rem + 2px) ;--components-fileEntry-gridColumn: auto;--components-fileEntry-status-blockSize: auto;--components-fileEntry-status-aspectRatio: 1}.fileEntry.is-error{--components-fileEntry-borderColor: var(--palettes-critical-600);--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-critical-50);--components-fileEntry-minHeight: 3.75rem}.fileEntry.is-error.mod-S{--components-fileEntry-status-blockSize: 100%}.fileEntry.is-loading{--components-fileEntry-status-content-img-opacity: .08}.fileEntry.is-loading.mod-S .fileEntry-status-content-inside-loading.loading{--components-loading-size: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50))}}@layer components{.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}.fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none;--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75);--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75) !important}.fileToolbar-list-item-button.button:hover,.fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}}@layer mods{.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: i1.LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor"], exportAs: ["luTooltip"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton],a[luButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton"] }, { kind: "component", type: InlineMessageComponent, selector: "lu-inline-message", inputs: ["label", "state", "size", "withTooltip"] }, { kind: "component", type: DividerComponent, selector: "lu-divider", inputs: ["separatorRole", "vertical", "size", "withRole"] }, { kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["mask", "placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "searchIcon", "type"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: FileEntryComponent, isStandalone: true, selector: "lu-file-entry", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, displayFileName: { classPropertyName: "displayFileName", publicName: "displayFileName", isSignal: true, isRequired: false, transformFunction: null }, inlineMessageError: { classPropertyName: "inlineMessageError", publicName: "inlineMessageError", isSignal: true, isRequired: false, transformFunction: null }, entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOverride: { classPropertyName: "iconOverride", publicName: "iconOverride", isSignal: true, isRequired: false, transformFunction: null }, downloadURL: { classPropertyName: "downloadURL", publicName: "downloadURL", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null }, media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, previewUrl: { classPropertyName: "previewUrl", publicName: "previewUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { passwordChange: "passwordChange", deleteFile: "deleteFile" }, host: { classAttribute: "pr-u-displayContents" }, ngImport: i0, template: "<dl class=\"fileEntry\" [class.mod-media]=\"media()\" [class]=\"dlClasses()\">\n\t@if (!media()) {\n\t\t<dt class=\"fileEntry-filename\">\n\t\t\t<div class=\"fileEntry-filename-tooltip\" luTooltip luTooltipWhenEllipsis>{{ fileName() }}</div>\n\t\t</dt>\n\t\t@if (state() === \"error\" && inlineMessageError()) {\n\t\t\t<dd class=\"fileEntry-inlineMessage\">\n\t\t\t\t<lu-inline-message withTooltip [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t\t\t</dd>\n\t\t} @else {\n\t\t\t<dd class=\"fileEntry-description\">\n\t\t\t\t<span class=\"fileEntry-description-format\" luTooltip luTooltipWhenEllipsis>{{ fileTypeDisplay() }}</span\n\t\t\t\t><span class=\"pr-u-mask\"> \u2013 </span>\n\t\t\t\t<lu-divider vertical />\n\t\t\t\t<span class=\"fileEntry-description-size\">{{ fileSizeDisplay() }}</span>\n\t\t\t</dd>\n\t\t}\n\t}\n\t<dd class=\"fileEntry-status\">\n\t\t<div class=\"fileEntry-status-content\" [luTooltip]=\"tooltip()\">\n\t\t\t@if (state() === \"error\" && inlineMessageError()) {\n\t\t\t\t@if (media()) {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<lu-inline-message class=\"fileEntry-status-content-inlineMessage\" [label]=\"inlineMessageError()\" [state]=\"'error'\" />\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<lu-icon class=\"fileEntry-status-content-inside-icon\" icon=\"signError\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@if (previewUrl() && state() !== \"error\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<img class=\"fileEntry-status-content-inside-img\" [src]=\"previewUrl()\" alt=\"\" loading=\"lazy\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (state() === \"loading\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<div class=\"fileEntry-status-content-inside-loading loading\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (!previewUrl() && state() !== \"loading\") {\n\t\t\t\t\t<div class=\"fileEntry-status-content-inside\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tclass=\"fileEntry-status-content-inside-svg\"\n\t\t\t\t\t\t\t[attr.src]=\"iconOverride() || fileEntryIconSrc()\"\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\twidth=\"32\"\n\t\t\t\t\t\t\theight=\"32\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t@if (displayFileName() && media()) {\n\t\t\t\t<div class=\"fileEntry-status-content-fileName\" aria-hidden=\"true\">{{ fileName() }}</div>\n\t\t\t}\n\t\t</div>\n\t</dd>\n\t@if (downloadURL() || deletable) {\n\t\t<dd class=\"fileEntry-toolbar\">\n\t\t\t<div class=\"fileToolbar\" [class.mod-disablePositioning]=\"!media()\" [class.mod-S]=\"size() === 'S'\">\n\t\t\t\t<ul class=\"fileToolbar-list\">\n\t\t\t\t\t@if (downloadURL()) {\n\t\t\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t[href]=\"downloadURL()\"\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\tdownload=\"download\"\n\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tluButton\n\t\t\t\t\t\t\t\t[luTooltip]=\"intl.download\"\n\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\t\t\ticon=\"arrowDownload\"\n\t\t\t\t\t\t\t\t\t[alt]=\"intl.downloadFile | intlParams: { fileName: fileName() }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t\t@if (deletable) {\n\t\t\t\t\t\t<li class=\"fileToolbar-list-item\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button\"\n\t\t\t\t\t\t\t\t[class.palette-critical]=\"state() === 'error'\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tluButton\n\t\t\t\t\t\t\t\t[luTooltip]=\"intl.delete\"\n\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t\t(click)=\"deleteFile$.next()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-icon\n\t\t\t\t\t\t\t\t\tclass=\"fileToolbar-list-item-button-icon\"\n\t\t\t\t\t\t\t\t\ticon=\"trashDelete\"\n\t\t\t\t\t\t\t\t\t[alt]=\"intl.deleteFile | intlParams: { fileName: fileName() }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t</dd>\n\t}\n</dl>\n@if (withPassword) {\n\t<div class=\"fileEntry_box box mod-withArrow mod-neutral\">\n\t\t<div class=\"box-arrow mod-neutral\"></div>\n\t\t<lu-form-field [label]=\"intl.password\">\n\t\t\t<div class=\"fileEntry_box-field\">\n\t\t\t\t<lu-text-input\n\t\t\t\t\tclass=\"fileEntry_box-field-textField\"\n\t\t\t\t\trequired\n\t\t\t\t\thasClearer\n\t\t\t\t\tsearchIcon=\"searchMagnifyingGlass\"\n\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t[ngModel]=\"password()\"\n\t\t\t\t\t(ngModelChange)=\"passwordChange$.next($event)\"\n\t\t\t\t/>\n\t\t\t\t<button class=\"fileEntry_box-field-button\" luButton type=\"button\">{{ intl.confirmPassword }}</button>\n\t\t\t</div>\n\t\t</lu-form-field>\n\t</div>\n}\n", styles: ["@layer components{.fileEntry{--components-fileEntry-padding: var(--pr-t-spacings-150);--components-fileEntry-gapInline: var(--components-fileEntry-padding);--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-borderColor: var(--palettes-neutral-100);--components-fileEntry-minHeight: auto;--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-neutral-25);--components-fileEntry-status-content-img-opacity: 1;--components-fileEntry-status-content-svg-width: 48px;--components-fileEntry-status-content-svg-height: var(--components-fileEntry-status-content-svg-width);--components-fileEntry-status-content-svg-margin: 0;--components-fileEntry-filename-alignSelf: end;--components-fileEntry-status-inlineSize: 48px;--components-fileEntry-status-blockSize: var(--components-fileEntry-status-inlineSize);--components-fileEntry-status-margin: 0;--components-fileEntry-description-display: flex;--components-fileEntry-display: grid;--components-fileEntry-status-content-padding: 0;--components-fileEntry-status-content-inside-insetBlockEnd: 0;border:1px solid var(--components-fileEntry-borderColor);padding:var(--components-fileEntry-padding);margin:0;border-radius:var(--pr-t-border-radius-default);background-color:var(--pr-t-elevation-surface-raised);gap:0 var(--components-fileEntry-gapInline);position:relative;grid-column:var(--components-fileEntry-gridColumn);min-block-size:var(--components-fileEntry-minHeight);display:var(--components-fileEntry-display);align-items:center;grid-template-columns:auto 1fr auto;grid-template-areas:var(--components-fileEntry-gridTemplateAreas)}.fileEntry:has(.fileEntry-status-content-fileName) .fileToolbar{--components-fileToolbar-insetBlockEnd: calc(var(--pr-t-spacings-150) + var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry:has(.fileEntry-filename-tooltip:focus-visible,.fileEntry-status-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.fileEntryDisplayWrapper{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:var(--pr-t-spacings-100)}.fileEntryDisplayWrapper:empty{display:none}.form-field:has(.fileUpload)+.fileEntryDisplayWrapper{margin-top:var(--pr-t-spacings-100)}.fileEntry-status{inline-size:var(--components-fileEntry-status-inlineSize);block-size:var(--components-fileEntry-status-blockSize);color:var(--palettes-neutral-700);flex-shrink:0;aspect-ratio:var(--components-fileEntry-status-aspectRatio);margin:var(--components-fileEntry-status-margin);grid-area:picture;display:flex;flex-direction:column}.fileEntry-status-content{display:flex;flex-direction:column;flex-grow:1;outline:none;justify-content:center;align-items:center;padding:var(--components-fileEntry-status-content-padding);position:relative}.fileEntry-status-content-fileName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;text-align:center;padding:var(--pr-t-spacings-100);padding-block-end:var(--pr-t-spacings-25);inline-size:100%}.fileEntry-status-content-inside-icon{color:var(--palettes-critical-700)}.fileEntry-status-content-inlineMessage.inlineMessage{flex-direction:column;align-items:center;text-align:center}.fileEntry-status-content-inlineMessage.inlineMessage .inlineMessage-statusIcon:first-child{--icon-size: 1.5rem}.fileEntry-status-content-inside{position:relative;flex-grow:1;inline-size:100%;border-radius:var(--pr-t-border-radius-50);overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--components-fileEntry-status-content-inside-backgroundColor)}.fileEntry-status-content-inside+.fileEntry-status-content-inside{position:absolute;inset-block-start:0;inset-block-end:var(--components-fileEntry-status-content-inside-insetBlockEnd)}.fileEntry-status-content-inside-svg{inline-size:var(--components-fileEntry-status-content-svg-width);block-size:var(--components-fileEntry-status-content-svg-height);margin:var(--components-fileEntry-status-content-svg-margin)}.fileEntry-status-content-inside-img{object-fit:cover;inline-size:100%;block-size:100%;position:absolute;inset:0;opacity:var(--components-fileEntry-status-content-img-opacity)}.fileEntry-toolbar{grid-area:toolbar;margin:0}.fileEntry-filename{grid-area:title;align-self:var(--components-fileEntry-filename-alignSelf);min-inline-size:0}.fileEntry-filename-tooltip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none}.fileEntry-description{grid-area:description;align-self:start;color:var(--palettes-neutral-600);font:var(--pr-t-font-body-S);display:var(--components-fileEntry-description-display);margin:0;gap:var(--pr-t-spacings-100);min-inline-size:0}.fileEntry-description-format{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--pr-t-border-radius-50);max-inline-size:20ch}.fileEntry-description-format:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.fileEntry-inlineMessage{grid-area:description;margin:0;align-self:start;min-inline-size:0}.fileEntry-inlineMessage .inlineMessage-statusIcon{display:none}.fileEntry_box.box{margin-top:var(--pr-t-spacings-150)}.fileEntry_box-field{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-100)}.fileEntry_box-field-textField{flex-grow:1}.fileEntry_box-field-button.button{flex-grow:1;flex-basis:0;min-inline-size:fit-content}}@layer mods{.fileEntry.mod-S{--components-fileEntry-padding: var(--pr-t-spacings-50);--components-fileEntry-status-inlineSize: 32px;--components-fileEntry-description-display: none;--components-fileEntry-gridTemplateAreas: \"picture title title toolbar\";--components-fileEntry-filename-alignSelf: center;--components-fileEntry-gapInline: var(--pr-t-spacings-75);--components-fileEntry-status-content-svg-margin: calc(var(--pr-t-spacings-100) * -1)}.fileEntry.mod-S .fileEntry-status-content-inside-icon{--icon-size: 1.25rem}.fileEntry.mod-media{--components-fileEntry-padding: var(--pr-t-spacings-75);--components-fileEntry-status-aspectRatio: auto;--components-fileEntry-status-inlineSize: 100%;--components-fileEntry-status-blockSize: calc(20.5rem + 2px) ;--components-fileEntry-description-display: none;--components-fileEntry-display: block;--components-fileEntry-gridColumn: 1 / -1;--components-fileEntry-status-content-svg-width: 72px}.fileEntry.mod-media:has(.fileEntry-status-content-fileName){--components-fileEntry-status-content-inside-insetBlockEnd: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25))}.fileEntry.mod-media.mod-S{--components-fileEntry-minHeight: calc(5rem + 2px) ;--components-fileEntry-gridColumn: auto;--components-fileEntry-status-blockSize: auto;--components-fileEntry-status-aspectRatio: 1}.fileEntry.is-error{--components-fileEntry-borderColor: var(--palettes-critical-600);--components-fileEntry-gridTemplateAreas: \"picture title toolbar\" \"picture description toolbar\";--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-critical-50);--components-fileEntry-minHeight: 3.75rem}.fileEntry.is-error.mod-S{--components-fileEntry-status-blockSize: 100%}.fileEntry.is-loading{--components-fileEntry-status-content-img-opacity: .08}.fileEntry.is-loading.mod-S .fileEntry-status-content-inside-loading.loading{--components-loading-size: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50))}}@layer components{.fileToolbar{--components-fileToolbar-list-padding: var(--pr-t-spacings-50);--components-fileToolbar-display: block;--components-fileToolbar-insetBlockEnd: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);position:absolute;transform:translate(-50%);inset-inline-start:50%;inset-block-end:var(--components-fileToolbar-insetBlockEnd);box-shadow:var(--pr-t-elevation-shadow-overlay);background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:var(--components-fileToolbar-display)}.fileToolbar-list{margin:0;padding:0;list-style-type:none;display:flex;gap:var(--pr-t-spacings-50);padding:var(--components-fileToolbar-list-padding)}.fileToolbar-list-item-button.button{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none;--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75);--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75) !important}.fileToolbar-list-item-button.button:hover,.fileToolbar-list-item-button.button:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.fileToolbar-list-item-button.button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fileToolbar-list-item-button.button:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.fileToolbar-list-item-button.button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}}@layer mods{.fileToolbar.mod-disablePositioning{--components-fileToolbar-display: contents}.fileToolbar.mod-disablePositioning.mod-S{--components-fileToolbar-list-padding: 0}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: i1.LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor"], exportAs: ["luTooltip"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton],a[luButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton"] }, { kind: "component", type: InlineMessageComponent, selector: "lu-inline-message", inputs: ["label", "state", "size", "withTooltip"] }, { kind: "component", type: DividerComponent, selector: "lu-divider", inputs: ["separatorRole", "vertical", "size", "withRole"] }, { kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["mask", "placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "type", "searchIcon"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: FileEntryComponent, decorators: [{
             type: Component,