@lucca-front/ng 20.1.3-rc.2 → 20.2.0-rc.1

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, booleanAttribute, viewChild, ElementRef, contentChildren, signal, computed, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, DestroyRef, viewChildren } from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, viewChild, ElementRef, contentChildren, signal, computed, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, DestroyRef, viewChildren, ViewContainerRef, effect } from '@angular/core';
 import { ButtonComponent } from '@lucca-front/ng/button';
 import { getIntl } from '@lucca-front/ng/core';
 import { IconComponent } from '@lucca-front/ng/icon';
@@ -11,7 +11,7 @@ import { registerRichText, $createHeadingNode, HeadingNode } from '@lexical/rich
 import { mergeRegister, $getNearestNodeOfType } from '@lexical/utils';
 import { $canShowPlaceholderCurry } from '@lexical/text';
 import { FormFieldComponent, InputDirective } from '@lucca-front/ng/form-field';
-import { createEditor, $getRoot, $createTextNode, createCommand, $getSelection, $isRangeSelection, $isTextNode, $createParagraphNode, COMMAND_PRIORITY_NORMAL, SELECTION_CHANGE_COMMAND, INSERT_PARAGRAPH_COMMAND, FORMAT_TEXT_COMMAND } from 'lexical';
+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';
 import { LuOptionDirective } from '@lucca-front/ng/core-select';
@@ -21,6 +21,7 @@ import { LinkNode, AutoLinkNode, $createLinkNode, $toggleLink, $isLinkNode } fro
 import { injectDialogData, injectDialogRef, DialogComponent, DialogContentComponent, DialogFooterComponent, DialogDismissDirective, LuDialogService, provideLuDialog } from '@lucca-front/ng/dialog';
 import { TextInputComponent } from '@lucca-front/ng/forms';
 import { ListNode, $removeList, $insertList, $handleListInsertParagraph, ListItemNode } from '@lexical/list';
+import { ChipComponent } from '@lucca-front/ng/chip';
 
 class RichTextFormatter {
 }
