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

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, untracked, Directive, DestroyRef, effect, InjectionToken, booleanAttribute, signal, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, viewChild, output, LOCALE_ID, numberAttribute, ChangeDetectorRef, model } from '@angular/core';
-import { ɵeffectWithDeps as _effectWithDeps, getIntl, intlInputOptions, IntlParamsPipe, LuClass, PortalDirective } from '@lucca-front/ng/core';
+import { inject, input, computed, untracked, Directive, DestroyRef, effect, InjectionToken, booleanAttribute, signal, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, viewChild, output, LOCALE_ID, numberAttribute, ChangeDetectorRef, model, HostListener } from '@angular/core';
+import { ɵeffectWithDeps as _effectWithDeps, getIntl, intlInputOptions, PortalDirective, IntlParamsPipe, isNil, LuClass } from '@lucca-front/ng/core';
 import { FormFieldComponent, INPUT_FRAMED_INSTANCE, FORM_FIELD_INSTANCE, InputDirective, ɵPresentationDisplayDefaultDirective as _PresentationDisplayDefaultDirective, InputFramedComponent } from '@lucca-front/ng/form-field';
 import { filter, take, startWith } from 'rxjs/operators';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
@@ -12,6 +12,8 @@ import { FILTER_PILL_INPUT_COMPONENT, FilterPillLabelDirective } from '@lucca-fr
 import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
 import { ConnectionPositionPair } from '@angular/cdk/overlay';
 import { PopoverDirective } from '@lucca-front/ng/popover2';
+import { ButtonComponent } from '@lucca/prisme/button';
+import { IconComponent } from '@lucca/prisme/icon';
 import { NgTemplateOutlet } from '@angular/common';
 import { ClearComponent } from '@lucca-front/ng/clear';
 import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
@@ -19,8 +21,7 @@ import { NumberFormat, NumberFormatDirective } from '@lucca-front/ng/number-form
 import { FormLabelComponent } from '@lucca-front/ng/form-label';
 import { InlineMessageComponent } from '@lucca-front/ng/inline-message';
 import { ReadMoreComponent } from '@lucca-front/ng/read-more';
-import { IconComponent } from '@lucca-front/ng/icon';
-import { ButtonComponent } from '@lucca/prisme/button';
+import { IconComponent as IconComponent$1 } from '@lucca-front/ng/icon';
 import { ColorComponent } from '@lucca-front/ng/color';
 import { LuDisplayerDirective, LuOptionDirective, LuCoreSelectNoClueDirective } from '@lucca-front/ng/core-select';
 import { LuSimpleSelectInputComponent } from '@lucca-front/ng/simple-select';
