@lucca-front/ng 18.2.2 → 18.2.3

package/fesm2022/lucca-front-ng-form-field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lucca-front-ng-form-field.mjs","sources":["../../../packages/ng/form-field/form-field.token.ts","../../../packages/ng/form-field/translations.ts","../../../packages/ng/form-field/form-field.translate.ts","../../../packages/ng/form-field/form-field.component.ts","../../../packages/ng/form-field/form-field.component.html","../../../packages/ng/form-field/input.directive.ts","../../../packages/ng/form-field/lucca-front-ng-form-field.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { FormFieldComponent } from './form-field.component';\n\nexport const FORM_FIELD_INSTANCE = new InjectionToken<FormFieldComponent>('FORM_FIELD_INSTANCE');\n","export const Translations = {\n\ten: {\n\t\tcounter: 'Your message is {{current}} characters long. A maximum of {{max}} characters is allowed.',\n\t},\n\tde: {\n\t\tcounter: 'Ihr Beitrag ist {{current}} Zeichen lang. Maximal sind {{max}} Zeichen erlaubt.',\n\t},\n\tfr: {\n\t\tcounter: 'Votre publication fait {{current}} caractères de long. {{max}} caractères maximum sont autorisés.',\n\t},\n\tit: {\n\t\tcounter: 'La tua pubblicazione è lunga {{current}} caratteri. È consentito un numero di massimo {{max}} caratteri.',\n\t},\n\tnl: {\n\t\tcounter: 'Uw publicatie is {{current}} tekens lang. {{max}} tekens maximaal toegestaan.',\n\t},\n\t'nl-BE': {\n\t\tcounter: 'Uw publicatie is {{current}} tekens lang. {{max}} tekens maximaal toegestaan.',\n\t},\n\tes: {\n\t\tcounter: 'Su publicación tiene {{current}} caracteres. Se permite un máximo de {{max}} caracteres.',\n\t},\n\tpt: {\n\t\tcounter: '{{current}} {{max}} A sua publicação tem um comprimento de caracteres, sendo permitido um máximo de caracteres.',\n\t},\n};\n","import { InjectionToken } from '@angular/core';\nimport { LuTranslation } from '@lucca-front/ng/core';\nimport { Translations } from './translations';\n\nexport const LU_FORM_FIELD_TRANSLATIONS = new InjectionToken('LuFormFieldTranslations', {\n\tfactory: () => luFormFieldTranslations,\n});\n\nexport interface LuFormFieldTranslations {\n\tcounter: string;\n}\n\nexport const luFormFieldTranslations: LuTranslation<LuFormFieldTranslations> = Translations;\n","import { booleanAttribute, Component, ContentChildren, DestroyRef, DoCheck, forwardRef, inject, Input, OnChanges, OnDestroy, QueryList, Renderer2, ViewEncapsulation } from '@angular/core';\nimport { NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';\nimport { InputDirective } from './input.directive';\nimport { FormFieldSize } from './form-field-size';\nimport { BehaviorSubject, map, merge, startWith, Subject, switchMap } from 'rxjs';\nimport { InlineMessageComponent, InlineMessageState } from '@lucca-front/ng/inline-message';\nimport { AbstractControl, NG_VALIDATORS, NgControl, ReactiveFormsModule, RequiredValidator, Validator, Validators } from '@angular/forms';\nimport { SafeHtml } from '@angular/platform-browser';\nimport { getIntl, IntlParamsPipe, LuClass, PortalContent, PortalDirective } from '@lucca-front/ng/core';\nimport { IconComponent } from '@lucca-front/ng/icon';\nimport { LuTooltipModule } from '@lucca-front/ng/tooltip';\nimport { FORM_FIELD_INSTANCE } from './form-field.token';\nimport { LU_FORM_FIELD_TRANSLATIONS } from './form-field.translate';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nlet nextId = 0;\n\n@Component({\n\tselector: 'lu-form-field',\n\tstandalone: true,\n\timports: [NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet, InlineMessageComponent, LuTooltipModule, ReactiveFormsModule, IconComponent, IntlParamsPipe, PortalDirective],\n\ttemplateUrl: './form-field.component.html',\n\tstyleUrls: ['./form-field.component.scss'],\n\tproviders: [\n\t\tLuClass,\n\t\t{\n\t\t\tprovide: FORM_FIELD_INSTANCE,\n\t\t\tuseExisting: forwardRef(() => FormFieldComponent),\n\t\t},\n\t],\n\tencapsulation: ViewEncapsulation.None,\n})\nexport class FormFieldComponent implements OnChanges, OnDestroy, DoCheck {\n\tintl = getIntl(LU_FORM_FIELD_TRANSLATIONS);\n\n\t#luClass = inject(LuClass);\n\n\t#renderer = inject(Renderer2);\n\n\t#requiredValidator: RequiredValidator | undefined;\n\n\t#destroyRef = inject(DestroyRef);\n\n\t#doCheck$ = new Subject<void>();\n\n\t@ContentChildren(NG_VALIDATORS, { descendants: true })\n\tpublic set validators(validators: QueryList<Validator | undefined>) {\n\t\tthis.#requiredValidator = validators.toArray()?.find((v): v is RequiredValidator => v instanceof RequiredValidator);\n\t}\n\n\t@ContentChildren(NgControl, { descendants: true })\n\tset controls(controls: QueryList<NgControl>) {\n\t\tconst controls$ = controls.changes.pipe(\n\t\t\ttakeUntilDestroyed(this.#destroyRef),\n\t\t\tstartWith(controls),\n\t\t\tmap(() => controls.toArray()),\n\t\t);\n\t\t// If a control is added or removed, we want to update status based on the new ones\n\t\tcontrols$.subscribe((controls) => {\n\t\t\tthis.updateRequiredStatus(controls);\n\t\t});\n\t\t// Upon status change or NgDoCheck trigger, we want to update validity and display\n\t\tcontrols$\n\t\t\t.pipe(\n\t\t\t\tswitchMap((controls) => {\n\t\t\t\t\t// We have to trigger status check on DoCheck too to properly update display when control.touched changes\n\t\t\t\t\t// Because we can't listen to `control.touched` changes, we need to hook on this.\n\t\t\t\t\t// TODO use unified control state change events once we have Angular 18\n\t\t\t\t\treturn merge(this.#doCheck$, ...controls.map((control) => control.statusChanges)).pipe(map(() => controls));\n\t\t\t\t}),\n\t\t\t)\n\t\t\t.subscribe((controls) => {\n\t\t\t\tthis.updateRequiredStatus(controls);\n\t\t\t\tthis.updateAria();\n\t\t\t});\n\t}\n\n\t@Input({\n\t\trequired: true,\n\t})\n\tlabel: PortalContent;\n\n\t/**\n\t * Hide field label, while keeping it in DOM for screen readers\n\t */\n\t@Input({\n\t\ttransform: booleanAttribute,\n\t})\n\thiddenLabel = false;\n\n\t@Input({\n\t\ttransform: booleanAttribute,\n\t})\n\trolePresentationLabel = false;\n\n\t@Input()\n\tstatusControl: AbstractControl;\n\n\t@Input()\n\ttooltip: string | SafeHtml;\n\n\t/**\n\t * Override from input\n\t * @private\n\t */\n\t#invalidStatusOverride = false;\n\n\t@Input({ transform: booleanAttribute })\n\tset invalid(invalid: boolean) {\n\t\tthis.#invalidStatusOverride = invalid !== undefined && invalid !== null;\n\t\tthis.invalidStatus = invalid;\n\t\tthis.updateAria();\n\t}\n\n\t/**\n\t * Used to cache previous invalid status and know if we want to update aria stuff or not.\n\t * @private\n\t */\n\tprotected invalidStatus = false;\n\n\t@Input()\n\tinlineMessage: string;\n\n\t/**\n\t * Inline message for when the control is in error state\n\t */\n\t@Input()\n\terrorInlineMessage: string;\n\n\t/**\n\t * State of the inline message, will be ignored if form state is invalid\n\t */\n\t@Input()\n\tinlineMessageState: InlineMessageState;\n\n\t@Input()\n\tsize: FormFieldSize;\n\n\t@Input()\n\tlayout: 'default' | 'checkable' | 'fieldset' = 'default';\n\n\t#inputs: InputDirective[] = [];\n\t/**\n\t * Max amount of characters allowed, defaults to 0, which means hidden, no maximum\n\t */\n\t@Input()\n\tcounter = 0;\n\n\trequired = false;\n\n\tget contentLength(): number {\n\t\treturn (this.#inputs[0]?.host?.nativeElement as HTMLInputElement)?.value.length || 0;\n\t}\n\n\tpublic addInput(input: InputDirective) {\n\t\tthis.#inputs.push(input);\n\t\t/* We have to put this in the next cycle to make sure it'll be applied properly\n\t\t * and that it won't trigger a change detection error\n\t\t */\n\t\tsetTimeout(() => {\n\t\t\tthis.prepareInput();\n\t\t});\n\t}\n\n\tpublic get inputs(): InputDirective[] {\n\t\treturn this.#inputs;\n\t}\n\n\tid: string;\n\n\tready$ = new BehaviorSubject<boolean>(false);\n\n\tpublic get ready(): boolean {\n\t\treturn this.ready$.value;\n\t}\n\n\t#ariaLabelledBy: string[] = [];\n\n\taddLabelledBy(id: string, prepend = false): void {\n\t\tif (prepend) {\n\t\t\tthis.#ariaLabelledBy = [id, ...this.#ariaLabelledBy];\n\t\t} else {\n\t\t\tthis.#ariaLabelledBy = [...this.#ariaLabelledBy, id];\n\t\t}\n\t\tthis.#inputs.forEach((input) => {\n\t\t\tif (!input.standalone) {\n\t\t\t\tthis.#renderer.setAttribute(input.host.nativeElement, 'aria-labelledby', this.#ariaLabelledBy.join(' '));\n\t\t\t}\n\t\t});\n\t}\n\n\tremoveLabelledBy(id: string): void {\n\t\tthis.#ariaLabelledBy = this.#ariaLabelledBy.filter((labelledBy) => labelledBy === id);\n\t}\n\n\tngOnChanges(): void {\n\t\tthis.#luClass.setState({\n\t\t\t[`mod-${this.size}`]: !!this.size,\n\t\t\t'mod-checkable': this.layout === 'checkable',\n\t\t\t'form-field': this.layout !== 'fieldset',\n\t\t});\n\t\tthis.updateAria();\n\t}\n\n\tprepareInput(): void {\n\t\tif (this.#inputs.length === 0) {\n\t\t\tthrow new Error('Missing input for form field, make sure to set `luInput` to your input inside lu-form-field');\n\t\t}\n\t\tthis.inputs\n\t\t\t.filter((input) => !input.standalone)\n\t\t\t.forEach((input) => {\n\t\t\t\tconst inputId = `${input.host.nativeElement.tagName.toLowerCase()}-${++nextId}`;\n\t\t\t\tthis.#renderer.setAttribute(input.host.nativeElement, 'id', inputId);\n\t\t\t});\n\t\t// We're using the id from the first input available\n\t\tthis.id = this.#inputs[0].host.nativeElement.id;\n\t\tthis.updateAria();\n\t\tthis.ready$.next(true);\n\t}\n\n\tprivate updateAria(): void {\n\t\tthis.#inputs.forEach((input) => {\n\t\t\tthis.#renderer.setAttribute(input.host.nativeElement, 'aria-invalid', this.invalidStatus?.toString());\n\t\t\tthis.#renderer.setAttribute(input.host.nativeElement, 'aria-required', this.required?.toString());\n\t\t\tif (!input.standalone) {\n\t\t\t\tthis.#renderer.setAttribute(input.host.nativeElement, 'aria-describedby', `${input.host.nativeElement.id}-message`);\n\t\t\t}\n\t\t});\n\t\tif (this.id && !this.#ariaLabelledBy.includes(`${this.id}-label`)) {\n\t\t\tthis.addLabelledBy(`${this.id}-label`);\n\t\t}\n\t}\n\n\tprivate updateRequiredStatus(controls: NgControl[]): void {\n\t\t// If invalid status is override, just skip updating from control because we don't care\n\t\tif (this.#invalidStatusOverride) {\n\t\t\treturn;\n\t\t}\n\t\tcontrols.forEach((control) => {\n\t\t\t// invalid management\n\t\t\tconst previousInvalid = this.invalidStatus;\n\t\t\tthis.invalidStatus = (control.invalid || this.statusControl?.invalid) && control.touched;\n\n\t\t\t// required management\n\t\t\tconst previousRequired = this.required;\n\t\t\tthis.required = this.#requiredValidator\n\t\t\t\t? booleanAttribute(this.#requiredValidator.required)\n\t\t\t\t: control.control.hasValidator(Validators.required) || control.control.hasValidator(Validators.requiredTrue);\n\n\t\t\t// If stuff changed, update aria attributes\n\t\t\tif (this.invalidStatus !== previousInvalid || this.required !== previousRequired) {\n\t\t\t\tthis.updateAria();\n\t\t\t}\n\t\t});\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis.ready$.complete();\n\t}\n\n\tngDoCheck(): void {\n\t\tthis.#doCheck$.next();\n\t}\n}\n","@if (layout === 'fieldset') {\n<fieldset class=\"form-fieldset\" [class.mod-S]=\"size === 'S'\">\n\t<legend class=\"formLabel\" [class.u-mask]=\"hiddenLabel\" attr.aria-hidden=\"{{hiddenLabel}}\">\n\t\t<ng-container *luPortal=\"label\"></ng-container\n\t\t><!--\n\t--><sup class=\"formLabel-required\" aria-hidden=\"true\" *ngIf=\"required\">*</sup>\n\t\t<lu-icon\n\t\t\tclass=\"formLabel-info\"\n\t\t\ticon=\"signHelp\"\n\t\t\t[alt]=\"'?'\"\n\t\t\t*ngIf=\"tooltip\"\n\t\t\t[luTooltip]=\"tooltip\"\n\t\t\t[color]=\"invalidStatus ? 'error' : 'inherit'\"\n\t\t></lu-icon>\n\t</legend>\n\t<ng-container *ngTemplateOutlet=\"projectionTpl\"></ng-container>\n\t@if (inlineMessage || (invalidStatus ? errorInlineMessage : false)) {\n\t<lu-inline-message\n\t\tid=\"{{id}}-message\"\n\t\t[label]=\"(invalidStatus && errorInlineMessage) ? errorInlineMessage : inlineMessage\"\n\t\t[state]=\"invalidStatus ? 'error' : inlineMessageState\"\n\t></lu-inline-message>\n\t}\n</fieldset>\n} @else {\n<label\n\tclass=\"formLabel\"\n\t[class.is-error]=\"invalidStatus\"\n\t[class.mod-counter]=\"counter > 0\"\n\tid=\"{{id}}-label\"\n\tfor=\"{{id}}\"\n\t[class.u-mask]=\"hiddenLabel\"\n\tattr.role=\"{{rolePresentationLabel ? 'presentation' : null}}\"\n>\n\t<ng-container *luPortal=\"label\"></ng-container\n\t><!--\n\t--><sup class=\"formLabel-required\" aria-hidden=\"true\" *ngIf=\"required\">*</sup>\n\n\t@if (tooltip) {\n\t<lu-icon class=\"formLabel-info\" icon=\"signHelp\" [alt]=\"'?'\" [luTooltip]=\"tooltip\" [color]=\"invalidStatus ? 'error' : 'inherit'\"></lu-icon>\n\t} @if (counter > 0) {\n\t<span class=\"formLabel-counter\" [class.u-textError]=\"contentLength > counter\" id=\"{{id}}-counter\" aria-live=\"polite\">\n\t\t<span aria-hidden=\"true\">{{ contentLength }}/{{ counter }}</span>\n\t\t<span class=\"u-mask\">{{ intl.counter | intlParams: { current: contentLength, max: counter } }}</span>\n\t</span>\n\t}\n</label>\n<ng-container *ngTemplateOutlet=\"projectionTpl\"></ng-container>\n@if (inlineMessage || (invalidStatus ? errorInlineMessage : false)) {\n<lu-inline-message\n\tid=\"{{id}}-message\"\n\t[label]=\"(invalidStatus && errorInlineMessage) ? errorInlineMessage : inlineMessage\"\n\t[state]=\"invalidStatus ? 'error' : inlineMessageState\"\n></lu-inline-message>\n} }\n\n<ng-template #projectionTpl>\n\t<ng-content></ng-content>\n</ng-template>\n","import { booleanAttribute, Directive, ElementRef, inject, Input, OnInit } from '@angular/core';\nimport { FORM_FIELD_INSTANCE } from './form-field.token';\n\n@Directive({\n\tselector: '[luInput]',\n\tstandalone: true,\n\thost: {\n\t\t// Used to autofocus in dialog boxes, do not change except if you know what you're doing\n\t\tclass: 'luNativeInput',\n\t},\n})\nexport class InputDirective implements OnInit {\n\tpublic readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n\tpublic readonly formFieldRef = inject(FORM_FIELD_INSTANCE, { optional: true });\n\n\t/**\n\t * Prevents message and label ids from being propagated, useful if the input holds its own message and label (like for radios)\n\t */\n\t@Input({ transform: booleanAttribute, alias: 'luInputStandalone' })\n\tstandalone = false;\n\n\tngOnInit(): void {\n\t\t// If the field is used as standalone, we won't have the ref provided so it'll crash\n\t\tif (this.formFieldRef) {\n\t\t\tthis.formFieldRef.addInput(this);\n\t\t}\n\t}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"lucca-front-ng-form-field.mjs","sources":["../../../packages/ng/form-field/form-field.token.ts","../../../packages/ng/form-field/translations.ts","../../../packages/ng/form-field/form-field.translate.ts","../../../packages/ng/form-field/form-field.component.ts","../../../packages/ng/form-field/form-field.component.html","../../../packages/ng/form-field/input.directive.ts","../../../packages/ng/form-field/lucca-front-ng-form-field.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { FormFieldComponent } from './form-field.component';\n\nexport const FORM_FIELD_INSTANCE = new InjectionToken<FormFieldComponent>('FORM_FIELD_INSTANCE');\n","export const Translations = {\n\ten: {\n\t\tcounter: 'Your message is {{current}} characters long. A maximum of {{max}} characters is allowed.',\n\t},\n\tde: {\n\t\tcounter: 'Ihr Beitrag ist {{current}} Zeichen lang. Maximal sind {{max}} Zeichen erlaubt.',\n\t},\n\tfr: {\n\t\tcounter: 'Votre publication fait {{current}} caractères de long. {{max}} caractères maximum sont autorisés.',\n\t},\n\tit: {\n\t\tcounter: 'La tua pubblicazione è lunga {{current}} caratteri. È consentito un numero di massimo {{max}} caratteri.',\n\t},\n\tnl: {\n\t\tcounter: 'Uw publicatie is {{current}} tekens lang. {{max}} tekens maximaal toegestaan.',\n\t},\n\t'nl-BE': {\n\t\tcounter: 'Uw publicatie is {{current}} tekens lang. {{max}} tekens maximaal toegestaan.',\n\t},\n\tes: {\n\t\tcounter: 'Su publicación tiene {{current}} caracteres. Se permite un máximo de {{max}} caracteres.',\n\t},\n\tpt: {\n\t\tcounter: '{{current}} {{max}} A sua publicação tem um comprimento de caracteres, sendo permitido um máximo de caracteres.',\n\t},\n};\n","import { InjectionToken } from '@angular/core';\nimport { LuTranslation } from '@lucca-front/ng/core';\nimport { Translations } from './translations';\n\nexport const LU_FORM_FIELD_TRANSLATIONS = new InjectionToken('LuFormFieldTranslations', {\n\tfactory: () => luFormFieldTranslations,\n});\n\nexport interface LuFormFieldTranslations {\n\tcounter: string;\n}\n\nexport const luFormFieldTranslations: LuTranslation<LuFormFieldTranslations> = Translations;\n","import { booleanAttribute, Component, ContentChildren, DestroyRef, DoCheck, forwardRef, inject, Input, OnChanges, OnDestroy, QueryList, Renderer2, ViewEncapsulation } from '@angular/core';\nimport { NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';\nimport { InputDirective } from './input.directive';\nimport { FormFieldSize } from './form-field-size';\nimport { BehaviorSubject, map, merge, startWith, Subject, switchMap } from 'rxjs';\nimport { InlineMessageComponent, InlineMessageState } from '@lucca-front/ng/inline-message';\nimport { AbstractControl, NG_VALIDATORS, NgControl, ReactiveFormsModule, RequiredValidator, Validator, Validators } from '@angular/forms';\nimport { SafeHtml } from '@angular/platform-browser';\nimport { getIntl, IntlParamsPipe, LuClass, PortalContent, PortalDirective } from '@lucca-front/ng/core';\nimport { IconComponent } from '@lucca-front/ng/icon';\nimport { LuTooltipModule } from '@lucca-front/ng/tooltip';\nimport { FORM_FIELD_INSTANCE } from './form-field.token';\nimport { LU_FORM_FIELD_TRANSLATIONS } from './form-field.translate';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nlet nextId = 0;\n\n@Component({\n\tselector: 'lu-form-field',\n\tstandalone: true,\n\timports: [NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet, InlineMessageComponent, LuTooltipModule, ReactiveFormsModule, IconComponent, IntlParamsPipe, PortalDirective],\n\ttemplateUrl: './form-field.component.html',\n\tstyleUrls: ['./form-field.component.scss'],\n\tproviders: [\n\t\tLuClass,\n\t\t{\n\t\t\tprovide: FORM_FIELD_INSTANCE,\n\t\t\tuseExisting: forwardRef(() => FormFieldComponent),\n\t\t},\n\t],\n\tencapsulation: ViewEncapsulation.None,\n})\nexport class FormFieldComponent implements OnChanges, OnDestroy, DoCheck {\n\tintl = getIntl(LU_FORM_FIELD_TRANSLATIONS);\n\n\t#luClass = inject(LuClass);\n\n\t#renderer = inject(Renderer2);\n\n\t#requiredValidator: RequiredValidator | undefined;\n\n\t#destroyRef = inject(DestroyRef);\n\n\t#doCheck$ = new Subject<void>();\n\n\t@ContentChildren(NG_VALIDATORS, { descendants: true })\n\tpublic set validators(validators: QueryList<Validator | undefined>) {\n\t\tthis.#requiredValidator = validators.toArray()?.find((v): v is RequiredValidator => v instanceof RequiredValidator);\n\t}\n\n\t@ContentChildren(NgControl, { descendants: true })\n\tset controls(controls: QueryList<NgControl>) {\n\t\tconst controls$ = controls.changes.pipe(\n\t\t\ttakeUntilDestroyed(this.#destroyRef),\n\t\t\tstartWith(controls),\n\t\t\tmap(() => controls.toArray()),\n\t\t);\n\t\t// If a control is added or removed, we want to update status based on the new ones\n\t\tcontrols$.subscribe((controls) => {\n\t\t\tthis.updateRequiredStatus(controls);\n\t\t});\n\t\t// Upon status change or NgDoCheck trigger, we want to update validity and display\n\t\tcontrols$\n\t\t\t.pipe(\n\t\t\t\tswitchMap((controls) => {\n\t\t\t\t\t// We have to trigger status check on DoCheck too to properly update display when control.touched changes\n\t\t\t\t\t// Because we can't listen to `control.touched` changes, we need to hook on this.\n\t\t\t\t\t// TODO use unified control state change events once we have Angular 18\n\t\t\t\t\treturn merge(this.#doCheck$, ...controls.map((control) => control.statusChanges)).pipe(map(() => controls));\n\t\t\t\t}),\n\t\t\t)\n\t\t\t.subscribe((controls) => {\n\t\t\t\tthis.updateRequiredStatus(controls);\n\t\t\t\tthis.updateAria();\n\t\t\t});\n\t}\n\n\t@Input({\n\t\trequired: true,\n\t})\n\tlabel: PortalContent;\n\n\t/**\n\t * Hide field label, while keeping it in DOM for screen readers\n\t */\n\t@Input({\n\t\ttransform: booleanAttribute,\n\t})\n\thiddenLabel = false;\n\n\t@Input({\n\t\ttransform: booleanAttribute,\n\t})\n\trolePresentationLabel = false;\n\n\t@Input()\n\tstatusControl: AbstractControl;\n\n\t@Input()\n\ttooltip: string | SafeHtml;\n\n\t/**\n\t * Override from input\n\t * @private\n\t */\n\t#invalidStatusOverride = false;\n\n\t@Input({ transform: booleanAttribute })\n\tset invalid(invalid: boolean) {\n\t\tthis.#invalidStatusOverride = invalid !== undefined && invalid !== null;\n\t\tthis.invalidStatus = invalid;\n\t\tthis.updateAria();\n\t}\n\n\t/**\n\t * Used to cache previous invalid status and know if we want to update aria stuff or not.\n\t * @private\n\t */\n\tprotected invalidStatus = false;\n\n\t@Input()\n\tinlineMessage: string;\n\n\t/**\n\t * Inline message for when the control is in error state\n\t */\n\t@Input()\n\terrorInlineMessage: string;\n\n\t/**\n\t * State of the inline message, will be ignored if form state is invalid\n\t */\n\t@Input()\n\tinlineMessageState: InlineMessageState;\n\n\t@Input()\n\tsize: FormFieldSize;\n\n\t@Input()\n\tlayout: 'default' | 'checkable' | 'fieldset' = 'default';\n\n\t#inputs: InputDirective[] = [];\n\t/**\n\t * Max amount of characters allowed, defaults to 0, which means hidden, no maximum\n\t */\n\t@Input()\n\tcounter = 0;\n\n\trequired = false;\n\n\tget contentLength(): number {\n\t\treturn (this.#inputs[0]?.host?.nativeElement as HTMLInputElement)?.value.length || 0;\n\t}\n\n\tpublic addInput(input: InputDirective) {\n\t\tthis.#inputs.push(input);\n\t\t/* We have to put this in the next cycle to make sure it'll be applied properly\n\t\t * and that it won't trigger a change detection error\n\t\t */\n\t\tsetTimeout(() => {\n\t\t\tthis.prepareInput();\n\t\t});\n\t}\n\n\tpublic get inputs(): InputDirective[] {\n\t\treturn this.#inputs;\n\t}\n\n\tid: string;\n\n\tready$ = new BehaviorSubject<boolean>(false);\n\n\tpublic get ready(): boolean {\n\t\treturn this.ready$.value;\n\t}\n\n\t#ariaLabelledBy: string[] = [];\n\n\taddLabelledBy(id: string, prepend = false): void {\n\t\tif (prepend) {\n\t\t\tthis.#ariaLabelledBy = [id, ...this.#ariaLabelledBy];\n\t\t} else {\n\t\t\tthis.#ariaLabelledBy = [...this.#ariaLabelledBy, id];\n\t\t}\n\t\tthis.#inputs.forEach((input) => {\n\t\t\tif (!input.standalone) {\n\t\t\t\tthis.#renderer.setAttribute(input.host.nativeElement, 'aria-labelledby', this.#ariaLabelledBy.join(' '));\n\t\t\t}\n\t\t});\n\t}\n\n\tremoveLabelledBy(id: string): void {\n\t\tthis.#ariaLabelledBy = this.#ariaLabelledBy.filter((labelledBy) => labelledBy === id);\n\t}\n\n\tngOnChanges(): void {\n\t\tthis.#luClass.setState({\n\t\t\t[`mod-${this.size}`]: !!this.size,\n\t\t\t'mod-checkable': this.layout === 'checkable',\n\t\t\t'form-field': this.layout !== 'fieldset',\n\t\t});\n\t\tthis.updateAria();\n\t}\n\n\tprepareInput(): void {\n\t\tif (this.#inputs.length === 0) {\n\t\t\tthrow new Error('Missing input for form field, make sure to set `luInput` to your input inside lu-form-field');\n\t\t}\n\t\tthis.inputs\n\t\t\t.filter((input) => !input.standalone)\n\t\t\t.forEach((input) => {\n\t\t\t\tconst inputId = `${input.host.nativeElement.tagName.toLowerCase()}-${++nextId}`;\n\t\t\t\tthis.#renderer.setAttribute(input.host.nativeElement, 'id', inputId);\n\t\t\t});\n\t\t// We're using the id from the first input available\n\t\tthis.id = this.#inputs[0].host.nativeElement.id;\n\t\tthis.updateAria();\n\t\tthis.ready$.next(true);\n\t}\n\n\tprivate updateAria(): void {\n\t\tthis.#inputs.forEach((input) => {\n\t\t\tthis.#renderer.setAttribute(input.host.nativeElement, 'aria-invalid', this.invalidStatus?.toString());\n\t\t\tthis.#renderer.setAttribute(input.host.nativeElement, 'aria-required', this.required?.toString());\n\t\t\tif (!input.standalone) {\n\t\t\t\tthis.#renderer.setAttribute(input.host.nativeElement, 'aria-describedby', `${input.host.nativeElement.id}-message`);\n\t\t\t}\n\t\t});\n\t\tif (this.id && !this.#ariaLabelledBy.includes(`${this.id}-label`)) {\n\t\t\tthis.addLabelledBy(`${this.id}-label`);\n\t\t}\n\t}\n\n\tprivate updateRequiredStatus(controls: NgControl[]): void {\n\t\t// If invalid status is override, just skip updating from control because we don't care\n\t\tif (this.#invalidStatusOverride) {\n\t\t\treturn;\n\t\t}\n\t\tcontrols.forEach((control) => {\n\t\t\t// invalid management\n\t\t\tconst previousInvalid = this.invalidStatus;\n\t\t\tthis.invalidStatus = (control.invalid || this.statusControl?.invalid) && control.touched;\n\n\t\t\t// required management\n\t\t\tconst previousRequired = this.required;\n\t\t\tthis.required = this.#requiredValidator\n\t\t\t\t? booleanAttribute(this.#requiredValidator.required)\n\t\t\t\t: control.control.hasValidator(Validators.required) || control.control.hasValidator(Validators.requiredTrue);\n\n\t\t\t// If stuff changed, update aria attributes\n\t\t\tif (this.invalidStatus !== previousInvalid || this.required !== previousRequired) {\n\t\t\t\tthis.updateAria();\n\t\t\t}\n\t\t});\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis.ready$.complete();\n\t}\n\n\tngDoCheck(): void {\n\t\tthis.#doCheck$.next();\n\t}\n}\n","@if (layout === 'fieldset') {\n<fieldset class=\"form-fieldset\" [class.mod-S]=\"size === 'S'\">\n\t<legend class=\"formLabel\" [class.u-mask]=\"hiddenLabel\" attr.aria-hidden=\"{{hiddenLabel}}\">\n\t\t<ng-container *luPortal=\"label\"></ng-container\n\t\t><!--\n\t--><sup class=\"formLabel-required\" aria-hidden=\"true\" *ngIf=\"required\">*</sup>\n\t\t<lu-icon\n\t\t\tclass=\"formLabel-info\"\n\t\t\ticon=\"signHelp\"\n\t\t\t[alt]=\"'?'\"\n\t\t\t*ngIf=\"tooltip\"\n\t\t\t[luTooltip]=\"tooltip\"\n\t\t\t[color]=\"invalidStatus ? 'error' : 'inherit'\"\n\t\t></lu-icon>\n\t</legend>\n\t<ng-container *ngTemplateOutlet=\"projectionTpl\"></ng-container>\n\t@if (inlineMessage || (invalidStatus ? errorInlineMessage : false)) {\n\t<lu-inline-message\n\t\tid=\"{{id}}-message\"\n\t\t[label]=\"(invalidStatus && errorInlineMessage) ? errorInlineMessage : inlineMessage\"\n\t\t[state]=\"invalidStatus ? 'error' : inlineMessageState\"\n\t></lu-inline-message>\n\t}\n</fieldset>\n} @else {\n<label\n\tclass=\"formLabel\"\n\t[class.is-error]=\"invalidStatus\"\n\t[class.mod-counter]=\"counter > 0\"\n\tid=\"{{id}}-label\"\n\tfor=\"{{id}}\"\n\t[class.u-mask]=\"hiddenLabel\"\n\tattr.role=\"{{rolePresentationLabel ? 'presentation' : null}}\"\n>\n\t<ng-container *luPortal=\"label\"></ng-container\n\t><!--\n\t--><sup class=\"formLabel-required\" aria-hidden=\"true\" *ngIf=\"required\">*</sup>\n\n\t@if (tooltip) {\n\t<lu-icon class=\"formLabel-info\" icon=\"signHelp\" [alt]=\"'?'\" [luTooltip]=\"tooltip\" [color]=\"invalidStatus ? 'error' : 'inherit'\"></lu-icon>\n\t} @if (counter > 0) {\n\t<span class=\"formLabel-counter\" [class.u-textError]=\"contentLength > counter\" id=\"{{id}}-counter\" aria-live=\"polite\">\n\t\t<span aria-hidden=\"true\">{{ contentLength }}/{{ counter }}</span>\n\t\t<span class=\"u-mask\">{{ intl.counter | intlParams: { current: contentLength, max: counter } }}</span>\n\t</span>\n\t}\n</label>\n<ng-container *ngTemplateOutlet=\"projectionTpl\"></ng-container>\n@if (inlineMessage || (invalidStatus ? errorInlineMessage : false)) {\n<lu-inline-message\n\tid=\"{{id}}-message\"\n\t[label]=\"(invalidStatus && errorInlineMessage) ? errorInlineMessage : inlineMessage\"\n\t[state]=\"invalidStatus ? 'error' : inlineMessageState\"\n></lu-inline-message>\n} }\n\n<ng-template #projectionTpl>\n\t<ng-content></ng-content>\n</ng-template>\n","import { booleanAttribute, Directive, ElementRef, inject, Input, OnInit } from '@angular/core';\nimport { FORM_FIELD_INSTANCE } from './form-field.token';\n\n@Directive({\n\tselector: '[luInput]',\n\tstandalone: true,\n\thost: {\n\t\t// Used to autofocus in dialog boxes, do not change except if you know what you're doing\n\t\tclass: 'luNativeInput',\n\t},\n})\nexport class InputDirective implements OnInit {\n\tpublic readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n\tpublic readonly formFieldRef = inject(FORM_FIELD_INSTANCE, { optional: true });\n\n\t/**\n\t * Prevents message and label ids from being propagated, useful if the input holds its own message and label (like for radios)\n\t */\n\t@Input({ transform: booleanAttribute, alias: 'luInputStandalone' })\n\tstandalone = false;\n\n\tngOnInit(): void {\n\t\t// If the field is used as standalone, we won't have the ref provided so it'll crash\n\t\tif (this.formFieldRef) {\n\t\t\tthis.formFieldRef.addInput(this);\n\t\t}\n\t}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;MAGa,mBAAmB,GAAG,IAAI,cAAc,CAAqB,qBAAqB;;ACHxF,MAAM,YAAY,GAAG;AAC3B,IAAA,EAAE,EAAE;AACH,QAAA,OAAO,EAAE,0FAA0F;AACnG,KAAA;AACD,IAAA,EAAE,EAAE;AACH,QAAA,OAAO,EAAE,iFAAiF;AAC1F,KAAA;AACD,IAAA,EAAE,EAAE;AACH,QAAA,OAAO,EAAE,mGAAmG;AAC5G,KAAA;AACD,IAAA,EAAE,EAAE;AACH,QAAA,OAAO,EAAE,0GAA0G;AACnH,KAAA;AACD,IAAA,EAAE,EAAE;AACH,QAAA,OAAO,EAAE,+EAA+E;AACxF,KAAA;AACD,IAAA,OAAO,EAAE;AACR,QAAA,OAAO,EAAE,+EAA+E;AACxF,KAAA;AACD,IAAA,EAAE,EAAE;AACH,QAAA,OAAO,EAAE,0FAA0F;AACnG,KAAA;AACD,IAAA,EAAE,EAAE;AACH,QAAA,OAAO,EAAE,iHAAiH;AAC1H,KAAA;CACD;;MCrBY,0BAA0B,GAAG,IAAI,cAAc,CAAC,yBAAyB,EAAE;AACvF,IAAA,OAAO,EAAE,MAAM,uBAAuB;AACtC,CAAA,EAAE;AAMI,MAAM,uBAAuB,GAA2C;;ACG/E,IAAI,MAAM,GAAG,CAAC,CAAC;MAiBF,kBAAkB,CAAA;AAf/B,IAAA,WAAA,GAAA;AAgBC,QAAA,IAAA,CAAA,IAAI,GAAG,OAAO,CAAC,0BAA0B,CAAC,CAAC;AAE3C,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;AAE3B,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;AAI9B,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AAEjC,QAAA,IAAA,CAAA,SAAS,GAAG,IAAI,OAAO,EAAQ,CAAC;AAuChC;;AAEG;QAIH,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;QAKpB,IAAqB,CAAA,qBAAA,GAAG,KAAK,CAAC;AAQ9B;;;AAGG;QACH,IAAsB,CAAA,sBAAA,GAAG,KAAK,CAAC;AAS/B;;;AAGG;QACO,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;QAqBhC,IAAM,CAAA,MAAA,GAAyC,SAAS,CAAC;QAEzD,IAAO,CAAA,OAAA,GAAqB,EAAE,CAAC;AAC/B;;AAEG;QAEH,IAAO,CAAA,OAAA,GAAG,CAAC,CAAC;QAEZ,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAsBjB,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,eAAe,CAAU,KAAK,CAAC,CAAC;QAM7C,IAAe,CAAA,eAAA,GAAa,EAAE,CAAC;AAuF/B,KAAA;AApOA,IAAA,QAAQ,CAAmB;AAE3B,IAAA,SAAS,CAAqB;AAE9B,IAAA,kBAAkB,CAAgC;AAElD,IAAA,WAAW,CAAsB;AAEjC,IAAA,SAAS,CAAuB;IAEhC,IACW,UAAU,CAAC,UAA4C,EAAA;AACjE,QAAA,IAAI,CAAC,kBAAkB,GAAG,UAAU,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,KAA6B,CAAC,YAAY,iBAAiB,CAAC,CAAC;KACpH;IAED,IACI,QAAQ,CAAC,QAA8B,EAAA;AAC1C,QAAA,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,CACtC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,EACpC,SAAS,CAAC,QAAQ,CAAC,EACnB,GAAG,CAAC,MAAM,QAAQ,CAAC,OAAO,EAAE,CAAC,CAC7B,CAAC;;AAEF,QAAA,SAAS,CAAC,SAAS,CAAC,CAAC,QAAQ,KAAI;AAChC,YAAA,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;AACrC,SAAC,CAAC,CAAC;;QAEH,SAAS;AACP,aAAA,IAAI,CACJ,SAAS,CAAC,CAAC,QAAQ,KAAI;;;;AAItB,YAAA,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC;AAC7G,SAAC,CAAC,CACF;AACA,aAAA,SAAS,CAAC,CAAC,QAAQ,KAAI;AACvB,YAAA,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;YACpC,IAAI,CAAC,UAAU,EAAE,CAAC;AACnB,SAAC,CAAC,CAAC;KACJ;AA0BD;;;AAGG;AACH,IAAA,sBAAsB,CAAS;IAE/B,IACI,OAAO,CAAC,OAAgB,EAAA;QAC3B,IAAI,CAAC,sBAAsB,GAAG,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,CAAC;AACxE,QAAA,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;QAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;KAClB;AA6BD,IAAA,OAAO,CAAwB;AAS/B,IAAA,IAAI,aAAa,GAAA;AAChB,QAAA,OAAQ,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,aAAkC,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;KACrF;AAEM,IAAA,QAAQ,CAAC,KAAqB,EAAA;AACpC,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACzB;;AAEG;QACH,UAAU,CAAC,MAAK;YACf,IAAI,CAAC,YAAY,EAAE,CAAC;AACrB,SAAC,CAAC,CAAC;KACH;AAED,IAAA,IAAW,MAAM,GAAA;QAChB,OAAO,IAAI,CAAC,OAAO,CAAC;KACpB;AAMD,IAAA,IAAW,KAAK,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;KACzB;AAED,IAAA,eAAe,CAAgB;AAE/B,IAAA,aAAa,CAAC,EAAU,EAAE,OAAO,GAAG,KAAK,EAAA;QACxC,IAAI,OAAO,EAAE;YACZ,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC;SACrD;aAAM;YACN,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;SACrD;QACD,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AAC9B,YAAA,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;gBACtB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,iBAAiB,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;aACzG;AACF,SAAC,CAAC,CAAC;KACH;AAED,IAAA,gBAAgB,CAAC,EAAU,EAAA;AAC1B,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,UAAU,KAAK,UAAU,KAAK,EAAE,CAAC,CAAC;KACtF;IAED,WAAW,GAAA;AACV,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;YACtB,CAAC,CAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;AACjC,YAAA,eAAe,EAAE,IAAI,CAAC,MAAM,KAAK,WAAW;AAC5C,YAAA,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,UAAU;AACxC,SAAA,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,EAAE,CAAC;KAClB;IAED,YAAY,GAAA;QACX,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;AAC9B,YAAA,MAAM,IAAI,KAAK,CAAC,6FAA6F,CAAC,CAAC;SAC/G;AACD,QAAA,IAAI,CAAC,MAAM;aACT,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC;AACpC,aAAA,OAAO,CAAC,CAAC,KAAK,KAAI;AAClB,YAAA,MAAM,OAAO,GAAG,CAAA,EAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAChF,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;AACtE,SAAC,CAAC,CAAC;;AAEJ,QAAA,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC;QAChD,IAAI,CAAC,UAAU,EAAE,CAAC;AAClB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACvB;IAEO,UAAU,GAAA;QACjB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;YAC9B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,cAAc,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,EAAE,CAAC,CAAC;YACtG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;AAClG,YAAA,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;gBACtB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,kBAAkB,EAAE,CAAA,EAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAU,QAAA,CAAA,CAAC,CAAC;aACpH;AACF,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,EAAE,CAAQ,MAAA,CAAA,CAAC,EAAE;YAClE,IAAI,CAAC,aAAa,CAAC,CAAA,EAAG,IAAI,CAAC,EAAE,CAAQ,MAAA,CAAA,CAAC,CAAC;SACvC;KACD;AAEO,IAAA,oBAAoB,CAAC,QAAqB,EAAA;;AAEjD,QAAA,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAChC,OAAO;SACP;AACD,QAAA,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,KAAI;;AAE5B,YAAA,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC;AAC3C,YAAA,IAAI,CAAC,aAAa,GAAG,CAAC,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC;;AAGzF,YAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;AACvC,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,kBAAkB;kBACpC,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC;kBAClD,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;;AAG9G,YAAA,IAAI,IAAI,CAAC,aAAa,KAAK,eAAe,IAAI,IAAI,CAAC,QAAQ,KAAK,gBAAgB,EAAE;gBACjF,IAAI,CAAC,UAAU,EAAE,CAAC;aAClB;AACF,SAAC,CAAC,CAAC;KACH;IAED,WAAW,GAAA;AACV,QAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;KACvB;IAED,SAAS,GAAA;AACR,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACtB;8GAtOW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,uHAsDlB,gBAAgB,CAAA,EAAA,qBAAA,EAAA,CAAA,uBAAA,EAAA,uBAAA,EAKhB,gBAAgB,CAAA,EAAA,aAAA,EAAA,eAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAgBR,gBAAgB,CApFzB,EAAA,aAAA,EAAA,eAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,SAAA,EAAA;YACV,OAAO;AACP,YAAA;AACC,gBAAA,OAAO,EAAE,mBAAmB;AAC5B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,kBAAkB,CAAC;AACjD,aAAA;SACD,EAgBgB,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,SAAA,EAAA,aAAa,8DAKb,SAAS,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClD3B,wzEA2DA,EDvCW,MAAA,EAAA,CAAA,y3iDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,6FAA0B,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,sBAAsB,EAAE,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,eAAe,qRAAE,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,EAAE,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,KAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,cAAc,mDAAE,eAAe,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FAY1J,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAf9B,SAAS;+BACC,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,OAAA,EACP,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,eAAe,EAAE,mBAAmB,EAAE,aAAa,EAAE,cAAc,EAAE,eAAe,CAAC,EAG5J,SAAA,EAAA;wBACV,OAAO;AACP,wBAAA;AACC,4BAAA,OAAO,EAAE,mBAAmB;AAC5B,4BAAA,WAAW,EAAE,UAAU,CAAC,wBAAwB,CAAC;AACjD,yBAAA;qBACD,EACc,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,wzEAAA,EAAA,MAAA,EAAA,CAAA,y3iDAAA,CAAA,EAAA,CAAA;8BAgB1B,UAAU,EAAA,CAAA;sBADpB,eAAe;AAAC,gBAAA,IAAA,EAAA,CAAA,aAAa,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,CAAA;gBAMjD,QAAQ,EAAA,CAAA;sBADX,eAAe;AAAC,gBAAA,IAAA,EAAA,CAAA,SAAS,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,CAAA;gBA8BjD,KAAK,EAAA,CAAA;sBAHJ,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACN,wBAAA,QAAQ,EAAE,IAAI;AACd,qBAAA,CAAA;gBASD,WAAW,EAAA,CAAA;sBAHV,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACN,wBAAA,SAAS,EAAE,gBAAgB;AAC3B,qBAAA,CAAA;gBAMD,qBAAqB,EAAA,CAAA;sBAHpB,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACN,wBAAA,SAAS,EAAE,gBAAgB;AAC3B,qBAAA,CAAA;gBAID,aAAa,EAAA,CAAA;sBADZ,KAAK;gBAIN,OAAO,EAAA,CAAA;sBADN,KAAK;gBAUF,OAAO,EAAA,CAAA;sBADV,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBActC,aAAa,EAAA,CAAA;sBADZ,KAAK;gBAON,kBAAkB,EAAA,CAAA;sBADjB,KAAK;gBAON,kBAAkB,EAAA,CAAA;sBADjB,KAAK;gBAIN,IAAI,EAAA,CAAA;sBADH,KAAK;gBAIN,MAAM,EAAA,CAAA;sBADL,KAAK;gBAQN,OAAO,EAAA,CAAA;sBADN,KAAK;;;MEtIM,cAAc,CAAA;AAR3B,IAAA,WAAA,GAAA;AASiB,QAAA,IAAA,CAAA,IAAI,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC;QAEnD,IAAY,CAAA,YAAA,GAAG,MAAM,CAAC,mBAAmB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;AAE/E;;AAEG;QAEH,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;AAQnB,KAAA;IANA,QAAQ,GAAA;;AAEP,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;SACjC;KACD;8GAhBW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,uGAQN,gBAAgB,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,eAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FARxB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAR1B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;;AAEL,wBAAA,KAAK,EAAE,eAAe;AACtB,qBAAA;AACD,iBAAA,CAAA;8BAUA,UAAU,EAAA,CAAA;sBADT,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,mBAAmB,EAAE,CAAA;;;ACnBnE;;AAEG;;;;"}

package/fesm2022/lucca-front-ng-forms-phone-number-input.mjs

@@ -15,7 +15,7 @@ class PhoneNumberValidators {
             if (reason) {
                 return { validPhoneNumber: reason };
             }
-            if (!isValidPhoneNumber(control.value)) {
+            if (!isValidPhoneNumber(control.value, countryCode)) {
                 return { validPhoneNumber: 'INVALID' };
             }
         }
@@ -178,7 +178,7 @@ class PhoneNumberInputComponent {
                 useExisting: forwardRef(() => PhoneNumberInputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<fieldset [disabled]=\"disabled\" class=\"phoneNumber-fieldset\">\n\t<legend><span class=\"u-mask\">{{ label }}</span></legend>\n\t<label>\n\t\t<span class=\"u-mask\">Prefix</span>\n\t\t<lu-simple-select\n\t\t\t[options]=\"prefixesDisplay()\"\n\t\t\t[ngModel]=\"prefixEntry()\"\n\t\t\t(ngModelChange)=\"updatePrefix($event)\"\n\t\t\t[optionKey]=\"getPrefixKey\"\n\t\t\t[optionComparer]=\"prefixComparator\"\n\t\t\t(clueChange)=\"query.set($event)\"\n\t\t\t#selectRef\n\t\t\tclass=\"phoneNumber-fieldset-select\"\n\t\t>\n\t\t\t<ng-container *luOption=\"let prefixOption; select: selectRef\"\n\t\t\t\t><img class=\"pr-u-marginRight50\" src=\"https://cdn.lucca.fr/assets/misc/flags/{{prefixOption.country}}.svg\" alt=\"\" />\n\t\t\t\t{{ prefixOption.name }} (+{{ prefixOption.prefix }})\n\t\t\t</ng-container>\n\t\t\t<ng-container *luDisplayer=\"let prefixOption; select: selectRef\"\n\t\t\t\t><img\n\t\t\t\t\tsrc=\"https://cdn.lucca.fr/assets/misc/flags/{{prefixOption.country}}.svg\"\n\t\t\t\t\talt=\"{{prefixOption.country}} +{{ prefixOption.prefix }}\"\n\t\t\t\t\tclass=\"phoneNumber-countryCode-flag\"\n\t\t\t\t/>\n\t\t\t</ng-container>\n\t\t</lu-simple-select>\n\t</label>\n\t<label for=\"phoneNumberFieldsetTextfieldInput\" class=\"u-mask\">Number</label>\n\t<div class=\"textField phoneNumber-fieldset-textfield\">\n\t\t<div class=\"textField-input\">\n\t\t\t<input\n\t\t\t\ttype=\"text\"\n\t\t\t\tid=\"phoneNumberFieldsetTextfieldInput\"\n\t\t\t\t[ngModel]=\"displayedNumber()\"\n\t\t\t\t(ngModelChange)=\"updateNumber($event)\"\n\t\t\t\t(blur)=\"touched();formatNationalNumber()\"\n\t\t\t\tluInput\n\t\t\t\tluInputStandalone\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</fieldset>\n", styles: ["lu-phone-number-input .phoneNumber-fieldset{border:0;padding:0;gap:var(--pr-t-spacings-100);width:17.5rem;display:flex}lu-phone-number-input .phoneNumber-fieldset-select .simpleSelect-input{width:21px}lu-phone-number-input .phoneNumber-fieldset-textfield{flex-grow:1}\n"], dependencies: [{ kind: "component", type: LuSimpleSelectInputComponent, selector: "lu-simple-select" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: LuDisplayerDirective, selector: "[luDisplayer]", inputs: ["luDisplayerSelect"] }, { kind: "directive", type: LuOptionDirective, selector: "[luOption]", inputs: ["luOptionSelect"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], ngImport: i0, template: "<fieldset [disabled]=\"disabled\" class=\"phoneNumber-fieldset\">\n\t<legend><span class=\"u-mask\">{{ label }}</span></legend>\n\t<label>\n\t\t<span class=\"u-mask\">Prefix</span>\n\t\t<lu-simple-select\n\t\t\t[options]=\"prefixesDisplay()\"\n\t\t\t[ngModel]=\"prefixEntry()\"\n\t\t\t(ngModelChange)=\"updatePrefix($event)\"\n\t\t\t[optionKey]=\"getPrefixKey\"\n\t\t\t[optionComparer]=\"prefixComparator\"\n\t\t\t(clueChange)=\"query.set($event)\"\n\t\t\t#selectRef\n\t\t\tclass=\"phoneNumber-fieldset-select\"\n\t\t>\n\t\t\t<ng-container *luOption=\"let prefixOption; select: selectRef\"\n\t\t\t\t><img class=\"phoneNumber-option-flag\" src=\"https://cdn.lucca.fr/assets/misc/flags/{{prefixOption.country}}.svg\" alt=\"\" />{{\n\t\t\t\tprefixOption.name }} (+{{ prefixOption.prefix }})\n\t\t\t</ng-container>\n\t\t\t<ng-container *luDisplayer=\"let prefixOption; select: selectRef\"\n\t\t\t\t><img\n\t\t\t\t\tsrc=\"https://cdn.lucca.fr/assets/misc/flags/{{prefixOption.country}}.svg\"\n\t\t\t\t\talt=\"{{prefixOption.country}} +{{ prefixOption.prefix }}\"\n\t\t\t\t\tclass=\"phoneNumber-countryCode-flag\"\n\t\t\t\t/>\n\t\t\t</ng-container>\n\t\t</lu-simple-select>\n\t</label>\n\t<label for=\"phoneNumberFieldsetTextfieldInput\" class=\"u-mask\">Number</label>\n\t<div class=\"textField phoneNumber-fieldset-textfield\">\n\t\t<div class=\"textField-input\">\n\t\t\t<input\n\t\t\t\ttype=\"text\"\n\t\t\t\tid=\"phoneNumberFieldsetTextfieldInput\"\n\t\t\t\t[ngModel]=\"displayedNumber()\"\n\t\t\t\t(ngModelChange)=\"updateNumber($event)\"\n\t\t\t\t(blur)=\"touched();formatNationalNumber()\"\n\t\t\t\tluInput\n\t\t\t\tluInputStandalone\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</fieldset>\n", styles: ["lu-phone-number-input .phoneNumber-fieldset{border:0;padding:0;gap:var(--pr-t-spacings-100);width:17.5rem;display:flex}lu-phone-number-input .phoneNumber-fieldset-select .simpleSelect-input{width:21px}lu-phone-number-input .phoneNumber-fieldset-textfield{flex-grow:1}.phoneNumber-option-flag{vertical-align:top;margin-block-start:var(--pr-t-spacings-50);margin-inline-end:var(--pr-t-spacings-100)}\n"], dependencies: [{ kind: "component", type: LuSimpleSelectInputComponent, selector: "lu-simple-select" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: LuDisplayerDirective, selector: "[luDisplayer]", inputs: ["luDisplayerSelect"] }, { kind: "directive", type: LuOptionDirective, selector: "[luOption]", inputs: ["luOptionSelect"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: PhoneNumberInputComponent, decorators: [{
             type: Component,
@@ -193,7 +193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
                             useExisting: forwardRef(() => PhoneNumberInputComponent),
                             multi: true,
                         },
-                    ], template: "<fieldset [disabled]=\"disabled\" class=\"phoneNumber-fieldset\">\n\t<legend><span class=\"u-mask\">{{ label }}</span></legend>\n\t<label>\n\t\t<span class=\"u-mask\">Prefix</span>\n\t\t<lu-simple-select\n\t\t\t[options]=\"prefixesDisplay()\"\n\t\t\t[ngModel]=\"prefixEntry()\"\n\t\t\t(ngModelChange)=\"updatePrefix($event)\"\n\t\t\t[optionKey]=\"getPrefixKey\"\n\t\t\t[optionComparer]=\"prefixComparator\"\n\t\t\t(clueChange)=\"query.set($event)\"\n\t\t\t#selectRef\n\t\t\tclass=\"phoneNumber-fieldset-select\"\n\t\t>\n\t\t\t<ng-container *luOption=\"let prefixOption; select: selectRef\"\n\t\t\t\t><img class=\"pr-u-marginRight50\" src=\"https://cdn.lucca.fr/assets/misc/flags/{{prefixOption.country}}.svg\" alt=\"\" />\n\t\t\t\t{{ prefixOption.name }} (+{{ prefixOption.prefix }})\n\t\t\t</ng-container>\n\t\t\t<ng-container *luDisplayer=\"let prefixOption; select: selectRef\"\n\t\t\t\t><img\n\t\t\t\t\tsrc=\"https://cdn.lucca.fr/assets/misc/flags/{{prefixOption.country}}.svg\"\n\t\t\t\t\talt=\"{{prefixOption.country}} +{{ prefixOption.prefix }}\"\n\t\t\t\t\tclass=\"phoneNumber-countryCode-flag\"\n\t\t\t\t/>\n\t\t\t</ng-container>\n\t\t</lu-simple-select>\n\t</label>\n\t<label for=\"phoneNumberFieldsetTextfieldInput\" class=\"u-mask\">Number</label>\n\t<div class=\"textField phoneNumber-fieldset-textfield\">\n\t\t<div class=\"textField-input\">\n\t\t\t<input\n\t\t\t\ttype=\"text\"\n\t\t\t\tid=\"phoneNumberFieldsetTextfieldInput\"\n\t\t\t\t[ngModel]=\"displayedNumber()\"\n\t\t\t\t(ngModelChange)=\"updateNumber($event)\"\n\t\t\t\t(blur)=\"touched();formatNationalNumber()\"\n\t\t\t\tluInput\n\t\t\t\tluInputStandalone\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</fieldset>\n", styles: ["lu-phone-number-input .phoneNumber-fieldset{border:0;padding:0;gap:var(--pr-t-spacings-100);width:17.5rem;display:flex}lu-phone-number-input .phoneNumber-fieldset-select .simpleSelect-input{width:21px}lu-phone-number-input .phoneNumber-fieldset-textfield{flex-grow:1}\n"] }]
+                    ], template: "<fieldset [disabled]=\"disabled\" class=\"phoneNumber-fieldset\">\n\t<legend><span class=\"u-mask\">{{ label }}</span></legend>\n\t<label>\n\t\t<span class=\"u-mask\">Prefix</span>\n\t\t<lu-simple-select\n\t\t\t[options]=\"prefixesDisplay()\"\n\t\t\t[ngModel]=\"prefixEntry()\"\n\t\t\t(ngModelChange)=\"updatePrefix($event)\"\n\t\t\t[optionKey]=\"getPrefixKey\"\n\t\t\t[optionComparer]=\"prefixComparator\"\n\t\t\t(clueChange)=\"query.set($event)\"\n\t\t\t#selectRef\n\t\t\tclass=\"phoneNumber-fieldset-select\"\n\t\t>\n\t\t\t<ng-container *luOption=\"let prefixOption; select: selectRef\"\n\t\t\t\t><img class=\"phoneNumber-option-flag\" src=\"https://cdn.lucca.fr/assets/misc/flags/{{prefixOption.country}}.svg\" alt=\"\" />{{\n\t\t\t\tprefixOption.name }} (+{{ prefixOption.prefix }})\n\t\t\t</ng-container>\n\t\t\t<ng-container *luDisplayer=\"let prefixOption; select: selectRef\"\n\t\t\t\t><img\n\t\t\t\t\tsrc=\"https://cdn.lucca.fr/assets/misc/flags/{{prefixOption.country}}.svg\"\n\t\t\t\t\talt=\"{{prefixOption.country}} +{{ prefixOption.prefix }}\"\n\t\t\t\t\tclass=\"phoneNumber-countryCode-flag\"\n\t\t\t\t/>\n\t\t\t</ng-container>\n\t\t</lu-simple-select>\n\t</label>\n\t<label for=\"phoneNumberFieldsetTextfieldInput\" class=\"u-mask\">Number</label>\n\t<div class=\"textField phoneNumber-fieldset-textfield\">\n\t\t<div class=\"textField-input\">\n\t\t\t<input\n\t\t\t\ttype=\"text\"\n\t\t\t\tid=\"phoneNumberFieldsetTextfieldInput\"\n\t\t\t\t[ngModel]=\"displayedNumber()\"\n\t\t\t\t(ngModelChange)=\"updateNumber($event)\"\n\t\t\t\t(blur)=\"touched();formatNationalNumber()\"\n\t\t\t\tluInput\n\t\t\t\tluInputStandalone\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</fieldset>\n", styles: ["lu-phone-number-input .phoneNumber-fieldset{border:0;padding:0;gap:var(--pr-t-spacings-100);width:17.5rem;display:flex}lu-phone-number-input .phoneNumber-fieldset-select .simpleSelect-input{width:21px}lu-phone-number-input .phoneNumber-fieldset-textfield{flex-grow:1}.phoneNumber-option-flag{vertical-align:top;margin-block-start:var(--pr-t-spacings-50);margin-inline-end:var(--pr-t-spacings-100)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }] } });

package/fesm2022/lucca-front-ng-forms-phone-number-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lucca-front-ng-forms-phone-number-input.mjs","sources":["../../../packages/ng/forms/phone-number-input/validators.ts","../../../packages/ng/forms/phone-number-input/phone-number-input.component.ts","../../../packages/ng/forms/phone-number-input/phone-number-input.component.html","../../../packages/ng/forms/phone-number-input/formatter.ts","../../../packages/ng/forms/phone-number-input/phone-number-format.pipe.ts","../../../packages/ng/forms/phone-number-input/lucca-front-ng-forms-phone-number-input.ts"],"sourcesContent":["import { AbstractControl } from '@angular/forms';\nimport { validatePhoneNumberLength, isValidPhoneNumber, CountryCode } from 'libphonenumber-js';\n\nexport class PhoneNumberValidators {\n\tstatic validPhoneNumber(control: AbstractControl<string>, countryCode?: CountryCode) {\n\t\tif (control.value) {\n\t\t\tconst reason = validatePhoneNumberLength(control.value, countryCode);\n\t\t\tif (reason) {\n\t\t\t\treturn { validPhoneNumber: reason };\n\t\t\t}\n\t\t\tif (!isValidPhoneNumber(control.value)) {\n\t\t\t\treturn { validPhoneNumber: 'INVALID' };\n\t\t\t}\n\t\t}\n\t\t// Else, everything is fine !\n\t\treturn null;\n\t}\n}\n","import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, Input, input, LOCALE_ID, output, signal, ViewEncapsulation } from '@angular/core';\nimport { AbstractControl, ControlValueAccessor, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';\nimport { LuDisplayerDirective, LuOptionDirective } from '@lucca-front/ng/core-select';\nimport { FormFieldComponent, InputDirective } from '@lucca-front/ng/form-field';\nimport { LuSimpleSelectInputComponent } from '@lucca-front/ng/simple-select';\nimport { type CountryCallingCode, formatIncompletePhoneNumber, getCountries, getCountryCallingCode, parsePhoneNumber } from 'libphonenumber-js';\nimport { TextInputComponent } from '@lucca-front/ng/forms';\nimport { CountryCode, E164Number } from './types';\nimport { PhoneNumberValidators } from './validators';\n\ninterface PrefixEntry {\n\tcountry: CountryCode;\n\tprefix: CountryCallingCode;\n\tname: string;\n}\n\ntype ParsePhoneNumberResult = {\n\tnumber: E164Number;\n\tcountry?: CountryCode;\n\tnationalNumber?: string;\n\tisValid: boolean;\n};\n\nfunction tryParsePhoneNumber(phoneNumber: string, countryCode?: CountryCode): ParsePhoneNumberResult {\n\ttry {\n\t\tconst parsedNumber = parsePhoneNumber(phoneNumber, countryCode);\n\t\treturn {\n\t\t\tcountry: parsedNumber.country,\n\t\t\tnumber: parsedNumber.number,\n\t\t\tnationalNumber: parsedNumber.formatNational(),\n\t\t\tisValid: parsedNumber.isValid(),\n\t\t};\n\t} catch (e) {\n\t\treturn {\n\t\t\tnumber: phoneNumber as E164Number,\n\t\t\tnationalNumber: phoneNumber,\n\t\t\tisValid: false,\n\t\t};\n\t}\n}\n\n@Component({\n\tselector: 'lu-phone-number-input',\n\tstandalone: true,\n\timports: [LuSimpleSelectInputComponent, TextInputComponent, FormsModule, LuDisplayerDirective, LuOptionDirective, InputDirective, FormFieldComponent],\n\ttemplateUrl: './phone-number-input.component.html',\n\tstyleUrl: './phone-number-input.component.scss',\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: forwardRef(() => PhoneNumberInputComponent),\n\t\t\tmulti: true,\n\t\t},\n\t\t{\n\t\t\tprovide: NG_VALIDATORS,\n\t\t\tuseExisting: forwardRef(() => PhoneNumberInputComponent),\n\t\t\tmulti: true,\n\t\t},\n\t],\n})\nexport class PhoneNumberInputComponent implements ControlValueAccessor, Validator {\n\t#locale = inject(LOCALE_ID);\n\n\t@Input() label: string;\n\n\t#onChange?: (value: E164Number) => void;\n\n\t#onTouched?: () => void;\n\n\tdisabled = false;\n\n\t#displayNames = new Intl.DisplayNames(this.#locale, { type: 'region' });\n\n\tprefixEntries = getCountries().map((country) => ({\n\t\tcountry,\n\t\tprefix: getCountryCallingCode(country),\n\t\tname: this.#displayNames.of(country),\n\t}));\n\n\t/**\n\t * Which countries should be shown? Defaults to empty array which means all of them.\n\t *\n\t * You can use CountryCode to make sure it's properly typed on your end, string is also accepted\n\t */\n\tallowedCountries = input<Array<CountryCode | string>>([]);\n\n\t#prefixEntries = computed(() => {\n\t\tconst whitelist = this.allowedCountries();\n\t\tif (whitelist.length === 0) {\n\t\t\treturn this.prefixEntries;\n\t\t}\n\t\treturn this.prefixEntries.filter((e) => whitelist.includes(e.country));\n\t});\n\n\tquery = signal('');\n\n\tprotected prefixesDisplay = computed(() => {\n\t\tconst query = this.query();\n\t\tif (query === '') {\n\t\t\treturn this.#prefixEntries();\n\t\t}\n\t\treturn this.#prefixEntries().filter((entry) => {\n\t\t\treturn entry.country.toLowerCase().includes(query.toLowerCase()) || `+${entry.prefix}`.includes(query) || entry.name.toLowerCase().includes(query.toLowerCase());\n\t\t});\n\t});\n\n\tdefaultCountryCode = input<CountryCode>(undefined, { alias: 'country' });\n\n\tcountryChange = output<CountryCode>();\n\n\tcountryCodeSelected = signal<CountryCode | undefined>(undefined);\n\n\tcountryCode = computed(() => this.countryCodeSelected() ?? this.defaultCountryCode());\n\n\tdisplayedNumber = signal<string | undefined>(undefined);\n\n\tprefixEntry = computed(() => this.#prefixEntries().find((p) => p.country === this.countryCode()));\n\n\tprotected getPrefixKey = (prefix: PrefixEntry) => prefix?.country;\n\n\tprotected prefixComparator = (a: PrefixEntry, b: PrefixEntry) => this.getPrefixKey(a) === this.getPrefixKey(b);\n\n\twriteValue(value: string): void {\n\t\ttry {\n\t\t\tif (value) {\n\t\t\t\tconst { country, number, nationalNumber } = tryParsePhoneNumber(value, this.countryCode());\n\t\t\t\tthis.displayedNumber.set(nationalNumber);\n\t\t\t\tthis.countryCodeSelected.set(country);\n\t\t\t\tif (value !== number) {\n\t\t\t\t\tthis.#onChange?.(number);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.displayedNumber.set(undefined);\n\t\t\t}\n\t\t} catch (e) {\n\t\t\tthis.displayedNumber.set(value);\n\t\t}\n\t\tthis.formatNationalNumber();\n\t}\n\n\tregisterOnChange(fn: (value: E164Number) => void): void {\n\t\tthis.#onChange = fn;\n\t}\n\n\tregisterOnTouched(fn: () => void): void {\n\t\tthis.#onTouched = fn;\n\t}\n\n\tsetDisabledState?(isDisabled: boolean): void {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tupdatePrefix(prefixEntry: PrefixEntry) {\n\t\tthis.countryCodeSelected.set(prefixEntry.country);\n\t\tthis.countryChange.emit(prefixEntry.country);\n\t\tthis.touched();\n\t\tthis.updateModel();\n\t\tthis.formatNationalNumber();\n\t}\n\n\tupdateNumber(number: string) {\n\t\tthis.displayedNumber.set(number);\n\t\tthis.updateModel();\n\t}\n\n\tupdateModel(): void {\n\t\tconst displayedNumber = this.displayedNumber();\n\t\tconst countryCode = this.countryCode();\n\n\t\ttry {\n\t\t\tconst { country, number } = tryParsePhoneNumber(displayedNumber, countryCode);\n\t\t\tif (country && country !== countryCode) {\n\t\t\t\tthis.countryCodeSelected.set(country);\n\t\t\t\tthis.countryChange.emit(country);\n\t\t\t}\n\t\t\tthis.#onChange?.(number);\n\t\t\treturn;\n\t\t} catch (e) {\n\t\t\tthis.#onChange?.(displayedNumber as E164Number);\n\t\t}\n\t}\n\n\ttouched(): void {\n\t\tthis.#onTouched?.();\n\t}\n\n\tformatNationalNumber(): void {\n\t\tconst countryCode = this.countryCode();\n\t\tconst displayedNumber = this.displayedNumber();\n\t\ttry {\n\t\t\tconst { isValid, nationalNumber } = tryParsePhoneNumber(displayedNumber, countryCode);\n\t\t\tif (isValid) {\n\t\t\t\tthis.displayedNumber.set(nationalNumber);\n\t\t\t} else if (countryCode) {\n\t\t\t\tthis.displayedNumber.set(formatIncompletePhoneNumber(displayedNumber, countryCode));\n\t\t\t}\n\t\t} catch (e) {\n\t\t\t// do nothing\n\t\t}\n\t}\n\n\tvalidate(control: AbstractControl<string, string>): ValidationErrors {\n\t\treturn PhoneNumberValidators.validPhoneNumber(control, this.countryCode());\n\t}\n}\n","<fieldset [disabled]=\"disabled\" class=\"phoneNumber-fieldset\">\n\t<legend><span class=\"u-mask\">{{ label }}</span></legend>\n\t<label>\n\t\t<span class=\"u-mask\">Prefix</span>\n\t\t<lu-simple-select\n\t\t\t[options]=\"prefixesDisplay()\"\n\t\t\t[ngModel]=\"prefixEntry()\"\n\t\t\t(ngModelChange)=\"updatePrefix($event)\"\n\t\t\t[optionKey]=\"getPrefixKey\"\n\t\t\t[optionComparer]=\"prefixComparator\"\n\t\t\t(clueChange)=\"query.set($event)\"\n\t\t\t#selectRef\n\t\t\tclass=\"phoneNumber-fieldset-select\"\n\t\t>\n\t\t\t<ng-container *luOption=\"let prefixOption; select: selectRef\"\n\t\t\t\t><img class=\"pr-u-marginRight50\" src=\"https://cdn.lucca.fr/assets/misc/flags/{{prefixOption.country}}.svg\" alt=\"\" />\n\t\t\t\t{{ prefixOption.name }} (+{{ prefixOption.prefix }})\n\t\t\t</ng-container>\n\t\t\t<ng-container *luDisplayer=\"let prefixOption; select: selectRef\"\n\t\t\t\t><img\n\t\t\t\t\tsrc=\"https://cdn.lucca.fr/assets/misc/flags/{{prefixOption.country}}.svg\"\n\t\t\t\t\talt=\"{{prefixOption.country}} +{{ prefixOption.prefix }}\"\n\t\t\t\t\tclass=\"phoneNumber-countryCode-flag\"\n\t\t\t\t/>\n\t\t\t</ng-container>\n\t\t</lu-simple-select>\n\t</label>\n\t<label for=\"phoneNumberFieldsetTextfieldInput\" class=\"u-mask\">Number</label>\n\t<div class=\"textField phoneNumber-fieldset-textfield\">\n\t\t<div class=\"textField-input\">\n\t\t\t<input\n\t\t\t\ttype=\"text\"\n\t\t\t\tid=\"phoneNumberFieldsetTextfieldInput\"\n\t\t\t\t[ngModel]=\"displayedNumber()\"\n\t\t\t\t(ngModelChange)=\"updateNumber($event)\"\n\t\t\t\t(blur)=\"touched();formatNationalNumber()\"\n\t\t\t\tluInput\n\t\t\t\tluInputStandalone\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</fieldset>\n","import { E164Number, NumberFormat } from './types';\nimport { parsePhoneNumber } from 'libphonenumber-js';\n\nexport class PhoneNumberFormatter {\n\tstatic format(phoneNumber: E164Number, format: NumberFormat = 'NATIONAL'): string {\n\t\treturn parsePhoneNumber(phoneNumber).format(format);\n\t}\n}\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { E164Number, NumberFormat } from './types';\nimport { PhoneNumberFormatter } from './formatter';\n\n@Pipe({\n\tname: 'luPhoneNumberFormat',\n\tstandalone: true,\n})\nexport class PhoneNumberFormatPipe implements PipeTransform {\n\ttransform(value: E164Number, format: NumberFormat = 'NATIONAL'): unknown {\n\t\treturn PhoneNumberFormatter.format(value, format);\n\t}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"lucca-front-ng-forms-phone-number-input.mjs","sources":["../../../packages/ng/forms/phone-number-input/validators.ts","../../../packages/ng/forms/phone-number-input/phone-number-input.component.ts","../../../packages/ng/forms/phone-number-input/phone-number-input.component.html","../../../packages/ng/forms/phone-number-input/formatter.ts","../../../packages/ng/forms/phone-number-input/phone-number-format.pipe.ts","../../../packages/ng/forms/phone-number-input/lucca-front-ng-forms-phone-number-input.ts"],"sourcesContent":["import { AbstractControl } from '@angular/forms';\nimport { validatePhoneNumberLength, isValidPhoneNumber, CountryCode } from 'libphonenumber-js';\n\nexport class PhoneNumberValidators {\n\tstatic validPhoneNumber(control: AbstractControl<string>, countryCode?: CountryCode) {\n\t\tif (control.value) {\n\t\t\tconst reason = validatePhoneNumberLength(control.value, countryCode);\n\t\t\tif (reason) {\n\t\t\t\treturn { validPhoneNumber: reason };\n\t\t\t}\n\t\t\tif (!isValidPhoneNumber(control.value, countryCode)) {\n\t\t\t\treturn { validPhoneNumber: 'INVALID' };\n\t\t\t}\n\t\t}\n\t\t// Else, everything is fine !\n\t\treturn null;\n\t}\n}\n","import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, Input, input, LOCALE_ID, output, signal, ViewEncapsulation } from '@angular/core';\nimport { AbstractControl, ControlValueAccessor, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';\nimport { LuDisplayerDirective, LuOptionDirective } from '@lucca-front/ng/core-select';\nimport { FormFieldComponent, InputDirective } from '@lucca-front/ng/form-field';\nimport { LuSimpleSelectInputComponent } from '@lucca-front/ng/simple-select';\nimport { type CountryCallingCode, formatIncompletePhoneNumber, getCountries, getCountryCallingCode, parsePhoneNumber } from 'libphonenumber-js';\nimport { TextInputComponent } from '@lucca-front/ng/forms';\nimport { CountryCode, E164Number } from './types';\nimport { PhoneNumberValidators } from './validators';\n\ninterface PrefixEntry {\n\tcountry: CountryCode;\n\tprefix: CountryCallingCode;\n\tname: string;\n}\n\ntype ParsePhoneNumberResult = {\n\tnumber: E164Number;\n\tcountry?: CountryCode;\n\tnationalNumber?: string;\n\tisValid: boolean;\n};\n\nfunction tryParsePhoneNumber(phoneNumber: string, countryCode?: CountryCode): ParsePhoneNumberResult {\n\ttry {\n\t\tconst parsedNumber = parsePhoneNumber(phoneNumber, countryCode);\n\t\treturn {\n\t\t\tcountry: parsedNumber.country,\n\t\t\tnumber: parsedNumber.number,\n\t\t\tnationalNumber: parsedNumber.formatNational(),\n\t\t\tisValid: parsedNumber.isValid(),\n\t\t};\n\t} catch (e) {\n\t\treturn {\n\t\t\tnumber: phoneNumber as E164Number,\n\t\t\tnationalNumber: phoneNumber,\n\t\t\tisValid: false,\n\t\t};\n\t}\n}\n\n@Component({\n\tselector: 'lu-phone-number-input',\n\tstandalone: true,\n\timports: [LuSimpleSelectInputComponent, TextInputComponent, FormsModule, LuDisplayerDirective, LuOptionDirective, InputDirective, FormFieldComponent],\n\ttemplateUrl: './phone-number-input.component.html',\n\tstyleUrl: './phone-number-input.component.scss',\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: forwardRef(() => PhoneNumberInputComponent),\n\t\t\tmulti: true,\n\t\t},\n\t\t{\n\t\t\tprovide: NG_VALIDATORS,\n\t\t\tuseExisting: forwardRef(() => PhoneNumberInputComponent),\n\t\t\tmulti: true,\n\t\t},\n\t],\n})\nexport class PhoneNumberInputComponent implements ControlValueAccessor, Validator {\n\t#locale = inject(LOCALE_ID);\n\n\t@Input() label: string;\n\n\t#onChange?: (value: E164Number) => void;\n\n\t#onTouched?: () => void;\n\n\tdisabled = false;\n\n\t#displayNames = new Intl.DisplayNames(this.#locale, { type: 'region' });\n\n\tprefixEntries = getCountries().map((country) => ({\n\t\tcountry,\n\t\tprefix: getCountryCallingCode(country),\n\t\tname: this.#displayNames.of(country),\n\t}));\n\n\t/**\n\t * Which countries should be shown? Defaults to empty array which means all of them.\n\t *\n\t * You can use CountryCode to make sure it's properly typed on your end, string is also accepted\n\t */\n\tallowedCountries = input<Array<CountryCode | string>>([]);\n\n\t#prefixEntries = computed(() => {\n\t\tconst whitelist = this.allowedCountries();\n\t\tif (whitelist.length === 0) {\n\t\t\treturn this.prefixEntries;\n\t\t}\n\t\treturn this.prefixEntries.filter((e) => whitelist.includes(e.country));\n\t});\n\n\tquery = signal('');\n\n\tprotected prefixesDisplay = computed(() => {\n\t\tconst query = this.query();\n\t\tif (query === '') {\n\t\t\treturn this.#prefixEntries();\n\t\t}\n\t\treturn this.#prefixEntries().filter((entry) => {\n\t\t\treturn entry.country.toLowerCase().includes(query.toLowerCase()) || `+${entry.prefix}`.includes(query) || entry.name.toLowerCase().includes(query.toLowerCase());\n\t\t});\n\t});\n\n\tdefaultCountryCode = input<CountryCode>(undefined, { alias: 'country' });\n\n\tcountryChange = output<CountryCode>();\n\n\tcountryCodeSelected = signal<CountryCode | undefined>(undefined);\n\n\tcountryCode = computed(() => this.countryCodeSelected() ?? this.defaultCountryCode());\n\n\tdisplayedNumber = signal<string | undefined>(undefined);\n\n\tprefixEntry = computed(() => this.#prefixEntries().find((p) => p.country === this.countryCode()));\n\n\tprotected getPrefixKey = (prefix: PrefixEntry) => prefix?.country;\n\n\tprotected prefixComparator = (a: PrefixEntry, b: PrefixEntry) => this.getPrefixKey(a) === this.getPrefixKey(b);\n\n\twriteValue(value: string): void {\n\t\ttry {\n\t\t\tif (value) {\n\t\t\t\tconst { country, number, nationalNumber } = tryParsePhoneNumber(value, this.countryCode());\n\t\t\t\tthis.displayedNumber.set(nationalNumber);\n\t\t\t\tthis.countryCodeSelected.set(country);\n\t\t\t\tif (value !== number) {\n\t\t\t\t\tthis.#onChange?.(number);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.displayedNumber.set(undefined);\n\t\t\t}\n\t\t} catch (e) {\n\t\t\tthis.displayedNumber.set(value);\n\t\t}\n\t\tthis.formatNationalNumber();\n\t}\n\n\tregisterOnChange(fn: (value: E164Number) => void): void {\n\t\tthis.#onChange = fn;\n\t}\n\n\tregisterOnTouched(fn: () => void): void {\n\t\tthis.#onTouched = fn;\n\t}\n\n\tsetDisabledState?(isDisabled: boolean): void {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tupdatePrefix(prefixEntry: PrefixEntry) {\n\t\tthis.countryCodeSelected.set(prefixEntry.country);\n\t\tthis.countryChange.emit(prefixEntry.country);\n\t\tthis.touched();\n\t\tthis.updateModel();\n\t\tthis.formatNationalNumber();\n\t}\n\n\tupdateNumber(number: string) {\n\t\tthis.displayedNumber.set(number);\n\t\tthis.updateModel();\n\t}\n\n\tupdateModel(): void {\n\t\tconst displayedNumber = this.displayedNumber();\n\t\tconst countryCode = this.countryCode();\n\n\t\ttry {\n\t\t\tconst { country, number } = tryParsePhoneNumber(displayedNumber, countryCode);\n\t\t\tif (country && country !== countryCode) {\n\t\t\t\tthis.countryCodeSelected.set(country);\n\t\t\t\tthis.countryChange.emit(country);\n\t\t\t}\n\t\t\tthis.#onChange?.(number);\n\t\t\treturn;\n\t\t} catch (e) {\n\t\t\tthis.#onChange?.(displayedNumber as E164Number);\n\t\t}\n\t}\n\n\ttouched(): void {\n\t\tthis.#onTouched?.();\n\t}\n\n\tformatNationalNumber(): void {\n\t\tconst countryCode = this.countryCode();\n\t\tconst displayedNumber = this.displayedNumber();\n\t\ttry {\n\t\t\tconst { isValid, nationalNumber } = tryParsePhoneNumber(displayedNumber, countryCode);\n\t\t\tif (isValid) {\n\t\t\t\tthis.displayedNumber.set(nationalNumber);\n\t\t\t} else if (countryCode) {\n\t\t\t\tthis.displayedNumber.set(formatIncompletePhoneNumber(displayedNumber, countryCode));\n\t\t\t}\n\t\t} catch (e) {\n\t\t\t// do nothing\n\t\t}\n\t}\n\n\tvalidate(control: AbstractControl<string, string>): ValidationErrors {\n\t\treturn PhoneNumberValidators.validPhoneNumber(control, this.countryCode());\n\t}\n}\n","<fieldset [disabled]=\"disabled\" class=\"phoneNumber-fieldset\">\n\t<legend><span class=\"u-mask\">{{ label }}</span></legend>\n\t<label>\n\t\t<span class=\"u-mask\">Prefix</span>\n\t\t<lu-simple-select\n\t\t\t[options]=\"prefixesDisplay()\"\n\t\t\t[ngModel]=\"prefixEntry()\"\n\t\t\t(ngModelChange)=\"updatePrefix($event)\"\n\t\t\t[optionKey]=\"getPrefixKey\"\n\t\t\t[optionComparer]=\"prefixComparator\"\n\t\t\t(clueChange)=\"query.set($event)\"\n\t\t\t#selectRef\n\t\t\tclass=\"phoneNumber-fieldset-select\"\n\t\t>\n\t\t\t<ng-container *luOption=\"let prefixOption; select: selectRef\"\n\t\t\t\t><img class=\"phoneNumber-option-flag\" src=\"https://cdn.lucca.fr/assets/misc/flags/{{prefixOption.country}}.svg\" alt=\"\" />{{\n\t\t\t\tprefixOption.name }} (+{{ prefixOption.prefix }})\n\t\t\t</ng-container>\n\t\t\t<ng-container *luDisplayer=\"let prefixOption; select: selectRef\"\n\t\t\t\t><img\n\t\t\t\t\tsrc=\"https://cdn.lucca.fr/assets/misc/flags/{{prefixOption.country}}.svg\"\n\t\t\t\t\talt=\"{{prefixOption.country}} +{{ prefixOption.prefix }}\"\n\t\t\t\t\tclass=\"phoneNumber-countryCode-flag\"\n\t\t\t\t/>\n\t\t\t</ng-container>\n\t\t</lu-simple-select>\n\t</label>\n\t<label for=\"phoneNumberFieldsetTextfieldInput\" class=\"u-mask\">Number</label>\n\t<div class=\"textField phoneNumber-fieldset-textfield\">\n\t\t<div class=\"textField-input\">\n\t\t\t<input\n\t\t\t\ttype=\"text\"\n\t\t\t\tid=\"phoneNumberFieldsetTextfieldInput\"\n\t\t\t\t[ngModel]=\"displayedNumber()\"\n\t\t\t\t(ngModelChange)=\"updateNumber($event)\"\n\t\t\t\t(blur)=\"touched();formatNationalNumber()\"\n\t\t\t\tluInput\n\t\t\t\tluInputStandalone\n\t\t\t\tclass=\"textField-input-value\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</fieldset>\n","import { E164Number, NumberFormat } from './types';\nimport { parsePhoneNumber } from 'libphonenumber-js';\n\nexport class PhoneNumberFormatter {\n\tstatic format(phoneNumber: E164Number, format: NumberFormat = 'NATIONAL'): string {\n\t\treturn parsePhoneNumber(phoneNumber).format(format);\n\t}\n}\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { E164Number, NumberFormat } from './types';\nimport { PhoneNumberFormatter } from './formatter';\n\n@Pipe({\n\tname: 'luPhoneNumberFormat',\n\tstandalone: true,\n})\nexport class PhoneNumberFormatPipe implements PipeTransform {\n\ttransform(value: E164Number, format: NumberFormat = 'NATIONAL'): unknown {\n\t\treturn PhoneNumberFormatter.format(value, format);\n\t}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/lucca-front-ng-multi-select.mjs

@@ -258,7 +258,7 @@ class LuMultiSelectPanelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LuMultiSelectPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: LuMultiSelectPanelComponent, isStandalone: true, selector: "lu-select-panel", providers: [CoreSelectKeyManager], viewQueries: [{ propertyName: "optionsQL", predicate: _LuOptionComponent, descendants: true }], ngImport: i0, template: "<div\n\tclass=\"lu-picker-panel lu-option-picker-panel mod-multiple\"\n\trole=\"dialog\"\n\t*ngIf=\"{\n\t\toptions: (options$ | async) || [],\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t} as ctx\"\n>\n\t<div\n\t\tclass=\"lu-picker-content\"\n\t\t[class.is-loading]=\"loading$ | async\"\n\t\t[class.is-filled]=\"ctx.options.length > 0\"\n\t\ttabindex=\"0\"\n\t\trole=\"listbox\"\n\t\taria-multiselectable=\"true\"\n\t\t(scroll)=\"onScroll($event)\"\n\t>\n\t\t<div class=\"lu-picker-content-option\">\n\t\t\t<ng-container *ngIf=\"grouping && ctx.groupTemplateLocation === 'group-header'\">\n\t\t\t\t<div\n\t\t\t\t\t*ngFor=\"let group of ctx.options | luOptionGroup:grouping.selector; trackBy: trackGroupsBy\"\n\t\t\t\t\tclass=\"lu-picker-content-group\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-labelledby]=\"selectId + '-group-' + group.key\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"lu-picker-content-option-group-title\" role=\"presentation\">\n\t\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: group }\" />\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t*ngIf=\"group.options | luNotSelectedOptions:selectedOptions:optionComparer as notSelectedOptions\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\t[id]=\"selectId + '-group-' + group.key\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(notSelectedOptions, group.options)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ notSelectedOptions.length ? intl.selectAll : intl.unselectAll }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: group.options }\" />\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"!grouping || ctx.groupTemplateLocation !== 'group-header'\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t</ng-container>\n\n\t\t\t<ng-template #optionsList let-options>\n\t\t\t\t<lu-select-option\n\t\t\t\t\t*ngFor=\"let option of options; let index = index; trackBy: trackOptionsBy\"\n\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t[optionTpl]=\"optionTpl\"\n\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t[grouping]=\"ctx.groupTemplateLocation === 'option' ? grouping : undefined\"\n\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected:optionComparer:selectedOptions\"\n\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t/>\n\t\t\t</ng-template>\n\t\t\t<div class=\"lu-picker-content-option-emptyState\" *ngIf=\"ctx.options.length === 0 && (loading$ | async) === false\">\n\t\t\t\t{{intl.emptyResults}}\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"loading$ | async\" class=\"lu-picker-content-loading\">\n\t\t\t<div class=\"loading\"></div>\n\t\t\t<span>{{intl.loading}}</span>\n\t\t</div>\n\t\t<div class=\"lu-picker-content-add\" *ngIf=\"ctx.shouldDisplayAddOption\">\n\t\t\t<button class=\"button mod-text mod-icon palette-product\" type=\"button\" (click)=\"selectInput.emitAddOption()\">\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-mathsPlus\"></span>\n\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t</button>\n\t\t</div>\n\t</div>\n</div>\n", styles: [".optionItem-groupKey{padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal) var(--pr-t-spacings-50);font-size:var(--sizes-S-fontSize);line-height:var(--sizes-S-lineHeight);width:100%;text-align:left;color:var(--palettes-neutral-600);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["optionTpl", "isSelected", "option", "grouping", "optionIndex", "scrollIntoViewOptions"] }, { kind: "pipe", type: _LuOptionGroupPipe, name: "luOptionGroup" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "pipe", type: LuNotSelectedOptionsPipe, name: "luNotSelectedOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: LuMultiSelectPanelComponent, isStandalone: true, selector: "lu-select-panel", providers: [CoreSelectKeyManager], viewQueries: [{ propertyName: "optionsQL", predicate: _LuOptionComponent, descendants: true }], ngImport: i0, template: "<div\n\tclass=\"lu-picker-panel lu-option-picker-panel mod-multiple\"\n\trole=\"dialog\"\n\t*ngIf=\"{\n\t\toptions: (options$ | async) || [],\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t} as ctx\"\n>\n\t<div\n\t\tclass=\"lu-picker-content\"\n\t\t[class.is-loading]=\"loading$ | async\"\n\t\t[class.is-filled]=\"ctx.options.length > 0\"\n\t\ttabindex=\"0\"\n\t\trole=\"listbox\"\n\t\taria-multiselectable=\"true\"\n\t\t(scroll)=\"onScroll($event)\"\n\t>\n\t\t<div class=\"lu-picker-content-option\">\n\t\t\t<ng-container *ngIf=\"grouping && ctx.groupTemplateLocation === 'group-header'\">\n\t\t\t\t<div\n\t\t\t\t\t*ngFor=\"let group of ctx.options | luOptionGroup:grouping.selector; trackBy: trackGroupsBy\"\n\t\t\t\t\tclass=\"lu-picker-content-group\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-labelledby]=\"selectId + '-group-' + group.key\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"lu-picker-content-option-group-title\" role=\"presentation\">\n\t\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: group }\" />\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t*ngIf=\"group.options | luNotSelectedOptions:selectedOptions:optionComparer as notSelectedOptions\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\t[id]=\"selectId + '-group-' + group.key\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(notSelectedOptions, group.options)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ notSelectedOptions.length ? intl.selectAll : intl.unselectAll }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: group.options }\" />\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"!grouping || ctx.groupTemplateLocation !== 'group-header'\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t</ng-container>\n\n\t\t\t<ng-template #optionsList let-options>\n\t\t\t\t<lu-select-option\n\t\t\t\t\t*ngFor=\"let option of options; let index = index; trackBy: trackOptionsBy\"\n\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t[optionTpl]=\"optionTpl\"\n\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t[grouping]=\"ctx.groupTemplateLocation === 'option' ? grouping : undefined\"\n\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected:optionComparer:selectedOptions\"\n\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t/>\n\t\t\t</ng-template>\n\t\t\t<div class=\"lu-picker-content-option-emptyState\" *ngIf=\"ctx.options.length === 0 && (loading$ | async) === false\">\n\t\t\t\t{{intl.emptyResults}}\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"loading$ | async\" class=\"lu-picker-content-loading\">\n\t\t\t<div class=\"loading\">{{intl.loading}}</div>\n\t\t</div>\n\t\t<div class=\"lu-picker-content-add\" *ngIf=\"ctx.shouldDisplayAddOption\">\n\t\t\t<button class=\"button mod-text mod-icon palette-product\" type=\"button\" (click)=\"selectInput.emitAddOption()\">\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-mathsPlus\"></span>\n\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t</button>\n\t\t</div>\n\t</div>\n</div>\n", styles: [".optionItem-groupKey{padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal) var(--pr-t-spacings-50);font-size:var(--sizes-S-fontSize);line-height:var(--sizes-S-lineHeight);width:100%;text-align:left;color:var(--palettes-neutral-600);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["optionTpl", "isSelected", "option", "grouping", "optionIndex", "scrollIntoViewOptions"] }, { kind: "pipe", type: _LuOptionGroupPipe, name: "luOptionGroup" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "pipe", type: LuNotSelectedOptionsPipe, name: "luNotSelectedOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LuMultiSelectPanelComponent, decorators: [{
             type: Component,
@@ -276,7 +276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
                         NgTemplateOutlet,
                         PortalDirective,
                         LuNotSelectedOptionsPipe,
-                    ], providers: [CoreSelectKeyManager], template: "<div\n\tclass=\"lu-picker-panel lu-option-picker-panel mod-multiple\"\n\trole=\"dialog\"\n\t*ngIf=\"{\n\t\toptions: (options$ | async) || [],\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t} as ctx\"\n>\n\t<div\n\t\tclass=\"lu-picker-content\"\n\t\t[class.is-loading]=\"loading$ | async\"\n\t\t[class.is-filled]=\"ctx.options.length > 0\"\n\t\ttabindex=\"0\"\n\t\trole=\"listbox\"\n\t\taria-multiselectable=\"true\"\n\t\t(scroll)=\"onScroll($event)\"\n\t>\n\t\t<div class=\"lu-picker-content-option\">\n\t\t\t<ng-container *ngIf=\"grouping && ctx.groupTemplateLocation === 'group-header'\">\n\t\t\t\t<div\n\t\t\t\t\t*ngFor=\"let group of ctx.options | luOptionGroup:grouping.selector; trackBy: trackGroupsBy\"\n\t\t\t\t\tclass=\"lu-picker-content-group\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-labelledby]=\"selectId + '-group-' + group.key\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"lu-picker-content-option-group-title\" role=\"presentation\">\n\t\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: group }\" />\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t*ngIf=\"group.options | luNotSelectedOptions:selectedOptions:optionComparer as notSelectedOptions\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\t[id]=\"selectId + '-group-' + group.key\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(notSelectedOptions, group.options)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ notSelectedOptions.length ? intl.selectAll : intl.unselectAll }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: group.options }\" />\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"!grouping || ctx.groupTemplateLocation !== 'group-header'\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t</ng-container>\n\n\t\t\t<ng-template #optionsList let-options>\n\t\t\t\t<lu-select-option\n\t\t\t\t\t*ngFor=\"let option of options; let index = index; trackBy: trackOptionsBy\"\n\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t[optionTpl]=\"optionTpl\"\n\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t[grouping]=\"ctx.groupTemplateLocation === 'option' ? grouping : undefined\"\n\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected:optionComparer:selectedOptions\"\n\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t/>\n\t\t\t</ng-template>\n\t\t\t<div class=\"lu-picker-content-option-emptyState\" *ngIf=\"ctx.options.length === 0 && (loading$ | async) === false\">\n\t\t\t\t{{intl.emptyResults}}\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"loading$ | async\" class=\"lu-picker-content-loading\">\n\t\t\t<div class=\"loading\"></div>\n\t\t\t<span>{{intl.loading}}</span>\n\t\t</div>\n\t\t<div class=\"lu-picker-content-add\" *ngIf=\"ctx.shouldDisplayAddOption\">\n\t\t\t<button class=\"button mod-text mod-icon palette-product\" type=\"button\" (click)=\"selectInput.emitAddOption()\">\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-mathsPlus\"></span>\n\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t</button>\n\t\t</div>\n\t</div>\n</div>\n", styles: [".optionItem-groupKey{padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal) var(--pr-t-spacings-50);font-size:var(--sizes-S-fontSize);line-height:var(--sizes-S-lineHeight);width:100%;text-align:left;color:var(--palettes-neutral-600);margin:0}\n"] }]
+                    ], providers: [CoreSelectKeyManager], template: "<div\n\tclass=\"lu-picker-panel lu-option-picker-panel mod-multiple\"\n\trole=\"dialog\"\n\t*ngIf=\"{\n\t\toptions: (options$ | async) || [],\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t} as ctx\"\n>\n\t<div\n\t\tclass=\"lu-picker-content\"\n\t\t[class.is-loading]=\"loading$ | async\"\n\t\t[class.is-filled]=\"ctx.options.length > 0\"\n\t\ttabindex=\"0\"\n\t\trole=\"listbox\"\n\t\taria-multiselectable=\"true\"\n\t\t(scroll)=\"onScroll($event)\"\n\t>\n\t\t<div class=\"lu-picker-content-option\">\n\t\t\t<ng-container *ngIf=\"grouping && ctx.groupTemplateLocation === 'group-header'\">\n\t\t\t\t<div\n\t\t\t\t\t*ngFor=\"let group of ctx.options | luOptionGroup:grouping.selector; trackBy: trackGroupsBy\"\n\t\t\t\t\tclass=\"lu-picker-content-group\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-labelledby]=\"selectId + '-group-' + group.key\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"lu-picker-content-option-group-title\" role=\"presentation\">\n\t\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: group }\" />\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t*ngIf=\"group.options | luNotSelectedOptions:selectedOptions:optionComparer as notSelectedOptions\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\t[id]=\"selectId + '-group-' + group.key\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(notSelectedOptions, group.options)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ notSelectedOptions.length ? intl.selectAll : intl.unselectAll }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: group.options }\" />\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"!grouping || ctx.groupTemplateLocation !== 'group-header'\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t</ng-container>\n\n\t\t\t<ng-template #optionsList let-options>\n\t\t\t\t<lu-select-option\n\t\t\t\t\t*ngFor=\"let option of options; let index = index; trackBy: trackOptionsBy\"\n\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t[optionTpl]=\"optionTpl\"\n\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t[grouping]=\"ctx.groupTemplateLocation === 'option' ? grouping : undefined\"\n\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected:optionComparer:selectedOptions\"\n\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t/>\n\t\t\t</ng-template>\n\t\t\t<div class=\"lu-picker-content-option-emptyState\" *ngIf=\"ctx.options.length === 0 && (loading$ | async) === false\">\n\t\t\t\t{{intl.emptyResults}}\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"loading$ | async\" class=\"lu-picker-content-loading\">\n\t\t\t<div class=\"loading\">{{intl.loading}}</div>\n\t\t</div>\n\t\t<div class=\"lu-picker-content-add\" *ngIf=\"ctx.shouldDisplayAddOption\">\n\t\t\t<button class=\"button mod-text mod-icon palette-product\" type=\"button\" (click)=\"selectInput.emitAddOption()\">\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-mathsPlus\"></span>\n\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t</button>\n\t\t</div>\n\t</div>\n</div>\n", styles: [".optionItem-groupKey{padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal) var(--pr-t-spacings-50);font-size:var(--sizes-S-fontSize);line-height:var(--sizes-S-lineHeight);width:100%;text-align:left;color:var(--palettes-neutral-600);margin:0}\n"] }]
         }], propDecorators: { optionsQL: [{
                 type: ViewChildren,
                 args: [_LuOptionComponent]
@@ -459,7 +459,7 @@ class LuMultiSelectInputComponent extends ALuSelectInputComponent {
             provideLuSelectOverlayContainer(),
             provideLuSelectLabelsAndIds(),
             LuMultiSelectPanelRefFactory,
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container *luOptionOutlet=\"valuesTpl; value: value || []\"></ng-container>\n\n<button\n\t*ngIf=\"hasValue && clearable && (disabled$ | async) === false\"\n\trole=\"button\"\n\ttype=\"button\"\n\tclass=\"multipleSelect-clear clear\"\n\t(click)=\"clearValue($event)\"\n>\n\t<span class=\"u-mask\">{{intl.clear}}</span>\n</button>\n<span aria-hidden=\"true\" class=\"multipleSelect-arrow lucca-icon icon-arrowChevronBottom\"></span>\n", styles: [".multiSelect{--components-multiSelect-fontSize: var(--sizes-M-fontSize);--components-multiSelect-lineHeight: var(--sizes-M-lineHeight);--components-multiSelect-padding: var(--pr-t-spacings-100);--components-multiSelect-gap: var(--pr-t-spacings-100);--components-multiSelect-background: var(--palettes-neutral-0);--components-multiSelect-border-color: var(--palettes-neutral-300);--components-multiSelect-placeholder: var(--palettes-neutral-400);--components-multiSelect-arrow-color: var(--palettes-neutral-600);display:flex;box-shadow:0 0 0 1px var(--components-multiSelect-border-color);background-color:var(--components-multiSelect-background);border-radius:var(--commons-borderRadius-M);padding:var(--components-multiSelect-padding);align-items:flex-end;gap:var(--components-multiSelect-gap);cursor:pointer}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-chip{min-width:0}.multipleSelect-displayer-chip-value{max-width:8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multipleSelect-displayer-search{display:block;min-width:2rem;width:auto;flex:1;order:1;border:0;padding:0;outline:none;color:var(--palettes-neutral-800);font-size:var(--components-multiSelect-fontSize);line-height:var(--components-multiSelect-lineHeight);background-color:transparent;cursor:pointer}.multipleSelect-displayer-search::placeholder{color:var(--components-multiSelect-placeholder)}.multipleSelect-displayer-label{font-size:var(--components-multiSelect-fontSize);line-height:var(--components-multiSelect-lineHeight)}.multipleSelect-clear{margin-bottom:var(--pr-t-spacings-50)}.multipleSelect-arrow{--icon-size: 1.5rem;color:var(--components-multiSelect-arrow-color)}.multiSelect.mod-S{--components-multiSelect-fontSize: var(--sizes-S-fontSize);--components-multiSelect-lineHeight: var(--sizes-S-lineHeight);--components-multiSelect-padding: var(--pr-t-spacings-75);--components-multiSelect-gap: var(--pr-t-spacings-75)}.multiSelect.mod-S .multipleSelect-arrow{--icon-size: 1.25rem}.multiSelect.mod-S .multipleSelect-clear.clear,.multiSelect.mod-S .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.multiSelect.mod-S .multipleSelect-displayer-chip.chip,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip){--components-chip-fontSize: var(--sizes-XS-fontSize);--components-chip-lineHeight: var(--sizes-XS-lineHeight)}.multiSelect.mod-S .multipleSelect-displayer-numericBadge.numericBadge,.multiSelect.mod-S .multipleSelect-displayer-numericBadge:not(.numericBadge){--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: 6px;--components-numericBadge-fontSize: var(--sizes-XS-fontSize);--components-numericBadge-lineHeight: var(--sizes-XS-lineHeight)}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:3px}.multiSelect:has(.multipleSelect-displayer-search[aria-invalid=true]){--components-multiSelect-border-color: var(--palettes-error-400);--components-multiSelect-background: var(--palettes-error-50);--components-multiSelect-placeholder: var(--palettes-error-400)}.multiSelect:has(.multipleSelect-displayer-search:disabled){--components-multiSelect-border-color: var(--palettes-neutral-300);--components-multiSelect-background: var(--commons-disabled-background);--components-multiSelect-placeholder: var(--commons-disabled-placeholder);--components-multiSelect-arrow-color: var(--palettes-neutral-500);pointer-events:none}.multipleSelect-displayer.mod-filter{display:grid}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-filter{grid-column-start:1;grid-row-start:1;display:flex;gap:var(--pr-t-spacings-50);min-width:0}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-search{grid-column-start:1;grid-row-start:1}.multipleSelect-displayer.mod-filter.is-filled .multipleSelect-displayer-search{opacity:0}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-filter{display:none}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-search{opacity:1}.clear{--components-clear-size: 1rem;--components-clear-background: var(--palettes-neutral-700);--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;width:100%;background-color:transparent;color:inherit;text-align:left;display:block;font:inherit;cursor:pointer;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;width:var(--components-clear-size);height:var(--components-clear-size);border-radius:var(--commons-borderRadius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--commons-borderRadius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-neutral-600)}.clear:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-neutral-800)}.clear .lucca-icon{display:none}.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.palette-product:not([disabled]),.clear.palette-primary:not([disabled]){--components-clear-cross-color: var(--palettes-product-700);--components-clear-background: var(--palettes-neutral-0)}.clear.palette-product:not([disabled]):hover,.clear.palette-primary:not([disabled]):hover{--components-clear-background: var(--palettes-product-50)}.clear.palette-product:not([disabled]):active,.clear.palette-primary:not([disabled]):active{--components-clear-background: var(--palettes-product-50)}.clear[disabled]{--components-clear-cross-color: var(--palettes-neutral-500);--components-clear-background: var(--palettes-neutral-300);cursor:default}.chip{--components-chip-fontSize: var(--sizes-S-fontSize);--components-chip-lineHeight: var(--sizes-S-lineHeight);--components-chip-kill-size: .75rem;--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");background-color:var(--palettes-700, var(--palettes-neutral-200));border-radius:var(--commons-borderRadius-M);color:var(--palettes-0, var(--palettes-text, var(--palettes-neutral-800)));display:inline-flex;align-items:center;gap:var(--pr-t-spacings-100);position:relative;vertical-align:middle;padding:calc(var(--pr-t-spacings-50) / 2) var(--pr-t-spacings-100);font-size:var(--components-chip-fontSize);line-height:var(--components-chip-lineHeight)}.chip-kill{padding:0;border:0;width:100%;background-color:transparent;color:inherit;text-align:left;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;width:var(--pr-t-spacings-300);height:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;width:var(--components-chip-kill-size);height:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--commons-borderRadius-full);background-color:var(--components-chip-kill-disk-color, var(--palettes-neutral-700))}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color, var(--palettes-neutral-0))}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-neutral-600);--components-chip-kill-cross-color: var(--palettes-700, var(--palettes-neutral-0))}.chip-kill:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:-4px;border-radius:var(--commons-borderRadius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-50, var(--palettes-neutral-800))}.chip.mod-S{--components-chip-fontSize: var(--sizes-XS-fontSize);--components-chip-lineHeight: var(--sizes-XS-lineHeight)}.chip.palette-product .chip-kill,.chip.palette-primary .chip-kill{--components-chip-kill-cross-color: var(--palettes-product-700);--components-chip-kill-disk-color: var(--palettes-neutral-0)}.chip.palette-product .chip-kill:hover,.chip.palette-primary .chip-kill:hover,.chip.palette-product .chip-kill:active,.chip.palette-primary .chip-kill:active{--components-chip-kill-disk-color: var(--palettes-product-50)}.chip.palette-product .chip-kill:focus-visible,.chip.palette-primary .chip-kill:focus-visible{outline:2px solid var(--palettes-neutral-0);outline-offset:-4px;border-radius:var(--commons-borderRadius-full)}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.mod-clickable:hover{background-color:var(--palettes-600, var(--palettes-neutral-100))}.chip.is-disabled{background-color:var(--commons-disabled-background);color:var(--palettes-neutral-500)}.chip.is-disabled .chip-kill{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container *luOptionOutlet=\"valuesTpl; value: value || []\"></ng-container>\n\n<button\n\t*ngIf=\"hasValue && clearable && (disabled$ | async) === false\"\n\trole=\"button\"\n\ttype=\"button\"\n\tclass=\"multipleSelect-clear clear\"\n\t(click)=\"clearValue($event)\"\n>\n\t<span class=\"u-mask\">{{intl.clear}}</span>\n</button>\n<span aria-hidden=\"true\" class=\"multipleSelect-arrow lucca-icon icon-arrowChevronBottom\"></span>\n", styles: [".multiSelect{--components-multiSelect-fontSize: var(--sizes-M-fontSize);--components-multiSelect-lineHeight: var(--sizes-M-lineHeight);--components-multiSelect-padding: var(--pr-t-spacings-100);--components-multiSelect-gap: var(--pr-t-spacings-100);--components-multiSelect-background: var(--palettes-neutral-0);--components-multiSelect-border-color: var(--palettes-neutral-300);--components-multiSelect-placeholder: var(--palettes-neutral-400);--components-multiSelect-arrow-color: var(--palettes-neutral-600);display:flex;box-shadow:0 0 0 1px var(--components-multiSelect-border-color);background-color:var(--components-multiSelect-background);border-radius:var(--commons-borderRadius-M);padding:var(--components-multiSelect-padding);align-items:flex-end;gap:var(--components-multiSelect-gap);cursor:pointer}.multiSelect:hover{--components-multiSelect-border-color: var(--palettes-neutral-400)}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-chip{min-width:0}.multipleSelect-displayer-chip-value{max-width:8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multipleSelect-displayer-search{display:block;min-width:2rem;width:auto;flex:1;order:1;border:0;padding:0;outline:none;color:var(--palettes-neutral-800);font-size:var(--components-multiSelect-fontSize);line-height:var(--components-multiSelect-lineHeight);background-color:transparent;cursor:pointer}.multipleSelect-displayer-search::placeholder{color:var(--components-multiSelect-placeholder)}.multipleSelect-displayer-label{font-size:var(--components-multiSelect-fontSize);line-height:var(--components-multiSelect-lineHeight)}.multipleSelect-clear{margin-bottom:var(--pr-t-spacings-50)}.multipleSelect-arrow{--icon-size: 1.5rem;color:var(--components-multiSelect-arrow-color);transition-property:transform;transition-duration:var(--commons-animations-durations-standard)}.multiSelect.mod-S{--components-multiSelect-fontSize: var(--sizes-S-fontSize);--components-multiSelect-lineHeight: var(--sizes-S-lineHeight);--components-multiSelect-padding: var(--pr-t-spacings-75);--components-multiSelect-gap: var(--pr-t-spacings-75)}.multiSelect.mod-S .multipleSelect-arrow{--icon-size: 1.25rem}.multiSelect.mod-S .multipleSelect-clear.clear,.multiSelect.mod-S .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.multiSelect.mod-S .multipleSelect-displayer-chip.chip,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip){--components-chip-fontSize: var(--sizes-XS-fontSize);--components-chip-lineHeight: var(--sizes-XS-lineHeight)}.multiSelect.mod-S .multipleSelect-displayer-numericBadge.numericBadge,.multiSelect.mod-S .multipleSelect-displayer-numericBadge:not(.numericBadge){--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: 6px;--components-numericBadge-fontSize: var(--sizes-XS-fontSize);--components-numericBadge-lineHeight: var(--sizes-XS-lineHeight)}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:3px}.multiSelect:has(.multipleSelect-displayer-search[aria-invalid=true]){--components-multiSelect-border-color: var(--palettes-error-400);--components-multiSelect-background: var(--palettes-error-50);--components-multiSelect-placeholder: var(--palettes-error-400)}.multiSelect:has(.multipleSelect-displayer-search:disabled){--components-multiSelect-border-color: var(--palettes-neutral-300);--components-multiSelect-background: var(--commons-disabled-background);--components-multiSelect-placeholder: var(--commons-disabled-placeholder);--components-multiSelect-arrow-color: var(--palettes-neutral-500);pointer-events:none}.multiSelect:has([aria-expanded=true]) .multipleSelect-arrow{transform:rotate(-180deg)}.multipleSelect-displayer.mod-filter{display:grid}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-filter{grid-column-start:1;grid-row-start:1;display:flex;gap:var(--pr-t-spacings-50);min-width:0}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-search{grid-column-start:1;grid-row-start:1}.multipleSelect-displayer.mod-filter.is-filled .multipleSelect-displayer-search{opacity:0}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-filter{display:none}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-search{opacity:1}.clear{--components-clear-size: 1rem;--components-clear-background: var(--palettes-neutral-700);--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;width:100%;background-color:transparent;color:inherit;text-align:left;display:block;font:inherit;cursor:pointer;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;width:var(--components-clear-size);height:var(--components-clear-size);border-radius:var(--commons-borderRadius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--commons-borderRadius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-neutral-600)}.clear:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-neutral-800)}.clear .lucca-icon{display:none}.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.palette-product:not([disabled]),.clear.palette-primary:not([disabled]){--components-clear-cross-color: var(--palettes-product-700);--components-clear-background: var(--palettes-neutral-0)}.clear.palette-product:not([disabled]):hover,.clear.palette-primary:not([disabled]):hover{--components-clear-background: var(--palettes-product-50)}.clear.palette-product:not([disabled]):active,.clear.palette-primary:not([disabled]):active{--components-clear-background: var(--palettes-product-50)}.clear[disabled]{--components-clear-cross-color: var(--palettes-neutral-500);--components-clear-background: var(--palettes-neutral-300);cursor:default}.chip{--components-chip-fontSize: var(--sizes-S-fontSize);--components-chip-lineHeight: var(--sizes-S-lineHeight);--components-chip-kill-size: .75rem;--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");background-color:var(--palettes-700, var(--palettes-neutral-200));border-radius:var(--commons-borderRadius-M);color:var(--palettes-0, var(--palettes-text, var(--palettes-neutral-800)));display:inline-flex;align-items:center;gap:var(--pr-t-spacings-100);position:relative;vertical-align:middle;padding:calc(var(--pr-t-spacings-50) / 2) var(--pr-t-spacings-100);font-size:var(--components-chip-fontSize);line-height:var(--components-chip-lineHeight)}.chip-kill{padding:0;border:0;width:100%;background-color:transparent;color:inherit;text-align:left;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;width:var(--pr-t-spacings-300);height:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;width:var(--components-chip-kill-size);height:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--commons-borderRadius-full);background-color:var(--components-chip-kill-disk-color, var(--palettes-neutral-700))}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color, var(--palettes-neutral-0))}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-neutral-600);--components-chip-kill-cross-color: var(--palettes-700, var(--palettes-neutral-0))}.chip-kill:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:-4px;border-radius:var(--commons-borderRadius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-50, var(--palettes-neutral-800))}.chip.mod-S{--components-chip-fontSize: var(--sizes-XS-fontSize);--components-chip-lineHeight: var(--sizes-XS-lineHeight)}.chip.palette-product .chip-kill,.chip.palette-primary .chip-kill{--components-chip-kill-cross-color: var(--palettes-product-700);--components-chip-kill-disk-color: var(--palettes-neutral-0)}.chip.palette-product .chip-kill:hover,.chip.palette-primary .chip-kill:hover,.chip.palette-product .chip-kill:active,.chip.palette-primary .chip-kill:active{--components-chip-kill-disk-color: var(--palettes-product-50)}.chip.palette-product .chip-kill:focus-visible,.chip.palette-primary .chip-kill:focus-visible{outline:2px solid var(--palettes-neutral-0);outline-offset:-4px;border-radius:var(--commons-borderRadius-full)}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.mod-clickable:hover{background-color:var(--palettes-600, var(--palettes-neutral-100))}.chip.is-disabled{background-color:var(--commons-disabled-background);color:var(--palettes-neutral-500)}.chip.is-disabled .chip-kill{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LuMultiSelectInputComponent, decorators: [{
             type: Component,
@@ -478,7 +478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
                         LuMultiSelectPanelRefFactory,
                     ], host: {
                         class: 'multiSelect',
-                    }, encapsulation: ViewEncapsulation.None, template: "<ng-container *luOptionOutlet=\"valuesTpl; value: value || []\"></ng-container>\n\n<button\n\t*ngIf=\"hasValue && clearable && (disabled$ | async) === false\"\n\trole=\"button\"\n\ttype=\"button\"\n\tclass=\"multipleSelect-clear clear\"\n\t(click)=\"clearValue($event)\"\n>\n\t<span class=\"u-mask\">{{intl.clear}}</span>\n</button>\n<span aria-hidden=\"true\" class=\"multipleSelect-arrow lucca-icon icon-arrowChevronBottom\"></span>\n", styles: [".multiSelect{--components-multiSelect-fontSize: var(--sizes-M-fontSize);--components-multiSelect-lineHeight: var(--sizes-M-lineHeight);--components-multiSelect-padding: var(--pr-t-spacings-100);--components-multiSelect-gap: var(--pr-t-spacings-100);--components-multiSelect-background: var(--palettes-neutral-0);--components-multiSelect-border-color: var(--palettes-neutral-300);--components-multiSelect-placeholder: var(--palettes-neutral-400);--components-multiSelect-arrow-color: var(--palettes-neutral-600);display:flex;box-shadow:0 0 0 1px var(--components-multiSelect-border-color);background-color:var(--components-multiSelect-background);border-radius:var(--commons-borderRadius-M);padding:var(--components-multiSelect-padding);align-items:flex-end;gap:var(--components-multiSelect-gap);cursor:pointer}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-chip{min-width:0}.multipleSelect-displayer-chip-value{max-width:8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multipleSelect-displayer-search{display:block;min-width:2rem;width:auto;flex:1;order:1;border:0;padding:0;outline:none;color:var(--palettes-neutral-800);font-size:var(--components-multiSelect-fontSize);line-height:var(--components-multiSelect-lineHeight);background-color:transparent;cursor:pointer}.multipleSelect-displayer-search::placeholder{color:var(--components-multiSelect-placeholder)}.multipleSelect-displayer-label{font-size:var(--components-multiSelect-fontSize);line-height:var(--components-multiSelect-lineHeight)}.multipleSelect-clear{margin-bottom:var(--pr-t-spacings-50)}.multipleSelect-arrow{--icon-size: 1.5rem;color:var(--components-multiSelect-arrow-color)}.multiSelect.mod-S{--components-multiSelect-fontSize: var(--sizes-S-fontSize);--components-multiSelect-lineHeight: var(--sizes-S-lineHeight);--components-multiSelect-padding: var(--pr-t-spacings-75);--components-multiSelect-gap: var(--pr-t-spacings-75)}.multiSelect.mod-S .multipleSelect-arrow{--icon-size: 1.25rem}.multiSelect.mod-S .multipleSelect-clear.clear,.multiSelect.mod-S .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.multiSelect.mod-S .multipleSelect-displayer-chip.chip,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip){--components-chip-fontSize: var(--sizes-XS-fontSize);--components-chip-lineHeight: var(--sizes-XS-lineHeight)}.multiSelect.mod-S .multipleSelect-displayer-numericBadge.numericBadge,.multiSelect.mod-S .multipleSelect-displayer-numericBadge:not(.numericBadge){--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: 6px;--components-numericBadge-fontSize: var(--sizes-XS-fontSize);--components-numericBadge-lineHeight: var(--sizes-XS-lineHeight)}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:3px}.multiSelect:has(.multipleSelect-displayer-search[aria-invalid=true]){--components-multiSelect-border-color: var(--palettes-error-400);--components-multiSelect-background: var(--palettes-error-50);--components-multiSelect-placeholder: var(--palettes-error-400)}.multiSelect:has(.multipleSelect-displayer-search:disabled){--components-multiSelect-border-color: var(--palettes-neutral-300);--components-multiSelect-background: var(--commons-disabled-background);--components-multiSelect-placeholder: var(--commons-disabled-placeholder);--components-multiSelect-arrow-color: var(--palettes-neutral-500);pointer-events:none}.multipleSelect-displayer.mod-filter{display:grid}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-filter{grid-column-start:1;grid-row-start:1;display:flex;gap:var(--pr-t-spacings-50);min-width:0}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-search{grid-column-start:1;grid-row-start:1}.multipleSelect-displayer.mod-filter.is-filled .multipleSelect-displayer-search{opacity:0}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-filter{display:none}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-search{opacity:1}.clear{--components-clear-size: 1rem;--components-clear-background: var(--palettes-neutral-700);--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;width:100%;background-color:transparent;color:inherit;text-align:left;display:block;font:inherit;cursor:pointer;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;width:var(--components-clear-size);height:var(--components-clear-size);border-radius:var(--commons-borderRadius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--commons-borderRadius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-neutral-600)}.clear:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-neutral-800)}.clear .lucca-icon{display:none}.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.palette-product:not([disabled]),.clear.palette-primary:not([disabled]){--components-clear-cross-color: var(--palettes-product-700);--components-clear-background: var(--palettes-neutral-0)}.clear.palette-product:not([disabled]):hover,.clear.palette-primary:not([disabled]):hover{--components-clear-background: var(--palettes-product-50)}.clear.palette-product:not([disabled]):active,.clear.palette-primary:not([disabled]):active{--components-clear-background: var(--palettes-product-50)}.clear[disabled]{--components-clear-cross-color: var(--palettes-neutral-500);--components-clear-background: var(--palettes-neutral-300);cursor:default}.chip{--components-chip-fontSize: var(--sizes-S-fontSize);--components-chip-lineHeight: var(--sizes-S-lineHeight);--components-chip-kill-size: .75rem;--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");background-color:var(--palettes-700, var(--palettes-neutral-200));border-radius:var(--commons-borderRadius-M);color:var(--palettes-0, var(--palettes-text, var(--palettes-neutral-800)));display:inline-flex;align-items:center;gap:var(--pr-t-spacings-100);position:relative;vertical-align:middle;padding:calc(var(--pr-t-spacings-50) / 2) var(--pr-t-spacings-100);font-size:var(--components-chip-fontSize);line-height:var(--components-chip-lineHeight)}.chip-kill{padding:0;border:0;width:100%;background-color:transparent;color:inherit;text-align:left;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;width:var(--pr-t-spacings-300);height:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;width:var(--components-chip-kill-size);height:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--commons-borderRadius-full);background-color:var(--components-chip-kill-disk-color, var(--palettes-neutral-700))}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color, var(--palettes-neutral-0))}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-neutral-600);--components-chip-kill-cross-color: var(--palettes-700, var(--palettes-neutral-0))}.chip-kill:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:-4px;border-radius:var(--commons-borderRadius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-50, var(--palettes-neutral-800))}.chip.mod-S{--components-chip-fontSize: var(--sizes-XS-fontSize);--components-chip-lineHeight: var(--sizes-XS-lineHeight)}.chip.palette-product .chip-kill,.chip.palette-primary .chip-kill{--components-chip-kill-cross-color: var(--palettes-product-700);--components-chip-kill-disk-color: var(--palettes-neutral-0)}.chip.palette-product .chip-kill:hover,.chip.palette-primary .chip-kill:hover,.chip.palette-product .chip-kill:active,.chip.palette-primary .chip-kill:active{--components-chip-kill-disk-color: var(--palettes-product-50)}.chip.palette-product .chip-kill:focus-visible,.chip.palette-primary .chip-kill:focus-visible{outline:2px solid var(--palettes-neutral-0);outline-offset:-4px;border-radius:var(--commons-borderRadius-full)}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.mod-clickable:hover{background-color:var(--palettes-600, var(--palettes-neutral-100))}.chip.is-disabled{background-color:var(--commons-disabled-background);color:var(--palettes-neutral-500)}.chip.is-disabled .chip-kill{display:none}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, template: "<ng-container *luOptionOutlet=\"valuesTpl; value: value || []\"></ng-container>\n\n<button\n\t*ngIf=\"hasValue && clearable && (disabled$ | async) === false\"\n\trole=\"button\"\n\ttype=\"button\"\n\tclass=\"multipleSelect-clear clear\"\n\t(click)=\"clearValue($event)\"\n>\n\t<span class=\"u-mask\">{{intl.clear}}</span>\n</button>\n<span aria-hidden=\"true\" class=\"multipleSelect-arrow lucca-icon icon-arrowChevronBottom\"></span>\n", styles: [".multiSelect{--components-multiSelect-fontSize: var(--sizes-M-fontSize);--components-multiSelect-lineHeight: var(--sizes-M-lineHeight);--components-multiSelect-padding: var(--pr-t-spacings-100);--components-multiSelect-gap: var(--pr-t-spacings-100);--components-multiSelect-background: var(--palettes-neutral-0);--components-multiSelect-border-color: var(--palettes-neutral-300);--components-multiSelect-placeholder: var(--palettes-neutral-400);--components-multiSelect-arrow-color: var(--palettes-neutral-600);display:flex;box-shadow:0 0 0 1px var(--components-multiSelect-border-color);background-color:var(--components-multiSelect-background);border-radius:var(--commons-borderRadius-M);padding:var(--components-multiSelect-padding);align-items:flex-end;gap:var(--components-multiSelect-gap);cursor:pointer}.multiSelect:hover{--components-multiSelect-border-color: var(--palettes-neutral-400)}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-chip{min-width:0}.multipleSelect-displayer-chip-value{max-width:8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multipleSelect-displayer-search{display:block;min-width:2rem;width:auto;flex:1;order:1;border:0;padding:0;outline:none;color:var(--palettes-neutral-800);font-size:var(--components-multiSelect-fontSize);line-height:var(--components-multiSelect-lineHeight);background-color:transparent;cursor:pointer}.multipleSelect-displayer-search::placeholder{color:var(--components-multiSelect-placeholder)}.multipleSelect-displayer-label{font-size:var(--components-multiSelect-fontSize);line-height:var(--components-multiSelect-lineHeight)}.multipleSelect-clear{margin-bottom:var(--pr-t-spacings-50)}.multipleSelect-arrow{--icon-size: 1.5rem;color:var(--components-multiSelect-arrow-color);transition-property:transform;transition-duration:var(--commons-animations-durations-standard)}.multiSelect.mod-S{--components-multiSelect-fontSize: var(--sizes-S-fontSize);--components-multiSelect-lineHeight: var(--sizes-S-lineHeight);--components-multiSelect-padding: var(--pr-t-spacings-75);--components-multiSelect-gap: var(--pr-t-spacings-75)}.multiSelect.mod-S .multipleSelect-arrow{--icon-size: 1.25rem}.multiSelect.mod-S .multipleSelect-clear.clear,.multiSelect.mod-S .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.multiSelect.mod-S .multipleSelect-displayer-chip.chip,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip){--components-chip-fontSize: var(--sizes-XS-fontSize);--components-chip-lineHeight: var(--sizes-XS-lineHeight)}.multiSelect.mod-S .multipleSelect-displayer-numericBadge.numericBadge,.multiSelect.mod-S .multipleSelect-displayer-numericBadge:not(.numericBadge){--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: 6px;--components-numericBadge-fontSize: var(--sizes-XS-fontSize);--components-numericBadge-lineHeight: var(--sizes-XS-lineHeight)}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:3px}.multiSelect:has(.multipleSelect-displayer-search[aria-invalid=true]){--components-multiSelect-border-color: var(--palettes-error-400);--components-multiSelect-background: var(--palettes-error-50);--components-multiSelect-placeholder: var(--palettes-error-400)}.multiSelect:has(.multipleSelect-displayer-search:disabled){--components-multiSelect-border-color: var(--palettes-neutral-300);--components-multiSelect-background: var(--commons-disabled-background);--components-multiSelect-placeholder: var(--commons-disabled-placeholder);--components-multiSelect-arrow-color: var(--palettes-neutral-500);pointer-events:none}.multiSelect:has([aria-expanded=true]) .multipleSelect-arrow{transform:rotate(-180deg)}.multipleSelect-displayer.mod-filter{display:grid}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-filter{grid-column-start:1;grid-row-start:1;display:flex;gap:var(--pr-t-spacings-50);min-width:0}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-search{grid-column-start:1;grid-row-start:1}.multipleSelect-displayer.mod-filter.is-filled .multipleSelect-displayer-search{opacity:0}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-filter{display:none}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-search{opacity:1}.clear{--components-clear-size: 1rem;--components-clear-background: var(--palettes-neutral-700);--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;width:100%;background-color:transparent;color:inherit;text-align:left;display:block;font:inherit;cursor:pointer;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;width:var(--components-clear-size);height:var(--components-clear-size);border-radius:var(--commons-borderRadius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--commons-borderRadius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-neutral-600)}.clear:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-neutral-800)}.clear .lucca-icon{display:none}.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.palette-product:not([disabled]),.clear.palette-primary:not([disabled]){--components-clear-cross-color: var(--palettes-product-700);--components-clear-background: var(--palettes-neutral-0)}.clear.palette-product:not([disabled]):hover,.clear.palette-primary:not([disabled]):hover{--components-clear-background: var(--palettes-product-50)}.clear.palette-product:not([disabled]):active,.clear.palette-primary:not([disabled]):active{--components-clear-background: var(--palettes-product-50)}.clear[disabled]{--components-clear-cross-color: var(--palettes-neutral-500);--components-clear-background: var(--palettes-neutral-300);cursor:default}.chip{--components-chip-fontSize: var(--sizes-S-fontSize);--components-chip-lineHeight: var(--sizes-S-lineHeight);--components-chip-kill-size: .75rem;--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");background-color:var(--palettes-700, var(--palettes-neutral-200));border-radius:var(--commons-borderRadius-M);color:var(--palettes-0, var(--palettes-text, var(--palettes-neutral-800)));display:inline-flex;align-items:center;gap:var(--pr-t-spacings-100);position:relative;vertical-align:middle;padding:calc(var(--pr-t-spacings-50) / 2) var(--pr-t-spacings-100);font-size:var(--components-chip-fontSize);line-height:var(--components-chip-lineHeight)}.chip-kill{padding:0;border:0;width:100%;background-color:transparent;color:inherit;text-align:left;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;width:var(--pr-t-spacings-300);height:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;width:var(--components-chip-kill-size);height:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--commons-borderRadius-full);background-color:var(--components-chip-kill-disk-color, var(--palettes-neutral-700))}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color, var(--palettes-neutral-0))}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-neutral-600);--components-chip-kill-cross-color: var(--palettes-700, var(--palettes-neutral-0))}.chip-kill:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:-4px;border-radius:var(--commons-borderRadius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-50, var(--palettes-neutral-800))}.chip.mod-S{--components-chip-fontSize: var(--sizes-XS-fontSize);--components-chip-lineHeight: var(--sizes-XS-lineHeight)}.chip.palette-product .chip-kill,.chip.palette-primary .chip-kill{--components-chip-kill-cross-color: var(--palettes-product-700);--components-chip-kill-disk-color: var(--palettes-neutral-0)}.chip.palette-product .chip-kill:hover,.chip.palette-primary .chip-kill:hover,.chip.palette-product .chip-kill:active,.chip.palette-primary .chip-kill:active{--components-chip-kill-disk-color: var(--palettes-product-50)}.chip.palette-product .chip-kill:focus-visible,.chip.palette-primary .chip-kill:focus-visible{outline:2px solid var(--palettes-neutral-0);outline-offset:-4px;border-radius:var(--commons-borderRadius-full)}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.mod-clickable:hover{background-color:var(--palettes-600, var(--palettes-neutral-100))}.chip.is-disabled{background-color:var(--commons-disabled-background);color:var(--palettes-neutral-500)}.chip.is-disabled .chip-kill{display:none}\n"] }]
         }], propDecorators: { valuesTpl: [{
                 type: Input
             }], maxValuesShown: [{
@@ -737,7 +737,7 @@ class LuMultiSelectDefaultDisplayerComponent {
 			</div>
 			<div class="multipleSelect-displayer-chip chip" *ngIf="overflowOptions$ | async as overflow">+ {{ overflow }}</div>
 		</div>
-	`, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+	`, isInline: true, styles: [":host{display:block;width:100%;min-width:0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LuMultiSelectDefaultDisplayerComponent, decorators: [{
             type: Component,
@@ -768,7 +768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
 			</div>
 			<div class="multipleSelect-displayer-chip chip" *ngIf="overflowOptions$ | async as overflow">+ {{ overflow }}</div>
 		</div>
-	`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}\n"] }]
+	`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;min-width:0}\n"] }]
         }], propDecorators: { inputElementRef: [{
                 type: ViewChild,
                 args: ['inputElement']