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

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

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, HostBinding, Input, Directive, DestroyRef, signal, input, booleanAttribute, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, EventEmitter, Output, ViewChild, LOCALE_ID, computed, viewChild, numberAttribute, ChangeDetectorRef, model } from '@angular/core';
-import { FormFieldComponent, FORM_FIELD_INSTANCE, INPUT_FRAMED_INSTANCE, InputDirective, InputFramedComponent } from '@lucca-front/ng/form-field';
+import { inject, input, computed, Directive, DestroyRef, booleanAttribute, signal, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, viewChild, linkedSignal, output, LOCALE_ID, numberAttribute, ChangeDetectorRef, model } from '@angular/core';
+import { ɵeffectWithDeps as _effectWithDeps, getIntl, IntlParamsPipe, LuClass, PortalDirective } from '@lucca-front/ng/core';
+import { FormFieldComponent, INPUT_FRAMED_INSTANCE, FORM_FIELD_INSTANCE, InputDirective, InputFramedComponent } from '@lucca-front/ng/form-field';
 import { filter, take, startWith } from 'rxjs/operators';
 import * as i2 from '@angular/forms';
 import { NgControl, NgModel, FormControlDirective, FormControlName, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -8,7 +9,6 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FILTER_PILL_INPUT_COMPONENT, FilterPillLabelDirective } from '@lucca-front/ng/filter-pills';
 import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
 import { ConnectionPositionPair } from '@angular/cdk/overlay';
-import { getIntl, IntlParamsPipe, LuClass, PortalDirective } from '@lucca-front/ng/core';
 import { PopoverDirective } from '@lucca-front/ng/popover2';
 import { NgTemplateOutlet } from '@angular/common';
 import { ClearComponent } from '@lucca-front/ng/clear';
@@ -20,49 +20,36 @@ import { IconComponent } from '@lucca-front/ng/icon';
 
 class FormFieldIdDirective {
     #formFieldComponent;
-    #suffix;
-    set suffix(suffix) {
-        this.#suffix = suffix;
-        if (this.#formFieldComponent.ready) {
-            this.applyLabelledBy();
-        }
-    }
-    get id() {
-        return `${this.#formFieldComponent.id()}-${this.#suffix}`;
-    }
     constructor() {
         this.#formFieldComponent = inject(FormFieldComponent);
-        this.labelledByStrategy = 'append';
-        this.#formFieldComponent.ready$.pipe(filter(Boolean), take(1)).subscribe(() => {
-            this.applyLabelledBy();
+        this.suffix = input.required({ alias: 'luFormFieldId' });
+        this.labelledByStrategy = input('append');
+        this.id = computed(() => `${this.#formFieldComponent.id()}-${this.suffix()}`);
+        _effectWithDeps([this.suffix], (suffix) => {
+            if (suffix && this.#formFieldComponent.ready) {
+                this.applyLabelledBy();
+            }
         });
+        this.#formFieldComponent.ready$.pipe(filter(Boolean), take(1)).subscribe(() => this.applyLabelledBy());
     }
     applyLabelledBy() {
-        this.#formFieldComponent.addLabelledBy(`${this.#formFieldComponent.id()}-${this.#suffix}`, this.labelledByStrategy === 'prepend');
+        this.#formFieldComponent.addLabelledBy(this.id(), this.labelledByStrategy() === 'prepend');
     }
     ngOnDestroy() {
-        this.#formFieldComponent.removeLabelledBy(`${this.#formFieldComponent.id()}-${this.#suffix}`);
+        this.#formFieldComponent.removeLabelledBy(this.id());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: FormFieldIdDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: FormFieldIdDirective, isStandalone: true, selector: "[luFormFieldId]", inputs: { suffix: ["luFormFieldId", "suffix"], labelledByStrategy: "labelledByStrategy" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: FormFieldIdDirective, isStandalone: true, selector: "[luFormFieldId]", inputs: { suffix: { classPropertyName: "suffix", publicName: "luFormFieldId", isSignal: true, isRequired: true, 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: "20.0.2", ngImport: i0, type: FormFieldIdDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luFormFieldId]',
+                    host: {
+                        '[attr.id]': 'id()',
+                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { suffix: [{
-                type: Input,
-                args: [{
-                        required: true,
-                        alias: 'luFormFieldId',
-                    }]
-            }], labelledByStrategy: [{
-                type: Input
-            }], id: [{
-                type: HostBinding,
-                args: ['attr.id']
-            }] } });
+        }], ctorParameters: () => [] });
 
 //Source: https://netbasal.com/forwarding-form-controls-to-custom-control-components-in-angular-701e8406cc55
 // Heavily modified to handle ngModel properly
