@lucca-front/ng 18.2.3 → 18.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/form-field/form-field.component.mjs +2 -2
- package/esm2022/forms/multilanguage-input/multilanguage-input.component.mjs +1 -1
- package/esm2022/forms/number-format-input/number-format-input.component.mjs +9 -5
- package/esm2022/forms/radio-group-input/radio/radio.component.mjs +3 -3
- package/esm2022/forms/text-input/text-input.component.mjs +3 -3
- package/esm2022/icon/icon.component.mjs +3 -3
- package/esm2022/inline-message/inline-message.component.mjs +4 -4
- package/esm2022/modal/modal-panel.component.mjs +3 -3
- package/esm2022/option/item/tree-option-item.component.mjs +1 -1
- package/esm2022/option/selector/all/select-all.component.mjs +4 -1
- package/esm2022/option/selector/all/tree-select-all.component.mjs +4 -1
- package/esm2022/skeleton/skeleton-header/skeleton-header.component.mjs +2 -2
- package/esm2022/time/duration-picker/duration-picker.component.mjs +197 -0
- package/esm2022/time/duration-picker/duration-picker.model.mjs +2 -0
- package/esm2022/time/public-api.mjs +2 -1
- package/esm2022/tooltip/trigger/tooltip-trigger.directive.mjs +5 -4
- package/esm2022/user/display/user-display.pipe.mjs +2 -2
- package/fesm2022/lucca-front-ng-form-field.mjs +1 -1
- package/fesm2022/lucca-front-ng-form-field.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms.mjs +13 -9
- package/fesm2022/lucca-front-ng-forms.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-icon.mjs +2 -2
- package/fesm2022/lucca-front-ng-icon.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-inline-message.mjs +3 -3
- package/fesm2022/lucca-front-ng-inline-message.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-modal.mjs +2 -2
- package/fesm2022/lucca-front-ng-modal.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-option.mjs +7 -1
- package/fesm2022/lucca-front-ng-option.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-skeleton.mjs +2 -2
- package/fesm2022/lucca-front-ng-skeleton.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-time.mjs +292 -105
- package/fesm2022/lucca-front-ng-time.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-tooltip.mjs +2 -1
- package/fesm2022/lucca-front-ng-tooltip.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-user.mjs +1 -1
- package/fesm2022/lucca-front-ng-user.mjs.map +1 -1
- package/form-field/form-field.component.d.ts +2 -2
- package/forms/number-format-input/number-format-input.component.d.ts +3 -3
- package/package.json +19 -19
- package/time/duration-picker/duration-picker.component.d.ts +42 -0
- package/time/duration-picker/duration-picker.model.d.ts +12 -0
- package/time/public-api.d.ts +1 -0
- package/tooltip/trigger/tooltip-trigger.directive.d.ts +1 -1
|
@@ -218,7 +218,7 @@ class FormFieldComponent {
|
|
|
218
218
|
provide: FORM_FIELD_INSTANCE,
|
|
219
219
|
useExisting: forwardRef(() => FormFieldComponent),
|
|
220
220
|
},
|
|
221
|
-
], queries: [{ propertyName: "validators", predicate: NG_VALIDATORS, descendants: true }, { propertyName: "controls", predicate: NgControl, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@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", styles: [".textField{--component-textField-lineHeight: var(--size-M-lightHeight);--component-textField-fontSize: var(--size-M-fontSize);--component-textField-placeholder: var(--palettes-neutral-400);--component-textField-background: var(--palettes-neutral-0);--component-textField-border: var(--palettes-neutral-300);--component-textField-color: var(--palettes-neutral-800);--component-textField-prefix-color: var(--palettes-neutral-600);--component-textField-padding: var(--pr-t-spacings-100);--component-textField-affix-padding: var(--component-textField-padding);--component-textField-affix-size: 1.75rem;display:flex;align-items:stretch;border-radius:var(--commons-borderRadius-M);background-color:var(--component-textField-background);box-shadow:0 0 0 1px var(--component-textField-border)}.textField:hover{--component-textField-border: var(--palettes-neutral-400)}.textField:has(.textField-input-value:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:3px}.textField .textField-input-affix-toggle{pointer-events:auto;width:var(--component-textField-affix-size);height:var(--component-textField-affix-size);color:var(--palettes-neutral-600)}.textField-input{display:flex;align-items:center;width:100%;border-radius:var(--commons-borderRadius-M);background-color:var(--component-textField-background);position:relative}.textField-input:has(.textField-input-affix-icon){--component-textField-affix-padding: 2.5rem}.textField-input:has(.textField-input-affix-toggle){--component-textField-affix-padding: 3rem}.textField-input:has(.textField-input-affix-clear){--component-textField-affix-padding: 2rem}.textField-input:has(.textField-input-affix-clear):has(.textField-input-affix-icon){--component-textField-affix-padding: 4rem}.textField-input:has(.textField-input-affix-clear):has(.textField-input-affix-toggle){--component-textField-affix-padding: 4.5rem}.textField-input-value{border:0;outline:0;line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);width:100%;padding:var(--component-textField-padding) var(--component-textField-affix-padding) var(--component-textField-padding) var(--component-textField-padding);background-color:transparent;color:var(--component-textField-color)}.textField-input-value::placeholder{color:var(--component-textField-placeholder)}.textField-input-value:is(textarea){resize:vertical;min-height:calc(2lh + var(--component-textField-padding) * 2)}.textField-input-value:is(textarea):not([rows]){height:calc(3lh + var(--component-textField-padding) * 2)}.textField-input-affix{display:inline-flex;align-items:center;gap:var(--pr-t-spacings-100);position:absolute;right:var(--pr-t-spacings-100);pointer-events:none}.textField-input-affix-icon{--icon-size: 1.5rem;color:var(--palettes-neutral-600);pointer-events:none}.textField-input-affix-clear{pointer-events:auto}.textField-prefix{display:flex;padding-left:var(--component-textField-padding);align-items:center;color:var(--component-textField-prefix-color);line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);border-top-left-radius:var(--commons-borderRadius-M);border-bottom-left-radius:var(--commons-borderRadius-M)}.textField-prefix~.textField-input{border-top-left-radius:0;border-bottom-left-radius:0}.textField-suffix{display:flex;padding-right:var(--component-textField-padding);align-items:center;color:var(--component-textField-prefix-color);line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);border-top-right-radius:var(--commons-borderRadius-M);border-bottom-right-radius:var(--commons-borderRadius-M);order:1;flex-shrink:0}.textField-suffix~.textField-input{border-top-right-radius:0;border-bottom-right-radius:0}.textField.mod-S{--component-textField-fontSize: var(--sizes-S-fontSize);--component-textField-lineHeight: var(--sizes-S-lineHeight);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem}.textField.mod-S .textField-input-affix-toggle{--icon-size: 1.25rem}.textField.mod-S .textField-input-affix-clear.clear,.textField.mod-S .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.textField.mod-S .textField-input-affix-icon{--icon-size: 1.25rem}.textField.mod-XS{--component-textField-fontSize: var(--sizes-XS-fontSize);--component-textField-lineHeight: var(--sizes-XS-lineHeight);--component-textField-padding: var(--pr-t-spacings-50)}.textField.mod-XS .textField-prefix,.textField.mod-XS .textField-suffix,.textField.mod-XS .textField-input-affix-icon{--icon-size: 1rem}.textField.mod-XS .textField-input-affix-clear.clear,.textField.mod-XS .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.textField.mod-valueAlignRight .textField-input-value{text-align:right}.textField.is-invalid,.textField:has(.textField-input-value[aria-invalid=true]){--component-textField-border: var(--palettes-error-400);--component-textField-background: var(--palettes-error-50);--component-textField-placeholder: var(--palettes-error-400)}.textField.is-invalid:hover,.textField:has(.textField-input-value[aria-invalid=true]):hover{--component-textField-border: var(--palettes-error-600)}.textField.is-disabled,.textField:has(.textField-input-value:disabled){--component-textField-border: var(--palettes-neutral-300);--component-textField-background: var(--commons-disabled-background);--component-textField-color: var(--palettes-neutral-700)}.formLabel{--components-formLabel-fontSize: var(--sizes-M-fontSize);--components-formLabel-lineHeight: var(--sizes-M-lineHeight);--components-formLabel-color: var(--palettes-neutral-800);--components-formLabel-help-fontSize: var(--sizes-XS-lineHeight);--components-formLabel-help-lineHeight: var(--sizes-M-lineHeight);--components-formLabel-paddingRight: 0;--components-formLabel-width: fit-content;--components-formLabel-cursor: default;display:block;position:relative;color:var(--components-formLabel-color);font-size:var(--components-formLabel-fontSize);font-weight:400;line-height:var(--components-formLabel-lineHeight);width:var(--components-formLabel-width);padding-right:var(--components-formLabel-paddingRight);cursor:var(--components-formLabel-cursor)}.formLabel .lucca-icon{color:var(--palettes-neutral-600);font-size:var(--components-formLabel-help-fontSize);line-height:var(--components-formLabel-help-lineHeight);margin-left:var(--pr-t-spacings-25);vertical-align:top}.formLabel-required{color:var(--palettes-error-700);font-size:inherit;line-height:inherit;font-weight:600;text-rendering:geometricPrecision;margin-left:var(--pr-t-spacings-25);top:0}.formLabel-info:focus-visible{outline:none}.formLabel-info:focus-visible .lucca-icon:before{border-radius:50%;outline:2px solid var(--palettes-product-700);outline-offset:0}.formLabel-counter{font-size:var(--sizes-XS-fontSize);color:var(--palettes-neutral-600);position:absolute;right:0;top:0}.formLabel.mod-S{--components-formLabel-fontSize: var(--sizes-S-fontSize);--components-formLabel-lineHeight: var(--sizes-S-lineHeight);--components-formLabel-help-fontSize: var(--sizes-XS-lineHeight);--components-formLabel-help-lineHeight: var(--sizes-S-lineHeight)}.formLabel.mod-XS{--components-formLabel-fontSize: var(--sizes-XS-fontSize);--components-formLabel-lineHeight: var(--sizes-XS-lineHeight);--components-formLabel-help-fontSize: .75rem;--components-formLabel-help-lineHeight: var(--sizes-XS-lineHeight)}.formLabel.mod-counter{--components-formLabel-width: auto;--components-formLabel-paddingRight: var(--pr-t-spacings-600)}.formLabel.is-error{--components-formLabel-color: var(--palettes-error-700)}.form-group-label.is-required:not(:empty):after,.radiosfield-label.is-required:not(:empty):after,.checkboxesfield-label.is-required:not(:empty):after,.textfield-label.is-required:not(:empty):after{color:var(--palettes-error-700);display:inline-block;margin-left:.2em;content:\"*\";content:\"*\"/\"\"}.form-fieldset{margin:0;padding:0;border:0}.form-fieldset .form-field{margin-block:var(--pr-t-spacings-50)}.form.mod-maxWidth{max-width:var(--components-form-maxWidth)}.form-fieldset.mod-S .formLabel{--components-formLabel-fontSize: var(--sizes-S-fontSize);--components-formLabel-lineHeight: var(--sizes-S-lineHeight);--components-formLabel-help-fontSize: var(--sizes-XS-lineHeight);--components-formLabel-help-lineHeight: var(--sizes-S-lineHeight)}.form-fieldset.mod-S .textField{--component-textField-fontSize: var(--sizes-S-fontSize);--component-textField-lineHeight: var(--sizes-S-lineHeight);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem}.form-fieldset.mod-S .textField .textField-input-affix-toggle{--icon-size: 1.25rem}.form-fieldset.mod-S .textField .textField-input-affix-clear.clear,.form-fieldset.mod-S .textField .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-fieldset.mod-S .textField .textField-input-affix-icon{--icon-size: 1.25rem}.form-fieldset.mod-S .radioField{--component-radioField-size: 1rem}.form-fieldset.mod-S .checkboxField{--component-checkboxField-size: 1rem;--component-checkboxField-borderRadius: var(--commons-borderRadius-M);--component-checkboxField-icon-fontSize: var(--sizes-XS-lineHeight);--component-checkboxField-label-fontSize: var(--sizes-S-fontSize);--component-checkboxField-label-lineHeight: var(--sizes-S-lineHeight)}.form-fieldset.mod-S .switchField{--component-switchField-label-input-height: 1rem;--component-switchField-label-input-width: 1.75rem;--component-switchField-label-input-icon-fontSize: .75rem;--component-switchField-label-fontSize: var(--sizes-S-fontSize);--component-switchField-label-lineHeight: var(--sizes-S-lineHeight)}.form-fieldset.mod-S .simpleSelect{--components-simpleSelect-fontSize: var(--sizes-S-fontSize);--components-simpleSelect-lineHeight: var(--sizes-S-lineHeight);--components-simpleSelect-padding: var(--pr-t-spacings-75);--components-simpleSelect-gap: var(--pr-t-spacings-75)}.form-fieldset.mod-S .simpleSelect .simpleSelect-arrow{--icon-size: 1.25rem}.form-fieldset.mod-S .simpleSelect .simpleSelect-clear.clear,.form-fieldset.mod-S .simpleSelect .simpleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-fieldset.mod-S .multiSelect{--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)}.form-fieldset.mod-S .multiSelect .multipleSelect-arrow{--icon-size: 1.25rem}.form-fieldset.mod-S .multiSelect .multipleSelect-clear.clear,.form-fieldset.mod-S .multiSelect .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-fieldset.mod-S .multiSelect .multipleSelect-displayer-chip.chip,.form-fieldset.mod-S .multiSelect .multipleSelect-displayer-chip:not(.chip){--components-chip-fontSize: var(--sizes-XS-fontSize);--components-chip-lineHeight: var(--sizes-XS-lineHeight)}.form-fieldset.mod-S .multiSelect .multipleSelect-displayer-numericBadge.numericBadge,.form-fieldset.mod-S .multiSelect .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)}.form-fieldset.mod-S .timePicker{--components-timepicker-fontSize: var(--sizes-S-fontSize);--components-timepicker-lineHeight: var(--sizes-S-lineHeight);--components-timepicker-paddingInput-inline: var(--pr-t-spacings-25);--components-timepicker-paddingInput-block: var(--pr-t-spacings-75);--components-timepicker-input-height: 1.75rem;--components-timepicker-input-width: 1.25rem;--components-timepicker-separator-left: 1.875rem}.form-field.mod-S .formLabel{--components-formLabel-fontSize: var(--sizes-S-fontSize);--components-formLabel-lineHeight: var(--sizes-S-lineHeight);--components-formLabel-help-fontSize: var(--sizes-XS-lineHeight);--components-formLabel-help-lineHeight: var(--sizes-S-lineHeight)}.form-field.mod-S .textField{--component-textField-fontSize: var(--sizes-S-fontSize);--component-textField-lineHeight: var(--sizes-S-lineHeight);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem}.form-field.mod-S .textField .textField-input-affix-toggle{--icon-size: 1.25rem}.form-field.mod-S .textField .textField-input-affix-clear.clear,.form-field.mod-S .textField .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-field.mod-S .textField .textField-input-affix-icon{--icon-size: 1.25rem}.form-field.mod-S .radioField{--component-radioField-size: 1rem}.form-field.mod-S .checkboxField{--component-checkboxField-size: 1rem;--component-checkboxField-borderRadius: var(--commons-borderRadius-M);--component-checkboxField-icon-fontSize: var(--sizes-XS-lineHeight);--component-checkboxField-label-fontSize: var(--sizes-S-fontSize);--component-checkboxField-label-lineHeight: var(--sizes-S-lineHeight)}.form-field.mod-S .switchField{--component-switchField-label-input-height: 1rem;--component-switchField-label-input-width: 1.75rem;--component-switchField-label-input-icon-fontSize: .75rem;--component-switchField-label-fontSize: var(--sizes-S-fontSize);--component-switchField-label-lineHeight: var(--sizes-S-lineHeight)}.form-field.mod-S .simpleSelect{--components-simpleSelect-fontSize: var(--sizes-S-fontSize);--components-simpleSelect-lineHeight: var(--sizes-S-lineHeight);--components-simpleSelect-padding: var(--pr-t-spacings-75);--components-simpleSelect-gap: var(--pr-t-spacings-75)}.form-field.mod-S .simpleSelect .simpleSelect-arrow{--icon-size: 1.25rem}.form-field.mod-S .simpleSelect .simpleSelect-clear.clear,.form-field.mod-S .simpleSelect .simpleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-field.mod-S .multiSelect{--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)}.form-field.mod-S .multiSelect .multipleSelect-arrow{--icon-size: 1.25rem}.form-field.mod-S .multiSelect .multipleSelect-clear.clear,.form-field.mod-S .multiSelect .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-field.mod-S .multiSelect .multipleSelect-displayer-chip.chip,.form-field.mod-S .multiSelect .multipleSelect-displayer-chip:not(.chip){--components-chip-fontSize: var(--sizes-XS-fontSize);--components-chip-lineHeight: var(--sizes-XS-lineHeight)}.form-field.mod-S .multiSelect .multipleSelect-displayer-numericBadge.numericBadge,.form-field.mod-S .multiSelect .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)}.form-field.mod-S .timePicker{--components-timepicker-fontSize: var(--sizes-S-fontSize);--components-timepicker-lineHeight: var(--sizes-S-lineHeight);--components-timepicker-paddingInput-inline: var(--pr-t-spacings-25);--components-timepicker-paddingInput-block: var(--pr-t-spacings-75);--components-timepicker-input-height: 1.75rem;--components-timepicker-input-width: 1.25rem;--components-timepicker-separator-left: 1.875rem}.form-field.mod-XS .formLabel{--components-formLabel-fontSize: var(--sizes-XS-fontSize);--components-formLabel-lineHeight: var(--sizes-XS-lineHeight);--components-formLabel-help-fontSize: .75rem;--components-formLabel-help-lineHeight: var(--sizes-XS-lineHeight)}.form-field.mod-XS .textField{--component-textField-fontSize: var(--sizes-XS-fontSize);--component-textField-lineHeight: var(--sizes-XS-lineHeight);--component-textField-padding: var(--pr-t-spacings-50)}.form-field.mod-XS .textField .textField-prefix,.form-field.mod-XS .textField .textField-suffix,.form-field.mod-XS .textField .textField-input-affix-icon{--icon-size: 1rem}.form-field.mod-XS .textField .textField-input-affix-clear.clear,.form-field.mod-XS .textField .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-field.mod-XS .inlineMessage{--components-inlineMessage-fontSize: var(--sizes-XS-fontSize);--components-inlineMessage-lineHeight: var(--sizes-XS-lineHeight)}.form-field.mod-XS .inlineMessage .inlineMessage-statusIcon,.form-field.mod-XS .inlineMessage>.lucca-icon:first-child{--icon-size: .75rem}.form-field.mod-XS .simpleSelect{--components-simpleSelect-fontSize: var(--sizes-XS-fontSize);--components-simpleSelect-lineHeight: var(--sizes-XS-lineHeight);--components-simpleSelect-padding: var(--pr-t-spacings-50);--components-simpleSelect-gap: var(--pr-t-spacings-50)}.form-field.mod-XS .simpleSelect .simpleSelect-arrow{--icon-size: 1rem}.form-field.mod-XS .simpleSelect .simpleSelect-clear.clear,.form-field.mod-XS .simpleSelect .simpleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-field.mod-withArrow{padding-bottom:var(--pr-t-spacings-200)}.form-field.mod-withArrow .form-field-arrow{--components-box-arrow-background: var(--pr-t-elevation-surface-raised);--components-box-arrow-horizontalMargin: var(--commons-borderRadius-M);--components-box-arrow-left: 0;--components-box-arrow-bottom: 0;background-color:var(--components-box-arrow-background);margin:0 var(--components-box-arrow-horizontalMargin);width:12px;height:8px;clip-path:path(\"M4.66415 0.494638C5.43093 -0.164881 6.56907 -0.164879 7.33586 0.49464L12 8H0L4.66415 0.494638Z\");position:absolute;bottom:var(--components-box-arrow-bottom);left:var(--components-box-arrow-left)}.form-field.mod-withArrow .form-field-arrow.mod-neutral,.form-field.mod-withArrow .form-field-arrow.mod-grey{--components-box-arrow-background: var(--palettes-neutral-25)}.form-field.mod-withArrow:has(.switchField) .form-field-arrow{--components-box-arrow-left: 8px}.form-field.mod-withArrow:not(:has(:checked)) .form-field-arrow{display:none}.form-field.mod-withArrow.mod-S{padding-bottom:var(--pr-t-spacings-100)}.form-field.mod-withArrow.mod-S .form-field-arrow{--components-box-arrow-left: -2px;--components-box-arrow-bottom: -2px}.form-field.mod-withArrow.mod-S:has(.switchField) .form-field-arrow{--components-box-arrow-left: 4px;--components-box-arrow-bottom: -2px}.form-field.mod-checkable,.form-field:has(.radioField),.form-field:has(.checkboxField),.form-field:has(.switchField){display:grid;grid-template-columns:auto 1fr;gap:0 var(--pr-t-spacings-100)}.form-field.mod-checkable .radioField,.form-field.mod-checkable .checkboxField,.form-field.mod-checkable .switchField,.form-field:has(.radioField) .radioField,.form-field:has(.radioField) .checkboxField,.form-field:has(.radioField) .switchField,.form-field:has(.checkboxField) .radioField,.form-field:has(.checkboxField) .checkboxField,.form-field:has(.checkboxField) .switchField,.form-field:has(.switchField) .radioField,.form-field:has(.switchField) .checkboxField,.form-field:has(.switchField) .switchField{order:-1}.form-field.mod-checkable .checkboxField,.form-field:has(.radioField) .checkboxField,.form-field:has(.checkboxField) .checkboxField,.form-field:has(.switchField) .checkboxField{top:var(--component-checkboxField-top)}.form-field.mod-checkable .radioField,.form-field:has(.radioField) .radioField,.form-field:has(.checkboxField) .radioField,.form-field:has(.switchField) .radioField{top:var(--component-radioField-top)}.form-field:has(.textField-input-value[aria-invalid=true],.timePicker-fieldset-group-textfield-input[aria-invalid=true]) .formLabel{--components-formLabel-color: var(--palettes-error-700)}.form-field:has(.textField-input-value[aria-invalid=true],.timePicker-fieldset-group-textfield-input[aria-invalid=true]) .inlineMessage{--components-inlineMessage-icon-color: var(--palettes-error-700);--components-inlineMessage-color: var(--palettes-error-700);--components-inlineMessage-gap: var(--pr-t-spacings-50)}.form-field:has(.textField-input-value[aria-invalid=true],.timePicker-fieldset-group-textfield-input[aria-invalid=true]) .inlineMessage .inlineMessage-statusIcon:before,.form-field:has(.textField-input-value[aria-invalid=true],.timePicker-fieldset-group-textfield-input[aria-invalid=true]) .inlineMessage>.lucca-icon:first-child:before{content:\"\\e92c\";content:\"\\e92c\"/\"\"}.form-field:has(.radioField-input:disabled) .formLabel,.form-field:has(.checkboxField-input:disabled) .formLabel{--components-formLabel-color: var(--palettes-neutral-500);--components-formLabel-cursor: default}.form-field:has(.radioField-input:disabled) .inlineMessage,.form-field:has(.checkboxField-input:disabled) .inlineMessage{--components-inlineMessage-icon-color: var(--palettes-neutral-500);--components-inlineMessage-color: var(--palettes-neutral-500)}.form{--components-form-maxWidth: 40rem;--components-form-group-margin-bottom: 1.2rem;--components-form-field-margin-bottom: var(--pr-t-spacings-200);--components-form-label-font-size: var(--sizes-M-fontSize);--components-form-label-margin-bottom: var(--pr-t-spacings-50);--components-field-framed-side-padding: var(--pr-t-spacings-200);--components-field-framed-top-padding: var(--pr-t-spacings-400);--components-field-framed-bottom-padding: var(--pr-t-spacings-200);--components-field-framed-label-top-offset: var(--pr-t-spacings-100);--components-field-framed-textarea-height: 8.5rem;--components-field-framed-textarea-min-height: 5.5rem;--components-field-framed-textarea-max-height: 80vh;--components-field-framed-title-font-size: 1.125rem;--components-field-framed-title-line-height: var(--sizes-M-lineHeight);--components-field-framed-suffix-padding-right: var(--pr-t-spacings-600)}.form-group{--components-form-maxWidth: 40rem;--components-form-group-margin-bottom: 1.2rem;--components-form-field-margin-bottom: var(--pr-t-spacings-200);--components-form-label-font-size: var(--sizes-M-fontSize);--components-form-label-margin-bottom: var(--pr-t-spacings-50);--components-field-framed-side-padding: var(--pr-t-spacings-200);--components-field-framed-top-padding: var(--pr-t-spacings-400);--components-field-framed-bottom-padding: var(--pr-t-spacings-200);--components-field-framed-label-top-offset: var(--pr-t-spacings-100);--components-field-framed-textarea-height: 8.5rem;--components-field-framed-textarea-min-height: 5.5rem;--components-field-framed-textarea-max-height: 80vh;--components-field-framed-title-font-size: 1.125rem;--components-field-framed-title-line-height: var(--sizes-M-lineHeight);--components-field-framed-suffix-padding-right: var(--pr-t-spacings-600);padding:0;border:0;margin:0 0 var(--components-form-group-margin-bottom);position:relative}.form-header{margin-bottom:var(--spacings-M)}.form-header-title{margin:0;padding:0}.form-header-mandatory{font-size:var(--sizes-S-fontSize);line-height:var(--sizes-S-lineHeight);color:var(--palettes-neutral-700)}.form-header-mandatory-asterisk{color:var(--palettes-error-700)}.form-field{position:relative;display:flex;flex-direction:column;gap:var(--pr-t-spacings-50)}.form-field .formLabel{--components-formLabel-cursor: pointer}.form-group-label,.form-group-legend,.form-group-title{display:block;font-weight:600;font-size:var(--components-form-label-font-size);margin:0;padding:0 0 var(--components-form-label-margin-bottom);width:100%;text-align:left}.form-group-legend,.form-group-title{font-size:var(--components-field-framed-title-font-size);line-height:var(--components-field-framed-title-line-height);padding-bottom:var(--pr-t-spacings-50)}.form-actions{text-align:right}.form .textfield,.form .radiosfield,.form .checkboxesfield,.form .checkbox.mod-field{margin-bottom:var(--components-form-field-margin-bottom)}.form-group-line{display:flex;flex-wrap:wrap;position:relative}.form-group-line-col{flex-basis:0;flex-grow:1;display:flex;flex-direction:column}.form-group-line-col>*{flex-grow:1}.form-group-label.is-required:not(:empty):after{color:var(--palettes-error-700);display:inline-block;margin-left:.2em}@supports (content: \"*\"/\"\"){.form-group-label.is-required:not(:empty):after{content:\"*\"/\"\"}}@supports not (content: \"*\"/\"\"){.form-group-label.is-required:not(:empty):after{content:\"*\"}}.radiosfield-label.is-required:not(:empty):after,.checkboxesfield-label.is-required:not(:empty):after,.textfield-label.is-required:not(:empty):after{color:var(--palettes-error-700);display:inline-block;margin-left:.2em}@supports (content: \"*\"/\"\"){.radiosfield-label.is-required:not(:empty):after,.checkboxesfield-label.is-required:not(:empty):after,.textfield-label.is-required:not(:empty):after{content:\"*\"/\"\"}}@supports not (content: \"*\"/\"\"){.radiosfield-label.is-required:not(:empty):after,.checkboxesfield-label.is-required:not(:empty):after,.textfield-label.is-required:not(:empty):after{content:\"*\"}}.form-group-line-col[class*=mod-overlay]:focus-within .textfield-input{box-shadow:-1px 0 var(--components-field-framed-color),0 -1px var(--components-field-framed-color),-1px -1px var(--components-field-framed-color),-1px -1px var(--components-field-framed-color) inset,0 0 0 4px var(--components-field-framed-color50);z-index:4}.form-group-line-col[class*=mod-overlay]:focus-within .is-error .textfield-input{background-color:var(--palettes-neutral-0)!important}.form-group-line-col[class*=mod-overlay]:focus-within .is-warning .textfield-input{background-color:#444242;box-shadow:-1px 0 var(--palettes-warning-700),0 -1px var(--palettes-warning-700),-1px -1px var(--palettes-warning-700),-1px -1px var(--palettes-warning-700) inset,0 0 0 4px var(--palettes-warning-50)}.form-group-line-col[class*=mod-overlay]:focus-within .is-valid .textfield-input,.form-group-line-col[class*=mod-overlay]:focus-within .is-success .textfield-input{background-color:var(--palettes-neutral-0);box-shadow:-1px 0 var(--palettes-success-700),0 -1px var(--palettes-success-700),-1px -1px var(--palettes-success-700),-1px -1px var(--palettes-success-700) inset,0 0 0 4px var(--palettes-success-50)}.form-group-line-col[class*=mod-overlay] .textfield+.textfield,.form-group-line-col[class*=mod-overlay] .textfield+.checkbox,.form-group-line-col[class*=mod-overlay] .textfield+.radio,.form-group-line-col[class*=mod-overlay] .textfield+.select,.form-group-line-col[class*=mod-overlay] .checkbox+.textfield,.form-group-line-col[class*=mod-overlay] .checkbox+.checkbox,.form-group-line-col[class*=mod-overlay] .checkbox+.radio,.form-group-line-col[class*=mod-overlay] .checkbox+.select,.form-group-line-col[class*=mod-overlay] .radio+.textfield,.form-group-line-col[class*=mod-overlay] .radio+.checkbox,.form-group-line-col[class*=mod-overlay] .radio+.radio,.form-group-line-col[class*=mod-overlay] .radio+.select,.form-group-line-col[class*=mod-overlay] .select+.textfield,.form-group-line-col[class*=mod-overlay] .select+.checkbox,.form-group-line-col[class*=mod-overlay] .select+.radio,.form-group-line-col[class*=mod-overlay] .select+.select{position:absolute;bottom:0;right:0;z-index:10;padding:var(--components-field-framed-label-top-offset) var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding)}.form-group-line-col.mod-overlay-top .textfield+.textfield,.form-group-line-col.mod-overlay-top .textfield+.checkbox,.form-group-line-col.mod-overlay-top .textfield+.radio,.form-group-line-col.mod-overlay-top .textfield+.select,.form-group-line-col.mod-overlay-top .checkbox+.textfield,.form-group-line-col.mod-overlay-top .checkbox+.checkbox,.form-group-line-col.mod-overlay-top .checkbox+.radio,.form-group-line-col.mod-overlay-top .checkbox+.select,.form-group-line-col.mod-overlay-top .radio+.textfield,.form-group-line-col.mod-overlay-top .radio+.checkbox,.form-group-line-col.mod-overlay-top .radio+.radio,.form-group-line-col.mod-overlay-top .radio+.select,.form-group-line-col.mod-overlay-top .select+.textfield,.form-group-line-col.mod-overlay-top .select+.checkbox,.form-group-line-col.mod-overlay-top .select+.radio,.form-group-line-col.mod-overlay-top .select+.select{top:0;bottom:auto}.form-group-line-col.mod-1\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-1\\@mediaMinXXXS{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-2\\@mediaMinXXXS{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-3\\@mediaMinXXXS{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-4\\@mediaMinXXXS{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-5\\@mediaMinXXXS{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-6\\@mediaMinXXXS{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-7\\@mediaMinXXXS{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-8\\@mediaMinXXXS{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-9\\@mediaMinXXXS{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-10\\@mediaMinXXXS{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-11\\@mediaMinXXXS{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-12\\@mediaMinXXXS{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-1\\@mediaMinXXS{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-2\\@mediaMinXXS{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-3\\@mediaMinXXS{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-4\\@mediaMinXXS{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-5\\@mediaMinXXS{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-6\\@mediaMinXXS{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-7\\@mediaMinXXS{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-8\\@mediaMinXXS{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-9\\@mediaMinXXS{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-10\\@mediaMinXXS{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-11\\@mediaMinXXS{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-12\\@mediaMinXXS{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-1\\@mediaMinXS{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-2\\@mediaMinXS{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-3\\@mediaMinXS{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-4\\@mediaMinXS{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-5\\@mediaMinXS{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-6\\@mediaMinXS{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-7\\@mediaMinXS{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-8\\@mediaMinXS{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-9\\@mediaMinXS{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-10\\@mediaMinXS{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-11\\@mediaMinXS{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-12\\@mediaMinXS{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-1\\@mediaMinS{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-2\\@mediaMinS{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-3\\@mediaMinS{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-4\\@mediaMinS{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-5\\@mediaMinS{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-6\\@mediaMinS{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-7\\@mediaMinS{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-8\\@mediaMinS{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-9\\@mediaMinS{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-10\\@mediaMinS{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-11\\@mediaMinS{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-12\\@mediaMinS{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-1\\@mediaMinM{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-2\\@mediaMinM{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-3\\@mediaMinM{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-4\\@mediaMinM{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-5\\@mediaMinM{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-6\\@mediaMinM{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-7\\@mediaMinM{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-8\\@mediaMinM{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-9\\@mediaMinM{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-10\\@mediaMinM{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-11\\@mediaMinM{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-12\\@mediaMinM{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-1\\@mediaMinL{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-2\\@mediaMinL{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-3\\@mediaMinL{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-4\\@mediaMinL{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-5\\@mediaMinL{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-6\\@mediaMinL{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-7\\@mediaMinL{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-8\\@mediaMinL{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-9\\@mediaMinL{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-10\\@mediaMinL{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-11\\@mediaMinL{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-12\\@mediaMinL{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-1\\@mediaMinXL{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-2\\@mediaMinXL{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-3\\@mediaMinXL{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-4\\@mediaMinXL{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-5\\@mediaMinXL{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-6\\@mediaMinXL{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-7\\@mediaMinXL{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-8\\@mediaMinXL{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-9\\@mediaMinXL{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-10\\@mediaMinXL{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-11\\@mediaMinXL{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-12\\@mediaMinXL{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-1\\@mediaMinXXL{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-2\\@mediaMinXXL{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-3\\@mediaMinXXL{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-4\\@mediaMinXXL{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-5\\@mediaMinXXL{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-6\\@mediaMinXXL{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-7\\@mediaMinXXL{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-8\\@mediaMinXXL{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-9\\@mediaMinXXL{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-10\\@mediaMinXXL{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-11\\@mediaMinXXL{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-12\\@mediaMinXXL{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-1\\@mediaMinXXXL{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-2\\@mediaMinXXXL{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-3\\@mediaMinXXXL{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-4\\@mediaMinXXXL{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-5\\@mediaMinXXXL{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-6\\@mediaMinXXXL{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-7\\@mediaMinXXXL{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-8\\@mediaMinXXXL{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-9\\@mediaMinXXXL{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-10\\@mediaMinXXXL{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-11\\@mediaMinXXXL{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-12\\@mediaMinXXXL{flex-basis:100%}}.form-group-label:is(.is-required,.required):not(:empty):after,.radiosfield-label:is(.is-required,.required):not(:empty):after,.checkboxesfield-label:is(.is-required,.required):not(:empty):after,.textfield-label:is(.is-required,.required):not(:empty):after{color:var(--palettes-error-700);display:inline-block;margin-left:.2em}@supports (content: \"*\"/\"\"){.form-group-label:is(.is-required,.required):not(:empty):after,.radiosfield-label:is(.is-required,.required):not(:empty):after,.checkboxesfield-label:is(.is-required,.required):not(:empty):after,.textfield-label:is(.is-required,.required):not(:empty):after{content:\"*\"/\"\"}}@supports not (content: \"*\"/\"\"){.form-group-label:is(.is-required,.required):not(:empty):after,.radiosfield-label:is(.is-required,.required):not(:empty):after,.checkboxesfield-label:is(.is-required,.required):not(:empty):after,.textfield-label:is(.is-required,.required):not(:empty):after{content:\"*\"}}.checkboxesfield.mod-framed,.radiosfield.mod-framed,.form.mod-framed .fieldsetWrapper{margin-bottom:0;background-color:var(--palettes-neutral-0);padding:0;box-shadow:-1px 0 var(--palettes-neutral-200),0 -1px var(--palettes-neutral-200),-1px -1px var(--palettes-neutral-200),-1px -1px var(--palettes-neutral-200) inset;transition:background-color var(--commons-animations-durations-standard);margin-bottom:0!important}.checkboxesfield.mod-framed:before,.checkboxesfield.mod-framed:after,.radiosfield.mod-framed:before,.radiosfield.mod-framed:after,.form.mod-framed .fieldsetWrapper:before,.form.mod-framed .fieldsetWrapper:after{content:\" \";display:table}.checkboxesfield.mod-framed:after,.radiosfield.mod-framed:after,.form.mod-framed .fieldsetWrapper:after{clear:both}.checkboxesfield.mod-framed:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):hover,.checkboxesfield.mod-framed:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):focus,.radiosfield.mod-framed:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):hover,.radiosfield.mod-framed:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):focus,.form.mod-framed .fieldsetWrapper:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):hover,.form.mod-framed .fieldsetWrapper:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):focus{position:relative;z-index:1;background-color:var(--palettes-neutral-0);box-shadow:-1px 0 var(--palettes-neutral-600),0 -1px var(--palettes-neutral-600),-1px -1px var(--palettes-neutral-600),-1px -1px var(--palettes-neutral-600) inset}.checkboxesfield.mod-framed:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):focus,.radiosfield.mod-framed:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):focus,.form.mod-framed .fieldsetWrapper:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):focus{z-index:4;box-shadow:-1px 0 var(--palettes-neutral-600),0 -1px var(--palettes-neutral-600),-1px -1px var(--palettes-neutral-600),-1px -1px var(--palettes-neutral-600) inset,0 0 0 4px var(--palettes-neutral-50)}.checkboxesfield.mod-framed .radiosfield,.checkboxesfield.mod-framed .checkboxesfield,.radiosfield.mod-framed .radiosfield,.radiosfield.mod-framed .checkboxesfield,.form.mod-framed .fieldsetWrapper .radiosfield,.form.mod-framed .fieldsetWrapper .checkboxesfield{display:block;margin-top:var(--components-field-framed-side-padding);margin-bottom:0;padding:0 var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding)}.checkboxesfield.mod-framed.is-disabled,.checkboxesfield.mod-framed.is-readonly,.radiosfield.mod-framed.is-disabled,.radiosfield.mod-framed.is-readonly,.form.mod-framed .fieldsetWrapper.is-disabled,.form.mod-framed .fieldsetWrapper.is-readonly{background-color:var(--commons-disabled-background)}.checkboxesfield.mod-framed.is-loading:after,.radiosfield.mod-framed.is-loading:after,.form.mod-framed .fieldsetWrapper.is-loading:after{content:\"\";width:1.5rem;height:1.5rem;border-radius:var(--commons-borderRadius-full);line-height:.8rem;border-width:3px;inset:0;margin:auto;position:absolute;border-style:solid;animation-name:rotate;animation-duration:var(--commons-loading-speed);animation-timing-function:linear;animation-iteration-count:infinite;border-color:var(--commons-loading-frontground);border-top-color:transparent}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.checkboxesfield.mod-framed.is-loading:before,.checkboxesfield.mod-framed.is-loading:after,.radiosfield.mod-framed.is-loading:before,.radiosfield.mod-framed.is-loading:after,.form.mod-framed .fieldsetWrapper.is-loading:before,.form.mod-framed .fieldsetWrapper.is-loading:after{left:auto!important;bottom:auto!important;right:var(--components-field-framed-side-padding)!important;top:var(--components-field-framed-side-padding)!important}.checkboxesfield.mod-framed,.radiosfield.mod-framed{margin-top:0;padding:var(--components-field-framed-side-padding) var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InlineMessageComponent, selector: "lu-inline-message", inputs: ["label", "state", "size"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: i1.LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
221
|
+
], queries: [{ propertyName: "validators", predicate: NG_VALIDATORS, descendants: true }, { propertyName: "controls", predicate: NgControl, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@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", styles: [".textField{--component-textField-lineHeight: var(--size-M-lightHeight);--component-textField-fontSize: var(--size-M-fontSize);--component-textField-placeholder: var(--palettes-neutral-400);--component-textField-background: var(--palettes-neutral-0);--component-textField-border: var(--palettes-neutral-300);--component-textField-color: var(--palettes-neutral-800);--component-textField-prefix-color: var(--palettes-neutral-600);--component-textField-padding: var(--pr-t-spacings-100);--component-textField-affix-padding: var(--component-textField-padding);--component-textField-affix-size: 1.75rem;display:flex;align-items:stretch;border-radius:var(--commons-borderRadius-M);background-color:var(--component-textField-background);box-shadow:0 0 0 1px var(--component-textField-border)}.textField:hover{--component-textField-border: var(--palettes-neutral-400)}.textField:has(.textField-input-value:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:3px}.textField .textField-input-affix-toggle{pointer-events:auto;width:var(--component-textField-affix-size);height:var(--component-textField-affix-size);color:var(--palettes-neutral-600)}.textField-input{display:flex;align-items:center;width:100%;border-radius:var(--commons-borderRadius-M);background-color:var(--component-textField-background);position:relative}.textField-input:has(.textField-input-affix-icon){--component-textField-affix-padding: 2.5rem}.textField-input:has(.textField-input-affix-toggle){--component-textField-affix-padding: 3rem}.textField-input:has(.textField-input-affix-clear){--component-textField-affix-padding: 2rem}.textField-input:has(.textField-input-affix-clear):has(.textField-input-affix-icon){--component-textField-affix-padding: 4rem}.textField-input:has(.textField-input-affix-clear):has(.textField-input-affix-toggle){--component-textField-affix-padding: 4.5rem}.textField-input-value{border:0;outline:0;line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);width:100%;padding:var(--component-textField-padding) var(--component-textField-affix-padding) var(--component-textField-padding) var(--component-textField-padding);background-color:transparent;color:var(--component-textField-color)}.textField-input-value::placeholder{color:var(--component-textField-placeholder)}.textField-input-value:is(textarea){resize:vertical;min-height:calc(2lh + var(--component-textField-padding) * 2)}.textField-input-value:is(textarea):not([rows]){height:calc(3lh + var(--component-textField-padding) * 2)}.textField-input-affix{display:inline-flex;align-items:center;gap:var(--pr-t-spacings-100);position:absolute;right:var(--pr-t-spacings-100);pointer-events:none}.textField-input-affix-icon{--icon-size: 1.5rem;color:var(--palettes-neutral-600);pointer-events:none}.textField-input-affix-clear{pointer-events:auto}.textField-prefix{display:flex;padding-left:var(--component-textField-padding);align-items:center;color:var(--component-textField-prefix-color);line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);border-top-left-radius:var(--commons-borderRadius-M);border-bottom-left-radius:var(--commons-borderRadius-M)}.textField-prefix~.textField-input{border-top-left-radius:0;border-bottom-left-radius:0}.textField-suffix{display:flex;padding-right:var(--component-textField-padding);align-items:center;color:var(--component-textField-prefix-color);line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);border-top-right-radius:var(--commons-borderRadius-M);border-bottom-right-radius:var(--commons-borderRadius-M);order:1;flex-shrink:0}.textField-suffix~.textField-input{border-top-right-radius:0;border-bottom-right-radius:0}.textField.mod-S{--component-textField-fontSize: var(--sizes-S-fontSize);--component-textField-lineHeight: var(--sizes-S-lineHeight);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem}.textField.mod-S .textField-input-affix-toggle{--icon-size: 1.25rem}.textField.mod-S .textField-input-affix-clear.clear,.textField.mod-S .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.textField.mod-S .textField-input-affix-icon{--icon-size: 1.25rem}.textField.mod-XS{--component-textField-fontSize: var(--sizes-XS-fontSize);--component-textField-lineHeight: var(--sizes-XS-lineHeight);--component-textField-padding: var(--pr-t-spacings-50)}.textField.mod-XS .textField-prefix,.textField.mod-XS .textField-suffix,.textField.mod-XS .textField-input-affix-icon{--icon-size: 1rem}.textField.mod-XS .textField-input-affix-clear.clear,.textField.mod-XS .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.textField.mod-valueAlignRight .textField-input-value{text-align:right}.textField.is-invalid,.textField:has(.textField-input-value[aria-invalid=true]){--component-textField-border: var(--palettes-error-400);--component-textField-background: var(--palettes-error-50);--component-textField-placeholder: var(--palettes-error-400)}.textField.is-invalid:hover,.textField:has(.textField-input-value[aria-invalid=true]):hover{--component-textField-border: var(--palettes-error-600)}.textField.is-disabled,.textField:has(.textField-input-value:disabled){--component-textField-border: var(--palettes-neutral-300);--component-textField-background: var(--commons-disabled-background);--component-textField-color: var(--palettes-neutral-700)}.formLabel{--components-formLabel-fontSize: var(--sizes-M-fontSize);--components-formLabel-lineHeight: var(--sizes-M-lineHeight);--components-formLabel-color: var(--palettes-neutral-800);--components-formLabel-help-fontSize: var(--sizes-XS-lineHeight);--components-formLabel-help-lineHeight: var(--sizes-M-lineHeight);--components-formLabel-paddingRight: 0;--components-formLabel-width: fit-content;--components-formLabel-cursor: default;display:block;position:relative;color:var(--components-formLabel-color);font-size:var(--components-formLabel-fontSize);font-weight:400;line-height:var(--components-formLabel-lineHeight);width:var(--components-formLabel-width);padding-right:var(--components-formLabel-paddingRight);cursor:var(--components-formLabel-cursor)}.formLabel .lucca-icon{color:var(--palettes-neutral-600);font-size:var(--components-formLabel-help-fontSize);line-height:var(--components-formLabel-help-lineHeight);margin-left:var(--pr-t-spacings-25);vertical-align:top}.formLabel-required{color:var(--palettes-error-700);font-size:inherit;line-height:inherit;font-weight:600;text-rendering:geometricPrecision;margin-left:var(--pr-t-spacings-25);top:0}.formLabel-info:focus-visible{outline:none}.formLabel-info:focus-visible .lucca-icon:before{border-radius:50%;outline:2px solid var(--palettes-product-700);outline-offset:0}.formLabel-counter{font-size:var(--sizes-XS-fontSize);color:var(--palettes-neutral-600);position:absolute;right:0;top:0}.formLabel.mod-S{--components-formLabel-fontSize: var(--sizes-S-fontSize);--components-formLabel-lineHeight: var(--sizes-S-lineHeight);--components-formLabel-help-fontSize: var(--sizes-XS-lineHeight);--components-formLabel-help-lineHeight: var(--sizes-S-lineHeight)}.formLabel.mod-XS{--components-formLabel-fontSize: var(--sizes-XS-fontSize);--components-formLabel-lineHeight: var(--sizes-XS-lineHeight);--components-formLabel-help-fontSize: .75rem;--components-formLabel-help-lineHeight: var(--sizes-XS-lineHeight)}.formLabel.mod-counter{--components-formLabel-width: auto;--components-formLabel-paddingRight: var(--pr-t-spacings-600)}.formLabel.is-error{--components-formLabel-color: var(--palettes-error-700)}.form-group-label.is-required:not(:empty):after,.radiosfield-label.is-required:not(:empty):after,.checkboxesfield-label.is-required:not(:empty):after,.textfield-label.is-required:not(:empty):after{color:var(--palettes-error-700);display:inline-block;margin-left:.2em;content:\"*\";content:\"*\"/\"\"}.form-fieldset{margin:0;padding:0;border:0}.form-fieldset .form-field{margin-block:var(--pr-t-spacings-50)}.form.mod-maxWidth{max-width:var(--components-form-maxWidth)}.form-fieldset.mod-S .formLabel{--components-formLabel-fontSize: var(--sizes-S-fontSize);--components-formLabel-lineHeight: var(--sizes-S-lineHeight);--components-formLabel-help-fontSize: var(--sizes-XS-lineHeight);--components-formLabel-help-lineHeight: var(--sizes-S-lineHeight)}.form-fieldset.mod-S .textField{--component-textField-fontSize: var(--sizes-S-fontSize);--component-textField-lineHeight: var(--sizes-S-lineHeight);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem}.form-fieldset.mod-S .textField .textField-input-affix-toggle{--icon-size: 1.25rem}.form-fieldset.mod-S .textField .textField-input-affix-clear.clear,.form-fieldset.mod-S .textField .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-fieldset.mod-S .textField .textField-input-affix-icon{--icon-size: 1.25rem}.form-fieldset.mod-S .radioField{--component-radioField-size: 1rem}.form-fieldset.mod-S .checkboxField{--component-checkboxField-size: 1rem;--component-checkboxField-borderRadius: var(--commons-borderRadius-M);--component-checkboxField-icon-fontSize: var(--sizes-XS-lineHeight);--component-checkboxField-label-fontSize: var(--sizes-S-fontSize);--component-checkboxField-label-lineHeight: var(--sizes-S-lineHeight)}.form-fieldset.mod-S .switchField{--component-switchField-label-input-height: 1rem;--component-switchField-label-input-width: 1.75rem;--component-switchField-label-input-icon-fontSize: .75rem;--component-switchField-label-fontSize: var(--sizes-S-fontSize);--component-switchField-label-lineHeight: var(--sizes-S-lineHeight)}.form-fieldset.mod-S .simpleSelect{--components-simpleSelect-fontSize: var(--sizes-S-fontSize);--components-simpleSelect-lineHeight: var(--sizes-S-lineHeight);--components-simpleSelect-padding: var(--pr-t-spacings-75);--components-simpleSelect-gap: var(--pr-t-spacings-75)}.form-fieldset.mod-S .simpleSelect .simpleSelect-arrow{--icon-size: 1.25rem}.form-fieldset.mod-S .simpleSelect .simpleSelect-clear.clear,.form-fieldset.mod-S .simpleSelect .simpleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-fieldset.mod-S .multiSelect{--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)}.form-fieldset.mod-S .multiSelect .multipleSelect-arrow{--icon-size: 1.25rem}.form-fieldset.mod-S .multiSelect .multipleSelect-clear.clear,.form-fieldset.mod-S .multiSelect .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-fieldset.mod-S .multiSelect .multipleSelect-displayer-chip.chip,.form-fieldset.mod-S .multiSelect .multipleSelect-displayer-chip:not(.chip){--components-chip-fontSize: var(--sizes-XS-fontSize);--components-chip-lineHeight: var(--sizes-XS-lineHeight)}.form-fieldset.mod-S .multiSelect .multipleSelect-displayer-numericBadge.numericBadge,.form-fieldset.mod-S .multiSelect .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)}.form-fieldset.mod-S .timePicker{--components-timepicker-fontSize: var(--sizes-S-fontSize);--components-timepicker-lineHeight: var(--sizes-S-lineHeight);--components-timepicker-paddingInput-inline: var(--pr-t-spacings-25);--components-timepicker-paddingInput-block: var(--pr-t-spacings-75);--components-timepicker-input-height: 1.75rem;--components-timepicker-input-width: 1.25rem;--components-timepicker-separator-left: 1.875rem}.form-field.mod-S .formLabel{--components-formLabel-fontSize: var(--sizes-S-fontSize);--components-formLabel-lineHeight: var(--sizes-S-lineHeight);--components-formLabel-help-fontSize: var(--sizes-XS-lineHeight);--components-formLabel-help-lineHeight: var(--sizes-S-lineHeight)}.form-field.mod-S .textField{--component-textField-fontSize: var(--sizes-S-fontSize);--component-textField-lineHeight: var(--sizes-S-lineHeight);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem}.form-field.mod-S .textField .textField-input-affix-toggle{--icon-size: 1.25rem}.form-field.mod-S .textField .textField-input-affix-clear.clear,.form-field.mod-S .textField .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-field.mod-S .textField .textField-input-affix-icon{--icon-size: 1.25rem}.form-field.mod-S .radioField{--component-radioField-size: 1rem}.form-field.mod-S .checkboxField{--component-checkboxField-size: 1rem;--component-checkboxField-borderRadius: var(--commons-borderRadius-M);--component-checkboxField-icon-fontSize: var(--sizes-XS-lineHeight);--component-checkboxField-label-fontSize: var(--sizes-S-fontSize);--component-checkboxField-label-lineHeight: var(--sizes-S-lineHeight)}.form-field.mod-S .switchField{--component-switchField-label-input-height: 1rem;--component-switchField-label-input-width: 1.75rem;--component-switchField-label-input-icon-fontSize: .75rem;--component-switchField-label-fontSize: var(--sizes-S-fontSize);--component-switchField-label-lineHeight: var(--sizes-S-lineHeight)}.form-field.mod-S .simpleSelect{--components-simpleSelect-fontSize: var(--sizes-S-fontSize);--components-simpleSelect-lineHeight: var(--sizes-S-lineHeight);--components-simpleSelect-padding: var(--pr-t-spacings-75);--components-simpleSelect-gap: var(--pr-t-spacings-75)}.form-field.mod-S .simpleSelect .simpleSelect-arrow{--icon-size: 1.25rem}.form-field.mod-S .simpleSelect .simpleSelect-clear.clear,.form-field.mod-S .simpleSelect .simpleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-field.mod-S .multiSelect{--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)}.form-field.mod-S .multiSelect .multipleSelect-arrow{--icon-size: 1.25rem}.form-field.mod-S .multiSelect .multipleSelect-clear.clear,.form-field.mod-S .multiSelect .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-field.mod-S .multiSelect .multipleSelect-displayer-chip.chip,.form-field.mod-S .multiSelect .multipleSelect-displayer-chip:not(.chip){--components-chip-fontSize: var(--sizes-XS-fontSize);--components-chip-lineHeight: var(--sizes-XS-lineHeight)}.form-field.mod-S .multiSelect .multipleSelect-displayer-numericBadge.numericBadge,.form-field.mod-S .multiSelect .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)}.form-field.mod-S .timePicker{--components-timepicker-fontSize: var(--sizes-S-fontSize);--components-timepicker-lineHeight: var(--sizes-S-lineHeight);--components-timepicker-paddingInput-inline: var(--pr-t-spacings-25);--components-timepicker-paddingInput-block: var(--pr-t-spacings-75);--components-timepicker-input-height: 1.75rem;--components-timepicker-input-width: 1.25rem;--components-timepicker-separator-left: 1.875rem}.form-field.mod-XS .formLabel{--components-formLabel-fontSize: var(--sizes-XS-fontSize);--components-formLabel-lineHeight: var(--sizes-XS-lineHeight);--components-formLabel-help-fontSize: .75rem;--components-formLabel-help-lineHeight: var(--sizes-XS-lineHeight)}.form-field.mod-XS .textField{--component-textField-fontSize: var(--sizes-XS-fontSize);--component-textField-lineHeight: var(--sizes-XS-lineHeight);--component-textField-padding: var(--pr-t-spacings-50)}.form-field.mod-XS .textField .textField-prefix,.form-field.mod-XS .textField .textField-suffix,.form-field.mod-XS .textField .textField-input-affix-icon{--icon-size: 1rem}.form-field.mod-XS .textField .textField-input-affix-clear.clear,.form-field.mod-XS .textField .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-field.mod-XS .inlineMessage{--components-inlineMessage-fontSize: var(--sizes-XS-fontSize);--components-inlineMessage-lineHeight: var(--sizes-XS-lineHeight)}.form-field.mod-XS .inlineMessage .inlineMessage-statusIcon,.form-field.mod-XS .inlineMessage>.lucca-icon:first-child{--icon-size: .75rem}.form-field.mod-XS .simpleSelect{--components-simpleSelect-fontSize: var(--sizes-XS-fontSize);--components-simpleSelect-lineHeight: var(--sizes-XS-lineHeight);--components-simpleSelect-padding: var(--pr-t-spacings-50);--components-simpleSelect-gap: var(--pr-t-spacings-50)}.form-field.mod-XS .simpleSelect .simpleSelect-arrow{--icon-size: 1rem}.form-field.mod-XS .simpleSelect .simpleSelect-clear.clear,.form-field.mod-XS .simpleSelect .simpleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.form-field.mod-withArrow{padding-bottom:var(--pr-t-spacings-200)}.form-field.mod-withArrow .form-field-arrow{--components-box-arrow-background: var(--pr-t-elevation-surface-raised);--components-box-arrow-horizontalMargin: var(--commons-borderRadius-M);--components-box-arrow-left: 0;--components-box-arrow-bottom: 0;background-color:var(--components-box-arrow-background);margin:0 var(--components-box-arrow-horizontalMargin);width:12px;height:8px;clip-path:path(\"M4.66415 0.494638C5.43093 -0.164881 6.56907 -0.164879 7.33586 0.49464L12 8H0L4.66415 0.494638Z\");position:absolute;bottom:var(--components-box-arrow-bottom);left:var(--components-box-arrow-left)}.form-field.mod-withArrow .form-field-arrow.mod-neutral,.form-field.mod-withArrow .form-field-arrow.mod-grey{--components-box-arrow-background: var(--palettes-neutral-25)}.form-field.mod-withArrow:has(.switchField) .form-field-arrow{--components-box-arrow-left: 8px}.form-field.mod-withArrow:not(:has(:checked)) .form-field-arrow{display:none}.form-field.mod-withArrow.mod-S{padding-bottom:var(--pr-t-spacings-100)}.form-field.mod-withArrow.mod-S .form-field-arrow{--components-box-arrow-left: -2px;--components-box-arrow-bottom: -2px}.form-field.mod-withArrow.mod-S:has(.switchField) .form-field-arrow{--components-box-arrow-left: 4px;--components-box-arrow-bottom: -2px}.form-field.mod-checkable,.form-field:has(.radioField),.form-field:has(.checkboxField),.form-field:has(.switchField){display:grid;grid-template-columns:auto 1fr;gap:0 var(--pr-t-spacings-100)}.form-field.mod-checkable .radioField,.form-field.mod-checkable .checkboxField,.form-field.mod-checkable .switchField,.form-field:has(.radioField) .radioField,.form-field:has(.radioField) .checkboxField,.form-field:has(.radioField) .switchField,.form-field:has(.checkboxField) .radioField,.form-field:has(.checkboxField) .checkboxField,.form-field:has(.checkboxField) .switchField,.form-field:has(.switchField) .radioField,.form-field:has(.switchField) .checkboxField,.form-field:has(.switchField) .switchField{order:-1}.form-field.mod-checkable .checkboxField,.form-field:has(.radioField) .checkboxField,.form-field:has(.checkboxField) .checkboxField,.form-field:has(.switchField) .checkboxField{top:var(--component-checkboxField-top)}.form-field.mod-checkable .radioField,.form-field:has(.radioField) .radioField,.form-field:has(.checkboxField) .radioField,.form-field:has(.switchField) .radioField{top:var(--component-radioField-top)}.form-field:has(.textField-input-value[aria-invalid=true],.timePicker-fieldset-group-textfield-input[aria-invalid=true]) .formLabel{--components-formLabel-color: var(--palettes-error-700)}.form-field:has(.textField-input-value[aria-invalid=true],.timePicker-fieldset-group-textfield-input[aria-invalid=true]) .inlineMessage{--components-inlineMessage-icon-color: var(--palettes-error-700);--components-inlineMessage-color: var(--palettes-error-700);--components-inlineMessage-gap: var(--pr-t-spacings-50)}.form-field:has(.textField-input-value[aria-invalid=true],.timePicker-fieldset-group-textfield-input[aria-invalid=true]) .inlineMessage .inlineMessage-statusIcon:before,.form-field:has(.textField-input-value[aria-invalid=true],.timePicker-fieldset-group-textfield-input[aria-invalid=true]) .inlineMessage>.lucca-icon:first-child:before{content:\"\\e92c\";content:\"\\e92c\"/\"\"}.form-field:has(.radioField-input:disabled) .formLabel,.form-field:has(.checkboxField-input:disabled) .formLabel{--components-formLabel-color: var(--palettes-neutral-500);--components-formLabel-cursor: default}.form-field:has(.radioField-input:disabled) .inlineMessage,.form-field:has(.checkboxField-input:disabled) .inlineMessage{--components-inlineMessage-icon-color: var(--palettes-neutral-500);--components-inlineMessage-color: var(--palettes-neutral-500)}.form{--components-form-maxWidth: 40rem;--components-form-group-margin-bottom: 1.2rem;--components-form-field-margin-bottom: var(--pr-t-spacings-200);--components-form-label-font-size: var(--sizes-M-fontSize);--components-form-label-margin-bottom: var(--pr-t-spacings-50);--components-field-framed-side-padding: var(--pr-t-spacings-200);--components-field-framed-top-padding: var(--pr-t-spacings-400);--components-field-framed-bottom-padding: var(--pr-t-spacings-200);--components-field-framed-label-top-offset: var(--pr-t-spacings-100);--components-field-framed-textarea-height: 8.5rem;--components-field-framed-textarea-min-height: 5.5rem;--components-field-framed-textarea-max-height: 80vh;--components-field-framed-title-font-size: 1.125rem;--components-field-framed-title-line-height: var(--sizes-M-lineHeight);--components-field-framed-suffix-padding-right: var(--pr-t-spacings-600)}.form-group{--components-form-maxWidth: 40rem;--components-form-group-margin-bottom: 1.2rem;--components-form-field-margin-bottom: var(--pr-t-spacings-200);--components-form-label-font-size: var(--sizes-M-fontSize);--components-form-label-margin-bottom: var(--pr-t-spacings-50);--components-field-framed-side-padding: var(--pr-t-spacings-200);--components-field-framed-top-padding: var(--pr-t-spacings-400);--components-field-framed-bottom-padding: var(--pr-t-spacings-200);--components-field-framed-label-top-offset: var(--pr-t-spacings-100);--components-field-framed-textarea-height: 8.5rem;--components-field-framed-textarea-min-height: 5.5rem;--components-field-framed-textarea-max-height: 80vh;--components-field-framed-title-font-size: 1.125rem;--components-field-framed-title-line-height: var(--sizes-M-lineHeight);--components-field-framed-suffix-padding-right: var(--pr-t-spacings-600);padding:0;border:0;margin:0 0 var(--components-form-group-margin-bottom);position:relative}.form-header{margin-bottom:var(--spacings-M)}.form-header-title{margin:0;padding:0}.form-header-mandatory{font-size:var(--sizes-S-fontSize);line-height:var(--sizes-S-lineHeight);color:var(--palettes-neutral-700)}.form-header-mandatory-asterisk{color:var(--palettes-error-700)}.form-field{position:relative;display:flex;flex-direction:column;gap:var(--pr-t-spacings-50)}.form-field .formLabel{--components-formLabel-cursor: pointer}.form-group-label,.form-group-legend,.form-group-title{display:block;font-weight:600;font-size:var(--components-form-label-font-size);margin:0;padding:0 0 var(--components-form-label-margin-bottom);width:100%;text-align:left}.form-group-legend,.form-group-title{font-size:var(--components-field-framed-title-font-size);line-height:var(--components-field-framed-title-line-height);padding-bottom:var(--pr-t-spacings-50)}.form-actions{text-align:right}.form .textfield,.form .radiosfield,.form .checkboxesfield,.form .checkbox.mod-field{margin-bottom:var(--components-form-field-margin-bottom)}.form-group-line{display:flex;flex-wrap:wrap;position:relative}.form-group-line-col{flex-basis:0;flex-grow:1;display:flex;flex-direction:column}.form-group-line-col>*{flex-grow:1}.form-group-label.is-required:not(:empty):after{color:var(--palettes-error-700);display:inline-block;margin-left:.2em}@supports (content: \"*\"/\"\"){.form-group-label.is-required:not(:empty):after{content:\"*\"/\"\"}}@supports not (content: \"*\"/\"\"){.form-group-label.is-required:not(:empty):after{content:\"*\"}}.radiosfield-label.is-required:not(:empty):after,.checkboxesfield-label.is-required:not(:empty):after,.textfield-label.is-required:not(:empty):after{color:var(--palettes-error-700);display:inline-block;margin-left:.2em}@supports (content: \"*\"/\"\"){.radiosfield-label.is-required:not(:empty):after,.checkboxesfield-label.is-required:not(:empty):after,.textfield-label.is-required:not(:empty):after{content:\"*\"/\"\"}}@supports not (content: \"*\"/\"\"){.radiosfield-label.is-required:not(:empty):after,.checkboxesfield-label.is-required:not(:empty):after,.textfield-label.is-required:not(:empty):after{content:\"*\"}}.form-group-line-col[class*=mod-overlay]:focus-within .textfield-input{box-shadow:-1px 0 var(--components-field-framed-color),0 -1px var(--components-field-framed-color),-1px -1px var(--components-field-framed-color),-1px -1px var(--components-field-framed-color) inset,0 0 0 4px var(--components-field-framed-color50);z-index:4}.form-group-line-col[class*=mod-overlay]:focus-within .is-error .textfield-input{background-color:var(--palettes-neutral-0)!important}.form-group-line-col[class*=mod-overlay]:focus-within .is-warning .textfield-input{background-color:#444242;box-shadow:-1px 0 var(--palettes-warning-700),0 -1px var(--palettes-warning-700),-1px -1px var(--palettes-warning-700),-1px -1px var(--palettes-warning-700) inset,0 0 0 4px var(--palettes-warning-50)}.form-group-line-col[class*=mod-overlay]:focus-within .is-valid .textfield-input,.form-group-line-col[class*=mod-overlay]:focus-within .is-success .textfield-input{background-color:var(--palettes-neutral-0);box-shadow:-1px 0 var(--palettes-success-700),0 -1px var(--palettes-success-700),-1px -1px var(--palettes-success-700),-1px -1px var(--palettes-success-700) inset,0 0 0 4px var(--palettes-success-50)}.form-group-line-col[class*=mod-overlay] .textfield+.textfield,.form-group-line-col[class*=mod-overlay] .textfield+.checkbox,.form-group-line-col[class*=mod-overlay] .textfield+.radio,.form-group-line-col[class*=mod-overlay] .textfield+.select,.form-group-line-col[class*=mod-overlay] .checkbox+.textfield,.form-group-line-col[class*=mod-overlay] .checkbox+.checkbox,.form-group-line-col[class*=mod-overlay] .checkbox+.radio,.form-group-line-col[class*=mod-overlay] .checkbox+.select,.form-group-line-col[class*=mod-overlay] .radio+.textfield,.form-group-line-col[class*=mod-overlay] .radio+.checkbox,.form-group-line-col[class*=mod-overlay] .radio+.radio,.form-group-line-col[class*=mod-overlay] .radio+.select,.form-group-line-col[class*=mod-overlay] .select+.textfield,.form-group-line-col[class*=mod-overlay] .select+.checkbox,.form-group-line-col[class*=mod-overlay] .select+.radio,.form-group-line-col[class*=mod-overlay] .select+.select{position:absolute;bottom:0;right:0;z-index:10;padding:var(--components-field-framed-label-top-offset) var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding)}.form-group-line-col.mod-overlay-top .textfield+.textfield,.form-group-line-col.mod-overlay-top .textfield+.checkbox,.form-group-line-col.mod-overlay-top .textfield+.radio,.form-group-line-col.mod-overlay-top .textfield+.select,.form-group-line-col.mod-overlay-top .checkbox+.textfield,.form-group-line-col.mod-overlay-top .checkbox+.checkbox,.form-group-line-col.mod-overlay-top .checkbox+.radio,.form-group-line-col.mod-overlay-top .checkbox+.select,.form-group-line-col.mod-overlay-top .radio+.textfield,.form-group-line-col.mod-overlay-top .radio+.checkbox,.form-group-line-col.mod-overlay-top .radio+.radio,.form-group-line-col.mod-overlay-top .radio+.select,.form-group-line-col.mod-overlay-top .select+.textfield,.form-group-line-col.mod-overlay-top .select+.checkbox,.form-group-line-col.mod-overlay-top .select+.radio,.form-group-line-col.mod-overlay-top .select+.select{top:0;bottom:auto}.form-group-line-col.mod-1\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-1\\@mediaMinXXXS{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-2\\@mediaMinXXXS{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-3\\@mediaMinXXXS{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-4\\@mediaMinXXXS{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-5\\@mediaMinXXXS{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-6\\@mediaMinXXXS{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-7\\@mediaMinXXXS{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-8\\@mediaMinXXXS{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-9\\@mediaMinXXXS{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-10\\@mediaMinXXXS{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-11\\@mediaMinXXXS{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinXXXS{flex-basis:100%;flex-grow:0}@media (min-width: 20em){.form-group-line-col.mod-12\\@mediaMinXXXS{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-1\\@mediaMinXXS{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-2\\@mediaMinXXS{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-3\\@mediaMinXXS{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-4\\@mediaMinXXS{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-5\\@mediaMinXXS{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-6\\@mediaMinXXS{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-7\\@mediaMinXXS{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-8\\@mediaMinXXS{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-9\\@mediaMinXXS{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-10\\@mediaMinXXS{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-11\\@mediaMinXXS{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinXXS{flex-basis:100%;flex-grow:0}@media (min-width: 30em){.form-group-line-col.mod-12\\@mediaMinXXS{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-1\\@mediaMinXS{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-2\\@mediaMinXS{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-3\\@mediaMinXS{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-4\\@mediaMinXS{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-5\\@mediaMinXS{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-6\\@mediaMinXS{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-7\\@mediaMinXS{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-8\\@mediaMinXS{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-9\\@mediaMinXS{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-10\\@mediaMinXS{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-11\\@mediaMinXS{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinXS{flex-basis:100%;flex-grow:0}@media (min-width: 40em){.form-group-line-col.mod-12\\@mediaMinXS{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-1\\@mediaMinS{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-2\\@mediaMinS{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-3\\@mediaMinS{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-4\\@mediaMinS{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-5\\@mediaMinS{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-6\\@mediaMinS{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-7\\@mediaMinS{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-8\\@mediaMinS{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-9\\@mediaMinS{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-10\\@mediaMinS{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-11\\@mediaMinS{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinS{flex-basis:100%;flex-grow:0}@media (min-width: 50em){.form-group-line-col.mod-12\\@mediaMinS{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-1\\@mediaMinM{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-2\\@mediaMinM{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-3\\@mediaMinM{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-4\\@mediaMinM{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-5\\@mediaMinM{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-6\\@mediaMinM{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-7\\@mediaMinM{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-8\\@mediaMinM{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-9\\@mediaMinM{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-10\\@mediaMinM{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-11\\@mediaMinM{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinM{flex-basis:100%;flex-grow:0}@media (min-width: 64em){.form-group-line-col.mod-12\\@mediaMinM{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-1\\@mediaMinL{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-2\\@mediaMinL{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-3\\@mediaMinL{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-4\\@mediaMinL{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-5\\@mediaMinL{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-6\\@mediaMinL{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-7\\@mediaMinL{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-8\\@mediaMinL{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-9\\@mediaMinL{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-10\\@mediaMinL{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-11\\@mediaMinL{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinL{flex-basis:100%;flex-grow:0}@media (min-width: 80em){.form-group-line-col.mod-12\\@mediaMinL{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-1\\@mediaMinXL{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-2\\@mediaMinXL{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-3\\@mediaMinXL{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-4\\@mediaMinXL{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-5\\@mediaMinXL{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-6\\@mediaMinXL{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-7\\@mediaMinXL{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-8\\@mediaMinXL{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-9\\@mediaMinXL{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-10\\@mediaMinXL{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-11\\@mediaMinXL{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinXL{flex-basis:100%;flex-grow:0}@media (min-width: 85.375em){.form-group-line-col.mod-12\\@mediaMinXL{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-1\\@mediaMinXXL{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-2\\@mediaMinXXL{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-3\\@mediaMinXXL{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-4\\@mediaMinXXL{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-5\\@mediaMinXXL{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-6\\@mediaMinXXL{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-7\\@mediaMinXXL{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-8\\@mediaMinXXL{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-9\\@mediaMinXXL{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-10\\@mediaMinXXL{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-11\\@mediaMinXXL{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinXXL{flex-basis:100%;flex-grow:0}@media (min-width: 100em){.form-group-line-col.mod-12\\@mediaMinXXL{flex-basis:100%}}.form-group-line-col.mod-1\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-1\\@mediaMinXXXL{flex-basis:8.3333333333%}}.form-group-line-col.mod-2\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-2\\@mediaMinXXXL{flex-basis:16.6666666667%}}.form-group-line-col.mod-3\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-3\\@mediaMinXXXL{flex-basis:25%}}.form-group-line-col.mod-4\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-4\\@mediaMinXXXL{flex-basis:33.3333333333%}}.form-group-line-col.mod-5\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-5\\@mediaMinXXXL{flex-basis:41.6666666667%}}.form-group-line-col.mod-6\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-6\\@mediaMinXXXL{flex-basis:50%}}.form-group-line-col.mod-7\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-7\\@mediaMinXXXL{flex-basis:58.3333333333%}}.form-group-line-col.mod-8\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-8\\@mediaMinXXXL{flex-basis:66.6666666667%}}.form-group-line-col.mod-9\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-9\\@mediaMinXXXL{flex-basis:75%}}.form-group-line-col.mod-10\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-10\\@mediaMinXXXL{flex-basis:83.3333333333%}}.form-group-line-col.mod-11\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-11\\@mediaMinXXXL{flex-basis:91.6666666667%}}.form-group-line-col.mod-12\\@mediaMinXXXL{flex-basis:100%;flex-grow:0}@media (min-width: 120em){.form-group-line-col.mod-12\\@mediaMinXXXL{flex-basis:100%}}.form-group-label:is(.is-required,.required):not(:empty):after,.radiosfield-label:is(.is-required,.required):not(:empty):after,.checkboxesfield-label:is(.is-required,.required):not(:empty):after,.textfield-label:is(.is-required,.required):not(:empty):after{color:var(--palettes-error-700);display:inline-block;margin-left:.2em}@supports (content: \"*\"/\"\"){.form-group-label:is(.is-required,.required):not(:empty):after,.radiosfield-label:is(.is-required,.required):not(:empty):after,.checkboxesfield-label:is(.is-required,.required):not(:empty):after,.textfield-label:is(.is-required,.required):not(:empty):after{content:\"*\"/\"\"}}@supports not (content: \"*\"/\"\"){.form-group-label:is(.is-required,.required):not(:empty):after,.radiosfield-label:is(.is-required,.required):not(:empty):after,.checkboxesfield-label:is(.is-required,.required):not(:empty):after,.textfield-label:is(.is-required,.required):not(:empty):after{content:\"*\"}}.checkboxesfield.mod-framed,.radiosfield.mod-framed,.form.mod-framed .fieldsetWrapper{margin-bottom:0;background-color:var(--palettes-neutral-0);padding:0;box-shadow:-1px 0 var(--palettes-neutral-200),0 -1px var(--palettes-neutral-200),-1px -1px var(--palettes-neutral-200),-1px -1px var(--palettes-neutral-200) inset;transition:background-color var(--commons-animations-durations-standard);margin-bottom:0!important}.checkboxesfield.mod-framed:before,.checkboxesfield.mod-framed:after,.radiosfield.mod-framed:before,.radiosfield.mod-framed:after,.form.mod-framed .fieldsetWrapper:before,.form.mod-framed .fieldsetWrapper:after{content:\" \";display:table}.checkboxesfield.mod-framed:after,.radiosfield.mod-framed:after,.form.mod-framed .fieldsetWrapper:after{clear:both}.checkboxesfield.mod-framed:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):hover,.checkboxesfield.mod-framed:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):focus,.radiosfield.mod-framed:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):hover,.radiosfield.mod-framed:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):focus,.form.mod-framed .fieldsetWrapper:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):hover,.form.mod-framed .fieldsetWrapper:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):focus{position:relative;z-index:1;background-color:var(--palettes-neutral-0);box-shadow:-1px 0 var(--palettes-neutral-600),0 -1px var(--palettes-neutral-600),-1px -1px var(--palettes-neutral-600),-1px -1px var(--palettes-neutral-600) inset}.checkboxesfield.mod-framed:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):focus,.radiosfield.mod-framed:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):focus,.form.mod-framed .fieldsetWrapper:not(.is-disabled,:disabled,.is-error,.is-success,.is-valid,.is-warning,.is-invalid):focus{z-index:4;box-shadow:-1px 0 var(--palettes-neutral-600),0 -1px var(--palettes-neutral-600),-1px -1px var(--palettes-neutral-600),-1px -1px var(--palettes-neutral-600) inset,0 0 0 4px var(--palettes-neutral-50)}.checkboxesfield.mod-framed .radiosfield,.checkboxesfield.mod-framed .checkboxesfield,.radiosfield.mod-framed .radiosfield,.radiosfield.mod-framed .checkboxesfield,.form.mod-framed .fieldsetWrapper .radiosfield,.form.mod-framed .fieldsetWrapper .checkboxesfield{display:block;margin-top:var(--components-field-framed-side-padding);margin-bottom:0;padding:0 var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding)}.checkboxesfield.mod-framed.is-disabled,.checkboxesfield.mod-framed.is-readonly,.radiosfield.mod-framed.is-disabled,.radiosfield.mod-framed.is-readonly,.form.mod-framed .fieldsetWrapper.is-disabled,.form.mod-framed .fieldsetWrapper.is-readonly{background-color:var(--commons-disabled-background)}.checkboxesfield.mod-framed.is-loading:after,.radiosfield.mod-framed.is-loading:after,.form.mod-framed .fieldsetWrapper.is-loading:after{content:\"\";width:1.5rem;height:1.5rem;border-radius:var(--commons-borderRadius-full);line-height:.8rem;border-width:3px;inset:0;margin:auto;position:absolute;border-style:solid;animation-name:rotate;animation-duration:var(--commons-loading-speed);animation-timing-function:linear;animation-iteration-count:infinite;border-color:var(--commons-loading-frontground);border-top-color:transparent}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.checkboxesfield.mod-framed.is-loading:before,.checkboxesfield.mod-framed.is-loading:after,.radiosfield.mod-framed.is-loading:before,.radiosfield.mod-framed.is-loading:after,.form.mod-framed .fieldsetWrapper.is-loading:before,.form.mod-framed .fieldsetWrapper.is-loading:after{left:auto!important;bottom:auto!important;right:var(--components-field-framed-side-padding)!important;top:var(--components-field-framed-side-padding)!important}.checkboxesfield.mod-framed,.radiosfield.mod-framed{margin-top:0;padding:var(--components-field-framed-side-padding) var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InlineMessageComponent, selector: "lu-inline-message", inputs: ["label", "state", "size"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: i1.LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis"], exportAs: ["luTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
222
222
|
}
|
|
223
223
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
224
224
|
type: Component,
|
|
@@ -1 +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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"}
|
|
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: PortalContent;\n\n\t/**\n\t * Inline message for when the control is in error state\n\t */\n\t@Input()\n\terrorInlineMessage: PortalContent;\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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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Directive, Input, HostBinding, DestroyRef, InjectionToken, LOCALE_ID, input, booleanAttribute, viewChild, computed, Component, ViewEncapsulation, EventEmitter, ViewChild, Output,
|
|
2
|
+
import { inject, Directive, Input, HostBinding, DestroyRef, InjectionToken, LOCALE_ID, input, booleanAttribute, viewChild, signal, computed, Component, ViewEncapsulation, EventEmitter, ViewChild, Output, forwardRef, ChangeDetectionStrategy, numberAttribute } from '@angular/core';
|
|
3
3
|
import { FormFieldComponent, InputDirective, FORM_FIELD_INSTANCE } from '@lucca-front/ng/form-field';
|
|
4
4
|
import { filter, take, startWith } from 'rxjs/operators';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
6
6
|
import { NgControl, NgModel, FormControlDirective, FormControlName, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
7
|
-
import { takeUntilDestroyed
|
|
7
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
8
8
|
import { NgIf, NgTemplateOutlet } from '@angular/common';
|
|
9
9
|
import { getIntl, IntlParamsPipe, LuClass } from '@lucca-front/ng/core';
|
|
10
10
|
import { NumberFormat, NumberFormatDirective } from '@lucca-front/ng/number-format';
|
|
@@ -150,6 +150,7 @@ const luNumberFormatFieldTranslations = Translations$3;
|
|
|
150
150
|
class NumberFormatInputComponent {
|
|
151
151
|
constructor() {
|
|
152
152
|
this.#locale = inject(LOCALE_ID);
|
|
153
|
+
this.#destroyRef = inject(DestroyRef);
|
|
153
154
|
this.ngControl = injectNgControl();
|
|
154
155
|
this.formatStyle = input('decimal');
|
|
155
156
|
this.useAutoPrefixSuffix = input(undefined);
|
|
@@ -164,7 +165,7 @@ class NumberFormatInputComponent {
|
|
|
164
165
|
this.placeholder = input('');
|
|
165
166
|
this.hasClearer = input(false, { transform: booleanAttribute });
|
|
166
167
|
this.inputElementRef = viewChild('inputElement');
|
|
167
|
-
this.#suffixPrefixValue =
|
|
168
|
+
this.#suffixPrefixValue = signal(1);
|
|
168
169
|
this.#numberFormat = computed(() => new NumberFormat(this.formatOptions()));
|
|
169
170
|
this.prefixAddon = computed(() => {
|
|
170
171
|
if (this.useAutoPrefixSuffix() === undefined || this.useAutoPrefixSuffix() === false) {
|
|
@@ -203,9 +204,12 @@ class NumberFormatInputComponent {
|
|
|
203
204
|
unitDisplay: this.unitDisplay(),
|
|
204
205
|
}));
|
|
205
206
|
this.intl = getIntl(LU_NUMBERFORMATFIELD_TRANSLATIONS);
|
|
206
|
-
this.viewChild = viewChild;
|
|
207
207
|
}
|
|
208
208
|
#locale;
|
|
209
|
+
#destroyRef;
|
|
210
|
+
ngAfterViewInit() {
|
|
211
|
+
this.ngControl?.valueChanges?.pipe(takeUntilDestroyed(this.#destroyRef), startWith(this.ngControl.value)).subscribe((value) => this.#suffixPrefixValue.set(value));
|
|
212
|
+
}
|
|
209
213
|
#suffixPrefixValue;
|
|
210
214
|
#numberFormat;
|
|
211
215
|
clearValue() {
|
|
@@ -316,11 +320,11 @@ class TextInputComponent {
|
|
|
316
320
|
this.showPassword = !this.showPassword;
|
|
317
321
|
}
|
|
318
322
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
319
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.1", type: TextInputComponent, isStandalone: true, selector: "lu-text-input", inputs: { placeholder: "placeholder", hasClearer: ["hasClearer", "hasClearer", booleanAttribute], hasSearchIcon: ["hasSearchIcon", "hasSearchIcon", booleanAttribute], valueAlignRight: ["valueAlignRight", "valueAlignRight", booleanAttribute], prefix: "prefix", suffix: "suffix", type: "type", searchIcon: "searchIcon" }, outputs: { blur: "blur" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, static: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t<span class=\"textField-{{type}}\" luFormFieldId=\"{{type}}\" *ngIf=\"addon.content\">\n\t\t\t<span class=\"textField-label-{{type}}-item\" aria-hidden=\"true\">{{ addon.content }}</span>\n\t\t\t<span class=\"u-mask\">{{ addon.ariaLabel }}</span>\n\t\t</span>\n\t\t<span class=\"textField-{{type}}\" luFormFieldId=\"{{type}}\" *ngIf=\"addon.icon\">\n\t\t\t<span class=\"textField-label-{{type}}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t><span class=\"lucca-icon icon-{{addon.icon}}\"></span\n\t\t\t></span>\n\t\t</span>\n\t</ng-template>\n\n\t<ng-container *ngIf=\"prefix\">\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"textfieldAddon; context:{\n\t\t\ttype: 'prefix',\n\t\t\taddon: prefix\n }\"\n\t\t>\n\t\t</ng-container>\n\t</ng-container>\n\t<ng-container *ngIf=\"suffix\">\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"textfieldAddon; context:{\n\t\t\ttype: 'suffix',\n\t\t\taddon: suffix\n }\"\n\t\t>\n\t\t</ng-container>\n\t</ng-container>\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\t[type]=\"type\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button class=\"textField-input-affix-clear clear\" type=\"button\" (click)=\"clearValue()\" *ngIf=\"hasClearer && inputElement.value\">\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signClose\"></span>\n\t\t\t\t<span class=\"u-mask\">{{ intl.clear }}</span>\n\t\t\t</button>\n\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{searchIcon}}\" *ngIf=\"hasSearchIcon\"></span>\n\t\t\t<button\n\t\t\t\t[attr.aria-pressed]=\"showPassword\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"button mod-onlyIcon mod-text textField-input-affix-
|
|
323
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.1", type: TextInputComponent, isStandalone: true, selector: "lu-text-input", inputs: { placeholder: "placeholder", hasClearer: ["hasClearer", "hasClearer", booleanAttribute], hasSearchIcon: ["hasSearchIcon", "hasSearchIcon", booleanAttribute], valueAlignRight: ["valueAlignRight", "valueAlignRight", booleanAttribute], prefix: "prefix", suffix: "suffix", type: "type", searchIcon: "searchIcon" }, outputs: { blur: "blur" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, static: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t<span class=\"textField-{{type}}\" luFormFieldId=\"{{type}}\" *ngIf=\"addon.content\">\n\t\t\t<span class=\"textField-label-{{type}}-item\" aria-hidden=\"true\">{{ addon.content }}</span>\n\t\t\t<span class=\"u-mask\">{{ addon.ariaLabel }}</span>\n\t\t</span>\n\t\t<span class=\"textField-{{type}}\" luFormFieldId=\"{{type}}\" *ngIf=\"addon.icon\">\n\t\t\t<span class=\"textField-label-{{type}}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t><span class=\"lucca-icon icon-{{addon.icon}}\"></span\n\t\t\t></span>\n\t\t</span>\n\t</ng-template>\n\n\t<ng-container *ngIf=\"prefix\">\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"textfieldAddon; context:{\n\t\t\ttype: 'prefix',\n\t\t\taddon: prefix\n }\"\n\t\t>\n\t\t</ng-container>\n\t</ng-container>\n\t<ng-container *ngIf=\"suffix\">\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"textfieldAddon; context:{\n\t\t\ttype: 'suffix',\n\t\t\taddon: suffix\n }\"\n\t\t>\n\t\t</ng-container>\n\t</ng-container>\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\t[type]=\"type\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button class=\"textField-input-affix-clear clear\" type=\"button\" (click)=\"clearValue()\" *ngIf=\"hasClearer && inputElement.value\">\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signClose\"></span>\n\t\t\t\t<span class=\"u-mask\">{{ intl.clear }}</span>\n\t\t\t</button>\n\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{searchIcon}}\" *ngIf=\"hasSearchIcon\"></span>\n\t\t\t<button\n\t\t\t\t[attr.aria-pressed]=\"showPassword\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"button mod-onlyIcon mod-text textField-input-affix-toggle\"\n\t\t\t\t(click)=\"togglePasswordVisibility()\"\n\t\t\t\t*ngIf=\"hasTogglePasswordVisibilityIcon()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-{{showPassword ? 'unwatch' : 'watch'}}\"></span>\n\t\t\t\t<span class=\"u-mask\">{{ intl.togglePasswordVisibility }}</span>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n</div>\n", dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FormFieldIdDirective, selector: "[luFormFieldId]", inputs: ["luFormFieldId", "labelledByStrategy"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
320
324
|
}
|
|
321
325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
322
326
|
type: Component,
|
|
323
|
-
args: [{ selector: 'lu-text-input', standalone: true, imports: [FormFieldComponent, InputDirective, NgIf, ReactiveFormsModule, FormFieldIdDirective, NgTemplateOutlet], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t<span class=\"textField-{{type}}\" luFormFieldId=\"{{type}}\" *ngIf=\"addon.content\">\n\t\t\t<span class=\"textField-label-{{type}}-item\" aria-hidden=\"true\">{{ addon.content }}</span>\n\t\t\t<span class=\"u-mask\">{{ addon.ariaLabel }}</span>\n\t\t</span>\n\t\t<span class=\"textField-{{type}}\" luFormFieldId=\"{{type}}\" *ngIf=\"addon.icon\">\n\t\t\t<span class=\"textField-label-{{type}}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t><span class=\"lucca-icon icon-{{addon.icon}}\"></span\n\t\t\t></span>\n\t\t</span>\n\t</ng-template>\n\n\t<ng-container *ngIf=\"prefix\">\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"textfieldAddon; context:{\n\t\t\ttype: 'prefix',\n\t\t\taddon: prefix\n }\"\n\t\t>\n\t\t</ng-container>\n\t</ng-container>\n\t<ng-container *ngIf=\"suffix\">\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"textfieldAddon; context:{\n\t\t\ttype: 'suffix',\n\t\t\taddon: suffix\n }\"\n\t\t>\n\t\t</ng-container>\n\t</ng-container>\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\t[type]=\"type\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button class=\"textField-input-affix-clear clear\" type=\"button\" (click)=\"clearValue()\" *ngIf=\"hasClearer && inputElement.value\">\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signClose\"></span>\n\t\t\t\t<span class=\"u-mask\">{{ intl.clear }}</span>\n\t\t\t</button>\n\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{searchIcon}}\" *ngIf=\"hasSearchIcon\"></span>\n\t\t\t<button\n\t\t\t\t[attr.aria-pressed]=\"showPassword\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"button mod-onlyIcon mod-text textField-input-affix-
|
|
327
|
+
args: [{ selector: 'lu-text-input', standalone: true, imports: [FormFieldComponent, InputDirective, NgIf, ReactiveFormsModule, FormFieldIdDirective, NgTemplateOutlet], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t<span class=\"textField-{{type}}\" luFormFieldId=\"{{type}}\" *ngIf=\"addon.content\">\n\t\t\t<span class=\"textField-label-{{type}}-item\" aria-hidden=\"true\">{{ addon.content }}</span>\n\t\t\t<span class=\"u-mask\">{{ addon.ariaLabel }}</span>\n\t\t</span>\n\t\t<span class=\"textField-{{type}}\" luFormFieldId=\"{{type}}\" *ngIf=\"addon.icon\">\n\t\t\t<span class=\"textField-label-{{type}}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t><span class=\"lucca-icon icon-{{addon.icon}}\"></span\n\t\t\t></span>\n\t\t</span>\n\t</ng-template>\n\n\t<ng-container *ngIf=\"prefix\">\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"textfieldAddon; context:{\n\t\t\ttype: 'prefix',\n\t\t\taddon: prefix\n }\"\n\t\t>\n\t\t</ng-container>\n\t</ng-container>\n\t<ng-container *ngIf=\"suffix\">\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"textfieldAddon; context:{\n\t\t\ttype: 'suffix',\n\t\t\taddon: suffix\n }\"\n\t\t>\n\t\t</ng-container>\n\t</ng-container>\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\t[type]=\"type\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button class=\"textField-input-affix-clear clear\" type=\"button\" (click)=\"clearValue()\" *ngIf=\"hasClearer && inputElement.value\">\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signClose\"></span>\n\t\t\t\t<span class=\"u-mask\">{{ intl.clear }}</span>\n\t\t\t</button>\n\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{searchIcon}}\" *ngIf=\"hasSearchIcon\"></span>\n\t\t\t<button\n\t\t\t\t[attr.aria-pressed]=\"showPassword\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"button mod-onlyIcon mod-text textField-input-affix-toggle\"\n\t\t\t\t(click)=\"togglePasswordVisibility()\"\n\t\t\t\t*ngIf=\"hasTogglePasswordVisibilityIcon()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-{{showPassword ? 'unwatch' : 'watch'}}\"></span>\n\t\t\t\t<span class=\"u-mask\">{{ intl.togglePasswordVisibility }}</span>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n</div>\n" }]
|
|
324
328
|
}], propDecorators: { placeholder: [{
|
|
325
329
|
type: Input
|
|
326
330
|
}], hasClearer: [{
|
|
@@ -427,7 +431,7 @@ class MultilanguageInputComponent {
|
|
|
427
431
|
useExisting: forwardRef(() => MultilanguageInputComponent),
|
|
428
432
|
multi: true,
|
|
429
433
|
},
|
|
430
|
-
], ngImport: i0, template: "<div class=\"textField\">\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"text\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[(ngModel)]=\"invariant().value\"\n\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t(blur)=\"onTouched?.()\"\n\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button\n\t\t\t\t[luPopover2]=\"popoverMultilanguage\"\n\t\t\t\tluPopoverNoCloseButton\n\t\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t\t[luTooltip]=\"intl.toggleMultilanguage\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"button mod-onlyIcon mod-text textField-input-affix-toggle\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signTranslation\"></span>\n\t\t\t</button>\n\t\t\t<ng-template #popoverMultilanguage>\n\t\t\t\t<div class=\"popover-contentOptional\" [style.width.px]=\"inputElement.clientWidth + 16\">\n\t\t\t\t\t<div class=\"u-displayFlex u-gapXS u-flexDirectionColumn\">\n\t\t\t\t\t\t@for (row of panelInputs(); track row.cultureCode) {\n\t\t\t\t\t\t<lu-form-field [label]=\"intl.translateTo | intlParams: {lang: getLocaleDisplayName(row.cultureCode)}\" hiddenLabel>\n\t\t\t\t\t\t\t<lu-text-input\n\t\t\t\t\t\t\t\t[suffix]=\"{content: row.cultureCode, ariaLabel: ''}\"\n\t\t\t\t\t\t\t\t[(ngModel)]=\"row.value\"\n\t\t\t\t\t\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t></lu-text-input>\n\t\t\t\t\t\t</lu-form-field>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</div>\n\t</div>\n</div>\n", styles: [".popover-contentOptional{padding:var(--pr-t-spacings-100)!important;max-height:20rem;overflow:auto}.popover-contentOptional:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--commons-borderRadius-L)}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["label", "hiddenLabel", "rolePresentationLabel", "statusControl", "tooltip", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "layout", "counter"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: PopoverDirective, selector: "[luPopover2]", inputs: ["luPopover2", "luPopoverPosition", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverOpenDelay", "luPopoverCloseDelay"], exportAs: ["luPopover2"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["placeholder", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "type", "searchIcon"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
434
|
+
], ngImport: i0, template: "<div class=\"textField\">\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"text\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[(ngModel)]=\"invariant().value\"\n\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t(blur)=\"onTouched?.()\"\n\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button\n\t\t\t\t[luPopover2]=\"popoverMultilanguage\"\n\t\t\t\tluPopoverNoCloseButton\n\t\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t\t[luTooltip]=\"intl.toggleMultilanguage\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"button mod-onlyIcon mod-text textField-input-affix-toggle\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signTranslation\"></span>\n\t\t\t</button>\n\t\t\t<ng-template #popoverMultilanguage>\n\t\t\t\t<div class=\"popover-contentOptional\" [style.width.px]=\"inputElement.clientWidth + 16\">\n\t\t\t\t\t<div class=\"u-displayFlex u-gapXS u-flexDirectionColumn\">\n\t\t\t\t\t\t@for (row of panelInputs(); track row.cultureCode) {\n\t\t\t\t\t\t<lu-form-field [label]=\"intl.translateTo | intlParams: {lang: getLocaleDisplayName(row.cultureCode)}\" hiddenLabel>\n\t\t\t\t\t\t\t<lu-text-input\n\t\t\t\t\t\t\t\t[suffix]=\"{content: row.cultureCode, ariaLabel: ''}\"\n\t\t\t\t\t\t\t\t[(ngModel)]=\"row.value\"\n\t\t\t\t\t\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t></lu-text-input>\n\t\t\t\t\t\t</lu-form-field>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</div>\n\t</div>\n</div>\n", styles: [".popover-contentOptional{padding:var(--pr-t-spacings-100)!important;max-height:20rem;overflow:auto}.popover-contentOptional:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--commons-borderRadius-L)}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["label", "hiddenLabel", "rolePresentationLabel", "statusControl", "tooltip", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "layout", "counter"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: PopoverDirective, selector: "[luPopover2]", inputs: ["luPopover2", "luPopoverPosition", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverOpenDelay", "luPopoverCloseDelay"], exportAs: ["luPopover2"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["placeholder", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "type", "searchIcon"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis"], exportAs: ["luTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
431
435
|
}
|
|
432
436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MultilanguageInputComponent, decorators: [{
|
|
433
437
|
type: Component,
|
|
@@ -587,13 +591,13 @@ class RadioComponent {
|
|
|
587
591
|
});
|
|
588
592
|
}
|
|
589
593
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
590
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.1", type: RadioComponent, isStandalone: true, selector: "lu-radio", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute], inlineMessage: "inlineMessage" }, host: { properties: { "id": "this.id" }, classAttribute: "form-field" }, providers: [LuClass], usesOnChanges: true, ngImport: i0, template: "<label class=\"formLabel\" id=\"{{id}}-label\" for=\"{{id}}-input\">\n\t<ng-content></ng-content>\n</label>\n<span class=\"radioField\">\n\t<input\n\t\t[formControl]=\"formControl\"\n\t\t[attr.disabled]=\"(formControl.disabled || disabled) ? 'disabled' : null\"\n\t\ttype=\"radio\"\n\t\tclass=\"radioField-input\"\n\t\tid=\"{{id}}-input\"\n\t\t[attr.name]=\"name\"\n\t\t[name]=\"name\"\n\t\t[value]=\"value\"\n\t\tluInput\n\t\tluInputStandalone\n\t\tattr.aria-labelledby=\"{{id}}-label\"\n\t\tattr.aria-describedby=\"{{id}}-message\"\n\t/>\n\t<span class=\"radioField-icon\" aria-hidden=\"true\">\n\t\t<span class=\"radioField-icon-check\"></span>\n\t</span>\n</span>\n<lu-inline-message *ngIf=\"inlineMessage\" [label]=\"inlineMessage\" id=\"{{id}}-message\"></lu-inline-message>\n", styles: [".radioField{--component-radioField-size: 1.25rem;--component-radioField-top: var(--pr-t-spacings-25);--component-radioField-borderRadius: var(--commons-borderRadius-full);position:relative;width:fit-content;height:fit-content;display:grid;grid-template-areas:\"radio\";grid-template-columns:var(--component-radioField-size);grid-template-rows:var(--component-radioField-size)}.radioField-icon{border:2px solid var(--palettes-neutral-700);border-radius:var(--component-radioField-borderRadius);color:var(--palettes-neutral-0);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--palettes-neutral-0);cursor:pointer;grid-area:radio;display:flex}@media (prefers-reduced-motion: reduce){.radioField-icon{transition-property:none}}.radioField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:6px}.radioField-icon-check{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transform:scale(0);transition-property:transform;transition-duration:var(--commons-animations-durations-fast)}@media (prefers-reduced-motion: reduce){.radioField-icon-check{transition-property:none}}.radioField-icon-check:before{content:\"\";position:absolute;inset:0;background-color:transparent;border-radius:var(--commons-borderRadius-full);border:2px solid var(--palettes-neutral-0)}.radioField-input{z-index:1;opacity
|
|
594
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.1", type: RadioComponent, isStandalone: true, selector: "lu-radio", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute], inlineMessage: "inlineMessage" }, host: { properties: { "id": "this.id" }, classAttribute: "form-field" }, providers: [LuClass], usesOnChanges: true, ngImport: i0, template: "<label class=\"formLabel\" id=\"{{id}}-label\" for=\"{{id}}-input\">\n\t<ng-content></ng-content>\n</label>\n<span class=\"radioField\">\n\t<input\n\t\t[formControl]=\"formControl\"\n\t\t[attr.disabled]=\"(formControl.disabled || disabled) ? 'disabled' : null\"\n\t\ttype=\"radio\"\n\t\tclass=\"radioField-input\"\n\t\tid=\"{{id}}-input\"\n\t\t[attr.name]=\"name\"\n\t\t[name]=\"name\"\n\t\t[value]=\"value\"\n\t\tluInput\n\t\tluInputStandalone\n\t\tattr.aria-labelledby=\"{{id}}-label\"\n\t\tattr.aria-describedby=\"{{id}}-message\"\n\t/>\n\t<span class=\"radioField-icon\" aria-hidden=\"true\">\n\t\t<span class=\"radioField-icon-check\"></span>\n\t</span>\n</span>\n<lu-inline-message *ngIf=\"inlineMessage\" [label]=\"inlineMessage\" id=\"{{id}}-message\"></lu-inline-message>\n", styles: [".radioField{--component-radioField-size: 1.25rem;--component-radioField-top: var(--pr-t-spacings-25);--component-radioField-borderRadius: var(--commons-borderRadius-full);position:relative;width:fit-content;height:fit-content;display:grid;grid-template-areas:\"radio\";grid-template-columns:var(--component-radioField-size);grid-template-rows:var(--component-radioField-size)}.radioField-icon{border:2px solid var(--palettes-neutral-700);border-radius:var(--component-radioField-borderRadius);color:var(--palettes-neutral-0);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--palettes-neutral-0);cursor:pointer;grid-area:radio;display:flex}@media (prefers-reduced-motion: reduce){.radioField-icon{transition-property:none}}.radioField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:6px}.radioField-icon-check{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transform:scale(0);transition-property:transform;transition-duration:var(--commons-animations-durations-fast)}@media (prefers-reduced-motion: reduce){.radioField-icon-check{transition-property:none}}.radioField-icon-check:before{content:\"\";position:absolute;inset:0;background-color:transparent;border-radius:var(--commons-borderRadius-full);border:2px solid var(--palettes-neutral-0)}.radioField-input{z-index:1;opacity:.0001;cursor:pointer;grid-area:radio;width:100%;height:100%}.radioField.mod-S{--component-radioField-size: 1rem}.radioField-input:focus-visible~.radioField-icon:after{outline:2px solid var(--palettes-product-700);outline-offset:2px}.radioField-input:hover~.radioField-icon{border-color:var(--palettes-neutral-600)}.radioField-input:active~.radioField-icon{border-color:var(--palettes-neutral-800)}.radioField-input:disabled{cursor:default}.radioField-input:disabled~.radioField-icon{border-color:var(--palettes-neutral-500)}.radioField-input[aria-invalid=true]~.radioField-icon{border-color:var(--palettes-error-700)}.radioField-input[aria-invalid=true]:hover~.radioField-icon{border-color:var(--palettes-error-600)}.radioField-input[aria-invalid=true]:active~.radioField-icon{border-color:var(--palettes-error-800)}.radioField-input:checked~.radioField-icon{background-color:var(--palettes-product-700);border-color:var(--palettes-product-700)}.radioField-input:checked~.radioField-icon .radioField-icon-check{transform:scale(1)}.radioField-input:checked:hover~.radioField-icon{background-color:var(--palettes-product-600);border-color:var(--palettes-product-600)}.radioField-input:checked:active~.radioField-icon{background-color:var(--palettes-product-800);border-color:var(--palettes-product-800)}.radioField-input:checked:disabled~.radioField-icon{background-color:var(--palettes-neutral-500);border-color:var(--palettes-neutral-500);color:var(--palettes-neutral-500)}.radioField-input:checked[aria-invalid=true]~.radioField-icon{background-color:var(--palettes-error-700);border-color:var(--palettes-error-700)}.radioField-input:checked[aria-invalid=true]:hover~.radioField-icon{background-color:var(--palettes-error-600);border-color:var(--palettes-error-600)}.radioField-input:checked[aria-invalid=true]:active~.radioField-icon{background-color:var(--palettes-error-800);border-color:var(--palettes-error-800)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "component", type: InlineMessageComponent, selector: "lu-inline-message", inputs: ["label", "state", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
591
595
|
}
|
|
592
596
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: RadioComponent, decorators: [{
|
|
593
597
|
type: Component,
|
|
594
598
|
args: [{ selector: 'lu-radio', standalone: true, imports: [ReactiveFormsModule, InputDirective, InlineMessageComponent, NgIf], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
595
599
|
class: 'form-field',
|
|
596
|
-
}, providers: [LuClass], template: "<label class=\"formLabel\" id=\"{{id}}-label\" for=\"{{id}}-input\">\n\t<ng-content></ng-content>\n</label>\n<span class=\"radioField\">\n\t<input\n\t\t[formControl]=\"formControl\"\n\t\t[attr.disabled]=\"(formControl.disabled || disabled) ? 'disabled' : null\"\n\t\ttype=\"radio\"\n\t\tclass=\"radioField-input\"\n\t\tid=\"{{id}}-input\"\n\t\t[attr.name]=\"name\"\n\t\t[name]=\"name\"\n\t\t[value]=\"value\"\n\t\tluInput\n\t\tluInputStandalone\n\t\tattr.aria-labelledby=\"{{id}}-label\"\n\t\tattr.aria-describedby=\"{{id}}-message\"\n\t/>\n\t<span class=\"radioField-icon\" aria-hidden=\"true\">\n\t\t<span class=\"radioField-icon-check\"></span>\n\t</span>\n</span>\n<lu-inline-message *ngIf=\"inlineMessage\" [label]=\"inlineMessage\" id=\"{{id}}-message\"></lu-inline-message>\n", styles: [".radioField{--component-radioField-size: 1.25rem;--component-radioField-top: var(--pr-t-spacings-25);--component-radioField-borderRadius: var(--commons-borderRadius-full);position:relative;width:fit-content;height:fit-content;display:grid;grid-template-areas:\"radio\";grid-template-columns:var(--component-radioField-size);grid-template-rows:var(--component-radioField-size)}.radioField-icon{border:2px solid var(--palettes-neutral-700);border-radius:var(--component-radioField-borderRadius);color:var(--palettes-neutral-0);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--palettes-neutral-0);cursor:pointer;grid-area:radio;display:flex}@media (prefers-reduced-motion: reduce){.radioField-icon{transition-property:none}}.radioField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:6px}.radioField-icon-check{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transform:scale(0);transition-property:transform;transition-duration:var(--commons-animations-durations-fast)}@media (prefers-reduced-motion: reduce){.radioField-icon-check{transition-property:none}}.radioField-icon-check:before{content:\"\";position:absolute;inset:0;background-color:transparent;border-radius:var(--commons-borderRadius-full);border:2px solid var(--palettes-neutral-0)}.radioField-input{z-index:1;opacity
|
|
600
|
+
}, providers: [LuClass], template: "<label class=\"formLabel\" id=\"{{id}}-label\" for=\"{{id}}-input\">\n\t<ng-content></ng-content>\n</label>\n<span class=\"radioField\">\n\t<input\n\t\t[formControl]=\"formControl\"\n\t\t[attr.disabled]=\"(formControl.disabled || disabled) ? 'disabled' : null\"\n\t\ttype=\"radio\"\n\t\tclass=\"radioField-input\"\n\t\tid=\"{{id}}-input\"\n\t\t[attr.name]=\"name\"\n\t\t[name]=\"name\"\n\t\t[value]=\"value\"\n\t\tluInput\n\t\tluInputStandalone\n\t\tattr.aria-labelledby=\"{{id}}-label\"\n\t\tattr.aria-describedby=\"{{id}}-message\"\n\t/>\n\t<span class=\"radioField-icon\" aria-hidden=\"true\">\n\t\t<span class=\"radioField-icon-check\"></span>\n\t</span>\n</span>\n<lu-inline-message *ngIf=\"inlineMessage\" [label]=\"inlineMessage\" id=\"{{id}}-message\"></lu-inline-message>\n", styles: [".radioField{--component-radioField-size: 1.25rem;--component-radioField-top: var(--pr-t-spacings-25);--component-radioField-borderRadius: var(--commons-borderRadius-full);position:relative;width:fit-content;height:fit-content;display:grid;grid-template-areas:\"radio\";grid-template-columns:var(--component-radioField-size);grid-template-rows:var(--component-radioField-size)}.radioField-icon{border:2px solid var(--palettes-neutral-700);border-radius:var(--component-radioField-borderRadius);color:var(--palettes-neutral-0);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--palettes-neutral-0);cursor:pointer;grid-area:radio;display:flex}@media (prefers-reduced-motion: reduce){.radioField-icon{transition-property:none}}.radioField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:6px}.radioField-icon-check{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transform:scale(0);transition-property:transform;transition-duration:var(--commons-animations-durations-fast)}@media (prefers-reduced-motion: reduce){.radioField-icon-check{transition-property:none}}.radioField-icon-check:before{content:\"\";position:absolute;inset:0;background-color:transparent;border-radius:var(--commons-borderRadius-full);border:2px solid var(--palettes-neutral-0)}.radioField-input{z-index:1;opacity:.0001;cursor:pointer;grid-area:radio;width:100%;height:100%}.radioField.mod-S{--component-radioField-size: 1rem}.radioField-input:focus-visible~.radioField-icon:after{outline:2px solid var(--palettes-product-700);outline-offset:2px}.radioField-input:hover~.radioField-icon{border-color:var(--palettes-neutral-600)}.radioField-input:active~.radioField-icon{border-color:var(--palettes-neutral-800)}.radioField-input:disabled{cursor:default}.radioField-input:disabled~.radioField-icon{border-color:var(--palettes-neutral-500)}.radioField-input[aria-invalid=true]~.radioField-icon{border-color:var(--palettes-error-700)}.radioField-input[aria-invalid=true]:hover~.radioField-icon{border-color:var(--palettes-error-600)}.radioField-input[aria-invalid=true]:active~.radioField-icon{border-color:var(--palettes-error-800)}.radioField-input:checked~.radioField-icon{background-color:var(--palettes-product-700);border-color:var(--palettes-product-700)}.radioField-input:checked~.radioField-icon .radioField-icon-check{transform:scale(1)}.radioField-input:checked:hover~.radioField-icon{background-color:var(--palettes-product-600);border-color:var(--palettes-product-600)}.radioField-input:checked:active~.radioField-icon{background-color:var(--palettes-product-800);border-color:var(--palettes-product-800)}.radioField-input:checked:disabled~.radioField-icon{background-color:var(--palettes-neutral-500);border-color:var(--palettes-neutral-500);color:var(--palettes-neutral-500)}.radioField-input:checked[aria-invalid=true]~.radioField-icon{background-color:var(--palettes-error-700);border-color:var(--palettes-error-700)}.radioField-input:checked[aria-invalid=true]:hover~.radioField-icon{background-color:var(--palettes-error-600);border-color:var(--palettes-error-600)}.radioField-input:checked[aria-invalid=true]:active~.radioField-icon{background-color:var(--palettes-error-800);border-color:var(--palettes-error-800)}\n"] }]
|
|
597
601
|
}], propDecorators: { value: [{
|
|
598
602
|
type: Input,
|
|
599
603
|
args: [{ required: true }]
|