@@ -73,10 +74,10 @@ class RichTextInputComponent {
         this.#editor = createEditor({
             theme: {
                 text: {
-                    strikethrough: 'u-textDecorationLineThrough',
-                    bold: 'u-fontWeightBold',
-                    italic: 'u-fontStyleItalic',
-                    underline: 'u-textDecorationUnderline',
+                    strikethrough: 'pr-u-textDecorationLineThrough',
+                    bold: 'pr-u-fontWeightBold',
+                    italic: 'pr-u-fontStyleItalic',
+                    underline: 'pr-u-textDecorationUnderline',
                 },
             },
             nodes: [...this.#customNodes()],
@@ -99,11 +100,11 @@ class RichTextInputComponent {
     ngOnDestroy() {
         this.#cleanup?.();
     }
-    writeValue(markdown) {
+    writeValue(value) {
         const updateTags = ['skip-dom-selection', INITIAL_UPDATE_TAG];
-        if (markdown) {
+        if (value) {
             this.#editor?.update(() => {
-                this.#richTextFormatter.parse(this.#editor, markdown);
+                this.#richTextFormatter.parse(this.#editor, value);
             }, { tag: updateTags });
         }
         else if (!this.#editor?.getEditorState().isEmpty()) {
@@ -124,11 +125,15 @@ class RichTextInputComponent {
         this.isDisabled.set(isDisabled);
         this.pluginComponents().forEach((c) => c.setDisabledState(isDisabled));
     }
-    focusSiblingPlugin(direction) {
+    focusSiblingPlugin(event, direction) {
+        event.preventDefault();
         const plugins = this.#allPlugins();
-        plugins[this.#focusedPlugin].tabindex.set(-1);
-        this.#focusedPlugin = this.#focusedPlugin + direction < 0 ? plugins.length - 1 : (this.#focusedPlugin + direction) % plugins.length;
-        plugins[this.#focusedPlugin].tabindex.set(0);
+        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);
+        }
+        this.#focusedPlugin = nextFocusedPlugin;
         plugins[this.#focusedPlugin].focus();
     }
     touch() {
@@ -152,7 +157,7 @@ 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(keydown.arrowleft)=\"$event.preventDefault(); focusSiblingPlugin(-1)\"\n\t\t(keydown.arrowRight)=\"$event.preventDefault(); focusSiblingPlugin(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: [".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-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-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-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField .richTextField-toolbar-button.button[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 .richTextField-toolbar-button.button[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 .richTextField-toolbar-button.button[aria-pressed=true]:active{--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.richTextField .richTextField-toolbar-button.button[aria-pressed=true]:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField .richTextField-toolbar-button.button[aria-pressed=true]:disabled{--components-button-color: var(--commons-disabled-background);--components-button-backgroundColor: var(--palettes-neutral-500)}.richTextField-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--pr-t-spacings-400);background-color:var(--components-richTextField-toolbar-backgroundColor);border-radius:0 0 var(--commons-borderRadius-M) var(--commons-borderRadius-M);overflow:hidden;flex-shrink:0;animation-name:fadeIn;animation-duration:var(--commons-animations-durations-fast);animation-delay:var(--commons-animations-durations-fast);opacity:0;animation-fill-mode:forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.richTextField-toolbar:empty{display:none}.richTextField-toolbar-col{display:flex;flex-wrap:wrap;align-items:center;row-gap:var(--pr-t-spacings-100);padding: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(--commons-borderRadius-full);background-color:var(--palettes-neutral-300)}.richTextField-toolbar-col-group .richTextField-toolbar-col-group{display:contents}.richTextField-content{padding:var(--pr-t-spacings-100);outline:none;overflow:auto;flex-grow:1}.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)}.richTextField:hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-hover)}.richTextField.mod-autoResize{--components-richTextField-minHeight: 3lh;--components-richTextField-height: auto;--components-richTextField-resize: none}.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-color: var(--pr-t-color-input-text-disabled);--components-richTextField-borderColor: var(--pr-t-color-input-border)}\n"], dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }], 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 }], 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(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 reset,base,components,mods,states,product,utils;@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-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-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.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 .richTextField-toolbar-button.button.button[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 .richTextField-toolbar-button.button.button[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 .richTextField-toolbar-button.button.button[aria-pressed=true]:active{--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.richTextField .richTextField-toolbar-button.button.button[aria-pressed=true]:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField .richTextField-toolbar-button.button.button[aria-pressed=true]:disabled{--components-button-color: var(--commons-disabled-background);--components-button-backgroundColor: var(--palettes-neutral-500)}.richTextField-toolbar{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;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-item{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;width:auto}.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 states{.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-color: var(--pr-t-color-input-text-disabled);--components-richTextField-borderColor: var(--pr-t-color-input-border)}}@layer mods{.richTextField.mod-autoResize{--components-richTextField-minHeight: 3lh;--components-richTextField-height: auto;--components-richTextField-resize: none}}\n"], dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: RichTextInputComponent, decorators: [{
             type: Component,
@@ -162,7 +167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                             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(keydown.arrowleft)=\"$event.preventDefault(); focusSiblingPlugin(-1)\"\n\t\t(keydown.arrowRight)=\"$event.preventDefault(); focusSiblingPlugin(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: [".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-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-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-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField .richTextField-toolbar-button.button[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 .richTextField-toolbar-button.button[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 .richTextField-toolbar-button.button[aria-pressed=true]:active{--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.richTextField .richTextField-toolbar-button.button[aria-pressed=true]:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField .richTextField-toolbar-button.button[aria-pressed=true]:disabled{--components-button-color: var(--commons-disabled-background);--components-button-backgroundColor: var(--palettes-neutral-500)}.richTextField-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--pr-t-spacings-400);background-color:var(--components-richTextField-toolbar-backgroundColor);border-radius:0 0 var(--commons-borderRadius-M) var(--commons-borderRadius-M);overflow:hidden;flex-shrink:0;animation-name:fadeIn;animation-duration:var(--commons-animations-durations-fast);animation-delay:var(--commons-animations-durations-fast);opacity:0;animation-fill-mode:forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.richTextField-toolbar:empty{display:none}.richTextField-toolbar-col{display:flex;flex-wrap:wrap;align-items:center;row-gap:var(--pr-t-spacings-100);padding: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(--commons-borderRadius-full);background-color:var(--palettes-neutral-300)}.richTextField-toolbar-col-group .richTextField-toolbar-col-group{display:contents}.richTextField-content{padding:var(--pr-t-spacings-100);outline:none;overflow:auto;flex-grow:1}.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)}.richTextField:hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-hover)}.richTextField.mod-autoResize{--components-richTextField-minHeight: 3lh;--components-richTextField-height: auto;--components-richTextField-resize: none}.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-color: var(--pr-t-color-input-text-disabled);--components-richTextField-borderColor: var(--pr-t-color-input-border)}\n"] }]
+                    ], 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(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 reset,base,components,mods,states,product,utils;@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-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-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}.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 .richTextField-toolbar-button.button.button[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 .richTextField-toolbar-button.button.button[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 .richTextField-toolbar-button.button.button[aria-pressed=true]:active{--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.richTextField .richTextField-toolbar-button.button.button[aria-pressed=true]:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.richTextField .richTextField-toolbar-button.button.button[aria-pressed=true]:disabled{--components-button-color: var(--commons-disabled-background);--components-button-backgroundColor: var(--palettes-neutral-500)}.richTextField-toolbar{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;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-item{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;width:auto}.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 states{.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-color: var(--pr-t-color-input-text-disabled);--components-richTextField-borderColor: var(--pr-t-color-input-border)}}@layer mods{.richTextField.mod-autoResize{--components-richTextField-minHeight: 3lh;--components-richTextField-height: auto;--components-richTextField-resize: none}}\n"] }]
         }] });
 
 const Translations = {
@@ -175,42 +180,44 @@ const Translations = {
         linksSubmit: 'Confirm',
         listsNumberedLabel: 'Numbered list',
         listsBulletLabel: 'Bulleted list',
-        headingsLabel: 'Heading level',
+        headingsLabel: 'Title level',
         headings0: 'Paragraph',
-        headings1: 'Level 1 Title',
+        headings1: 'Level 1 title',
         headings2: 'Level 2 title',
-        headings3: 'Level 3 Title',
-        headings4: 'Level 4 Title',
-        headings5: 'Level 5 Title',
-        headings6: 'Level 6 Title',
+        headings3: 'Level 3 title',
+        headings4: 'Level 4 title',
+        headings5: 'Level 5 title',
+        headings6: 'Level 6 title',
         stylesItalic: 'Italic',
         stylesBold: 'Bold',
         stylesUnderline: 'Underline',
         stylesStrikethrough: 'Strikethrough',
-        linksPlaceholder: 'https://www.siteName.com',
+        linksPlaceholder: 'https://www.SiteName.com',
+        insertTag: 'Insert:',
     },
     de: {
         clearFormat: 'Formatierung löschen',
         linksCancel: 'Stornieren',
         linksDelete: 'Link löschen',
         linksHref: 'Webadresse',
-        linksLabel: 'Einen Link hinzufügen',
+        linksLabel: 'Link',
         linksSubmit: 'Bestätigen',
-        listsNumberedLabel: 'Nummernliste',
-        listsBulletLabel: 'Punkteliste',
+        listsNumberedLabel: 'Nummerierte Liste',
+        listsBulletLabel: 'Aufzählungsliste',
         headingsLabel: 'Ebene des Titels',
         headings0: 'Absatz',
-        headings1: 'Titel der Stufe 1',
-        headings2: 'Titel der Stufe 2',
-        headings3: 'Titel der Stufe 3',
-        headings4: 'Titel der Stufe 4',
-        headings5: 'Titel der Stufe 5',
-        headings6: 'Titel der Stufe 6',
+        headings1: 'Titel der Ebene 1',
+        headings2: 'Titel der Ebene 2',
+        headings3: 'Titel der Ebene 3',
+        headings4: 'Titel der Ebene 4',
+        headings5: 'Titel der Ebene 5',
+        headings6: 'Titel der Ebene 6',
         stylesItalic: 'Kursiv',
         stylesBold: 'Fettdruck',
         stylesUnderline: 'Unterstrichen',
         stylesStrikethrough: 'Durchgestrichen',
-        linksPlaceholder: 'https://www.nameDerSeite.com',
+        linksPlaceholder: 'https://www.NameDerSeite.com',
+        insertTag: 'Einfügen:',
     },
     fr: {
         clearFormat: 'Effacer la mise en forme',
@@ -234,17 +241,18 @@ const Translations = {
         stylesUnderline: 'Souligné',
         stylesStrikethrough: 'Barré',
         linksPlaceholder: 'https://www.nomDuSite.com',
+        insertTag: 'Insérer :',
     },
     it: {
-        clearFormat: 'Eliminare la formattazione',
+        clearFormat: 'Cancellare la formattazione',
         linksCancel: 'Annullare',
         linksDelete: 'Eliminare il link',
         linksHref: 'Indirizzo web',
-        linksLabel: 'Aggiungere un link',
+        linksLabel: 'Link',
         linksSubmit: 'Convalidare',
         listsNumberedLabel: 'Elenco numerato',
         listsBulletLabel: 'Elenco puntato',
-        headingsLabel: 'Livello del titolo',
+        headingsLabel: 'Livello di qualifica',
         headings0: 'Paragrafo',
         headings1: 'Qualifica di livello 1',
         headings2: 'Qualifica di livello 2',
@@ -256,76 +264,80 @@ const Translations = {
         stylesBold: 'Grassetto',
         stylesUnderline: 'Sottolineato',
         stylesStrikethrough: 'Barrato',
-        linksPlaceholder: 'https://www.nomeDelSito.com',
+        linksPlaceholder: 'https://www.nomDuSite.com',
+        insertTag: 'Inserire:',
     },
     nl: {
-        clearFormat: 'Opmaak verwijderen',
+        clearFormat: 'Opmaak wissen',
         linksCancel: 'Annuleren',
         linksDelete: 'Link verwijderen',
-        linksHref: 'Webadres',
-        linksLabel: 'Een link toevoegen',
+        linksHref: 'Internetadres',
+        linksLabel: 'Link',
         linksSubmit: 'Valideren',
         listsNumberedLabel: 'Genummerde lijst',
         listsBulletLabel: 'Lijst met opsommingstekens',
-        headingsLabel: 'Titel niveau',
+        headingsLabel: 'Niveau van de kop',
         headings0: 'Paragraaf',
-        headings1: 'Kwalificatie op niveau 1',
-        headings2: 'Kwalificatie op niveau 2',
-        headings3: 'Kwalificatie op niveau 3',
-        headings4: 'Kwalificatie op niveau 4',
-        headings5: 'Kwalificatie op niveau 5',
-        headings6: 'Kwalificatie op niveau 6',
+        headings1: 'Kopniveau 1',
+        headings2: 'Kopniveau 2',
+        headings3: 'Kopniveau 3',
+        headings4: 'Kopniveau 4',
+        headings5: 'Kopniveau 5',
+        headings6: 'Kopniveau 6',
         stylesItalic: 'Cursief',
         stylesBold: 'Vet',
         stylesUnderline: 'Onderstreept',
         stylesStrikethrough: 'Doorgehaald',
-        linksPlaceholder: 'https://www.siteNaam.com',
+        linksPlaceholder: 'https://www.nomDuSite.com',
+        insertTag: 'Invoegen:',
     },
     'nl-BE': {
-        clearFormat: 'Opmaak verwijderen',
+        clearFormat: 'Opmaak wissen',
         linksCancel: 'Annuleren',
         linksDelete: 'Link verwijderen',
-        linksHref: 'Webadres',
-        linksLabel: 'Een link toevoegen',
+        linksHref: 'Internetadres',
+        linksLabel: 'Link',
         linksSubmit: 'Valideren',
         listsNumberedLabel: 'Genummerde lijst',
         listsBulletLabel: 'Lijst met opsommingstekens',
-        headingsLabel: 'Titel niveau',
+        headingsLabel: 'Niveau van de kop',
         headings0: 'Paragraaf',
-        headings1: 'Kwalificatie op niveau 1',
-        headings2: 'Kwalificatie op niveau 2',
-        headings3: 'Kwalificatie op niveau 3',
-        headings4: 'Kwalificatie op niveau 4',
-        headings5: 'Kwalificatie op niveau 5',
-        headings6: 'Kwalificatie op niveau 6',
+        headings1: 'Kopniveau 1',
+        headings2: 'Kopniveau 2',
+        headings3: 'Kopniveau 3',
+        headings4: 'Kopniveau 4',
+        headings5: 'Kopniveau 5',
+        headings6: 'Kopniveau 6',
         stylesItalic: 'Cursief',
         stylesBold: 'Vet',
         stylesUnderline: 'Onderstreept',
         stylesStrikethrough: 'Doorgehaald',
-        linksPlaceholder: 'https://www.siteNaam.com',
+        linksPlaceholder: 'https://www.nomDuSite.com',
+        insertTag: 'Invoegen:',
     },
     es: {
         clearFormat: 'Borrar formato',
         linksCancel: 'Cancelar',
         linksDelete: 'Eliminar el enlace',
         linksHref: 'Dirección web',
-        linksLabel: 'Añadir un enlace',
+        linksLabel: 'Enlace',
         linksSubmit: 'Validar',
         listsNumberedLabel: 'Lista numerada',
         listsBulletLabel: 'Lista de viñetas',
         headingsLabel: 'Nivel del título',
         headings0: 'Apartado',
-        headings1: 'Cualificación de nivel 1',
-        headings2: 'Cualificación de nivel 2',
-        headings3: 'Cualificación de nivel 3',
-        headings4: 'Cualificación de nivel 4',
-        headings5: 'Cualificación de nivel 5',
-        headings6: 'Cualificación de nivel 6',
+        headings1: 'Título de nivel 1',
+        headings2: 'Título de nivel 2',
+        headings3: 'Título de nivel 3',
+        headings4: 'Título de nivel 4',
+        headings5: 'Título de nivel 5',
+        headings6: 'Título de nivel 6',
         stylesItalic: 'Cursiva',
         stylesBold: 'Negrita',
         stylesUnderline: 'Subrayado',
         stylesStrikethrough: 'Tachado',
-        linksPlaceholder: 'https://www.nombreDelSitio.com',
+        linksPlaceholder: 'https://www.nomDuSite.com',
+        insertTag: 'Insertar:',
     },
     pt: {
         clearFormat: 'Eliminar a formatação',
@@ -349,6 +361,7 @@ const Translations = {
         stylesUnderline: 'Sublinhado',
         stylesStrikethrough: 'Barré',
         linksPlaceholder: 'https://www.nomeDoSitio.com/',
+        insertTag: 'Inserir:',
     },
 };
 
@@ -468,7 +481,7 @@ class ClearFormatComponent {
                 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=\"text\"\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", "delete", "disclosure", "palette", "state", "luButton"] }, { kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor"], 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"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor"], exportAs: ["luTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ClearFormatComponent, decorators: [{
             type: Component,
@@ -479,7 +492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                             provide: RICH_TEXT_PLUGIN_COMPONENT,
                             useExisting: forwardRef(() => ClearFormatComponent),
                         },
-                    ], template: "<button\n\t#element\n\tluButton=\"text\"\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" }]
+                    ], 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" }]
         }] });
 
 const FORMAT_HEADINGS = createCommand('FORMAT_HEADINGS');
