@lucca-front/ng 22.0.5 → 22.1.0-rc.2

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, input, computed, untracked, Directive, DestroyRef, effect, InjectionToken, Injector, signal, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, viewChild, output, LOCALE_ID, ChangeDetectorRef, model } from '@angular/core';
-import { ɵeffectWithDeps as _effectWithDeps, getIntl, luBooleanAttribute, intlInputOptions, luNumberAttribute, isNotNil, PortalDirective, IntlParamsPipe, isNil, luOptionalNumberAttribute, LuClass } from '@lucca-front/ng/core';
+import { ɵeffectWithDeps as _effectWithDeps, getIntl, luBooleanAttribute, intlInputOptions, luNumberAttribute, luNullableNumberAttribute, isNotNil, PortalDirective, IntlParamsPipe, isNil, luOptionalNumberAttribute, LuClass } from '@lucca-front/ng/core';
 import { FormFieldComponent, INPUT_FRAMED_INSTANCE, FORM_FIELD_INSTANCE, InputDirective, ɵPresentationDisplayDefaultDirective as _PresentationDisplayDefaultDirective, InputFramedComponent } from '@lucca-front/ng/form-field';
 import { filter, take, startWith } from 'rxjs/operators';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
@@ -8,7 +8,7 @@ import * as i2 from '@angular/forms';
 import { NgControl, NgModel, FormControlDirective, FormControlName, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { FormField } from '@angular/forms/signals';
 import { map, distinctUntilChanged, startWith as startWith$1 } from 'rxjs';
-import { FILTER_PILL_INPUT_COMPONENT, FilterPillLabelDirective } from '@lucca-front/ng/filter-pills';
+import { FILTER_PILL_INPUT_COMPONENT, FilterPillLabelDirective } from '@lucca-front/ng/filter-pills/core';
 import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
 import { ConnectionPositionPair } from '@angular/cdk/overlay';
 import { PopoverDirective } from '@lucca-front/ng/popover2';
@@ -331,6 +331,10 @@ class TextInputComponent {
         ...(ngDevMode ? [{ debugName: "searchIcon" }] : /* istanbul ignore next */ []));
         this.type = input('text', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /**
+         * Width of the input itself, using the same scale as the form field width
+         */
+        this.width = input(null, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: (luNullableNumberAttribute) });
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.blur = output();
         this.showPassword = signal(false, /* @ts-ignore */
@@ -339,6 +343,8 @@ class TextInputComponent {
         ...(ngDevMode ? [{ debugName: "typeRef" }] : /* istanbul ignore next */ []));
         this.hasTogglePasswordVisibilityIcon = computed(() => this.type() === 'password', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasTogglePasswordVisibilityIcon" }] : /* istanbul ignore next */ []));
+        this.widthClass = computed(() => (this.width() ? `mod-width${this.width()}` : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "widthClass" }] : /* istanbul ignore next */ []));
     }
     hasValue() {
         const value = this.ngControl.value;
@@ -353,12 +359,12 @@ class TextInputComponent {
         this.showPassword.set(!_showPassword);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TextInputComponent, isStandalone: true, selector: "lu-text-input", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, hasClearer: { classPropertyName: "hasClearer", publicName: "hasClearer", isSignal: true, isRequired: false, transformFunction: null }, hasSearchIcon: { classPropertyName: "hasSearchIcon", publicName: "hasSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, valueAlignRight: { classPropertyName: "valueAlignRight", publicName: "valueAlignRight", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, searchIcon: { classPropertyName: "searchIcon", publicName: "searchIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" aria-hidden=\"true\"><ng-container *luPortal=\"addon.content\" /></span>\n\t\t\t\t<span class=\"pr-u-mask\">{{ addon.ariaLabel }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<!-- The `mask` directive is only applied when a mask is actually set: as a ControlValueAccessor it rewrites the input value\n\t\tasynchronously, which moves the caret to the end of the value on every keystroke. -->\n\t\t@if (mask(); as mask) {\n\t\t\t<input\n\t\t\t\tluInput\n\t\t\t\t[type]=\"typeRef()\"\n\t\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t\t[mask]=\"mask\"\n\t\t\t\t[attr.minlength]=\"minlength() > 0 ? minlength() : null\"\n\t\t\t\t[attr.maxlength]=\"maxlength() > 0 ? maxlength() : null\"\n\t\t\t\t#inputElement\n\t\t\t/>\n\t\t} @else {\n\t\t\t<input\n\t\t\t\tluInput\n\t\t\t\t[type]=\"typeRef()\"\n\t\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t\t[attr.minlength]=\"minlength() > 0 ? minlength() : null\"\n\t\t\t\t[attr.maxlength]=\"maxlength() > 0 ? maxlength() : null\"\n\t\t\t\t#inputElement\n\t\t\t/>\n\t\t}\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && hasValue()) {\n\t\t\t\t<lu-clear (onClear)=\"clearValue()\" class=\"textField-input-affix-clear\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t\t@if (hasSearchIcon()) {\n\t\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{ searchIcon() }}\"></span>\n\t\t\t}\n\t\t\t@if (hasTogglePasswordVisibilityIcon()) {\n\t\t\t\t<button\n\t\t\t\t\t[attr.aria-pressed]=\"showPassword()\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t\t\t(click)=\"togglePasswordVisibility()\"\n\t\t\t\t>\n\t\t\t\t\t<span aria-hidden=\"true\" [class]=\"`lucca-icon icon-${showPassword() ? 'unwatch' : 'watch'}`\"></span>\n\t\t\t\t\t<span class=\"pr-u-mask\">{{ intl().togglePasswordVisibility }}</span>\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t@if (prefix(); as prefix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\t\taddon: prefix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t\t{{ ngControl.value }}\n\t\t@if (suffix()) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\t\taddon: suffix(),\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone", "luInputLabelledBy", "luInputDescribedBy"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FormFieldIdDirective, selector: "[luFormFieldId]", inputs: ["luFormFieldId", "labelledByStrategy"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: TextInputComponent, isStandalone: true, selector: "lu-text-input", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, hasClearer: { classPropertyName: "hasClearer", publicName: "hasClearer", isSignal: true, isRequired: false, transformFunction: null }, hasSearchIcon: { classPropertyName: "hasSearchIcon", publicName: "hasSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, valueAlignRight: { classPropertyName: "valueAlignRight", publicName: "valueAlignRight", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", 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 }, width: { classPropertyName: "width", publicName: "width", 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()\" [class]=\"widthClass()\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" aria-hidden=\"true\"><ng-container *luPortal=\"addon.content\" /></span>\n\t\t\t\t<span class=\"pr-u-mask\">{{ addon.ariaLabel }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<!-- The `mask` directive is only applied when a mask is actually set: as a ControlValueAccessor it rewrites the input value\n\t\tasynchronously, which moves the caret to the end of the value on every keystroke. -->\n\t\t@if (mask(); as mask) {\n\t\t\t<input\n\t\t\t\tluInput\n\t\t\t\t[type]=\"typeRef()\"\n\t\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t\t[mask]=\"mask\"\n\t\t\t\t[attr.minlength]=\"minlength() > 0 ? minlength() : null\"\n\t\t\t\t[attr.maxlength]=\"maxlength() > 0 ? maxlength() : null\"\n\t\t\t\t#inputElement\n\t\t\t/>\n\t\t} @else {\n\t\t\t<input\n\t\t\t\tluInput\n\t\t\t\t[type]=\"typeRef()\"\n\t\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t\t[attr.minlength]=\"minlength() > 0 ? minlength() : null\"\n\t\t\t\t[attr.maxlength]=\"maxlength() > 0 ? maxlength() : null\"\n\t\t\t\t#inputElement\n\t\t\t/>\n\t\t}\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && hasValue()) {\n\t\t\t\t<lu-clear (onClear)=\"clearValue()\" class=\"textField-input-affix-clear\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t\t@if (hasSearchIcon()) {\n\t\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{ searchIcon() }}\"></span>\n\t\t\t}\n\t\t\t@if (hasTogglePasswordVisibilityIcon()) {\n\t\t\t\t<button\n\t\t\t\t\t[attr.aria-pressed]=\"showPassword()\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t\t\t(click)=\"togglePasswordVisibility()\"\n\t\t\t\t>\n\t\t\t\t\t<span aria-hidden=\"true\" [class]=\"`lucca-icon icon-${showPassword() ? 'unwatch' : 'watch'}`\"></span>\n\t\t\t\t\t<span class=\"pr-u-mask\">{{ intl().togglePasswordVisibility }}</span>\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t@if (prefix(); as prefix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\t\taddon: prefix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t\t{{ ngControl.value }}\n\t\t@if (suffix()) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\t\taddon: suffix(),\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone", "luInputLabelledBy", "luInputDescribedBy"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FormFieldIdDirective, selector: "[luFormFieldId]", inputs: ["luFormFieldId", "labelledByStrategy"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-text-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NgTemplateOutlet, NgxMaskDirective, ClearComponent, _PresentationDisplayDefaultDirective, PortalDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNgxMask()], template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" aria-hidden=\"true\"><ng-container *luPortal=\"addon.content\" /></span>\n\t\t\t\t<span class=\"pr-u-mask\">{{ addon.ariaLabel }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<!-- The `mask` directive is only applied when a mask is actually set: as a ControlValueAccessor it rewrites the input value\n\t\tasynchronously, which moves the caret to the end of the value on every keystroke. -->\n\t\t@if (mask(); as mask) {\n\t\t\t<input\n\t\t\t\tluInput\n\t\t\t\t[type]=\"typeRef()\"\n\t\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t\t[mask]=\"mask\"\n\t\t\t\t[attr.minlength]=\"minlength() > 0 ? minlength() : null\"\n\t\t\t\t[attr.maxlength]=\"maxlength() > 0 ? maxlength() : null\"\n\t\t\t\t#inputElement\n\t\t\t/>\n\t\t} @else {\n\t\t\t<input\n\t\t\t\tluInput\n\t\t\t\t[type]=\"typeRef()\"\n\t\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t\t[attr.minlength]=\"minlength() > 0 ? minlength() : null\"\n\t\t\t\t[attr.maxlength]=\"maxlength() > 0 ? maxlength() : null\"\n\t\t\t\t#inputElement\n\t\t\t/>\n\t\t}\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && hasValue()) {\n\t\t\t\t<lu-clear (onClear)=\"clearValue()\" class=\"textField-input-affix-clear\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t\t@if (hasSearchIcon()) {\n\t\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{ searchIcon() }}\"></span>\n\t\t\t}\n\t\t\t@if (hasTogglePasswordVisibilityIcon()) {\n\t\t\t\t<button\n\t\t\t\t\t[attr.aria-pressed]=\"showPassword()\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t\t\t(click)=\"togglePasswordVisibility()\"\n\t\t\t\t>\n\t\t\t\t\t<span aria-hidden=\"true\" [class]=\"`lucca-icon icon-${showPassword() ? 'unwatch' : 'watch'}`\"></span>\n\t\t\t\t\t<span class=\"pr-u-mask\">{{ intl().togglePasswordVisibility }}</span>\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t@if (prefix(); as prefix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\t\taddon: prefix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t\t{{ ngControl.value }}\n\t\t@if (suffix()) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\t\taddon: suffix(),\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n" }]
-        }], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], hasClearer: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasClearer", required: false }] }], hasSearchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSearchIcon", required: false }] }], valueAlignRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAlignRight", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], searchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchIcon", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], blur: [{ type: i0.Output, args: ["blur"] }] } });
+            args: [{ selector: 'lu-text-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NgTemplateOutlet, NgxMaskDirective, ClearComponent, _PresentationDisplayDefaultDirective, PortalDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNgxMask()], template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\" [class]=\"widthClass()\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" aria-hidden=\"true\"><ng-container *luPortal=\"addon.content\" /></span>\n\t\t\t\t<span class=\"pr-u-mask\">{{ addon.ariaLabel }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<!-- The `mask` directive is only applied when a mask is actually set: as a ControlValueAccessor it rewrites the input value\n\t\tasynchronously, which moves the caret to the end of the value on every keystroke. -->\n\t\t@if (mask(); as mask) {\n\t\t\t<input\n\t\t\t\tluInput\n\t\t\t\t[type]=\"typeRef()\"\n\t\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t\t[mask]=\"mask\"\n\t\t\t\t[attr.minlength]=\"minlength() > 0 ? minlength() : null\"\n\t\t\t\t[attr.maxlength]=\"maxlength() > 0 ? maxlength() : null\"\n\t\t\t\t#inputElement\n\t\t\t/>\n\t\t} @else {\n\t\t\t<input\n\t\t\t\tluInput\n\t\t\t\t[type]=\"typeRef()\"\n\t\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t\t[attr.minlength]=\"minlength() > 0 ? minlength() : null\"\n\t\t\t\t[attr.maxlength]=\"maxlength() > 0 ? maxlength() : null\"\n\t\t\t\t#inputElement\n\t\t\t/>\n\t\t}\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && hasValue()) {\n\t\t\t\t<lu-clear (onClear)=\"clearValue()\" class=\"textField-input-affix-clear\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t\t@if (hasSearchIcon()) {\n\t\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{ searchIcon() }}\"></span>\n\t\t\t}\n\t\t\t@if (hasTogglePasswordVisibilityIcon()) {\n\t\t\t\t<button\n\t\t\t\t\t[attr.aria-pressed]=\"showPassword()\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t\t\t(click)=\"togglePasswordVisibility()\"\n\t\t\t\t>\n\t\t\t\t\t<span aria-hidden=\"true\" [class]=\"`lucca-icon icon-${showPassword() ? 'unwatch' : 'watch'}`\"></span>\n\t\t\t\t\t<span class=\"pr-u-mask\">{{ intl().togglePasswordVisibility }}</span>\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t@if (prefix(); as prefix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\t\taddon: prefix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t\t{{ ngControl.value }}\n\t\t@if (suffix()) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\t\taddon: suffix(),\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n" }]
+        }], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], hasClearer: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasClearer", required: false }] }], hasSearchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSearchIcon", required: false }] }], valueAlignRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAlignRight", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], searchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchIcon", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], blur: [{ type: i0.Output, args: ["blur"] }] } });
 
 const Translations$3 = {
     en: {
@@ -504,7 +510,7 @@ class MultilanguageInputComponent {
                 useExisting: forwardRef(() => MultilanguageInputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"textField mod-multilanguage\">\n\t@if (hasNoInvariant()) {\n\t\t<div class=\"textField-prefix\">\n\t\t\t<div class=\"textField-prefix-lang\">\n\t\t\t\t@if (formFieldRef?.isInputRequired()) {\n\t\t\t\t\t{{ cultureCodeDisplay() }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup>\n\t\t\t\t} @else {\n\t\t\t\t\t{{ cultureCodeDisplay() }}\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t}\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"text\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[(ngModel)]=\"displayRow().value\"\n\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t(blur)=\"onTouched()\"\n\t\t\t(focus)=\"shouldOpenOnFocus() ? popoverRef.openPopover(true, true, true) : null\"\n\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t[attr.lang]=\"hasNoInvariant() ? displayCultureCode() : null\"\n\t\t\ttranslate=\"no\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button\n\t\t\t\t[luPopover2]=\"popoverMultilanguage\"\n\t\t\t\t#popoverRef=\"luPopover2\"\n\t\t\t\tluPopoverNoCloseButton\n\t\t\t\t[luPopoverIgnoredOutsidePointerTargets]=\"inputElement\"\n\t\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t\t[luTooltip]=\"intl().toggleMultilanguage\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\tluButton\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"textField-input-affix-toggle\"\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"signTranslation\" [alt]=\"intl().toggleMultilanguage\" />\n\t\t\t</button>\n\t\t\t<ng-template #popoverMultilanguage>\n\t\t\t\t<div class=\"popover-contentOptional multilanguage_popover-content\" [style.inlineSize.rem]=\"getPopoverInlineSizeRem(inputElement)\">\n\t\t\t\t\t<div class=\"pr-u-displayFlex pr-u-gap100 pr-u-flexDirectionColumn\">\n\t\t\t\t\t\t@if (!hasNoInvariant()) {\n\t\t\t\t\t\t\t<p class=\"pr-u-colorTextSubtle\" [class]=\"formFieldSize?.() === 'S' ? 'pr-u-bodyXS' : 'pr-u-bodyS'\">\n\t\t\t\t\t\t\t\t{{ intl().invariantInfo }}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@for (row of panelInputs(); track row.cultureCode) {\n\t\t\t\t\t\t\t<ng-template #prefixLang>\n\t\t\t\t\t\t\t\t<div class=\"textField-prefix-lang\" [class.mod-withCulture]=\"hasCulture(row.cultureCode)\">\n\t\t\t\t\t\t\t\t\t@if (hasNoInvariant()) {\n\t\t\t\t\t\t\t\t\t\t{{ row.cultureCode }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup>\n\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t{{ row.cultureCode }}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t\t<ng-template #aiSuffix>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t[size]=\"formFieldSize?.() === 'S' ? 'XS' : 'S'\"\n\t\t\t\t\t\t\t\t\tluButton=\"AI\"\n\t\t\t\t\t\t\t\t\t[luTooltip]=\"intl().translateWithAI\"\n\t\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t\t\t(click)=\"translateWithAI.emit(row.cultureCode)\"\n\t\t\t\t\t\t\t\t\tclass=\"multilanguage_popover-content-button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<lu-icon icon=\"officePenStar\" alt=\"intl().translateWithAI\" />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t\t<lu-form-field\n\t\t\t\t\t\t\t\t[size]=\"formFieldSize?.() ?? null\"\n\t\t\t\t\t\t\t\t[label]=\"intl().translateTo | intlParams: { lang: getLocaleDisplayName(row.cultureCode) }\"\n\t\t\t\t\t\t\t\thiddenLabel\n\t\t\t\t\t\t\t\t[errorInlineMessage]=\"hasNoInvariant() && !row.value ? intl().requiredError : ''\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-text-input\n\t\t\t\t\t\t\t\t\t[prefix]=\"{ content: prefixLang, ariaLabel: '' }\"\n\t\t\t\t\t\t\t\t\t[(ngModel)]=\"row.value\"\n\t\t\t\t\t\t\t\t\t[required]=\"hasNoInvariant()\"\n\t\t\t\t\t\t\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t\t\t\t\t\t\t[suffix]=\"hasAIButtons() ? { content: aiSuffix, ariaLabel: '' } : undefined\"\n\t\t\t\t\t\t\t\t\t[attr.lang]=\"row.cultureCode\"\n\t\t\t\t\t\t\t\t\ttranslate=\"no\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</lu-form-field>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (presentationValue()) {\n\t\t<span [attr.lang]=\"hasNoInvariant() ? displayCultureCode() : null\" translate=\"no\">{{ presentationValue() }}</span>\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", styles: ["@layer components{.multilanguage_popover-content.popover-contentOptional{max-block-size:20rem;max-inline-size:100%;overflow:auto}.multilanguage_popover-content.popover-contentOptional .multilanguage_popover-content-button{padding:var(--pr-t-spacings-50)}.multilanguage_popover-content.popover-contentOptional .textField:not(:focus-within,:hover) .multilanguage_popover-content-button{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}}@layer mods{.multilanguage_popover-content.popover-contentOptional:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--pr-t-border-radius-structure)}}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["intl", "label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter", "presentation"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: PopoverDirective, selector: "[luPopover2]", inputs: ["intl", "luPopover2", "luPopoverPosition", "luPopoverMaxBlockSize", "luPopoverMaxInlineSize", "overlayScrollStrategy", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverAnchor", "luPopoverIgnoredOutsidePointerTargets", "luPopoverOpenDelay", "luPopoverCloseDelay"], outputs: ["luPopoverTriggerChange", "luPopoverClosed", "luPopoverOpened"], exportAs: ["luPopover2"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["intl", "mask", "placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "minlength", "maxlength", "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", "luInputLabelledBy", "luInputDescribedBy"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip],[prTooltip]", inputs: ["luTooltip", "prTooltip", "luTooltipEnterDelay", "prTooltipEnterDelay", "luTooltipLeaveDelay", "prTooltipLeaveDelay", "luTooltipDisabled", "prTooltipDisabled", "luTooltipOnlyForDisplay", "prTooltipOnlyForDisplay", "luTooltipPosition", "prTooltipPosition", "luTooltipWhenEllipsis", "prTooltipWhenEllipsis", "luTooltipAnchor", "prTooltipAnchor", "luTooltipTriggerAnchor", "prTooltipTriggerAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton], a[luButton], span[luButton], button[prButton], a[prButton], span[prButton]", inputs: ["size", "block", "disabled", "critical", "delete", "disclosure", "palette", "state", "luButton", "prButton"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], ngImport: i0, template: "<div class=\"textField mod-multilanguage\">\n\t@if (hasNoInvariant()) {\n\t\t<div class=\"textField-prefix\">\n\t\t\t<div class=\"textField-prefix-lang\">\n\t\t\t\t@if (formFieldRef?.isInputRequired()) {\n\t\t\t\t\t{{ cultureCodeDisplay() }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup>\n\t\t\t\t} @else {\n\t\t\t\t\t{{ cultureCodeDisplay() }}\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t}\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"text\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[(ngModel)]=\"displayRow().value\"\n\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t(blur)=\"onTouched()\"\n\t\t\t(focus)=\"shouldOpenOnFocus() ? popoverRef.openPopover(true, true, true) : null\"\n\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t[attr.lang]=\"hasNoInvariant() ? displayCultureCode() : null\"\n\t\t\ttranslate=\"no\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button\n\t\t\t\t[luPopover2]=\"popoverMultilanguage\"\n\t\t\t\t#popoverRef=\"luPopover2\"\n\t\t\t\tluPopoverNoCloseButton\n\t\t\t\t[luPopoverIgnoredOutsidePointerTargets]=\"inputElement\"\n\t\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t\t[luTooltip]=\"intl().toggleMultilanguage\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\tluButton\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"textField-input-affix-toggle\"\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"signTranslation\" [alt]=\"intl().toggleMultilanguage\" />\n\t\t\t</button>\n\t\t\t<ng-template #popoverMultilanguage>\n\t\t\t\t<div class=\"popover-contentOptional multilanguage_popover-content\" [style.inlineSize.rem]=\"getPopoverInlineSizeRem(inputElement)\">\n\t\t\t\t\t<div class=\"pr-u-displayFlex pr-u-gap100 pr-u-flexDirectionColumn\">\n\t\t\t\t\t\t@if (!hasNoInvariant()) {\n\t\t\t\t\t\t\t<p class=\"pr-u-colorTextSubtle\" [class]=\"formFieldSize?.() === 'S' ? 'pr-u-bodyXS' : 'pr-u-bodyS'\">\n\t\t\t\t\t\t\t\t{{ intl().invariantInfo }}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@for (row of panelInputs(); track row.cultureCode) {\n\t\t\t\t\t\t\t<ng-template #prefixLang>\n\t\t\t\t\t\t\t\t<div class=\"textField-prefix-lang\" [class.mod-withCulture]=\"hasCulture(row.cultureCode)\">\n\t\t\t\t\t\t\t\t\t@if (hasNoInvariant()) {\n\t\t\t\t\t\t\t\t\t\t{{ row.cultureCode }}<sup class=\"formLabel-required\" aria-hidden=\"true\">*</sup>\n\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t{{ row.cultureCode }}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t\t<ng-template #aiSuffix>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t[size]=\"formFieldSize?.() === 'S' ? 'XS' : 'S'\"\n\t\t\t\t\t\t\t\t\tluButton=\"AI\"\n\t\t\t\t\t\t\t\t\t[luTooltip]=\"intl().translateWithAI\"\n\t\t\t\t\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t\t\t(click)=\"translateWithAI.emit(row.cultureCode)\"\n\t\t\t\t\t\t\t\t\tclass=\"multilanguage_popover-content-button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<lu-icon icon=\"officePenStar\" alt=\"intl().translateWithAI\" />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t\t<lu-form-field\n\t\t\t\t\t\t\t\t[size]=\"formFieldSize?.() ?? null\"\n\t\t\t\t\t\t\t\t[label]=\"intl().translateTo | intlParams: { lang: getLocaleDisplayName(row.cultureCode) }\"\n\t\t\t\t\t\t\t\thiddenLabel\n\t\t\t\t\t\t\t\t[errorInlineMessage]=\"hasNoInvariant() && !row.value ? intl().requiredError : ''\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-text-input\n\t\t\t\t\t\t\t\t\t[prefix]=\"{ content: prefixLang, ariaLabel: '' }\"\n\t\t\t\t\t\t\t\t\t[(ngModel)]=\"row.value\"\n\t\t\t\t\t\t\t\t\t[required]=\"hasNoInvariant()\"\n\t\t\t\t\t\t\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t\t\t\t\t\t\t[suffix]=\"hasAIButtons() ? { content: aiSuffix, ariaLabel: '' } : undefined\"\n\t\t\t\t\t\t\t\t\t[attr.lang]=\"row.cultureCode\"\n\t\t\t\t\t\t\t\t\ttranslate=\"no\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</lu-form-field>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (presentationValue()) {\n\t\t<span [attr.lang]=\"hasNoInvariant() ? displayCultureCode() : null\" translate=\"no\">{{ presentationValue() }}</span>\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", styles: ["@layer components{.multilanguage_popover-content.popover-contentOptional{max-block-size:20rem;max-inline-size:100%;overflow:auto}.multilanguage_popover-content.popover-contentOptional .multilanguage_popover-content-button{padding:var(--pr-t-spacings-50)}.multilanguage_popover-content.popover-contentOptional .textField:not(:focus-within,:hover) .multilanguage_popover-content-button{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}}@layer mods{.multilanguage_popover-content.popover-contentOptional:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--pr-t-border-radius-structure)}}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["intl", "label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter", "presentation"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: PopoverDirective, selector: "[luPopover2]", inputs: ["intl", "luPopover2", "luPopoverPosition", "luPopoverMaxBlockSize", "luPopoverMaxInlineSize", "overlayScrollStrategy", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverAnchor", "luPopoverBackdrop", "luPopoverIgnoredOutsidePointerTargets", "luPopoverOpenDelay", "luPopoverCloseDelay"], outputs: ["luPopoverTriggerChange", "luPopoverClosed", "luPopoverOpened"], exportAs: ["luPopover2"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["intl", "mask", "placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "minlength", "maxlength", "searchIcon", "type", "width"], 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", "luInputLabelledBy", "luInputDescribedBy"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip],[prTooltip]", inputs: ["luTooltip", "prTooltip", "luTooltipEnterDelay", "prTooltipEnterDelay", "luTooltipLeaveDelay", "prTooltipLeaveDelay", "luTooltipDisabled", "prTooltipDisabled", "luTooltipOnlyForDisplay", "prTooltipOnlyForDisplay", "luTooltipPosition", "prTooltipPosition", "luTooltipWhenEllipsis", "prTooltipWhenEllipsis", "luTooltipAnchor", "prTooltipAnchor", "luTooltipTriggerAnchor", "prTooltipTriggerAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton], a[luButton], span[luButton], button[prButton], a[prButton], span[prButton]", inputs: ["size", "block", "disabled", "critical", "delete", "disclosure", "palette", "state", "luButton", "prButton"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MultilanguageInputComponent, decorators: [{
             type: Component,