@lucca-front/ng 21.1.0-rc.0 → 21.1.0-rc.1

package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs

@@ -1,16 +1,17 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, booleanAttribute, viewChild, ElementRef, contentChildren, signal, computed, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, DestroyRef, ViewContainerRef, TemplateRef, viewChildren, effect } from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, viewChild, ElementRef, contentChildren, signal, computed, effect, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, DestroyRef, ViewContainerRef, TemplateRef, viewChildren } from '@angular/core';
 import { ButtonComponent } from '@lucca-front/ng/button';
-import { getIntl } from '@lucca-front/ng/core';
+import { intlInputOptions } from '@lucca-front/ng/core';
 import { IconComponent } from '@lucca-front/ng/icon';
 import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, FormGroup, Validators } from '@angular/forms';
 import { registerHistory, createEmptyHistoryState } from '@lexical/history';
 import { $isRootTextContentEmpty, $canShowPlaceholderCurry } from '@lexical/text';
 import { mergeRegister, $getNearestNodeOfType } from '@lexical/utils';
-import { FormFieldComponent, InputDirective } from '@lucca-front/ng/form-field';
+import { FormFieldComponent, InputDirective, ɵPresentationDisplayDefaultDirective as _PresentationDisplayDefaultDirective } from '@lucca-front/ng/form-field';
 import { createEditor, $getRoot, $createTextNode, createCommand, $getSelection, $isRangeSelection, $isTextNode, $createParagraphNode, COMMAND_PRIORITY_NORMAL, SELECTION_CHANGE_COMMAND, INSERT_PARAGRAPH_COMMAND, DecoratorNode, TextNode, $getNodeByKey, FORMAT_TEXT_COMMAND } from 'lexical';
 import { $isAtNodeEnd, $setBlocksType } from '@lexical/selection';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -48,6 +49,16 @@ const INITIAL_UPDATE_TAG = 'initial-update';
 const SKIP_DOM_SELECTION_TAG = 'skip-dom-selection';
 const RICH_TEXT_PLUGIN_COMPONENT = new InjectionToken('RichTextPlugin');
 class RichTextInputComponent {
+    #richTextFormatter;
+    #formField;
+    #customNodes;
+    #allPlugins;
+    #isTouched;
+    #onChange;
+    #onTouch;
+    #cleanup;
+    #focusedPlugin;
+    #editor;
     constructor() {
         this.#richTextFormatter = inject(RICH_TEXT_FORMATTER);
         this.#formField = inject(FormFieldComponent, { optional: true });
@@ -55,9 +66,8 @@ class RichTextInputComponent {
         this.disableSpellcheck = input(false, { ...(ngDevMode ? { debugName: "disableSpellcheck" } : {}), transform: booleanAttribute });
         this.autoResize = input(false, { ...(ngDevMode ? { debugName: "autoResize" } : {}), transform: booleanAttribute });
         this.hideToolbar = input(false, { ...(ngDevMode ? { debugName: "hideToolbar" } : {}), transform: booleanAttribute });
-        this.content = viewChild.required('content', {
-            read: ElementRef,
-        });
+        this.content = viewChild('content', { ...(ngDevMode ? { debugName: "content" } : {}), read: ElementRef });
+        this.contentPresentation = viewChild('contentPresentation', { ...(ngDevMode ? { debugName: "contentPresentation" } : {}), read: ElementRef });
         this.pluginComponents = contentChildren(RICH_TEXT_PLUGIN_COMPONENT, { ...(ngDevMode ? { debugName: "pluginComponents" } : {}), descendants: true });
         this.currentCanShowPlaceholder = signal(false, ...(ngDevMode ? [{ debugName: "currentCanShowPlaceholder" }] : []));
         this.isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
@@ -68,17 +78,17 @@ class RichTextInputComponent {
         this.#allPlugins = computed(() => this.#flattenPlugins(this.pluginComponents()), ...(ngDevMode ? [{ debugName: "#allPlugins" }] : []));
         this.#isTouched = signal(false, ...(ngDevMode ? [{ debugName: "#isTouched" }] : []));
         this.#focusedPlugin = 0;
+        effect(() => {
+            if (this.#formField?.presentation() && this.contentPresentation()) {
+                this.#editor?.setRootElement(this.contentPresentation()?.nativeElement);
+                this.#editor?.setEditable(false);
+            }
+            else if (this.content()) {
+                this.#editor?.setRootElement(this.content()?.nativeElement);
+                this.#editor?.setEditable(true);
+            }
+        });
     }
-    #richTextFormatter;
-    #formField;
-    #customNodes;
-    #allPlugins;
-    #isTouched;
-    #onChange;
-    #onTouch;
-    #cleanup;
-    #focusedPlugin;
-    #editor;
     ngOnInit() {
         this.#editor = createEditor({
             theme: {
@@ -92,7 +102,6 @@ class RichTextInputComponent {
             nodes: [...this.#customNodes()],
         });
         this.#cleanup = mergeRegister(this.#richTextFormatter.registerTextPlugin(this.#editor), registerHistory(this.#editor, createEmptyHistoryState(), 300), this.#editor.registerUpdateListener((payload) => this.#onEditorUpdate(payload)));
-        this.#editor.setRootElement(this.content().nativeElement);
         this.pluginComponents().forEach((plugin) => plugin.setEditorInstance(this.#editor));
         if (this.#allPlugins().length > 0) {
             this.#allPlugins()[this.#focusedPlugin].tabindex?.set(0);
@@ -109,7 +118,7 @@ class RichTextInputComponent {
             }, { tag: updateTags });
         }
         else if (!this.#editor?.getEditorState().isEmpty()) {
-            this.#editor.update(() => {
+            this.#editor?.update(() => {
                 const root = $getRoot();
                 root.clear();
             }, { tag: updateTags });
@@ -132,13 +141,13 @@ class RichTextInputComponent {
         const nextFocusedPlugin = this.#focusedPlugin + direction < 0 ? plugins.length - 1 : (this.#focusedPlugin + direction) % plugins.length;
         if (plugins[nextFocusedPlugin].tabindex()) {
             plugins[this.#focusedPlugin].tabindex?.set(-1);
-            plugins[nextFocusedPlugin].tabindex.set(0);
+            plugins[nextFocusedPlugin].tabindex?.set(0);
         }
         this.#focusedPlugin = nextFocusedPlugin;
         plugins[this.#focusedPlugin].focus();
     }
     focus() {
-        this.content().nativeElement.focus();
+        this.content()?.nativeElement.focus();
     }
     touch() {
         this.#isTouched.set(true);
@@ -155,9 +164,9 @@ class RichTextInputComponent {
         });
     }
     #onEditorUpdate({ tags, dirtyElements }) {
-        const isComposing = this.#editor.isComposing();
+        const isComposing = this.#editor?.isComposing();
         if (!tags.has(INITIAL_UPDATE_TAG) && dirtyElements.size) {
-            this.#editor.read(() => {
+            this.#editor?.read(() => {
                 let result = '';
                 // ignore empty nodes
                 if (!$isRootTextContentEmpty(isComposing, false)) {
@@ -167,7 +176,7 @@ class RichTextInputComponent {
                 this.#onChange?.(result);
             });
         }
-        const currentCanShowPlaceholder = this.#editor.getEditorState().read($canShowPlaceholderCurry(isComposing));
+        const currentCanShowPlaceholder = this.#editor?.getEditorState().read($canShowPlaceholderCurry(isComposing));
         this.currentCanShowPlaceholder.set(currentCanShowPlaceholder);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RichTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -177,18 +186,20 @@ class RichTextInputComponent {
                 useExisting: forwardRef(() => RichTextInputComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "pluginComponents", predicate: RICH_TEXT_PLUGIN_COMPONENT, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"richTextField\" [class.is-disabled]=\"isDisabled()\" [class.mod-autoResize]=\"autoResize()\">\n\t<div\n\t\t#content\n\t\tluInput\n\t\tclass=\"richTextField-content textFlow\"\n\t\trole=\"textbox\"\n\t\t[attr.contenteditable]=\"!isDisabled()\"\n\t\t[attr.aria-disabled]=\"isDisabled()\"\n\t\t[attr.aria-placeholder]=\"currentCanShowPlaceholder() ? placeholder() : null\"\n\t\t[attr.aria-labelledby]=\"formFieldId() + '-label'\"\n\t\t[attr.spellcheck]=\"!disableSpellcheck()\"\n\t\t(blur)=\"touch()\"\n\t></div>\n\t@if (currentCanShowPlaceholder()) {\n\t\t<div aria-hidden=\"true\" class=\"richTextField-content-placeholder\">{{ placeholder() }}</div>\n\t}\n\t<div\n\t\tclass=\"richTextField-toolbar\"\n\t\t[class.pr-u-displayNone]=\"hideToolbar()\"\n\t\t(keydown.arrowleft)=\"focusSiblingPlugin($event, -1)\"\n\t\t(keydown.arrowRight)=\"focusSiblingPlugin($event, 1)\"\n\t\trole=\"toolbar\"\n\t\t[attr.aria-labelledby]=\"formFieldId() + '-label'\"\n\t\t[attr.aria-controls]=\"formFieldId()\"\n\t>\n\t\t<ng-content />\n\t</div>\n</div>\n", styles: ["@layer components{.richTextField{--components-richTextField-borderColor: var(--pr-t-color-input-border);--components-richTextField-backgroundColor: var(--pr-t-color-input-background);--components-richTextField-color: var(--pr-t-color-input-text);--components-richTextField-toolbar-backgroundColor: var(--palettes-neutral-25);--components-richTextField-toolbar-display: block;--components-richTextField-resize: vertical;--components-richTextField-height: 3lh;--components-richTextField-minHeight: 2lh;--components-richTextField-maxHeight: 90dvh;--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder);display:flex;flex-direction:column;flex-grow:1;overflow:auto;background-color:var(--components-richTextField-backgroundColor);color:var(--components-richTextField-color);border-color:var(--components-richTextField-borderColor);border-style:solid;border-width:1px;border-radius:var(--pr-t-border-radius-input);resize:var(--components-richTextField-resize);min-block-size:calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25));max-block-size:var(--components-richTextField-maxHeight);block-size:calc(var(--components-richTextField-height) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25))}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips){min-block-size:calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25) + var(--pr-t-spacings-600))}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-chips{border-block-start:1px solid var(--palettes-neutral-200);padding-block-start:var(--pr-t-spacings-100)}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-formatting{padding-block-end:var(--pr-t-spacings-100)}.richTextField-toolbar{display:var(--components-richTextField-toolbar-display);background-color:var(--components-richTextField-toolbar-backgroundColor);border-radius:0 0 var(--pr-t-border-radius-input) var(--pr-t-border-radius-input);padding:var(--pr-t-spacings-100);overflow:hidden;animation-name:fadeIn;animation-duration:var(--commons-animations-durations-fast);animation-delay:var(--commons-animations-durations-fast);opacity:0;flex-shrink:0;animation-fill-mode:forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.richTextField-toolbar-formatting{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--pr-t-spacings-400);flex-shrink:0}.richTextField-toolbar-formatting:empty{display:none}.richTextField-toolbar-col{display:flex;flex-wrap:wrap;align-items:center;row-gap:var(--pr-t-spacings-100);margin-inline-start:calc(var(--pr-t-spacings-400) * -1)}.richTextField-toolbar-col-group{display:flex;flex-wrap:wrap;align-items:center}.richTextField-toolbar-col-group:not(:only-child){position:relative;margin-inline-start:var(--pr-t-spacings-400)}.richTextField-toolbar-col-group:not(:only-child):before{content:\"\";position:absolute;inset:var(--pr-t-spacings-100) auto var(--pr-t-spacings-100) calc(var(--pr-t-spacings-400) / -2);inline-size:2px;border-radius:var(--pr-t-border-radius-full);background-color:var(--palettes-neutral-300)}.richTextField-toolbar-col-group .richTextField-toolbar-col-group{display:contents}.richTextField-toolbar-chips{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-50);padding-block-start:0;border-block-start:0}.richTextField-toolbar-chips-chip{border:0}.richTextField-toolbar-chips-chip:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField-content{padding:var(--pr-t-spacings-100);outline:none;overflow:auto;flex-grow:1}.richTextField-content-chip{vertical-align:middle}.richTextField-content-chip:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField-content-placeholder{position:absolute;pointer-events:none;padding:var(--pr-t-spacings-100);-webkit-user-select:none;user-select:none;color:var(--components-richTextField-placeholder-color)}}@layer mods{.richTextField:has(.richTextField-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField:hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-hover)}.richTextField:has(.richTextField-content[aria-invalid=true]){--components-richTextField-borderColor: var(--pr-t-color-input-border-critical);--components-richTextField-backgroundColor: var(--pr-t-color-input-background-critical);--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder-critical)}.richTextField:has(.richTextField-content[aria-invalid=true]):hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-critical-hover)}.richTextField.is-disabled{--components-richTextField-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-display: none;--components-richTextField-color: var(--pr-t-color-input-text-disabled);--components-richTextField-borderColor: var(--pr-t-color-input-border)}.richTextField.mod-autoResize{--components-richTextField-minHeight: 3lh;--components-richTextField-height: auto;--components-richTextField-resize: none}}@layer mods{.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-600, var(--palettes-product-600))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:active{--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:disabled{--components-button-color: var(--commons-disabled-background);--components-button-backgroundColor: var(--palettes-neutral-500)}}\n"], dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "pluginComponents", predicate: RICH_TEXT_PLUGIN_COMPONENT, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "contentPresentation", first: true, predicate: ["contentPresentation"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"richTextField\" [class.is-disabled]=\"isDisabled()\" [class.mod-autoResize]=\"autoResize()\">\n\t<div\n\t\t#content\n\t\tluInput\n\t\tclass=\"richTextField-content textFlow\"\n\t\trole=\"textbox\"\n\t\t[attr.contenteditable]=\"!isDisabled()\"\n\t\t[attr.aria-disabled]=\"isDisabled()\"\n\t\t[attr.aria-placeholder]=\"currentCanShowPlaceholder() ? placeholder() : null\"\n\t\t[attr.aria-labelledby]=\"formFieldId() + '-label'\"\n\t\t[attr.spellcheck]=\"!disableSpellcheck()\"\n\t\t(blur)=\"touch()\"\n\t></div>\n\t@if (currentCanShowPlaceholder()) {\n\t\t<div aria-hidden=\"true\" class=\"richTextField-content-placeholder\">{{ placeholder() }}</div>\n\t}\n\t<div\n\t\tclass=\"richTextField-toolbar\"\n\t\t[class.pr-u-displayNone]=\"hideToolbar()\"\n\t\t(keydown.arrowleft)=\"focusSiblingPlugin($event, -1)\"\n\t\t(keydown.arrowRight)=\"focusSiblingPlugin($event, 1)\"\n\t\trole=\"toolbar\"\n\t\t[attr.aria-labelledby]=\"formFieldId() + '-label'\"\n\t\t[attr.aria-controls]=\"formFieldId()\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"toolsProjection\" />\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t<span class=\"pr-u-displayNone\">\n\t\t<ng-container *ngTemplateOutlet=\"toolsProjection\" />\n\t</span>\n\t<div #contentPresentation class=\"textFlow\"></div>\n</ng-container>\n\n<ng-template #toolsProjection>\n\t<ng-content />\n</ng-template>\n", styles: ["@layer components{.richTextField{--components-richTextField-borderColor: var(--pr-t-color-input-border);--components-richTextField-backgroundColor: var(--pr-t-color-input-background);--components-richTextField-color: var(--pr-t-color-input-text);--components-richTextField-toolbar-backgroundColor: var(--palettes-neutral-25);--components-richTextField-toolbar-display: block;--components-richTextField-resize: vertical;--components-richTextField-height: 3lh;--components-richTextField-minHeight: 2lh;--components-richTextField-maxHeight: 90dvh;--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder);display:flex;flex-direction:column;flex-grow:1;overflow:auto;background-color:var(--components-richTextField-backgroundColor);color:var(--components-richTextField-color);border-color:var(--components-richTextField-borderColor);border-style:solid;border-width:1px;border-radius:var(--pr-t-border-radius-input);resize:var(--components-richTextField-resize);min-block-size:calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25));max-block-size:var(--components-richTextField-maxHeight);block-size:calc(var(--components-richTextField-height) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25))}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips){min-block-size:calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25) + var(--pr-t-spacings-600))}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-chips{border-block-start:1px solid var(--palettes-neutral-200);padding-block-start:var(--pr-t-spacings-100)}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-formatting{padding-block-end:var(--pr-t-spacings-100)}.richTextField-toolbar{display:var(--components-richTextField-toolbar-display);background-color:var(--components-richTextField-toolbar-backgroundColor);border-radius:0 0 var(--pr-t-border-radius-input) var(--pr-t-border-radius-input);padding:var(--pr-t-spacings-100);overflow:hidden;animation-name:fadeIn;animation-duration:var(--commons-animations-durations-fast);animation-delay:var(--commons-animations-durations-fast);opacity:0;flex-shrink:0;animation-fill-mode:forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.richTextField-toolbar-formatting{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--pr-t-spacings-400);flex-shrink:0}.richTextField-toolbar-formatting:empty{display:none}.richTextField-toolbar-col{display:flex;flex-wrap:wrap;align-items:center;row-gap:var(--pr-t-spacings-100);margin-inline-start:calc(var(--pr-t-spacings-400) * -1)}.richTextField-toolbar-col-group{display:flex;flex-wrap:wrap;align-items:center}.richTextField-toolbar-col-group:not(:only-child){position:relative;margin-inline-start:var(--pr-t-spacings-400)}.richTextField-toolbar-col-group:not(:only-child):before{content:\"\";position:absolute;inset:var(--pr-t-spacings-100) auto var(--pr-t-spacings-100) calc(var(--pr-t-spacings-400) / -2);inline-size:2px;border-radius:var(--pr-t-border-radius-full);background-color:var(--palettes-neutral-300)}.richTextField-toolbar-col-group .richTextField-toolbar-col-group{display:contents}.richTextField-toolbar-chips{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-50);padding-block-start:0;border-block-start:0}.richTextField-toolbar-chips-chip{border:0}.richTextField-toolbar-chips-chip:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField-content{padding:var(--pr-t-spacings-100);outline:none;overflow:auto;flex-grow:1}.richTextField-content-chip{vertical-align:middle}.richTextField-content-chip:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField-content-placeholder{position:absolute;pointer-events:none;padding:var(--pr-t-spacings-100);-webkit-user-select:none;user-select:none;color:var(--components-richTextField-placeholder-color)}}@layer mods{.richTextField:has(.richTextField-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField:hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-hover)}.richTextField:has(.richTextField-content[aria-invalid=true]){--components-richTextField-borderColor: var(--pr-t-color-input-border-critical);--components-richTextField-backgroundColor: var(--pr-t-color-input-background-critical);--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder-critical)}.richTextField:has(.richTextField-content[aria-invalid=true]):hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-critical-hover)}.richTextField.is-disabled{--components-richTextField-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-display: none;--components-richTextField-color: var(--pr-t-color-input-text-disabled);--components-richTextField-borderColor: var(--pr-t-color-input-border)}.richTextField.mod-autoResize{--components-richTextField-minHeight: 3lh;--components-richTextField-height: auto;--components-richTextField-resize: none}}@layer mods{.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-600, var(--palettes-product-600))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:active{--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:disabled{--components-button-color: var(--commons-disabled-background);--components-button-backgroundColor: var(--palettes-neutral-500)}}\n"], dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RichTextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-rich-text-input', imports: [InputDirective, CommonModule], encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'lu-rich-text-input', imports: [InputDirective, CommonModule, _PresentationDisplayDefaultDirective], encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => RichTextInputComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"richTextField\" [class.is-disabled]=\"isDisabled()\" [class.mod-autoResize]=\"autoResize()\">\n\t<div\n\t\t#content\n\t\tluInput\n\t\tclass=\"richTextField-content textFlow\"\n\t\trole=\"textbox\"\n\t\t[attr.contenteditable]=\"!isDisabled()\"\n\t\t[attr.aria-disabled]=\"isDisabled()\"\n\t\t[attr.aria-placeholder]=\"currentCanShowPlaceholder() ? placeholder() : null\"\n\t\t[attr.aria-labelledby]=\"formFieldId() + '-label'\"\n\t\t[attr.spellcheck]=\"!disableSpellcheck()\"\n\t\t(blur)=\"touch()\"\n\t></div>\n\t@if (currentCanShowPlaceholder()) {\n\t\t<div aria-hidden=\"true\" class=\"richTextField-content-placeholder\">{{ placeholder() }}</div>\n\t}\n\t<div\n\t\tclass=\"richTextField-toolbar\"\n\t\t[class.pr-u-displayNone]=\"hideToolbar()\"\n\t\t(keydown.arrowleft)=\"focusSiblingPlugin($event, -1)\"\n\t\t(keydown.arrowRight)=\"focusSiblingPlugin($event, 1)\"\n\t\trole=\"toolbar\"\n\t\t[attr.aria-labelledby]=\"formFieldId() + '-label'\"\n\t\t[attr.aria-controls]=\"formFieldId()\"\n\t>\n\t\t<ng-content />\n\t</div>\n</div>\n", styles: ["@layer components{.richTextField{--components-richTextField-borderColor: var(--pr-t-color-input-border);--components-richTextField-backgroundColor: var(--pr-t-color-input-background);--components-richTextField-color: var(--pr-t-color-input-text);--components-richTextField-toolbar-backgroundColor: var(--palettes-neutral-25);--components-richTextField-toolbar-display: block;--components-richTextField-resize: vertical;--components-richTextField-height: 3lh;--components-richTextField-minHeight: 2lh;--components-richTextField-maxHeight: 90dvh;--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder);display:flex;flex-direction:column;flex-grow:1;overflow:auto;background-color:var(--components-richTextField-backgroundColor);color:var(--components-richTextField-color);border-color:var(--components-richTextField-borderColor);border-style:solid;border-width:1px;border-radius:var(--pr-t-border-radius-input);resize:var(--components-richTextField-resize);min-block-size:calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25));max-block-size:var(--components-richTextField-maxHeight);block-size:calc(var(--components-richTextField-height) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25))}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips){min-block-size:calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25) + var(--pr-t-spacings-600))}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-chips{border-block-start:1px solid var(--palettes-neutral-200);padding-block-start:var(--pr-t-spacings-100)}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-formatting{padding-block-end:var(--pr-t-spacings-100)}.richTextField-toolbar{display:var(--components-richTextField-toolbar-display);background-color:var(--components-richTextField-toolbar-backgroundColor);border-radius:0 0 var(--pr-t-border-radius-input) var(--pr-t-border-radius-input);padding:var(--pr-t-spacings-100);overflow:hidden;animation-name:fadeIn;animation-duration:var(--commons-animations-durations-fast);animation-delay:var(--commons-animations-durations-fast);opacity:0;flex-shrink:0;animation-fill-mode:forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.richTextField-toolbar-formatting{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--pr-t-spacings-400);flex-shrink:0}.richTextField-toolbar-formatting:empty{display:none}.richTextField-toolbar-col{display:flex;flex-wrap:wrap;align-items:center;row-gap:var(--pr-t-spacings-100);margin-inline-start:calc(var(--pr-t-spacings-400) * -1)}.richTextField-toolbar-col-group{display:flex;flex-wrap:wrap;align-items:center}.richTextField-toolbar-col-group:not(:only-child){position:relative;margin-inline-start:var(--pr-t-spacings-400)}.richTextField-toolbar-col-group:not(:only-child):before{content:\"\";position:absolute;inset:var(--pr-t-spacings-100) auto var(--pr-t-spacings-100) calc(var(--pr-t-spacings-400) / -2);inline-size:2px;border-radius:var(--pr-t-border-radius-full);background-color:var(--palettes-neutral-300)}.richTextField-toolbar-col-group .richTextField-toolbar-col-group{display:contents}.richTextField-toolbar-chips{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-50);padding-block-start:0;border-block-start:0}.richTextField-toolbar-chips-chip{border:0}.richTextField-toolbar-chips-chip:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField-content{padding:var(--pr-t-spacings-100);outline:none;overflow:auto;flex-grow:1}.richTextField-content-chip{vertical-align:middle}.richTextField-content-chip:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField-content-placeholder{position:absolute;pointer-events:none;padding:var(--pr-t-spacings-100);-webkit-user-select:none;user-select:none;color:var(--components-richTextField-placeholder-color)}}@layer mods{.richTextField:has(.richTextField-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField:hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-hover)}.richTextField:has(.richTextField-content[aria-invalid=true]){--components-richTextField-borderColor: var(--pr-t-color-input-border-critical);--components-richTextField-backgroundColor: var(--pr-t-color-input-background-critical);--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder-critical)}.richTextField:has(.richTextField-content[aria-invalid=true]):hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-critical-hover)}.richTextField.is-disabled{--components-richTextField-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-display: none;--components-richTextField-color: var(--pr-t-color-input-text-disabled);--components-richTextField-borderColor: var(--pr-t-color-input-border)}.richTextField.mod-autoResize{--components-richTextField-minHeight: 3lh;--components-richTextField-height: auto;--components-richTextField-resize: none}}@layer mods{.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-600, var(--palettes-product-600))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:active{--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:disabled{--components-button-color: var(--commons-disabled-background);--components-button-backgroundColor: var(--palettes-neutral-500)}}\n"] }]
-        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disableSpellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSpellcheck", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], hideToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToolbar", required: false }] }], content: [{ type: i0.ViewChild, args: ['content', { ...{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"richTextField\" [class.is-disabled]=\"isDisabled()\" [class.mod-autoResize]=\"autoResize()\">\n\t<div\n\t\t#content\n\t\tluInput\n\t\tclass=\"richTextField-content textFlow\"\n\t\trole=\"textbox\"\n\t\t[attr.contenteditable]=\"!isDisabled()\"\n\t\t[attr.aria-disabled]=\"isDisabled()\"\n\t\t[attr.aria-placeholder]=\"currentCanShowPlaceholder() ? placeholder() : null\"\n\t\t[attr.aria-labelledby]=\"formFieldId() + '-label'\"\n\t\t[attr.spellcheck]=\"!disableSpellcheck()\"\n\t\t(blur)=\"touch()\"\n\t></div>\n\t@if (currentCanShowPlaceholder()) {\n\t\t<div aria-hidden=\"true\" class=\"richTextField-content-placeholder\">{{ placeholder() }}</div>\n\t}\n\t<div\n\t\tclass=\"richTextField-toolbar\"\n\t\t[class.pr-u-displayNone]=\"hideToolbar()\"\n\t\t(keydown.arrowleft)=\"focusSiblingPlugin($event, -1)\"\n\t\t(keydown.arrowRight)=\"focusSiblingPlugin($event, 1)\"\n\t\trole=\"toolbar\"\n\t\t[attr.aria-labelledby]=\"formFieldId() + '-label'\"\n\t\t[attr.aria-controls]=\"formFieldId()\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"toolsProjection\" />\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t<span class=\"pr-u-displayNone\">\n\t\t<ng-container *ngTemplateOutlet=\"toolsProjection\" />\n\t</span>\n\t<div #contentPresentation class=\"textFlow\"></div>\n</ng-container>\n\n<ng-template #toolsProjection>\n\t<ng-content />\n</ng-template>\n", styles: ["@layer components{.richTextField{--components-richTextField-borderColor: var(--pr-t-color-input-border);--components-richTextField-backgroundColor: var(--pr-t-color-input-background);--components-richTextField-color: var(--pr-t-color-input-text);--components-richTextField-toolbar-backgroundColor: var(--palettes-neutral-25);--components-richTextField-toolbar-display: block;--components-richTextField-resize: vertical;--components-richTextField-height: 3lh;--components-richTextField-minHeight: 2lh;--components-richTextField-maxHeight: 90dvh;--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder);display:flex;flex-direction:column;flex-grow:1;overflow:auto;background-color:var(--components-richTextField-backgroundColor);color:var(--components-richTextField-color);border-color:var(--components-richTextField-borderColor);border-style:solid;border-width:1px;border-radius:var(--pr-t-border-radius-input);resize:var(--components-richTextField-resize);min-block-size:calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25));max-block-size:var(--components-richTextField-maxHeight);block-size:calc(var(--components-richTextField-height) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25))}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips){min-block-size:calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25) + var(--pr-t-spacings-600))}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-chips{border-block-start:1px solid var(--palettes-neutral-200);padding-block-start:var(--pr-t-spacings-100)}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-formatting{padding-block-end:var(--pr-t-spacings-100)}.richTextField-toolbar{display:var(--components-richTextField-toolbar-display);background-color:var(--components-richTextField-toolbar-backgroundColor);border-radius:0 0 var(--pr-t-border-radius-input) var(--pr-t-border-radius-input);padding:var(--pr-t-spacings-100);overflow:hidden;animation-name:fadeIn;animation-duration:var(--commons-animations-durations-fast);animation-delay:var(--commons-animations-durations-fast);opacity:0;flex-shrink:0;animation-fill-mode:forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.richTextField-toolbar-formatting{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--pr-t-spacings-400);flex-shrink:0}.richTextField-toolbar-formatting:empty{display:none}.richTextField-toolbar-col{display:flex;flex-wrap:wrap;align-items:center;row-gap:var(--pr-t-spacings-100);margin-inline-start:calc(var(--pr-t-spacings-400) * -1)}.richTextField-toolbar-col-group{display:flex;flex-wrap:wrap;align-items:center}.richTextField-toolbar-col-group:not(:only-child){position:relative;margin-inline-start:var(--pr-t-spacings-400)}.richTextField-toolbar-col-group:not(:only-child):before{content:\"\";position:absolute;inset:var(--pr-t-spacings-100) auto var(--pr-t-spacings-100) calc(var(--pr-t-spacings-400) / -2);inline-size:2px;border-radius:var(--pr-t-border-radius-full);background-color:var(--palettes-neutral-300)}.richTextField-toolbar-col-group .richTextField-toolbar-col-group{display:contents}.richTextField-toolbar-chips{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-50);padding-block-start:0;border-block-start:0}.richTextField-toolbar-chips-chip{border:0}.richTextField-toolbar-chips-chip:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField-content{padding:var(--pr-t-spacings-100);outline:none;overflow:auto;flex-grow:1}.richTextField-content-chip{vertical-align:middle}.richTextField-content-chip:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField-content-placeholder{position:absolute;pointer-events:none;padding:var(--pr-t-spacings-100);-webkit-user-select:none;user-select:none;color:var(--components-richTextField-placeholder-color)}}@layer mods{.richTextField:has(.richTextField-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField:hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-hover)}.richTextField:has(.richTextField-content[aria-invalid=true]){--components-richTextField-borderColor: var(--pr-t-color-input-border-critical);--components-richTextField-backgroundColor: var(--pr-t-color-input-background-critical);--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder-critical)}.richTextField:has(.richTextField-content[aria-invalid=true]):hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-critical-hover)}.richTextField.is-disabled{--components-richTextField-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-display: none;--components-richTextField-color: var(--pr-t-color-input-text-disabled);--components-richTextField-borderColor: var(--pr-t-color-input-border)}.richTextField.mod-autoResize{--components-richTextField-minHeight: 3lh;--components-richTextField-height: auto;--components-richTextField-resize: none}}@layer mods{.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-600, var(--palettes-product-600))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:active{--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:disabled{--components-button-color: var(--commons-disabled-background);--components-button-backgroundColor: var(--palettes-neutral-500)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disableSpellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSpellcheck", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], hideToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToolbar", required: false }] }], content: [{ type: i0.ViewChild, args: ['content', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], contentPresentation: [{ type: i0.ViewChild, args: ['contentPresentation', { ...{
                             read: ElementRef,
                         }, isSignal: true }] }], pluginComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RICH_TEXT_PLUGIN_COMPONENT), { ...{ descendants: true }, isSignal: true }] }] } });
 