@@ -593,11 +606,11 @@ class LinkDialogComponent {
         this.dialogRef.close(undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LinkDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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=\"text\" 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=\"text\" 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" }, { 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", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "type", "searchIcon"], 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],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", "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: "20.0.2", 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" }, { 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", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "type", "searchIcon"], 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],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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", 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=\"text\" 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=\"text\" 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" }]
         }] });
 
 const FORMAT_LINK = createCommand('FORMAT_LINK');
@@ -704,7 +717,7 @@ class LinkComponent {
                 provide: RICH_TEXT_PLUGIN_COMPONENT,
                 useExisting: forwardRef(() => LinkComponent),
             },
-        ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n\t#element\n\tluButton=\"text\"\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", dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[luButton],a[luButton]", inputs: ["size", "block", "delete", "disclosure", "palette", "state", "luButton"] }, { kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor"], 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.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", 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"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor"], exportAs: ["luTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LinkComponent, decorators: [{
             type: Component,
@@ -716,7 +729,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                             provide: RICH_TEXT_PLUGIN_COMPONENT,
                             useExisting: forwardRef(() => LinkComponent),
                         },
-                    ], template: "<button\n\t#element\n\tluButton=\"text\"\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" }]
+                    ], 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" }]
         }] });
 
 const FORMAT_LIST = createCommand('FORMAT_LIST');
@@ -789,7 +802,7 @@ class ListFormatComponent {
                 provide: RICH_TEXT_PLUGIN_COMPONENT,
                 useExisting: forwardRef(() => ListFormatComponent),
             },
-        ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n\t#element\n\tluButton=\"text\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"tooltip()\"\n\tluTooltipOnlyForDisplay\n\t[attr.aria-pressed]=\"active()\"\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon [icon]=\"icon()\" [alt]=\"tooltip()\" />\n</button>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[luButton],a[luButton]", inputs: ["size", "block", "delete", "disclosure", "palette", "state", "luButton"] }, { kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor"], 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]=\"tooltip()\"\n\tluTooltipOnlyForDisplay\n\t[attr.aria-pressed]=\"active()\"\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon [icon]=\"icon()\" [alt]=\"tooltip()\" />\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"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor"], exportAs: ["luTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ListFormatComponent, decorators: [{
             type: Component,
@@ -800,7 +813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                             provide: RICH_TEXT_PLUGIN_COMPONENT,
                             useExisting: forwardRef(() => ListFormatComponent),
                         },
-                    ], template: "<button\n\t#element\n\tluButton=\"text\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"tooltip()\"\n\tluTooltipOnlyForDisplay\n\t[attr.aria-pressed]=\"active()\"\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon [icon]=\"icon()\" [alt]=\"tooltip()\" />\n</button>\n" }]
+                    ], template: "<button\n\t#element\n\tluButton=\"ghost\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"tooltip()\"\n\tluTooltipOnlyForDisplay\n\t[attr.aria-pressed]=\"active()\"\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon [icon]=\"icon()\" [alt]=\"tooltip()\" />\n</button>\n" }]
         }] });
 
 class ListStyleToolbarComponent {
@@ -844,6 +857,276 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                     ], 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" }]
         }] });
 