@@ -30,8 +31,10 @@ class FormFieldIdDirective {
     constructor() {
         this.#formFieldComponent = inject(FormFieldComponent);
         this.suffix = input('', { ...(ngDevMode ? { debugName: "suffix" } : /* istanbul ignore next */ {}), alias: 'luFormFieldId' });
-        this.labelledByStrategy = input('append', ...(ngDevMode ? [{ debugName: "labelledByStrategy" }] : /* istanbul ignore next */ []));
-        this.id = computed(() => `${this.#formFieldComponent.id()}-${this.suffix()}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        this.labelledByStrategy = input('append', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelledByStrategy" }] : /* istanbul ignore next */ []));
+        this.id = computed(() => `${this.#formFieldComponent.id()}-${this.suffix()}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         _effectWithDeps([this.suffix], (suffix) => {
             if (suffix && this.#formFieldComponent.ready) {
                 this.#applyLabelledBy(this.id(), this.labelledByStrategy());
@@ -53,10 +56,10 @@ class FormFieldIdDirective {
             this.#formFieldComponent.removeLabelledBy(this.id());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FormFieldIdDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: FormFieldIdDirective, isStandalone: true, selector: "[luFormFieldId]", inputs: { suffix: { classPropertyName: "suffix", publicName: "luFormFieldId", isSignal: true, isRequired: false, transformFunction: null }, labelledByStrategy: { classPropertyName: "labelledByStrategy", publicName: "labelledByStrategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormFieldIdDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: FormFieldIdDirective, isStandalone: true, selector: "[luFormFieldId]", inputs: { suffix: { classPropertyName: "suffix", publicName: "luFormFieldId", isSignal: true, isRequired: false, transformFunction: null }, labelledByStrategy: { classPropertyName: "labelledByStrategy", publicName: "labelledByStrategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FormFieldIdDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormFieldIdDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luFormFieldId]',
@@ -66,6 +69,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "luFormFieldId", required: false }] }], labelledByStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelledByStrategy", required: false }] }] } });
 
+/**
+ * Available FormField Types
+ */
+const FORM_FIELD_ID_LABELLED_BY_STRATEGY = ['prepend', 'append'];
+
 //Source: https://netbasal.com/forwarding-form-controls-to-custom-control-components-in-angular-701e8406cc55
 // Heavily modified to handle ngModel properly
 function injectNgControl() {
@@ -116,7 +124,10 @@ function generateMirrorControl(_ngControl, field) {
     // Disabled | Field -> Control
     effect(() => (field.state().disabled() ? control.disable() : control.enable()));
     // Error | Field -> Control
-    effect(() => control.setErrors(field.state().errors()));
+    effect(() => {
+        const errors = field.state().errors();
+        control.setErrors(errors.length ? toValidationErrors(errors) : null);
+    });
     ngControl.registerOnChange ??= () => { };
     ngControl.markAsTouched ??= () => { };
     ngControl.registerOnDisabledChange ??= () => { };
@@ -127,14 +138,20 @@ function generateMirrorControl(_ngControl, field) {
     // eslint-disable-next-line
     return ngControl;
 }
+/** Maps signal-forms ValidationError[] to reactive-forms' flat ValidationErrors map. */
+function toValidationErrors(errors) {
+    // Keyed by `kind`; the message (or `true` when absent) is the value. Duplicate kinds are
+    // last-wins, matching reactive-forms' single-value-per-key error map.
+    return Object.fromEntries(errors.map((error) => [error.kind, error.message ?? true]));
+}
 
 //Source: https://netbasal.com/forwarding-form-controls-to-custom-control-components-in-angular-701e8406cc55
 class NoopValueAccessorDirective {
     writeValue() { }
     registerOnChange() { }
     registerOnTouched() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NoopValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: NoopValueAccessorDirective, isStandalone: true, selector: "[luNoopValueAccessor]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NoopValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: NoopValueAccessorDirective, isStandalone: true, selector: "[luNoopValueAccessor]", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -142,7 +159,7 @@ class NoopValueAccessorDirective {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NoopValueAccessorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NoopValueAccessorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luNoopValueAccessor]',
@@ -183,13 +200,19 @@ class CheckboxInputComponent {
          * Should set aria-checked='mixed' attribute ?
          */
         this.mixed = input(false, { ...(ngDevMode ? { debugName: "mixed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.isFilterPill = signal(false, ...(ngDevMode ? [{ debugName: "isFilterPill" }] : /* istanbul ignore next */ []));
+        this.isFilterPill = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFilterPill" }] : /* istanbul ignore next */ []));
         this.filterPillInputId = `lu-checkbox-pill-input-${nextId$3++}`;
-        this.filterPillLayout = signal('checkable', ...(ngDevMode ? [{ debugName: "filterPillLayout" }] : /* istanbul ignore next */ []));
-        this.isFilterPillEmpty = signal(true, ...(ngDevMode ? [{ debugName: "isFilterPillEmpty" }] : /* istanbul ignore next */ []));
-        this.isFilterPillClearable = signal(false, ...(ngDevMode ? [{ debugName: "isFilterPillClearable" }] : /* istanbul ignore next */ []));
-        this.hideCombobox = signal(true, ...(ngDevMode ? [{ debugName: "hideCombobox" }] : /* istanbul ignore next */ []));
-        this.showColon = signal(false, ...(ngDevMode ? [{ debugName: "showColon" }] : /* istanbul ignore next */ []));
+        this.filterPillLayout = signal('checkable', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterPillLayout" }] : /* istanbul ignore next */ []));
+        this.isFilterPillEmpty = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFilterPillEmpty" }] : /* istanbul ignore next */ []));
+        this.isFilterPillClearable = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFilterPillClearable" }] : /* istanbul ignore next */ []));
+        this.hideCombobox = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hideCombobox" }] : /* istanbul ignore next */ []));
+        this.showColon = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showColon" }] : /* istanbul ignore next */ []));
         this.ngControl = injectNgControl();
         if (this.formField) {
             this.formField.layout.set('checkable');
@@ -205,15 +228,15 @@ class CheckboxInputComponent {
         this.isFilterPill.set(true);
     }
     onFilterPillClick() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CheckboxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CheckboxInputComponent, isStandalone: true, selector: "lu-checkbox-input", inputs: { checklist: { classPropertyName: "checklist", publicName: "checklist", isSignal: true, isRequired: false, transformFunction: null }, mixed: { classPropertyName: "mixed", publicName: "mixed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.checkboxField": "true", "class.mod-checklist": "checklist()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CheckboxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: CheckboxInputComponent, isStandalone: true, selector: "lu-checkbox-input", inputs: { checklist: { classPropertyName: "checklist", publicName: "checklist", isSignal: true, isRequired: false, transformFunction: null }, mixed: { classPropertyName: "mixed", publicName: "mixed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.checkboxField": "true", "class.mod-checklist": "checklist()" } }, providers: [
             {
                 provide: FILTER_PILL_INPUT_COMPONENT,
                 useExisting: forwardRef(() => CheckboxInputComponent),
             },
-        ], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "@if (!isFilterPill()) {\n\t<input\n\t\tluInput\n\t\ttype=\"checkbox\"\n\t\tclass=\"checkboxField-input\"\n\t\t[class.inputFramed-header-input]=\"framed\"\n\t\t[formControl]=\"ngControl.control\"\n\t\t[attr.aria-checked]=\"mixed() ? 'mixed' : null\"\n\t/>\n\t<span class=\"checkboxField-icon\" [class.inputFramed-header-icon]=\"framed\" aria-hidden=\"true\"\n\t\t><span class=\"checkboxField-icon-check\"></span\n\t></span>\n}\n\n<ng-container *luFilterPillLabel=\"let label = label\">\n\t<label class=\"filterPill-label\" [attr.for]=\"filterPillInputId\" luTooltip luTooltipWhenEllipsis=\"true\">\n\t\t{{ label }}\n\t\t<span class=\"filterPill-label-placeholder\" aria-hidden=\"true\" [attr.data-content-before]=\"label\"></span>\n\t</label>\n\t<span class=\"filterPill-checkbox\">\n\t\t<input\n\t\t\ttype=\"checkbox\"\n\t\t\tclass=\"filterPill-checkbox-input\"\n\t\t\tluInput\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[attr.aria-checked]=\"mixed() ? 'mixed' : null\"\n\t\t\t[attr.id]=\"filterPillInputId\"\n\t\t/>\n\t\t<span class=\"filterPill-checkbox-icon\" aria-hidden=\"true\">\n\t\t\t<span class=\"filterPill-checkbox-icon-check\"></span>\n\t\t</span>\n\t</span>\n</ng-container>\n<ng-container *luPresentationDisplayDefault>{{ ngControl.value ? intl.yes : intl.no }}</ng-container>\n", styles: ["@layer components{.checkboxField{--component-checkboxField-size: 1.25rem;--component-checkboxField-top: var(--pr-t-spacings-25);--component-checkboxField-borderRadius: var(--pr-t-border-radius-small);--component-checkboxField-borderColor: var(--palettes-neutral-700);--component-checkboxField-backgroundColor: var(--palettes-neutral-0);--component-checkboxField-icon-fontSize: var(--pr-t-font-body-S-lineHeight);--component-checkboxField-icon-color: var(--palettes-neutral-0);--component-checkboxField-icon-scale: 0;position:relative;inline-size:fit-content;block-size:fit-content;display:grid;grid-template-areas:\"checkbox\";grid-template-columns:var(--component-checkboxField-size);grid-template-rows:var(--component-checkboxField-size)}.checkboxField-icon{border:2px solid var(--component-checkboxField-borderColor);border-radius:var(--component-checkboxField-borderRadius);color:var(--component-checkboxField-icon-color);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--component-checkboxField-backgroundColor);cursor:pointer;grid-area:checkbox;display:flex}@media(prefers-reduced-motion:reduce){.checkboxField-icon{transition-property:none}}.checkboxField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:var(--component-checkboxField-borderRadius)}.checkboxField-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(var(--component-checkboxField-icon-scale));transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transform-origin:center;transition-timing-function:cubic-bezier(.5,-.5,.5,0)}@media(prefers-reduced-motion:reduce){.checkboxField-icon-check{transition-property:none}}.checkboxField-icon-check:before{font-weight:var(--pr-t-font-fontWeight-regular);font-size:var(--component-checkboxField-icon-fontSize);direction:ltr;font-family:var(--icon-fontFamily);font-feature-settings:\"liga\";font-style:normal;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;overflow-wrap:normal;content:\"\\e97d\"/\"\"}.checkboxField-input{z-index:1;opacity:.0001;cursor:pointer;grid-area:checkbox;inline-size:100%;block-size:100%}}@layer mods{.checkboxField.mod-S{--component-checkboxField-size: 1rem;--component-checkboxField-borderRadius: var(--pr-t-border-radius-50);--component-checkboxField-icon-fontSize: var(--pr-t-font-body-XS-lineHeight);--component-checkboxField-label-fontSize: var(--pr-t-font-body-S-fontSize);--component-checkboxField-label-lineHeight: var(--pr-t-font-body-S-lineHeight)}.checkboxField.mod-checklist{--component-checkboxField-borderRadius: var(--commons-borderRadius-full);--component-checkboxField-borderColor: var(--palettes-neutral-300);--component-checkboxField-icon-color: var(--palettes-neutral-300);--component-checkboxField-icon-scale: 1}.formLabel:has(~.checkboxField.mod-checklist>.checkboxField-input:not(:disabled):checked){--components-formLabel-color: var(--pr-t-color-text-subtle)}@keyframes checklist-bounce{0%{transform:scale(1)}55%{transform:scale(1.3)}to{transform:scale(1)}}.checkboxField.mod-checklist .checkboxField-input:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-50);--component-checkboxField-borderColor: var(--palettes-success-600);--component-checkboxField-icon-color: var(--palettes-success-600)}.checkboxField.mod-checklist .checkboxField-input:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-100)}.checkboxField.mod-checklist .checkboxField-input:disabled~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-neutral-0);--component-checkboxField-borderColor: var(--palettes-neutral-300);--component-checkboxField-icon-scale: 0}.checkboxField.mod-checklist .checkboxField-input:checked~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-700);--component-checkboxField-borderColor: var(--palettes-success-700);--component-checkboxField-icon-color: var(--palettes-neutral-0)}.checkboxField.mod-checklist .checkboxField-input:checked~.checkboxField-icon .checkboxField-icon-check{animation:var(--commons-animations-durations-standard) ease-in-out checklist-bounce}.checkboxField.mod-checklist .checkboxField-input:checked:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-800);--component-checkboxField-borderColor: var(--palettes-success-800);--component-checkboxField-icon-color: var(--palettes-neutral-0)}.checkboxField.mod-checklist .checkboxField-input:checked:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-900);--component-checkboxField-borderColor: var(--palettes-success-900)}.checkboxField.mod-checklist .checkboxField-input:checked:disabled~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-neutral-100);--component-checkboxField-borderColor: var(--palettes-neutral-100);--component-checkboxField-icon-color: var(--palettes-neutral-600)}.checkboxField.mod-checklist:has(.checkboxField-input:focus-visible) .checkboxField-input~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-50);--component-checkboxField-borderColor: var(--palettes-success-600);--component-checkboxField-icon-color: var(--palettes-success-600)}.checkboxField.mod-checklist:has(.checkboxField-input:focus-visible) .checkboxField-input:checked~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-800);--component-checkboxField-borderColor: var(--palettes-success-800);--component-checkboxField-icon-color: var(--palettes-neutral-0)}}@layer mods{.checkboxField-input[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-700, var(--palettes-product-700));--component-checkboxField-borderColor: var(--palettes-700, var(--palettes-product-700))}.checkboxField-input[aria-checked=mixed]~.checkboxField-icon .checkboxField-icon-check{--component-checkboxField-icon-scale: 1;transition-timing-function:cubic-bezier(.5,1,.5,1.5)}.checkboxField-input[aria-checked=mixed]~.checkboxField-icon .checkboxField-icon-check:before{content:\"\\e975\"/\"\"}.checkboxField-input:focus-visible~.checkboxField-icon:after{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.checkboxField-input:hover~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-neutral-600)}.checkboxField-input:hover[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-800, var(--palettes-product-800));--component-checkboxField-borderColor: var(--palettes-800, var(--palettes-product-800))}.checkboxField-input:active~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-neutral-900)}.checkboxField-input:active[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-900, var(--palettes-product-900));--component-checkboxField-borderColor: var(--palettes-900, var(--palettes-product-900))}.checkboxField-input:disabled{cursor:default}.checkboxField-input:disabled~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-neutral-500)}.checkboxField-input:disabled[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--commons-disabled-background);--component-checkboxField-borderColor: var(--commons-disabled-background);--component-checkboxField-icon-color: var(--palettes-neutral-600)}.checkboxField-input[aria-invalid=true]~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-error-700)}.checkboxField-input[aria-invalid=true][aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-700);--component-checkboxField-borderColor: var(--palettes-error-700)}.checkboxField-input[aria-invalid=true]:hover~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-error-800)}.checkboxField-input[aria-invalid=true]:hover[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-800);--component-checkboxField-borderColor: var(--palettes-error-800)}.checkboxField-input[aria-invalid=true]:active~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-error-900)}.checkboxField-input[aria-invalid=true]:active[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-900);--component-checkboxField-borderColor: var(--palettes-error-900)}.checkboxField-input:checked~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-700, var(--palettes-product-700));--component-checkboxField-borderColor: var(--palettes-700, var(--palettes-product-700))}.checkboxField-input:checked~.checkboxField-icon .checkboxField-icon-check{--component-checkboxField-icon-scale: 1;transition-timing-function:cubic-bezier(.5,1,.5,1.5)}.checkboxField-input:checked:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-800, var(--palettes-product-800));--component-checkboxField-borderColor: var(--palettes-800, var(--palettes-product-800))}.checkboxField-input:checked:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-900, var(--palettes-product-900));--component-checkboxField-borderColor: var(--palettes-900, var(--palettes-product-900))}.checkboxField-input:checked:disabled~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--commons-disabled-background);--component-checkboxField-borderColor: var(--commons-disabled-background);--component-checkboxField-icon-color: var(--palettes-neutral-600)}.checkboxField-input:checked[aria-invalid=true]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-700);--component-checkboxField-borderColor: var(--palettes-error-700)}.checkboxField-input:checked[aria-invalid=true]:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-800);--component-checkboxField-borderColor: var(--palettes-error-800)}.checkboxField-input:checked[aria-invalid=true]:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-900);--component-checkboxField-borderColor: var(--palettes-error-900)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "directive", type: FilterPillLabelDirective, selector: "[luFilterPillLabel]" }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "@if (!isFilterPill()) {\n\t<input\n\t\tluInput\n\t\ttype=\"checkbox\"\n\t\tclass=\"checkboxField-input\"\n\t\t[class.inputFramed-header-input]=\"framed\"\n\t\t[formControl]=\"ngControl.control\"\n\t\t[attr.aria-checked]=\"mixed() ? 'mixed' : null\"\n\t/>\n\t<span class=\"checkboxField-icon\" [class.inputFramed-header-icon]=\"framed\" aria-hidden=\"true\"\n\t\t><span class=\"checkboxField-icon-check\"></span\n\t></span>\n}\n\n<ng-container *luFilterPillLabel=\"let label = label\">\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"filterPill mod-checkbox\"\n\t\t[attr.aria-pressed]=\"ngControl.control.value\"\n\t\t[attr.disabled]=\"ngControl.control.disabled ? 'disabled' : null\"\n\t\t(click)=\"ngControl.control.setValue(!ngControl.control.value)\"\n\t\t#button\n\t>\n\t\t<span class=\"filterPill-checkbox\">\n\t\t\t<span class=\"filterPill-checkbox-input\"></span>\n\t\t\t<span class=\"filterPill-checkbox-icon\" aria-hidden=\"true\">\n\t\t\t\t<span class=\"filterPill-checkbox-icon-check\"></span>\n\t\t\t</span>\n\t\t</span>\n\t\t<span class=\"filterPill-label\" [luTooltip]=\"label\" luTooltipWhenEllipsis [luTooltipAnchor]=\"button\">\n\t\t\t{{ label }}\n\t\t\t<span class=\"filterPill-label-placeholder\" aria-hidden=\"true\" [attr.data-content-before]=\"label\"></span>\n\t\t</span>\n\t</button>\n</ng-container>\n<ng-container *luPresentationDisplayDefault>{{ ngControl.value ? intl.yes : intl.no }}</ng-container>\n", styles: ["@layer components{.checkboxField{--component-checkboxField-size: 1.25rem;--component-checkboxField-top: var(--pr-t-spacings-25);--component-checkboxField-borderRadius: var(--pr-t-border-radius-small);--component-checkboxField-borderColor: var(--palettes-neutral-700);--component-checkboxField-backgroundColor: var(--palettes-neutral-0);--component-checkboxField-icon-fontSize: var(--pr-t-font-body-S-lineHeight);--component-checkboxField-icon-color: var(--palettes-neutral-0);--component-checkboxField-icon-scale: 0;position:relative;inline-size:fit-content;block-size:fit-content;display:grid;grid-template-areas:\"checkbox\";grid-template-columns:var(--component-checkboxField-size);grid-template-rows:var(--component-checkboxField-size)}.checkboxField-icon{border:2px solid var(--component-checkboxField-borderColor);border-radius:var(--component-checkboxField-borderRadius);color:var(--component-checkboxField-icon-color);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--component-checkboxField-backgroundColor);cursor:pointer;grid-area:checkbox;display:flex}@media(prefers-reduced-motion:reduce){.checkboxField-icon{transition-property:none}}.checkboxField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:var(--component-checkboxField-borderRadius)}.checkboxField-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(var(--component-checkboxField-icon-scale));transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transform-origin:center;transition-timing-function:cubic-bezier(.5,-.5,.5,0)}@media(prefers-reduced-motion:reduce){.checkboxField-icon-check{transition-property:none}}.checkboxField-icon-check:before{font-weight:var(--pr-t-font-fontWeight-regular);font-size:var(--component-checkboxField-icon-fontSize);direction:ltr;font-family:var(--icon-fontFamily);font-feature-settings:\"liga\";font-style:normal;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;overflow-wrap:normal;content:\"\\e97d\"/\"\"}.checkboxField-input{z-index:1;opacity:.0001;cursor:pointer;grid-area:checkbox;inline-size:100%;block-size:100%}}@layer mods{.checkboxField.mod-S{--component-checkboxField-size: 1rem;--component-checkboxField-borderRadius: var(--pr-t-border-radius-50);--component-checkboxField-icon-fontSize: var(--pr-t-font-body-XS-lineHeight);--component-checkboxField-label-fontSize: var(--pr-t-font-body-S-fontSize);--component-checkboxField-label-lineHeight: var(--pr-t-font-body-S-lineHeight)}.checkboxField.mod-checklist{--component-checkboxField-borderRadius: var(--commons-borderRadius-full);--component-checkboxField-borderColor: var(--palettes-neutral-300);--component-checkboxField-icon-color: var(--palettes-neutral-300);--component-checkboxField-icon-scale: 1}.formLabel:has(~.checkboxField.mod-checklist>.checkboxField-input:not(:disabled):checked){--components-formLabel-color: var(--pr-t-color-text-subtle)}@keyframes checklist-bounce{0%{transform:scale(1)}55%{transform:scale(1.3)}to{transform:scale(1)}}.checkboxField.mod-checklist .checkboxField-input:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-50);--component-checkboxField-borderColor: var(--palettes-success-600);--component-checkboxField-icon-color: var(--palettes-success-600)}.checkboxField.mod-checklist .checkboxField-input:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-100)}.checkboxField.mod-checklist .checkboxField-input:disabled~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-neutral-0);--component-checkboxField-borderColor: var(--palettes-neutral-300);--component-checkboxField-icon-scale: 0}.checkboxField.mod-checklist .checkboxField-input:checked~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-700);--component-checkboxField-borderColor: var(--palettes-success-700);--component-checkboxField-icon-color: var(--palettes-neutral-0)}.checkboxField.mod-checklist .checkboxField-input:checked~.checkboxField-icon .checkboxField-icon-check{animation:var(--commons-animations-durations-standard) ease-in-out checklist-bounce}.checkboxField.mod-checklist .checkboxField-input:checked:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-800);--component-checkboxField-borderColor: var(--palettes-success-800);--component-checkboxField-icon-color: var(--palettes-neutral-0)}.checkboxField.mod-checklist .checkboxField-input:checked:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-900);--component-checkboxField-borderColor: var(--palettes-success-900)}.checkboxField.mod-checklist .checkboxField-input:checked:disabled~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-neutral-100);--component-checkboxField-borderColor: var(--palettes-neutral-100);--component-checkboxField-icon-color: var(--palettes-neutral-600)}.checkboxField.mod-checklist:has(.checkboxField-input:focus-visible) .checkboxField-input~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-50);--component-checkboxField-borderColor: var(--palettes-success-600);--component-checkboxField-icon-color: var(--palettes-success-600)}.checkboxField.mod-checklist:has(.checkboxField-input:focus-visible) .checkboxField-input:checked~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-800);--component-checkboxField-borderColor: var(--palettes-success-800);--component-checkboxField-icon-color: var(--palettes-neutral-0)}}@layer mods{.checkboxField-input[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-700, var(--palettes-product-700));--component-checkboxField-borderColor: var(--palettes-700, var(--palettes-product-700))}.checkboxField-input[aria-checked=mixed]~.checkboxField-icon .checkboxField-icon-check{--component-checkboxField-icon-scale: 1;transition-timing-function:cubic-bezier(.5,1,.5,1.5)}.checkboxField-input[aria-checked=mixed]~.checkboxField-icon .checkboxField-icon-check:before{content:\"\\e975\"/\"\"}.checkboxField-input:focus-visible~.checkboxField-icon:after{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.checkboxField-input:hover~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-neutral-600)}.checkboxField-input:hover[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-800, var(--palettes-product-800));--component-checkboxField-borderColor: var(--palettes-800, var(--palettes-product-800))}.checkboxField-input:active~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-neutral-900)}.checkboxField-input:active[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-900, var(--palettes-product-900));--component-checkboxField-borderColor: var(--palettes-900, var(--palettes-product-900))}.checkboxField-input:disabled{cursor:default}.checkboxField-input:disabled~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-neutral-300)}.checkboxField-input:disabled[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--commons-disabled-background);--component-checkboxField-borderColor: var(--commons-disabled-background);--component-checkboxField-icon-color: var(--palettes-neutral-600)}.checkboxField-input[aria-invalid=true]~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-error-700)}.checkboxField-input[aria-invalid=true][aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-700);--component-checkboxField-borderColor: var(--palettes-error-700)}.checkboxField-input[aria-invalid=true]:hover~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-error-800)}.checkboxField-input[aria-invalid=true]:hover[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-800);--component-checkboxField-borderColor: var(--palettes-error-800)}.checkboxField-input[aria-invalid=true]:active~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-error-900)}.checkboxField-input[aria-invalid=true]:active[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-900);--component-checkboxField-borderColor: var(--palettes-error-900)}.checkboxField-input:checked~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-700, var(--palettes-product-700));--component-checkboxField-borderColor: var(--palettes-700, var(--palettes-product-700))}.checkboxField-input:checked~.checkboxField-icon .checkboxField-icon-check{--component-checkboxField-icon-scale: 1;transition-timing-function:cubic-bezier(.5,1,.5,1.5)}.checkboxField-input:checked:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-800, var(--palettes-product-800));--component-checkboxField-borderColor: var(--palettes-800, var(--palettes-product-800))}.checkboxField-input:checked:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-900, var(--palettes-product-900));--component-checkboxField-borderColor: var(--palettes-900, var(--palettes-product-900))}.checkboxField-input:checked:disabled~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--commons-disabled-background);--component-checkboxField-borderColor: var(--commons-disabled-background);--component-checkboxField-icon-color: var(--palettes-neutral-600)}.checkboxField-input:checked[aria-invalid=true]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-700);--component-checkboxField-borderColor: var(--palettes-error-700)}.checkboxField-input:checked[aria-invalid=true]:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-800);--component-checkboxField-borderColor: var(--palettes-error-800)}.checkboxField-input:checked[aria-invalid=true]:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-900);--component-checkboxField-borderColor: var(--palettes-error-900)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { 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: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "directive", type: FilterPillLabelDirective, selector: "[luFilterPillLabel]" }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CheckboxInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CheckboxInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-checkbox-input', imports: [ReactiveFormsModule, InputDirective, FilterPillLabelDirective, LuTooltipTriggerDirective, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -223,7 +246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     ], host: {
                         '[class.checkboxField]': 'true',
                         '[class.mod-checklist]': 'checklist()',
-                    }, template: "@if (!isFilterPill()) {\n\t<input\n\t\tluInput\n\t\ttype=\"checkbox\"\n\t\tclass=\"checkboxField-input\"\n\t\t[class.inputFramed-header-input]=\"framed\"\n\t\t[formControl]=\"ngControl.control\"\n\t\t[attr.aria-checked]=\"mixed() ? 'mixed' : null\"\n\t/>\n\t<span class=\"checkboxField-icon\" [class.inputFramed-header-icon]=\"framed\" aria-hidden=\"true\"\n\t\t><span class=\"checkboxField-icon-check\"></span\n\t></span>\n}\n\n<ng-container *luFilterPillLabel=\"let label = label\">\n\t<label class=\"filterPill-label\" [attr.for]=\"filterPillInputId\" luTooltip luTooltipWhenEllipsis=\"true\">\n\t\t{{ label }}\n\t\t<span class=\"filterPill-label-placeholder\" aria-hidden=\"true\" [attr.data-content-before]=\"label\"></span>\n\t</label>\n\t<span class=\"filterPill-checkbox\">\n\t\t<input\n\t\t\ttype=\"checkbox\"\n\t\t\tclass=\"filterPill-checkbox-input\"\n\t\t\tluInput\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[attr.aria-checked]=\"mixed() ? 'mixed' : null\"\n\t\t\t[attr.id]=\"filterPillInputId\"\n\t\t/>\n\t\t<span class=\"filterPill-checkbox-icon\" aria-hidden=\"true\">\n\t\t\t<span class=\"filterPill-checkbox-icon-check\"></span>\n\t\t</span>\n\t</span>\n</ng-container>\n<ng-container *luPresentationDisplayDefault>{{ ngControl.value ? intl.yes : intl.no }}</ng-container>\n", styles: ["@layer components{.checkboxField{--component-checkboxField-size: 1.25rem;--component-checkboxField-top: var(--pr-t-spacings-25);--component-checkboxField-borderRadius: var(--pr-t-border-radius-small);--component-checkboxField-borderColor: var(--palettes-neutral-700);--component-checkboxField-backgroundColor: var(--palettes-neutral-0);--component-checkboxField-icon-fontSize: var(--pr-t-font-body-S-lineHeight);--component-checkboxField-icon-color: var(--palettes-neutral-0);--component-checkboxField-icon-scale: 0;position:relative;inline-size:fit-content;block-size:fit-content;display:grid;grid-template-areas:\"checkbox\";grid-template-columns:var(--component-checkboxField-size);grid-template-rows:var(--component-checkboxField-size)}.checkboxField-icon{border:2px solid var(--component-checkboxField-borderColor);border-radius:var(--component-checkboxField-borderRadius);color:var(--component-checkboxField-icon-color);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--component-checkboxField-backgroundColor);cursor:pointer;grid-area:checkbox;display:flex}@media(prefers-reduced-motion:reduce){.checkboxField-icon{transition-property:none}}.checkboxField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:var(--component-checkboxField-borderRadius)}.checkboxField-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(var(--component-checkboxField-icon-scale));transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transform-origin:center;transition-timing-function:cubic-bezier(.5,-.5,.5,0)}@media(prefers-reduced-motion:reduce){.checkboxField-icon-check{transition-property:none}}.checkboxField-icon-check:before{font-weight:var(--pr-t-font-fontWeight-regular);font-size:var(--component-checkboxField-icon-fontSize);direction:ltr;font-family:var(--icon-fontFamily);font-feature-settings:\"liga\";font-style:normal;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;overflow-wrap:normal;content:\"\\e97d\"/\"\"}.checkboxField-input{z-index:1;opacity:.0001;cursor:pointer;grid-area:checkbox;inline-size:100%;block-size:100%}}@layer mods{.checkboxField.mod-S{--component-checkboxField-size: 1rem;--component-checkboxField-borderRadius: var(--pr-t-border-radius-50);--component-checkboxField-icon-fontSize: var(--pr-t-font-body-XS-lineHeight);--component-checkboxField-label-fontSize: var(--pr-t-font-body-S-fontSize);--component-checkboxField-label-lineHeight: var(--pr-t-font-body-S-lineHeight)}.checkboxField.mod-checklist{--component-checkboxField-borderRadius: var(--commons-borderRadius-full);--component-checkboxField-borderColor: var(--palettes-neutral-300);--component-checkboxField-icon-color: var(--palettes-neutral-300);--component-checkboxField-icon-scale: 1}.formLabel:has(~.checkboxField.mod-checklist>.checkboxField-input:not(:disabled):checked){--components-formLabel-color: var(--pr-t-color-text-subtle)}@keyframes checklist-bounce{0%{transform:scale(1)}55%{transform:scale(1.3)}to{transform:scale(1)}}.checkboxField.mod-checklist .checkboxField-input:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-50);--component-checkboxField-borderColor: var(--palettes-success-600);--component-checkboxField-icon-color: var(--palettes-success-600)}.checkboxField.mod-checklist .checkboxField-input:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-100)}.checkboxField.mod-checklist .checkboxField-input:disabled~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-neutral-0);--component-checkboxField-borderColor: var(--palettes-neutral-300);--component-checkboxField-icon-scale: 0}.checkboxField.mod-checklist .checkboxField-input:checked~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-700);--component-checkboxField-borderColor: var(--palettes-success-700);--component-checkboxField-icon-color: var(--palettes-neutral-0)}.checkboxField.mod-checklist .checkboxField-input:checked~.checkboxField-icon .checkboxField-icon-check{animation:var(--commons-animations-durations-standard) ease-in-out checklist-bounce}.checkboxField.mod-checklist .checkboxField-input:checked:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-800);--component-checkboxField-borderColor: var(--palettes-success-800);--component-checkboxField-icon-color: var(--palettes-neutral-0)}.checkboxField.mod-checklist .checkboxField-input:checked:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-900);--component-checkboxField-borderColor: var(--palettes-success-900)}.checkboxField.mod-checklist .checkboxField-input:checked:disabled~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-neutral-100);--component-checkboxField-borderColor: var(--palettes-neutral-100);--component-checkboxField-icon-color: var(--palettes-neutral-600)}.checkboxField.mod-checklist:has(.checkboxField-input:focus-visible) .checkboxField-input~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-50);--component-checkboxField-borderColor: var(--palettes-success-600);--component-checkboxField-icon-color: var(--palettes-success-600)}.checkboxField.mod-checklist:has(.checkboxField-input:focus-visible) .checkboxField-input:checked~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-800);--component-checkboxField-borderColor: var(--palettes-success-800);--component-checkboxField-icon-color: var(--palettes-neutral-0)}}@layer mods{.checkboxField-input[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-700, var(--palettes-product-700));--component-checkboxField-borderColor: var(--palettes-700, var(--palettes-product-700))}.checkboxField-input[aria-checked=mixed]~.checkboxField-icon .checkboxField-icon-check{--component-checkboxField-icon-scale: 1;transition-timing-function:cubic-bezier(.5,1,.5,1.5)}.checkboxField-input[aria-checked=mixed]~.checkboxField-icon .checkboxField-icon-check:before{content:\"\\e975\"/\"\"}.checkboxField-input:focus-visible~.checkboxField-icon:after{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.checkboxField-input:hover~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-neutral-600)}.checkboxField-input:hover[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-800, var(--palettes-product-800));--component-checkboxField-borderColor: var(--palettes-800, var(--palettes-product-800))}.checkboxField-input:active~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-neutral-900)}.checkboxField-input:active[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-900, var(--palettes-product-900));--component-checkboxField-borderColor: var(--palettes-900, var(--palettes-product-900))}.checkboxField-input:disabled{cursor:default}.checkboxField-input:disabled~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-neutral-500)}.checkboxField-input:disabled[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--commons-disabled-background);--component-checkboxField-borderColor: var(--commons-disabled-background);--component-checkboxField-icon-color: var(--palettes-neutral-600)}.checkboxField-input[aria-invalid=true]~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-error-700)}.checkboxField-input[aria-invalid=true][aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-700);--component-checkboxField-borderColor: var(--palettes-error-700)}.checkboxField-input[aria-invalid=true]:hover~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-error-800)}.checkboxField-input[aria-invalid=true]:hover[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-800);--component-checkboxField-borderColor: var(--palettes-error-800)}.checkboxField-input[aria-invalid=true]:active~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-error-900)}.checkboxField-input[aria-invalid=true]:active[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-900);--component-checkboxField-borderColor: var(--palettes-error-900)}.checkboxField-input:checked~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-700, var(--palettes-product-700));--component-checkboxField-borderColor: var(--palettes-700, var(--palettes-product-700))}.checkboxField-input:checked~.checkboxField-icon .checkboxField-icon-check{--component-checkboxField-icon-scale: 1;transition-timing-function:cubic-bezier(.5,1,.5,1.5)}.checkboxField-input:checked:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-800, var(--palettes-product-800));--component-checkboxField-borderColor: var(--palettes-800, var(--palettes-product-800))}.checkboxField-input:checked:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-900, var(--palettes-product-900));--component-checkboxField-borderColor: var(--palettes-900, var(--palettes-product-900))}.checkboxField-input:checked:disabled~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--commons-disabled-background);--component-checkboxField-borderColor: var(--commons-disabled-background);--component-checkboxField-icon-color: var(--palettes-neutral-600)}.checkboxField-input:checked[aria-invalid=true]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-700);--component-checkboxField-borderColor: var(--palettes-error-700)}.checkboxField-input:checked[aria-invalid=true]:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-800);--component-checkboxField-borderColor: var(--palettes-error-800)}.checkboxField-input:checked[aria-invalid=true]:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-900);--component-checkboxField-borderColor: var(--palettes-error-900)}}\n"] }]
+                    }, template: "@if (!isFilterPill()) {\n\t<input\n\t\tluInput\n\t\ttype=\"checkbox\"\n\t\tclass=\"checkboxField-input\"\n\t\t[class.inputFramed-header-input]=\"framed\"\n\t\t[formControl]=\"ngControl.control\"\n\t\t[attr.aria-checked]=\"mixed() ? 'mixed' : null\"\n\t/>\n\t<span class=\"checkboxField-icon\" [class.inputFramed-header-icon]=\"framed\" aria-hidden=\"true\"\n\t\t><span class=\"checkboxField-icon-check\"></span\n\t></span>\n}\n\n<ng-container *luFilterPillLabel=\"let label = label\">\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"filterPill mod-checkbox\"\n\t\t[attr.aria-pressed]=\"ngControl.control.value\"\n\t\t[attr.disabled]=\"ngControl.control.disabled ? 'disabled' : null\"\n\t\t(click)=\"ngControl.control.setValue(!ngControl.control.value)\"\n\t\t#button\n\t>\n\t\t<span class=\"filterPill-checkbox\">\n\t\t\t<span class=\"filterPill-checkbox-input\"></span>\n\t\t\t<span class=\"filterPill-checkbox-icon\" aria-hidden=\"true\">\n\t\t\t\t<span class=\"filterPill-checkbox-icon-check\"></span>\n\t\t\t</span>\n\t\t</span>\n\t\t<span class=\"filterPill-label\" [luTooltip]=\"label\" luTooltipWhenEllipsis [luTooltipAnchor]=\"button\">\n\t\t\t{{ label }}\n\t\t\t<span class=\"filterPill-label-placeholder\" aria-hidden=\"true\" [attr.data-content-before]=\"label\"></span>\n\t\t</span>\n\t</button>\n</ng-container>\n<ng-container *luPresentationDisplayDefault>{{ ngControl.value ? intl.yes : intl.no }}</ng-container>\n", styles: ["@layer components{.checkboxField{--component-checkboxField-size: 1.25rem;--component-checkboxField-top: var(--pr-t-spacings-25);--component-checkboxField-borderRadius: var(--pr-t-border-radius-small);--component-checkboxField-borderColor: var(--palettes-neutral-700);--component-checkboxField-backgroundColor: var(--palettes-neutral-0);--component-checkboxField-icon-fontSize: var(--pr-t-font-body-S-lineHeight);--component-checkboxField-icon-color: var(--palettes-neutral-0);--component-checkboxField-icon-scale: 0;position:relative;inline-size:fit-content;block-size:fit-content;display:grid;grid-template-areas:\"checkbox\";grid-template-columns:var(--component-checkboxField-size);grid-template-rows:var(--component-checkboxField-size)}.checkboxField-icon{border:2px solid var(--component-checkboxField-borderColor);border-radius:var(--component-checkboxField-borderRadius);color:var(--component-checkboxField-icon-color);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--component-checkboxField-backgroundColor);cursor:pointer;grid-area:checkbox;display:flex}@media(prefers-reduced-motion:reduce){.checkboxField-icon{transition-property:none}}.checkboxField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:var(--component-checkboxField-borderRadius)}.checkboxField-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(var(--component-checkboxField-icon-scale));transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transform-origin:center;transition-timing-function:cubic-bezier(.5,-.5,.5,0)}@media(prefers-reduced-motion:reduce){.checkboxField-icon-check{transition-property:none}}.checkboxField-icon-check:before{font-weight:var(--pr-t-font-fontWeight-regular);font-size:var(--component-checkboxField-icon-fontSize);direction:ltr;font-family:var(--icon-fontFamily);font-feature-settings:\"liga\";font-style:normal;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;overflow-wrap:normal;content:\"\\e97d\"/\"\"}.checkboxField-input{z-index:1;opacity:.0001;cursor:pointer;grid-area:checkbox;inline-size:100%;block-size:100%}}@layer mods{.checkboxField.mod-S{--component-checkboxField-size: 1rem;--component-checkboxField-borderRadius: var(--pr-t-border-radius-50);--component-checkboxField-icon-fontSize: var(--pr-t-font-body-XS-lineHeight);--component-checkboxField-label-fontSize: var(--pr-t-font-body-S-fontSize);--component-checkboxField-label-lineHeight: var(--pr-t-font-body-S-lineHeight)}.checkboxField.mod-checklist{--component-checkboxField-borderRadius: var(--commons-borderRadius-full);--component-checkboxField-borderColor: var(--palettes-neutral-300);--component-checkboxField-icon-color: var(--palettes-neutral-300);--component-checkboxField-icon-scale: 1}.formLabel:has(~.checkboxField.mod-checklist>.checkboxField-input:not(:disabled):checked){--components-formLabel-color: var(--pr-t-color-text-subtle)}@keyframes checklist-bounce{0%{transform:scale(1)}55%{transform:scale(1.3)}to{transform:scale(1)}}.checkboxField.mod-checklist .checkboxField-input:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-50);--component-checkboxField-borderColor: var(--palettes-success-600);--component-checkboxField-icon-color: var(--palettes-success-600)}.checkboxField.mod-checklist .checkboxField-input:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-100)}.checkboxField.mod-checklist .checkboxField-input:disabled~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-neutral-0);--component-checkboxField-borderColor: var(--palettes-neutral-300);--component-checkboxField-icon-scale: 0}.checkboxField.mod-checklist .checkboxField-input:checked~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-700);--component-checkboxField-borderColor: var(--palettes-success-700);--component-checkboxField-icon-color: var(--palettes-neutral-0)}.checkboxField.mod-checklist .checkboxField-input:checked~.checkboxField-icon .checkboxField-icon-check{animation:var(--commons-animations-durations-standard) ease-in-out checklist-bounce}.checkboxField.mod-checklist .checkboxField-input:checked:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-800);--component-checkboxField-borderColor: var(--palettes-success-800);--component-checkboxField-icon-color: var(--palettes-neutral-0)}.checkboxField.mod-checklist .checkboxField-input:checked:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-900);--component-checkboxField-borderColor: var(--palettes-success-900)}.checkboxField.mod-checklist .checkboxField-input:checked:disabled~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-neutral-100);--component-checkboxField-borderColor: var(--palettes-neutral-100);--component-checkboxField-icon-color: var(--palettes-neutral-600)}.checkboxField.mod-checklist:has(.checkboxField-input:focus-visible) .checkboxField-input~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-50);--component-checkboxField-borderColor: var(--palettes-success-600);--component-checkboxField-icon-color: var(--palettes-success-600)}.checkboxField.mod-checklist:has(.checkboxField-input:focus-visible) .checkboxField-input:checked~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-success-800);--component-checkboxField-borderColor: var(--palettes-success-800);--component-checkboxField-icon-color: var(--palettes-neutral-0)}}@layer mods{.checkboxField-input[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-700, var(--palettes-product-700));--component-checkboxField-borderColor: var(--palettes-700, var(--palettes-product-700))}.checkboxField-input[aria-checked=mixed]~.checkboxField-icon .checkboxField-icon-check{--component-checkboxField-icon-scale: 1;transition-timing-function:cubic-bezier(.5,1,.5,1.5)}.checkboxField-input[aria-checked=mixed]~.checkboxField-icon .checkboxField-icon-check:before{content:\"\\e975\"/\"\"}.checkboxField-input:focus-visible~.checkboxField-icon:after{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.checkboxField-input:hover~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-neutral-600)}.checkboxField-input:hover[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-800, var(--palettes-product-800));--component-checkboxField-borderColor: var(--palettes-800, var(--palettes-product-800))}.checkboxField-input:active~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-neutral-900)}.checkboxField-input:active[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-900, var(--palettes-product-900));--component-checkboxField-borderColor: var(--palettes-900, var(--palettes-product-900))}.checkboxField-input:disabled{cursor:default}.checkboxField-input:disabled~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-neutral-300)}.checkboxField-input:disabled[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--commons-disabled-background);--component-checkboxField-borderColor: var(--commons-disabled-background);--component-checkboxField-icon-color: var(--palettes-neutral-600)}.checkboxField-input[aria-invalid=true]~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-error-700)}.checkboxField-input[aria-invalid=true][aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-700);--component-checkboxField-borderColor: var(--palettes-error-700)}.checkboxField-input[aria-invalid=true]:hover~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-error-800)}.checkboxField-input[aria-invalid=true]:hover[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-800);--component-checkboxField-borderColor: var(--palettes-error-800)}.checkboxField-input[aria-invalid=true]:active~.checkboxField-icon{--component-checkboxField-borderColor: var(--palettes-error-900)}.checkboxField-input[aria-invalid=true]:active[aria-checked=mixed]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-900);--component-checkboxField-borderColor: var(--palettes-error-900)}.checkboxField-input:checked~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-700, var(--palettes-product-700));--component-checkboxField-borderColor: var(--palettes-700, var(--palettes-product-700))}.checkboxField-input:checked~.checkboxField-icon .checkboxField-icon-check{--component-checkboxField-icon-scale: 1;transition-timing-function:cubic-bezier(.5,1,.5,1.5)}.checkboxField-input:checked:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-800, var(--palettes-product-800));--component-checkboxField-borderColor: var(--palettes-800, var(--palettes-product-800))}.checkboxField-input:checked:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-900, var(--palettes-product-900));--component-checkboxField-borderColor: var(--palettes-900, var(--palettes-product-900))}.checkboxField-input:checked:disabled~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--commons-disabled-background);--component-checkboxField-borderColor: var(--commons-disabled-background);--component-checkboxField-icon-color: var(--palettes-neutral-600)}.checkboxField-input:checked[aria-invalid=true]~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-700);--component-checkboxField-borderColor: var(--palettes-error-700)}.checkboxField-input:checked[aria-invalid=true]:hover~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-800);--component-checkboxField-borderColor: var(--palettes-error-800)}.checkboxField-input:checked[aria-invalid=true]:active~.checkboxField-icon{--component-checkboxField-backgroundColor: var(--palettes-error-900);--component-checkboxField-borderColor: var(--palettes-error-900)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { checklist: [{ type: i0.Input, args: [{ isSignal: true, alias: "checklist", required: false }] }], mixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "mixed", required: false }] }] } });
 
 const INVARIANT_CULTURE_CODE = 'invariant';
@@ -261,6 +284,10 @@ const Translations$4 = {
         clear: 'Clear this field',
         togglePasswordVisibility: 'Show password',
     },
+    pl: {
+        clear: 'Wyczyść to pole',
+        togglePasswordVisibility: 'Wyświetl hasło',
+    },
 };
 
 const LU_TEXTFIELD_TRANSLATIONS = new InjectionToken('LuTextfieldTranslations', {
@@ -270,27 +297,39 @@ const luTextfieldTranslations = Translations$4;
 
 class TextInputComponent {
     constructor() {
-        this.intl = input(...intlInputOptions(LU_TEXTFIELD_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
+        this.intl = input(...intlInputOptions(LU_TEXTFIELD_TRANSLATIONS), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
         this.ngControl = injectNgControl();
-        this.inputElementRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
-        this.mask = input(null, ...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
-        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-        this.autocomplete = input('off', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+        this.inputElementRef = viewChild('inputElement', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
+        this.mask = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.autocomplete = input('off', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
         this.hasClearer = input(false, { ...(ngDevMode ? { debugName: "hasClearer" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.hasSearchIcon = input(false, { ...(ngDevMode ? { debugName: "hasSearchIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.valueAlignRight = input(false, { ...(ngDevMode ? { debugName: "valueAlignRight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
-        this.suffix = input(...(ngDevMode ? [undefined, { debugName: "suffix" }] : /* istanbul ignore next */ []));
+        this.prefix = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
+        this.suffix = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "suffix" }] : /* istanbul ignore next */ []));
         /**
          * Search icon to use for when `hasSearchIcon` is true, defaults to 'search'
          */
-        this.searchIcon = input('searchMagnifyingGlass', ...(ngDevMode ? [{ debugName: "searchIcon" }] : /* istanbul ignore next */ []));
-        this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.searchIcon = input('searchMagnifyingGlass', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchIcon" }] : /* istanbul ignore next */ []));
+        this.type = input('text', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.blur = output();
-        this.showPassword = signal(false, ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
-        this.typeRef = computed(() => (this.showPassword() ? 'text' : this.type()), ...(ngDevMode ? [{ debugName: "typeRef" }] : /* istanbul ignore next */ []));
-        this.hasTogglePasswordVisibilityIcon = computed(() => this.type() === 'password', ...(ngDevMode ? [{ debugName: "hasTogglePasswordVisibilityIcon" }] : /* istanbul ignore next */ []));
+        this.showPassword = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
+        this.typeRef = computed(() => (this.showPassword() ? 'text' : this.type()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "typeRef" }] : /* istanbul ignore next */ []));
+        this.hasTogglePasswordVisibilityIcon = computed(() => this.type() === 'password', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasTogglePasswordVisibilityIcon" }] : /* istanbul ignore next */ []));
     }
     clearValue() {
         this.ngControl.reset();
@@ -300,12 +339,12 @@ class TextInputComponent {
         const _showPassword = this.showPassword();
         this.showPassword.set(!_showPassword);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TextInputComponent, isStandalone: true, selector: "lu-text-input", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, hasClearer: { classPropertyName: "hasClearer", publicName: "hasClearer", isSignal: true, isRequired: false, transformFunction: null }, hasSearchIcon: { classPropertyName: "hasSearchIcon", publicName: "hasSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, valueAlignRight: { classPropertyName: "valueAlignRight", publicName: "valueAlignRight", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, searchIcon: { classPropertyName: "searchIcon", publicName: "searchIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" aria-hidden=\"true\">{{ addon.content }}</span>\n\t\t\t\t<span class=\"pr-u-mask\">{{ addon.ariaLabel }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\t[type]=\"typeRef()\"\n\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t[mask]=\"mask()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear (click)=\"clearValue()\" class=\"textField-input-affix-clear\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t\t@if (hasSearchIcon()) {\n\t\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{ searchIcon() }}\"></span>\n\t\t\t}\n\t\t\t@if (hasTogglePasswordVisibilityIcon()) {\n\t\t\t\t<button\n\t\t\t\t\t[attr.aria-pressed]=\"showPassword()\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t\t\t(click)=\"togglePasswordVisibility()\"\n\t\t\t\t>\n\t\t\t\t\t<span aria-hidden=\"true\" [class]=\"`lucca-icon icon-${showPassword() ? 'unwatch' : 'watch'}`\"></span>\n\t\t\t\t\t<span class=\"pr-u-mask\">{{ intl().togglePasswordVisibility }}</span>\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t@if (prefix(); as prefix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\t\taddon: prefix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t\t{{ ngControl.value }}\n\t\t@if (suffix()) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\t\taddon: suffix(),\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "directive", type: FormFieldIdDirective, selector: "[luFormFieldId]", inputs: ["luFormFieldId", "labelledByStrategy"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TextInputComponent, isStandalone: true, selector: "lu-text-input", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, hasClearer: { classPropertyName: "hasClearer", publicName: "hasClearer", isSignal: true, isRequired: false, transformFunction: null }, hasSearchIcon: { classPropertyName: "hasSearchIcon", publicName: "hasSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, valueAlignRight: { classPropertyName: "valueAlignRight", publicName: "valueAlignRight", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, searchIcon: { classPropertyName: "searchIcon", publicName: "searchIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" aria-hidden=\"true\"><ng-container *luPortal=\"addon.content\" /></span>\n\t\t\t\t<span class=\"pr-u-mask\">{{ addon.ariaLabel }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\t[type]=\"typeRef()\"\n\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t[mask]=\"mask()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear (click)=\"clearValue()\" class=\"textField-input-affix-clear\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t\t@if (hasSearchIcon()) {\n\t\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{ searchIcon() }}\"></span>\n\t\t\t}\n\t\t\t@if (hasTogglePasswordVisibilityIcon()) {\n\t\t\t\t<button\n\t\t\t\t\t[attr.aria-pressed]=\"showPassword()\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t\t\t(click)=\"togglePasswordVisibility()\"\n\t\t\t\t>\n\t\t\t\t\t<span aria-hidden=\"true\" [class]=\"`lucca-icon icon-${showPassword() ? 'unwatch' : 'watch'}`\"></span>\n\t\t\t\t\t<span class=\"pr-u-mask\">{{ intl().togglePasswordVisibility }}</span>\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t@if (prefix(); as prefix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\t\taddon: prefix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t\t{{ ngControl.value }}\n\t\t@if (suffix()) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\t\taddon: suffix(),\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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: "directive", type: FormFieldIdDirective, selector: "[luFormFieldId]", inputs: ["luFormFieldId", "labelledByStrategy"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-text-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NgTemplateOutlet, NgxMaskDirective, ClearComponent, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNgxMask()], template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" aria-hidden=\"true\">{{ addon.content }}</span>\n\t\t\t\t<span class=\"pr-u-mask\">{{ addon.ariaLabel }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\t[type]=\"typeRef()\"\n\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t[mask]=\"mask()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear (click)=\"clearValue()\" class=\"textField-input-affix-clear\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t\t@if (hasSearchIcon()) {\n\t\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{ searchIcon() }}\"></span>\n\t\t\t}\n\t\t\t@if (hasTogglePasswordVisibilityIcon()) {\n\t\t\t\t<button\n\t\t\t\t\t[attr.aria-pressed]=\"showPassword()\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t\t\t(click)=\"togglePasswordVisibility()\"\n\t\t\t\t>\n\t\t\t\t\t<span aria-hidden=\"true\" [class]=\"`lucca-icon icon-${showPassword() ? 'unwatch' : 'watch'}`\"></span>\n\t\t\t\t\t<span class=\"pr-u-mask\">{{ intl().togglePasswordVisibility }}</span>\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t@if (prefix(); as prefix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\t\taddon: prefix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t\t{{ ngControl.value }}\n\t\t@if (suffix()) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\t\taddon: suffix(),\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n" }]
+            args: [{ selector: 'lu-text-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NgTemplateOutlet, NgxMaskDirective, ClearComponent, _PresentationDisplayDefaultDirective, PortalDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNgxMask()], template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" aria-hidden=\"true\"><ng-container *luPortal=\"addon.content\" /></span>\n\t\t\t\t<span class=\"pr-u-mask\">{{ addon.ariaLabel }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\t[type]=\"typeRef()\"\n\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t[mask]=\"mask()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear (click)=\"clearValue()\" class=\"textField-input-affix-clear\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t\t@if (hasSearchIcon()) {\n\t\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{ searchIcon() }}\"></span>\n\t\t\t}\n\t\t\t@if (hasTogglePasswordVisibilityIcon()) {\n\t\t\t\t<button\n\t\t\t\t\t[attr.aria-pressed]=\"showPassword()\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t\t\t(click)=\"togglePasswordVisibility()\"\n\t\t\t\t>\n\t\t\t\t\t<span aria-hidden=\"true\" [class]=\"`lucca-icon icon-${showPassword() ? 'unwatch' : 'watch'}`\"></span>\n\t\t\t\t\t<span class=\"pr-u-mask\">{{ intl().togglePasswordVisibility }}</span>\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t@if (prefix(); as prefix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\t\taddon: prefix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t\t{{ ngControl.value }}\n\t\t@if (suffix()) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\t\taddon: suffix(),\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n" }]
         }], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], hasClearer: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasClearer", required: false }] }], hasSearchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSearchIcon", required: false }] }], valueAlignRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAlignRight", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], searchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchIcon", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], blur: [{ type: i0.Output, args: ["blur"] }] } });
 
 const Translations$3 = {
@@ -313,11 +352,17 @@ const Translations$3 = {
         clear: 'Empty this field',
         toggleMultilanguage: 'Show translations',
         translateTo: 'Translate to {{lang}}',
+        translateWithAI: 'Translate using AI',
+        invariantInfo: '',
+        requiredError: 'This translation is required',
     },
     fr: {
         clear: 'Vider ce champ',
         toggleMultilanguage: 'Afficher les traductions',
         translateTo: 'Traduire en {{lang}}',
+        translateWithAI: 'Traduire avec l’assistant IA',
+        invariantInfo: 'Sans traduction renseignée, la valeur principale sera utilisée.',
+        requiredError: 'La traduction est obligatoire',
     },
 };
 
@@ -326,46 +371,82 @@ const LU_MULTILANGUAGE_INPUT_TRANSLATIONS = new InjectionToken('LuMultilanguageI
 });
 
 class MultilanguageInputComponent {
+    #localeId;
+    #intlDisplay;
     constructor() {
         this.#localeId = inject(LOCALE_ID);
-        this.#intlDisplay = new Intl.DisplayNames([this.#localeId], { type: 'language' });
-        this.intl = input(...intlInputOptions(LU_MULTILANGUAGE_INPUT_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
-        this.#formFieldRef = inject(FORM_FIELD_INSTANCE);
-        this.formFieldSize = this.#formFieldRef.size;
+        this.#intlDisplay = new Intl.DisplayNames([this.#localeId], { type: 'language', languageDisplay: 'dialect' });
+        this.intl = input(...intlInputOptions(LU_MULTILANGUAGE_INPUT_TRANSLATIONS), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
+        this.formFieldRef = inject(FORM_FIELD_INSTANCE, { optional: true });
+        this.formFieldSize = this.formFieldRef?.size;
         this.onTouched = () => { };
         this.onChange = (_value) => { };
-        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.openOnFocus = input(false, { ...(ngDevMode ? { debugName: "openOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.autocomplete = input('off', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+        this.autocomplete = input('off', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+        this.hasNoInvariant = input(false, { ...(ngDevMode ? { debugName: "hasNoInvariant" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.hasAIButtons = input(false, { ...(ngDevMode ? { debugName: "hasAIButtons" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.displayLocale = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayLocale" }] : /* istanbul ignore next */ []));
+        this.translateWithAI = output();
+        this.shouldOpenOnFocus = computed(() => this.openOnFocus() || this.hasNoInvariant(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shouldOpenOnFocus" }] : /* istanbul ignore next */ []));
         // Suffixed with Internal to avoid conflict with NgModel's disabled attribute
-        this.disabledInternal = signal(false, ...(ngDevMode ? [{ debugName: "disabledInternal" }] : /* istanbul ignore next */ []));
-        this.model = signal([], ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
-        this.invariant = computed(() => {
-            return this.model().find((row) => row.cultureCode === INVARIANT_CULTURE_CODE) || { value: '' };
-        }, ...(ngDevMode ? [{ debugName: "invariant" }] : /* istanbul ignore next */ []));
+        this.disabledInternal = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledInternal" }] : /* istanbul ignore next */ []));
+        this.model = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        this.displayRow = computed(() => {
+            if (this.hasNoInvariant()) {
+                return this.model().find((row) => row.cultureCode === this.displayLocale()) || { value: '', required: false, cultureCode: this.displayLocale() };
+            }
+            else {
+                return this.model().find((row) => row.cultureCode === INVARIANT_CULTURE_CODE) || { value: '', required: false, cultureCode: INVARIANT_CULTURE_CODE };
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayRow" }] : /* istanbul ignore next */ []));
+        this.cultureCodeDisplay = computed(() => {
+            return this.displayLocale().split('-')[0]?.toUpperCase();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cultureCodeDisplay" }] : /* istanbul ignore next */ []));
         this.panelInputs = computed(() => {
-            return this.model().filter((row) => row.cultureCode !== INVARIANT_CULTURE_CODE);
-        }, ...(ngDevMode ? [{ debugName: "panelInputs" }] : /* istanbul ignore next */ []));
+            return this.model().filter((row) => (this.hasNoInvariant() ? row.cultureCode !== this.displayLocale() && row.cultureCode !== INVARIANT_CULTURE_CODE : row.cultureCode !== INVARIANT_CULTURE_CODE));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelInputs" }] : /* istanbul ignore next */ []));
         this.presentationValue = computed(() => {
-            return this.model().find((row) => row.cultureCode === this.#localeId)?.value || this.invariant()?.value;
-        }, ...(ngDevMode ? [{ debugName: "presentationValue" }] : /* istanbul ignore next */ []));
+            return this.model().find((row) => row.cultureCode === this.#localeId)?.value || this.displayRow()?.value;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "presentationValue" }] : /* istanbul ignore next */ []));
         this.popoverPositions = [
-            new ConnectionPositionPair({ originX: 'end', originY: 'bottom' }, { overlayX: 'end', overlayY: 'top' }, 16, 6),
-            new ConnectionPositionPair({ originX: 'end', originY: 'top' }, { overlayX: 'end', overlayY: 'bottom' }, 16, -6),
+            new ConnectionPositionPair({ originX: 'end', originY: 'bottom' }, { overlayX: 'end', overlayY: 'top' }, 12, 6),
+            new ConnectionPositionPair({ originX: 'end', originY: 'top' }, { overlayX: 'end', overlayY: 'bottom' }, 12, -6),
         ];
+        effect(() => {
+            if (this.hasNoInvariant() && !this.formFieldRef?.isInputRequired()) {
+                console.warn('[Multilanguage Input] Input with no invariant should be required, make sure you make the corresponding form field (or NgModel) required.');
+            }
+            if (this.hasNoInvariant() && !this.displayLocale()) {
+                console.warn('[Multilanguage Input] Input with no invariant should have `displayLocale` input filled.');
+            }
+        });
     }
-    #localeId;
-    #intlDisplay;
-    #formFieldRef;
     getLocaleDisplayName(locale) {
         return this.#intlDisplay.of(locale) ?? locale;
     }
+    getPopoverInlineSizeRem(inputElement) {
+        const inputContainer = inputElement.closest('.textField-input');
+        const referenceWidth = (inputContainer instanceof HTMLElement ? inputContainer : inputElement).getBoundingClientRect().width;
+        return referenceWidth / 16 + 1;
+    }
     writeValue(value) {
         if (!value) {
             value = [];
         }
         if (value.length > 0) {
-            if (!value.some((row) => row.cultureCode === INVARIANT_CULTURE_CODE)) {
+            if (!this.hasNoInvariant() && !value.some((row) => row.cultureCode === INVARIANT_CULTURE_CODE)) {
                 throw new Error('Please provide an invariant translation in translation array');
             }
             this.model.set(value);
@@ -383,16 +464,16 @@ class MultilanguageInputComponent {
     valueChange() {
         this.onChange?.(this.model());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MultilanguageInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: MultilanguageInputComponent, isStandalone: true, selector: "lu-multilanguage-input", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MultilanguageInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MultilanguageInputComponent, isStandalone: true, selector: "lu-multilanguage-input", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, hasNoInvariant: { classPropertyName: "hasNoInvariant", publicName: "hasNoInvariant", isSignal: true, isRequired: false, transformFunction: null }, hasAIButtons: { classPropertyName: "hasAIButtons", publicName: "hasAIButtons", isSignal: true, isRequired: false, transformFunction: null }, displayLocale: { classPropertyName: "displayLocale", publicName: "displayLocale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { translateWithAI: "translateWithAI" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultilanguageInputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"textField\">\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"text\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[(ngModel)]=\"invariant().value\"\n\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t(blur)=\"onTouched?.()\"\n\t\t\t(focus)=\"openOnFocus() ? popoverRef.openPopover(true, true, true) : null\"\n\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button\n\t\t\t\t[luPopover2]=\"popoverMultilanguage\"\n\t\t\t\t#popoverRef=\"luPopover2\"\n\t\t\t\tluPopoverNoCloseButton\n\t\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t\t[luTooltip]=\"intl().toggleMultilanguage\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signTranslation\"></span>\n\t\t\t</button>\n\t\t\t<ng-template #popoverMultilanguage>\n\t\t\t\t<div class=\"popover-contentOptional multilanguage_popover-content\" [style.width.px]=\"inputElement.clientWidth + 16\">\n\t\t\t\t\t<div class=\"pr-u-displayFlex pr-u-gap100 pr-u-flexDirectionColumn\">\n\t\t\t\t\t\t@for (row of panelInputs(); track row.cultureCode) {\n\t\t\t\t\t\t\t<lu-form-field\n\t\t\t\t\t\t\t\t[size]=\"formFieldSize()\"\n\t\t\t\t\t\t\t\t[label]=\"intl().translateTo | intlParams: { lang: getLocaleDisplayName(row.cultureCode) }\"\n\t\t\t\t\t\t\t\thiddenLabel\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-text-input\n\t\t\t\t\t\t\t\t\t[suffix]=\"{ content: row.cultureCode, ariaLabel: '' }\"\n\t\t\t\t\t\t\t\t\t[(ngModel)]=\"row.value\"\n\t\t\t\t\t\t\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</lu-form-field>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (presentationValue()) {\n\t\t{{ presentationValue() }}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", styles: ["@layer components{.multilanguage_popover-content.popover-contentOptional{max-block-size:20rem;max-inline-size:100%;overflow:auto}}@layer mods{.multilanguage_popover-content.popover-contentOptional:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--pr-t-border-radius-structure)}}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["intl", "label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter", "presentation"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: PopoverDirective, selector: "[luPopover2]", inputs: ["intl", "luPopover2", "luPopoverPosition", "overlayScrollStrategy", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverAnchor", "luPopoverOpenDelay", "luPopoverCloseDelay"], outputs: ["luPopoverTriggerChange", "luPopoverClosed", "luPopoverOpened"], exportAs: ["luPopover2"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["intl", "mask", "placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "searchIcon", "type"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], ngImport: i0, template: "<div class=\"textField mod-multilanguage\">\n\t@if (hasNoInvariant()) {\n\t\t<div class=\"textField-prefix\">\n\t\t\t<div class=\"textField-prefix-lang\">\n\t\t\t\t@if (formFieldRef.isInputRequired()) {\n\t\t\t\t\t{{ cultureCodeDisplay() }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup>\n\t\t\t\t} @else {\n\t\t\t\t\t{{ cultureCodeDisplay() }}\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t}\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"text\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[(ngModel)]=\"displayRow().value\"\n\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t(blur)=\"onTouched?.()\"\n\t\t\t(focus)=\"shouldOpenOnFocus() ? popoverRef.openPopover(true, true, true) : null\"\n\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button\n\t\t\t\t[luPopover2]=\"popoverMultilanguage\"\n\t\t\t\t#popoverRef=\"luPopover2\"\n\t\t\t\tluPopoverNoCloseButton\n\t\t\t\t[luPopoverIgnoredOutsidePointerTargets]=\"inputElement\"\n\t\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t\t[luTooltip]=\"intl().toggleMultilanguage\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\tluButton\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"textField-input-affix-toggle\"\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"signTranslation\" [alt]=\"intl().toggleMultilanguage\" />\n\t\t\t</button>\n\t\t\t<ng-template #popoverMultilanguage>\n\t\t\t\t<div class=\"popover-contentOptional multilanguage_popover-content\" [style.inlineSize.rem]=\"getPopoverInlineSizeRem(inputElement)\">\n\t\t\t\t\t<div class=\"pr-u-displayFlex pr-u-gap100 pr-u-flexDirectionColumn\">\n\t\t\t\t\t\t@if (!hasNoInvariant()) {\n\t\t\t\t\t\t\t<p class=\"pr-u-colorTextSubtle\" [class]=\"formFieldSize() === 'S' ? 'pr-u-bodyXS' : 'pr-u-bodyS'\">\n\t\t\t\t\t\t\t\t{{ intl().invariantInfo }}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@for (row of panelInputs(); track row.cultureCode) {\n\t\t\t\t\t\t\t<ng-template #prefixLang>\n\t\t\t\t\t\t\t\t<div class=\"textField-prefix-lang\">\n\t\t\t\t\t\t\t\t\t@if (formFieldRef.isInputRequired()) {\n\t\t\t\t\t\t\t\t\t\t{{ row.cultureCode.slice(0, 2).toUpperCase() }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup>\n\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t{{ row.cultureCode.slice(0, 2).toUpperCase() }}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t\t<ng-template #aiSuffix>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t[size]=\"formFieldSize() === 'S' ? 'XS' : 'S'\"\n\t\t\t\t\t\t\t\t\tluButton=\"AI\"\n\t\t\t\t\t\t\t\t\t[luTooltip]=\"intl().translateWithAI\"\n\t\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t\t\t(click)=\"translateWithAI.emit(row.cultureCode)\"\n\t\t\t\t\t\t\t\t\tclass=\"multilanguage_popover-content-button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<lu-icon icon=\"officePenStar\" alt=\"intl().translateWithAI\" />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t\t<lu-form-field\n\t\t\t\t\t\t\t\t[size]=\"formFieldSize()\"\n\t\t\t\t\t\t\t\t[label]=\"intl().translateTo | intlParams: { lang: getLocaleDisplayName(row.cultureCode) }\"\n\t\t\t\t\t\t\t\thiddenLabel\n\t\t\t\t\t\t\t\t[errorInlineMessage]=\"formFieldRef.isInputRequired() && !row.value ? intl().requiredError : ''\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-text-input\n\t\t\t\t\t\t\t\t\t[prefix]=\"{ content: prefixLang, ariaLabel: '' }\"\n\t\t\t\t\t\t\t\t\t[(ngModel)]=\"row.value\"\n\t\t\t\t\t\t\t\t\t[required]=\"formFieldRef.isInputRequired()\"\n\t\t\t\t\t\t\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t\t\t\t\t\t\t[suffix]=\"hasAIButtons() ? { content: aiSuffix, ariaLabel: '' } : null\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</lu-form-field>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (presentationValue()) {\n\t\t{{ presentationValue() }}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", styles: ["@layer components{.multilanguage_popover-content.popover-contentOptional{max-block-size:20rem;max-inline-size:100%;overflow:auto}.multilanguage_popover-content.popover-contentOptional .multilanguage_popover-content-button{padding:var(--pr-t-spacings-50)}.multilanguage_popover-content.popover-contentOptional .textField:not(:focus-within,:hover) .multilanguage_popover-content-button{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}}@layer mods{.multilanguage_popover-content.popover-contentOptional:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--pr-t-border-radius-structure)}}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["intl", "label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter", "presentation"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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: PopoverDirective, selector: "[luPopover2]", inputs: ["intl", "luPopover2", "luPopoverPosition", "luPopoverMaxBlockSize", "luPopoverMaxInlineSize", "overlayScrollStrategy", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverAnchor", "luPopoverIgnoredOutsidePointerTargets", "luPopoverOpenDelay", "luPopoverCloseDelay"], outputs: ["luPopoverTriggerChange", "luPopoverClosed", "luPopoverOpened"], exportAs: ["luPopover2"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["intl", "mask", "placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "searchIcon", "type"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton], a[luButton], span[luButton], button[prButton], a[prButton], span[prButton]", inputs: ["size", "block", "disabled", "critical", "delete", "disclosure", "palette", "state", "luButton", "prButton"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MultilanguageInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MultilanguageInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-multilanguage-input', imports: [
                         FormFieldComponent,
@@ -405,21 +486,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         IntlParamsPipe,
                         LuTooltipTriggerDirective,
                         _PresentationDisplayDefaultDirective,
+                        IconComponent,
+                        ButtonComponent,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MultilanguageInputComponent),
                             multi: true,
                         },
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"textField\">\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"text\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[(ngModel)]=\"invariant().value\"\n\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t(blur)=\"onTouched?.()\"\n\t\t\t(focus)=\"openOnFocus() ? popoverRef.openPopover(true, true, true) : null\"\n\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button\n\t\t\t\t[luPopover2]=\"popoverMultilanguage\"\n\t\t\t\t#popoverRef=\"luPopover2\"\n\t\t\t\tluPopoverNoCloseButton\n\t\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t\t[luTooltip]=\"intl().toggleMultilanguage\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signTranslation\"></span>\n\t\t\t</button>\n\t\t\t<ng-template #popoverMultilanguage>\n\t\t\t\t<div class=\"popover-contentOptional multilanguage_popover-content\" [style.width.px]=\"inputElement.clientWidth + 16\">\n\t\t\t\t\t<div class=\"pr-u-displayFlex pr-u-gap100 pr-u-flexDirectionColumn\">\n\t\t\t\t\t\t@for (row of panelInputs(); track row.cultureCode) {\n\t\t\t\t\t\t\t<lu-form-field\n\t\t\t\t\t\t\t\t[size]=\"formFieldSize()\"\n\t\t\t\t\t\t\t\t[label]=\"intl().translateTo | intlParams: { lang: getLocaleDisplayName(row.cultureCode) }\"\n\t\t\t\t\t\t\t\thiddenLabel\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-text-input\n\t\t\t\t\t\t\t\t\t[suffix]=\"{ content: row.cultureCode, ariaLabel: '' }\"\n\t\t\t\t\t\t\t\t\t[(ngModel)]=\"row.value\"\n\t\t\t\t\t\t\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</lu-form-field>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (presentationValue()) {\n\t\t{{ presentationValue() }}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", styles: ["@layer components{.multilanguage_popover-content.popover-contentOptional{max-block-size:20rem;max-inline-size:100%;overflow:auto}}@layer mods{.multilanguage_popover-content.popover-contentOptional:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--pr-t-border-radius-structure)}}\n"] }]
-        }], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"textField mod-multilanguage\">\n\t@if (hasNoInvariant()) {\n\t\t<div class=\"textField-prefix\">\n\t\t\t<div class=\"textField-prefix-lang\">\n\t\t\t\t@if (formFieldRef.isInputRequired()) {\n\t\t\t\t\t{{ cultureCodeDisplay() }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup>\n\t\t\t\t} @else {\n\t\t\t\t\t{{ cultureCodeDisplay() }}\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t}\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"text\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[(ngModel)]=\"displayRow().value\"\n\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t(blur)=\"onTouched?.()\"\n\t\t\t(focus)=\"shouldOpenOnFocus() ? popoverRef.openPopover(true, true, true) : null\"\n\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button\n\t\t\t\t[luPopover2]=\"popoverMultilanguage\"\n\t\t\t\t#popoverRef=\"luPopover2\"\n\t\t\t\tluPopoverNoCloseButton\n\t\t\t\t[luPopoverIgnoredOutsidePointerTargets]=\"inputElement\"\n\t\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t\t[luTooltip]=\"intl().toggleMultilanguage\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\tluButton\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"textField-input-affix-toggle\"\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"signTranslation\" [alt]=\"intl().toggleMultilanguage\" />\n\t\t\t</button>\n\t\t\t<ng-template #popoverMultilanguage>\n\t\t\t\t<div class=\"popover-contentOptional multilanguage_popover-content\" [style.inlineSize.rem]=\"getPopoverInlineSizeRem(inputElement)\">\n\t\t\t\t\t<div class=\"pr-u-displayFlex pr-u-gap100 pr-u-flexDirectionColumn\">\n\t\t\t\t\t\t@if (!hasNoInvariant()) {\n\t\t\t\t\t\t\t<p class=\"pr-u-colorTextSubtle\" [class]=\"formFieldSize() === 'S' ? 'pr-u-bodyXS' : 'pr-u-bodyS'\">\n\t\t\t\t\t\t\t\t{{ intl().invariantInfo }}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@for (row of panelInputs(); track row.cultureCode) {\n\t\t\t\t\t\t\t<ng-template #prefixLang>\n\t\t\t\t\t\t\t\t<div class=\"textField-prefix-lang\">\n\t\t\t\t\t\t\t\t\t@if (formFieldRef.isInputRequired()) {\n\t\t\t\t\t\t\t\t\t\t{{ row.cultureCode.slice(0, 2).toUpperCase() }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup>\n\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t{{ row.cultureCode.slice(0, 2).toUpperCase() }}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t\t<ng-template #aiSuffix>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t[size]=\"formFieldSize() === 'S' ? 'XS' : 'S'\"\n\t\t\t\t\t\t\t\t\tluButton=\"AI\"\n\t\t\t\t\t\t\t\t\t[luTooltip]=\"intl().translateWithAI\"\n\t\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t\t\t(click)=\"translateWithAI.emit(row.cultureCode)\"\n\t\t\t\t\t\t\t\t\tclass=\"multilanguage_popover-content-button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<lu-icon icon=\"officePenStar\" alt=\"intl().translateWithAI\" />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t\t<lu-form-field\n\t\t\t\t\t\t\t\t[size]=\"formFieldSize()\"\n\t\t\t\t\t\t\t\t[label]=\"intl().translateTo | intlParams: { lang: getLocaleDisplayName(row.cultureCode) }\"\n\t\t\t\t\t\t\t\thiddenLabel\n\t\t\t\t\t\t\t\t[errorInlineMessage]=\"formFieldRef.isInputRequired() && !row.value ? intl().requiredError : ''\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-text-input\n\t\t\t\t\t\t\t\t\t[prefix]=\"{ content: prefixLang, ariaLabel: '' }\"\n\t\t\t\t\t\t\t\t\t[(ngModel)]=\"row.value\"\n\t\t\t\t\t\t\t\t\t[required]=\"formFieldRef.isInputRequired()\"\n\t\t\t\t\t\t\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t\t\t\t\t\t\t[suffix]=\"hasAIButtons() ? { content: aiSuffix, ariaLabel: '' } : null\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</lu-form-field>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (presentationValue()) {\n\t\t{{ presentationValue() }}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", styles: ["@layer components{.multilanguage_popover-content.popover-contentOptional{max-block-size:20rem;max-inline-size:100%;overflow:auto}.multilanguage_popover-content.popover-contentOptional .multilanguage_popover-content-button{padding:var(--pr-t-spacings-50)}.multilanguage_popover-content.popover-contentOptional .textField:not(:focus-within,:hover) .multilanguage_popover-content-button{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}}@layer mods{.multilanguage_popover-content.popover-contentOptional:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--pr-t-border-radius-structure)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], hasNoInvariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasNoInvariant", required: false }] }], hasAIButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasAIButtons", required: false }] }], displayLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayLocale", required: false }] }], translateWithAI: [{ type: i0.Output, args: ["translateWithAI"] }] } });
 
 function areAllLanguagesFilled(model) {
     return model.every((row) => row.value?.length > 0);
 }
 function isInvariantFilled(model) {
     const invariantTranslation = model.find((row) => row.cultureCode === INVARIANT_CULTURE_CODE);
-    return (invariantTranslation?.value?.length ?? 0) > 0;
+    return !isNil(invariantTranslation) && invariantTranslation.value?.length > 0;
 }
 const MultiLanguageInputValidators = {
     allLanguagesRequired: (control) => (areAllLanguagesFilled(control.value) ? null : { missingLang: true }),
@@ -451,6 +534,9 @@ const Translations$2 = {
     en: {
         clear: 'Clear this field',
     },
+    pl: {
+        clear: 'Wyczyść to pole',
+    },
 };
 
 const LU_NUMBERFORMATFIELD_TRANSLATIONS = new InjectionToken('LuNumberFormatFieldTranslations', {
@@ -463,22 +549,35 @@ class NumberFormatInputComponent {
         this.#locale = inject(LOCALE_ID);
         this.#destroyRef = inject(DestroyRef);
         this.ngControl = injectNgControl();
-        this.formatStyle = input('decimal', ...(ngDevMode ? [{ debugName: "formatStyle" }] : /* istanbul ignore next */ []));
+        this.formatStyle = input('decimal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formatStyle" }] : /* istanbul ignore next */ []));
         this.useAutoPrefixSuffix = input(false, { ...(ngDevMode ? { debugName: "useAutoPrefixSuffix" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.prefix = input(undefined, ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
-        this.suffix = input(undefined, ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
-        this.currency = input(undefined, ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
-        this.currencyDisplay = input(undefined, ...(ngDevMode ? [{ debugName: "currencyDisplay" }] : /* istanbul ignore next */ []));
-        this.unit = input(undefined, ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
-        this.unitDisplay = input(undefined, ...(ngDevMode ? [{ debugName: "unitDisplay" }] : /* istanbul ignore next */ []));
-        this.min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
-        this.max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
-        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.prefix = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+        this.suffix = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
+        this.currency = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+        this.currencyDisplay = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currencyDisplay" }] : /* istanbul ignore next */ []));
+        this.unit = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+        this.unitDisplay = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "unitDisplay" }] : /* istanbul ignore next */ []));
+        this.min = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.hasClearer = input(false, { ...(ngDevMode ? { debugName: "hasClearer" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.valueAlignRight = input(false, { ...(ngDevMode ? { debugName: "valueAlignRight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.inputElementRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
-        this.#suffixPrefixValue = signal(1, ...(ngDevMode ? [{ debugName: "#suffixPrefixValue" }] : /* istanbul ignore next */ []));
-        this.#numberFormat = computed(() => new NumberFormat(this.formatOptions()), ...(ngDevMode ? [{ debugName: "#numberFormat" }] : /* istanbul ignore next */ []));
+        this.inputElementRef = viewChild('inputElement', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
+        this.#suffixPrefixValue = signal(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#suffixPrefixValue" }] : /* istanbul ignore next */ []));
+        this.#numberFormat = computed(() => new NumberFormat(this.formatOptions()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#numberFormat" }] : /* istanbul ignore next */ []));
         this.prefixAddon = computed(() => {
             if (this.useAutoPrefixSuffix() === false) {
                 return this.prefix();
@@ -491,7 +590,8 @@ class NumberFormatInputComponent {
                 content,
                 ariaLabel: content,
             };
-        }, ...(ngDevMode ? [{ debugName: "prefixAddon" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prefixAddon" }] : /* istanbul ignore next */ []));
         this.suffixAddon = computed(() => {
             if (this.useAutoPrefixSuffix() === false) {
                 return this.suffix();
@@ -504,7 +604,8 @@ class NumberFormatInputComponent {
                 content,
                 ariaLabel: content,
             };
-        }, ...(ngDevMode ? [{ debugName: "suffixAddon" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "suffixAddon" }] : /* istanbul ignore next */ []));
         this.formatOptions = computed(() => ({
             locale: this.#locale,
             style: this.formatStyle(),
@@ -514,9 +615,12 @@ class NumberFormatInputComponent {
             currencyDisplay: this.currencyDisplay(),
             unit: this.unit(),
             unitDisplay: this.unitDisplay(),
-        }), ...(ngDevMode ? [{ debugName: "formatOptions" }] : /* istanbul ignore next */ []));
-        this.formattedValue = computed(() => this.#numberFormat().getBlurFormat(this.#suffixPrefixValue()), ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
-        this.intl = input(...intlInputOptions(LU_NUMBERFORMATFIELD_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formatOptions" }] : /* istanbul ignore next */ []));
+        this.formattedValue = computed(() => this.#numberFormat().getBlurFormat(this.#suffixPrefixValue()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
+        this.intl = input(...intlInputOptions(LU_NUMBERFORMATFIELD_TRANSLATIONS), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
     }
     #locale;
     #destroyRef;
@@ -529,10 +633,10 @@ class NumberFormatInputComponent {
         this.ngControl.reset();
         this.inputElementRef()?.nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NumberFormatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: NumberFormatInputComponent, isStandalone: true, selector: "lu-number-format-input", inputs: { formatStyle: { classPropertyName: "formatStyle", publicName: "formatStyle", isSignal: true, isRequired: false, transformFunction: null }, useAutoPrefixSuffix: { classPropertyName: "useAutoPrefixSuffix", publicName: "useAutoPrefixSuffix", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, currencyDisplay: { classPropertyName: "currencyDisplay", publicName: "currencyDisplay", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, unitDisplay: { classPropertyName: "unitDisplay", publicName: "unitDisplay", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hasClearer: { classPropertyName: "hasClearer", publicName: "hasClearer", isSignal: true, isRequired: false, transformFunction: null }, valueAlignRight: { classPropertyName: "valueAlignRight", publicName: "valueAlignRight", isSignal: true, isRequired: false, transformFunction: null }, intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #addon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\">{{ addon.content }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefixAddon()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefixAddon(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\t@if (suffixAddon()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffixAddon(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\tluNumberFormatInput\n\t\t\t[formatOptions]=\"formatOptions()\"\n\t\t\t[min]=\"min()\"\n\t\t\t[max]=\"max()\"\n\t\t\ttype=\"text\"\n\t\t\tinputmode=\"decimal\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear class=\"textField-input-affix-clear\" (onClear)=\"clearValue(); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (formattedValue()) {\n\t\t@if (prefixAddon(); as prefix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\taddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\t\taddon: prefix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t\t{{ formattedValue() }}\n\t\t@if (suffixAddon(); as suffix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\taddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\t\taddon: suffix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "directive", type: FormFieldIdDirective, selector: "[luFormFieldId]", inputs: ["luFormFieldId", "labelledByStrategy"] }, { kind: "directive", type: NumberFormatDirective, selector: "input[luNumberFormatInput]", inputs: ["formatOptions"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumberFormatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: NumberFormatInputComponent, isStandalone: true, selector: "lu-number-format-input", inputs: { formatStyle: { classPropertyName: "formatStyle", publicName: "formatStyle", isSignal: true, isRequired: false, transformFunction: null }, useAutoPrefixSuffix: { classPropertyName: "useAutoPrefixSuffix", publicName: "useAutoPrefixSuffix", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, currencyDisplay: { classPropertyName: "currencyDisplay", publicName: "currencyDisplay", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, unitDisplay: { classPropertyName: "unitDisplay", publicName: "unitDisplay", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hasClearer: { classPropertyName: "hasClearer", publicName: "hasClearer", isSignal: true, isRequired: false, transformFunction: null }, valueAlignRight: { classPropertyName: "valueAlignRight", publicName: "valueAlignRight", isSignal: true, isRequired: false, transformFunction: null }, intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #addon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\">{{ addon.content }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefixAddon()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefixAddon(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\t@if (suffixAddon()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffixAddon(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\tluNumberFormatInput\n\t\t\t[formatOptions]=\"formatOptions()\"\n\t\t\t[min]=\"min()\"\n\t\t\t[max]=\"max()\"\n\t\t\ttype=\"text\"\n\t\t\tinputmode=\"decimal\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear class=\"textField-input-affix-clear\" (onClear)=\"clearValue(); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (formattedValue()) {\n\t\t@if (prefixAddon(); as prefix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\taddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\t\taddon: prefix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t\t{{ formattedValue() }}\n\t\t@if (suffixAddon(); as suffix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\taddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\t\taddon: suffix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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: "directive", type: FormFieldIdDirective, selector: "[luFormFieldId]", inputs: ["luFormFieldId", "labelledByStrategy"] }, { kind: "directive", type: NumberFormatDirective, selector: "input[luNumberFormatInput]", inputs: ["formatOptions"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NumberFormatInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumberFormatInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-number-format-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NumberFormatDirective, NgTemplateOutlet, ClearComponent, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #addon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\">{{ addon.content }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefixAddon()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefixAddon(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\t@if (suffixAddon()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffixAddon(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\tluNumberFormatInput\n\t\t\t[formatOptions]=\"formatOptions()\"\n\t\t\t[min]=\"min()\"\n\t\t\t[max]=\"max()\"\n\t\t\ttype=\"text\"\n\t\t\tinputmode=\"decimal\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear class=\"textField-input-affix-clear\" (onClear)=\"clearValue(); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (formattedValue()) {\n\t\t@if (prefixAddon(); as prefix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\taddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\t\taddon: prefix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t\t{{ formattedValue() }}\n\t\t@if (suffixAddon(); as suffix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\taddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\t\taddon: suffix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n" }]
         }], propDecorators: { formatStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatStyle", required: false }] }], useAutoPrefixSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAutoPrefixSuffix", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], unitDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitDisplay", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hasClearer: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasClearer", required: false }] }], valueAlignRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAlignRight", required: false }] }], inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }] } });
@@ -562,6 +666,9 @@ const Translations$1 = {
     en: {
         clear: 'Clear this field',
     },
+    pl: {
+        clear: 'Wyczyść to pole',
+    },
 };
 
 const LU_NUMBERFIELD_TRANSLATIONS = new InjectionToken('LuNumberFieldTranslations', {
@@ -572,26 +679,33 @@ const luNumberFieldTranslations = Translations$1;
 class NumberInputComponent {
     constructor() {
         this.ngControl = injectNgControl();
-        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.noSpinButtons = input(false, { ...(ngDevMode ? { debugName: "noSpinButtons" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.hasClearer = input(false, { ...(ngDevMode ? { debugName: "hasClearer" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.inputElementRef = viewChild.required('inputElement');
-        this.prefix = input(...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
-        this.suffix = input(...(ngDevMode ? [undefined, { debugName: "suffix" }] : /* istanbul ignore next */ []));
-        this.min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
-        this.max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+        this.inputElementRef = viewChild.required('inputElement', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
+        this.prefix = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "prefix" }] : /* istanbul ignore next */ []));
+        this.suffix = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "suffix" }] : /* istanbul ignore next */ []));
+        this.min = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
         this.valueAlignRight = input(false, { ...(ngDevMode ? { debugName: "valueAlignRight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.intl = input(...intlInputOptions(LU_NUMBERFIELD_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
+        this.intl = input(...intlInputOptions(LU_NUMBERFIELD_TRANSLATIONS), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
     }
     clearValue() {
         this.ngControl.reset();
         this.inputElementRef().nativeElement.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: NumberInputComponent, isStandalone: true, selector: "lu-number-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, noSpinButtons: { classPropertyName: "noSpinButtons", publicName: "noSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, hasClearer: { classPropertyName: "hasClearer", publicName: "hasClearer", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, valueAlignRight: { classPropertyName: "valueAlignRight", publicName: "valueAlignRight", isSignal: true, isRequired: false, transformFunction: null }, intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #addon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\">{{ addon.content }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"number\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[step]=\"step()\"\n\t\t\t[min]=\"min()\"\n\t\t\t[max]=\"max()\"\n\t\t\t[class.pr-u-noSpinButtons]=\"noSpinButtons()\"\n\t\t\t(wheel)=\"$event.preventDefault()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear class=\"textField-input-affix-clear\" (onClear)=\"clearValue(); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t</div>\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t{{ ngControl.value }}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FormFieldIdDirective, selector: "[luFormFieldId]", inputs: ["luFormFieldId", "labelledByStrategy"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: NumberInputComponent, isStandalone: true, selector: "lu-number-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, noSpinButtons: { classPropertyName: "noSpinButtons", publicName: "noSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, hasClearer: { classPropertyName: "hasClearer", publicName: "hasClearer", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, valueAlignRight: { classPropertyName: "valueAlignRight", publicName: "valueAlignRight", isSignal: true, isRequired: false, transformFunction: null }, intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #addon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\">{{ addon.content }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"number\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[step]=\"step()\"\n\t\t\t[min]=\"min()\"\n\t\t\t[max]=\"max()\"\n\t\t\t[class.pr-u-noSpinButtons]=\"noSpinButtons()\"\n\t\t\t(wheel)=\"$event.preventDefault()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear class=\"textField-input-affix-clear\" (onClear)=\"clearValue(); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t</div>\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t{{ ngControl.value }}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FormFieldIdDirective, selector: "[luFormFieldId]", inputs: ["luFormFieldId", "labelledByStrategy"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NumberInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-number-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NgTemplateOutlet, ClearComponent, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #addon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\">{{ addon.content }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"number\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[step]=\"step()\"\n\t\t\t[min]=\"min()\"\n\t\t\t[max]=\"max()\"\n\t\t\t[class.pr-u-noSpinButtons]=\"noSpinButtons()\"\n\t\t\t(wheel)=\"$event.preventDefault()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear class=\"textField-input-affix-clear\" (onClear)=\"clearValue(); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t</div>\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t{{ ngControl.value }}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n" }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], noSpinButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSpinButtons", required: false }] }], hasClearer: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasClearer", required: false }] }], inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], valueAlignRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAlignRight", required: false }] }], intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }] } });
@@ -603,28 +717,32 @@ class RadioGroupInputComponent {
     constructor() {
         this.formField = inject(FORM_FIELD_INSTANCE, { optional: true });
         this.ngControl = injectNgControl();
-        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+        this.size = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
         this.framed = input(false, { ...(ngDevMode ? { debugName: "framed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.framedCenter = input(false, { ...(ngDevMode ? { debugName: "framedCenter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.framedSize = input(null, ...(ngDevMode ? [{ debugName: "framedSize" }] : /* istanbul ignore next */ []));
-        this.arrow = input(...(ngDevMode ? [undefined, { debugName: "arrow" }] : /* istanbul ignore next */ []));
+        this.framedSize = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "framedSize" }] : /* istanbul ignore next */ []));
+        this.arrow = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "arrow" }] : /* istanbul ignore next */ []));
         this.name = `radio-group-${nextId$2++}`;
         if (this.formField) {
             this.formField.layout.set('fieldset');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadioGroupInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: RadioGroupInputComponent, isStandalone: true, selector: "lu-radio-group-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, framed: { classPropertyName: "framed", publicName: "framed", isSignal: true, isRequired: false, transformFunction: null }, framedCenter: { classPropertyName: "framedCenter", publicName: "framedCenter", isSignal: true, isRequired: false, transformFunction: null }, framedSize: { classPropertyName: "framedSize", publicName: "framedSize", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.inputFramedWrapper": "framed()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RadioGroupInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: RadioGroupInputComponent, isStandalone: true, selector: "lu-radio-group-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, framed: { classPropertyName: "framed", publicName: "framed", isSignal: true, isRequired: false, transformFunction: null }, framedCenter: { classPropertyName: "framedCenter", publicName: "framedCenter", isSignal: true, isRequired: false, transformFunction: null }, framedSize: { classPropertyName: "framedSize", publicName: "framedSize", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "radiogroup" }, properties: { "class.inputFramedWrapper": "framed()" } }, providers: [
             {
                 provide: RADIO_GROUP_INSTANCE,
                 useExisting: forwardRef(() => RadioGroupInputComponent),
             },
         ], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer base{lu-radio-group-input{display:block}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadioGroupInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RadioGroupInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-radio-group-input', imports: [ReactiveFormsModule], hostDirectives: [NoopValueAccessorDirective], template: '<ng-content />', host: {
                         '[class.inputFramedWrapper]': 'framed()',
+                        role: 'radiogroup',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: RADIO_GROUP_INSTANCE,
@@ -633,6 +751,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     ], styles: ["@layer base{lu-radio-group-input{display:block}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], framed: [{ type: i0.Input, args: [{ isSignal: true, alias: "framed", required: false }] }], framedCenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "framedCenter", required: false }] }], framedSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "framedSize", required: false }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: false }] }] } });
 
+/**
+ * Available RadioGroupInputComponent Types
+ */
+const RADIO_GROUP_INPUT_SIZE = ['S', 'M'];
+const RADIO_GROUP_INPUT_FRAMED_SIZE = ['L'];
+const RADIO_GROUP_INPUT_ARROW = ['neutral', 'default'];
+
 let nextId$1 = 0;
 class RadioComponent {
     #luClass;
@@ -651,16 +776,25 @@ class RadioComponent {
         this.#luClass = inject(LuClass);
         this.#parentGroup = inject(RADIO_GROUP_INSTANCE);
         this.#cdr = inject(ChangeDetectorRef);
-        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.value = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.inlineMessage = input(...(ngDevMode ? [undefined, { debugName: "inlineMessage" }] : /* istanbul ignore next */ []));
-        this.tag = input(...(ngDevMode ? [undefined, { debugName: "tag" }] : /* istanbul ignore next */ []));
-        this.framedPortal = input(...(ngDevMode ? [undefined, { debugName: "framedPortal" }] : /* istanbul ignore next */ []));
-        this.arrow = computed(() => this.#parentGroup.arrow(), ...(ngDevMode ? [{ debugName: "arrow" }] : /* istanbul ignore next */ []));
-        this.framed = computed(() => this.#parentGroup.framed(), ...(ngDevMode ? [{ debugName: "framed" }] : /* istanbul ignore next */ []));
-        this.framedCenter = computed(() => this.#parentGroup.framedCenter(), ...(ngDevMode ? [{ debugName: "framedCenter" }] : /* istanbul ignore next */ []));
-        this.framedSize = computed(() => this.#parentGroup.framedSize(), ...(ngDevMode ? [{ debugName: "framedSize" }] : /* istanbul ignore next */ []));
-        this.size = computed(() => this.#parentGroup.size(), ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.inlineMessage = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "inlineMessage" }] : /* istanbul ignore next */ []));
+        this.tag = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "tag" }] : /* istanbul ignore next */ []));
+        this.framedPortal = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "framedPortal" }] : /* istanbul ignore next */ []));
+        this.arrow = computed(() => this.#parentGroup.arrow(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "arrow" }] : /* istanbul ignore next */ []));
+        this.framed = computed(() => this.#parentGroup.framed(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "framed" }] : /* istanbul ignore next */ []));
+        this.framedCenter = computed(() => this.#parentGroup.framedCenter(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "framedCenter" }] : /* istanbul ignore next */ []));
+        this.framedSize = computed(() => this.#parentGroup.framedSize(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "framedSize" }] : /* istanbul ignore next */ []));
+        this.size = computed(() => this.#parentGroup.size(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.id = `radio-${++nextId$1}`;
         _effectWithDeps([this.size, this.arrow], (size, arrow) => {
             this.#luClass.setState({
@@ -676,15 +810,15 @@ class RadioComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: RadioComponent, isStandalone: true, selector: "lu-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inlineMessage: { classPropertyName: "inlineMessage", publicName: "inlineMessage", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, framedPortal: { classPropertyName: "framedPortal", publicName: "framedPortal", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.form-field": "!framed()", "id": "id" } }, providers: [LuClass], ngImport: i0, template: "<ng-template #radioContent>\n\t<label luFormLabel [tag]=\"tag()\" [class.inputFramed-header-label]=\"framed()\" attr.id=\"{{ id }}-label\" attr.for=\"{{ id }}-input\"\n\t\t><ng-container *ngTemplateOutlet=\"contentProjection\"\n\t/></label>\n\t<span class=\"radioField\">\n\t\t<input\n\t\t\t[formControl]=\"formControl\"\n\t\t\t[attr.disabled]=\"formControl.disabled || disabled() ? 'disabled' : null\"\n\t\t\ttype=\"radio\"\n\t\t\tclass=\"radioField-input\"\n\t\t\t[class.inputFramed-header-input]=\"framed()\"\n\t\t\tid=\"{{ id }}-input\"\n\t\t\t[attr.name]=\"name\"\n\t\t\t[name]=\"name\"\n\t\t\t[value]=\"value()\"\n\t\t\tluInput\n\t\t\tluInputStandalone\n\t\t\tattr.aria-labelledby=\"{{ id }}-label\"\n\t\t\tattr.aria-describedby=\"{{ id }}-message\"\n\t\t/>\n\t\t<span class=\"radioField-icon\" [class.inputFramed-header-icon]=\"framed()\" aria-hidden=\"true\">\n\t\t\t<span class=\"radioField-icon-check\"></span>\n\t\t</span>\n\t</span>\n\t@if (inlineMessage()) {\n\t\t<lu-inline-message [label]=\"inlineMessage()\" id=\"{{ id }}-message\" />\n\t}\n\t@if (arrow()) {\n\t\t<div class=\"form-field-arrow{{ arrow() === 'neutral' ? ' mod-neutral' : '' }}\"></div>\n\t}\n</ng-template>\n@if (framed()) {\n\t<lu-input-framed [center]=\"framedCenter()\" [size]=\"framedSize()\" [framedPortal]=\"framedPortal()\">\n\t\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n\t\t<ng-container illustration><ng-content select=\"[illustration]\" /></ng-container>\n\t\t<ng-container info><ng-content select=\"[info]\" /></ng-container>\n\t</lu-input-framed>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n}\n\n<ng-template #contentProjection><ng-content /></ng-template>\n\n@if (ngControl.value === value()) {\n\t<ng-container *luPresentationDisplayDefault><ng-container *ngTemplateOutlet=\"contentProjection\" /></ng-container>\n}\n", styles: ["@layer components{.radioField{--component-radioField-size: 1.25rem;--component-radioField-top: var(--pr-t-spacings-25);--component-radioField-borderRadius: var(--pr-t-border-radius-full);position:relative;inline-size:fit-content;block-size:fit-content;display:grid;grid-template-areas:\"radio\";grid-template-columns:var(--component-radioField-size);grid-template-rows:var(--component-radioField-size)}.radioField-icon{border:2px solid var(--palettes-neutral-700);border-radius:var(--component-radioField-borderRadius);color:var(--palettes-neutral-0);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--palettes-neutral-0);cursor:pointer;grid-area:radio;display:flex}@media(prefers-reduced-motion:reduce){.radioField-icon{transition-property:none}}.radioField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:var(--pr-t-border-radius-small)}.radioField-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(0);transition-property:transform;transition-duration:var(--commons-animations-durations-fast)}@media(prefers-reduced-motion:reduce){.radioField-icon-check{transition-property:none}}.radioField-icon-check:before{content:\"\";position:absolute;inset:0;background-color:transparent;border-radius:var(--pr-t-border-radius-full);border:2px solid var(--palettes-neutral-0)}.radioField-input{z-index:1;opacity:.0001;cursor:pointer;grid-area:radio;inline-size:100%;block-size:100%}}@layer mods{.radioField.mod-S{--component-radioField-size: 1rem}}@layer mods{.radioField-input:focus-visible~.radioField-icon:after{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.radioField-input:hover~.radioField-icon{border-color:var(--palettes-neutral-600)}.radioField-input:active~.radioField-icon{border-color:var(--palettes-neutral-800)}.radioField-input[aria-invalid=true]~.radioField-icon{border-color:var(--palettes-error-700)}.radioField-input[aria-invalid=true]:hover~.radioField-icon{border-color:var(--palettes-error-800)}.radioField-input[aria-invalid=true]:active~.radioField-icon{border-color:var(--palettes-error-900)}.radioField-input:disabled,.radioField-input:disabled:hover{cursor:default}.radioField-input:disabled~.radioField-icon,.radioField-input:disabled:hover~.radioField-icon{border-color:var(--palettes-neutral-500)}.radioField-input:checked~.radioField-icon{background-color:var(--palettes-product-700);border-color:var(--palettes-product-700)}.radioField-input:checked~.radioField-icon .radioField-icon-check{transform:scale(1)}.radioField-input:checked:hover~.radioField-icon{background-color:var(--palettes-product-800);border-color:var(--palettes-product-800)}.radioField-input:checked:active~.radioField-icon{background-color:var(--palettes-product-900);border-color:var(--palettes-product-900)}.radioField-input:checked:disabled~.radioField-icon{background-color:var(--palettes-neutral-500);border-color:var(--palettes-neutral-500);color:var(--palettes-neutral-500)}.radioField-input:checked[aria-invalid=true]~.radioField-icon{background-color:var(--palettes-error-700);border-color:var(--palettes-error-700)}.radioField-input:checked[aria-invalid=true]:hover~.radioField-icon{background-color:var(--palettes-error-800);border-color:var(--palettes-error-800)}.radioField-input:checked[aria-invalid=true]:active~.radioField-icon{background-color:var(--palettes-error-900);border-color:var(--palettes-error-900)}}@layer components{.inputFramed{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);position:relative;overflow:hidden;padding:var(--components-inputFramed-padding);border:solid 1px var(--components-inputFramed-borderColor);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-neutral-0);transition-property:box-shadow,border-color;transition-duration:var(--commons-animations-durations-fast);block-size:100%;display:flex;flex-direction:column}.inputFramed .formLabel-info{position:relative;z-index:1}.inputFramed-header-field{flex:1}.inputFramed-header-field.form-field.form-field{position:static;margin-block:0}.inputFramed-header-field a,.inputFramed-header-field button{position:relative}.inputFramed-header{padding:var(--components-inputFramed-header-padding);border-radius:var(--pr-t-border-radius-50);background-color:var(--components-inputFramed-header-backgroundColor);transition-property:background-color;transition-duration:var(--commons-animations-durations-fast);position:relative;flex-grow:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-content:flex-start;gap:var(--pr-t-spacings-100);align-items:var(--components-inputFramed-header-alignItems)}.inputFramed-header .inputFramed-header-label.formLabel{position:static;font-weight:var(--pr-t-font-fontWeight-semibold)}.inputFramed-header .inputFramed-header-label.formLabel:after{content:\"\";position:absolute;inset:calc(var(--pr-t-spacings-50) * -1)}.inputFramed-header-illustration:empty{display:none}.inputFramed-header-info{flex-basis:100%;border-block-start:1px solid var(--components-inputFramed-header-info-borderColor);padding-block-start:var(--components-inputFramed-header-info-paddingBlockStart);margin-block-start:var(--components-inputFramed-header-info-marginBlockStart);color:var(--components-inputFramed-header-info-color)}.inputFramed-header-info:empty{display:none}.inputFramed-content{display:var(--components-inputFramed-content-display);padding:var(--components-inputFramed-content-padding);margin-block-start:var(--components-inputFramed-content-marginBlockStart)}}@layer mods{.inputFramed:hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-hover)}.inputFramed:has(.inputFramed-header-input:checked){--components-inputFramed-content-display: block;--components-inputFramed-header-backgroundColor: var(--palettes-product-50);--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked);--components-inputFramed-header-info-borderColor: var(--pr-t-color-input-border-checked)}.inputFramed:has(.inputFramed-header-input:checked):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked-hover)}.inputFramed:has(.inputFramed-header-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.inputFramed:has(.inputFramed-header-input:focus-visible) .inputFramed-header-icon:after{outline:none}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]){--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical)}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical-hover)}.inputFramed:has(.inputFramed-header-input:disabled),.inputFramed:has(.inputFramed-header-input:disabled):hover{--components-inputFramed-header-borderColor: var(--palettes-neutral-50);--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-color: var(--pr-t-color-input-text-disabled)}.inputFramed:has(.inputFramed-header-input:disabled) .inputFramed-header-label,.inputFramed:has(.inputFramed-header-input:disabled):hover .inputFramed-header-label{--components-formLabel-color: var(--pr-t-color-text-disabled)}.inputFramed:has(.inputFramed-header-input:disabled) .inlineMessage,.inputFramed:has(.inputFramed-header-input:disabled):hover .inlineMessage{--components-inlineMessage-color: var(--pr-t-color-text-disabled)}.inputFramed:has(.inputFramed-header-input:disabled:checked){--components-inputFramed-header-backgroundColor: var(--palettes-neutral-25)}.inputFramed.mod-center{--components-inputFramed-header-alignItems: center}.inputFramed.mod-L{--components-inputFramed-padding: var(--pr-t-spacings-50);--components-inputFramed-header-padding: var(--pr-t-spacings-150);--components-inputFramed-content-padding: var(--pr-t-spacings-150);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-50);--components-inputFramed-header-info-marginBlockStart: var(--pr-t-spacings-100);--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-200)}}@layer components{.inputFramedWrapper{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);display:flex;flex-direction:column;gap:var(--components-inputFramed-wrapper-gap);margin-block:var(--pr-t-spacings-50)}}@layer mods{.inputFramedWrapper:has(.inputFramed.mod-L){--components-inputFramed-wrapper-gap: var(--pr-t-spacings-150)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: InlineMessageComponent, selector: "lu-inline-message", inputs: ["label", "state", "size", "withTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "component", type: InputFramedComponent, selector: "lu-input-framed", inputs: ["framedPortal", "center", "size"] }, { kind: "component", type: FormLabelComponent, selector: "label[luFormLabel], legend[luFormLabel]", inputs: ["intl", "required", "error", "tooltip", "tag", "size", "counterStatus", "counterMax", "counterId"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: RadioComponent, isStandalone: true, selector: "lu-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inlineMessage: { classPropertyName: "inlineMessage", publicName: "inlineMessage", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, framedPortal: { classPropertyName: "framedPortal", publicName: "framedPortal", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.form-field": "!framed()", "id": "id" } }, providers: [LuClass], ngImport: i0, template: "<ng-template #radioContent>\n\t<label luFormLabel [tag]=\"tag()\" [class.inputFramed-header-label]=\"framed()\" attr.id=\"{{ id }}-label\" attr.for=\"{{ id }}-input\"\n\t\t><ng-container *ngTemplateOutlet=\"contentProjection\"\n\t/></label>\n\t<span class=\"radioField\">\n\t\t<input\n\t\t\t[formControl]=\"formControl\"\n\t\t\t[attr.disabled]=\"formControl.disabled || disabled() ? 'disabled' : null\"\n\t\t\ttype=\"radio\"\n\t\t\tclass=\"radioField-input\"\n\t\t\t[class.inputFramed-header-input]=\"framed()\"\n\t\t\tid=\"{{ id }}-input\"\n\t\t\t[attr.name]=\"name\"\n\t\t\t[name]=\"name\"\n\t\t\t[value]=\"value()\"\n\t\t\tluInput\n\t\t\tluInputStandalone\n\t\t\tattr.aria-labelledby=\"{{ id }}-label\"\n\t\t\tattr.aria-describedby=\"{{ id }}-message\"\n\t\t/>\n\t\t<span class=\"radioField-icon\" [class.inputFramed-header-icon]=\"framed()\" aria-hidden=\"true\">\n\t\t\t<span class=\"radioField-icon-check\"></span>\n\t\t</span>\n\t</span>\n\t@if (inlineMessage()) {\n\t\t<lu-inline-message [label]=\"inlineMessage()\" id=\"{{ id }}-message\" />\n\t}\n\t@if (arrow()) {\n\t\t<div class=\"form-field-arrow{{ arrow() === 'neutral' ? ' mod-neutral' : '' }}\"></div>\n\t}\n</ng-template>\n@if (framed()) {\n\t<lu-input-framed [center]=\"framedCenter()\" [size]=\"framedSize()\" [framedPortal]=\"framedPortal()\">\n\t\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n\t\t<ng-container illustration><ng-content select=\"[illustration]\" /></ng-container>\n\t\t<ng-container info><ng-content select=\"[info]\" /></ng-container>\n\t</lu-input-framed>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n}\n\n<ng-template #contentProjection><ng-content /></ng-template>\n\n@if (ngControl.value === value()) {\n\t<ng-container *luPresentationDisplayDefault><ng-container *ngTemplateOutlet=\"contentProjection\" /></ng-container>\n}\n", styles: ["@layer components{.radioField{--component-radioField-size: 1.25rem;--component-radioField-top: var(--pr-t-spacings-25);--component-radioField-borderRadius: var(--pr-t-border-radius-full);position:relative;inline-size:fit-content;block-size:fit-content;display:grid;grid-template-areas:\"radio\";grid-template-columns:var(--component-radioField-size);grid-template-rows:var(--component-radioField-size)}.radioField-icon{border:2px solid var(--palettes-neutral-700);border-radius:var(--component-radioField-borderRadius);color:var(--palettes-neutral-0);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--palettes-neutral-0);cursor:pointer;grid-area:radio;display:flex}@media(prefers-reduced-motion:reduce){.radioField-icon{transition-property:none}}.radioField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:var(--pr-t-border-radius-small)}.radioField-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(0);transition-property:transform;transition-duration:var(--commons-animations-durations-fast)}@media(prefers-reduced-motion:reduce){.radioField-icon-check{transition-property:none}}.radioField-icon-check:before{content:\"\";position:absolute;inset:0;background-color:transparent;border-radius:var(--pr-t-border-radius-full);border:2px solid var(--palettes-neutral-0)}.radioField-input{z-index:1;opacity:.0001;cursor:pointer;grid-area:radio;inline-size:100%;block-size:100%}}@layer mods{.radioField.mod-S{--component-radioField-size: 1rem}}@layer mods{.radioField-input:focus-visible~.radioField-icon:after{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.radioField-input:hover~.radioField-icon{border-color:var(--palettes-neutral-600)}.radioField-input:active~.radioField-icon{border-color:var(--palettes-neutral-800)}.radioField-input[aria-invalid=true]~.radioField-icon{border-color:var(--palettes-error-700)}.radioField-input[aria-invalid=true]:hover~.radioField-icon{border-color:var(--palettes-error-800)}.radioField-input[aria-invalid=true]:active~.radioField-icon{border-color:var(--palettes-error-900)}.radioField-input:disabled,.radioField-input:disabled:hover{cursor:default}.radioField-input:disabled~.radioField-icon,.radioField-input:disabled:hover~.radioField-icon{border-color:var(--palettes-neutral-300)}.radioField-input:checked~.radioField-icon{background-color:var(--palettes-product-700);border-color:var(--palettes-product-700)}.radioField-input:checked~.radioField-icon .radioField-icon-check{transform:scale(1)}.radioField-input:checked:hover~.radioField-icon{background-color:var(--palettes-product-800);border-color:var(--palettes-product-800)}.radioField-input:checked:active~.radioField-icon{background-color:var(--palettes-product-900);border-color:var(--palettes-product-900)}.radioField-input:checked:disabled~.radioField-icon{background-color:var(--palettes-neutral-300);border-color:var(--palettes-neutral-300);color:var(--palettes-neutral-500)}.radioField-input:checked[aria-invalid=true]~.radioField-icon{background-color:var(--palettes-error-700);border-color:var(--palettes-error-700)}.radioField-input:checked[aria-invalid=true]:hover~.radioField-icon{background-color:var(--palettes-error-800);border-color:var(--palettes-error-800)}.radioField-input:checked[aria-invalid=true]:active~.radioField-icon{background-color:var(--palettes-error-900);border-color:var(--palettes-error-900)}}@layer components{.inputFramed{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);position:relative;overflow:hidden;padding:var(--components-inputFramed-padding);border:solid 1px var(--components-inputFramed-borderColor);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-neutral-0);transition-property:box-shadow,border-color;transition-duration:var(--commons-animations-durations-fast);block-size:100%;display:flex;flex-direction:column}.inputFramed .formLabel-info{position:relative;z-index:1}.inputFramed-header-field{flex:1}.inputFramed-header-field.form-field.form-field{position:static;margin-block:0}.inputFramed-header-field a,.inputFramed-header-field button{position:relative}.inputFramed-header{padding:var(--components-inputFramed-header-padding);border-radius:var(--pr-t-border-radius-50);background-color:var(--components-inputFramed-header-backgroundColor);transition-property:background-color;transition-duration:var(--commons-animations-durations-fast);position:relative;flex-grow:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-content:flex-start;gap:var(--pr-t-spacings-100);align-items:var(--components-inputFramed-header-alignItems)}.inputFramed-header .inputFramed-header-label.formLabel{position:static;font-weight:var(--pr-t-font-fontWeight-semibold)}.inputFramed-header .inputFramed-header-label.formLabel:after{content:\"\";position:absolute;inset:calc(var(--pr-t-spacings-50) * -1)}.inputFramed-header-illustration:empty{display:none}.inputFramed-header-info{flex-basis:100%;border-block-start:1px solid var(--components-inputFramed-header-info-borderColor);padding-block-start:var(--components-inputFramed-header-info-paddingBlockStart);margin-block-start:var(--components-inputFramed-header-info-marginBlockStart);color:var(--components-inputFramed-header-info-color)}.inputFramed-header-info:empty{display:none}.inputFramed-content{display:var(--components-inputFramed-content-display);padding:var(--components-inputFramed-content-padding);margin-block-start:var(--components-inputFramed-content-marginBlockStart)}}@layer mods{.inputFramed:hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-hover)}.inputFramed:has(.inputFramed-header-input:checked){--components-inputFramed-content-display: block;--components-inputFramed-header-backgroundColor: var(--palettes-product-50);--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked);--components-inputFramed-header-info-borderColor: var(--pr-t-color-input-border-checked)}.inputFramed:has(.inputFramed-header-input:checked):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked-hover)}.inputFramed:has(.inputFramed-header-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.inputFramed:has(.inputFramed-header-input:focus-visible) .inputFramed-header-icon:after{outline:none}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]){--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical)}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical-hover)}.inputFramed:has(.inputFramed-header-input:disabled),.inputFramed:has(.inputFramed-header-input:disabled):hover{--components-inputFramed-header-borderColor: var(--palettes-neutral-50);--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-color: var(--pr-t-color-input-text-disabled)}.inputFramed:has(.inputFramed-header-input:disabled) .inputFramed-header-label,.inputFramed:has(.inputFramed-header-input:disabled):hover .inputFramed-header-label{--components-formLabel-color: var(--pr-t-color-text-disabled)}.inputFramed:has(.inputFramed-header-input:disabled) .inlineMessage,.inputFramed:has(.inputFramed-header-input:disabled):hover .inlineMessage{--components-inlineMessage-color: var(--pr-t-color-text-disabled)}.inputFramed:has(.inputFramed-header-input:disabled:checked){--components-inputFramed-header-backgroundColor: var(--palettes-neutral-25)}.inputFramed.mod-center{--components-inputFramed-header-alignItems: center}.inputFramed.mod-L{--components-inputFramed-padding: var(--pr-t-spacings-50);--components-inputFramed-header-padding: var(--pr-t-spacings-150);--components-inputFramed-content-padding: var(--pr-t-spacings-150);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-50);--components-inputFramed-header-info-marginBlockStart: var(--pr-t-spacings-100);--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-200)}}@layer components{.inputFramedWrapper{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);display:flex;flex-direction:column;gap:var(--components-inputFramed-wrapper-gap);margin-block:var(--pr-t-spacings-50)}}@layer mods{.inputFramedWrapper:has(.inputFramed.mod-L){--components-inputFramed-wrapper-gap: var(--pr-t-spacings-150)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: InlineMessageComponent, selector: "lu-inline-message", inputs: ["label", "state", "size", "withTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "component", type: InputFramedComponent, selector: "lu-input-framed", inputs: ["framedPortal", "center", "size"] }, { kind: "component", type: FormLabelComponent, selector: "label[luFormLabel], legend[luFormLabel]", inputs: ["intl", "required", "error", "tooltip", "tag", "size", "counterStatus", "counterMax", "counterId"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-radio', imports: [ReactiveFormsModule, InlineMessageComponent, NgTemplateOutlet, InputDirective, InputFramedComponent, FormLabelComponent, _PresentationDisplayDefaultDirective], host: {
                         '[class.form-field]': '!framed()',
                         '[id]': 'id',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [LuClass], template: "<ng-template #radioContent>\n\t<label luFormLabel [tag]=\"tag()\" [class.inputFramed-header-label]=\"framed()\" attr.id=\"{{ id }}-label\" attr.for=\"{{ id }}-input\"\n\t\t><ng-container *ngTemplateOutlet=\"contentProjection\"\n\t/></label>\n\t<span class=\"radioField\">\n\t\t<input\n\t\t\t[formControl]=\"formControl\"\n\t\t\t[attr.disabled]=\"formControl.disabled || disabled() ? 'disabled' : null\"\n\t\t\ttype=\"radio\"\n\t\t\tclass=\"radioField-input\"\n\t\t\t[class.inputFramed-header-input]=\"framed()\"\n\t\t\tid=\"{{ id }}-input\"\n\t\t\t[attr.name]=\"name\"\n\t\t\t[name]=\"name\"\n\t\t\t[value]=\"value()\"\n\t\t\tluInput\n\t\t\tluInputStandalone\n\t\t\tattr.aria-labelledby=\"{{ id }}-label\"\n\t\t\tattr.aria-describedby=\"{{ id }}-message\"\n\t\t/>\n\t\t<span class=\"radioField-icon\" [class.inputFramed-header-icon]=\"framed()\" aria-hidden=\"true\">\n\t\t\t<span class=\"radioField-icon-check\"></span>\n\t\t</span>\n\t</span>\n\t@if (inlineMessage()) {\n\t\t<lu-inline-message [label]=\"inlineMessage()\" id=\"{{ id }}-message\" />\n\t}\n\t@if (arrow()) {\n\t\t<div class=\"form-field-arrow{{ arrow() === 'neutral' ? ' mod-neutral' : '' }}\"></div>\n\t}\n</ng-template>\n@if (framed()) {\n\t<lu-input-framed [center]=\"framedCenter()\" [size]=\"framedSize()\" [framedPortal]=\"framedPortal()\">\n\t\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n\t\t<ng-container illustration><ng-content select=\"[illustration]\" /></ng-container>\n\t\t<ng-container info><ng-content select=\"[info]\" /></ng-container>\n\t</lu-input-framed>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n}\n\n<ng-template #contentProjection><ng-content /></ng-template>\n\n@if (ngControl.value === value()) {\n\t<ng-container *luPresentationDisplayDefault><ng-container *ngTemplateOutlet=\"contentProjection\" /></ng-container>\n}\n", styles: ["@layer components{.radioField{--component-radioField-size: 1.25rem;--component-radioField-top: var(--pr-t-spacings-25);--component-radioField-borderRadius: var(--pr-t-border-radius-full);position:relative;inline-size:fit-content;block-size:fit-content;display:grid;grid-template-areas:\"radio\";grid-template-columns:var(--component-radioField-size);grid-template-rows:var(--component-radioField-size)}.radioField-icon{border:2px solid var(--palettes-neutral-700);border-radius:var(--component-radioField-borderRadius);color:var(--palettes-neutral-0);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--palettes-neutral-0);cursor:pointer;grid-area:radio;display:flex}@media(prefers-reduced-motion:reduce){.radioField-icon{transition-property:none}}.radioField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:var(--pr-t-border-radius-small)}.radioField-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(0);transition-property:transform;transition-duration:var(--commons-animations-durations-fast)}@media(prefers-reduced-motion:reduce){.radioField-icon-check{transition-property:none}}.radioField-icon-check:before{content:\"\";position:absolute;inset:0;background-color:transparent;border-radius:var(--pr-t-border-radius-full);border:2px solid var(--palettes-neutral-0)}.radioField-input{z-index:1;opacity:.0001;cursor:pointer;grid-area:radio;inline-size:100%;block-size:100%}}@layer mods{.radioField.mod-S{--component-radioField-size: 1rem}}@layer mods{.radioField-input:focus-visible~.radioField-icon:after{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.radioField-input:hover~.radioField-icon{border-color:var(--palettes-neutral-600)}.radioField-input:active~.radioField-icon{border-color:var(--palettes-neutral-800)}.radioField-input[aria-invalid=true]~.radioField-icon{border-color:var(--palettes-error-700)}.radioField-input[aria-invalid=true]:hover~.radioField-icon{border-color:var(--palettes-error-800)}.radioField-input[aria-invalid=true]:active~.radioField-icon{border-color:var(--palettes-error-900)}.radioField-input:disabled,.radioField-input:disabled:hover{cursor:default}.radioField-input:disabled~.radioField-icon,.radioField-input:disabled:hover~.radioField-icon{border-color:var(--palettes-neutral-500)}.radioField-input:checked~.radioField-icon{background-color:var(--palettes-product-700);border-color:var(--palettes-product-700)}.radioField-input:checked~.radioField-icon .radioField-icon-check{transform:scale(1)}.radioField-input:checked:hover~.radioField-icon{background-color:var(--palettes-product-800);border-color:var(--palettes-product-800)}.radioField-input:checked:active~.radioField-icon{background-color:var(--palettes-product-900);border-color:var(--palettes-product-900)}.radioField-input:checked:disabled~.radioField-icon{background-color:var(--palettes-neutral-500);border-color:var(--palettes-neutral-500);color:var(--palettes-neutral-500)}.radioField-input:checked[aria-invalid=true]~.radioField-icon{background-color:var(--palettes-error-700);border-color:var(--palettes-error-700)}.radioField-input:checked[aria-invalid=true]:hover~.radioField-icon{background-color:var(--palettes-error-800);border-color:var(--palettes-error-800)}.radioField-input:checked[aria-invalid=true]:active~.radioField-icon{background-color:var(--palettes-error-900);border-color:var(--palettes-error-900)}}@layer components{.inputFramed{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);position:relative;overflow:hidden;padding:var(--components-inputFramed-padding);border:solid 1px var(--components-inputFramed-borderColor);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-neutral-0);transition-property:box-shadow,border-color;transition-duration:var(--commons-animations-durations-fast);block-size:100%;display:flex;flex-direction:column}.inputFramed .formLabel-info{position:relative;z-index:1}.inputFramed-header-field{flex:1}.inputFramed-header-field.form-field.form-field{position:static;margin-block:0}.inputFramed-header-field a,.inputFramed-header-field button{position:relative}.inputFramed-header{padding:var(--components-inputFramed-header-padding);border-radius:var(--pr-t-border-radius-50);background-color:var(--components-inputFramed-header-backgroundColor);transition-property:background-color;transition-duration:var(--commons-animations-durations-fast);position:relative;flex-grow:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-content:flex-start;gap:var(--pr-t-spacings-100);align-items:var(--components-inputFramed-header-alignItems)}.inputFramed-header .inputFramed-header-label.formLabel{position:static;font-weight:var(--pr-t-font-fontWeight-semibold)}.inputFramed-header .inputFramed-header-label.formLabel:after{content:\"\";position:absolute;inset:calc(var(--pr-t-spacings-50) * -1)}.inputFramed-header-illustration:empty{display:none}.inputFramed-header-info{flex-basis:100%;border-block-start:1px solid var(--components-inputFramed-header-info-borderColor);padding-block-start:var(--components-inputFramed-header-info-paddingBlockStart);margin-block-start:var(--components-inputFramed-header-info-marginBlockStart);color:var(--components-inputFramed-header-info-color)}.inputFramed-header-info:empty{display:none}.inputFramed-content{display:var(--components-inputFramed-content-display);padding:var(--components-inputFramed-content-padding);margin-block-start:var(--components-inputFramed-content-marginBlockStart)}}@layer mods{.inputFramed:hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-hover)}.inputFramed:has(.inputFramed-header-input:checked){--components-inputFramed-content-display: block;--components-inputFramed-header-backgroundColor: var(--palettes-product-50);--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked);--components-inputFramed-header-info-borderColor: var(--pr-t-color-input-border-checked)}.inputFramed:has(.inputFramed-header-input:checked):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked-hover)}.inputFramed:has(.inputFramed-header-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.inputFramed:has(.inputFramed-header-input:focus-visible) .inputFramed-header-icon:after{outline:none}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]){--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical)}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical-hover)}.inputFramed:has(.inputFramed-header-input:disabled),.inputFramed:has(.inputFramed-header-input:disabled):hover{--components-inputFramed-header-borderColor: var(--palettes-neutral-50);--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-color: var(--pr-t-color-input-text-disabled)}.inputFramed:has(.inputFramed-header-input:disabled) .inputFramed-header-label,.inputFramed:has(.inputFramed-header-input:disabled):hover .inputFramed-header-label{--components-formLabel-color: var(--pr-t-color-text-disabled)}.inputFramed:has(.inputFramed-header-input:disabled) .inlineMessage,.inputFramed:has(.inputFramed-header-input:disabled):hover .inlineMessage{--components-inlineMessage-color: var(--pr-t-color-text-disabled)}.inputFramed:has(.inputFramed-header-input:disabled:checked){--components-inputFramed-header-backgroundColor: var(--palettes-neutral-25)}.inputFramed.mod-center{--components-inputFramed-header-alignItems: center}.inputFramed.mod-L{--components-inputFramed-padding: var(--pr-t-spacings-50);--components-inputFramed-header-padding: var(--pr-t-spacings-150);--components-inputFramed-content-padding: var(--pr-t-spacings-150);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-50);--components-inputFramed-header-info-marginBlockStart: var(--pr-t-spacings-100);--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-200)}}@layer components{.inputFramedWrapper{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);display:flex;flex-direction:column;gap:var(--components-inputFramed-wrapper-gap);margin-block:var(--pr-t-spacings-50)}}@layer mods{.inputFramedWrapper:has(.inputFramed.mod-L){--components-inputFramed-wrapper-gap: var(--pr-t-spacings-150)}}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [LuClass], template: "<ng-template #radioContent>\n\t<label luFormLabel [tag]=\"tag()\" [class.inputFramed-header-label]=\"framed()\" attr.id=\"{{ id }}-label\" attr.for=\"{{ id }}-input\"\n\t\t><ng-container *ngTemplateOutlet=\"contentProjection\"\n\t/></label>\n\t<span class=\"radioField\">\n\t\t<input\n\t\t\t[formControl]=\"formControl\"\n\t\t\t[attr.disabled]=\"formControl.disabled || disabled() ? 'disabled' : null\"\n\t\t\ttype=\"radio\"\n\t\t\tclass=\"radioField-input\"\n\t\t\t[class.inputFramed-header-input]=\"framed()\"\n\t\t\tid=\"{{ id }}-input\"\n\t\t\t[attr.name]=\"name\"\n\t\t\t[name]=\"name\"\n\t\t\t[value]=\"value()\"\n\t\t\tluInput\n\t\t\tluInputStandalone\n\t\t\tattr.aria-labelledby=\"{{ id }}-label\"\n\t\t\tattr.aria-describedby=\"{{ id }}-message\"\n\t\t/>\n\t\t<span class=\"radioField-icon\" [class.inputFramed-header-icon]=\"framed()\" aria-hidden=\"true\">\n\t\t\t<span class=\"radioField-icon-check\"></span>\n\t\t</span>\n\t</span>\n\t@if (inlineMessage()) {\n\t\t<lu-inline-message [label]=\"inlineMessage()\" id=\"{{ id }}-message\" />\n\t}\n\t@if (arrow()) {\n\t\t<div class=\"form-field-arrow{{ arrow() === 'neutral' ? ' mod-neutral' : '' }}\"></div>\n\t}\n</ng-template>\n@if (framed()) {\n\t<lu-input-framed [center]=\"framedCenter()\" [size]=\"framedSize()\" [framedPortal]=\"framedPortal()\">\n\t\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n\t\t<ng-container illustration><ng-content select=\"[illustration]\" /></ng-container>\n\t\t<ng-container info><ng-content select=\"[info]\" /></ng-container>\n\t</lu-input-framed>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n}\n\n<ng-template #contentProjection><ng-content /></ng-template>\n\n@if (ngControl.value === value()) {\n\t<ng-container *luPresentationDisplayDefault><ng-container *ngTemplateOutlet=\"contentProjection\" /></ng-container>\n}\n", styles: ["@layer components{.radioField{--component-radioField-size: 1.25rem;--component-radioField-top: var(--pr-t-spacings-25);--component-radioField-borderRadius: var(--pr-t-border-radius-full);position:relative;inline-size:fit-content;block-size:fit-content;display:grid;grid-template-areas:\"radio\";grid-template-columns:var(--component-radioField-size);grid-template-rows:var(--component-radioField-size)}.radioField-icon{border:2px solid var(--palettes-neutral-700);border-radius:var(--component-radioField-borderRadius);color:var(--palettes-neutral-0);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--palettes-neutral-0);cursor:pointer;grid-area:radio;display:flex}@media(prefers-reduced-motion:reduce){.radioField-icon{transition-property:none}}.radioField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:var(--pr-t-border-radius-small)}.radioField-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(0);transition-property:transform;transition-duration:var(--commons-animations-durations-fast)}@media(prefers-reduced-motion:reduce){.radioField-icon-check{transition-property:none}}.radioField-icon-check:before{content:\"\";position:absolute;inset:0;background-color:transparent;border-radius:var(--pr-t-border-radius-full);border:2px solid var(--palettes-neutral-0)}.radioField-input{z-index:1;opacity:.0001;cursor:pointer;grid-area:radio;inline-size:100%;block-size:100%}}@layer mods{.radioField.mod-S{--component-radioField-size: 1rem}}@layer mods{.radioField-input:focus-visible~.radioField-icon:after{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.radioField-input:hover~.radioField-icon{border-color:var(--palettes-neutral-600)}.radioField-input:active~.radioField-icon{border-color:var(--palettes-neutral-800)}.radioField-input[aria-invalid=true]~.radioField-icon{border-color:var(--palettes-error-700)}.radioField-input[aria-invalid=true]:hover~.radioField-icon{border-color:var(--palettes-error-800)}.radioField-input[aria-invalid=true]:active~.radioField-icon{border-color:var(--palettes-error-900)}.radioField-input:disabled,.radioField-input:disabled:hover{cursor:default}.radioField-input:disabled~.radioField-icon,.radioField-input:disabled:hover~.radioField-icon{border-color:var(--palettes-neutral-300)}.radioField-input:checked~.radioField-icon{background-color:var(--palettes-product-700);border-color:var(--palettes-product-700)}.radioField-input:checked~.radioField-icon .radioField-icon-check{transform:scale(1)}.radioField-input:checked:hover~.radioField-icon{background-color:var(--palettes-product-800);border-color:var(--palettes-product-800)}.radioField-input:checked:active~.radioField-icon{background-color:var(--palettes-product-900);border-color:var(--palettes-product-900)}.radioField-input:checked:disabled~.radioField-icon{background-color:var(--palettes-neutral-300);border-color:var(--palettes-neutral-300);color:var(--palettes-neutral-500)}.radioField-input:checked[aria-invalid=true]~.radioField-icon{background-color:var(--palettes-error-700);border-color:var(--palettes-error-700)}.radioField-input:checked[aria-invalid=true]:hover~.radioField-icon{background-color:var(--palettes-error-800);border-color:var(--palettes-error-800)}.radioField-input:checked[aria-invalid=true]:active~.radioField-icon{background-color:var(--palettes-error-900);border-color:var(--palettes-error-900)}}@layer components{.inputFramed{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);position:relative;overflow:hidden;padding:var(--components-inputFramed-padding);border:solid 1px var(--components-inputFramed-borderColor);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-neutral-0);transition-property:box-shadow,border-color;transition-duration:var(--commons-animations-durations-fast);block-size:100%;display:flex;flex-direction:column}.inputFramed .formLabel-info{position:relative;z-index:1}.inputFramed-header-field{flex:1}.inputFramed-header-field.form-field.form-field{position:static;margin-block:0}.inputFramed-header-field a,.inputFramed-header-field button{position:relative}.inputFramed-header{padding:var(--components-inputFramed-header-padding);border-radius:var(--pr-t-border-radius-50);background-color:var(--components-inputFramed-header-backgroundColor);transition-property:background-color;transition-duration:var(--commons-animations-durations-fast);position:relative;flex-grow:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-content:flex-start;gap:var(--pr-t-spacings-100);align-items:var(--components-inputFramed-header-alignItems)}.inputFramed-header .inputFramed-header-label.formLabel{position:static;font-weight:var(--pr-t-font-fontWeight-semibold)}.inputFramed-header .inputFramed-header-label.formLabel:after{content:\"\";position:absolute;inset:calc(var(--pr-t-spacings-50) * -1)}.inputFramed-header-illustration:empty{display:none}.inputFramed-header-info{flex-basis:100%;border-block-start:1px solid var(--components-inputFramed-header-info-borderColor);padding-block-start:var(--components-inputFramed-header-info-paddingBlockStart);margin-block-start:var(--components-inputFramed-header-info-marginBlockStart);color:var(--components-inputFramed-header-info-color)}.inputFramed-header-info:empty{display:none}.inputFramed-content{display:var(--components-inputFramed-content-display);padding:var(--components-inputFramed-content-padding);margin-block-start:var(--components-inputFramed-content-marginBlockStart)}}@layer mods{.inputFramed:hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-hover)}.inputFramed:has(.inputFramed-header-input:checked){--components-inputFramed-content-display: block;--components-inputFramed-header-backgroundColor: var(--palettes-product-50);--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked);--components-inputFramed-header-info-borderColor: var(--pr-t-color-input-border-checked)}.inputFramed:has(.inputFramed-header-input:checked):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked-hover)}.inputFramed:has(.inputFramed-header-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.inputFramed:has(.inputFramed-header-input:focus-visible) .inputFramed-header-icon:after{outline:none}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]){--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical)}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical-hover)}.inputFramed:has(.inputFramed-header-input:disabled),.inputFramed:has(.inputFramed-header-input:disabled):hover{--components-inputFramed-header-borderColor: var(--palettes-neutral-50);--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-color: var(--pr-t-color-input-text-disabled)}.inputFramed:has(.inputFramed-header-input:disabled) .inputFramed-header-label,.inputFramed:has(.inputFramed-header-input:disabled):hover .inputFramed-header-label{--components-formLabel-color: var(--pr-t-color-text-disabled)}.inputFramed:has(.inputFramed-header-input:disabled) .inlineMessage,.inputFramed:has(.inputFramed-header-input:disabled):hover .inlineMessage{--components-inlineMessage-color: var(--pr-t-color-text-disabled)}.inputFramed:has(.inputFramed-header-input:disabled:checked){--components-inputFramed-header-backgroundColor: var(--palettes-neutral-25)}.inputFramed.mod-center{--components-inputFramed-header-alignItems: center}.inputFramed.mod-L{--components-inputFramed-padding: var(--pr-t-spacings-50);--components-inputFramed-header-padding: var(--pr-t-spacings-150);--components-inputFramed-content-padding: var(--pr-t-spacings-150);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-50);--components-inputFramed-header-info-marginBlockStart: var(--pr-t-spacings-100);--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-200)}}@layer components{.inputFramedWrapper{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);display:flex;flex-direction:column;gap:var(--components-inputFramed-wrapper-gap);margin-block:var(--pr-t-spacings-50)}}@layer mods{.inputFramedWrapper:has(.inputFramed.mod-L){--components-inputFramed-wrapper-gap: var(--pr-t-spacings-150)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inlineMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineMessage", required: false }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: false }] }], framedPortal: [{ type: i0.Input, args: [{ isSignal: true, alias: "framedPortal", required: false }] }] } });
 
 class SwitchInputComponent {
@@ -696,10 +830,10 @@ class SwitchInputComponent {
             this.formField.layout.set('checkable');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SwitchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: SwitchInputComponent, isStandalone: true, selector: "lu-switch-input", host: { classAttribute: "switchField" }, hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<input luInput type=\"checkbox\" class=\"switchField-input\" [formControl]=\"ngControl.control\" />\n<span class=\"switchField-icon\" aria-hidden=\"true\"><span class=\"switchField-icon-check\"></span></span>\n<ng-container *luPresentationDisplayDefault>{{ ngControl.value ? intl.yes : intl.no }}</ng-container>\n", styles: ["@charset \"UTF-8\";@layer components{.switchField{--component-switchField-label-input-height: 1.25rem;--component-switchField-label-input-width: 2.25rem;--component-switchField-label-input-icon-fontSize: var(--pr-t-font-body-XS-lineHeight);--component-switchField-label-font: var(--pr-t-font-body-M);position:relative}.switchField-icon{display:block;inline-size:var(--component-switchField-label-input-width);block-size:var(--component-switchField-label-input-height);border:2px solid var(--palettes-neutral-500);border-radius:var(--component-switchField-label-input-height);position:relative;inset-block-start:var(--pr-t-spacings-25);color:var(--palettes-neutral-0);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--palettes-neutral-500);cursor:pointer}.switchField-icon:after{content:\"\";position:absolute;inset:-2px;outline-offset:2px;border-radius:var(--component-switchField-label-input-height)}.switchField-icon:before{content:\"\";position:absolute;inline-size:50%;aspect-ratio:1;background-color:var(--palettes-neutral-0);border-radius:var(--pr-t-border-radius-full);inset-inline-start:0;inset-block-start:0;transition-property:left;transition-duration:var(--commons-animations-durations-fast);transition-timing-function:cubic-bezier(.5,1,.5,1.5);box-shadow:var(--pr-t-elevation-shadow-overflow)}.switchField-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%}.switchField-icon-check: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;font-size:var(--component-switchField-label-input-icon-fontSize)}.switchField-icon-check:after{--icon-content: \"\\e981\";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;font-size:var(--component-switchField-label-input-icon-fontSize)}.switchField-input{position:absolute;z-index:1;inline-size:var(--component-switchField-label-input-width);block-size:var(--component-switchField-label-input-height);opacity:.0001;cursor:pointer}.switchField-input:hover~.switchField-icon{border-color:var(--palettes-neutral-600);background-color:var(--palettes-neutral-600)}.switchField-input:active~.switchField-icon{border-color:var(--palettes-neutral-800);background-color:var(--palettes-neutral-800)}.switchField-input:focus-visible~.switchField-icon{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.switchField.mod-S{--component-switchField-label-input-height: 1rem;--component-switchField-label-input-width: 1.75rem;--component-switchField-label-input-icon-fontSize: .75rem;--component-switchField-label-font: var(--pr-t-font-body-S)}}@layer mods{.switchField-input:checked~.switchField-icon{background-color:var(--palettes-product-700);border-color:var(--palettes-product-700)}.switchField-input:checked~.switchField-icon:before{inset-inline-start:50%}.switchField-input:checked:hover~.switchField-icon{background-color:var(--palettes-product-800);border-color:var(--palettes-product-800)}.switchField-input:checked:active~.switchField-icon{background-color:var(--palettes-product-900);border-color:var(--palettes-product-900)}.switchField-input:disabled~.switchField-icon{background-color:var(--commons-disabled-background);border-color:var(--commons-disabled-background);color:var(--palettes-neutral-600)}.switchField-input:disabled~.switchField-icon:before{background-color:var(--palettes-neutral-500)}.switchField-input:disabled:checked:disabled~.switchField-icon{background-color:var(--commons-disabled-background);border-color:var(--commons-disabled-background);color:var(--palettes-neutral-600)}.switchField-input:disabled:checked:disabled~.switchField-icon:before{background-color:var(--palettes-neutral-500)}.switchField-input[aria-invalid=true]~.switchField-icon{background-color:var(--palettes-error-700);border-color:var(--palettes-error-700)}.switchField-input[aria-invalid=true]:hover~.switchField-icon{background-color:var(--palettes-error-800);border-color:var(--palettes-error-800)}.switchField-input[aria-invalid=true]:active~.switchField-icon{background-color:var(--palettes-error-900);border-color:var(--palettes-error-900)}.switchField-input[aria-invalid=true]:checked:checked~.switchField-icon{background-color:var(--palettes-error-700);border-color:var(--palettes-error-700)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SwitchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: SwitchInputComponent, isStandalone: true, selector: "lu-switch-input", host: { classAttribute: "switchField" }, hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<input luInput type=\"checkbox\" class=\"switchField-input\" [formControl]=\"ngControl.control\" />\n<span class=\"switchField-icon\" aria-hidden=\"true\"><span class=\"switchField-icon-check\"></span></span>\n<ng-container *luPresentationDisplayDefault>{{ ngControl.value ? intl.yes : intl.no }}</ng-container>\n", styles: ["@charset \"UTF-8\";@layer components{.switchField{--component-switchField-label-input-height: 1.25rem;--component-switchField-label-input-width: 2.25rem;--component-switchField-label-input-icon-fontSize: var(--pr-t-font-body-XS-lineHeight);--component-switchField-label-font: var(--pr-t-font-body-M);position:relative}.switchField-icon{display:block;inline-size:var(--component-switchField-label-input-width);block-size:var(--component-switchField-label-input-height);border:2px solid var(--palettes-neutral-500);border-radius:var(--component-switchField-label-input-height);position:relative;inset-block-start:var(--pr-t-spacings-25);color:var(--palettes-neutral-0);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--palettes-neutral-500);cursor:pointer}.switchField-icon:after{content:\"\";position:absolute;inset:-2px;outline-offset:2px;border-radius:var(--component-switchField-label-input-height)}.switchField-icon:before{content:\"\";position:absolute;inline-size:50%;aspect-ratio:1;background-color:var(--palettes-neutral-0);border-radius:var(--pr-t-border-radius-full);inset-inline-start:0;inset-block-start:0;transition-property:left;transition-duration:var(--commons-animations-durations-fast);transition-timing-function:cubic-bezier(.5,1,.5,1.5);box-shadow:var(--pr-t-elevation-shadow-overflow)}.switchField-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%}.switchField-icon-check: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;font-size:var(--component-switchField-label-input-icon-fontSize)}.switchField-icon-check:after{--icon-content: \"\\e981\";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;font-size:var(--component-switchField-label-input-icon-fontSize)}.switchField-input{position:absolute;z-index:1;inline-size:var(--component-switchField-label-input-width);block-size:var(--component-switchField-label-input-height);opacity:.0001;cursor:pointer}.switchField-input:hover~.switchField-icon{border-color:var(--palettes-neutral-600);background-color:var(--palettes-neutral-600)}.switchField-input:active~.switchField-icon{border-color:var(--palettes-neutral-800);background-color:var(--palettes-neutral-800)}.switchField-input:focus-visible~.switchField-icon{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.switchField.mod-S{--component-switchField-label-input-height: 1rem;--component-switchField-label-input-width: 1.75rem;--component-switchField-label-input-icon-fontSize: .75rem;--component-switchField-label-font: var(--pr-t-font-body-S)}}@layer mods{.switchField-input:checked~.switchField-icon{background-color:var(--palettes-product-700);border-color:var(--palettes-product-700)}.switchField-input:checked~.switchField-icon:before{inset-inline-start:50%}.switchField-input:checked:hover~.switchField-icon{background-color:var(--palettes-product-800);border-color:var(--palettes-product-800)}.switchField-input:checked:active~.switchField-icon{background-color:var(--palettes-product-900);border-color:var(--palettes-product-900)}.switchField-input:disabled~.switchField-icon{background-color:var(--commons-disabled-background);border-color:var(--commons-disabled-background);color:var(--palettes-neutral-600)}.switchField-input:disabled~.switchField-icon:before{background-color:var(--palettes-neutral-500)}.switchField-input:disabled:checked:disabled~.switchField-icon{background-color:var(--commons-disabled-background);border-color:var(--commons-disabled-background);color:var(--palettes-neutral-600)}.switchField-input:disabled:checked:disabled~.switchField-icon:before{background-color:var(--palettes-neutral-500)}.switchField-input[aria-invalid=true]~.switchField-icon{background-color:var(--palettes-error-700);border-color:var(--palettes-error-700)}.switchField-input[aria-invalid=true]:hover~.switchField-icon{background-color:var(--palettes-error-800);border-color:var(--palettes-error-800)}.switchField-input[aria-invalid=true]:active~.switchField-icon{background-color:var(--palettes-error-900);border-color:var(--palettes-error-900)}.switchField-input[aria-invalid=true]:checked:checked~.switchField-icon{background-color:var(--palettes-error-700);border-color:var(--palettes-error-700)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { 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: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SwitchInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SwitchInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-switch-input', imports: [ReactiveFormsModule, InputDirective, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'switchField',
@@ -711,9 +845,12 @@ class TextareaInputComponent {
         this.#cdr = inject(ChangeDetectorRef);
         this.#destroyRef = inject(DestroyRef);
         this.ngControl = injectNgControl();
-        this.parent = viewChild('parent', ...(ngDevMode ? [{ debugName: "parent" }] : /* istanbul ignore next */ []));
-        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-        this.rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.parent = viewChild('parent', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "parent" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.rows = input(3, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
         this.autoResize = input(false, { ...(ngDevMode ? { debugName: "autoResize" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.autoResizeScrollIntoView = input(false, { ...(ngDevMode ? { debugName: "autoResizeScrollIntoView" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.disableSpellcheck = input(false, { ...(ngDevMode ? { debugName: "disableSpellcheck" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -734,10 +871,10 @@ class TextareaInputComponent {
     ngOnInit() {
         this.ngControl.valueChanges?.pipe(takeUntilDestroyed(this.#destroyRef), startWith$1(this.ngControl.value)).subscribe((value) => this.updateScroll(value));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TextareaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TextareaInputComponent, isStandalone: true, selector: "lu-textarea-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, autoResizeScrollIntoView: { classPropertyName: "autoResizeScrollIntoView", publicName: "autoResizeScrollIntoView", isSignal: true, isRequired: false, transformFunction: null }, disableSpellcheck: { classPropertyName: "disableSpellcheck", publicName: "disableSpellcheck", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "parent", first: true, predicate: ["parent"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-autoResize]=\"autoResize()\">\n\t<div class=\"textField-input\" #parent>\n\t\t@if (autoResize()) {\n\t\t\t<div class=\"textField-input-valueClone\" aria-hidden=\"true\" [attr.data-content-before]=\"cloneValue\"></div>\n\t\t}\n\t\t<textarea\n\t\t\tluInput\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[attr.placeholder]=\"placeholder()\"\n\t\t\t[attr.rows]=\"rows()\"\n\t\t\t(input)=\"updateScroll(textarea.value)\"\n\t\t\t[attr.spellcheck]=\"!disableSpellcheck()\"\n\t\t\t#textarea\n\t\t></textarea>\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t<lu-read-more>\n\t\t\t{{ ngControl.value }}\n\t\t</lu-read-more>\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: ReadMoreComponent, selector: "lu-read-more", inputs: ["intl", "lineClamp", "openOnly", "textFlow", "surface", "innerContent"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TextareaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TextareaInputComponent, isStandalone: true, selector: "lu-textarea-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, autoResizeScrollIntoView: { classPropertyName: "autoResizeScrollIntoView", publicName: "autoResizeScrollIntoView", isSignal: true, isRequired: false, transformFunction: null }, disableSpellcheck: { classPropertyName: "disableSpellcheck", publicName: "disableSpellcheck", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "parent", first: true, predicate: ["parent"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-autoResize]=\"autoResize()\">\n\t<div class=\"textField-input\" #parent>\n\t\t@if (autoResize()) {\n\t\t\t<div class=\"textField-input-valueClone\" aria-hidden=\"true\" [attr.data-content-before]=\"cloneValue\"></div>\n\t\t}\n\t\t<textarea\n\t\t\tluInput\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[attr.placeholder]=\"placeholder()\"\n\t\t\t[attr.rows]=\"rows()\"\n\t\t\t(input)=\"updateScroll(textarea.value)\"\n\t\t\t[attr.spellcheck]=\"!disableSpellcheck()\"\n\t\t\t#textarea\n\t\t></textarea>\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t<lu-read-more>\n\t\t\t{{ ngControl.value }}\n\t\t</lu-read-more>\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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: ReadMoreComponent, selector: "lu-read-more", inputs: ["intl", "lineClamp", "openOnly", "textFlow", "surface", "innerContent"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TextareaInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TextareaInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-textarea-input', imports: [InputDirective, ReactiveFormsModule, ReadMoreComponent, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"textField\" [class.mod-autoResize]=\"autoResize()\">\n\t<div class=\"textField-input\" #parent>\n\t\t@if (autoResize()) {\n\t\t\t<div class=\"textField-input-valueClone\" aria-hidden=\"true\" [attr.data-content-before]=\"cloneValue\"></div>\n\t\t}\n\t\t<textarea\n\t\t\tluInput\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[attr.placeholder]=\"placeholder()\"\n\t\t\t[attr.rows]=\"rows()\"\n\t\t\t(input)=\"updateScroll(textarea.value)\"\n\t\t\t[attr.spellcheck]=\"!disableSpellcheck()\"\n\t\t\t#textarea\n\t\t></textarea>\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t<lu-read-more>\n\t\t\t{{ ngControl.value }}\n\t\t</lu-read-more>\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n" }]
         }], propDecorators: { parent: [{ type: i0.ViewChild, args: ['parent', { isSignal: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], autoResizeScrollIntoView: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResizeScrollIntoView", required: false }] }], disableSpellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSpellcheck", required: false }] }] } });
@@ -745,22 +882,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 let nextId = 0;
 class FieldsetComponent {
     constructor() {
-        this.heading = input(null, ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
-        this.helper = input(null, ...(ngDevMode ? [{ debugName: "helper" }] : /* istanbul ignore next */ []));
-        this.action = input(null, ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
-        this.size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.heading = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+        this.helper = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "helper" }] : /* istanbul ignore next */ []));
+        this.action = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
+        this.size = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.horizontal = input(false, { ...(ngDevMode ? { debugName: "horizontal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.expandable = input(false, { ...(ngDevMode ? { debugName: "expandable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        this.hiddenLegend = input(false, { ...(ngDevMode ? { debugName: "hiddenLegend" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.expanded = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
         this.id = `fieldsetTitleContent${nextId++}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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<span luButton=\"ghost\" size=\"S\"><lu-icon icon=\"arrowChevronBottom\" /></span>\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[aria-expanded] .icon-arrowChevronBottom{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)}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button:after{font-size:var(--pr-t-font-body-S-lineHeight);block-size: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"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton], a[luButton], span[luButton], button[prButton], a[prButton], span[prButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton", "prButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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 }, hiddenLegend: { classPropertyName: "hiddenLegend", publicName: "hiddenLegend", 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\t[class.mod-hiddenLegend]=\"hiddenLegend()\"\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<span luButton=\"ghost\" size=\"S\"><lu-icon icon=\"arrowChevronBottom\" /></span>\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: var(--components-form-maxWidth, 50rem);--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[aria-expanded] .icon-arrowChevronBottom{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;--components-form-maxWidth: initial}.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.mod-hiddenLegend{--components-fieldset-gap: 0}.fieldset.mod-hiddenLegend .fieldset-title-content-text{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.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)}.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)}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button:after{font-size:var(--pr-t-font-body-S-lineHeight);block-size: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$1, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton], a[luButton], span[luButton], button[prButton], a[prButton], span[prButton]", inputs: ["size", "block", "disabled", "critical", "delete", "disclosure", "palette", "state", "luButton", "prButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FieldsetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-fieldset', encapsulation: ViewEncapsulation.None, imports: [PortalDirective, NgTemplateOutlet, IconComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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<span luButton=\"ghost\" size=\"S\"><lu-icon icon=\"arrowChevronBottom\" /></span>\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[aria-expanded] .icon-arrowChevronBottom{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)}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button:after{font-size:var(--pr-t-font-body-S-lineHeight);block-size:var(--pr-t-font-body-S-lineHeight)}@media not all and (min-width:30em){.fieldset{--components-fieldset-title-content-flexWrap: wrap}}}\n"] }]
-        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+            args: [{ selector: 'lu-fieldset', encapsulation: ViewEncapsulation.None, imports: [PortalDirective, NgTemplateOutlet, IconComponent$1, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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\t[class.mod-hiddenLegend]=\"hiddenLegend()\"\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<span luButton=\"ghost\" size=\"S\"><lu-icon icon=\"arrowChevronBottom\" /></span>\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: var(--components-form-maxWidth, 50rem);--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[aria-expanded] .icon-arrowChevronBottom{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;--components-form-maxWidth: initial}.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.mod-hiddenLegend{--components-fieldset-gap: 0}.fieldset.mod-hiddenLegend .fieldset-title-content-text{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.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)}.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)}.fieldset:has(.fieldset-title-content-action:not(:empty)) .fieldset-title-content-action .button:after{font-size:var(--pr-t-font-body-S-lineHeight);block-size:var(--pr-t-font-body-S-lineHeight)}@media not all and (min-width:30em){.fieldset{--components-fieldset-title-content-flexWrap: wrap}}}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], hiddenLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenLegend", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+
+/**
+ * Available FieldsetComponent Types
+ */
+const FIELDSET_SIZE = ['S'];
 
 const Translations = {
     pt: {
@@ -796,12 +944,25 @@ const luColorTranslations = Translations;
 
 class ColorInputComponent {
     constructor() {
-        this.intl = input(...intlInputOptions(LU_COLOR_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
-        this.mouseHighlighted = signal('', ...(ngDevMode ? [{ debugName: "mouseHighlighted" }] : /* istanbul ignore next */ []));
-        this.keyboardHighlighted = signal('', ...(ngDevMode ? [{ debugName: "keyboardHighlighted" }] : /* istanbul ignore next */ []));
-        this.highlighted = computed(() => this.mouseHighlighted() || this.keyboardHighlighted(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
-        this.clue = signal('', ...(ngDevMode ? [{ debugName: "clue" }] : /* istanbul ignore next */ []));
-        this.colors = input.required(...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
+        this.intl = input(...intlInputOptions(LU_COLOR_TRANSLATIONS), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
+        this.pointerNavigation = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pointerNavigation" }] : /* istanbul ignore next */ []));
+        this.mouseHighlighted = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mouseHighlighted" }] : /* istanbul ignore next */ []));
+        this.keyboardHighlighted = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyboardHighlighted" }] : /* istanbul ignore next */ []));
+        this.highlighted = computed(() => {
+            if (!this.pointerNavigation()) {
+                return this.keyboardHighlighted();
+            }
+            return this.mouseHighlighted() || this.keyboardHighlighted();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.clue = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clue" }] : /* istanbul ignore next */ []));
+        this.colors = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
         this.clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.ngControl = injectNgControl();
@@ -810,25 +971,39 @@ class ColorInputComponent {
                 return this.colors().filter((color) => color.name.toLowerCase().includes(this.clue().toLowerCase()));
             }
             return this.colors();
-        }, ...(ngDevMode ? [{ debugName: "filteredColors" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredColors" }] : /* istanbul ignore next */ []));
         if (this.ngControl && this.ngControl.valueChanges) {
             const controlValueSignal = toSignal(this.ngControl.valueChanges?.pipe(startWith$1(this.ngControl.value)));
             this.currentColorPresentation = computed(() => {
                 return this.colors().find((c) => c.background === controlValueSignal()) || null;
-            }, ...(ngDevMode ? [{ debugName: "currentColorPresentation" }] : /* istanbul ignore next */ []));
+            }, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "currentColorPresentation" }] : /* istanbul ignore next */ []));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ColorInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\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-path: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 }); }
+    onKeydown() {
+        this.pointerNavigation.set(false);
+    }
+    onMousemove() {
+        this.pointerNavigation.set(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ColorInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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 } }, host: { listeners: { "document:keydown": "onKeydown()", "document:mousemove": "onMousemove()" } }, 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<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\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}.lu-picker-panel .optionItem.is-highlighted .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-path: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 .lu-picker-content-option{flex-direction:row;display:flex;flex-wrap:wrap;padding:var(--pr-t-spacings-100);gap:0}.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", "impersonation"] }, { 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.2.14", ngImport: i0, type: ColorInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", 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<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\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-path: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 }] }] } });
+            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<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\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}.lu-picker-panel .optionItem.is-highlighted .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-path: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 .lu-picker-content-option{flex-direction:row;display:flex;flex-wrap:wrap;padding:var(--pr-t-spacings-100);gap:0}.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 }] }], onKeydown: [{
+                type: HostListener,
+                args: ['document:keydown']
+            }], onMousemove: [{
+                type: HostListener,
+                args: ['document:mousemove']
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CheckboxInputComponent, ColorInputComponent, FieldsetComponent, FormFieldIdDirective, INVARIANT_CULTURE_CODE, LU_NUMBERFIELD_TRANSLATIONS, LU_TEXTFIELD_TRANSLATIONS, MultiLanguageInputValidators, MultilanguageInputComponent, NoopValueAccessorDirective, NumberFormatInputComponent, NumberInputComponent, RadioComponent, RadioGroupInputComponent, SwitchInputComponent, TextInputComponent, TextareaInputComponent, areAllLanguagesFilled, injectNgControl, isInvariantFilled, luNumberFieldTranslations, luTextfieldTranslations };
+export { CheckboxInputComponent, ColorInputComponent, FIELDSET_SIZE, FORM_FIELD_ID_LABELLED_BY_STRATEGY, FieldsetComponent, FormFieldIdDirective, INVARIANT_CULTURE_CODE, LU_NUMBERFIELD_TRANSLATIONS, LU_TEXTFIELD_TRANSLATIONS, MultiLanguageInputValidators, MultilanguageInputComponent, NoopValueAccessorDirective, NumberFormatInputComponent, NumberInputComponent, RADIO_GROUP_INPUT_ARROW, RADIO_GROUP_INPUT_FRAMED_SIZE, RADIO_GROUP_INPUT_SIZE, RadioComponent, RadioGroupInputComponent, SwitchInputComponent, TextInputComponent, TextareaInputComponent, areAllLanguagesFilled, injectNgControl, isInvariantFilled, luNumberFieldTranslations, luTextfieldTranslations };
 //# sourceMappingURL=lucca-front-ng-forms.mjs.map