@@ -474,7 +485,7 @@ function registerClearFormat(editor) {
 class ClearFormatComponent {
     constructor() {
         this.#registeredCommands = () => { };
-        this.intl = getIntl(LU_RICH_TEXT_INPUT_TRANSLATIONS);
+        this.intl = input(...intlInputOptions(LU_RICH_TEXT_INPUT_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : []));
         this.element = viewChild('element', { ...(ngDevMode ? { debugName: "element" } : {}), read: (ElementRef) });
         this.tabindex = signal(-1, ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
         this.isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
@@ -498,12 +509,12 @@ class ClearFormatComponent {
         this.element().nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ClearFormatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: ClearFormatComponent, isStandalone: true, selector: "lu-rich-text-plugin-clear-format", host: { classAttribute: "richTextField-toolbar-col-group" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: ClearFormatComponent, isStandalone: true, selector: "lu-rich-text-plugin-clear-format", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "richTextField-toolbar-col-group" }, providers: [
             {
                 provide: RICH_TEXT_PLUGIN_COMPONENT,
                 useExisting: forwardRef(() => ClearFormatComponent),
             },
-        ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n\t#element\n\tluButton=\"ghost\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"intl.clearFormat\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon icon=\"formatClear\" [alt]=\"intl.clearFormat\" />\n</button>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[luButton],a[luButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton"] }, { kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n\t#element\n\tluButton=\"ghost\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"intl().clearFormat\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon icon=\"formatClear\" [alt]=\"intl().clearFormat\" />\n</button>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[luButton],a[luButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton"] }, { kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ClearFormatComponent, decorators: [{
             type: Component,
@@ -514,8 +525,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             provide: RICH_TEXT_PLUGIN_COMPONENT,
                             useExisting: forwardRef(() => ClearFormatComponent),
                         },
-                    ], template: "<button\n\t#element\n\tluButton=\"ghost\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"intl.clearFormat\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon icon=\"formatClear\" [alt]=\"intl.clearFormat\" />\n</button>\n" }]
-        }], propDecorators: { element: [{ type: i0.ViewChild, args: ['element', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
+                    ], template: "<button\n\t#element\n\tluButton=\"ghost\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"intl().clearFormat\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon icon=\"formatClear\" [alt]=\"intl().clearFormat\" />\n</button>\n" }]
+        }], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], element: [{ type: i0.ViewChild, args: ['element', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 
 const FORMAT_HEADINGS = createCommand('FORMAT_HEADINGS');
 function registerHeadings(editor) {
@@ -551,17 +562,17 @@ class HeadingsComponent {
         this.element = viewChild('selectRef', ...(ngDevMode ? [{ debugName: "element" }] : []));
         this.tabindex = signal(-1, ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
         this.maxHeadingLevel = input(6, ...(ngDevMode ? [{ debugName: "maxHeadingLevel" }] : []));
-        this.headingOptions = computed(() => Object.keys(this.headingLabels).slice(0, this.maxHeadingLevel() + 1), ...(ngDevMode ? [{ debugName: "headingOptions" }] : []));
-        this.intl = getIntl(LU_RICH_TEXT_INPUT_TRANSLATIONS);
-        this.headingLabels = {
-            paragraph: [this.intl.headings0, 0],
-            h1: [this.intl.headings1, 1],
-            h2: [this.intl.headings2, 2],
-            h3: [this.intl.headings3, 3],
-            h4: [this.intl.headings4, 4],
-            h5: [this.intl.headings5, 5],
-            h6: [this.intl.headings6, 6],
-        };
+        this.headingOptions = computed(() => Object.keys(this.headingLabels()).slice(0, this.maxHeadingLevel() + 1), ...(ngDevMode ? [{ debugName: "headingOptions" }] : []));
+        this.intl = input(...intlInputOptions(LU_RICH_TEXT_INPUT_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : []));
+        this.headingLabels = computed(() => ({
+            paragraph: [this.intl().headings0, 0],
+            h1: [this.intl().headings1, 1],
+            h2: [this.intl().headings2, 2],
+            h3: [this.intl().headings3, 3],
+            h4: [this.intl().headings4, 4],
+            h5: [this.intl().headings5, 5],
+            h6: [this.intl().headings6, 6],
+        }), ...(ngDevMode ? [{ debugName: "headingLabels" }] : []));
         this.formControl = new FormControl('paragraph');
         this.#registeredCommands = () => { };
     }
@@ -589,12 +600,12 @@ class HeadingsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: HeadingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: HeadingsComponent, isStandalone: true, selector: "lu-rich-text-plugin-headings", inputs: { maxHeadingLevel: { classPropertyName: "maxHeadingLevel", publicName: "maxHeadingLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "richTextField-toolbar-col-group" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: HeadingsComponent, isStandalone: true, selector: "lu-rich-text-plugin-headings", inputs: { maxHeadingLevel: { classPropertyName: "maxHeadingLevel", publicName: "maxHeadingLevel", isSignal: true, isRequired: false, transformFunction: null }, intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "richTextField-toolbar-col-group" }, providers: [
             {
                 provide: RICH_TEXT_PLUGIN_COMPONENT,
                 useExisting: forwardRef(() => HeadingsComponent),
             },
-        ], viewQueries: [{ propertyName: "element", first: true, predicate: ["selectRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<lu-form-field [label]=\"intl.headingsLabel\" size=\"S\" hiddenLabel class=\"mod-width20\">\n\t<lu-simple-select [options]=\"headingOptions()\" [formControl]=\"formControl\" #selectRef [inputTabindex]=\"tabindex()\">\n\t\t<ng-container *luOption=\"let heading; select: selectRef\">{{ headingLabels[heading][0] }}</ng-container>\n\t</lu-simple-select>\n</lu-form-field>\n", dependencies: [{ kind: "component", type: LuSimpleSelectInputComponent, selector: "lu-simple-select", inputs: ["autocomplete"] }, { kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter", "presentation"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: LuOptionDirective, selector: "[luOption]", inputs: ["luOptionSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "element", first: true, predicate: ["selectRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<lu-form-field [label]=\"intl().headingsLabel\" size=\"S\" hiddenLabel class=\"mod-width20\">\n\t<lu-simple-select [options]=\"headingOptions()\" [formControl]=\"formControl\" #selectRef [inputTabindex]=\"tabindex()\">\n\t\t<ng-container *luOption=\"let heading; select: selectRef\">{{ headingLabels()[heading][0] }}</ng-container>\n\t</lu-simple-select>\n</lu-form-field>\n", dependencies: [{ kind: "component", type: LuSimpleSelectInputComponent, selector: "lu-simple-select", inputs: ["intl", "autocomplete"] }, { 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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: LuOptionDirective, selector: "[luOption]", inputs: ["luOptionSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: HeadingsComponent, decorators: [{
             type: Component,
@@ -605,14 +616,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             provide: RICH_TEXT_PLUGIN_COMPONENT,
                             useExisting: forwardRef(() => HeadingsComponent),
                         },
-                    ], template: "<lu-form-field [label]=\"intl.headingsLabel\" size=\"S\" hiddenLabel class=\"mod-width20\">\n\t<lu-simple-select [options]=\"headingOptions()\" [formControl]=\"formControl\" #selectRef [inputTabindex]=\"tabindex()\">\n\t\t<ng-container *luOption=\"let heading; select: selectRef\">{{ headingLabels[heading][0] }}</ng-container>\n\t</lu-simple-select>\n</lu-form-field>\n" }]
-        }], propDecorators: { element: [{ type: i0.ViewChild, args: ['selectRef', { isSignal: true }] }], maxHeadingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeadingLevel", required: false }] }] } });
+                    ], template: "<lu-form-field [label]=\"intl().headingsLabel\" size=\"S\" hiddenLabel class=\"mod-width20\">\n\t<lu-simple-select [options]=\"headingOptions()\" [formControl]=\"formControl\" #selectRef [inputTabindex]=\"tabindex()\">\n\t\t<ng-container *luOption=\"let heading; select: selectRef\">{{ headingLabels()[heading][0] }}</ng-container>\n\t</lu-simple-select>\n</lu-form-field>\n" }]
+        }], propDecorators: { element: [{ type: i0.ViewChild, args: ['selectRef', { isSignal: true }] }], maxHeadingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeadingLevel", required: false }] }], intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }] } });
 
 class LinkDialogComponent {
     constructor() {
         this.dialogData = injectDialogData();
         this.dialogRef = injectDialogRef();
-        this.intl = getIntl(LU_RICH_TEXT_INPUT_TRANSLATIONS);
+        this.intl = input(...intlInputOptions(LU_RICH_TEXT_INPUT_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : []));
         this.formGroup = new FormGroup({
             href: new FormControl(this.dialogData, Validators.required),
         });
@@ -628,12 +639,12 @@ class LinkDialogComponent {
         this.dialogRef.close(undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LinkDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: LinkDialogComponent, isStandalone: true, selector: "lu-rich-text-plugin-link-dialog", ngImport: i0, template: "<lu-dialog>\n\t<form class=\"dialog-form\" (submit)=\"save()\" [formGroup]=\"formGroup\">\n\t\t<lu-dialog-content>\n\t\t\t<lu-form-field [label]=\"intl.linksHref\">\n\t\t\t\t<lu-text-input formControlName=\"href\" type=\"url\" [placeholder]=\"intl.linksPlaceholder\" />\n\t\t\t</lu-form-field>\n\t\t</lu-dialog-content>\n\t\t<lu-dialog-footer>\n\t\t\t@if (dialogData) {\n\t\t\t\t<div class=\"footer-content\">\n\t\t\t\t\t<button type=\"button\" luButton=\"ghost\" delete (click)=\"deleteLink()\">{{ intl.linksDelete }}</button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"footer-actions\">\n\t\t\t\t<button type=\"submit\" luButton>{{ intl.linksSubmit }}</button>\n\t\t\t\t<button type=\"button\" luButton=\"ghost\" luDialogDismiss>{{ intl.linksCancel }}</button>\n\t\t\t</div>\n\t\t</lu-dialog-footer>\n\t</form>\n</lu-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "lu-dialog", inputs: ["stacked"] }, { kind: "component", type: DialogContentComponent, selector: "lu-dialog-content" }, { kind: "component", type: DialogFooterComponent, selector: "lu-dialog-footer" }, { kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter", "presentation"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["mask", "placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "searchIcon", "type"], outputs: ["blur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton],a[luButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton"] }, { kind: "directive", type: DialogDismissDirective, selector: "[luDialogDismiss]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: LinkDialogComponent, isStandalone: true, selector: "lu-rich-text-plugin-link-dialog", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<lu-dialog>\n\t<form class=\"dialog-form\" (submit)=\"save()\" [formGroup]=\"formGroup\">\n\t\t<lu-dialog-content>\n\t\t\t<lu-form-field [label]=\"intl().linksHref\">\n\t\t\t\t<lu-text-input formControlName=\"href\" type=\"url\" [placeholder]=\"intl().linksPlaceholder\" />\n\t\t\t</lu-form-field>\n\t\t</lu-dialog-content>\n\t\t<lu-dialog-footer>\n\t\t\t@if (dialogData) {\n\t\t\t\t<div class=\"footer-content\">\n\t\t\t\t\t<button type=\"button\" luButton=\"ghost\" delete (click)=\"deleteLink()\">{{ intl().linksDelete }}</button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"footer-actions\">\n\t\t\t\t<button type=\"submit\" luButton>{{ intl().linksSubmit }}</button>\n\t\t\t\t<button type=\"button\" luButton=\"ghost\" luDialogDismiss>{{ intl().linksCancel }}</button>\n\t\t\t</div>\n\t\t</lu-dialog-footer>\n\t</form>\n</lu-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "lu-dialog", inputs: ["stacked"] }, { kind: "component", type: DialogContentComponent, selector: "lu-dialog-content" }, { kind: "component", type: DialogFooterComponent, selector: "lu-dialog-footer" }, { 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: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["intl", "mask", "placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "searchIcon", "type"], outputs: ["blur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton],a[luButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton"] }, { kind: "directive", type: DialogDismissDirective, selector: "[luDialogDismiss]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LinkDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-rich-text-plugin-link-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DialogComponent, DialogContentComponent, DialogFooterComponent, FormFieldComponent, TextInputComponent, ReactiveFormsModule, ButtonComponent, DialogDismissDirective], template: "<lu-dialog>\n\t<form class=\"dialog-form\" (submit)=\"save()\" [formGroup]=\"formGroup\">\n\t\t<lu-dialog-content>\n\t\t\t<lu-form-field [label]=\"intl.linksHref\">\n\t\t\t\t<lu-text-input formControlName=\"href\" type=\"url\" [placeholder]=\"intl.linksPlaceholder\" />\n\t\t\t</lu-form-field>\n\t\t</lu-dialog-content>\n\t\t<lu-dialog-footer>\n\t\t\t@if (dialogData) {\n\t\t\t\t<div class=\"footer-content\">\n\t\t\t\t\t<button type=\"button\" luButton=\"ghost\" delete (click)=\"deleteLink()\">{{ intl.linksDelete }}</button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"footer-actions\">\n\t\t\t\t<button type=\"submit\" luButton>{{ intl.linksSubmit }}</button>\n\t\t\t\t<button type=\"button\" luButton=\"ghost\" luDialogDismiss>{{ intl.linksCancel }}</button>\n\t\t\t</div>\n\t\t</lu-dialog-footer>\n\t</form>\n</lu-dialog>\n" }]
-        }] });
+            args: [{ selector: 'lu-rich-text-plugin-link-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DialogComponent, DialogContentComponent, DialogFooterComponent, FormFieldComponent, TextInputComponent, ReactiveFormsModule, ButtonComponent, DialogDismissDirective], template: "<lu-dialog>\n\t<form class=\"dialog-form\" (submit)=\"save()\" [formGroup]=\"formGroup\">\n\t\t<lu-dialog-content>\n\t\t\t<lu-form-field [label]=\"intl().linksHref\">\n\t\t\t\t<lu-text-input formControlName=\"href\" type=\"url\" [placeholder]=\"intl().linksPlaceholder\" />\n\t\t\t</lu-form-field>\n\t\t</lu-dialog-content>\n\t\t<lu-dialog-footer>\n\t\t\t@if (dialogData) {\n\t\t\t\t<div class=\"footer-content\">\n\t\t\t\t\t<button type=\"button\" luButton=\"ghost\" delete (click)=\"deleteLink()\">{{ intl().linksDelete }}</button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"footer-actions\">\n\t\t\t\t<button type=\"submit\" luButton>{{ intl().linksSubmit }}</button>\n\t\t\t\t<button type=\"button\" luButton=\"ghost\" luDialogDismiss>{{ intl().linksCancel }}</button>\n\t\t\t</div>\n\t\t</lu-dialog-footer>\n\t</form>\n</lu-dialog>\n" }]
+        }], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }] } });
 
 const FORMAT_LINK = createCommand('FORMAT_LINK');
 function registerLink(editor) {
@@ -761,7 +772,7 @@ class LinkComponent {
         this.tabindex = signal(-1, ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
         this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
         this.isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-        this.intl = getIntl(LU_RICH_TEXT_INPUT_TRANSLATIONS);
+        this.intl = input(...intlInputOptions(LU_RICH_TEXT_INPUT_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : []));
         this.#registeredCommands = () => { };
         PopoverLinkNode.setViewContainerRef(this.#viewContainerRef);
         PopoverAutoLinkNode.setViewContainerRef(this.#viewContainerRef);
@@ -842,13 +853,13 @@ class LinkComponent {
         this.isDisabled.set(isDisabled);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: LinkComponent, isStandalone: true, selector: "lu-rich-text-plugin-link", host: { classAttribute: "richTextField-toolbar-col-group" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: LinkComponent, isStandalone: true, selector: "lu-rich-text-plugin-link", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "richTextField-toolbar-col-group" }, providers: [
             provideLuDialog(),
             {
                 provide: RICH_TEXT_PLUGIN_COMPONENT,
                 useExisting: forwardRef(() => LinkComponent),
             },
-        ], viewQueries: [{ propertyName: "linkNodeTemplate", first: true, predicate: ["linkNodeTemplate"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n\t#element\n\tluButton=\"ghost\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"intl.linksLabel\"\n\t[attr.aria-pressed]=\"active()\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon icon=\"formatLink\" [alt]=\"intl.linksLabel\" />\n</button>\n\n<ng-template #linkNodeTemplate let-href=\"href\" let-title=\"title\" let-target=\"target\">\n\t<a [href]=\"href\" [title]=\"title\" [target]=\"target\" [luPopover2]=\"popover\" #trigger=\"luPopover2\"></a>\n\t<ng-template #popover>\n\t\t<div class=\"popover-contentOptional linkPopover\">\n\t\t\t<a [href]=\"href\" luLink external class=\"pr-u-ellipsis\">{{ href }}</a>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); dispatchCommand()\"\n\t\t\t\t[luTooltip]=\"intl.linksLabel\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"officePen\" [alt]=\"intl.linksLabel\" />\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); deleteLink()\"\n\t\t\t\t[luTooltip]=\"intl.linksDelete\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"trashDelete\" [alt]=\"intl.linksDelete\" />\n\t\t\t</button>\n\t\t</div>\n\t</ng-template>\n</ng-template>\n", styles: [".linkPopover{display:flex;justify-items:center;gap:var(--pr-t-spacings-50);max-width:20rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[luButton],a[luButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton"] }, { kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "directive", type: PopoverDirective, selector: "[luPopover2]", inputs: ["luPopover2", "luPopoverPosition", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverAnchor", "luPopoverOpenDelay", "luPopoverCloseDelay"], outputs: ["luPopoverTriggerChange", "luPopoverClosed", "luPopoverOpened"], exportAs: ["luPopover2"] }, { kind: "component", type: LinkComponent$1, selector: "a[luLink], button[luLink]", inputs: ["href", "luLink", "disabled", "decorationHover", "external"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "linkNodeTemplate", first: true, predicate: ["linkNodeTemplate"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n\t#element\n\tluButton=\"ghost\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"intl().linksLabel\"\n\t[attr.aria-pressed]=\"active()\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon icon=\"formatLink\" [alt]=\"intl().linksLabel\" />\n</button>\n\n<ng-template #linkNodeTemplate let-href=\"href\" let-title=\"title\" let-target=\"target\">\n\t<a [href]=\"href\" [title]=\"title\" [target]=\"target\" [luPopover2]=\"popover\" #trigger=\"luPopover2\"></a>\n\t<ng-template #popover>\n\t\t<div class=\"popover-contentOptional linkPopover\">\n\t\t\t<a [href]=\"href\" luLink external class=\"pr-u-ellipsis\">{{ href }}</a>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); dispatchCommand()\"\n\t\t\t\t[luTooltip]=\"intl().linksLabel\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"officePen\" [alt]=\"intl().linksLabel\" />\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); deleteLink()\"\n\t\t\t\t[luTooltip]=\"intl().linksDelete\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"trashDelete\" [alt]=\"intl().linksDelete\" />\n\t\t\t</button>\n\t\t</div>\n\t</ng-template>\n</ng-template>\n", styles: [".linkPopover{display:flex;justify-items:center;gap:var(--pr-t-spacings-50);max-width:20rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[luButton],a[luButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton"] }, { kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { 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: LinkComponent$1, selector: "a[luLink], button[luLink]", inputs: ["intl", "href", "luLink", "disabled", "decorationHover", "external"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LinkComponent, decorators: [{
             type: Component,
@@ -860,8 +871,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             provide: RICH_TEXT_PLUGIN_COMPONENT,
                             useExisting: forwardRef(() => LinkComponent),
                         },
-                    ], template: "<button\n\t#element\n\tluButton=\"ghost\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"intl.linksLabel\"\n\t[attr.aria-pressed]=\"active()\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon icon=\"formatLink\" [alt]=\"intl.linksLabel\" />\n</button>\n\n<ng-template #linkNodeTemplate let-href=\"href\" let-title=\"title\" let-target=\"target\">\n\t<a [href]=\"href\" [title]=\"title\" [target]=\"target\" [luPopover2]=\"popover\" #trigger=\"luPopover2\"></a>\n\t<ng-template #popover>\n\t\t<div class=\"popover-contentOptional linkPopover\">\n\t\t\t<a [href]=\"href\" luLink external class=\"pr-u-ellipsis\">{{ href }}</a>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); dispatchCommand()\"\n\t\t\t\t[luTooltip]=\"intl.linksLabel\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"officePen\" [alt]=\"intl.linksLabel\" />\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); deleteLink()\"\n\t\t\t\t[luTooltip]=\"intl.linksDelete\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"trashDelete\" [alt]=\"intl.linksDelete\" />\n\t\t\t</button>\n\t\t</div>\n\t</ng-template>\n</ng-template>\n", styles: [".linkPopover{display:flex;justify-items:center;gap:var(--pr-t-spacings-50);max-width:20rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { linkNodeTemplate: [{ type: i0.ViewChild, args: ['linkNodeTemplate', { ...{ read: TemplateRef }, isSignal: true }] }], element: [{ type: i0.ViewChild, args: ['element', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
+                    ], template: "<button\n\t#element\n\tluButton=\"ghost\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"intl().linksLabel\"\n\t[attr.aria-pressed]=\"active()\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon icon=\"formatLink\" [alt]=\"intl().linksLabel\" />\n</button>\n\n<ng-template #linkNodeTemplate let-href=\"href\" let-title=\"title\" let-target=\"target\">\n\t<a [href]=\"href\" [title]=\"title\" [target]=\"target\" [luPopover2]=\"popover\" #trigger=\"luPopover2\"></a>\n\t<ng-template #popover>\n\t\t<div class=\"popover-contentOptional linkPopover\">\n\t\t\t<a [href]=\"href\" luLink external class=\"pr-u-ellipsis\">{{ href }}</a>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); dispatchCommand()\"\n\t\t\t\t[luTooltip]=\"intl().linksLabel\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"officePen\" [alt]=\"intl().linksLabel\" />\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); deleteLink()\"\n\t\t\t\t[luTooltip]=\"intl().linksDelete\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"trashDelete\" [alt]=\"intl().linksDelete\" />\n\t\t\t</button>\n\t\t</div>\n\t</ng-template>\n</ng-template>\n", styles: [".linkPopover{display:flex;justify-items:center;gap:var(--pr-t-spacings-50);max-width:20rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { linkNodeTemplate: [{ type: i0.ViewChild, args: ['linkNodeTemplate', { ...{ read: TemplateRef }, isSignal: true }] }], element: [{ type: i0.ViewChild, args: ['element', { ...{ read: (ElementRef) }, isSignal: true }] }], intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }] } });
 
 const FORMAT_LIST = createCommand('FORMAT_LIST');
 function registerListsGlobal(editor) {
@@ -951,7 +962,7 @@ class ListStyleToolbarComponent {
     constructor() {
         this.#registeredCommands = () => { };
         this.pluginComponents = viewChildren(RICH_TEXT_PLUGIN_COMPONENT, ...(ngDevMode ? [{ debugName: "pluginComponents" }] : []));
-        this.intl = getIntl(LU_RICH_TEXT_INPUT_TRANSLATIONS);
+        this.intl = input(...intlInputOptions(LU_RICH_TEXT_INPUT_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : []));
     }
     #registeredCommands;
     setEditorInstance(editor) {
@@ -968,12 +979,12 @@ class ListStyleToolbarComponent {
         this.#registeredCommands();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ListStyleToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: ListStyleToolbarComponent, isStandalone: true, selector: "lu-rich-text-toolbar-list-style", host: { attributes: { "role": "radiogroup" }, classAttribute: "richTextField-toolbar-col-group" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: ListStyleToolbarComponent, isStandalone: true, selector: "lu-rich-text-toolbar-list-style", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "radiogroup" }, classAttribute: "richTextField-toolbar-col-group" }, providers: [
             {
                 provide: RICH_TEXT_PLUGIN_COMPONENT,
                 useExisting: forwardRef(() => ListStyleToolbarComponent),
             },
-        ], viewQueries: [{ propertyName: "pluginComponents", predicate: RICH_TEXT_PLUGIN_COMPONENT, descendants: true, isSignal: true }], ngImport: i0, template: "<lu-rich-text-plugin-list format=\"bullet\" [tooltip]=\"intl.listsBulletLabel\" icon=\"formatBulletedList\" />\n<lu-rich-text-plugin-list format=\"number\" [tooltip]=\"intl.listsNumberedLabel\" icon=\"formatNumberedList\" />\n", dependencies: [{ kind: "component", type: ListFormatComponent, selector: "lu-rich-text-plugin-list", inputs: ["format", "icon", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "pluginComponents", predicate: RICH_TEXT_PLUGIN_COMPONENT, descendants: true, isSignal: true }], ngImport: i0, template: "<lu-rich-text-plugin-list format=\"bullet\" [tooltip]=\"intl().listsBulletLabel\" icon=\"formatBulletedList\" />\n<lu-rich-text-plugin-list format=\"number\" [tooltip]=\"intl().listsNumberedLabel\" icon=\"formatNumberedList\" />\n", dependencies: [{ kind: "component", type: ListFormatComponent, selector: "lu-rich-text-plugin-list", inputs: ["format", "icon", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ListStyleToolbarComponent, decorators: [{
             type: Component,
@@ -985,8 +996,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             provide: RICH_TEXT_PLUGIN_COMPONENT,
                             useExisting: forwardRef(() => ListStyleToolbarComponent),
                         },
-                    ], imports: [ListFormatComponent], template: "<lu-rich-text-plugin-list format=\"bullet\" [tooltip]=\"intl.listsBulletLabel\" icon=\"formatBulletedList\" />\n<lu-rich-text-plugin-list format=\"number\" [tooltip]=\"intl.listsNumberedLabel\" icon=\"formatNumberedList\" />\n" }]
-        }], propDecorators: { pluginComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => RICH_TEXT_PLUGIN_COMPONENT), { isSignal: true }] }] } });
+                    ], imports: [ListFormatComponent], template: "<lu-rich-text-plugin-list format=\"bullet\" [tooltip]=\"intl().listsBulletLabel\" icon=\"formatBulletedList\" />\n<lu-rich-text-plugin-list format=\"number\" [tooltip]=\"intl().listsNumberedLabel\" icon=\"formatNumberedList\" />\n" }]
+        }], propDecorators: { pluginComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => RICH_TEXT_PLUGIN_COMPONENT), { isSignal: true }] }], intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }] } });
 
 class TagNode extends DecoratorNode {
     #tagKey;
@@ -1042,6 +1053,12 @@ class TagNode extends DecoratorNode {
     }
     createDOM(_config, editor) {
         if (TagNode.#viewContainerRef) {
+            if (!editor.isEditable()) {
+                this.#componentRef?.destroy();
+                const span = document.createElement('span');
+                span.textContent = this.#tagDescription ?? this.#tagKey;
+                return span;
+            }
             // Create the component
             this.#componentRef = TagNode.#viewContainerRef.createComponent(ChipComponent);
             // Set inputs on the component instance
@@ -1066,7 +1083,7 @@ class TagNode extends DecoratorNode {
         throw new Error('ViewContainerRef is not set for TagNode. Ensure it is initialized before creating TagNode instances.');
     }
     updateDOM(prevNode, _dom, _config) {
-        return this.#tagDescription !== prevNode.#tagDescription || this.#tagKey !== prevNode.#tagKey || this.#disabled !== prevNode.#disabled;
+        return this.#tagDescription !== prevNode.#tagDescription || this.#tagKey !== prevNode.#tagKey || this.#disabled !== prevNode.#disabled || this.#componentRef !== prevNode.#componentRef;
     }
     remove(preserveEmptyParent) {
         super.remove(preserveEmptyParent);
@@ -1148,7 +1165,7 @@ class RichTextPluginTagComponent {
     #registeredCommands;
     constructor() {
         this.#viewContainerRef = inject(ViewContainerRef);
-        this.intl = getIntl(LU_RICH_TEXT_INPUT_TRANSLATIONS);
+        this.intl = input(...intlInputOptions(LU_RICH_TEXT_INPUT_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : []));
         this.tags = input.required(...(ngDevMode ? [{ debugName: "tags" }] : []));
         this.isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
         this.focusIndex = signal(0, ...(ngDevMode ? [{ debugName: "focusIndex" }] : []));
@@ -1230,12 +1247,12 @@ class RichTextPluginTagComponent {
         this.#registeredCommands();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RichTextPluginTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: RichTextPluginTagComponent, isStandalone: true, selector: "lu-rich-text-plugin-tag", inputs: { tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: RichTextPluginTagComponent, isStandalone: true, selector: "lu-rich-text-plugin-tag", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             {
                 provide: RICH_TEXT_PLUGIN_COMPONENT,
                 useExisting: forwardRef(() => RichTextPluginTagComponent),
             },
-        ], viewQueries: [{ propertyName: "focusableElements", predicate: ["tagButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"richTextField-toolbar-chips\" (keydown.arrowleft)=\"focusTag($event, -1)\" (keydown.arrowRight)=\"focusTag($event, 1)\">\n\t<span aria-hidden=\"true\">{{ intl.insertTag }}</span>\n\t@for (tag of tags(); track tag) {\n\t\t<lu-chip\n\t\t\t[attr.tabindex]=\"isDisabled() ? null : $first ? 0 : -1\"\n\t\t\t[disabled]=\"isDisabled()\"\n\t\t\t(click)=\"!isDisabled() ? insertTag(tag) : null\"\n\t\t\t(keyup.space)=\"!isDisabled() ? insertTag(tag) : null\"\n\t\t\t(keyup.enter)=\"!isDisabled() ? insertTag(tag) : null\"\n\t\t\tclass=\"richTextField-toolbar-chips-chip\"\n\t\t\tpalette=\"product\"\n\t\t\t#tagButton\n\t\t\tunkillable\n\t\t>\n\t\t\t<span class=\"pr-u-mask\">{{ intl.insertTag }}</span>\n\t\t\t{{ tag.description }}\n\t\t</lu-chip>\n\t}\n</div>\n", styles: ["@layer components{.chip{--components-chip-font: var(--pr-t-font-body-S);--components-chip-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));--components-chip-color: var(--palettes-800, var(--pr-t-color-text));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-neutral-800));--components-chip-kill-cross-color: var(--palettes-text, var(--palettes-neutral-text));--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");--components-chip-fontSize: var(--pr-t-font-body-S-fontSize);--components-chip-lineHeight: var(--pr-t-font-body-S-lineHeight);background-color:var(--components-chip-backgroundColor);border:none;border-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;position:relative;vertical-align:middle;padding-block:calc(var(--pr-t-spacings-50) / 2);padding-inline:var(--pr-t-spacings-100);font:var(--components-chip-font);max-inline-size:100%}.chip .lucca-icon{--icon-size: 1rem;margin-inline-end:var(--pr-t-spacings-50)}.chip-content{outline:none}.chip-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;inline-size:var(--pr-t-spacings-300);block-size:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);margin-inline-start:var(--pr-t-spacings-25);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;inline-size:var(--components-chip-kill-size);block-size:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-chip-kill-disk-color)}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color)}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-700, var(--palettes-neutral-700))}.chip-kill:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-900, var(--palettes-neutral-900))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.mod-S .lucca-icon{--icon-size: .75rem}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.is-disabled{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.chip.is-disabled .chip-kill{display:none}.chip:has(.chip-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}}\n"], dependencies: [{ kind: "component", type: ChipComponent, selector: "lu-chip, button[luChip], a[luChip]", inputs: ["withEllipsis", "unkillable", "palette", "disabled", "size", "state", "icon"], outputs: ["kill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "focusableElements", predicate: ["tagButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"richTextField-toolbar-chips\" (keydown.arrowleft)=\"focusTag($event, -1)\" (keydown.arrowRight)=\"focusTag($event, 1)\">\n\t<span aria-hidden=\"true\">{{ intl().insertTag }}</span>\n\t@for (tag of tags(); track tag) {\n\t\t<lu-chip\n\t\t\t[attr.tabindex]=\"isDisabled() ? null : $first ? 0 : -1\"\n\t\t\t[disabled]=\"isDisabled()\"\n\t\t\t(click)=\"!isDisabled() ? insertTag(tag) : null\"\n\t\t\t(keyup.space)=\"!isDisabled() ? insertTag(tag) : null\"\n\t\t\t(keyup.enter)=\"!isDisabled() ? insertTag(tag) : null\"\n\t\t\tclass=\"richTextField-toolbar-chips-chip\"\n\t\t\tpalette=\"product\"\n\t\t\t#tagButton\n\t\t\tunkillable\n\t\t>\n\t\t\t<span class=\"pr-u-mask\">{{ intl().insertTag }}</span>\n\t\t\t{{ tag.description }}\n\t\t</lu-chip>\n\t}\n</div>\n", styles: ["@layer components{.chip{--components-chip-font: var(--pr-t-font-body-S);--components-chip-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));--components-chip-color: var(--palettes-800, var(--pr-t-color-text));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-neutral-800));--components-chip-kill-cross-color: var(--palettes-text, var(--palettes-neutral-text));--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");--components-chip-fontSize: var(--pr-t-font-body-S-fontSize);--components-chip-lineHeight: var(--pr-t-font-body-S-lineHeight);background-color:var(--components-chip-backgroundColor);border:none;border-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;position:relative;vertical-align:middle;padding-block:calc(var(--pr-t-spacings-50) / 2);padding-inline:var(--pr-t-spacings-100);font:var(--components-chip-font);max-inline-size:100%}.chip .lucca-icon{--icon-size: 1rem;margin-inline-end:var(--pr-t-spacings-50)}.chip-content{outline:none}.chip-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;inline-size:var(--pr-t-spacings-300);block-size:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);margin-inline-start:var(--pr-t-spacings-25);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;inline-size:var(--components-chip-kill-size);block-size:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-chip-kill-disk-color)}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color)}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-700, var(--palettes-neutral-700))}.chip-kill:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-900, var(--palettes-neutral-900))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.mod-S .lucca-icon{--icon-size: .75rem}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.is-disabled{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.chip.is-disabled .chip-kill{display:none}.chip:has(.chip-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}}\n"], dependencies: [{ kind: "component", type: ChipComponent, selector: "lu-chip, button[luChip], a[luChip]", inputs: ["intl", "withEllipsis", "unkillable", "palette", "disabled", "size", "state", "icon"], outputs: ["kill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RichTextPluginTagComponent, decorators: [{
             type: Component,
@@ -1244,8 +1261,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             provide: RICH_TEXT_PLUGIN_COMPONENT,
                             useExisting: forwardRef(() => RichTextPluginTagComponent),
                         },
-                    ], template: "<div class=\"richTextField-toolbar-chips\" (keydown.arrowleft)=\"focusTag($event, -1)\" (keydown.arrowRight)=\"focusTag($event, 1)\">\n\t<span aria-hidden=\"true\">{{ intl.insertTag }}</span>\n\t@for (tag of tags(); track tag) {\n\t\t<lu-chip\n\t\t\t[attr.tabindex]=\"isDisabled() ? null : $first ? 0 : -1\"\n\t\t\t[disabled]=\"isDisabled()\"\n\t\t\t(click)=\"!isDisabled() ? insertTag(tag) : null\"\n\t\t\t(keyup.space)=\"!isDisabled() ? insertTag(tag) : null\"\n\t\t\t(keyup.enter)=\"!isDisabled() ? insertTag(tag) : null\"\n\t\t\tclass=\"richTextField-toolbar-chips-chip\"\n\t\t\tpalette=\"product\"\n\t\t\t#tagButton\n\t\t\tunkillable\n\t\t>\n\t\t\t<span class=\"pr-u-mask\">{{ intl.insertTag }}</span>\n\t\t\t{{ tag.description }}\n\t\t</lu-chip>\n\t}\n</div>\n", styles: ["@layer components{.chip{--components-chip-font: var(--pr-t-font-body-S);--components-chip-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));--components-chip-color: var(--palettes-800, var(--pr-t-color-text));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-neutral-800));--components-chip-kill-cross-color: var(--palettes-text, var(--palettes-neutral-text));--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");--components-chip-fontSize: var(--pr-t-font-body-S-fontSize);--components-chip-lineHeight: var(--pr-t-font-body-S-lineHeight);background-color:var(--components-chip-backgroundColor);border:none;border-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;position:relative;vertical-align:middle;padding-block:calc(var(--pr-t-spacings-50) / 2);padding-inline:var(--pr-t-spacings-100);font:var(--components-chip-font);max-inline-size:100%}.chip .lucca-icon{--icon-size: 1rem;margin-inline-end:var(--pr-t-spacings-50)}.chip-content{outline:none}.chip-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;inline-size:var(--pr-t-spacings-300);block-size:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);margin-inline-start:var(--pr-t-spacings-25);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;inline-size:var(--components-chip-kill-size);block-size:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-chip-kill-disk-color)}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color)}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-700, var(--palettes-neutral-700))}.chip-kill:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-900, var(--palettes-neutral-900))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.mod-S .lucca-icon{--icon-size: .75rem}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.is-disabled{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.chip.is-disabled .chip-kill{display:none}.chip:has(.chip-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: true }] }], focusableElements: [{ type: i0.ViewChildren, args: ['tagButton', { ...{ read: ElementRef }, isSignal: true }] }] } });
+                    ], template: "<div class=\"richTextField-toolbar-chips\" (keydown.arrowleft)=\"focusTag($event, -1)\" (keydown.arrowRight)=\"focusTag($event, 1)\">\n\t<span aria-hidden=\"true\">{{ intl().insertTag }}</span>\n\t@for (tag of tags(); track tag) {\n\t\t<lu-chip\n\t\t\t[attr.tabindex]=\"isDisabled() ? null : $first ? 0 : -1\"\n\t\t\t[disabled]=\"isDisabled()\"\n\t\t\t(click)=\"!isDisabled() ? insertTag(tag) : null\"\n\t\t\t(keyup.space)=\"!isDisabled() ? insertTag(tag) : null\"\n\t\t\t(keyup.enter)=\"!isDisabled() ? insertTag(tag) : null\"\n\t\t\tclass=\"richTextField-toolbar-chips-chip\"\n\t\t\tpalette=\"product\"\n\t\t\t#tagButton\n\t\t\tunkillable\n\t\t>\n\t\t\t<span class=\"pr-u-mask\">{{ intl().insertTag }}</span>\n\t\t\t{{ tag.description }}\n\t\t</lu-chip>\n\t}\n</div>\n", styles: ["@layer components{.chip{--components-chip-font: var(--pr-t-font-body-S);--components-chip-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));--components-chip-color: var(--palettes-800, var(--pr-t-color-text));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-neutral-800));--components-chip-kill-cross-color: var(--palettes-text, var(--palettes-neutral-text));--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");--components-chip-fontSize: var(--pr-t-font-body-S-fontSize);--components-chip-lineHeight: var(--pr-t-font-body-S-lineHeight);background-color:var(--components-chip-backgroundColor);border:none;border-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;position:relative;vertical-align:middle;padding-block:calc(var(--pr-t-spacings-50) / 2);padding-inline:var(--pr-t-spacings-100);font:var(--components-chip-font);max-inline-size:100%}.chip .lucca-icon{--icon-size: 1rem;margin-inline-end:var(--pr-t-spacings-50)}.chip-content{outline:none}.chip-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;inline-size:var(--pr-t-spacings-300);block-size:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);margin-inline-start:var(--pr-t-spacings-25);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;inline-size:var(--components-chip-kill-size);block-size:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-chip-kill-disk-color)}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color)}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-700, var(--palettes-neutral-700))}.chip-kill:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-900, var(--palettes-neutral-900))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.mod-S .lucca-icon{--icon-size: .75rem}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.is-disabled{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.chip.is-disabled .chip-kill{display:none}.chip:has(.chip-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: true }] }], focusableElements: [{ type: i0.ViewChildren, args: ['tagButton', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 function registerFormatSelectionChange(editor, format, onselectionchange) {
     return editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
@@ -1311,7 +1328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 class TextStyleToolbarComponent {
     constructor() {
         this.pluginComponents = viewChildren(RICH_TEXT_PLUGIN_COMPONENT, ...(ngDevMode ? [{ debugName: "pluginComponents" }] : []));
-        this.intl = getIntl(LU_RICH_TEXT_INPUT_TRANSLATIONS);
+        this.intl = input(...intlInputOptions(LU_RICH_TEXT_INPUT_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : []));
     }
     setEditorInstance(editor) {
         this.pluginComponents().forEach((plugin) => plugin.setEditorInstance(editor));
@@ -1320,12 +1337,12 @@ class TextStyleToolbarComponent {
         this.pluginComponents().forEach((plugin) => plugin.setDisabledState(isDisabled));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TextStyleToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: TextStyleToolbarComponent, isStandalone: true, selector: "lu-rich-text-toolbar-text-style", host: { classAttribute: "richTextField-toolbar-col-group" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: TextStyleToolbarComponent, isStandalone: true, selector: "lu-rich-text-toolbar-text-style", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "richTextField-toolbar-col-group" }, providers: [
             {
                 provide: RICH_TEXT_PLUGIN_COMPONENT,
                 useExisting: forwardRef(() => TextStyleToolbarComponent),
             },
-        ], viewQueries: [{ propertyName: "pluginComponents", predicate: RICH_TEXT_PLUGIN_COMPONENT, descendants: true, isSignal: true }], ngImport: i0, template: "<lu-rich-text-plugin-text-style icon=\"formatTextBold\" [tooltip]=\"intl.stylesBold\" format=\"bold\" />\n<lu-rich-text-plugin-text-style icon=\"formatTextItalic\" [tooltip]=\"intl.stylesItalic\" format=\"italic\" />\n<lu-rich-text-plugin-text-style icon=\"formatTextUnderline\" [tooltip]=\"intl.stylesUnderline\" format=\"underline\" />\n<lu-rich-text-plugin-text-style icon=\"formatTextStrikethrough\" [tooltip]=\"intl.stylesStrikethrough\" format=\"strikethrough\" />\n", dependencies: [{ kind: "component", type: TextStyleComponent, selector: "lu-rich-text-plugin-text-style", inputs: ["format", "icon", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "pluginComponents", predicate: RICH_TEXT_PLUGIN_COMPONENT, descendants: true, isSignal: true }], ngImport: i0, template: "<lu-rich-text-plugin-text-style icon=\"formatTextBold\" [tooltip]=\"intl().stylesBold\" format=\"bold\" />\n<lu-rich-text-plugin-text-style icon=\"formatTextItalic\" [tooltip]=\"intl().stylesItalic\" format=\"italic\" />\n<lu-rich-text-plugin-text-style icon=\"formatTextStrikethrough\" [tooltip]=\"intl().stylesStrikethrough\" format=\"strikethrough\" />\n", dependencies: [{ kind: "component", type: TextStyleComponent, selector: "lu-rich-text-plugin-text-style", inputs: ["format", "icon", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TextStyleToolbarComponent, decorators: [{
             type: Component,
@@ -1336,8 +1353,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             provide: RICH_TEXT_PLUGIN_COMPONENT,
                             useExisting: forwardRef(() => TextStyleToolbarComponent),
                         },
-                    ], template: "<lu-rich-text-plugin-text-style icon=\"formatTextBold\" [tooltip]=\"intl.stylesBold\" format=\"bold\" />\n<lu-rich-text-plugin-text-style icon=\"formatTextItalic\" [tooltip]=\"intl.stylesItalic\" format=\"italic\" />\n<lu-rich-text-plugin-text-style icon=\"formatTextUnderline\" [tooltip]=\"intl.stylesUnderline\" format=\"underline\" />\n<lu-rich-text-plugin-text-style icon=\"formatTextStrikethrough\" [tooltip]=\"intl.stylesStrikethrough\" format=\"strikethrough\" />\n" }]
-        }], propDecorators: { pluginComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => RICH_TEXT_PLUGIN_COMPONENT), { isSignal: true }] }] } });
+                    ], template: "<lu-rich-text-plugin-text-style icon=\"formatTextBold\" [tooltip]=\"intl().stylesBold\" format=\"bold\" />\n<lu-rich-text-plugin-text-style icon=\"formatTextItalic\" [tooltip]=\"intl().stylesItalic\" format=\"italic\" />\n<lu-rich-text-plugin-text-style icon=\"formatTextStrikethrough\" [tooltip]=\"intl().stylesStrikethrough\" format=\"strikethrough\" />\n" }]
+        }], propDecorators: { pluginComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => RICH_TEXT_PLUGIN_COMPONENT), { isSignal: true }] }], intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }] } });
 
 class RichTextInputToolbarComponent {
     constructor() {
@@ -1358,7 +1375,7 @@ class RichTextInputToolbarComponent {
                 provide: RICH_TEXT_PLUGIN_COMPONENT,
                 useExisting: forwardRef(() => RichTextInputToolbarComponent),
             },
-        ], viewQueries: [{ propertyName: "pluginComponents", predicate: RICH_TEXT_PLUGIN_COMPONENT, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"richTextField-toolbar-col\">\n\t<lu-rich-text-toolbar-text-style />\n\t<lu-rich-text-plugin-headings />\n\t<lu-rich-text-toolbar-list-style />\n\t<lu-rich-text-plugin-link />\n</div>\n<div class=\"richTextField-toolbar-col\">\n\t<lu-rich-text-plugin-clear-format />\n</div>\n", dependencies: [{ kind: "component", type: TextStyleToolbarComponent, selector: "lu-rich-text-toolbar-text-style" }, { kind: "component", type: ListStyleToolbarComponent, selector: "lu-rich-text-toolbar-list-style" }, { kind: "component", type: HeadingsComponent, selector: "lu-rich-text-plugin-headings", inputs: ["maxHeadingLevel"] }, { kind: "component", type: LinkComponent, selector: "lu-rich-text-plugin-link" }, { kind: "component", type: ClearFormatComponent, selector: "lu-rich-text-plugin-clear-format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "pluginComponents", predicate: RICH_TEXT_PLUGIN_COMPONENT, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"richTextField-toolbar-col\">\n\t<lu-rich-text-toolbar-text-style />\n\t<lu-rich-text-plugin-headings />\n\t<lu-rich-text-toolbar-list-style />\n\t<lu-rich-text-plugin-link />\n</div>\n<div class=\"richTextField-toolbar-col\">\n\t<lu-rich-text-plugin-clear-format />\n</div>\n", dependencies: [{ kind: "component", type: TextStyleToolbarComponent, selector: "lu-rich-text-toolbar-text-style", inputs: ["intl"] }, { kind: "component", type: ListStyleToolbarComponent, selector: "lu-rich-text-toolbar-list-style", inputs: ["intl"] }, { kind: "component", type: HeadingsComponent, selector: "lu-rich-text-plugin-headings", inputs: ["maxHeadingLevel", "intl"] }, { kind: "component", type: LinkComponent, selector: "lu-rich-text-plugin-link", inputs: ["intl"] }, { kind: "component", type: ClearFormatComponent, selector: "lu-rich-text-plugin-clear-format", inputs: ["intl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RichTextInputToolbarComponent, decorators: [{
             type: Component,