+class TagNode extends DecoratorNode {
+    #tagKey;
+    #tagDescription;
+    #disabled;
+    // Store the component reference on the node instance
+    #componentRef;
+    static #viewContainerRef;
+    static setViewContainerRef(vcr) {
+        TagNode.#viewContainerRef = vcr;
+    }
+    constructor(tagKey = '', tagDescription, disabled = false, key) {
+        super(key);
+        this.#tagKey = tagKey;
+        this.#tagDescription = tagDescription;
+        this.#disabled = disabled;
+    }
+    isDisabled() {
+        return this.#disabled;
+    }
+    setDisabled(disabled) {
+        const self = this.getWritable();
+        self.#disabled = disabled;
+        return self;
+    }
+    getTagKey() {
+        return this.#tagKey;
+    }
+    setTagKey(tagKey) {
+        const self = this.getWritable();
+        self.#tagKey = tagKey;
+        return self;
+    }
+    getTagDescription() {
+        return this.#tagDescription;
+    }
+    setTagDescription(description) {
+        const self = this.getWritable();
+        self.#tagDescription = description;
+        return self;
+    }
+    static getType() {
+        return 'tag';
+    }
+    static clone(node) {
+        return new TagNode(node.#tagKey, node.#tagDescription, node.#disabled, node.__key);
+    }
+    /**
+     * This method must be implemented but has no purpose outside of react
+     */
+    decorate() {
+        return `{{${this.getKey()}}}`;
+    }
+    createDOM(_config, editor) {
+        if (TagNode.#viewContainerRef) {
+            // Create the component
+            this.#componentRef = TagNode.#viewContainerRef.createComponent(ChipComponent);
+            // Set inputs on the component instance
+            this.#componentRef.setInput('unkillable', false);
+            this.#componentRef.setInput('palette', 'product');
+            this.#componentRef.setInput('disabled', this.#disabled);
+            // Get the component's DOM element
+            const componentElement = this.#componentRef.location.nativeElement;
+            const textNode = document.createTextNode(this.#tagDescription ?? this.#tagKey);
+            componentElement.insertBefore(textNode, componentElement.firstChild);
+            componentElement.classList.add('mod-S');
+            // Add click handler ONLY to the delete button, not the whole chip
+            this.#componentRef.instance.kill.subscribe(() => {
+                editor.update(() => {
+                    this.remove();
+                });
+            });
+            // Return the component's DOM element
+            return componentElement;
+        }
+        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;
+    }
+    remove(preserveEmptyParent) {
+        super.remove(preserveEmptyParent);
+        this.#componentRef?.destroy();
+    }
+    exportDOM() {
+        const element = document.createTextNode(`{{${this.#tagKey}}}`);
+        return { element };
+    }
+    static importDOM() {
+        const importers = TextNode.importDOM();
+        return {
+            ...importers,
+            '#text': (domNode) => domConversionFunction(domNode),
+        };
+    }
+    static importJSON(serializedNode) {
+        return $createTagNode().updateFromJSON(serializedNode);
+    }
+    updateFromJSON(serializedNode) {
+        return super.updateFromJSON(serializedNode).setTagDescription(serializedNode.tagDescription).setTagKey(serializedNode.tagKey).setDisabled(serializedNode.disabled);
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            ...{ tagDescription: this.#tagDescription, tagKey: this.#tagKey, disabled: this.#disabled },
+        };
+    }
+}
+function domConversionFunction(domNode) {
+    const html = domNode.textContent ?? '';
+    const regex = /\{\{(?:.*?)\}\}/gu;
+    const convertedParts = [];
+    const matches = html.match(regex);
+    if (matches) {
+        // Diviser le contenu en parties de texte et de balises
+        const otherText = html.split(regex);
+        matches.forEach((match, index) => {
+            convertedParts.push($createTextNode(otherText[index]));
+            // Traiter le tag
+            const tagContent = match.replace(/\{\{|\}\}/gu, '').trim();
+            convertedParts.push($createTagNode(tagContent, undefined, true)); // Créer un TagNode partiel avec la clé
+            if (index === matches.length - 1) {
+                convertedParts.push($createTextNode(otherText[index + 1]));
+            }
+        });
+    }
+    else {
+        convertedParts.push($createTextNode(html));
+    }
+    return {
+        // La fonction de conversion reçoit le nœud DOM et doit retourner un nœud Lexical
+        conversion: () => ({
+            node: convertedParts,
+        }),
+        // Priorité (plus le nombre est élevé, plus la conversion est prioritaire)
+        priority: COMMAND_PRIORITY_NORMAL,
+    };
+}
+function $createTagNode(key = '', description, partial = false) {
+    return new TagNode(key, description, partial);
+}
+function $isTagNode(node) {
+    return node instanceof TagNode;
+}
+
+class TagComponent {
+    #viewContainerRef;
+    #tagNodeKeys;
+    #registeredCommands;
+    constructor() {
+        this.#viewContainerRef = inject(ViewContainerRef);
+        this.intl = getIntl(LU_RICH_TEXT_INPUT_TRANSLATIONS);
+        this.tags = input.required();
+        this.isDisabled = signal(false);
+        this.focusIndex = signal(0);
+        this.focusableElements = viewChildren('tagButton', { read: ElementRef });
+        this.editor = null;
+        this.#tagNodeKeys = signal(new Set());
+        this.#registeredCommands = () => { };
+        TagNode.setViewContainerRef(this.#viewContainerRef);
+        // Listen for new partial tag nodes and update their descriptions
+        effect(() => {
+            const tags = this.tags();
+            // filter out previously recorded nodes
+            const nodes = this.#tagNodeKeys();
+            const isDisabled = this.isDisabled();
+            this.editor.update(() => {
+                nodes.forEach((node) => {
+                    const tagNode = $getNodeByKey(node);
+                    if (!tagNode) {
+                        return;
+                    }
+                    const tag = tags.find((t) => t.key === tagNode.getTagKey());
+                    if (tag) {
+                        tagNode.setTagDescription(tag.description).setDisabled(isDisabled);
+                    }
+                    else {
+                        tagNode.remove();
+                    }
+                });
+            });
+        });
+    }
+    setEditorInstance(editor) {
+        this.editor = editor;
+        // listen for new partial tag nodes (coming from formatters)
+        this.#registeredCommands = this.editor.registerMutationListener(TagNode, (mutations) => {
+            const newNodes = new Set(this.#tagNodeKeys());
+            this.editor.read(() => {
+                mutations.forEach((m, k) => {
+                    if (m === 'created') {
+                        newNodes.add(k);
+                    }
+                    else if (m === 'destroyed') {
+                        newNodes.delete(k);
+                    }
+                });
+                if (newNodes.size !== this.#tagNodeKeys().size) {
+                    this.#tagNodeKeys.set(newNodes);
+                }
+            });
+        }, { skipInitialization: true });
+    }
+    getLexicalNodes() {
+        return [TagNode];
+    }
+    insertTag(tag) {
+        this.editor?.update(() => {
+            let selection = $getSelection();
+            if (!selection) {
+                selection = $getRoot().selectEnd();
+            }
+            const node = $createTagNode(tag.key, tag.description);
+            selection.insertNodes([node]);
+        });
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    focus() {
+        // When receiving focus from the rich text input, focus the first tag button
+        this.focusIndex.set(0);
+        this.focusableElements().at(0).nativeElement.focus();
+    }
+    focusTag(event, direction) {
+        event.stopPropagation();
+        this.focusIndex.update((v) => (v + direction) % this.focusableElements().length);
+        this.focusableElements().at(this.focusIndex()).nativeElement.focus();
+    }
+    ngOnDestroy() {
+        this.#registeredCommands();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: TagComponent, isStandalone: true, selector: "lu-rich-text-plugin-tag", inputs: { tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            {
+                provide: RICH_TEXT_PLUGIN_COMPONENT,
+                useExisting: forwardRef(() => TagComponent),
+            },
+        ], 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<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"chip richTextField-content-chip richTextField-toolbar-chips-item\"\n\t\t\t(click)=\"insertTag(tag)\"\n\t\t\t[attr.tabindex]=\"$first ? 0 : -1\"\n\t\t\t[disabled]=\"isDisabled()\"\n\t\t\t[class.is-disabled]=\"isDisabled()\"\n\t\t\t#tagButton\n\t\t>\n\t\t\t<span class=\"pr-u-mask\">{{ intl.insertTag }}</span>\n\t\t\t{{ tag.description }}\n\t\t</button>\n\t}\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-rich-text-plugin-tag', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: RICH_TEXT_PLUGIN_COMPONENT,
+                            useExisting: forwardRef(() => TagComponent),
+                        },
+                    ], 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<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"chip richTextField-content-chip richTextField-toolbar-chips-item\"\n\t\t\t(click)=\"insertTag(tag)\"\n\t\t\t[attr.tabindex]=\"$first ? 0 : -1\"\n\t\t\t[disabled]=\"isDisabled()\"\n\t\t\t[class.is-disabled]=\"isDisabled()\"\n\t\t\t#tagButton\n\t\t>\n\t\t\t<span class=\"pr-u-mask\">{{ intl.insertTag }}</span>\n\t\t\t{{ tag.description }}\n\t\t</button>\n\t}\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Transformer for tag nodes
+ * It will match the following pattern `{{Tag}}` and create a TagNode (using `replace` function).
+ * It will export the tag node to markdown (as `{{Tag}}`) using the `export` function.
+ *
+ * @docs https://github.com/facebook/lexical/tree/main/packages/lexical-markdown#transformers
+ */
+const TAGS = {
+    dependencies: [TagNode],
+    export: (node) => (node instanceof TagNode ? `{{${node.getTagKey()}}}` : null),
+    importRegExp: /{{(\w+)}}/,
+    regExp: /{{(\w+)}}/,
+    replace: (textNode, match) => {
+        if (match[1]) {
+            textNode.replace($createTagNode(match[1].trim(), undefined, true)); // créer un TagNode partiel avec la clé
+        }
+    },
+    type: 'text-match',
+    trigger: '{{',
+};
+
 function registerFormatSelectionChange(editor, format, onselectionchange) {
     return editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
         const selection = $getSelection();
@@ -891,7 +1174,7 @@ class TextStyleComponent {
                 provide: RICH_TEXT_PLUGIN_COMPONENT,
                 useExisting: forwardRef(() => TextStyleComponent),
             },
-        ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n\t#element\n\tluButton=\"text\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[attr.aria-pressed]=\"active()\"\n\t[luTooltip]=\"tooltip()\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\tclass=\"richTextField-toolbar-button\"\n\t[disabled]=\"isDisabled()\"\n>\n\t<lu-icon [icon]=\"icon()\" [alt]=\"tooltip()\" />\n</button>\n", styles: ["@charset \"UTF-8\";.button{--components-button-font: var(--pr-t-font-body-M);--components-button-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: none;--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--commons-borderRadius-M);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0}.button,.button:is(a){color:var(--components-button-color)}.button .lucca-icon{display:block}.button .button-icon{--icon-size: 1.5rem}.button:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.button:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.button:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.button:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.button:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.button:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.button.mod-block{--components-button-width: 100%}.button.mod-S{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-button-gap: var(--pr-t-spacings-75);--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.button.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: 6px;--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.button.mod-XS{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-50);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.button.mod-XS .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--commons-borderRadius-M);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.button.mod-disclosure{padding-inline-end:var(--pr-t-spacings-150)}.button.mod-disclosure .icon-arrowChevronBottom{transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transform:var(--components-button-arrow-transform)}.button.mod-disclosure[aria-expanded=true]{--components-button-arrow-transform: rotate(-180deg)}.button.mod-outlined:where(:not(.is-success,.is-error)),.button.mod-outline:where(:not(.is-success,.is-error)){--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-neutral-400))}.button.mod-outlined:where(:not(.is-success,.is-error)):hover,.button.mod-outline:where(:not(.is-success,.is-error)):hover{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.button.mod-outlined:where(:not(.is-success,.is-error)):active,.button.mod-outline:where(:not(.is-success,.is-error)):active{--components-button-backgroundColor: var(--palettes-200, var(--palettes-neutral-200))}.button.mod-outlined:where(:not(.is-success,.is-error)):focus-visible,.button.mod-outline:where(:not(.is-success,.is-error)):focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:3px}.button.mod-outlined:where(:not(.is-success,.is-error)):disabled,.button.mod-outline:where(:not(.is-success,.is-error)):disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--commons-disabled-placeholder);--components-button-color: var(--palettes-neutral-500)}.button.mod-outlined.is-disabled,.button.mod-outlined.disabled,.button.mod-outline.is-disabled,.button.mod-outline.disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--commons-disabled-placeholder);--components-button-color: var(--palettes-neutral-500)}.button.mod-text:where(:not(.is-success,.is-error)),.button.mod-link:where(:not(.is-success,.is-error)){--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--palettes-neutral-700))}.button.mod-text:where(:not(.is-success,.is-error)):hover,.button.mod-text:where(:not(.is-success,.is-error)):focus-visible,.button.mod-link:where(:not(.is-success,.is-error)):hover,.button.mod-link:where(:not(.is-success,.is-error)):focus-visible{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.button.mod-text:where(:not(.is-success,.is-error)):active,.button.mod-link:where(:not(.is-success,.is-error)):active{--components-button-backgroundColor: var(--palettes-200, var(--palettes-neutral-200))}.button.mod-text:where(:not(.is-success,.is-error)):disabled,.button.mod-link:where(:not(.is-success,.is-error)):disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-neutral-500)}.button.mod-text.is-disabled,.button.mod-text.disabled,.button.mod-link.is-disabled,.button.mod-link.disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-neutral-500)}.button.mod-withIcon{--components-button-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150)}.button.mod-withIcon.mod-S{--components-button-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150)}.button.mod-withIcon.mod-XS{--components-button-padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100)}.button.mod-withIcon.mod-iconOnLeft{padding-inline-start:var(--pr-t-spacings-150)}.button.mod-withIcon.mod-iconOnRight{padding-inline-end:var(--pr-t-spacings-150)}.button.mod-onlyIcon{--components-button-padding: var(--pr-t-spacings-100)}.button.mod-onlyIcon.mod-S{--components-button-padding: var(--pr-t-spacings-75)}.button.mod-onlyIcon.mod-XS{--components-button-padding: var(--pr-t-spacings-50)}.button.mod-delete:hover{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-100)}.button.mod-delete:active{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-200)}.button.mod-delete.mod-text:hover,.button.mod-delete.mod-text:focus-visible,.button.mod-delete.mod-link:hover,.button.mod-delete.mod-link:focus-visible{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-100)}.button.mod-delete.mod-text:active,.button.mod-delete.mod-link:active{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-200)}.button.mod-delete.mod-outlined:hover,.button.mod-delete.mod-outline:hover{--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-error-400);--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-100)}.button.mod-delete.mod-outlined:focus-visible,.button.mod-delete.mod-outline:focus-visible{--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-error-400);--components-button-color: var(--palettes-error-700)}.button.mod-delete.mod-outlined:active,.button.mod-delete.mod-outline:active{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-200)}.button.mod-inverted,.button.mod-invert{--components-button-color: var(--palettes-neutral-0)}.button.mod-inverted:hover,.button.mod-inverted:focus-visible,.button.mod-invert:hover,.button.mod-invert:focus-visible{--components-button-color: var(--palettes-neutral-0);--components-button-backgroundColor: var(--palettes-neutral-900)}.button.mod-inverted:active,.button.mod-invert:active{--components-button-backgroundColor: var(--palettes-neutral-700)}.button.mod-more{--components-button-minWidth: 2rem;--components-button-padding: 0}.button.mod-more:before{--icon-content: \"\\e97c\";font-weight:400;display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;block-size:0;vertical-align:text-top}.button.mod-more.mod-S{--components-button-minWidth: 1.75rem}.button.mod-more.mod-XS{--components-button-minWidth: 1.5rem}.button.is-loading,.button.loading{--components-button-opacity: .4;--components-button-pointerEvents: none;--components-button-color: transparent;--components-button-userSelect: none}.button.is-loading:after,.button.loading:after{content:\"\";inline-size:var(--pr-t-font-body-M-fontSize);block-size:var(--pr-t-font-body-M-fontSize);border-radius:var(--commons-borderRadius-full);line-height:.8rem;border-width:var(--commons-loading-borderWidth);inset:0;margin:auto;position:absolute;border-style:solid;animation-name:rotate;animation-duration:var(--commons-loading-speed);animation-timing-function:linear;animation-iteration-count:infinite;border-color:var(--commons-loading-frontground);border-block-start-color:transparent}.button.is-loading.mod-S:after,.button.loading.mod-S:after{content:\"\";inline-size:var(--pr-t-font-body-S-fontSize);block-size:var(--pr-t-font-body-S-fontSize);border-radius:var(--commons-borderRadius-full);line-height:.8rem;border-width:var(--commons-loading-borderWidth);inset:0;margin:auto;position:absolute;border-style:solid;animation-name:rotate;animation-duration:var(--commons-loading-speed);animation-timing-function:linear;animation-iteration-count:infinite;border-color:var(--commons-loading-frontground);border-block-start-color:transparent}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.button.is-error,.button.error{--palettes-text: #ffffff;--palettes-0: #ffffff;--palettes-50: #ffebec;--palettes-100: #ffd6d8;--palettes-200: #fdbebe;--palettes-300: #faa3a3;--palettes-400: #fa8989;--palettes-500: #f76e6e;--palettes-600: #f15050;--palettes-700: #da2f2f;--palettes-800: #aa0e0e;--palettes-900: #630303;--components-button-color: transparent;--components-button-pointerEvents: none;--components-button-userSelect: none}.button.is-error:after,.button.error:after{color:var(--palettes-neutral-0);font-size:calc(1.5 * var(--pr-t-font-body-M-fontSize));block-size:var(--pr-t-font-body-M-lineHeight);inset:0;margin:auto;position:absolute}.button.is-error:after,.button.error:after{--icon-content: \"\\e9bf\";font-weight:400;display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none}.button.is-success,.button.success{--palettes-text: #ffffff;--palettes-0: #ffffff;--palettes-50: #dbfae0;--palettes-100: #bef3c7;--palettes-200: #a2ebaf;--palettes-300: #84e695;--palettes-400: #68d97b;--palettes-500: #57c769;--palettes-600: #39b155;--palettes-700: #279b42;--palettes-800: #0a762e;--palettes-900: #004d20;--components-button-color: transparent;--components-button-pointerEvents: none;--components-button-userSelect: none}.button.is-success:after,.button.success:after{color:var(--palettes-neutral-0);font-size:calc(1.5 * var(--pr-t-font-body-M-fontSize));block-size:var(--pr-t-font-body-M-lineHeight);inset:0;margin:auto;position:absolute}.button.is-success:after,.button.success:after{--icon-content: \"\\e97d\";font-weight:400;display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none}.button.is-disabled,.button.disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.button.is-disabled .numericBadge,.button.disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[luButton],a[luButton]", inputs: ["size", "block", "delete", "disclosure", "palette", "state", "luButton"] }, { kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor"], 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[attr.aria-pressed]=\"active()\"\n\t[luTooltip]=\"tooltip()\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\tclass=\"richTextField-toolbar-button\"\n\t[disabled]=\"isDisabled()\"\n>\n\t<lu-icon [icon]=\"icon()\" [alt]=\"tooltip()\" />\n</button>\n", styles: ["@charset \"UTF-8\";@layer reset,base,components,mods,states,product,utils;@layer components{.button{--components-button-font: var(--pr-t-font-body-M);--components-button-borderRadius: var(--pr-t-border-radius-default);--components-button-paddingBlock: var(--pr-t-spacings-100);--components-button-paddingInline: var(--pr-t-spacings-150);--components-button-paddingBlockStart: var(--components-button-paddingBlock);--components-button-paddingBlockEnd: var(--components-button-paddingBlock);--components-button-paddingInlineStart: var(--components-button-paddingInline);--components-button-paddingInlineEnd: var(--components-button-paddingInline);--components-button-padding: var(--components-button-paddingBlockStart) var(--components-button-paddingInlineEnd) var(--components-button-paddingBlockEnd) var(--components-button-paddingInlineStart);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: none;--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--components-button-borderRadius);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0;text-rendering:inherit}.button,.button:is(a){color:var(--components-button-color)}.button .lucca-icon{display:block}.button .button-icon{--icon-size: 1.5rem}.button:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.button:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.button:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--components-button-borderRadius)}.button:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.button:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.button:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}}@layer mods{.button.mod-block{--components-button-width: 100%}.button.mod-S{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75);--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.button.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.button.mod-XS{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.button.mod-XS .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.button.mod-disclosure{--components-button-paddingInlineEnd: var(--pr-t-spacings-100)}.button.mod-disclosure .icon-arrowChevronBottom{transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transform:var(--components-button-arrow-transform)}.button.mod-disclosure[aria-expanded=true]{--components-button-arrow-transform: rotate(-180deg)}.button.mod-outlined:where(:not(.is-success,.is-error)),.button.mod-outline:where(:not(.is-success,.is-error)){--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200)}.button.mod-outlined:where(:not(.is-success,.is-error)):hover,.button.mod-outline:where(:not(.is-success,.is-error)):hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50)) }.button.mod-outlined:where(:not(.is-success,.is-error)):active,.button.mod-outline:where(:not(.is-success,.is-error)):active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.button.mod-outlined:where(:not(.is-success,.is-error)):focus-visible,.button.mod-outline:where(:not(.is-success,.is-error)):focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:3px}.button.mod-outlined:where(:not(.is-success,.is-error)):disabled,.button.mod-outline:where(:not(.is-success,.is-error)):disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--palettes-neutral-100);--components-button-color: var(--pr-t-color-text-disabled)}.button.mod-text:where(:not(.is-success,.is-error)),.button.mod-link:where(:not(.is-success,.is-error)),.button.mod-ghost:where(:not(.is-success,.is-error)){--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle))}.button.mod-text:where(:not(.is-success,.is-error)):hover,.button.mod-text:where(:not(.is-success,.is-error)):focus-visible,.button.mod-link:where(:not(.is-success,.is-error)):hover,.button.mod-link:where(:not(.is-success,.is-error)):focus-visible,.button.mod-ghost:where(:not(.is-success,.is-error)):hover,.button.mod-ghost:where(:not(.is-success,.is-error)):focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.button.mod-text:where(:not(.is-success,.is-error)):active,.button.mod-link:where(:not(.is-success,.is-error)):active,.button.mod-ghost:where(:not(.is-success,.is-error)):active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.button.mod-text:where(:not(.is-success,.is-error)):disabled,.button.mod-link:where(:not(.is-success,.is-error)):disabled,.button.mod-ghost:where(:not(.is-success,.is-error)):disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--pr-t-color-text-disabled)}.button.mod-withIcon.mod-iconOnLeft{--components-button-paddingInlineStart: var(--pr-t-spacings-100)}.button.mod-withIcon.mod-iconOnLeft.mod-S{--components-button-paddingInlineStart: var(--pr-t-spacings-75)}.button.mod-withIcon.mod-iconOnLeft.mod-XS{--components-button-paddingInlineStart: var(--pr-t-spacings-50)}.button.mod-withIcon.mod-iconOnRight{--components-button-paddingInlineEnd: var(--pr-t-spacings-100)}.button.mod-withIcon.mod-iconOnRight.mod-S{--components-button-paddingInlineEnd: var(--pr-t-spacings-75)}.button.mod-withIcon.mod-iconOnRight.mod-XS{--components-button-paddingInlineEnd: var(--pr-t-spacings-50)}.button.mod-onlyIcon{--components-button-padding: var(--pr-t-spacings-100)}.button.mod-onlyIcon.mod-S{--components-button-padding: var(--pr-t-spacings-75)}.button.mod-onlyIcon.mod-XS{--components-button-padding: var(--pr-t-spacings-50)}.button:has(.numericBadge){--components-button-paddingInlineEnd: var(--pr-t-spacings-100)}.button:has(.numericBadge).mod-S{--components-button-paddingInlineEnd: var(--pr-t-spacings-75)}.button:has(.numericBadge).mod-XS{--components-button-paddingInlineEnd: var(--pr-t-spacings-50)}.button.mod-critical:hover,.button.mod-delete:hover{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-100)}.button.mod-critical:active,.button.mod-delete:active{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-200)}.button.mod-critical.mod-text:hover,.button.mod-critical.mod-text:focus-visible,.button.mod-critical.mod-link:hover,.button.mod-critical.mod-link:focus-visible,.button.mod-delete.mod-text:hover,.button.mod-delete.mod-text:focus-visible,.button.mod-delete.mod-link:hover,.button.mod-delete.mod-link:focus-visible{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-100)}.button.mod-critical.mod-text:active,.button.mod-critical.mod-link:active,.button.mod-delete.mod-text:active,.button.mod-delete.mod-link:active{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-200)}.button.mod-critical.mod-outlined:hover,.button.mod-critical.mod-outline:hover,.button.mod-delete.mod-outlined:hover,.button.mod-delete.mod-outline:hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-error-400);--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-100)}.button.mod-critical.mod-outlined:focus-visible,.button.mod-critical.mod-outline:focus-visible,.button.mod-delete.mod-outlined:focus-visible,.button.mod-delete.mod-outline:focus-visible{--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-error-400);--components-button-color: var(--palettes-error-700)}.button.mod-critical.mod-outlined:active,.button.mod-critical.mod-outline:active,.button.mod-delete.mod-outlined:active,.button.mod-delete.mod-outline:active{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-200)}.button.mod-inverted,.button.mod-invert{--components-button-color: var(--palettes-neutral-0)}.button.mod-inverted:hover,.button.mod-inverted:focus-visible,.button.mod-invert:hover,.button.mod-invert:focus-visible{--components-button-color: var(--palettes-neutral-0);--components-button-backgroundColor: var(--palettes-neutral-900)}.button.mod-inverted:active,.button.mod-invert:active{--components-button-backgroundColor: var(--palettes-neutral-700)}.button.mod-more{--components-button-minWidth: 2rem;--components-button-padding: 0}.button.mod-more:before{--icon-content: \"\\e97c\";font-weight:400;display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;block-size:0;vertical-align:text-top}.button.mod-more.mod-S{--components-button-minWidth: 1.75rem}.button.mod-more.mod-XS{--components-button-minWidth: 1.5rem}}@layer states{.button.is-loading,.button.loading{--components-button-pointerEvents: none;--components-button-color: transparent;--components-button-userSelect: none;--components-button-backgroundColor: var(--palettes-product-500);--commons-loading-frontground: var(--palettes-product-50)}.button.is-loading:after,.button.loading:after{content:\"\";inline-size:var(--pr-t-font-body-M-lineHeight);block-size:var(--pr-t-font-body-M-lineHeight);border-radius:var(--pr-t-border-radius-full);line-height:.8rem;border-width:var(--commons-loading-borderWidth);inset:0;margin:auto;position:absolute;border-style:solid;animation-name:rotate;animation-duration:var(--commons-loading-speed);animation-timing-function:linear;animation-iteration-count:infinite;border-color:var(--commons-loading-frontground);border-block-start-color:transparent}.button.is-loading.mod-S:after,.button.loading.mod-S:after{content:\"\";inline-size:var(--pr-t-font-body-S-lineHeight);block-size:var(--pr-t-font-body-S-lineHeight);border-radius:var(--pr-t-border-radius-full);line-height:.8rem;border-width:var(--commons-loading-borderWidth);inset:0;margin:auto;position:absolute;border-style:solid;animation-name:rotate;animation-duration:var(--commons-loading-speed);animation-timing-function:linear;animation-iteration-count:infinite;border-color:var(--commons-loading-frontground);border-block-start-color:transparent}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.button.is-loading.mod-outlined,.button.loading.mod-outlined{--components-button-backgroundColor: var(--palettes-neutral-0);--commons-loading-frontground: var(--palettes-neutral-300);--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-100)}.button.is-loading.mod-ghost,.button.loading.mod-ghost{--components-button-backgroundColor: var(--palettes-neutral-50);--commons-loading-frontground: var(--palettes-neutral-400)}.button.is-error,.button.error{animation-name:shake;animation-iteration-count:1;animation-duration:var(--commons-animations-durations-standard)}@keyframes shake{0%,to{transform:translateZ(0)}20%,60%{transform:translate3d(-3px,0,0)}40%,80%{transform:translate3d(3px,0,0)}}.button.is-success,.button.success{--components-button-backgroundColor: var(--palettes-product-500);--components-button-color: transparent;--components-button-pointerEvents: none;--components-button-userSelect: none}.button.is-success:after,.button.success:after{color:var(--palettes-neutral-0);font-size:calc(1.5 * var(--pr-t-font-body-M-fontSize));block-size:var(--pr-t-font-body-M-lineHeight);inset:0;margin:auto;position:absolute}.button.is-success:after,.button.success:after{--icon-content: \"\\e97d\";font-weight:400;display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none}.button.is-success.mod-outlined,.button.success.mod-outlined{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-100)}.button.is-success.mod-outlined:after,.button.success.mod-outlined:after{color:var(--palettes-product-700)}.button.is-success.mod-ghost,.button.success.mod-ghost{--components-button-backgroundColor: var(--palettes-neutral-50);--components-button-boxShadow: none}.button.is-success.mod-ghost:after,.button.success.mod-ghost:after{color:var(--palettes-product-700)}.button.is-disabled,.button.disabled{--components-button-cursor: default;--components-button-color: var(--pr-t-color-text-disabled);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.button.is-disabled .numericBadge,.button.disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}}\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"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor"], exportAs: ["luTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TextStyleComponent, decorators: [{
             type: Component,
@@ -902,7 +1185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                             provide: RICH_TEXT_PLUGIN_COMPONENT,
                             useExisting: forwardRef(() => TextStyleComponent),
                         },