@@ -117,19 +104,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
 let nextId$3 = 0;
 class CheckboxInputComponent {
     constructor() {
+        this.framed = inject(INPUT_FRAMED_INSTANCE, { optional: true }) !== null;
         this.parentInput = inject(FILTER_PILL_INPUT_COMPONENT, { optional: true, skipSelf: true });
         this.formField = inject(FORM_FIELD_INSTANCE, { optional: true });
+        this.checklist = input(false, { transform: booleanAttribute });
+        /**
+         * Should set aria-checked='mixed' attribute ?
+         */
+        this.mixed = input(false, { transform: booleanAttribute });
         this.isFilterPill = signal(false);
         this.filterPillInputId = `lu-checkbox-pill-input-${nextId$3++}`;
-        this.checklist = input(false, { transform: booleanAttribute });
         this.filterPillLayout = signal('checkable');
         this.isFilterPillEmpty = signal(true);
         this.isFilterPillClearable = signal(false);
         this.hideCombobox = signal(true);
         this.showColon = signal(false);
         this.ngControl = injectNgControl();
-        this.mixed = false;
-        this.framed = inject(INPUT_FRAMED_INSTANCE, { optional: true }) !== null;
         if (this.formField) {
             this.formField.layout.set('checkable');
         }
@@ -145,12 +135,12 @@ class CheckboxInputComponent {
     }
     onFilterPillClick() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CheckboxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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: false, isRequired: false, transformFunction: booleanAttribute } }, host: { properties: { "class.checkboxField": "true", "class.mod-checklist": "checklist()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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", 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:Lucca icons;font-feature-settings:\"liga\";font-style:normal;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-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-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"], exportAs: ["luTooltip"] }], 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<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", 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:Lucca icons;font-feature-settings:\"liga\";font-style:normal;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-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-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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CheckboxInputComponent, decorators: [{
             type: Component,
