npm - @lucca-front/ng - Versions diffs - 21.1.1 → 21.1.2-rc.1 - Mend

@lucca-front/ng 21.1.1 → 21.1.2-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/fesm2022/lucca-front-ng-forms.mjs CHANGED Viewed

@@ -704,7 +704,7 @@ class FieldsetComponent {
         this.id = `fieldsetTitleContent${nextId++}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FieldsetComponent, isStandalone: true, selector: "lu-fieldset", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<fieldset\n\tclass=\"fieldset\"\n\t[attr.aria-labelledby]=\"id\"\n\t[class.mod-expandable]=\"expandable()\"\n\t[class.mod-horizontal]=\"horizontal()\"\n\t[class.mod-S]=\"size() === 'S'\"\n>\n\t<legend class=\"fieldset-title\">\n\t\t@if (expandable()) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"fieldset-title-content\"\n\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t[attr.aria-expanded]=\"expanded()\"\n\t\t\t\t(click)=\"expanded.set(!expanded())\"\n\t\t\t>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"titleContent\" />\n\t\t\t\t<lu-icon icon=\"arrowChevronBottom\" />\n\t\t\t</button>\n\t\t} @else if (action()) {\n\t\t\t<span class=\"fieldset-title-content\">\n\t\t\t\t<span class=\"pr-u-displayFlex\" [attr.id]=\"id\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"titleContent\" />\n\t\t\t\t</span>\n\t\t\t\t<div class=\"fieldset-title-content-action\">\n\t\t\t\t\t<ng-container *luPortal=\"action()\" />\n\t\t\t\t</div>\n\t\t\t</span>\n\t\t} @else {\n\t\t\t<span class=\"fieldset-title-content\" [attr.id]=\"id\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"titleContent\" />\n\t\t\t</span>\n\t\t}\n\t</legend>\n\t<div class=\"fieldset-content\" [attr.hidden]=\"!expandable() || expanded() ? null : 'hidden'\"><ng-content /></div>\n</fieldset>\n\n<ng-template #titleContent>\n\t<span class=\"fieldset-title-content-text\">\n\t\t<ng-container *luPortal=\"heading()\" />\n\t\t@if (helper()) {\n\t\t\t<span class=\"fieldset-title-content-text-helper\"><ng-container *luPortal=\"helper()\" /></span>\n\t\t}\n\t</span>\n</ng-template>\n", styles: ["@layer components{.fieldset{--components-fieldset-title: var(--pr-t-font-heading-3);--components-fieldset-gap: var(--pr-t-spacings-100);--components-fieldset-contentMaxWidth: 40rem;--components-fieldset-title-iconRotation: 0deg;--components-fieldset-title-content-flexWrap: nowrap;border:0;margin:0;padding:0;display:grid;gap:var(--components-fieldset-gap);grid-template-columns:auto}.fieldset-title{font:var(--components-fieldset-title);color:var(--pr-t-color-text-heading);padding:0;margin:0;inline-size:100%;min-block-size:var(--pr-t-spacings-300);display:contents}.fieldset-title:has(.fieldset-title-content-text:empty){display:none}.fieldset-title-content{border:0;padding:0;margin:0;inline-size:100%;background-color:transparent;text-align:start;display:flex;flex-wrap:var(--components-fieldset-title-content-flexWrap);align-items:flex-start;justify-content:space-between;gap:var(--components-fieldset-gap);max-inline-size:var(--components-fieldset-contentMaxWidth)}.fieldset-title-content .lucca-icon{transform:rotate(var(--components-fieldset-title-iconRotation));transition-property:transform;transition-duration:var(--commons-animations-durations-fast);color:var(--palettes-neutral-700)}.fieldset-title-content-text{padding-block:var(--pr-t-spacings-50)}.fieldset-title-content-text-helper{font:var(--pr-t-font-body-S);font-weight:var(--pr-t-font-fontWeight-regular);color:var(--palettes-neutral-700);display:block}.fieldset-content{min-inline-size:0}}@layer mods{.fieldset.mod-S{--components-fieldset-title: var(--pr-t-font-heading-4)}.fieldset.mod-horizontal{grid-template-columns:1fr auto}.fieldset.mod-expandable .fieldset-title-content{border-radius:var(--pr-t-border-radius-default);cursor:pointer;font:inherit}.fieldset.mod-expandable .fieldset-title-content:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fieldset:has(.fieldset-title-content[aria-expanded=true]){--components-fieldset-title-iconRotation: 180deg}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200)}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button:hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50)) }.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button:disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--palettes-neutral-100);--components-button-color: var(--pr-t-color-text-disabled)}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button{--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)}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .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)}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}@media not all and (min-width:30em){.fieldset{--components-fieldset-title-content-flexWrap: wrap}}}\n"], dependencies: [{ kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "pr-icon,lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: FieldsetComponent, isStandalone: true, selector: "lu-fieldset", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<fieldset\n\tclass=\"fieldset\"\n\t[attr.aria-labelledby]=\"id\"\n\t[class.mod-expandable]=\"expandable()\"\n\t[class.mod-horizontal]=\"horizontal()\"\n\t[class.mod-S]=\"size() === 'S'\"\n>\n\t<legend class=\"fieldset-title\">\n\t\t@if (expandable()) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"fieldset-title-content\"\n\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t[attr.aria-expanded]=\"expanded()\"\n\t\t\t\t(click)=\"expanded.set(!expanded())\"\n\t\t\t>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"titleContent\" />\n\t\t\t\t<lu-icon icon=\"arrowChevronBottom\" />\n\t\t\t</button>\n\t\t} @else if (action()) {\n\t\t\t<span class=\"fieldset-title-content\">\n\t\t\t\t<span class=\"pr-u-displayFlex\" [attr.id]=\"id\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"titleContent\" />\n\t\t\t\t</span>\n\t\t\t\t<div class=\"fieldset-title-content-action\">\n\t\t\t\t\t<ng-container *luPortal=\"action()\" />\n\t\t\t\t</div>\n\t\t\t</span>\n\t\t} @else {\n\t\t\t<span class=\"fieldset-title-content\" [attr.id]=\"id\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"titleContent\" />\n\t\t\t</span>\n\t\t}\n\t</legend>\n\t<div class=\"fieldset-content\" [attr.hidden]=\"!expandable() || expanded() ? null : 'hidden'\"><ng-content /></div>\n</fieldset>\n\n<ng-template #titleContent>\n\t<span class=\"fieldset-title-content-text\">\n\t\t<ng-container *luPortal=\"heading()\" />\n\t\t@if (helper()) {\n\t\t\t<span class=\"fieldset-title-content-text-helper\"><ng-container *luPortal=\"helper()\" /></span>\n\t\t}\n\t</span>\n</ng-template>\n", styles: ["@layer components{.fieldset{--components-fieldset-title: var(--pr-t-font-heading-3);--components-fieldset-gap: var(--pr-t-spacings-100);--components-fieldset-contentMaxWidth: 40rem;--components-fieldset-title-iconRotation: 0deg;--components-fieldset-title-content-flexWrap: nowrap;border:0;margin:0;padding:0;display:grid;gap:var(--components-fieldset-gap);grid-template-columns:auto}.fieldset-title{font:var(--components-fieldset-title);color:var(--pr-t-color-text-heading);padding:0;margin:0;inline-size:100%;min-block-size:var(--pr-t-spacings-300);display:contents}.fieldset-title:has(.fieldset-title-content-text:empty){display:none}.fieldset-title-content{border:0;padding:0;margin:0;inline-size:100%;background-color:transparent;text-align:start;display:flex;flex-wrap:var(--components-fieldset-title-content-flexWrap);align-items:flex-start;justify-content:space-between;gap:var(--components-fieldset-gap);max-inline-size:var(--components-fieldset-contentMaxWidth)}.fieldset-title-content .lucca-icon{transform:rotate(var(--components-fieldset-title-iconRotation));transition-property:transform;transition-duration:var(--commons-animations-durations-fast);color:var(--palettes-neutral-700)}.fieldset-title-content-text{padding-block:var(--pr-t-spacings-50)}.fieldset-title-content-text-helper{font:var(--pr-t-font-body-S);font-weight:var(--pr-t-font-fontWeight-regular);color:var(--palettes-neutral-700);display:block}.fieldset-content{min-inline-size:0}}@layer mods{.fieldset.mod-S{--components-fieldset-title: var(--pr-t-font-heading-4)}.fieldset.mod-horizontal{grid-template-columns:1fr auto}.fieldset.mod-expandable .fieldset-title-content{border-radius:var(--pr-t-border-radius-default);cursor:pointer;font:inherit}.fieldset.mod-expandable .fieldset-title-content:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.fieldset:has(.fieldset-title-content[aria-expanded=true]){--components-fieldset-title-iconRotation: 180deg}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200)}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button:hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50)) }.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button:disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--palettes-neutral-100);--components-button-color: var(--pr-t-color-text-disabled)}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button{--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)}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .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)}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}@media not all and (min-width:30em){.fieldset{--components-fieldset-title-content-flexWrap: wrap}}}\n"], dependencies: [{ kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FieldsetComponent, decorators: [{
             type: Component,
@@ -768,11 +768,11 @@ class ColorInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ColorInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ColorInputComponent, isStandalone: true, selector: "lu-color-input", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: true, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<lu-simple-select\n\t#selectRef\n\tnoClueIcon\n\tnoClue\n\tcolorPicker\n\t[placeholder]=\"compact() ? '\u00A0' : null\"\n\t[panelFooterTpl]=\"footer\"\n\t[compact]=\"compact()\"\n\t[clearable]=\"clearable()\"\n\t[formControl]=\"ngControl.control\"\n\t[options]=\"filteredColors()\"\n\t(clueChange)=\"clue.set($event)\"\n\t(highlightedOption)=\"keyboardHighlighted.set($event.name)\"\n\tignorePresentation\n>\n\t<ng-container *luOption=\"let color; select: selectRef\">\n\t\t<lu-color\n\t\t\tsize=\"XL\"\n\t\t\thiddenName\n\t\t\t[value]=\"color.background\"\n\t\t\t[borderColor]=\"color.borderColor\"\n\t\t\t(mouseenter)=\"mouseHighlighted.set(color.name)\"\n\t\t\t(mouseleave)=\"mouseHighlighted.set('')\"\n\t\t>\n\t\t\t{{ color.name }}\n\t\t</lu-color>\n\t</ng-container>\n\t<ng-container *luDisplayer=\"let color; select: selectRef\">\n\t\t<lu-color size=\"L\" [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t</ng-container>\n\t<ng-template #footer>\n\t\t<div class=\"colorPanel-highlighted\">\n\t\t\t<span class=\"pr-u-colorTextSubtle\">{{ intl().color }}</span>\n\t\t\t<span class=\"pr-u-ellipsis\">{{ highlighted() }}</span>\n\t\t</div>\n\t</ng-template>\n</lu-simple-select>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl?.control?.value) {\n\t\t@let color = currentColorPresentation();\n\t\t<lu-color [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t} @else {\n\t\t<div aria-hidden=\"true\" data-content-before=\"\u2013\"></div>\n\t}\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer components{.color{--components-color-value-before-display: none;--components-color-value-scale: 1;--components-color-value-inlineSize: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50));--components-color-value-boxShadowColor: transparent;--components-color-value-backgroundColor: transparent;--components-color-value-channel: clamp(0, (((r * .299) + (g * .587) + (b * .114)) - 128) * -1000, 255);display:flex;align-items:center;gap:var(--pr-t-spacings-100)}.color .color-value{inline-size:var(--components-color-value-inlineSize);aspect-ratio:1;background:var(--components-color-value-backgroundColor);color:rgb(from var(--components-color-value-backgroundColor) var(--components-color-value-channel) var(--components-color-value-channel) var(--components-color-value-channel));border-radius:var(--pr-t-border-radius-small);box-shadow:inset 0 0 0 1px var(--components-color-value-boxShadowColor);scale:var(--components-color-value-scale);transition-property:scale;transition-duration:var(--commons-animations-durations-fast);flex-shrink:0}.color .color-value:before{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;display:var(--components-color-value-before-display);position:absolute;inset:0;place-items:center;font-size:1.5rem}.color-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@layer mods{.color.mod-M{--components-color-value-inlineSize: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50))}.color.mod-L{--components-color-value-inlineSize: var(--pr-t-spacings-300)}.color.mod-XL{--components-color-value-inlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50))}[aria-selected=true] .color{--components-color-value-before-display: grid}.optionItem.is-highlighted .color,[role=listbox] .optionItem:hover .color{--components-color-value-scale: calc(7/6)}}@layer components{.colorPicker{--components-colorPicker-input-paddingInlineStart: 0;--components-colorPicker-inlineSize: auto;inline-size:var(--components-colorPicker-inlineSize)}.colorPicker .simpleSelect-field-value{padding:1px;margin:-1px;min-inline-size:0}.colorPicker .simpleSelect-field-input{padding-inline-start:var(--components-colorPicker-input-paddingInlineStart);color:transparent}}@layer mods{.colorPicker.mod-compact{--components-colorPicker-inlineSize: 4.625rem}.colorPicker.mod-compact .color-name{border:0;clip:rect(1px,1px,1px,1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.form-field.mod-S .colorPicker.mod-compact{--components-colorPicker-inlineSize: 3.75rem}.colorPicker.mod-compact.is-clearable{--components-colorPicker-inlineSize: 6.125rem}.form-field.mod-S .colorPicker.mod-compact.is-clearable{--components-colorPicker-inlineSize: 4.875rem}.colorPicker.is-selected:not(.is-searchFilled){--components-colorPicker-input-paddingInlineStart: var(--pr-t-spacings-400)}.form-field.mod-S .colorPicker.is-selected:not(.is-searchFilled){--components-colorPicker-input-paddingInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}}@layer components{.cdk-overlay-pane:has(.colorPanel .lu-picker-content){min-inline-size:0!important;inline-size:17rem}.colorPanel [role=listbox]{display:flex;flex-wrap:wrap;padding:var(--pr-t-spacings-100)}.colorPanel .color{padding:var(--pr-t-spacings-50)}.colorPanel-highlighted{display:flex;padding:var(--pr-t-spacings-50) var(--pr-t-spacings-100);margin:0 var(--pr-t-spacings-100) var(--pr-t-spacings-100);gap:var(--pr-t-spacings-50)}}@layer mods{.colorPanel .lu-picker-content{padding:0}.colorPanel .optionItem-value{padding:0;background-color:transparent!important}.colorPanel .optionItem-value:before{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LuSimpleSelectInputComponent, selector: "lu-simple-select", inputs: ["intl", "autocomplete"] }, { kind: "directive", type: LuDisplayerDirective, selector: "[luDisplayer]", inputs: ["luDisplayerSelect"] }, { kind: "directive", type: LuOptionDirective, selector: "[luOption]", inputs: ["luOptionSelect"] }, { kind: "component", type: ColorComponent, selector: "lu-color", inputs: ["value", "borderColor", "size", "hiddenName"] }, { kind: "directive", type: LuCoreSelectNoClueDirective, selector: "lu-simple-select[noClue],lu-multi-select[noClue]" }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ColorInputComponent, isStandalone: true, selector: "lu-color-input", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: true, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<lu-simple-select\n\t#selectRef\n\tnoClueIcon\n\tnoClue\n\tcolorPicker\n\t[placeholder]=\"compact() ? '\u00A0' : null\"\n\t[panelFooterTpl]=\"footer\"\n\t[compact]=\"compact()\"\n\t[clearable]=\"clearable()\"\n\t[formControl]=\"ngControl.control\"\n\t[options]=\"filteredColors()\"\n\t(clueChange)=\"clue.set($event)\"\n\t(highlightedOption)=\"keyboardHighlighted.set($event.name)\"\n\tignorePresentation\n>\n\t<ng-container *luOption=\"let color; select: selectRef\">\n\t\t<lu-color\n\t\t\tsize=\"XL\"\n\t\t\thiddenName\n\t\t\t[value]=\"color.background\"\n\t\t\t[borderColor]=\"color.borderColor\"\n\t\t\t(mouseenter)=\"mouseHighlighted.set(color.name)\"\n\t\t\t(mouseleave)=\"mouseHighlighted.set('')\"\n\t\t>\n\t\t\t{{ color.name }}\n\t\t</lu-color>\n\t</ng-container>\n\t<ng-container *luDisplayer=\"let color; select: selectRef\">\n\t\t<lu-color size=\"L\" [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t</ng-container>\n\t<ng-template #footer>\n\t\t<div class=\"colorPanel-highlighted\">\n\t\t\t<span class=\"pr-u-colorTextSubtle\">{{ intl().color }}</span>\n\t\t\t<span class=\"pr-u-ellipsis\">{{ highlighted() }}</span>\n\t\t</div>\n\t</ng-template>\n</lu-simple-select>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl?.control?.value) {\n\t\t@let color = currentColorPresentation();\n\t\t<lu-color [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t} @else {\n\t\t<div aria-hidden=\"true\" data-content-before=\"\u2013\"></div>\n\t}\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer components{.color{--components-color-value-before-display: none;--components-color-value-scale: 1;--components-color-value-inlineSize: var(--pr-t-spacings-250);--components-color-value-boxShadowColor: transparent;--components-color-value-backgroundColor: transparent;--components-color-value-channel: clamp(0, (((r * .299) + (g * .587) + (b * .114)) - 128) * -1000, 255);display:flex;align-items:center;gap:var(--pr-t-spacings-100)}.color .color-value{inline-size:var(--components-color-value-inlineSize);aspect-ratio:1;background:var(--components-color-value-backgroundColor);color:rgb(from var(--components-color-value-backgroundColor) var(--components-color-value-channel) var(--components-color-value-channel) var(--components-color-value-channel));border-radius:var(--pr-t-border-radius-small);box-shadow:inset 0 0 0 1px var(--components-color-value-boxShadowColor);scale:var(--components-color-value-scale);transition-property:scale;transition-duration:var(--commons-animations-durations-fast);flex-shrink:0}.color .color-value:before{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;display:var(--components-color-value-before-display);position:absolute;inset:0;place-items:center;font-size:1.5rem}.color-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@layer mods{.color.mod-M{--components-color-value-inlineSize: var(--pr-t-spacings-250)}.color.mod-L{--components-color-value-inlineSize: var(--pr-t-spacings-300)}.color.mod-XL{--components-color-value-inlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50))}[aria-selected=true] .color{--components-color-value-before-display: grid}.optionItem.is-highlighted .color,[role=listbox] .optionItem:hover .color{--components-color-value-scale: calc(7/6)}}@layer components{.colorPicker{--components-colorPicker-input-paddingInlineStart: 0;--components-colorPicker-inlineSize: auto;inline-size:var(--components-colorPicker-inlineSize)}.colorPicker .simpleSelect-field-value{padding:1px;margin:-1px;min-inline-size:0}.colorPicker .simpleSelect-field-input{padding-inline-start:var(--components-colorPicker-input-paddingInlineStart);color:transparent}}@layer mods{.colorPicker.mod-compact{--components-colorPicker-inlineSize: 4.625rem}.colorPicker.mod-compact .color-name{border:0;clip:rect(1px,1px,1px,1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.form-field.mod-S .colorPicker.mod-compact{--components-colorPicker-inlineSize: 3.75rem}.colorPicker.mod-compact.is-clearable{--components-colorPicker-inlineSize: 6.125rem}.form-field.mod-S .colorPicker.mod-compact.is-clearable{--components-colorPicker-inlineSize: 4.875rem}.colorPicker.is-selected:not(.is-searchFilled){--components-colorPicker-input-paddingInlineStart: var(--pr-t-spacings-400)}.form-field.mod-S .colorPicker.is-selected:not(.is-searchFilled){--components-colorPicker-input-paddingInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}}@layer components{.cdk-overlay-pane:has(.colorPanel .lu-picker-content){min-inline-size:0!important;inline-size:17rem}.colorPanel [role=listbox]{display:flex;flex-wrap:wrap;padding:var(--pr-t-spacings-100)}.colorPanel .color{padding:var(--pr-t-spacings-50)}.colorPanel-highlighted{display:flex;padding:var(--pr-t-spacings-50) var(--pr-t-spacings-100);margin:0 var(--pr-t-spacings-100) var(--pr-t-spacings-100);gap:var(--pr-t-spacings-50)}}@layer mods{.colorPanel .lu-picker-content{padding:0}.colorPanel .optionItem-value{padding:0;background-color:transparent!important}.colorPanel .optionItem-value:before{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LuSimpleSelectInputComponent, selector: "lu-simple-select", inputs: ["intl", "autocomplete"] }, { kind: "directive", type: LuDisplayerDirective, selector: "[luDisplayer]", inputs: ["luDisplayerSelect"] }, { kind: "directive", type: LuOptionDirective, selector: "[luOption]", inputs: ["luOptionSelect"] }, { kind: "component", type: ColorComponent, selector: "lu-color", inputs: ["value", "borderColor", "size", "hiddenName"] }, { kind: "directive", type: LuCoreSelectNoClueDirective, selector: "lu-simple-select[noClue],lu-multi-select[noClue]" }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-color-input', imports: [ReactiveFormsModule, LuSimpleSelectInputComponent, LuDisplayerDirective, LuOptionDirective, ColorComponent, LuCoreSelectNoClueDirective, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<lu-simple-select\n\t#selectRef\n\tnoClueIcon\n\tnoClue\n\tcolorPicker\n\t[placeholder]=\"compact() ? '\u00A0' : null\"\n\t[panelFooterTpl]=\"footer\"\n\t[compact]=\"compact()\"\n\t[clearable]=\"clearable()\"\n\t[formControl]=\"ngControl.control\"\n\t[options]=\"filteredColors()\"\n\t(clueChange)=\"clue.set($event)\"\n\t(highlightedOption)=\"keyboardHighlighted.set($event.name)\"\n\tignorePresentation\n>\n\t<ng-container *luOption=\"let color; select: selectRef\">\n\t\t<lu-color\n\t\t\tsize=\"XL\"\n\t\t\thiddenName\n\t\t\t[value]=\"color.background\"\n\t\t\t[borderColor]=\"color.borderColor\"\n\t\t\t(mouseenter)=\"mouseHighlighted.set(color.name)\"\n\t\t\t(mouseleave)=\"mouseHighlighted.set('')\"\n\t\t>\n\t\t\t{{ color.name }}\n\t\t</lu-color>\n\t</ng-container>\n\t<ng-container *luDisplayer=\"let color; select: selectRef\">\n\t\t<lu-color size=\"L\" [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t</ng-container>\n\t<ng-template #footer>\n\t\t<div class=\"colorPanel-highlighted\">\n\t\t\t<span class=\"pr-u-colorTextSubtle\">{{ intl().color }}</span>\n\t\t\t<span class=\"pr-u-ellipsis\">{{ highlighted() }}</span>\n\t\t</div>\n\t</ng-template>\n</lu-simple-select>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl?.control?.value) {\n\t\t@let color = currentColorPresentation();\n\t\t<lu-color [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t} @else {\n\t\t<div aria-hidden=\"true\" data-content-before=\"\u2013\"></div>\n\t}\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer components{.color{--components-color-value-before-display: none;--components-color-value-scale: 1;--components-color-value-inlineSize: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50));--components-color-value-boxShadowColor: transparent;--components-color-value-backgroundColor: transparent;--components-color-value-channel: clamp(0, (((r * .299) + (g * .587) + (b * .114)) - 128) * -1000, 255);display:flex;align-items:center;gap:var(--pr-t-spacings-100)}.color .color-value{inline-size:var(--components-color-value-inlineSize);aspect-ratio:1;background:var(--components-color-value-backgroundColor);color:rgb(from var(--components-color-value-backgroundColor) var(--components-color-value-channel) var(--components-color-value-channel) var(--components-color-value-channel));border-radius:var(--pr-t-border-radius-small);box-shadow:inset 0 0 0 1px var(--components-color-value-boxShadowColor);scale:var(--components-color-value-scale);transition-property:scale;transition-duration:var(--commons-animations-durations-fast);flex-shrink:0}.color .color-value:before{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;display:var(--components-color-value-before-display);position:absolute;inset:0;place-items:center;font-size:1.5rem}.color-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@layer mods{.color.mod-M{--components-color-value-inlineSize: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50))}.color.mod-L{--components-color-value-inlineSize: var(--pr-t-spacings-300)}.color.mod-XL{--components-color-value-inlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50))}[aria-selected=true] .color{--components-color-value-before-display: grid}.optionItem.is-highlighted .color,[role=listbox] .optionItem:hover .color{--components-color-value-scale: calc(7/6)}}@layer components{.colorPicker{--components-colorPicker-input-paddingInlineStart: 0;--components-colorPicker-inlineSize: auto;inline-size:var(--components-colorPicker-inlineSize)}.colorPicker .simpleSelect-field-value{padding:1px;margin:-1px;min-inline-size:0}.colorPicker .simpleSelect-field-input{padding-inline-start:var(--components-colorPicker-input-paddingInlineStart);color:transparent}}@layer mods{.colorPicker.mod-compact{--components-colorPicker-inlineSize: 4.625rem}.colorPicker.mod-compact .color-name{border:0;clip:rect(1px,1px,1px,1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.form-field.mod-S .colorPicker.mod-compact{--components-colorPicker-inlineSize: 3.75rem}.colorPicker.mod-compact.is-clearable{--components-colorPicker-inlineSize: 6.125rem}.form-field.mod-S .colorPicker.mod-compact.is-clearable{--components-colorPicker-inlineSize: 4.875rem}.colorPicker.is-selected:not(.is-searchFilled){--components-colorPicker-input-paddingInlineStart: var(--pr-t-spacings-400)}.form-field.mod-S .colorPicker.is-selected:not(.is-searchFilled){--components-colorPicker-input-paddingInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}}@layer components{.cdk-overlay-pane:has(.colorPanel .lu-picker-content){min-inline-size:0!important;inline-size:17rem}.colorPanel [role=listbox]{display:flex;flex-wrap:wrap;padding:var(--pr-t-spacings-100)}.colorPanel .color{padding:var(--pr-t-spacings-50)}.colorPanel-highlighted{display:flex;padding:var(--pr-t-spacings-50) var(--pr-t-spacings-100);margin:0 var(--pr-t-spacings-100) var(--pr-t-spacings-100);gap:var(--pr-t-spacings-50)}}@layer mods{.colorPanel .lu-picker-content{padding:0}.colorPanel .optionItem-value{padding:0;background-color:transparent!important}.colorPanel .optionItem-value:before{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}\n"] }]
+            args: [{ selector: 'lu-color-input', imports: [ReactiveFormsModule, LuSimpleSelectInputComponent, LuDisplayerDirective, LuOptionDirective, ColorComponent, LuCoreSelectNoClueDirective, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<lu-simple-select\n\t#selectRef\n\tnoClueIcon\n\tnoClue\n\tcolorPicker\n\t[placeholder]=\"compact() ? '\u00A0' : null\"\n\t[panelFooterTpl]=\"footer\"\n\t[compact]=\"compact()\"\n\t[clearable]=\"clearable()\"\n\t[formControl]=\"ngControl.control\"\n\t[options]=\"filteredColors()\"\n\t(clueChange)=\"clue.set($event)\"\n\t(highlightedOption)=\"keyboardHighlighted.set($event.name)\"\n\tignorePresentation\n>\n\t<ng-container *luOption=\"let color; select: selectRef\">\n\t\t<lu-color\n\t\t\tsize=\"XL\"\n\t\t\thiddenName\n\t\t\t[value]=\"color.background\"\n\t\t\t[borderColor]=\"color.borderColor\"\n\t\t\t(mouseenter)=\"mouseHighlighted.set(color.name)\"\n\t\t\t(mouseleave)=\"mouseHighlighted.set('')\"\n\t\t>\n\t\t\t{{ color.name }}\n\t\t</lu-color>\n\t</ng-container>\n\t<ng-container *luDisplayer=\"let color; select: selectRef\">\n\t\t<lu-color size=\"L\" [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t</ng-container>\n\t<ng-template #footer>\n\t\t<div class=\"colorPanel-highlighted\">\n\t\t\t<span class=\"pr-u-colorTextSubtle\">{{ intl().color }}</span>\n\t\t\t<span class=\"pr-u-ellipsis\">{{ highlighted() }}</span>\n\t\t</div>\n\t</ng-template>\n</lu-simple-select>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl?.control?.value) {\n\t\t@let color = currentColorPresentation();\n\t\t<lu-color [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t} @else {\n\t\t<div aria-hidden=\"true\" data-content-before=\"\u2013\"></div>\n\t}\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer components{.color{--components-color-value-before-display: none;--components-color-value-scale: 1;--components-color-value-inlineSize: var(--pr-t-spacings-250);--components-color-value-boxShadowColor: transparent;--components-color-value-backgroundColor: transparent;--components-color-value-channel: clamp(0, (((r * .299) + (g * .587) + (b * .114)) - 128) * -1000, 255);display:flex;align-items:center;gap:var(--pr-t-spacings-100)}.color .color-value{inline-size:var(--components-color-value-inlineSize);aspect-ratio:1;background:var(--components-color-value-backgroundColor);color:rgb(from var(--components-color-value-backgroundColor) var(--components-color-value-channel) var(--components-color-value-channel) var(--components-color-value-channel));border-radius:var(--pr-t-border-radius-small);box-shadow:inset 0 0 0 1px var(--components-color-value-boxShadowColor);scale:var(--components-color-value-scale);transition-property:scale;transition-duration:var(--commons-animations-durations-fast);flex-shrink:0}.color .color-value:before{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;display:var(--components-color-value-before-display);position:absolute;inset:0;place-items:center;font-size:1.5rem}.color-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@layer mods{.color.mod-M{--components-color-value-inlineSize: var(--pr-t-spacings-250)}.color.mod-L{--components-color-value-inlineSize: var(--pr-t-spacings-300)}.color.mod-XL{--components-color-value-inlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50))}[aria-selected=true] .color{--components-color-value-before-display: grid}.optionItem.is-highlighted .color,[role=listbox] .optionItem:hover .color{--components-color-value-scale: calc(7/6)}}@layer components{.colorPicker{--components-colorPicker-input-paddingInlineStart: 0;--components-colorPicker-inlineSize: auto;inline-size:var(--components-colorPicker-inlineSize)}.colorPicker .simpleSelect-field-value{padding:1px;margin:-1px;min-inline-size:0}.colorPicker .simpleSelect-field-input{padding-inline-start:var(--components-colorPicker-input-paddingInlineStart);color:transparent}}@layer mods{.colorPicker.mod-compact{--components-colorPicker-inlineSize: 4.625rem}.colorPicker.mod-compact .color-name{border:0;clip:rect(1px,1px,1px,1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.form-field.mod-S .colorPicker.mod-compact{--components-colorPicker-inlineSize: 3.75rem}.colorPicker.mod-compact.is-clearable{--components-colorPicker-inlineSize: 6.125rem}.form-field.mod-S .colorPicker.mod-compact.is-clearable{--components-colorPicker-inlineSize: 4.875rem}.colorPicker.is-selected:not(.is-searchFilled){--components-colorPicker-input-paddingInlineStart: var(--pr-t-spacings-400)}.form-field.mod-S .colorPicker.is-selected:not(.is-searchFilled){--components-colorPicker-input-paddingInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}}@layer components{.cdk-overlay-pane:has(.colorPanel .lu-picker-content){min-inline-size:0!important;inline-size:17rem}.colorPanel [role=listbox]{display:flex;flex-wrap:wrap;padding:var(--pr-t-spacings-100)}.colorPanel .color{padding:var(--pr-t-spacings-50)}.colorPanel-highlighted{display:flex;padding:var(--pr-t-spacings-50) var(--pr-t-spacings-100);margin:0 var(--pr-t-spacings-100) var(--pr-t-spacings-100);gap:var(--pr-t-spacings-50)}}@layer mods{.colorPanel .lu-picker-content{padding:0}.colorPanel .optionItem-value{padding:0;background-color:transparent!important}.colorPanel .optionItem-value:before{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: true }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
 /**