-                    ], template: "<button\n\t#element\n\tluButton=\"text\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[attr.aria-pressed]=\"active()\"\n\t[luTooltip]=\"tooltip()\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\tclass=\"richTextField-toolbar-button\"\n\t[disabled]=\"isDisabled()\"\n>\n\t<lu-icon [icon]=\"icon()\" [alt]=\"tooltip()\" />\n</button>\n", styles: ["@charset \"UTF-8\";.button{--components-button-font: var(--pr-t-font-body-M);--components-button-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: none;--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--commons-borderRadius-M);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0}.button,.button:is(a){color:var(--components-button-color)}.button .lucca-icon{display:block}.button .button-icon{--icon-size: 1.5rem}.button:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.button:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.button:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.button:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.button:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.button:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.button.mod-block{--components-button-width: 100%}.button.mod-S{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-button-gap: var(--pr-t-spacings-75);--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.button.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: 6px;--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.button.mod-XS{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-50);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.button.mod-XS .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--commons-borderRadius-M);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.button.mod-disclosure{padding-inline-end:var(--pr-t-spacings-150)}.button.mod-disclosure .icon-arrowChevronBottom{transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transform:var(--components-button-arrow-transform)}.button.mod-disclosure[aria-expanded=true]{--components-button-arrow-transform: rotate(-180deg)}.button.mod-outlined:where(:not(.is-success,.is-error)),.button.mod-outline:where(:not(.is-success,.is-error)){--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-neutral-400))}.button.mod-outlined:where(:not(.is-success,.is-error)):hover,.button.mod-outline:where(:not(.is-success,.is-error)):hover{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.button.mod-outlined:where(:not(.is-success,.is-error)):active,.button.mod-outline:where(:not(.is-success,.is-error)):active{--components-button-backgroundColor: var(--palettes-200, var(--palettes-neutral-200))}.button.mod-outlined:where(:not(.is-success,.is-error)):focus-visible,.button.mod-outline:where(:not(.is-success,.is-error)):focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:3px}.button.mod-outlined:where(:not(.is-success,.is-error)):disabled,.button.mod-outline:where(:not(.is-success,.is-error)):disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--commons-disabled-placeholder);--components-button-color: var(--palettes-neutral-500)}.button.mod-outlined.is-disabled,.button.mod-outlined.disabled,.button.mod-outline.is-disabled,.button.mod-outline.disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--commons-disabled-placeholder);--components-button-color: var(--palettes-neutral-500)}.button.mod-text:where(:not(.is-success,.is-error)),.button.mod-link:where(:not(.is-success,.is-error)){--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--palettes-neutral-700))}.button.mod-text:where(:not(.is-success,.is-error)):hover,.button.mod-text:where(:not(.is-success,.is-error)):focus-visible,.button.mod-link:where(:not(.is-success,.is-error)):hover,.button.mod-link:where(:not(.is-success,.is-error)):focus-visible{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.button.mod-text:where(:not(.is-success,.is-error)):active,.button.mod-link:where(:not(.is-success,.is-error)):active{--components-button-backgroundColor: var(--palettes-200, var(--palettes-neutral-200))}.button.mod-text:where(:not(.is-success,.is-error)):disabled,.button.mod-link:where(:not(.is-success,.is-error)):disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-neutral-500)}.button.mod-text.is-disabled,.button.mod-text.disabled,.button.mod-link.is-disabled,.button.mod-link.disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-neutral-500)}.button.mod-withIcon{--components-button-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150)}.button.mod-withIcon.mod-S{--components-button-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150)}.button.mod-withIcon.mod-XS{--components-button-padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100)}.button.mod-withIcon.mod-iconOnLeft{padding-inline-start:var(--pr-t-spacings-150)}.button.mod-withIcon.mod-iconOnRight{padding-inline-end:var(--pr-t-spacings-150)}.button.mod-onlyIcon{--components-button-padding: var(--pr-t-spacings-100)}.button.mod-onlyIcon.mod-S{--components-button-padding: var(--pr-t-spacings-75)}.button.mod-onlyIcon.mod-XS{--components-button-padding: var(--pr-t-spacings-50)}.button.mod-delete:hover{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-100)}.button.mod-delete:active{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-200)}.button.mod-delete.mod-text:hover,.button.mod-delete.mod-text:focus-visible,.button.mod-delete.mod-link:hover,.button.mod-delete.mod-link:focus-visible{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-100)}.button.mod-delete.mod-text:active,.button.mod-delete.mod-link:active{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-200)}.button.mod-delete.mod-outlined:hover,.button.mod-delete.mod-outline:hover{--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-error-400);--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-100)}.button.mod-delete.mod-outlined:focus-visible,.button.mod-delete.mod-outline:focus-visible{--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-error-400);--components-button-color: var(--palettes-error-700)}.button.mod-delete.mod-outlined:active,.button.mod-delete.mod-outline:active{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-200)}.button.mod-inverted,.button.mod-invert{--components-button-color: var(--palettes-neutral-0)}.button.mod-inverted:hover,.button.mod-inverted:focus-visible,.button.mod-invert:hover,.button.mod-invert:focus-visible{--components-button-color: var(--palettes-neutral-0);--components-button-backgroundColor: var(--palettes-neutral-900)}.button.mod-inverted:active,.button.mod-invert:active{--components-button-backgroundColor: var(--palettes-neutral-700)}.button.mod-more{--components-button-minWidth: 2rem;--components-button-padding: 0}.button.mod-more:before{--icon-content: \"\\e97c\";font-weight:400;display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;block-size:0;vertical-align:text-top}.button.mod-more.mod-S{--components-button-minWidth: 1.75rem}.button.mod-more.mod-XS{--components-button-minWidth: 1.5rem}.button.is-loading,.button.loading{--components-button-opacity: .4;--components-button-pointerEvents: none;--components-button-color: transparent;--components-button-userSelect: none}.button.is-loading:after,.button.loading:after{content:\"\";inline-size:var(--pr-t-font-body-M-fontSize);block-size:var(--pr-t-font-body-M-fontSize);border-radius:var(--commons-borderRadius-full);line-height:.8rem;border-width:var(--commons-loading-borderWidth);inset:0;margin:auto;position:absolute;border-style:solid;animation-name:rotate;animation-duration:var(--commons-loading-speed);animation-timing-function:linear;animation-iteration-count:infinite;border-color:var(--commons-loading-frontground);border-block-start-color:transparent}.button.is-loading.mod-S:after,.button.loading.mod-S:after{content:\"\";inline-size:var(--pr-t-font-body-S-fontSize);block-size:var(--pr-t-font-body-S-fontSize);border-radius:var(--commons-borderRadius-full);line-height:.8rem;border-width:var(--commons-loading-borderWidth);inset:0;margin:auto;position:absolute;border-style:solid;animation-name:rotate;animation-duration:var(--commons-loading-speed);animation-timing-function:linear;animation-iteration-count:infinite;border-color:var(--commons-loading-frontground);border-block-start-color:transparent}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.button.is-error,.button.error{--palettes-text: #ffffff;--palettes-0: #ffffff;--palettes-50: #ffebec;--palettes-100: #ffd6d8;--palettes-200: #fdbebe;--palettes-300: #faa3a3;--palettes-400: #fa8989;--palettes-500: #f76e6e;--palettes-600: #f15050;--palettes-700: #da2f2f;--palettes-800: #aa0e0e;--palettes-900: #630303;--components-button-color: transparent;--components-button-pointerEvents: none;--components-button-userSelect: none}.button.is-error:after,.button.error:after{color:var(--palettes-neutral-0);font-size:calc(1.5 * var(--pr-t-font-body-M-fontSize));block-size:var(--pr-t-font-body-M-lineHeight);inset:0;margin:auto;position:absolute}.button.is-error:after,.button.error:after{--icon-content: \"\\e9bf\";font-weight:400;display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none}.button.is-success,.button.success{--palettes-text: #ffffff;--palettes-0: #ffffff;--palettes-50: #dbfae0;--palettes-100: #bef3c7;--palettes-200: #a2ebaf;--palettes-300: #84e695;--palettes-400: #68d97b;--palettes-500: #57c769;--palettes-600: #39b155;--palettes-700: #279b42;--palettes-800: #0a762e;--palettes-900: #004d20;--components-button-color: transparent;--components-button-pointerEvents: none;--components-button-userSelect: none}.button.is-success:after,.button.success:after{color:var(--palettes-neutral-0);font-size:calc(1.5 * var(--pr-t-font-body-M-fontSize));block-size:var(--pr-t-font-body-M-lineHeight);inset:0;margin:auto;position:absolute}.button.is-success:after,.button.success:after{--icon-content: \"\\e97d\";font-weight:400;display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none}.button.is-disabled,.button.disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.button.is-disabled .numericBadge,.button.disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}\n"] }]
+                    ], template: "<button\n\t#element\n\tluButton=\"ghost\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[attr.aria-pressed]=\"active()\"\n\t[luTooltip]=\"tooltip()\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\tclass=\"richTextField-toolbar-button\"\n\t[disabled]=\"isDisabled()\"\n>\n\t<lu-icon [icon]=\"icon()\" [alt]=\"tooltip()\" />\n</button>\n", styles: ["@charset \"UTF-8\";@layer reset,base,components,mods,states,product,utils;@layer components{.button{--components-button-font: var(--pr-t-font-body-M);--components-button-borderRadius: var(--pr-t-border-radius-default);--components-button-paddingBlock: var(--pr-t-spacings-100);--components-button-paddingInline: var(--pr-t-spacings-150);--components-button-paddingBlockStart: var(--components-button-paddingBlock);--components-button-paddingBlockEnd: var(--components-button-paddingBlock);--components-button-paddingInlineStart: var(--components-button-paddingInline);--components-button-paddingInlineEnd: var(--components-button-paddingInline);--components-button-padding: var(--components-button-paddingBlockStart) var(--components-button-paddingInlineEnd) var(--components-button-paddingBlockEnd) var(--components-button-paddingInlineStart);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: none;--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--components-button-borderRadius);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0;text-rendering:inherit}.button,.button:is(a){color:var(--components-button-color)}.button .lucca-icon{display:block}.button .button-icon{--icon-size: 1.5rem}.button:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.button:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.button:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--components-button-borderRadius)}.button:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.button:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.button:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}}@layer mods{.button.mod-block{--components-button-width: 100%}.button.mod-S{--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75);--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.button.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.button.mod-XS{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.button.mod-XS .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.button.mod-disclosure{--components-button-paddingInlineEnd: var(--pr-t-spacings-100)}.button.mod-disclosure .icon-arrowChevronBottom{transition-property:transform;transition-duration:var(--commons-animations-durations-fast);transform:var(--components-button-arrow-transform)}.button.mod-disclosure[aria-expanded=true]{--components-button-arrow-transform: rotate(-180deg)}.button.mod-outlined:where(:not(.is-success,.is-error)),.button.mod-outline:where(:not(.is-success,.is-error)){--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200)}.button.mod-outlined:where(:not(.is-success,.is-error)):hover,.button.mod-outline:where(:not(.is-success,.is-error)):hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50)) }.button.mod-outlined:where(:not(.is-success,.is-error)):active,.button.mod-outline:where(:not(.is-success,.is-error)):active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.button.mod-outlined:where(:not(.is-success,.is-error)):focus-visible,.button.mod-outline:where(:not(.is-success,.is-error)):focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:3px}.button.mod-outlined:where(:not(.is-success,.is-error)):disabled,.button.mod-outline:where(:not(.is-success,.is-error)):disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--palettes-neutral-100);--components-button-color: var(--pr-t-color-text-disabled)}.button.mod-text:where(:not(.is-success,.is-error)),.button.mod-link:where(:not(.is-success,.is-error)),.button.mod-ghost:where(:not(.is-success,.is-error)){--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle))}.button.mod-text:where(:not(.is-success,.is-error)):hover,.button.mod-text:where(:not(.is-success,.is-error)):focus-visible,.button.mod-link:where(:not(.is-success,.is-error)):hover,.button.mod-link:where(:not(.is-success,.is-error)):focus-visible,.button.mod-ghost:where(:not(.is-success,.is-error)):hover,.button.mod-ghost:where(:not(.is-success,.is-error)):focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.button.mod-text:where(:not(.is-success,.is-error)):active,.button.mod-link:where(:not(.is-success,.is-error)):active,.button.mod-ghost:where(:not(.is-success,.is-error)):active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.button.mod-text:where(:not(.is-success,.is-error)):disabled,.button.mod-link:where(:not(.is-success,.is-error)):disabled,.button.mod-ghost:where(:not(.is-success,.is-error)):disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--pr-t-color-text-disabled)}.button.mod-withIcon.mod-iconOnLeft{--components-button-paddingInlineStart: var(--pr-t-spacings-100)}.button.mod-withIcon.mod-iconOnLeft.mod-S{--components-button-paddingInlineStart: var(--pr-t-spacings-75)}.button.mod-withIcon.mod-iconOnLeft.mod-XS{--components-button-paddingInlineStart: var(--pr-t-spacings-50)}.button.mod-withIcon.mod-iconOnRight{--components-button-paddingInlineEnd: var(--pr-t-spacings-100)}.button.mod-withIcon.mod-iconOnRight.mod-S{--components-button-paddingInlineEnd: var(--pr-t-spacings-75)}.button.mod-withIcon.mod-iconOnRight.mod-XS{--components-button-paddingInlineEnd: var(--pr-t-spacings-50)}.button.mod-onlyIcon{--components-button-padding: var(--pr-t-spacings-100)}.button.mod-onlyIcon.mod-S{--components-button-padding: var(--pr-t-spacings-75)}.button.mod-onlyIcon.mod-XS{--components-button-padding: var(--pr-t-spacings-50)}.button:has(.numericBadge){--components-button-paddingInlineEnd: var(--pr-t-spacings-100)}.button:has(.numericBadge).mod-S{--components-button-paddingInlineEnd: var(--pr-t-spacings-75)}.button:has(.numericBadge).mod-XS{--components-button-paddingInlineEnd: var(--pr-t-spacings-50)}.button.mod-critical:hover,.button.mod-delete:hover{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-100)}.button.mod-critical:active,.button.mod-delete:active{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-200)}.button.mod-critical.mod-text:hover,.button.mod-critical.mod-text:focus-visible,.button.mod-critical.mod-link:hover,.button.mod-critical.mod-link:focus-visible,.button.mod-delete.mod-text:hover,.button.mod-delete.mod-text:focus-visible,.button.mod-delete.mod-link:hover,.button.mod-delete.mod-link:focus-visible{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-100)}.button.mod-critical.mod-text:active,.button.mod-critical.mod-link:active,.button.mod-delete.mod-text:active,.button.mod-delete.mod-link:active{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-200)}.button.mod-critical.mod-outlined:hover,.button.mod-critical.mod-outline:hover,.button.mod-delete.mod-outlined:hover,.button.mod-delete.mod-outline:hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-error-400);--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-100)}.button.mod-critical.mod-outlined:focus-visible,.button.mod-critical.mod-outline:focus-visible,.button.mod-delete.mod-outlined:focus-visible,.button.mod-delete.mod-outline:focus-visible{--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-error-400);--components-button-color: var(--palettes-error-700)}.button.mod-critical.mod-outlined:active,.button.mod-critical.mod-outline:active,.button.mod-delete.mod-outlined:active,.button.mod-delete.mod-outline:active{--components-button-color: var(--palettes-error-700);--components-button-backgroundColor: var(--palettes-error-200)}.button.mod-inverted,.button.mod-invert{--components-button-color: var(--palettes-neutral-0)}.button.mod-inverted:hover,.button.mod-inverted:focus-visible,.button.mod-invert:hover,.button.mod-invert:focus-visible{--components-button-color: var(--palettes-neutral-0);--components-button-backgroundColor: var(--palettes-neutral-900)}.button.mod-inverted:active,.button.mod-invert:active{--components-button-backgroundColor: var(--palettes-neutral-700)}.button.mod-more{--components-button-minWidth: 2rem;--components-button-padding: 0}.button.mod-more:before{--icon-content: \"\\e97c\";font-weight:400;display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;block-size:0;vertical-align:text-top}.button.mod-more.mod-S{--components-button-minWidth: 1.75rem}.button.mod-more.mod-XS{--components-button-minWidth: 1.5rem}}@layer states{.button.is-loading,.button.loading{--components-button-pointerEvents: none;--components-button-color: transparent;--components-button-userSelect: none;--components-button-backgroundColor: var(--palettes-product-500);--commons-loading-frontground: var(--palettes-product-50)}.button.is-loading:after,.button.loading:after{content:\"\";inline-size:var(--pr-t-font-body-M-lineHeight);block-size:var(--pr-t-font-body-M-lineHeight);border-radius:var(--pr-t-border-radius-full);line-height:.8rem;border-width:var(--commons-loading-borderWidth);inset:0;margin:auto;position:absolute;border-style:solid;animation-name:rotate;animation-duration:var(--commons-loading-speed);animation-timing-function:linear;animation-iteration-count:infinite;border-color:var(--commons-loading-frontground);border-block-start-color:transparent}.button.is-loading.mod-S:after,.button.loading.mod-S:after{content:\"\";inline-size:var(--pr-t-font-body-S-lineHeight);block-size:var(--pr-t-font-body-S-lineHeight);border-radius:var(--pr-t-border-radius-full);line-height:.8rem;border-width:var(--commons-loading-borderWidth);inset:0;margin:auto;position:absolute;border-style:solid;animation-name:rotate;animation-duration:var(--commons-loading-speed);animation-timing-function:linear;animation-iteration-count:infinite;border-color:var(--commons-loading-frontground);border-block-start-color:transparent}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.button.is-loading.mod-outlined,.button.loading.mod-outlined{--components-button-backgroundColor: var(--palettes-neutral-0);--commons-loading-frontground: var(--palettes-neutral-300);--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-100)}.button.is-loading.mod-ghost,.button.loading.mod-ghost{--components-button-backgroundColor: var(--palettes-neutral-50);--commons-loading-frontground: var(--palettes-neutral-400)}.button.is-error,.button.error{animation-name:shake;animation-iteration-count:1;animation-duration:var(--commons-animations-durations-standard)}@keyframes shake{0%,to{transform:translateZ(0)}20%,60%{transform:translate3d(-3px,0,0)}40%,80%{transform:translate3d(3px,0,0)}}.button.is-success,.button.success{--components-button-backgroundColor: var(--palettes-product-500);--components-button-color: transparent;--components-button-pointerEvents: none;--components-button-userSelect: none}.button.is-success:after,.button.success:after{color:var(--palettes-neutral-0);font-size:calc(1.5 * var(--pr-t-font-body-M-fontSize));block-size:var(--pr-t-font-body-M-lineHeight);inset:0;margin:auto;position:absolute}.button.is-success:after,.button.success:after{--icon-content: \"\\e97d\";font-weight:400;display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none}.button.is-success.mod-outlined,.button.success.mod-outlined{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-100)}.button.is-success.mod-outlined:after,.button.success.mod-outlined:after{color:var(--palettes-product-700)}.button.is-success.mod-ghost,.button.success.mod-ghost{--components-button-backgroundColor: var(--palettes-neutral-50);--components-button-boxShadow: none}.button.is-success.mod-ghost:after,.button.success.mod-ghost:after{color:var(--palettes-product-700)}.button.is-disabled,.button.disabled{--components-button-cursor: default;--components-button-color: var(--pr-t-color-text-disabled);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.button.is-disabled .numericBadge,.button.disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}}\n"] }]
         }] });
 
 class TextStyleToolbarComponent {
@@ -950,26 +1233,28 @@ class RichTextInputToolbarComponent {
         this.pluginComponents().forEach((plugin) => plugin.setDisabledState(isDisabled));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: RichTextInputToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.2", type: RichTextInputToolbarComponent, isStandalone: true, selector: "lu-rich-text-input-toolbar", providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.2", type: RichTextInputToolbarComponent, isStandalone: true, selector: "lu-rich-text-input-toolbar", host: { classAttribute: "richTextField-toolbar-formatting" }, providers: [
             {
                 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", styles: [":host{display:contents}\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", styles: [""], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: RichTextInputToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-rich-text-input-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [TextStyleToolbarComponent, ListStyleToolbarComponent, HeadingsComponent, LinkComponent, ClearFormatComponent], providers: [
+            args: [{ selector: 'lu-rich-text-input-toolbar', host: {
+                        class: 'richTextField-toolbar-formatting',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [TextStyleToolbarComponent, ListStyleToolbarComponent, HeadingsComponent, LinkComponent, ClearFormatComponent], providers: [
                         {
                             provide: RICH_TEXT_PLUGIN_COMPONENT,
                             useExisting: forwardRef(() => RichTextInputToolbarComponent),
                         },
-                    ], 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", styles: [":host{display:contents}\n"] }]
+                    ], 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" }]
         }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ClearFormatComponent, HeadingsComponent, LinkComponent, ListStyleToolbarComponent, RICH_TEXT_FORMATTER, RICH_TEXT_PLUGIN_COMPONENT, RichTextFormatter, RichTextInputComponent, RichTextInputToolbarComponent, TextStyleComponent, TextStyleToolbarComponent };
+export { ClearFormatComponent, HeadingsComponent, LinkComponent, ListStyleToolbarComponent, RICH_TEXT_FORMATTER, RICH_TEXT_PLUGIN_COMPONENT, RichTextFormatter, RichTextInputComponent, RichTextInputToolbarComponent, TAGS, TagComponent, TextStyleComponent, TextStyleToolbarComponent };
 //# sourceMappingURL=lucca-front-ng-forms-rich-text-input.mjs.map