@@ -162,15 +152,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                     ], 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", 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:Lucca icons;font-feature-settings:\"liga\";font-style:normal;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-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-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"] }]
-        }], ctorParameters: () => [], propDecorators: { 
-        /**
-         * Should set aria-checked='mixed' attribute ?
-         */
-        mixed: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+                    }, 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", 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:Lucca icons;font-feature-settings:\"liga\";font-style:normal;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-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-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"] }]
+        }], ctorParameters: () => [] });
 
 const Translations$3 = {
     pt: {
@@ -213,76 +196,47 @@ const LU_TEXTFIELD_TRANSLATIONS = new InjectionToken('LuTextfieldTranslations',
 const luTextfieldTranslations = Translations$3;
 
 class TextInputComponent {
+    hasTogglePasswordVisibilityIcon() {
+        return this.typeRef() === 'password';
+    }
     constructor() {
+        this.intl = getIntl(LU_TEXTFIELD_TRANSLATIONS);
         this.ngControl = injectNgControl();
+        this.inputElementRef = viewChild('inputElement');
         this.mask = input(null);
-        this.placeholder = '';
-        this.autocomplete = 'off';
-        this.hasClearer = false;
-        this.hasSearchIcon = false;
-        this.valueAlignRight = false;
-        this.blur = new EventEmitter();
-        this.searchIcon = 'searchMagnifyingGlass';
+        this.placeholder = input('');
+        this.autocomplete = input('off');
+        this.hasClearer = input(false, { transform: booleanAttribute });
+        this.hasSearchIcon = input(false, { transform: booleanAttribute });
+        this.valueAlignRight = input(false, { transform: booleanAttribute });
+        this.prefix = input();
+        this.suffix = input();
+        /**
+         * Search icon to use for when `hasSearchIcon` is true, defaults to 'search'
+         */
+        this.searchIcon = input('searchMagnifyingGlass');
+        this.type = input('text');
+        this.typeRef = linkedSignal(() => this.type());
+        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.blur = output();
         this.showPassword = signal(false);
-        this._type = 'text';
-        this.intl = getIntl(LU_TEXTFIELD_TRANSLATIONS);
-    }
-    get type() {
-        return this.showPassword() ? 'text' : this._type;
-    }
-    set type(type) {
-        this._type = type;
-    }
-    hasTogglePasswordVisibilityIcon() {
-        return this._type === 'password';
+        _effectWithDeps([this.showPassword], (showPassword) => this.typeRef.set(showPassword ? 'text' : this.type()));
     }
     clearValue() {
         this.ngControl.reset();
-        this.inputElementRef.nativeElement.focus();
+        this.inputElementRef().nativeElement.focus();
     }
     togglePasswordVisibility() {
         const _showPassword = this.showPassword();
         this.showPassword.set(!_showPassword);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: TextInputComponent, isStandalone: true, selector: "lu-text-input", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, hasClearer: { classPropertyName: "hasClearer", publicName: "hasClearer", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hasSearchIcon: { classPropertyName: "hasSearchIcon", publicName: "hasSearchIcon", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, valueAlignRight: { classPropertyName: "valueAlignRight", publicName: "valueAlignRight", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: false, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, searchIcon: { classPropertyName: "searchIcon", publicName: "searchIcon", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, static: 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) {\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]=\"type\"\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", 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: ["size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: TextInputComponent, isStandalone: true, selector: "lu-text-input", inputs: { 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]=\"type()\"\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", 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: ["size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-text-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NgTemplateOutlet, NgxMaskDirective, ClearComponent], 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) {\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]=\"type\"\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" }]
-        }], propDecorators: { placeholder: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }], hasClearer: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hasSearchIcon: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], valueAlignRight: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], inputElementRef: [{
-                type: ViewChild,
-                args: ['inputElement', { static: true }]
-            }], prefix: [{
-                type: Input
-            }], suffix: [{
-                type: Input
-            }], 
-        // eslint-disable-next-line @angular-eslint/no-output-native
-        blur: [{
-                type: Output
-            }], type: [{
-                type: Input
-            }], 
-        /**
-         * Search icon to use for when `hasSearchIcon` is true, defaults to 'search'
-         */
-        searchIcon: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'lu-text-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NgTemplateOutlet, NgxMaskDirective, ClearComponent], 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]=\"type()\"\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" }]
+        }], ctorParameters: () => [] });
 
 const Translations$2 = {
     en: {
@@ -362,7 +316,7 @@ class MultilanguageInputComponent {
                 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#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/>\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", styles: ["@layer components{.multilanguage_popover-content.popover-contentOptional{max-block-size:20rem;overflow:auto}}@layer mods{.multilanguage_popover-content.popover-contentOptional:focus-visible{outline:2px solid 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: ["label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter"], 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: ["luPopover2", "luPopoverPosition", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverAnchor", "luPopoverOpenDelay", "luPopoverCloseDelay"], outputs: ["luPopoverTriggerChange", "luPopoverClosed", "luPopoverOpened"], exportAs: ["luPopover2"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["mask", "placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "type", "searchIcon"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: "pipe", type: IntlParamsPipe, name: "intlParams" }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor"], exportAs: ["luTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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#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/>\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", styles: ["@layer components{.multilanguage_popover-content.popover-contentOptional{max-block-size:20rem;overflow:auto}}@layer mods{.multilanguage_popover-content.popover-contentOptional:focus-visible{outline:2px solid 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: ["label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter"], 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: ["luPopover2", "luPopoverPosition", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverAnchor", "luPopoverOpenDelay", "luPopoverCloseDelay"], outputs: ["luPopoverTriggerChange", "luPopoverClosed", "luPopoverOpened"], exportAs: ["luPopover2"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["mask", "placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "searchIcon", "type"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: "pipe", type: IntlParamsPipe, name: "intlParams" }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: MultilanguageInputComponent, decorators: [{
             type: Component,
@@ -544,33 +498,32 @@ class NumberInputComponent {
         this.inputElementRef().nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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 } }, 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()) {\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", 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: ["size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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 } }, 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", 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: ["size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-number-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NgTemplateOutlet, ClearComponent], 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()) {\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" }]
+            args: [{ selector: 'lu-number-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NgTemplateOutlet, ClearComponent], 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" }]
         }] });
 
 const RADIO_GROUP_INSTANCE = new InjectionToken('RADIO_GROUP_INSTANCE');
 
 let nextId$2 = 0;
 class RadioGroupInputComponent {
-    get isFramed() {
-        return this.framed();
-    }
     constructor() {
         this.formField = inject(FORM_FIELD_INSTANCE, { optional: true });
         this.ngControl = injectNgControl();
+        this.size = input();
         this.framed = input(false, { transform: booleanAttribute });
         this.framedCenter = input(false, { transform: booleanAttribute });
         this.framedSize = input(null);
+        this.arrow = input();
         this.name = `radio-group-${nextId$2++}`;
         if (this.formField) {
             this.formField.layout.set('fieldset');
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: RadioGroupInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", type: RadioGroupInputComponent, isStandalone: true, selector: "lu-radio-group-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: false, 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: false, isRequired: false, transformFunction: null } }, host: { properties: { "class.inputFramedWrapper": "this.isFramed" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", 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: [
             {
                 provide: RADIO_GROUP_INSTANCE,
                 useExisting: forwardRef(() => RadioGroupInputComponent),
@@ -579,82 +532,57 @@ class RadioGroupInputComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: RadioGroupInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-radio-group-input', imports: [ReactiveFormsModule], hostDirectives: [NoopValueAccessorDirective], template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'lu-radio-group-input', imports: [ReactiveFormsModule], hostDirectives: [NoopValueAccessorDirective], template: '<ng-content />', host: {
+                        '[class.inputFramedWrapper]': 'framed()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: RADIO_GROUP_INSTANCE,
                             useExisting: forwardRef(() => RadioGroupInputComponent),
                         },
                     ], styles: ["@layer base{lu-radio-group-input{display:block}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { size: [{
-                type: Input
-            }], arrow: [{
-                type: Input
-            }], isFramed: [{
-                type: HostBinding,
-                args: ['class.inputFramedWrapper']
-            }] } });
+        }], ctorParameters: () => [] });
 
 let nextId$1 = 0;
 class RadioComponent {
-    constructor() {
-        this.#luClass = inject(LuClass);
-        this.#parentGroup = inject(RADIO_GROUP_INSTANCE);
-        this.id = `radio-${++nextId$1}`;
-    }
     #luClass;
     #parentGroup;
-    get arrow() {
-        return this.#parentGroup.arrow;
-    }
-    get framed() {
-        return this.#parentGroup.framed();
-    }
-    get framedCenter() {
-        return this.#parentGroup.framedCenter();
-    }
-    get framedSize() {
-        return this.#parentGroup.framedSize();
-    }
-    get notFramed() {
-        return !this.framed;
-    }
     get formControl() {
         return this.#parentGroup.ngControl.control;
     }
     get name() {
         return this.#parentGroup.name;
     }
-    ngOnChanges() {
-        this.#luClass.setState({
-            [`mod-${this.#parentGroup.size}`]: !!this.#parentGroup.size,
-            'mod-withArrow': this.arrow !== undefined,
+    constructor() {
+        this.#luClass = inject(LuClass);
+        this.#parentGroup = inject(RADIO_GROUP_INSTANCE);
+        this.value = input.required();
+        this.disabled = input(false, { transform: booleanAttribute });
+        this.inlineMessage = input();
+        this.tag = input();
+        this.framedPortal = input();
+        this.arrow = computed(() => this.#parentGroup.arrow());
+        this.framed = computed(() => this.#parentGroup.framed());
+        this.framedCenter = computed(() => this.#parentGroup.framedCenter());
+        this.framedSize = computed(() => this.#parentGroup.framedSize());
+        this.size = computed(() => this.#parentGroup.size());
+        this.id = `radio-${++nextId$1}`;
+        _effectWithDeps([this.size, this.arrow], (size, arrow) => {
+            this.#luClass.setState({
+                [`mod-${size}`]: !!size,
+                'mod-withArrow': arrow !== undefined,
+            });
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: RadioComponent, isStandalone: true, selector: "lu-radio", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute], inlineMessage: "inlineMessage", tag: "tag", framedPortal: "framedPortal" }, host: { properties: { "class.form-field": "this.notFramed", "id": "this.id" } }, providers: [LuClass], usesOnChanges: true, ngImport: i0, template: "<ng-template #radioContent>\n\t<label class=\"formLabel\" [class.inputFramed-header-label]=\"framed\" id=\"{{ id }}-label\" for=\"{{ id }}-input\">\n\t\t<ng-content />\n\t\t@if (tag) {\n\t\t\t<span class=\"formLabel-tag tag\">{{ tag }}</span>\n\t\t}\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", 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-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-label-fontWeight: var(--pr-t-font-fontWeight-regular);--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-header-label.formLabel{position:static;font-weight:var(--components-inputFramed-header-label-fontWeight)}.inputFramed-header-label.formLabel:after{content:\"\";position:absolute;inset:calc(var(--pr-t-spacings-50) * -1)}.inputFramed-header-field{flex:1}.inputFramed-header-field.form-field.form-field{position:static;margin-block:0}.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-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-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-backgroundColor: var(--palettes-neutral-25);--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.mod-center{--components-inputFramed-header-alignItems: center}.inputFramed.mod-L{--components-inputFramed-header-label-fontWeight: var(--pr-t-font-fontWeight-semibold);--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-label-fontWeight: var(--pr-t-font-fontWeight-regular);--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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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 class=\"formLabel\" [class.inputFramed-header-label]=\"framed()\" id=\"{{ id }}-label\" for=\"{{ id }}-input\">\n\t\t<ng-content />\n\t\t@if (tag()) {\n\t\t\t<span class=\"formLabel-tag tag\">{{ tag() }}</span>\n\t\t}\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", 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-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-label-fontWeight: var(--pr-t-font-fontWeight-regular);--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-header-label.formLabel{position:static;font-weight:var(--components-inputFramed-header-label-fontWeight)}.inputFramed-header-label.formLabel:after{content:\"\";position:absolute;inset:calc(var(--pr-t-spacings-50) * -1)}.inputFramed-header-field{flex:1}.inputFramed-header-field.form-field.form-field{position:static;margin-block:0}.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-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-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-backgroundColor: var(--palettes-neutral-25);--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.mod-center{--components-inputFramed-header-alignItems: center}.inputFramed.mod-L{--components-inputFramed-header-label-fontWeight: var(--pr-t-font-fontWeight-semibold);--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-label-fontWeight: var(--pr-t-font-fontWeight-regular);--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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-radio', imports: [ReactiveFormsModule, InlineMessageComponent, NgTemplateOutlet, InputDirective, InputFramedComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [LuClass], template: "<ng-template #radioContent>\n\t<label class=\"formLabel\" [class.inputFramed-header-label]=\"framed\" id=\"{{ id }}-label\" for=\"{{ id }}-input\">\n\t\t<ng-content />\n\t\t@if (tag) {\n\t\t\t<span class=\"formLabel-tag tag\">{{ tag }}</span>\n\t\t}\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", 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-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-label-fontWeight: var(--pr-t-font-fontWeight-regular);--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-header-label.formLabel{position:static;font-weight:var(--components-inputFramed-header-label-fontWeight)}.inputFramed-header-label.formLabel:after{content:\"\";position:absolute;inset:calc(var(--pr-t-spacings-50) * -1)}.inputFramed-header-field{flex:1}.inputFramed-header-field.form-field.form-field{position:static;margin-block:0}.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-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-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-backgroundColor: var(--palettes-neutral-25);--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.mod-center{--components-inputFramed-header-alignItems: center}.inputFramed.mod-L{--components-inputFramed-header-label-fontWeight: var(--pr-t-font-fontWeight-semibold);--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-label-fontWeight: var(--pr-t-font-fontWeight-regular);--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"] }]
-        }], propDecorators: { value: [{
-                type: Input,
-                args: [{ required: true }]
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], inlineMessage: [{
-                type: Input
-            }], tag: [{
-                type: Input
-            }], framedPortal: [{
-                type: Input
-            }], notFramed: [{
-                type: HostBinding,
-                args: ['class.form-field']
-            }], id: [{
-                type: HostBinding,
-                args: ['id']
-            }] } });
+            args: [{ selector: 'lu-radio', imports: [ReactiveFormsModule, InlineMessageComponent, NgTemplateOutlet, InputDirective, InputFramedComponent], host: {
+                        '[class.form-field]': '!framed()',
+                        '[id]': 'id',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [LuClass], template: "<ng-template #radioContent>\n\t<label class=\"formLabel\" [class.inputFramed-header-label]=\"framed()\" id=\"{{ id }}-label\" for=\"{{ id }}-input\">\n\t\t<ng-content />\n\t\t@if (tag()) {\n\t\t\t<span class=\"formLabel-tag tag\">{{ tag() }}</span>\n\t\t}\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", 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-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-label-fontWeight: var(--pr-t-font-fontWeight-regular);--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-header-label.formLabel{position:static;font-weight:var(--components-inputFramed-header-label-fontWeight)}.inputFramed-header-label.formLabel:after{content:\"\";position:absolute;inset:calc(var(--pr-t-spacings-50) * -1)}.inputFramed-header-field{flex:1}.inputFramed-header-field.form-field.form-field{position:static;margin-block:0}.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-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-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-backgroundColor: var(--palettes-neutral-25);--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.mod-center{--components-inputFramed-header-alignItems: center}.inputFramed.mod-L{--components-inputFramed-header-label-fontWeight: var(--pr-t-font-fontWeight-semibold);--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-label-fontWeight: var(--pr-t-font-fontWeight-regular);--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: () => [] });
 
 class SwitchInputComponent {
     constructor() {
@@ -676,14 +604,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
 
 class TextareaInputComponent {
     constructor() {
-        this.ngControl = injectNgControl();
         this.#cdr = inject(ChangeDetectorRef);
         this.#destroyRef = inject(DestroyRef);
-        this.placeholder = '';
-        this.rows = 3;
-        this.autoResize = false;
-        this.autoResizeScrollIntoView = false;
-        this.disableSpeelcheck = input(false, { transform: booleanAttribute });
+        this.ngControl = injectNgControl();
+        this.parent = viewChild('parent');
+        this.placeholder = input('');
+        this.rows = input(3);
+        this.autoResize = input(false, { transform: booleanAttribute });
+        this.autoResizeScrollIntoView = input(false, { transform: booleanAttribute });
+        this.disableSpellcheck = input(false, { transform: booleanAttribute });
         this.cloneValue = '';
     }
     #cdr;
@@ -692,7 +621,7 @@ class TextareaInputComponent {
         this.cloneValue = value;
         this.#cdr.detectChanges(); // Needed to apply cloneValue to autoresize HTML clone
         if (this.autoResizeScrollIntoView && this.parent) {
-            this.parent.nativeElement.scrollIntoView({
+            this.parent().nativeElement.scrollIntoView({
                 behavior: 'instant',
                 block: 'end',
             });
@@ -702,29 +631,12 @@ class TextareaInputComponent {
         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: "20.0.2", ngImport: i0, type: TextareaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: TextareaInputComponent, isStandalone: true, selector: "lu-textarea-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoResizeScrollIntoView: { classPropertyName: "autoResizeScrollIntoView", publicName: "autoResizeScrollIntoView", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, disableSpeelcheck: { classPropertyName: "disableSpeelcheck", publicName: "disableSpeelcheck", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "parent", first: true, predicate: ["parent"], descendants: 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]=\"!disableSpeelcheck()\"\n\t\t\t#textarea\n\t\t></textarea>\n\t</div>\n</div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TextareaInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-textarea-input', imports: [InputDirective, ReactiveFormsModule], 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]=\"!disableSpeelcheck()\"\n\t\t\t#textarea\n\t\t></textarea>\n\t</div>\n</div>\n" }]
-        }], propDecorators: { parent: [{
-                type: ViewChild,
-                args: ['parent']
-            }], placeholder: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], autoResize: [{
-                type: Input,
-                args: [{
-                        transform: booleanAttribute,
-                    }]
-            }], autoResizeScrollIntoView: [{
-                type: Input,
-                args: [{
-                        transform: booleanAttribute,
-                    }]
-            }] } });
+            args: [{ selector: 'lu-textarea-input', imports: [InputDirective, ReactiveFormsModule], 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" }]
+        }] });
 
 let nextId = 0;
 class FieldsetComponent {