@lucca-front/ng 21.1.2 → 21.1.3
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/fesm2022/lucca-front-ng-callout.mjs +2 -2
- package/fesm2022/lucca-front-ng-callout.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select.mjs +5 -2
- package/fesm2022/lucca-front-ng-core-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-date2.mjs +2 -2
- package/fesm2022/lucca-front-ng-date2.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-dialog.mjs +1 -1
- package/fesm2022/lucca-front-ng-dialog.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-form-field.mjs +4 -4
- package/fesm2022/lucca-front-ng-form-field.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms-phone-number-input.mjs +2 -2
- package/fesm2022/lucca-front-ng-forms-phone-number-input.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs +163 -64
- package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms.mjs +14 -14
- package/fesm2022/lucca-front-ng-forms.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-highlight-data.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-multi-select.mjs +20 -10
- package/fesm2022/lucca-front-ng-multi-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-resource-card.mjs +2 -2
- package/fesm2022/lucca-front-ng-resource-card.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-simple-select.mjs +5 -4
- package/fesm2022/lucca-front-ng-simple-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-skeleton.mjs +4 -4
- package/fesm2022/lucca-front-ng-skeleton.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-toast.mjs +2 -2
- package/fesm2022/lucca-front-ng-toast.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-tooltip.mjs +129 -162
- package/fesm2022/lucca-front-ng-tooltip.mjs.map +1 -1
- package/package.json +14 -14
- package/schematics/lib/component-mapper.js +1 -1
- package/schematics/lib/css-mapper.js +1 -1
- package/schematics/lu-button/index.js +1 -1
- package/schematics/lu-container/index.js +1 -1
- package/schematics/lu-icon/index.js +1 -1
- package/schematics/lu-loading/index.js +1 -1
- package/schematics/lu-select/index.js +1 -1
- package/schematics/lu-text-input/index.js +1 -1
- package/schematics/new-icons/index.js +1 -1
- package/src/components/cdk/_global.scss +8 -8
- package/types/lucca-front-ng-forms-rich-text-input.d.ts +69 -14
- package/types/lucca-front-ng-tooltip.d.ts +9 -17
|
@@ -250,11 +250,11 @@ class TextInputComponent {
|
|
|
250
250
|
this.showPassword.set(!_showPassword);
|
|
251
251
|
}
|
|
252
252
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
253
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TextInputComponent, isStandalone: true, selector: "lu-text-input", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, hasClearer: { classPropertyName: "hasClearer", publicName: "hasClearer", isSignal: true, isRequired: false, transformFunction: null }, hasSearchIcon: { classPropertyName: "hasSearchIcon", publicName: "hasSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, valueAlignRight: { classPropertyName: "valueAlignRight", publicName: "valueAlignRight", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, searchIcon: { classPropertyName: "searchIcon", publicName: "searchIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" aria-hidden=\"true\">{{ addon.content }}</span>\n\t\t\t\t<span class=\"pr-u-mask\">{{ addon.ariaLabel }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\t[type]=\"typeRef()\"\n\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t[mask]=\"mask()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear (click)=\"clearValue()\" class=\"textField-input-affix-clear\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t\t@if (hasSearchIcon()) {\n\t\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{ searchIcon() }}\"></span>\n\t\t\t}\n\t\t\t@if (hasTogglePasswordVisibilityIcon()) {\n\t\t\t\t<button\n\t\t\t\t\t[attr.aria-pressed]=\"showPassword()\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t\t\t(click)=\"togglePasswordVisibility()\"\n\t\t\t\t>\n\t\t\t\t\t<span aria-hidden=\"true\" [class]=\"`lucca-icon icon-${showPassword() ? 'unwatch' : 'watch'}`\"></span>\n\t\t\t\t\t<span class=\"pr-u-mask\">{{ intl().togglePasswordVisibility }}</span>\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t
|
|
253
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TextInputComponent, isStandalone: true, selector: "lu-text-input", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, hasClearer: { classPropertyName: "hasClearer", publicName: "hasClearer", isSignal: true, isRequired: false, transformFunction: null }, hasSearchIcon: { classPropertyName: "hasSearchIcon", publicName: "hasSearchIcon", isSignal: true, isRequired: false, transformFunction: null }, valueAlignRight: { classPropertyName: "valueAlignRight", publicName: "valueAlignRight", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, searchIcon: { classPropertyName: "searchIcon", publicName: "searchIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" aria-hidden=\"true\">{{ addon.content }}</span>\n\t\t\t\t<span class=\"pr-u-mask\">{{ addon.ariaLabel }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\t[type]=\"typeRef()\"\n\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t[mask]=\"mask()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear (click)=\"clearValue()\" class=\"textField-input-affix-clear\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t\t@if (hasSearchIcon()) {\n\t\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{ searchIcon() }}\"></span>\n\t\t\t}\n\t\t\t@if (hasTogglePasswordVisibilityIcon()) {\n\t\t\t\t<button\n\t\t\t\t\t[attr.aria-pressed]=\"showPassword()\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t\t\t(click)=\"togglePasswordVisibility()\"\n\t\t\t\t>\n\t\t\t\t\t<span aria-hidden=\"true\" [class]=\"`lucca-icon icon-${showPassword() ? 'unwatch' : 'watch'}`\"></span>\n\t\t\t\t\t<span class=\"pr-u-mask\">{{ intl().togglePasswordVisibility }}</span>\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t@if (prefix(); as prefix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\t\taddon: prefix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t\t{{ ngControl.value }}\n\t\t@if (suffix()) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\t\taddon: suffix(),\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FormFieldIdDirective, selector: "[luFormFieldId]", inputs: ["luFormFieldId", "labelledByStrategy"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
254
254
|
}
|
|
255
255
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
256
256
|
type: Component,
|
|
257
|
-
args: [{ selector: 'lu-text-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NgTemplateOutlet, NgxMaskDirective, ClearComponent, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNgxMask()], template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" aria-hidden=\"true\">{{ addon.content }}</span>\n\t\t\t\t<span class=\"pr-u-mask\">{{ addon.ariaLabel }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\t[type]=\"typeRef()\"\n\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t[mask]=\"mask()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear (click)=\"clearValue()\" class=\"textField-input-affix-clear\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t\t@if (hasSearchIcon()) {\n\t\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{ searchIcon() }}\"></span>\n\t\t\t}\n\t\t\t@if (hasTogglePasswordVisibilityIcon()) {\n\t\t\t\t<button\n\t\t\t\t\t[attr.aria-pressed]=\"showPassword()\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t\t\t(click)=\"togglePasswordVisibility()\"\n\t\t\t\t>\n\t\t\t\t\t<span aria-hidden=\"true\" [class]=\"`lucca-icon icon-${showPassword() ? 'unwatch' : 'watch'}`\"></span>\n\t\t\t\t\t<span class=\"pr-u-mask\">{{ intl().togglePasswordVisibility }}</span>\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t
|
|
257
|
+
args: [{ selector: 'lu-text-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NgTemplateOutlet, NgxMaskDirective, ClearComponent, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNgxMask()], template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #textfieldAddon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" aria-hidden=\"true\">{{ addon.content }}</span>\n\t\t\t\t<span class=\"pr-u-mask\">{{ addon.ariaLabel }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\t[type]=\"typeRef()\"\n\t\t\t[attr.autocomplete]=\"autocomplete() ? autocomplete() : null\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t(blur)=\"blur.emit($event)\"\n\t\t\t[mask]=\"mask()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear (click)=\"clearValue()\" class=\"textField-input-affix-clear\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t\t@if (hasSearchIcon()) {\n\t\t\t\t<span aria-hidden=\"true\" class=\"textField-input-affix-icon lucca-icon icon-{{ searchIcon() }}\"></span>\n\t\t\t}\n\t\t\t@if (hasTogglePasswordVisibilityIcon()) {\n\t\t\t\t<button\n\t\t\t\t\t[attr.aria-pressed]=\"showPassword()\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t\t\t(click)=\"togglePasswordVisibility()\"\n\t\t\t\t>\n\t\t\t\t\t<span aria-hidden=\"true\" [class]=\"`lucca-icon icon-${showPassword() ? 'unwatch' : 'watch'}`\"></span>\n\t\t\t\t\t<span class=\"pr-u-mask\">{{ intl().togglePasswordVisibility }}</span>\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\ttextfieldAddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t@if (prefix(); as prefix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\t\taddon: prefix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t\t{{ ngControl.value }}\n\t\t@if (suffix()) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\ttextfieldAddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\t\taddon: suffix(),\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n" }]
|
|
258
258
|
}], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], hasClearer: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasClearer", required: false }] }], hasSearchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSearchIcon", required: false }] }], valueAlignRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAlignRight", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], searchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchIcon", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], blur: [{ type: i0.Output, args: ["blur"] }] } });
|
|
259
259
|
|
|
260
260
|
const Translations$3 = {
|
|
@@ -339,7 +339,7 @@ class MultilanguageInputComponent {
|
|
|
339
339
|
useExisting: forwardRef(() => MultilanguageInputComponent),
|
|
340
340
|
multi: true,
|
|
341
341
|
},
|
|
342
|
-
], ngImport: i0, template: "<div class=\"textField\">\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"text\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[(ngModel)]=\"invariant().value\"\n\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t(blur)=\"onTouched?.()\"\n\t\t\t(focus)=\"openOnFocus() ? popoverRef.openPopover(true, true, true) : null\"\n\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button\n\t\t\t\t[luPopover2]=\"popoverMultilanguage\"\n\t\t\t\t#popoverRef=\"luPopover2\"\n\t\t\t\tluPopoverNoCloseButton\n\t\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t\t[luTooltip]=\"intl().toggleMultilanguage\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signTranslation\"></span>\n\t\t\t</button>\n\t\t\t<ng-template #popoverMultilanguage>\n\t\t\t\t<div class=\"popover-contentOptional multilanguage_popover-content\" [style.width.px]=\"inputElement.clientWidth + 16\">\n\t\t\t\t\t<div class=\"pr-u-displayFlex pr-u-gap100 pr-u-flexDirectionColumn\">\n\t\t\t\t\t\t@for (row of panelInputs(); track row.cultureCode) {\n\t\t\t\t\t\t\t<lu-form-field\n\t\t\t\t\t\t\t\t[size]=\"formFieldSize()\"\n\t\t\t\t\t\t\t\t[label]=\"intl().translateTo | intlParams: { lang: getLocaleDisplayName(row.cultureCode) }\"\n\t\t\t\t\t\t\t\thiddenLabel\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-text-input\n\t\t\t\t\t\t\t\t\t[suffix]=\"{ content: row.cultureCode, ariaLabel: '' }\"\n\t\t\t\t\t\t\t\t\t[(ngModel)]=\"row.value\"\n\t\t\t\t\t\t\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</lu-form-field>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (presentationValue()) {\n\t\t{{ presentationValue() }}\n\t} @else {\n\t\t<
|
|
342
|
+
], ngImport: i0, template: "<div class=\"textField\">\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"text\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[(ngModel)]=\"invariant().value\"\n\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t(blur)=\"onTouched?.()\"\n\t\t\t(focus)=\"openOnFocus() ? popoverRef.openPopover(true, true, true) : null\"\n\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button\n\t\t\t\t[luPopover2]=\"popoverMultilanguage\"\n\t\t\t\t#popoverRef=\"luPopover2\"\n\t\t\t\tluPopoverNoCloseButton\n\t\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t\t[luTooltip]=\"intl().toggleMultilanguage\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signTranslation\"></span>\n\t\t\t</button>\n\t\t\t<ng-template #popoverMultilanguage>\n\t\t\t\t<div class=\"popover-contentOptional multilanguage_popover-content\" [style.width.px]=\"inputElement.clientWidth + 16\">\n\t\t\t\t\t<div class=\"pr-u-displayFlex pr-u-gap100 pr-u-flexDirectionColumn\">\n\t\t\t\t\t\t@for (row of panelInputs(); track row.cultureCode) {\n\t\t\t\t\t\t\t<lu-form-field\n\t\t\t\t\t\t\t\t[size]=\"formFieldSize()\"\n\t\t\t\t\t\t\t\t[label]=\"intl().translateTo | intlParams: { lang: getLocaleDisplayName(row.cultureCode) }\"\n\t\t\t\t\t\t\t\thiddenLabel\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-text-input\n\t\t\t\t\t\t\t\t\t[suffix]=\"{ content: row.cultureCode, ariaLabel: '' }\"\n\t\t\t\t\t\t\t\t\t[(ngModel)]=\"row.value\"\n\t\t\t\t\t\t\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</lu-form-field>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (presentationValue()) {\n\t\t{{ presentationValue() }}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", styles: ["@layer components{.multilanguage_popover-content.popover-contentOptional{max-block-size:20rem;max-inline-size:100%;overflow:auto}}@layer mods{.multilanguage_popover-content.popover-contentOptional:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--pr-t-border-radius-structure)}}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["intl", "label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter", "presentation"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: PopoverDirective, selector: "[luPopover2]", inputs: ["intl", "luPopover2", "luPopoverPosition", "overlayScrollStrategy", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverAnchor", "luPopoverOpenDelay", "luPopoverCloseDelay"], outputs: ["luPopoverTriggerChange", "luPopoverClosed", "luPopoverOpened"], exportAs: ["luPopover2"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["intl", "mask", "placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "searchIcon", "type"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
343
343
|
}
|
|
344
344
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: MultilanguageInputComponent, decorators: [{
|
|
345
345
|
type: Component,
|
|
@@ -360,7 +360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
360
360
|
useExisting: forwardRef(() => MultilanguageInputComponent),
|
|
361
361
|
multi: true,
|
|
362
362
|
},
|
|
363
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"textField\">\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"text\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[(ngModel)]=\"invariant().value\"\n\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t(blur)=\"onTouched?.()\"\n\t\t\t(focus)=\"openOnFocus() ? popoverRef.openPopover(true, true, true) : null\"\n\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button\n\t\t\t\t[luPopover2]=\"popoverMultilanguage\"\n\t\t\t\t#popoverRef=\"luPopover2\"\n\t\t\t\tluPopoverNoCloseButton\n\t\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t\t[luTooltip]=\"intl().toggleMultilanguage\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signTranslation\"></span>\n\t\t\t</button>\n\t\t\t<ng-template #popoverMultilanguage>\n\t\t\t\t<div class=\"popover-contentOptional multilanguage_popover-content\" [style.width.px]=\"inputElement.clientWidth + 16\">\n\t\t\t\t\t<div class=\"pr-u-displayFlex pr-u-gap100 pr-u-flexDirectionColumn\">\n\t\t\t\t\t\t@for (row of panelInputs(); track row.cultureCode) {\n\t\t\t\t\t\t\t<lu-form-field\n\t\t\t\t\t\t\t\t[size]=\"formFieldSize()\"\n\t\t\t\t\t\t\t\t[label]=\"intl().translateTo | intlParams: { lang: getLocaleDisplayName(row.cultureCode) }\"\n\t\t\t\t\t\t\t\thiddenLabel\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-text-input\n\t\t\t\t\t\t\t\t\t[suffix]=\"{ content: row.cultureCode, ariaLabel: '' }\"\n\t\t\t\t\t\t\t\t\t[(ngModel)]=\"row.value\"\n\t\t\t\t\t\t\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</lu-form-field>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (presentationValue()) {\n\t\t{{ presentationValue() }}\n\t} @else {\n\t\t<
|
|
363
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"textField\">\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"text\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[(ngModel)]=\"invariant().value\"\n\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t(blur)=\"onTouched?.()\"\n\t\t\t(focus)=\"openOnFocus() ? popoverRef.openPopover(true, true, true) : null\"\n\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t<button\n\t\t\t\t[luPopover2]=\"popoverMultilanguage\"\n\t\t\t\t#popoverRef=\"luPopover2\"\n\t\t\t\tluPopoverNoCloseButton\n\t\t\t\t[customPositions]=\"popoverPositions\"\n\t\t\t\t[luTooltip]=\"intl().toggleMultilanguage\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"button mod-onlyIcon mod-ghost textField-input-affix-toggle\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signTranslation\"></span>\n\t\t\t</button>\n\t\t\t<ng-template #popoverMultilanguage>\n\t\t\t\t<div class=\"popover-contentOptional multilanguage_popover-content\" [style.width.px]=\"inputElement.clientWidth + 16\">\n\t\t\t\t\t<div class=\"pr-u-displayFlex pr-u-gap100 pr-u-flexDirectionColumn\">\n\t\t\t\t\t\t@for (row of panelInputs(); track row.cultureCode) {\n\t\t\t\t\t\t\t<lu-form-field\n\t\t\t\t\t\t\t\t[size]=\"formFieldSize()\"\n\t\t\t\t\t\t\t\t[label]=\"intl().translateTo | intlParams: { lang: getLocaleDisplayName(row.cultureCode) }\"\n\t\t\t\t\t\t\t\thiddenLabel\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<lu-text-input\n\t\t\t\t\t\t\t\t\t[suffix]=\"{ content: row.cultureCode, ariaLabel: '' }\"\n\t\t\t\t\t\t\t\t\t[(ngModel)]=\"row.value\"\n\t\t\t\t\t\t\t\t\t(ngModelChange)=\"valueChange()\"\n\t\t\t\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabledInternal()\"\n\t\t\t\t\t\t\t\t\t[autocomplete]=\"autocomplete()\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</lu-form-field>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (presentationValue()) {\n\t\t{{ presentationValue() }}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", styles: ["@layer components{.multilanguage_popover-content.popover-contentOptional{max-block-size:20rem;max-inline-size:100%;overflow:auto}}@layer mods{.multilanguage_popover-content.popover-contentOptional:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--pr-t-border-radius-structure)}}\n"] }]
|
|
364
364
|
}], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
|
|
365
365
|
|
|
366
366
|
function areAllLanguagesFilled(model) {
|
|
@@ -479,11 +479,11 @@ class NumberFormatInputComponent {
|
|
|
479
479
|
this.inputElementRef()?.nativeElement.focus();
|
|
480
480
|
}
|
|
481
481
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: NumberFormatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
482
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: NumberFormatInputComponent, isStandalone: true, selector: "lu-number-format-input", inputs: { formatStyle: { classPropertyName: "formatStyle", publicName: "formatStyle", isSignal: true, isRequired: false, transformFunction: null }, useAutoPrefixSuffix: { classPropertyName: "useAutoPrefixSuffix", publicName: "useAutoPrefixSuffix", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, currencyDisplay: { classPropertyName: "currencyDisplay", publicName: "currencyDisplay", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, unitDisplay: { classPropertyName: "unitDisplay", publicName: "unitDisplay", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hasClearer: { classPropertyName: "hasClearer", publicName: "hasClearer", isSignal: true, isRequired: false, transformFunction: null }, valueAlignRight: { classPropertyName: "valueAlignRight", publicName: "valueAlignRight", isSignal: true, isRequired: false, transformFunction: null }, intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #addon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\">{{ addon.content }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefixAddon()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefixAddon(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\t@if (suffixAddon()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffixAddon(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\tluNumberFormatInput\n\t\t\t[formatOptions]=\"formatOptions()\"\n\t\t\t[min]=\"min()\"\n\t\t\t[max]=\"max()\"\n\t\t\ttype=\"text\"\n\t\t\tinputmode=\"decimal\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear class=\"textField-input-affix-clear\" (onClear)=\"clearValue(); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (
|
|
482
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: NumberFormatInputComponent, isStandalone: true, selector: "lu-number-format-input", inputs: { formatStyle: { classPropertyName: "formatStyle", publicName: "formatStyle", isSignal: true, isRequired: false, transformFunction: null }, useAutoPrefixSuffix: { classPropertyName: "useAutoPrefixSuffix", publicName: "useAutoPrefixSuffix", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, currencyDisplay: { classPropertyName: "currencyDisplay", publicName: "currencyDisplay", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, unitDisplay: { classPropertyName: "unitDisplay", publicName: "unitDisplay", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hasClearer: { classPropertyName: "hasClearer", publicName: "hasClearer", isSignal: true, isRequired: false, transformFunction: null }, valueAlignRight: { classPropertyName: "valueAlignRight", publicName: "valueAlignRight", isSignal: true, isRequired: false, transformFunction: null }, intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #addon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\">{{ addon.content }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefixAddon()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefixAddon(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\t@if (suffixAddon()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffixAddon(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\tluNumberFormatInput\n\t\t\t[formatOptions]=\"formatOptions()\"\n\t\t\t[min]=\"min()\"\n\t\t\t[max]=\"max()\"\n\t\t\ttype=\"text\"\n\t\t\tinputmode=\"decimal\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear class=\"textField-input-affix-clear\" (onClear)=\"clearValue(); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (formattedValue()) {\n\t\t@if (prefixAddon(); as prefix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\taddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\t\taddon: prefix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t\t{{ formattedValue() }}\n\t\t@if (suffixAddon(); as suffix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\taddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\t\taddon: suffix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FormFieldIdDirective, selector: "[luFormFieldId]", inputs: ["luFormFieldId", "labelledByStrategy"] }, { kind: "directive", type: NumberFormatDirective, selector: "input[luNumberFormatInput]", inputs: ["formatOptions"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
483
483
|
}
|
|
484
484
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: NumberFormatInputComponent, decorators: [{
|
|
485
485
|
type: Component,
|
|
486
|
-
args: [{ selector: 'lu-number-format-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NumberFormatDirective, NgTemplateOutlet, ClearComponent, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #addon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\">{{ addon.content }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefixAddon()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefixAddon(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\t@if (suffixAddon()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffixAddon(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\tluNumberFormatInput\n\t\t\t[formatOptions]=\"formatOptions()\"\n\t\t\t[min]=\"min()\"\n\t\t\t[max]=\"max()\"\n\t\t\ttype=\"text\"\n\t\t\tinputmode=\"decimal\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear class=\"textField-input-affix-clear\" (onClear)=\"clearValue(); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (
|
|
486
|
+
args: [{ selector: 'lu-number-format-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NumberFormatDirective, NgTemplateOutlet, ClearComponent, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #addon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\">{{ addon.content }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefixAddon()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefixAddon(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\t@if (suffixAddon()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffixAddon(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\tluNumberFormatInput\n\t\t\t[formatOptions]=\"formatOptions()\"\n\t\t\t[min]=\"min()\"\n\t\t\t[max]=\"max()\"\n\t\t\ttype=\"text\"\n\t\t\tinputmode=\"decimal\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear class=\"textField-input-affix-clear\" (onClear)=\"clearValue(); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t</div>\n\t</div>\n</div>\n<ng-container *luPresentationDisplayDefault>\n\t@if (formattedValue()) {\n\t\t@if (prefixAddon(); as prefix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\taddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\t\taddon: prefix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t\t{{ formattedValue() }}\n\t\t@if (suffixAddon(); as suffix) {\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"\n\t\t\t\t\taddon;\n\t\t\t\t\tcontext: {\n\t\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\t\taddon: suffix,\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n" }]
|
|
487
487
|
}], propDecorators: { formatStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatStyle", required: false }] }], useAutoPrefixSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAutoPrefixSuffix", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], unitDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitDisplay", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hasClearer: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasClearer", required: false }] }], valueAlignRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAlignRight", required: false }] }], inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }] } });
|
|
488
488
|
|
|
489
489
|
const Translations$1 = {
|
|
@@ -538,11 +538,11 @@ class NumberInputComponent {
|
|
|
538
538
|
this.inputElementRef().nativeElement.focus();
|
|
539
539
|
}
|
|
540
540
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
541
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: NumberInputComponent, isStandalone: true, selector: "lu-number-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, noSpinButtons: { classPropertyName: "noSpinButtons", publicName: "noSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, hasClearer: { classPropertyName: "hasClearer", publicName: "hasClearer", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, valueAlignRight: { classPropertyName: "valueAlignRight", publicName: "valueAlignRight", isSignal: true, isRequired: false, transformFunction: null }, intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #addon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\">{{ addon.content }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"number\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[step]=\"step()\"\n\t\t\t[min]=\"min()\"\n\t\t\t[max]=\"max()\"\n\t\t\t[class.pr-u-noSpinButtons]=\"noSpinButtons()\"\n\t\t\t(wheel)=\"$event.preventDefault()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear class=\"textField-input-affix-clear\" (onClear)=\"clearValue(); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t</div>\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t{{ ngControl.value }}\n\t} @else {\n\t\t<
|
|
541
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: NumberInputComponent, isStandalone: true, selector: "lu-number-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, noSpinButtons: { classPropertyName: "noSpinButtons", publicName: "noSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, hasClearer: { classPropertyName: "hasClearer", publicName: "hasClearer", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, valueAlignRight: { classPropertyName: "valueAlignRight", publicName: "valueAlignRight", isSignal: true, isRequired: false, transformFunction: null }, intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #addon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\">{{ addon.content }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"number\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[step]=\"step()\"\n\t\t\t[min]=\"min()\"\n\t\t\t[max]=\"max()\"\n\t\t\t[class.pr-u-noSpinButtons]=\"noSpinButtons()\"\n\t\t\t(wheel)=\"$event.preventDefault()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear class=\"textField-input-affix-clear\" (onClear)=\"clearValue(); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t</div>\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t{{ ngControl.value }}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FormFieldIdDirective, selector: "[luFormFieldId]", inputs: ["luFormFieldId", "labelledByStrategy"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
542
542
|
}
|
|
543
543
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
544
544
|
type: Component,
|
|
545
|
-
args: [{ selector: 'lu-number-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NgTemplateOutlet, ClearComponent, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #addon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\">{{ addon.content }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"number\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[step]=\"step()\"\n\t\t\t[min]=\"min()\"\n\t\t\t[max]=\"max()\"\n\t\t\t[class.pr-u-noSpinButtons]=\"noSpinButtons()\"\n\t\t\t(wheel)=\"$event.preventDefault()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear class=\"textField-input-affix-clear\" (onClear)=\"clearValue(); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t</div>\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t{{ ngControl.value }}\n\t} @else {\n\t\t<
|
|
545
|
+
args: [{ selector: 'lu-number-input', imports: [InputDirective, ReactiveFormsModule, FormFieldIdDirective, NgTemplateOutlet, ClearComponent, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"textField\" [class.mod-valueAlignRight]=\"valueAlignRight()\">\n\t<ng-template #addon let-addon=\"addon\" let-type=\"type\">\n\t\t@if (addon.content) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\">{{ addon.content }}</span>\n\t\t\t</span>\n\t\t}\n\t\t@if (addon.icon) {\n\t\t\t<span class=\"textField-{{ type }}\" luFormFieldId=\"{{ type }}\">\n\t\t\t\t<span class=\"textField-label-{{ type }}-item\" [attr.aria-label]=\"addon.ariaLabel\"\n\t\t\t\t\t><span class=\"lucca-icon icon-{{ addon.icon }}\"></span\n\t\t\t\t></span>\n\t\t\t</span>\n\t\t}\n\t</ng-template>\n\n\t@if (prefix(); as prefix) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'prefix',\n\t\t\t\t\taddon: prefix,\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\t@if (suffix()) {\n\t\t<ng-container\n\t\t\t*ngTemplateOutlet=\"\n\t\t\t\taddon;\n\t\t\t\tcontext: {\n\t\t\t\t\ttype: 'suffix',\n\t\t\t\t\taddon: suffix(),\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t}\n\n\t<div class=\"textField-input\">\n\t\t<input\n\t\t\tluInput\n\t\t\ttype=\"number\"\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[step]=\"step()\"\n\t\t\t[min]=\"min()\"\n\t\t\t[max]=\"max()\"\n\t\t\t[class.pr-u-noSpinButtons]=\"noSpinButtons()\"\n\t\t\t(wheel)=\"$event.preventDefault()\"\n\t\t\t#inputElement\n\t\t/>\n\t\t<div class=\"textField-input-affix\">\n\t\t\t@if (hasClearer() && inputElement.value) {\n\t\t\t\t<lu-clear class=\"textField-input-affix-clear\" (onClear)=\"clearValue(); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t\t}\n\t\t</div>\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t{{ ngControl.value }}\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n" }]
|
|
546
546
|
}], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], noSpinButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSpinButtons", required: false }] }], hasClearer: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasClearer", required: false }] }], inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], valueAlignRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAlignRight", required: false }] }], intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }] } });
|
|
547
547
|
|
|
548
548
|
const RADIO_GROUP_INSTANCE = new InjectionToken('RADIO_GROUP_INSTANCE');
|
|
@@ -626,14 +626,14 @@ class RadioComponent {
|
|
|
626
626
|
}
|
|
627
627
|
}
|
|
628
628
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
629
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: RadioComponent, isStandalone: true, selector: "lu-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inlineMessage: { classPropertyName: "inlineMessage", publicName: "inlineMessage", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, framedPortal: { classPropertyName: "framedPortal", publicName: "framedPortal", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.form-field": "!framed()", "id": "id" } }, providers: [LuClass], ngImport: i0, template: "<ng-template #radioContent>\n\t<label class=\"formLabel\" [class.inputFramed-header-label]=\"framed()\" id=\"{{ id }}-label\" for=\"{{ id }}-input\">\n\t\t<ng-container *ngTemplateOutlet=\"contentProjection\" />\n\t\t@if (tag()) {\n\t\t\t<span class=\"formLabel-tag tag\">{{ tag() }}</span>\n\t\t}\n\t</label>\n\t<span class=\"radioField\">\n\t\t<input\n\t\t\t[formControl]=\"formControl\"\n\t\t\t[attr.disabled]=\"formControl.disabled || disabled() ? 'disabled' : null\"\n\t\t\ttype=\"radio\"\n\t\t\tclass=\"radioField-input\"\n\t\t\t[class.inputFramed-header-input]=\"framed()\"\n\t\t\tid=\"{{ id }}-input\"\n\t\t\t[attr.name]=\"name\"\n\t\t\t[name]=\"name\"\n\t\t\t[value]=\"value()\"\n\t\t\tluInput\n\t\t\tluInputStandalone\n\t\t\tattr.aria-labelledby=\"{{ id }}-label\"\n\t\t\tattr.aria-describedby=\"{{ id }}-message\"\n\t\t/>\n\t\t<span class=\"radioField-icon\" [class.inputFramed-header-icon]=\"framed()\" aria-hidden=\"true\">\n\t\t\t<span class=\"radioField-icon-check\"></span>\n\t\t</span>\n\t</span>\n\t@if (inlineMessage()) {\n\t\t<lu-inline-message [label]=\"inlineMessage()\" id=\"{{ id }}-message\" />\n\t}\n\t@if (arrow()) {\n\t\t<div class=\"form-field-arrow{{ arrow() === 'neutral' ? ' mod-neutral' : '' }}\"></div>\n\t}\n</ng-template>\n@if (framed()) {\n\t<lu-input-framed [center]=\"framedCenter()\" [size]=\"framedSize()\" [framedPortal]=\"framedPortal()\">\n\t\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n\t\t<ng-container illustration><ng-content select=\"[illustration]\" /></ng-container>\n\t\t<ng-container info><ng-content select=\"[info]\" /></ng-container>\n\t</lu-input-framed>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n}\n\n<ng-template #contentProjection><ng-content /></ng-template>\n\n@if (ngControl.value === value()) {\n\t<ng-container *luPresentationDisplayDefault><ng-container *ngTemplateOutlet=\"contentProjection\" /></ng-container>\n}\n", styles: ["@layer components{.radioField{--component-radioField-size: 1.25rem;--component-radioField-top: var(--pr-t-spacings-25);--component-radioField-borderRadius: var(--pr-t-border-radius-full);position:relative;inline-size:fit-content;block-size:fit-content;display:grid;grid-template-areas:\"radio\";grid-template-columns:var(--component-radioField-size);grid-template-rows:var(--component-radioField-size)}.radioField-icon{border:2px solid var(--palettes-neutral-700);border-radius:var(--component-radioField-borderRadius);color:var(--palettes-neutral-0);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--palettes-neutral-0);cursor:pointer;grid-area:radio;display:flex}@media(prefers-reduced-motion:reduce){.radioField-icon{transition-property:none}}.radioField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:var(--pr-t-border-radius-small)}.radioField-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(0);transition-property:transform;transition-duration:var(--commons-animations-durations-fast)}@media(prefers-reduced-motion:reduce){.radioField-icon-check{transition-property:none}}.radioField-icon-check:before{content:\"\";position:absolute;inset:0;background-color:transparent;border-radius:var(--pr-t-border-radius-full);border:2px solid var(--palettes-neutral-0)}.radioField-input{z-index:1;opacity:.0001;cursor:pointer;grid-area:radio;inline-size:100%;block-size:100%}}@layer mods{.radioField.mod-S{--component-radioField-size: 1rem}}@layer mods{.radioField-input:focus-visible~.radioField-icon:after{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.radioField-input:hover~.radioField-icon{border-color:var(--palettes-neutral-600)}.radioField-input:active~.radioField-icon{border-color:var(--palettes-neutral-800)}.radioField-input[aria-invalid=true]~.radioField-icon{border-color:var(--palettes-error-700)}.radioField-input[aria-invalid=true]:hover~.radioField-icon{border-color:var(--palettes-error-800)}.radioField-input[aria-invalid=true]:active~.radioField-icon{border-color:var(--palettes-error-900)}.radioField-input:disabled,.radioField-input:disabled:hover{cursor:default}.radioField-input:disabled~.radioField-icon,.radioField-input:disabled:hover~.radioField-icon{border-color:var(--palettes-neutral-500)}.radioField-input:checked~.radioField-icon{background-color:var(--palettes-product-700);border-color:var(--palettes-product-700)}.radioField-input:checked~.radioField-icon .radioField-icon-check{transform:scale(1)}.radioField-input:checked:hover~.radioField-icon{background-color:var(--palettes-product-800);border-color:var(--palettes-product-800)}.radioField-input:checked:active~.radioField-icon{background-color:var(--palettes-product-900);border-color:var(--palettes-product-900)}.radioField-input:checked:disabled~.radioField-icon{background-color:var(--palettes-neutral-500);border-color:var(--palettes-neutral-500);color:var(--palettes-neutral-500)}.radioField-input:checked[aria-invalid=true]~.radioField-icon{background-color:var(--palettes-error-700);border-color:var(--palettes-error-700)}.radioField-input:checked[aria-invalid=true]:hover~.radioField-icon{background-color:var(--palettes-error-800);border-color:var(--palettes-error-800)}.radioField-input:checked[aria-invalid=true]:active~.radioField-icon{background-color:var(--palettes-error-900);border-color:var(--palettes-error-900)}}@layer components{.inputFramed{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);position:relative;overflow:hidden;padding:var(--components-inputFramed-padding);border:solid 1px var(--components-inputFramed-borderColor);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-neutral-0);transition-property:box-shadow,border-color;transition-duration:var(--commons-animations-durations-fast);block-size:100%;display:flex;flex-direction:column}.inputFramed .formLabel-info{position:relative;z-index:1}.inputFramed-header-field{flex:1}.inputFramed-header-field.form-field.form-field{position:static;margin-block:0}.inputFramed-header{padding:var(--components-inputFramed-header-padding);border-radius:var(--pr-t-border-radius-50);background-color:var(--components-inputFramed-header-backgroundColor);transition-property:background-color;transition-duration:var(--commons-animations-durations-fast);position:relative;flex-grow:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-content:flex-start;gap:var(--pr-t-spacings-100);align-items:var(--components-inputFramed-header-alignItems)}.inputFramed-header .inputFramed-header-label.formLabel{position:static;font-weight:var(--pr-t-font-fontWeight-semibold)}.inputFramed-header .inputFramed-header-label.formLabel:after{content:\"\";position:absolute;inset:calc(var(--pr-t-spacings-50) * -1)}.inputFramed-header-illustration:empty{display:none}.inputFramed-header-info{flex-basis:100%;border-block-start:1px solid var(--components-inputFramed-header-info-borderColor);padding-block-start:var(--components-inputFramed-header-info-paddingBlockStart);margin-block-start:var(--components-inputFramed-header-info-marginBlockStart);color:var(--components-inputFramed-header-info-color)}.inputFramed-header-info:empty{display:none}.inputFramed-content{display:var(--components-inputFramed-content-display);padding:var(--components-inputFramed-content-padding);margin-block-start:var(--components-inputFramed-content-marginBlockStart)}}@layer mods{.inputFramed:hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-hover)}.inputFramed:has(.inputFramed-header-input:checked){--components-inputFramed-content-display: block;--components-inputFramed-header-backgroundColor: var(--palettes-product-50);--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked);--components-inputFramed-header-info-borderColor: var(--pr-t-color-input-border-checked)}.inputFramed:has(.inputFramed-header-input:checked):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked-hover)}.inputFramed:has(.inputFramed-header-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.inputFramed:has(.inputFramed-header-input:focus-visible) .inputFramed-header-icon:after{outline:none}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]){--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical)}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical-hover)}.inputFramed:has(.inputFramed-header-input:disabled),.inputFramed:has(.inputFramed-header-input:disabled):hover{--components-inputFramed-header-backgroundColor: var(--palettes-neutral-25);--components-inputFramed-header-borderColor: var(--palettes-neutral-50);--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-color: var(--pr-t-color-input-text-disabled)}.inputFramed.mod-center{--components-inputFramed-header-alignItems: center}.inputFramed.mod-L{--components-inputFramed-padding: var(--pr-t-spacings-50);--components-inputFramed-header-padding: var(--pr-t-spacings-150);--components-inputFramed-content-padding: var(--pr-t-spacings-150);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-50);--components-inputFramed-header-info-marginBlockStart: var(--pr-t-spacings-100);--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-200)}}@layer components{.inputFramedWrapper{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);display:flex;flex-direction:column;gap:var(--components-inputFramed-wrapper-gap);margin-block:var(--pr-t-spacings-50)}}@layer mods{.inputFramedWrapper:has(.inputFramed.mod-L){--components-inputFramed-wrapper-gap: var(--pr-t-spacings-150)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: InlineMessageComponent, selector: "lu-inline-message", inputs: ["label", "state", "size", "withTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "component", type: InputFramedComponent, selector: "lu-input-framed", inputs: ["framedPortal", "center", "size"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
629
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: RadioComponent, isStandalone: true, selector: "lu-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inlineMessage: { classPropertyName: "inlineMessage", publicName: "inlineMessage", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, framedPortal: { classPropertyName: "framedPortal", publicName: "framedPortal", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.form-field": "!framed()", "id": "id" } }, providers: [LuClass], ngImport: i0, template: "<ng-template #radioContent>\n\t<label class=\"formLabel\" [class.inputFramed-header-label]=\"framed()\" id=\"{{ id }}-label\" for=\"{{ id }}-input\">\n\t\t<ng-container *ngTemplateOutlet=\"contentProjection\" />\n\t\t@if (tag()) {\n\t\t\t<span class=\"formLabel-tag tag\">{{ tag() }}</span>\n\t\t}\n\t</label>\n\t<span class=\"radioField\">\n\t\t<input\n\t\t\t[formControl]=\"formControl\"\n\t\t\t[attr.disabled]=\"formControl.disabled || disabled() ? 'disabled' : null\"\n\t\t\ttype=\"radio\"\n\t\t\tclass=\"radioField-input\"\n\t\t\t[class.inputFramed-header-input]=\"framed()\"\n\t\t\tid=\"{{ id }}-input\"\n\t\t\t[attr.name]=\"name\"\n\t\t\t[name]=\"name\"\n\t\t\t[value]=\"value()\"\n\t\t\tluInput\n\t\t\tluInputStandalone\n\t\t\tattr.aria-labelledby=\"{{ id }}-label\"\n\t\t\tattr.aria-describedby=\"{{ id }}-message\"\n\t\t/>\n\t\t<span class=\"radioField-icon\" [class.inputFramed-header-icon]=\"framed()\" aria-hidden=\"true\">\n\t\t\t<span class=\"radioField-icon-check\"></span>\n\t\t</span>\n\t</span>\n\t@if (inlineMessage()) {\n\t\t<lu-inline-message [label]=\"inlineMessage()\" id=\"{{ id }}-message\" />\n\t}\n\t@if (arrow()) {\n\t\t<div class=\"form-field-arrow{{ arrow() === 'neutral' ? ' mod-neutral' : '' }}\"></div>\n\t}\n</ng-template>\n@if (framed()) {\n\t<lu-input-framed [center]=\"framedCenter()\" [size]=\"framedSize()\" [framedPortal]=\"framedPortal()\">\n\t\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n\t\t<ng-container illustration><ng-content select=\"[illustration]\" /></ng-container>\n\t\t<ng-container info><ng-content select=\"[info]\" /></ng-container>\n\t</lu-input-framed>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n}\n\n<ng-template #contentProjection><ng-content /></ng-template>\n\n@if (ngControl.value === value()) {\n\t<ng-container *luPresentationDisplayDefault><ng-container *ngTemplateOutlet=\"contentProjection\" /></ng-container>\n}\n", styles: ["@layer components{.radioField{--component-radioField-size: 1.25rem;--component-radioField-top: var(--pr-t-spacings-25);--component-radioField-borderRadius: var(--pr-t-border-radius-full);position:relative;inline-size:fit-content;block-size:fit-content;display:grid;grid-template-areas:\"radio\";grid-template-columns:var(--component-radioField-size);grid-template-rows:var(--component-radioField-size)}.radioField-icon{border:2px solid var(--palettes-neutral-700);border-radius:var(--component-radioField-borderRadius);color:var(--palettes-neutral-0);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--palettes-neutral-0);cursor:pointer;grid-area:radio;display:flex}@media(prefers-reduced-motion:reduce){.radioField-icon{transition-property:none}}.radioField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:var(--pr-t-border-radius-small)}.radioField-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(0);transition-property:transform;transition-duration:var(--commons-animations-durations-fast)}@media(prefers-reduced-motion:reduce){.radioField-icon-check{transition-property:none}}.radioField-icon-check:before{content:\"\";position:absolute;inset:0;background-color:transparent;border-radius:var(--pr-t-border-radius-full);border:2px solid var(--palettes-neutral-0)}.radioField-input{z-index:1;opacity:.0001;cursor:pointer;grid-area:radio;inline-size:100%;block-size:100%}}@layer mods{.radioField.mod-S{--component-radioField-size: 1rem}}@layer mods{.radioField-input:focus-visible~.radioField-icon:after{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.radioField-input:hover~.radioField-icon{border-color:var(--palettes-neutral-600)}.radioField-input:active~.radioField-icon{border-color:var(--palettes-neutral-800)}.radioField-input[aria-invalid=true]~.radioField-icon{border-color:var(--palettes-error-700)}.radioField-input[aria-invalid=true]:hover~.radioField-icon{border-color:var(--palettes-error-800)}.radioField-input[aria-invalid=true]:active~.radioField-icon{border-color:var(--palettes-error-900)}.radioField-input:disabled,.radioField-input:disabled:hover{cursor:default}.radioField-input:disabled~.radioField-icon,.radioField-input:disabled:hover~.radioField-icon{border-color:var(--palettes-neutral-500)}.radioField-input:checked~.radioField-icon{background-color:var(--palettes-product-700);border-color:var(--palettes-product-700)}.radioField-input:checked~.radioField-icon .radioField-icon-check{transform:scale(1)}.radioField-input:checked:hover~.radioField-icon{background-color:var(--palettes-product-800);border-color:var(--palettes-product-800)}.radioField-input:checked:active~.radioField-icon{background-color:var(--palettes-product-900);border-color:var(--palettes-product-900)}.radioField-input:checked:disabled~.radioField-icon{background-color:var(--palettes-neutral-500);border-color:var(--palettes-neutral-500);color:var(--palettes-neutral-500)}.radioField-input:checked[aria-invalid=true]~.radioField-icon{background-color:var(--palettes-error-700);border-color:var(--palettes-error-700)}.radioField-input:checked[aria-invalid=true]:hover~.radioField-icon{background-color:var(--palettes-error-800);border-color:var(--palettes-error-800)}.radioField-input:checked[aria-invalid=true]:active~.radioField-icon{background-color:var(--palettes-error-900);border-color:var(--palettes-error-900)}}@layer components{.inputFramed{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);position:relative;overflow:hidden;padding:var(--components-inputFramed-padding);border:solid 1px var(--components-inputFramed-borderColor);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-neutral-0);transition-property:box-shadow,border-color;transition-duration:var(--commons-animations-durations-fast);block-size:100%;display:flex;flex-direction:column}.inputFramed .formLabel-info{position:relative;z-index:1}.inputFramed-header-field{flex:1}.inputFramed-header-field.form-field.form-field{position:static;margin-block:0}.inputFramed-header-field a,.inputFramed-header-field button{position:relative}.inputFramed-header{padding:var(--components-inputFramed-header-padding);border-radius:var(--pr-t-border-radius-50);background-color:var(--components-inputFramed-header-backgroundColor);transition-property:background-color;transition-duration:var(--commons-animations-durations-fast);position:relative;flex-grow:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-content:flex-start;gap:var(--pr-t-spacings-100);align-items:var(--components-inputFramed-header-alignItems)}.inputFramed-header .inputFramed-header-label.formLabel{position:static;font-weight:var(--pr-t-font-fontWeight-semibold)}.inputFramed-header .inputFramed-header-label.formLabel:after{content:\"\";position:absolute;inset:calc(var(--pr-t-spacings-50) * -1)}.inputFramed-header-illustration:empty{display:none}.inputFramed-header-info{flex-basis:100%;border-block-start:1px solid var(--components-inputFramed-header-info-borderColor);padding-block-start:var(--components-inputFramed-header-info-paddingBlockStart);margin-block-start:var(--components-inputFramed-header-info-marginBlockStart);color:var(--components-inputFramed-header-info-color)}.inputFramed-header-info:empty{display:none}.inputFramed-content{display:var(--components-inputFramed-content-display);padding:var(--components-inputFramed-content-padding);margin-block-start:var(--components-inputFramed-content-marginBlockStart)}}@layer mods{.inputFramed:hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-hover)}.inputFramed:has(.inputFramed-header-input:checked){--components-inputFramed-content-display: block;--components-inputFramed-header-backgroundColor: var(--palettes-product-50);--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked);--components-inputFramed-header-info-borderColor: var(--pr-t-color-input-border-checked)}.inputFramed:has(.inputFramed-header-input:checked):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked-hover)}.inputFramed:has(.inputFramed-header-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.inputFramed:has(.inputFramed-header-input:focus-visible) .inputFramed-header-icon:after{outline:none}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]){--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical)}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical-hover)}.inputFramed:has(.inputFramed-header-input:disabled),.inputFramed:has(.inputFramed-header-input:disabled):hover{--components-inputFramed-header-backgroundColor: var(--palettes-neutral-25);--components-inputFramed-header-borderColor: var(--palettes-neutral-50);--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-color: var(--pr-t-color-input-text-disabled)}.inputFramed.mod-center{--components-inputFramed-header-alignItems: center}.inputFramed.mod-L{--components-inputFramed-padding: var(--pr-t-spacings-50);--components-inputFramed-header-padding: var(--pr-t-spacings-150);--components-inputFramed-content-padding: var(--pr-t-spacings-150);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-50);--components-inputFramed-header-info-marginBlockStart: var(--pr-t-spacings-100);--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-200)}}@layer components{.inputFramedWrapper{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);display:flex;flex-direction:column;gap:var(--components-inputFramed-wrapper-gap);margin-block:var(--pr-t-spacings-50)}}@layer mods{.inputFramedWrapper:has(.inputFramed.mod-L){--components-inputFramed-wrapper-gap: var(--pr-t-spacings-150)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: InlineMessageComponent, selector: "lu-inline-message", inputs: ["label", "state", "size", "withTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "component", type: InputFramedComponent, selector: "lu-input-framed", inputs: ["framedPortal", "center", "size"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
630
630
|
}
|
|
631
631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RadioComponent, decorators: [{
|
|
632
632
|
type: Component,
|
|
633
633
|
args: [{ selector: 'lu-radio', imports: [ReactiveFormsModule, InlineMessageComponent, NgTemplateOutlet, InputDirective, InputFramedComponent, _PresentationDisplayDefaultDirective], host: {
|
|
634
634
|
'[class.form-field]': '!framed()',
|
|
635
635
|
'[id]': 'id',
|
|
636
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [LuClass], template: "<ng-template #radioContent>\n\t<label class=\"formLabel\" [class.inputFramed-header-label]=\"framed()\" id=\"{{ id }}-label\" for=\"{{ id }}-input\">\n\t\t<ng-container *ngTemplateOutlet=\"contentProjection\" />\n\t\t@if (tag()) {\n\t\t\t<span class=\"formLabel-tag tag\">{{ tag() }}</span>\n\t\t}\n\t</label>\n\t<span class=\"radioField\">\n\t\t<input\n\t\t\t[formControl]=\"formControl\"\n\t\t\t[attr.disabled]=\"formControl.disabled || disabled() ? 'disabled' : null\"\n\t\t\ttype=\"radio\"\n\t\t\tclass=\"radioField-input\"\n\t\t\t[class.inputFramed-header-input]=\"framed()\"\n\t\t\tid=\"{{ id }}-input\"\n\t\t\t[attr.name]=\"name\"\n\t\t\t[name]=\"name\"\n\t\t\t[value]=\"value()\"\n\t\t\tluInput\n\t\t\tluInputStandalone\n\t\t\tattr.aria-labelledby=\"{{ id }}-label\"\n\t\t\tattr.aria-describedby=\"{{ id }}-message\"\n\t\t/>\n\t\t<span class=\"radioField-icon\" [class.inputFramed-header-icon]=\"framed()\" aria-hidden=\"true\">\n\t\t\t<span class=\"radioField-icon-check\"></span>\n\t\t</span>\n\t</span>\n\t@if (inlineMessage()) {\n\t\t<lu-inline-message [label]=\"inlineMessage()\" id=\"{{ id }}-message\" />\n\t}\n\t@if (arrow()) {\n\t\t<div class=\"form-field-arrow{{ arrow() === 'neutral' ? ' mod-neutral' : '' }}\"></div>\n\t}\n</ng-template>\n@if (framed()) {\n\t<lu-input-framed [center]=\"framedCenter()\" [size]=\"framedSize()\" [framedPortal]=\"framedPortal()\">\n\t\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n\t\t<ng-container illustration><ng-content select=\"[illustration]\" /></ng-container>\n\t\t<ng-container info><ng-content select=\"[info]\" /></ng-container>\n\t</lu-input-framed>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n}\n\n<ng-template #contentProjection><ng-content /></ng-template>\n\n@if (ngControl.value === value()) {\n\t<ng-container *luPresentationDisplayDefault><ng-container *ngTemplateOutlet=\"contentProjection\" /></ng-container>\n}\n", styles: ["@layer components{.radioField{--component-radioField-size: 1.25rem;--component-radioField-top: var(--pr-t-spacings-25);--component-radioField-borderRadius: var(--pr-t-border-radius-full);position:relative;inline-size:fit-content;block-size:fit-content;display:grid;grid-template-areas:\"radio\";grid-template-columns:var(--component-radioField-size);grid-template-rows:var(--component-radioField-size)}.radioField-icon{border:2px solid var(--palettes-neutral-700);border-radius:var(--component-radioField-borderRadius);color:var(--palettes-neutral-0);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--palettes-neutral-0);cursor:pointer;grid-area:radio;display:flex}@media(prefers-reduced-motion:reduce){.radioField-icon{transition-property:none}}.radioField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:var(--pr-t-border-radius-small)}.radioField-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(0);transition-property:transform;transition-duration:var(--commons-animations-durations-fast)}@media(prefers-reduced-motion:reduce){.radioField-icon-check{transition-property:none}}.radioField-icon-check:before{content:\"\";position:absolute;inset:0;background-color:transparent;border-radius:var(--pr-t-border-radius-full);border:2px solid var(--palettes-neutral-0)}.radioField-input{z-index:1;opacity:.0001;cursor:pointer;grid-area:radio;inline-size:100%;block-size:100%}}@layer mods{.radioField.mod-S{--component-radioField-size: 1rem}}@layer mods{.radioField-input:focus-visible~.radioField-icon:after{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.radioField-input:hover~.radioField-icon{border-color:var(--palettes-neutral-600)}.radioField-input:active~.radioField-icon{border-color:var(--palettes-neutral-800)}.radioField-input[aria-invalid=true]~.radioField-icon{border-color:var(--palettes-error-700)}.radioField-input[aria-invalid=true]:hover~.radioField-icon{border-color:var(--palettes-error-800)}.radioField-input[aria-invalid=true]:active~.radioField-icon{border-color:var(--palettes-error-900)}.radioField-input:disabled,.radioField-input:disabled:hover{cursor:default}.radioField-input:disabled~.radioField-icon,.radioField-input:disabled:hover~.radioField-icon{border-color:var(--palettes-neutral-500)}.radioField-input:checked~.radioField-icon{background-color:var(--palettes-product-700);border-color:var(--palettes-product-700)}.radioField-input:checked~.radioField-icon .radioField-icon-check{transform:scale(1)}.radioField-input:checked:hover~.radioField-icon{background-color:var(--palettes-product-800);border-color:var(--palettes-product-800)}.radioField-input:checked:active~.radioField-icon{background-color:var(--palettes-product-900);border-color:var(--palettes-product-900)}.radioField-input:checked:disabled~.radioField-icon{background-color:var(--palettes-neutral-500);border-color:var(--palettes-neutral-500);color:var(--palettes-neutral-500)}.radioField-input:checked[aria-invalid=true]~.radioField-icon{background-color:var(--palettes-error-700);border-color:var(--palettes-error-700)}.radioField-input:checked[aria-invalid=true]:hover~.radioField-icon{background-color:var(--palettes-error-800);border-color:var(--palettes-error-800)}.radioField-input:checked[aria-invalid=true]:active~.radioField-icon{background-color:var(--palettes-error-900);border-color:var(--palettes-error-900)}}@layer components{.inputFramed{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);position:relative;overflow:hidden;padding:var(--components-inputFramed-padding);border:solid 1px var(--components-inputFramed-borderColor);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-neutral-0);transition-property:box-shadow,border-color;transition-duration:var(--commons-animations-durations-fast);block-size:100%;display:flex;flex-direction:column}.inputFramed .formLabel-info{position:relative;z-index:1}.inputFramed-header-field{flex:1}.inputFramed-header-field.form-field.form-field{position:static;margin-block:0}.inputFramed-header{padding:var(--components-inputFramed-header-padding);border-radius:var(--pr-t-border-radius-50);background-color:var(--components-inputFramed-header-backgroundColor);transition-property:background-color;transition-duration:var(--commons-animations-durations-fast);position:relative;flex-grow:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-content:flex-start;gap:var(--pr-t-spacings-100);align-items:var(--components-inputFramed-header-alignItems)}.inputFramed-header .inputFramed-header-label.formLabel{position:static;font-weight:var(--pr-t-font-fontWeight-semibold)}.inputFramed-header .inputFramed-header-label.formLabel:after{content:\"\";position:absolute;inset:calc(var(--pr-t-spacings-50) * -1)}.inputFramed-header-illustration:empty{display:none}.inputFramed-header-info{flex-basis:100%;border-block-start:1px solid var(--components-inputFramed-header-info-borderColor);padding-block-start:var(--components-inputFramed-header-info-paddingBlockStart);margin-block-start:var(--components-inputFramed-header-info-marginBlockStart);color:var(--components-inputFramed-header-info-color)}.inputFramed-header-info:empty{display:none}.inputFramed-content{display:var(--components-inputFramed-content-display);padding:var(--components-inputFramed-content-padding);margin-block-start:var(--components-inputFramed-content-marginBlockStart)}}@layer mods{.inputFramed:hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-hover)}.inputFramed:has(.inputFramed-header-input:checked){--components-inputFramed-content-display: block;--components-inputFramed-header-backgroundColor: var(--palettes-product-50);--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked);--components-inputFramed-header-info-borderColor: var(--pr-t-color-input-border-checked)}.inputFramed:has(.inputFramed-header-input:checked):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked-hover)}.inputFramed:has(.inputFramed-header-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.inputFramed:has(.inputFramed-header-input:focus-visible) .inputFramed-header-icon:after{outline:none}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]){--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical)}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical-hover)}.inputFramed:has(.inputFramed-header-input:disabled),.inputFramed:has(.inputFramed-header-input:disabled):hover{--components-inputFramed-header-backgroundColor: var(--palettes-neutral-25);--components-inputFramed-header-borderColor: var(--palettes-neutral-50);--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-color: var(--pr-t-color-input-text-disabled)}.inputFramed.mod-center{--components-inputFramed-header-alignItems: center}.inputFramed.mod-L{--components-inputFramed-padding: var(--pr-t-spacings-50);--components-inputFramed-header-padding: var(--pr-t-spacings-150);--components-inputFramed-content-padding: var(--pr-t-spacings-150);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-50);--components-inputFramed-header-info-marginBlockStart: var(--pr-t-spacings-100);--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-200)}}@layer components{.inputFramedWrapper{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);display:flex;flex-direction:column;gap:var(--components-inputFramed-wrapper-gap);margin-block:var(--pr-t-spacings-50)}}@layer mods{.inputFramedWrapper:has(.inputFramed.mod-L){--components-inputFramed-wrapper-gap: var(--pr-t-spacings-150)}}\n"] }]
|
|
636
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [LuClass], template: "<ng-template #radioContent>\n\t<label class=\"formLabel\" [class.inputFramed-header-label]=\"framed()\" id=\"{{ id }}-label\" for=\"{{ id }}-input\">\n\t\t<ng-container *ngTemplateOutlet=\"contentProjection\" />\n\t\t@if (tag()) {\n\t\t\t<span class=\"formLabel-tag tag\">{{ tag() }}</span>\n\t\t}\n\t</label>\n\t<span class=\"radioField\">\n\t\t<input\n\t\t\t[formControl]=\"formControl\"\n\t\t\t[attr.disabled]=\"formControl.disabled || disabled() ? 'disabled' : null\"\n\t\t\ttype=\"radio\"\n\t\t\tclass=\"radioField-input\"\n\t\t\t[class.inputFramed-header-input]=\"framed()\"\n\t\t\tid=\"{{ id }}-input\"\n\t\t\t[attr.name]=\"name\"\n\t\t\t[name]=\"name\"\n\t\t\t[value]=\"value()\"\n\t\t\tluInput\n\t\t\tluInputStandalone\n\t\t\tattr.aria-labelledby=\"{{ id }}-label\"\n\t\t\tattr.aria-describedby=\"{{ id }}-message\"\n\t\t/>\n\t\t<span class=\"radioField-icon\" [class.inputFramed-header-icon]=\"framed()\" aria-hidden=\"true\">\n\t\t\t<span class=\"radioField-icon-check\"></span>\n\t\t</span>\n\t</span>\n\t@if (inlineMessage()) {\n\t\t<lu-inline-message [label]=\"inlineMessage()\" id=\"{{ id }}-message\" />\n\t}\n\t@if (arrow()) {\n\t\t<div class=\"form-field-arrow{{ arrow() === 'neutral' ? ' mod-neutral' : '' }}\"></div>\n\t}\n</ng-template>\n@if (framed()) {\n\t<lu-input-framed [center]=\"framedCenter()\" [size]=\"framedSize()\" [framedPortal]=\"framedPortal()\">\n\t\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n\t\t<ng-container illustration><ng-content select=\"[illustration]\" /></ng-container>\n\t\t<ng-container info><ng-content select=\"[info]\" /></ng-container>\n\t</lu-input-framed>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"radioContent\" />\n}\n\n<ng-template #contentProjection><ng-content /></ng-template>\n\n@if (ngControl.value === value()) {\n\t<ng-container *luPresentationDisplayDefault><ng-container *ngTemplateOutlet=\"contentProjection\" /></ng-container>\n}\n", styles: ["@layer components{.radioField{--component-radioField-size: 1.25rem;--component-radioField-top: var(--pr-t-spacings-25);--component-radioField-borderRadius: var(--pr-t-border-radius-full);position:relative;inline-size:fit-content;block-size:fit-content;display:grid;grid-template-areas:\"radio\";grid-template-columns:var(--component-radioField-size);grid-template-rows:var(--component-radioField-size)}.radioField-icon{border:2px solid var(--palettes-neutral-700);border-radius:var(--component-radioField-borderRadius);color:var(--palettes-neutral-0);transition-property:color,border-color,background-color;transition-duration:var(--commons-animations-durations-fast);background-color:var(--palettes-neutral-0);cursor:pointer;grid-area:radio;display:flex}@media(prefers-reduced-motion:reduce){.radioField-icon{transition-property:none}}.radioField-icon:after{content:\"\";position:absolute;inset:0;outline-offset:2px;border-radius:var(--pr-t-border-radius-small)}.radioField-icon-check{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;transform:scale(0);transition-property:transform;transition-duration:var(--commons-animations-durations-fast)}@media(prefers-reduced-motion:reduce){.radioField-icon-check{transition-property:none}}.radioField-icon-check:before{content:\"\";position:absolute;inset:0;background-color:transparent;border-radius:var(--pr-t-border-radius-full);border:2px solid var(--palettes-neutral-0)}.radioField-input{z-index:1;opacity:.0001;cursor:pointer;grid-area:radio;inline-size:100%;block-size:100%}}@layer mods{.radioField.mod-S{--component-radioField-size: 1rem}}@layer mods{.radioField-input:focus-visible~.radioField-icon:after{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.radioField-input:hover~.radioField-icon{border-color:var(--palettes-neutral-600)}.radioField-input:active~.radioField-icon{border-color:var(--palettes-neutral-800)}.radioField-input[aria-invalid=true]~.radioField-icon{border-color:var(--palettes-error-700)}.radioField-input[aria-invalid=true]:hover~.radioField-icon{border-color:var(--palettes-error-800)}.radioField-input[aria-invalid=true]:active~.radioField-icon{border-color:var(--palettes-error-900)}.radioField-input:disabled,.radioField-input:disabled:hover{cursor:default}.radioField-input:disabled~.radioField-icon,.radioField-input:disabled:hover~.radioField-icon{border-color:var(--palettes-neutral-500)}.radioField-input:checked~.radioField-icon{background-color:var(--palettes-product-700);border-color:var(--palettes-product-700)}.radioField-input:checked~.radioField-icon .radioField-icon-check{transform:scale(1)}.radioField-input:checked:hover~.radioField-icon{background-color:var(--palettes-product-800);border-color:var(--palettes-product-800)}.radioField-input:checked:active~.radioField-icon{background-color:var(--palettes-product-900);border-color:var(--palettes-product-900)}.radioField-input:checked:disabled~.radioField-icon{background-color:var(--palettes-neutral-500);border-color:var(--palettes-neutral-500);color:var(--palettes-neutral-500)}.radioField-input:checked[aria-invalid=true]~.radioField-icon{background-color:var(--palettes-error-700);border-color:var(--palettes-error-700)}.radioField-input:checked[aria-invalid=true]:hover~.radioField-icon{background-color:var(--palettes-error-800);border-color:var(--palettes-error-800)}.radioField-input:checked[aria-invalid=true]:active~.radioField-icon{background-color:var(--palettes-error-900);border-color:var(--palettes-error-900)}}@layer components{.inputFramed{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);position:relative;overflow:hidden;padding:var(--components-inputFramed-padding);border:solid 1px var(--components-inputFramed-borderColor);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-neutral-0);transition-property:box-shadow,border-color;transition-duration:var(--commons-animations-durations-fast);block-size:100%;display:flex;flex-direction:column}.inputFramed .formLabel-info{position:relative;z-index:1}.inputFramed-header-field{flex:1}.inputFramed-header-field.form-field.form-field{position:static;margin-block:0}.inputFramed-header-field a,.inputFramed-header-field button{position:relative}.inputFramed-header{padding:var(--components-inputFramed-header-padding);border-radius:var(--pr-t-border-radius-50);background-color:var(--components-inputFramed-header-backgroundColor);transition-property:background-color;transition-duration:var(--commons-animations-durations-fast);position:relative;flex-grow:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-content:flex-start;gap:var(--pr-t-spacings-100);align-items:var(--components-inputFramed-header-alignItems)}.inputFramed-header .inputFramed-header-label.formLabel{position:static;font-weight:var(--pr-t-font-fontWeight-semibold)}.inputFramed-header .inputFramed-header-label.formLabel:after{content:\"\";position:absolute;inset:calc(var(--pr-t-spacings-50) * -1)}.inputFramed-header-illustration:empty{display:none}.inputFramed-header-info{flex-basis:100%;border-block-start:1px solid var(--components-inputFramed-header-info-borderColor);padding-block-start:var(--components-inputFramed-header-info-paddingBlockStart);margin-block-start:var(--components-inputFramed-header-info-marginBlockStart);color:var(--components-inputFramed-header-info-color)}.inputFramed-header-info:empty{display:none}.inputFramed-content{display:var(--components-inputFramed-content-display);padding:var(--components-inputFramed-content-padding);margin-block-start:var(--components-inputFramed-content-marginBlockStart)}}@layer mods{.inputFramed:hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-hover)}.inputFramed:has(.inputFramed-header-input:checked){--components-inputFramed-content-display: block;--components-inputFramed-header-backgroundColor: var(--palettes-product-50);--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked);--components-inputFramed-header-info-borderColor: var(--pr-t-color-input-border-checked)}.inputFramed:has(.inputFramed-header-input:checked):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-checked-hover)}.inputFramed:has(.inputFramed-header-input:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.inputFramed:has(.inputFramed-header-input:focus-visible) .inputFramed-header-icon:after{outline:none}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]){--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical)}.inputFramed:has(.inputFramed-header-input[aria-invalid=true]):hover{--components-inputFramed-borderColor: var(--pr-t-color-input-border-critical-hover)}.inputFramed:has(.inputFramed-header-input:disabled),.inputFramed:has(.inputFramed-header-input:disabled):hover{--components-inputFramed-header-backgroundColor: var(--palettes-neutral-25);--components-inputFramed-header-borderColor: var(--palettes-neutral-50);--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-color: var(--pr-t-color-input-text-disabled)}.inputFramed.mod-center{--components-inputFramed-header-alignItems: center}.inputFramed.mod-L{--components-inputFramed-padding: var(--pr-t-spacings-50);--components-inputFramed-header-padding: var(--pr-t-spacings-150);--components-inputFramed-content-padding: var(--pr-t-spacings-150);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-50);--components-inputFramed-header-info-marginBlockStart: var(--pr-t-spacings-100);--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-200)}}@layer components{.inputFramedWrapper{--components-inputFramed-wrapper-gap: var(--pr-t-spacings-100);--components-inputFramed-content-display: none;--components-inputFramed-borderColor: var(--palettes-neutral-300);--components-inputFramed-header-info-borderColor: var(--palettes-neutral-200);--components-inputFramed-padding: var(--pr-t-spacings-25);--components-inputFramed-header-padding: var(--pr-t-spacings-75);--components-inputFramed-content-padding: var(--pr-t-spacings-75);--components-inputFramed-content-marginBlockStart: var(--pr-t-spacings-25);--components-inputFramed-header-backgroundColor: transparent;--components-inputFramed-header-alignItems: normal;--components-inputFramed-header-info-color: inherit;--components-inputFramed-header-info-marginBlockStart: 0;--components-inputFramed-header-info-paddingBlockStart: var(--pr-t-spacings-100);display:flex;flex-direction:column;gap:var(--components-inputFramed-wrapper-gap);margin-block:var(--pr-t-spacings-50)}}@layer mods{.inputFramedWrapper:has(.inputFramed.mod-L){--components-inputFramed-wrapper-gap: var(--pr-t-spacings-150)}}\n"] }]
|
|
637
637
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inlineMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineMessage", required: false }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: false }] }], framedPortal: [{ type: i0.Input, args: [{ isSignal: true, alias: "framedPortal", required: false }] }] } });
|
|
638
638
|
|
|
639
639
|
class SwitchInputComponent {
|
|
@@ -684,11 +684,11 @@ class TextareaInputComponent {
|
|
|
684
684
|
this.ngControl.valueChanges?.pipe(takeUntilDestroyed(this.#destroyRef), startWith$1(this.ngControl.value)).subscribe((value) => this.updateScroll(value));
|
|
685
685
|
}
|
|
686
686
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TextareaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
687
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TextareaInputComponent, isStandalone: true, selector: "lu-textarea-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, autoResizeScrollIntoView: { classPropertyName: "autoResizeScrollIntoView", publicName: "autoResizeScrollIntoView", isSignal: true, isRequired: false, transformFunction: null }, disableSpellcheck: { classPropertyName: "disableSpellcheck", publicName: "disableSpellcheck", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "parent", first: true, predicate: ["parent"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-autoResize]=\"autoResize()\">\n\t<div class=\"textField-input\" #parent>\n\t\t@if (autoResize()) {\n\t\t\t<div class=\"textField-input-valueClone\" aria-hidden=\"true\" [attr.data-content-before]=\"cloneValue\"></div>\n\t\t}\n\t\t<textarea\n\t\t\tluInput\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[attr.placeholder]=\"placeholder()\"\n\t\t\t[attr.rows]=\"rows()\"\n\t\t\t(input)=\"updateScroll(textarea.value)\"\n\t\t\t[attr.spellcheck]=\"!disableSpellcheck()\"\n\t\t\t#textarea\n\t\t></textarea>\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t<lu-read-more>\n\t\t\t{{ ngControl.value }}\n\t\t</lu-read-more>\n\t} @else {\n\t\t<
|
|
687
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: TextareaInputComponent, isStandalone: true, selector: "lu-textarea-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, autoResizeScrollIntoView: { classPropertyName: "autoResizeScrollIntoView", publicName: "autoResizeScrollIntoView", isSignal: true, isRequired: false, transformFunction: null }, disableSpellcheck: { classPropertyName: "disableSpellcheck", publicName: "disableSpellcheck", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "parent", first: true, predicate: ["parent"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<div class=\"textField\" [class.mod-autoResize]=\"autoResize()\">\n\t<div class=\"textField-input\" #parent>\n\t\t@if (autoResize()) {\n\t\t\t<div class=\"textField-input-valueClone\" aria-hidden=\"true\" [attr.data-content-before]=\"cloneValue\"></div>\n\t\t}\n\t\t<textarea\n\t\t\tluInput\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[attr.placeholder]=\"placeholder()\"\n\t\t\t[attr.rows]=\"rows()\"\n\t\t\t(input)=\"updateScroll(textarea.value)\"\n\t\t\t[attr.spellcheck]=\"!disableSpellcheck()\"\n\t\t\t#textarea\n\t\t></textarea>\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t<lu-read-more>\n\t\t\t{{ ngControl.value }}\n\t\t</lu-read-more>\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ReadMoreComponent, selector: "lu-read-more", inputs: ["intl", "lineClamp", "openOnly", "textFlow", "surface", "innerContent"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
688
688
|
}
|
|
689
689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TextareaInputComponent, decorators: [{
|
|
690
690
|
type: Component,
|
|
691
|
-
args: [{ selector: 'lu-textarea-input', imports: [InputDirective, ReactiveFormsModule, ReadMoreComponent, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"textField\" [class.mod-autoResize]=\"autoResize()\">\n\t<div class=\"textField-input\" #parent>\n\t\t@if (autoResize()) {\n\t\t\t<div class=\"textField-input-valueClone\" aria-hidden=\"true\" [attr.data-content-before]=\"cloneValue\"></div>\n\t\t}\n\t\t<textarea\n\t\t\tluInput\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[attr.placeholder]=\"placeholder()\"\n\t\t\t[attr.rows]=\"rows()\"\n\t\t\t(input)=\"updateScroll(textarea.value)\"\n\t\t\t[attr.spellcheck]=\"!disableSpellcheck()\"\n\t\t\t#textarea\n\t\t></textarea>\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t<lu-read-more>\n\t\t\t{{ ngControl.value }}\n\t\t</lu-read-more>\n\t} @else {\n\t\t<
|
|
691
|
+
args: [{ selector: 'lu-textarea-input', imports: [InputDirective, ReactiveFormsModule, ReadMoreComponent, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"textField\" [class.mod-autoResize]=\"autoResize()\">\n\t<div class=\"textField-input\" #parent>\n\t\t@if (autoResize()) {\n\t\t\t<div class=\"textField-input-valueClone\" aria-hidden=\"true\" [attr.data-content-before]=\"cloneValue\"></div>\n\t\t}\n\t\t<textarea\n\t\t\tluInput\n\t\t\tclass=\"textField-input-value\"\n\t\t\t[formControl]=\"ngControl.control\"\n\t\t\t[attr.placeholder]=\"placeholder()\"\n\t\t\t[attr.rows]=\"rows()\"\n\t\t\t(input)=\"updateScroll(textarea.value)\"\n\t\t\t[attr.spellcheck]=\"!disableSpellcheck()\"\n\t\t\t#textarea\n\t\t></textarea>\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl.value) {\n\t\t<lu-read-more>\n\t\t\t{{ ngControl.value }}\n\t\t</lu-read-more>\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n" }]
|
|
692
692
|
}], propDecorators: { parent: [{ type: i0.ViewChild, args: ['parent', { isSignal: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], autoResizeScrollIntoView: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResizeScrollIntoView", required: false }] }], disableSpellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSpellcheck", required: false }] }] } });
|
|
693
693
|
|
|
694
694
|
let nextId = 0;
|
|
@@ -768,11 +768,11 @@ class ColorInputComponent {
|
|
|
768
768
|
}
|
|
769
769
|
}
|
|
770
770
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ColorInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
771
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ColorInputComponent, isStandalone: true, selector: "lu-color-input", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: true, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<lu-simple-select\n\t#selectRef\n\tnoClueIcon\n\tnoClue\n\tcolorPicker\n\t[placeholder]=\"compact() ? '\u00A0' : null\"\n\t[panelFooterTpl]=\"footer\"\n\t[compact]=\"compact()\"\n\t[clearable]=\"clearable()\"\n\t[formControl]=\"ngControl.control\"\n\t[options]=\"filteredColors()\"\n\t(clueChange)=\"clue.set($event)\"\n\t(highlightedOption)=\"keyboardHighlighted.set($event.name)\"\n\tignorePresentation\n>\n\t<ng-container *luOption=\"let color; select: selectRef\">\n\t\t<lu-color\n\t\t\tsize=\"XL\"\n\t\t\thiddenName\n\t\t\t[value]=\"color.background\"\n\t\t\t[borderColor]=\"color.borderColor\"\n\t\t\t(mouseenter)=\"mouseHighlighted.set(color.name)\"\n\t\t\t(mouseleave)=\"mouseHighlighted.set('')\"\n\t\t>\n\t\t\t{{ color.name }}\n\t\t</lu-color>\n\t</ng-container>\n\t<ng-container *luDisplayer=\"let color; select: selectRef\">\n\t\t<lu-color size=\"L\" [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t</ng-container>\n\t<ng-template #footer>\n\t\t<div class=\"colorPanel-highlighted\">\n\t\t\t<span class=\"pr-u-colorTextSubtle\">{{ intl().color }}</span>\n\t\t\t<span class=\"pr-u-ellipsis\">{{ highlighted() }}</span>\n\t\t</div>\n\t</ng-template>\n</lu-simple-select>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl?.control?.value) {\n\t\t@let color = currentColorPresentation();\n\t\t<lu-color [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t} @else {\n\t\t<div aria-hidden=\"true\" data-content-before=\"\u2013\"></div>\n\t}\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer components{.color{--components-color-value-before-display: none;--components-color-value-scale: 1;--components-color-value-inlineSize: var(--pr-t-spacings-250);--components-color-value-boxShadowColor: transparent;--components-color-value-backgroundColor: transparent;--components-color-value-channel: clamp(0, (((r * .299) + (g * .587) + (b * .114)) - 128) * -1000, 255);display:flex;align-items:center;gap:var(--pr-t-spacings-100)}.color .color-value{inline-size:var(--components-color-value-inlineSize);aspect-ratio:1;background:var(--components-color-value-backgroundColor);color:rgb(from var(--components-color-value-backgroundColor) var(--components-color-value-channel) var(--components-color-value-channel) var(--components-color-value-channel));border-radius:var(--pr-t-border-radius-small);box-shadow:inset 0 0 0 1px var(--components-color-value-boxShadowColor);scale:var(--components-color-value-scale);transition-property:scale;transition-duration:var(--commons-animations-durations-fast);flex-shrink:0}.color .color-value:before{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;display:var(--components-color-value-before-display);position:absolute;inset:0;place-items:center;font-size:1.5rem}.color-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@layer mods{.color.mod-M{--components-color-value-inlineSize: var(--pr-t-spacings-250)}.color.mod-L{--components-color-value-inlineSize: var(--pr-t-spacings-300)}.color.mod-XL{--components-color-value-inlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50))}[aria-selected=true] .color{--components-color-value-before-display: grid}.optionItem.is-highlighted .color,[role=listbox] .optionItem:hover .color{--components-color-value-scale: calc(7/6)}}@layer components{.colorPicker{--components-colorPicker-input-paddingInlineStart: 0;--components-colorPicker-inlineSize: auto;inline-size:var(--components-colorPicker-inlineSize)}.colorPicker .simpleSelect-field-value{padding:1px;margin:-1px;min-inline-size:0}.colorPicker .simpleSelect-field-input{padding-inline-start:var(--components-colorPicker-input-paddingInlineStart);color:transparent}}@layer mods{.colorPicker.mod-compact{--components-colorPicker-inlineSize: 4.625rem}.colorPicker.mod-compact .color-name{border:0;clip:rect(1px,1px,1px,1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.form-field.mod-S .colorPicker.mod-compact{--components-colorPicker-inlineSize: 3.75rem}.colorPicker.mod-compact.is-clearable{--components-colorPicker-inlineSize: 6.125rem}.form-field.mod-S .colorPicker.mod-compact.is-clearable{--components-colorPicker-inlineSize: 4.875rem}.colorPicker.is-selected:not(.is-searchFilled){--components-colorPicker-input-paddingInlineStart: var(--pr-t-spacings-400)}.form-field.mod-S .colorPicker.is-selected:not(.is-searchFilled){--components-colorPicker-input-paddingInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}}@layer components{.cdk-overlay-pane:has(.colorPanel .lu-picker-content){min-inline-size:0!important;inline-size:17rem}.colorPanel [role=listbox]{display:flex;flex-wrap:wrap;padding:var(--pr-t-spacings-100)}.colorPanel .color{padding:var(--pr-t-spacings-50)}.colorPanel-highlighted{display:flex;padding:var(--pr-t-spacings-50) var(--pr-t-spacings-100);margin:0 var(--pr-t-spacings-100) var(--pr-t-spacings-100);gap:var(--pr-t-spacings-50)}}@layer mods{.colorPanel .lu-picker-content{padding:0}.colorPanel .optionItem-value{padding:0;background-color:transparent!important}.colorPanel .optionItem-value:before{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LuSimpleSelectInputComponent, selector: "lu-simple-select", inputs: ["intl", "autocomplete"] }, { kind: "directive", type: LuDisplayerDirective, selector: "[luDisplayer]", inputs: ["luDisplayerSelect"] }, { kind: "directive", type: LuOptionDirective, selector: "[luOption]", inputs: ["luOptionSelect"] }, { kind: "component", type: ColorComponent, selector: "lu-color", inputs: ["value", "borderColor", "size", "hiddenName"] }, { kind: "directive", type: LuCoreSelectNoClueDirective, selector: "lu-simple-select[noClue],lu-multi-select[noClue]" }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
771
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ColorInputComponent, isStandalone: true, selector: "lu-color-input", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: true, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NoopValueAccessorDirective }], ngImport: i0, template: "<lu-simple-select\n\t#selectRef\n\tnoClueIcon\n\tnoClue\n\tcolorPicker\n\t[placeholder]=\"compact() ? '\u00A0' : null\"\n\t[panelFooterTpl]=\"footer\"\n\t[compact]=\"compact()\"\n\t[clearable]=\"clearable()\"\n\t[formControl]=\"ngControl.control\"\n\t[options]=\"filteredColors()\"\n\t(clueChange)=\"clue.set($event)\"\n\t(highlightedOption)=\"keyboardHighlighted.set($event.name)\"\n\tignorePresentation\n>\n\t<ng-container *luOption=\"let color; select: selectRef\">\n\t\t<lu-color\n\t\t\tsize=\"XL\"\n\t\t\thiddenName\n\t\t\t[value]=\"color.background\"\n\t\t\t[borderColor]=\"color.borderColor\"\n\t\t\t(mouseenter)=\"mouseHighlighted.set(color.name)\"\n\t\t\t(mouseleave)=\"mouseHighlighted.set('')\"\n\t\t>\n\t\t\t{{ color.name }}\n\t\t</lu-color>\n\t</ng-container>\n\t<ng-container *luDisplayer=\"let color; select: selectRef\">\n\t\t<lu-color size=\"L\" [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t</ng-container>\n\t<ng-template #footer>\n\t\t<div class=\"colorPanel-highlighted\">\n\t\t\t<span class=\"pr-u-colorTextSubtle\">{{ intl().color }}</span>\n\t\t\t<span class=\"pr-u-ellipsis\">{{ highlighted() }}</span>\n\t\t</div>\n\t</ng-template>\n</lu-simple-select>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl?.control?.value) {\n\t\t@let color = currentColorPresentation();\n\t\t<lu-color [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer components{.color{--components-color-value-before-display: none;--components-color-value-scale: 1;--components-color-value-inlineSize: var(--pr-t-spacings-250);--components-color-value-boxShadowColor: transparent;--components-color-value-backgroundColor: transparent;--components-color-value-channel: clamp(0, (((r * .299) + (g * .587) + (b * .114)) - 128) * -1000, 255);display:flex;align-items:center;gap:var(--pr-t-spacings-100)}.color .color-value{inline-size:var(--components-color-value-inlineSize);aspect-ratio:1;background:var(--components-color-value-backgroundColor);color:rgb(from var(--components-color-value-backgroundColor) var(--components-color-value-channel) var(--components-color-value-channel) var(--components-color-value-channel));border-radius:var(--pr-t-border-radius-small);box-shadow:inset 0 0 0 1px var(--components-color-value-boxShadowColor);scale:var(--components-color-value-scale);transition-property:scale;transition-duration:var(--commons-animations-durations-fast);flex-shrink:0}.color .color-value:before{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;display:var(--components-color-value-before-display);position:absolute;inset:0;place-items:center;font-size:1.5rem}.color-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@layer mods{.color.mod-M{--components-color-value-inlineSize: var(--pr-t-spacings-250)}.color.mod-L{--components-color-value-inlineSize: var(--pr-t-spacings-300)}.color.mod-XL{--components-color-value-inlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50))}[aria-selected=true] .color{--components-color-value-before-display: grid}.optionItem.is-highlighted .color,[role=listbox] .optionItem:hover .color{--components-color-value-scale: calc(7/6)}}@layer components{.colorPicker{--components-colorPicker-input-paddingInlineStart: 0;--components-colorPicker-inlineSize: auto;inline-size:var(--components-colorPicker-inlineSize)}.colorPicker .simpleSelect-field-value{padding:1px;margin:-1px;min-inline-size:0}.colorPicker .simpleSelect-field-input{padding-inline-start:var(--components-colorPicker-input-paddingInlineStart);color:transparent}}@layer mods{.colorPicker.mod-compact{--components-colorPicker-inlineSize: 4.625rem}.colorPicker.mod-compact .color-name{border:0;clip:rect(1px,1px,1px,1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.form-field.mod-S .colorPicker.mod-compact{--components-colorPicker-inlineSize: 3.75rem}.colorPicker.mod-compact.is-clearable{--components-colorPicker-inlineSize: 6.125rem}.form-field.mod-S .colorPicker.mod-compact.is-clearable{--components-colorPicker-inlineSize: 4.875rem}.colorPicker.is-selected:not(.is-searchFilled){--components-colorPicker-input-paddingInlineStart: var(--pr-t-spacings-400)}.form-field.mod-S .colorPicker.is-selected:not(.is-searchFilled){--components-colorPicker-input-paddingInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}}@layer components{.cdk-overlay-pane:has(.colorPanel .lu-picker-content){min-inline-size:0!important;inline-size:17rem}.colorPanel [role=listbox]{display:flex;flex-wrap:wrap;padding:var(--pr-t-spacings-100)}.colorPanel .color{padding:var(--pr-t-spacings-50)}.colorPanel-highlighted{display:flex;padding:var(--pr-t-spacings-50) var(--pr-t-spacings-100);margin:0 var(--pr-t-spacings-100) var(--pr-t-spacings-100);gap:var(--pr-t-spacings-50)}}@layer mods{.colorPanel .lu-picker-content{padding:0}.colorPanel .optionItem-value{padding:0;background-color:transparent!important}.colorPanel .optionItem-value:before{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LuSimpleSelectInputComponent, selector: "lu-simple-select", inputs: ["intl", "autocomplete"] }, { kind: "directive", type: LuDisplayerDirective, selector: "[luDisplayer]", inputs: ["luDisplayerSelect"] }, { kind: "directive", type: LuOptionDirective, selector: "[luOption]", inputs: ["luOptionSelect"] }, { kind: "component", type: ColorComponent, selector: "lu-color", inputs: ["value", "borderColor", "size", "hiddenName"] }, { kind: "directive", type: LuCoreSelectNoClueDirective, selector: "lu-simple-select[noClue],lu-multi-select[noClue]" }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
772
772
|
}
|
|
773
773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ColorInputComponent, decorators: [{
|
|
774
774
|
type: Component,
|
|
775
|
-
args: [{ selector: 'lu-color-input', imports: [ReactiveFormsModule, LuSimpleSelectInputComponent, LuDisplayerDirective, LuOptionDirective, ColorComponent, LuCoreSelectNoClueDirective, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<lu-simple-select\n\t#selectRef\n\tnoClueIcon\n\tnoClue\n\tcolorPicker\n\t[placeholder]=\"compact() ? '\u00A0' : null\"\n\t[panelFooterTpl]=\"footer\"\n\t[compact]=\"compact()\"\n\t[clearable]=\"clearable()\"\n\t[formControl]=\"ngControl.control\"\n\t[options]=\"filteredColors()\"\n\t(clueChange)=\"clue.set($event)\"\n\t(highlightedOption)=\"keyboardHighlighted.set($event.name)\"\n\tignorePresentation\n>\n\t<ng-container *luOption=\"let color; select: selectRef\">\n\t\t<lu-color\n\t\t\tsize=\"XL\"\n\t\t\thiddenName\n\t\t\t[value]=\"color.background\"\n\t\t\t[borderColor]=\"color.borderColor\"\n\t\t\t(mouseenter)=\"mouseHighlighted.set(color.name)\"\n\t\t\t(mouseleave)=\"mouseHighlighted.set('')\"\n\t\t>\n\t\t\t{{ color.name }}\n\t\t</lu-color>\n\t</ng-container>\n\t<ng-container *luDisplayer=\"let color; select: selectRef\">\n\t\t<lu-color size=\"L\" [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t</ng-container>\n\t<ng-template #footer>\n\t\t<div class=\"colorPanel-highlighted\">\n\t\t\t<span class=\"pr-u-colorTextSubtle\">{{ intl().color }}</span>\n\t\t\t<span class=\"pr-u-ellipsis\">{{ highlighted() }}</span>\n\t\t</div>\n\t</ng-template>\n</lu-simple-select>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl?.control?.value) {\n\t\t@let color = currentColorPresentation();\n\t\t<lu-color [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t} @else {\n\t\t<
|
|
775
|
+
args: [{ selector: 'lu-color-input', imports: [ReactiveFormsModule, LuSimpleSelectInputComponent, LuDisplayerDirective, LuOptionDirective, ColorComponent, LuCoreSelectNoClueDirective, _PresentationDisplayDefaultDirective], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<lu-simple-select\n\t#selectRef\n\tnoClueIcon\n\tnoClue\n\tcolorPicker\n\t[placeholder]=\"compact() ? '\u00A0' : null\"\n\t[panelFooterTpl]=\"footer\"\n\t[compact]=\"compact()\"\n\t[clearable]=\"clearable()\"\n\t[formControl]=\"ngControl.control\"\n\t[options]=\"filteredColors()\"\n\t(clueChange)=\"clue.set($event)\"\n\t(highlightedOption)=\"keyboardHighlighted.set($event.name)\"\n\tignorePresentation\n>\n\t<ng-container *luOption=\"let color; select: selectRef\">\n\t\t<lu-color\n\t\t\tsize=\"XL\"\n\t\t\thiddenName\n\t\t\t[value]=\"color.background\"\n\t\t\t[borderColor]=\"color.borderColor\"\n\t\t\t(mouseenter)=\"mouseHighlighted.set(color.name)\"\n\t\t\t(mouseleave)=\"mouseHighlighted.set('')\"\n\t\t>\n\t\t\t{{ color.name }}\n\t\t</lu-color>\n\t</ng-container>\n\t<ng-container *luDisplayer=\"let color; select: selectRef\">\n\t\t<lu-color size=\"L\" [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t</ng-container>\n\t<ng-template #footer>\n\t\t<div class=\"colorPanel-highlighted\">\n\t\t\t<span class=\"pr-u-colorTextSubtle\">{{ intl().color }}</span>\n\t\t\t<span class=\"pr-u-ellipsis\">{{ highlighted() }}</span>\n\t\t</div>\n\t</ng-template>\n</lu-simple-select>\n\n<ng-container *luPresentationDisplayDefault>\n\t@if (ngControl?.control?.value) {\n\t\t@let color = currentColorPresentation();\n\t\t<lu-color [borderColor]=\"color.borderColor\" [value]=\"color.background\">{{ color.name }}</lu-color>\n\t} @else {\n\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t}\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer components{.color{--components-color-value-before-display: none;--components-color-value-scale: 1;--components-color-value-inlineSize: var(--pr-t-spacings-250);--components-color-value-boxShadowColor: transparent;--components-color-value-backgroundColor: transparent;--components-color-value-channel: clamp(0, (((r * .299) + (g * .587) + (b * .114)) - 128) * -1000, 255);display:flex;align-items:center;gap:var(--pr-t-spacings-100)}.color .color-value{inline-size:var(--components-color-value-inlineSize);aspect-ratio:1;background:var(--components-color-value-backgroundColor);color:rgb(from var(--components-color-value-backgroundColor) var(--components-color-value-channel) var(--components-color-value-channel) var(--components-color-value-channel));border-radius:var(--pr-t-border-radius-small);box-shadow:inset 0 0 0 1px var(--components-color-value-boxShadowColor);scale:var(--components-color-value-scale);transition-property:scale;transition-duration:var(--commons-animations-durations-fast);flex-shrink:0}.color .color-value:before{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;display:var(--components-color-value-before-display);position:absolute;inset:0;place-items:center;font-size:1.5rem}.color-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@layer mods{.color.mod-M{--components-color-value-inlineSize: var(--pr-t-spacings-250)}.color.mod-L{--components-color-value-inlineSize: var(--pr-t-spacings-300)}.color.mod-XL{--components-color-value-inlineSize: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50))}[aria-selected=true] .color{--components-color-value-before-display: grid}.optionItem.is-highlighted .color,[role=listbox] .optionItem:hover .color{--components-color-value-scale: calc(7/6)}}@layer components{.colorPicker{--components-colorPicker-input-paddingInlineStart: 0;--components-colorPicker-inlineSize: auto;inline-size:var(--components-colorPicker-inlineSize)}.colorPicker .simpleSelect-field-value{padding:1px;margin:-1px;min-inline-size:0}.colorPicker .simpleSelect-field-input{padding-inline-start:var(--components-colorPicker-input-paddingInlineStart);color:transparent}}@layer mods{.colorPicker.mod-compact{--components-colorPicker-inlineSize: 4.625rem}.colorPicker.mod-compact .color-name{border:0;clip:rect(1px,1px,1px,1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.form-field.mod-S .colorPicker.mod-compact{--components-colorPicker-inlineSize: 3.75rem}.colorPicker.mod-compact.is-clearable{--components-colorPicker-inlineSize: 6.125rem}.form-field.mod-S .colorPicker.mod-compact.is-clearable{--components-colorPicker-inlineSize: 4.875rem}.colorPicker.is-selected:not(.is-searchFilled){--components-colorPicker-input-paddingInlineStart: var(--pr-t-spacings-400)}.form-field.mod-S .colorPicker.is-selected:not(.is-searchFilled){--components-colorPicker-input-paddingInlineStart: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50))}}@layer components{.cdk-overlay-pane:has(.colorPanel .lu-picker-content){min-inline-size:0!important;inline-size:17rem}.colorPanel [role=listbox]{display:flex;flex-wrap:wrap;padding:var(--pr-t-spacings-100)}.colorPanel .color{padding:var(--pr-t-spacings-50)}.colorPanel-highlighted{display:flex;padding:var(--pr-t-spacings-50) var(--pr-t-spacings-100);margin:0 var(--pr-t-spacings-100) var(--pr-t-spacings-100);gap:var(--pr-t-spacings-50)}}@layer mods{.colorPanel .lu-picker-content{padding:0}.colorPanel .optionItem-value{padding:0;background-color:transparent!important}.colorPanel .optionItem-value:before{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}\n"] }]
|
|
776
776
|
}], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: true }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
|
|
777
777
|
|
|
778
778
|
/**
|