@lucca-front/ng 21.2.0 → 21.2.1-rc.1

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

@@ -189,7 +189,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 }, { propertyName: "contentPresentation", first: true, predicate: ["contentPresentation"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"richTextField\" [class.is-disabled]=\"isDisabled()\" [class.mod-autoResize]=\"autoResize()\">\n\t<div\n\t\t#content\n\t\tluInput\n\t\tclass=\"richTextField-content textFlow\"\n\t\trole=\"textbox\"\n\t\t[attr.contenteditable]=\"!isDisabled()\"\n\t\t[attr.aria-disabled]=\"isDisabled()\"\n\t\t[attr.aria-placeholder]=\"currentCanShowPlaceholder() ? placeholder() : null\"\n\t\t[attr.aria-labelledby]=\"formFieldId() + '-label'\"\n\t\t[attr.spellcheck]=\"!disableSpellcheck()\"\n\t\t(blur)=\"touch()\"\n\t></div>\n\t@if (currentCanShowPlaceholder()) {\n\t\t<div aria-hidden=\"true\" class=\"richTextField-content-placeholder\">{{ placeholder() }}</div>\n\t}\n\t<div\n\t\tclass=\"richTextField-toolbar\"\n\t\t[class.pr-u-displayNone]=\"hideToolbar()\"\n\t\t(keydown.arrowleft)=\"focusSiblingPlugin($event, -1)\"\n\t\t(keydown.arrowRight)=\"focusSiblingPlugin($event, 1)\"\n\t\trole=\"toolbar\"\n\t\t[attr.aria-labelledby]=\"formFieldId() + '-label'\"\n\t\t[attr.aria-controls]=\"formFieldId()\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"toolsProjection\" />\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t<span class=\"pr-u-displayNone\">\n\t\t<ng-container *ngTemplateOutlet=\"toolsProjection\" />\n\t</span>\n\t<div #contentPresentation class=\"textFlow\"></div>\n</ng-container>\n\n<ng-template #toolsProjection>\n\t<ng-content />\n</ng-template>\n", styles: ["@layer components{.richTextField{--components-richTextField-borderColor: var(--pr-t-color-input-border);--components-richTextField-backgroundColor: var(--pr-t-color-input-background);--components-richTextField-color: var(--pr-t-color-input-text);--components-richTextField-toolbar-backgroundColor: var(--palettes-neutral-25);--components-richTextField-toolbar-display: block;--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder);--components-richTextField-content-resize: var(--components-richTextField-resize, vertical);--components-richTextField-content-height: var(--components-richTextField-height, calc(3lh + var(--pr-t-spacings-200)));--components-richTextField-content-minHeight: var(--components-richTextField-minHeigh, calc(2lh + var(--pr-t-spacings-200)));--components-richTextField-content-maxHeight: var(--components-richTextField-maxHeight, 90dvh);flex-grow:1;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)}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips){min-block-size:calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25) + var(--pr-t-spacings-600))}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-chips{border-block-start:1px solid var(--palettes-neutral-200);padding-block-start:var(--pr-t-spacings-100)}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-formatting{padding-block-end:var(--pr-t-spacings-100)}.richTextField-toolbar{display:var(--components-richTextField-toolbar-display);background-color:var(--components-richTextField-toolbar-backgroundColor);border-radius:0 0 var(--pr-t-border-radius-input) var(--pr-t-border-radius-input);padding:var(--pr-t-spacings-100);overflow:hidden;animation-name:fadeIn;animation-duration:var(--commons-animations-durations-fast);animation-delay:var(--commons-animations-durations-fast);opacity:0;flex-shrink:0;animation-fill-mode:forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.richTextField-toolbar-formatting{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--pr-t-spacings-400);flex-shrink:0}.richTextField-toolbar-formatting:empty{display:none}.richTextField-toolbar-col{display:flex;flex-wrap:wrap;align-items:center;row-gap:var(--pr-t-spacings-100);margin-inline-start:calc(var(--pr-t-spacings-400) * -1)}.richTextField-toolbar-col-group{display:flex;flex-wrap:wrap;align-items:center}.richTextField-toolbar-col-group:not(:only-child){position:relative;margin-inline-start:var(--pr-t-spacings-400)}.richTextField-toolbar-col-group:not(:only-child):before{content:\"\";position:absolute;inset:var(--pr-t-spacings-100) auto var(--pr-t-spacings-100) calc(var(--pr-t-spacings-400) / -2);inline-size:2px;border-radius:var(--pr-t-border-radius-full);background-color:var(--palettes-neutral-300)}.richTextField-toolbar-col-group .richTextField-toolbar-col-group{display:contents}.richTextField-toolbar-chips{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-50);padding-block-start:0;border-block-start:0}.richTextField-toolbar-chips-chip{border:0}.richTextField-toolbar-chips-chip:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField-content{padding:var(--pr-t-spacings-100);outline:none;overflow:auto;resize:var(--components-richTextField-content-resize);min-block-size:var(--components-richTextField-content-minHeight);max-block-size:var(--components-richTextField-content-maxHeight);block-size:var(--components-richTextField-content-height)}.richTextField-content-chip{vertical-align:middle}.richTextField-content-chip:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField-content-placeholder{position:absolute;pointer-events:none;padding:var(--pr-t-spacings-100);-webkit-user-select:none;user-select:none;color:var(--components-richTextField-placeholder-color)}}@layer mods{.richTextField:has(.richTextField-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField:hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-hover)}.richTextField:has(.richTextField-content[aria-invalid=true]){--components-richTextField-borderColor: var(--pr-t-color-input-border-critical);--components-richTextField-backgroundColor: var(--pr-t-color-input-background-critical);--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder-critical)}.richTextField:has(.richTextField-content[aria-invalid=true]):hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-critical-hover)}.richTextField.is-disabled{--components-richTextField-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-display: none;--components-richTextField-color: var(--pr-t-color-input-text-disabled);--components-richTextField-borderColor: var(--pr-t-color-input-border)}.richTextField.mod-autoResize{--components-richTextField-content-minHeight: calc(3lh + var(--pr-t-spacings-200));--components-richTextField-content-height: auto;--components-richTextField-content-resize: none}}@layer mods{.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-600, var(--palettes-product-600))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:active{--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:disabled{--components-button-color: var(--commons-disabled-background);--components-button-backgroundColor: var(--palettes-neutral-500)}}\n"], dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "pluginComponents", predicate: RICH_TEXT_PLUGIN_COMPONENT, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "contentPresentation", first: true, predicate: ["contentPresentation"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"richTextField\" [class.is-disabled]=\"isDisabled()\" [class.mod-autoResize]=\"autoResize()\">\n\t<div\n\t\t#content\n\t\tluInput\n\t\tclass=\"richTextField-content textFlow\"\n\t\trole=\"textbox\"\n\t\t[attr.contenteditable]=\"!isDisabled()\"\n\t\t[attr.aria-disabled]=\"isDisabled()\"\n\t\t[attr.aria-placeholder]=\"currentCanShowPlaceholder() ? placeholder() : null\"\n\t\t[attr.aria-labelledby]=\"formFieldId() + '-label'\"\n\t\t[attr.spellcheck]=\"!disableSpellcheck()\"\n\t\t(blur)=\"touch()\"\n\t></div>\n\t@if (currentCanShowPlaceholder()) {\n\t\t<div aria-hidden=\"true\" class=\"richTextField-content-placeholder\">{{ placeholder() }}</div>\n\t}\n\t<div\n\t\tclass=\"richTextField-toolbar\"\n\t\t[class.pr-u-displayNone]=\"hideToolbar()\"\n\t\t(keydown.arrowleft)=\"focusSiblingPlugin($event, -1)\"\n\t\t(keydown.arrowRight)=\"focusSiblingPlugin($event, 1)\"\n\t\trole=\"toolbar\"\n\t\t[attr.aria-labelledby]=\"formFieldId() + '-label'\"\n\t\t[attr.aria-controls]=\"formFieldId()\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"toolsProjection\" />\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t<span class=\"pr-u-displayNone\">\n\t\t<ng-container *ngTemplateOutlet=\"toolsProjection\" />\n\t</span>\n\t<div #contentPresentation class=\"textFlow\"></div>\n</ng-container>\n\n<ng-template #toolsProjection>\n\t<ng-content />\n</ng-template>\n", styles: ["@layer components{.richTextField{--components-richTextField-borderColor: var(--pr-t-color-input-border);--components-richTextField-backgroundColor: var(--pr-t-color-input-background);--components-richTextField-color: var(--pr-t-color-input-text);--components-richTextField-toolbar-backgroundColor: var(--palettes-neutral-25);--components-richTextField-toolbar-display: block;--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder);--components-richTextField-content-resize: var(--components-richTextField-resize, vertical);--components-richTextField-content-height: var(--components-richTextField-height, calc(3lh + var(--pr-t-spacings-200)));--components-richTextField-content-minHeight: var(--components-richTextField-minHeigh, calc(2lh + var(--pr-t-spacings-200)));--components-richTextField-content-maxHeight: var(--components-richTextField-maxHeight, 90dvh);flex-grow:1;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)}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips){min-block-size:calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25) + var(--pr-t-spacings-600))}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-chips{border-block-start:1px solid var(--palettes-neutral-200);padding-block-start:var(--pr-t-spacings-100)}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-formatting{padding-block-end:var(--pr-t-spacings-100)}.richTextField-toolbar{display:var(--components-richTextField-toolbar-display);background-color:var(--components-richTextField-toolbar-backgroundColor);border-radius:0 0 var(--pr-t-border-radius-input) var(--pr-t-border-radius-input);padding:var(--pr-t-spacings-100);overflow:hidden;animation-name:fadeIn;animation-duration:var(--commons-animations-durations-fast);animation-delay:var(--commons-animations-durations-fast);opacity:0;flex-shrink:0;animation-fill-mode:forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.richTextField-toolbar-formatting{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--pr-t-spacings-400);flex-shrink:0}.richTextField-toolbar-formatting:empty{display:none}.richTextField-toolbar-col{display:flex;flex-wrap:wrap;align-items:center;row-gap:var(--pr-t-spacings-100);margin-inline-start:calc(var(--pr-t-spacings-400) * -1)}.richTextField-toolbar-col-group{display:flex;flex-wrap:wrap;align-items:center}.richTextField-toolbar-col-group:not(:only-child){position:relative;margin-inline-start:var(--pr-t-spacings-400)}.richTextField-toolbar-col-group:not(:only-child):before{content:\"\";position:absolute;inset:var(--pr-t-spacings-100) auto var(--pr-t-spacings-100) calc(var(--pr-t-spacings-400) / -2);inline-size:2px;border-radius:var(--pr-t-border-radius-full);background-color:var(--palettes-neutral-300)}.richTextField-toolbar-col-group .richTextField-toolbar-col-group{display:contents}.richTextField-toolbar-chips{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-50);padding-block-start:0;border-block-start:0}.richTextField-toolbar-chips-chip{border:0}.richTextField-toolbar-chips-chip:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField-content{padding:var(--pr-t-spacings-100);outline:none;overflow:auto;resize:var(--components-richTextField-content-resize);min-block-size:var(--components-richTextField-content-minHeight);max-block-size:var(--components-richTextField-content-maxHeight);block-size:var(--components-richTextField-content-height)}.richTextField-content-chip{vertical-align:middle}.richTextField-content-chip:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField-content-placeholder{position:absolute;pointer-events:none;inset-block-start:0;padding:var(--pr-t-spacings-100);-webkit-user-select:none;user-select:none;color:var(--components-richTextField-placeholder-color)}}@layer mods{.richTextField:has(.richTextField-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField:hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-hover)}.richTextField:has(.richTextField-content[aria-invalid=true]){--components-richTextField-borderColor: var(--pr-t-color-input-border-critical);--components-richTextField-backgroundColor: var(--pr-t-color-input-background-critical);--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder-critical)}.richTextField:has(.richTextField-content[aria-invalid=true]):hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-critical-hover)}.richTextField.is-disabled{--components-richTextField-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-display: none;--components-richTextField-color: var(--pr-t-color-input-text-disabled);--components-richTextField-borderColor: var(--pr-t-color-input-border)}.richTextField.mod-autoResize{--components-richTextField-content-minHeight: calc(3lh + var(--pr-t-spacings-200));--components-richTextField-content-height: auto;--components-richTextField-content-resize: none}}@layer mods{.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-600, var(--palettes-product-600))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:active{--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:disabled{--components-button-color: var(--commons-disabled-background);--components-button-backgroundColor: var(--palettes-neutral-500)}}\n"], dependencies: [{ kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: RichTextInputComponent, decorators: [{
             type: Component,
@@ -199,7 +199,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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[class.pr-u-displayNone]=\"hideToolbar()\"\n\t\t(keydown.arrowleft)=\"focusSiblingPlugin($event, -1)\"\n\t\t(keydown.arrowRight)=\"focusSiblingPlugin($event, 1)\"\n\t\trole=\"toolbar\"\n\t\t[attr.aria-labelledby]=\"formFieldId() + '-label'\"\n\t\t[attr.aria-controls]=\"formFieldId()\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"toolsProjection\" />\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t<span class=\"pr-u-displayNone\">\n\t\t<ng-container *ngTemplateOutlet=\"toolsProjection\" />\n\t</span>\n\t<div #contentPresentation class=\"textFlow\"></div>\n</ng-container>\n\n<ng-template #toolsProjection>\n\t<ng-content />\n</ng-template>\n", styles: ["@layer components{.richTextField{--components-richTextField-borderColor: var(--pr-t-color-input-border);--components-richTextField-backgroundColor: var(--pr-t-color-input-background);--components-richTextField-color: var(--pr-t-color-input-text);--components-richTextField-toolbar-backgroundColor: var(--palettes-neutral-25);--components-richTextField-toolbar-display: block;--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder);--components-richTextField-content-resize: var(--components-richTextField-resize, vertical);--components-richTextField-content-height: var(--components-richTextField-height, calc(3lh + var(--pr-t-spacings-200)));--components-richTextField-content-minHeight: var(--components-richTextField-minHeigh, calc(2lh + var(--pr-t-spacings-200)));--components-richTextField-content-maxHeight: var(--components-richTextField-maxHeight, 90dvh);flex-grow:1;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)}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips){min-block-size:calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25) + var(--pr-t-spacings-600))}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-chips{border-block-start:1px solid var(--palettes-neutral-200);padding-block-start:var(--pr-t-spacings-100)}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-formatting{padding-block-end:var(--pr-t-spacings-100)}.richTextField-toolbar{display:var(--components-richTextField-toolbar-display);background-color:var(--components-richTextField-toolbar-backgroundColor);border-radius:0 0 var(--pr-t-border-radius-input) var(--pr-t-border-radius-input);padding:var(--pr-t-spacings-100);overflow:hidden;animation-name:fadeIn;animation-duration:var(--commons-animations-durations-fast);animation-delay:var(--commons-animations-durations-fast);opacity:0;flex-shrink:0;animation-fill-mode:forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.richTextField-toolbar-formatting{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--pr-t-spacings-400);flex-shrink:0}.richTextField-toolbar-formatting:empty{display:none}.richTextField-toolbar-col{display:flex;flex-wrap:wrap;align-items:center;row-gap:var(--pr-t-spacings-100);margin-inline-start:calc(var(--pr-t-spacings-400) * -1)}.richTextField-toolbar-col-group{display:flex;flex-wrap:wrap;align-items:center}.richTextField-toolbar-col-group:not(:only-child){position:relative;margin-inline-start:var(--pr-t-spacings-400)}.richTextField-toolbar-col-group:not(:only-child):before{content:\"\";position:absolute;inset:var(--pr-t-spacings-100) auto var(--pr-t-spacings-100) calc(var(--pr-t-spacings-400) / -2);inline-size:2px;border-radius:var(--pr-t-border-radius-full);background-color:var(--palettes-neutral-300)}.richTextField-toolbar-col-group .richTextField-toolbar-col-group{display:contents}.richTextField-toolbar-chips{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-50);padding-block-start:0;border-block-start:0}.richTextField-toolbar-chips-chip{border:0}.richTextField-toolbar-chips-chip:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField-content{padding:var(--pr-t-spacings-100);outline:none;overflow:auto;resize:var(--components-richTextField-content-resize);min-block-size:var(--components-richTextField-content-minHeight);max-block-size:var(--components-richTextField-content-maxHeight);block-size:var(--components-richTextField-content-height)}.richTextField-content-chip{vertical-align:middle}.richTextField-content-chip:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField-content-placeholder{position:absolute;pointer-events:none;padding:var(--pr-t-spacings-100);-webkit-user-select:none;user-select:none;color:var(--components-richTextField-placeholder-color)}}@layer mods{.richTextField:has(.richTextField-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField:hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-hover)}.richTextField:has(.richTextField-content[aria-invalid=true]){--components-richTextField-borderColor: var(--pr-t-color-input-border-critical);--components-richTextField-backgroundColor: var(--pr-t-color-input-background-critical);--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder-critical)}.richTextField:has(.richTextField-content[aria-invalid=true]):hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-critical-hover)}.richTextField.is-disabled{--components-richTextField-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-display: none;--components-richTextField-color: var(--pr-t-color-input-text-disabled);--components-richTextField-borderColor: var(--pr-t-color-input-border)}.richTextField.mod-autoResize{--components-richTextField-content-minHeight: calc(3lh + var(--pr-t-spacings-200));--components-richTextField-content-height: auto;--components-richTextField-content-resize: none}}@layer mods{.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-600, var(--palettes-product-600))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:active{--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:disabled{--components-button-color: var(--commons-disabled-background);--components-button-backgroundColor: var(--palettes-neutral-500)}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"richTextField\" [class.is-disabled]=\"isDisabled()\" [class.mod-autoResize]=\"autoResize()\">\n\t<div\n\t\t#content\n\t\tluInput\n\t\tclass=\"richTextField-content textFlow\"\n\t\trole=\"textbox\"\n\t\t[attr.contenteditable]=\"!isDisabled()\"\n\t\t[attr.aria-disabled]=\"isDisabled()\"\n\t\t[attr.aria-placeholder]=\"currentCanShowPlaceholder() ? placeholder() : null\"\n\t\t[attr.aria-labelledby]=\"formFieldId() + '-label'\"\n\t\t[attr.spellcheck]=\"!disableSpellcheck()\"\n\t\t(blur)=\"touch()\"\n\t></div>\n\t@if (currentCanShowPlaceholder()) {\n\t\t<div aria-hidden=\"true\" class=\"richTextField-content-placeholder\">{{ placeholder() }}</div>\n\t}\n\t<div\n\t\tclass=\"richTextField-toolbar\"\n\t\t[class.pr-u-displayNone]=\"hideToolbar()\"\n\t\t(keydown.arrowleft)=\"focusSiblingPlugin($event, -1)\"\n\t\t(keydown.arrowRight)=\"focusSiblingPlugin($event, 1)\"\n\t\trole=\"toolbar\"\n\t\t[attr.aria-labelledby]=\"formFieldId() + '-label'\"\n\t\t[attr.aria-controls]=\"formFieldId()\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"toolsProjection\" />\n\t</div>\n</div>\n\n<ng-container *luPresentationDisplayDefault>\n\t<span class=\"pr-u-displayNone\">\n\t\t<ng-container *ngTemplateOutlet=\"toolsProjection\" />\n\t</span>\n\t<div #contentPresentation class=\"textFlow\"></div>\n</ng-container>\n\n<ng-template #toolsProjection>\n\t<ng-content />\n</ng-template>\n", styles: ["@layer components{.richTextField{--components-richTextField-borderColor: var(--pr-t-color-input-border);--components-richTextField-backgroundColor: var(--pr-t-color-input-background);--components-richTextField-color: var(--pr-t-color-input-text);--components-richTextField-toolbar-backgroundColor: var(--palettes-neutral-25);--components-richTextField-toolbar-display: block;--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder);--components-richTextField-content-resize: var(--components-richTextField-resize, vertical);--components-richTextField-content-height: var(--components-richTextField-height, calc(3lh + var(--pr-t-spacings-200)));--components-richTextField-content-minHeight: var(--components-richTextField-minHeigh, calc(2lh + var(--pr-t-spacings-200)));--components-richTextField-content-maxHeight: var(--components-richTextField-maxHeight, 90dvh);flex-grow:1;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)}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips){min-block-size:calc(var(--components-richTextField-minHeight) + var(--pr-t-spacings-800) + var(--pr-t-spacings-25) + var(--pr-t-spacings-600))}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-chips{border-block-start:1px solid var(--palettes-neutral-200);padding-block-start:var(--pr-t-spacings-100)}.richTextField:has(.richTextField-toolbar-formatting):has(.richTextField-toolbar-chips) .richTextField-toolbar-formatting{padding-block-end:var(--pr-t-spacings-100)}.richTextField-toolbar{display:var(--components-richTextField-toolbar-display);background-color:var(--components-richTextField-toolbar-backgroundColor);border-radius:0 0 var(--pr-t-border-radius-input) var(--pr-t-border-radius-input);padding:var(--pr-t-spacings-100);overflow:hidden;animation-name:fadeIn;animation-duration:var(--commons-animations-durations-fast);animation-delay:var(--commons-animations-durations-fast);opacity:0;flex-shrink:0;animation-fill-mode:forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.richTextField-toolbar-formatting{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--pr-t-spacings-400);flex-shrink:0}.richTextField-toolbar-formatting:empty{display:none}.richTextField-toolbar-col{display:flex;flex-wrap:wrap;align-items:center;row-gap:var(--pr-t-spacings-100);margin-inline-start:calc(var(--pr-t-spacings-400) * -1)}.richTextField-toolbar-col-group{display:flex;flex-wrap:wrap;align-items:center}.richTextField-toolbar-col-group:not(:only-child){position:relative;margin-inline-start:var(--pr-t-spacings-400)}.richTextField-toolbar-col-group:not(:only-child):before{content:\"\";position:absolute;inset:var(--pr-t-spacings-100) auto var(--pr-t-spacings-100) calc(var(--pr-t-spacings-400) / -2);inline-size:2px;border-radius:var(--pr-t-border-radius-full);background-color:var(--palettes-neutral-300)}.richTextField-toolbar-col-group .richTextField-toolbar-col-group{display:contents}.richTextField-toolbar-chips{display:flex;flex-wrap:wrap;gap:var(--pr-t-spacings-50);padding-block-start:0;border-block-start:0}.richTextField-toolbar-chips-chip{border:0}.richTextField-toolbar-chips-chip:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField-content{padding:var(--pr-t-spacings-100);outline:none;overflow:auto;resize:var(--components-richTextField-content-resize);min-block-size:var(--components-richTextField-content-minHeight);max-block-size:var(--components-richTextField-content-maxHeight);block-size:var(--components-richTextField-content-height)}.richTextField-content-chip{vertical-align:middle}.richTextField-content-chip:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField-content-placeholder{position:absolute;pointer-events:none;inset-block-start:0;padding:var(--pr-t-spacings-100);-webkit-user-select:none;user-select:none;color:var(--components-richTextField-placeholder-color)}}@layer mods{.richTextField:has(.richTextField-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField:hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-hover)}.richTextField:has(.richTextField-content[aria-invalid=true]){--components-richTextField-borderColor: var(--pr-t-color-input-border-critical);--components-richTextField-backgroundColor: var(--pr-t-color-input-background-critical);--components-richTextField-placeholder-color: var(--pr-t-color-input-text-placeholder-critical)}.richTextField:has(.richTextField-content[aria-invalid=true]):hover{--components-richTextField-borderColor: var(--pr-t-color-input-border-critical-hover)}.richTextField.is-disabled{--components-richTextField-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-backgroundColor: var(--pr-t-color-input-background-disabled);--components-richTextField-toolbar-display: none;--components-richTextField-color: var(--pr-t-color-input-text-disabled);--components-richTextField-borderColor: var(--pr-t-color-input-border)}.richTextField.mod-autoResize{--components-richTextField-content-minHeight: calc(3lh + var(--pr-t-spacings-200));--components-richTextField-content-height: auto;--components-richTextField-content-resize: none}}@layer mods{.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-600, var(--palettes-product-600))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:active{--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.richTextField-toolbar-button.button.mod-onlyIcon[aria-pressed=true]:disabled{--components-button-color: var(--commons-disabled-background);--components-button-backgroundColor: var(--palettes-neutral-500)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disableSpellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSpellcheck", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], hideToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToolbar", required: false }] }], content: [{ type: i0.ViewChild, args: ['content', { ...{
                             read: ElementRef,
                         }, isSignal: true }] }], contentPresentation: [{ type: i0.ViewChild, args: ['contentPresentation', { ...{
@@ -628,7 +628,7 @@ class LinkDialogComponent {
         this.dialogRef = injectDialogRef();
         this.intl = input(...intlInputOptions(LU_RICH_TEXT_INPUT_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : []));
         this.formGroup = new FormGroup({
-            href: new FormControl(this.dialogData, Validators.required),
+            href: new FormControl(this.dialogData.url, Validators.required),
         });
     }
     save() {
@@ -642,11 +642,11 @@ class LinkDialogComponent {
         this.dialogRef.close(undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LinkDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: LinkDialogComponent, isStandalone: true, selector: "lu-rich-text-plugin-link-dialog", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<lu-dialog>\n\t<form class=\"dialog-form\" (submit)=\"save()\" [formGroup]=\"formGroup\">\n\t\t<lu-dialog-content>\n\t\t\t<lu-form-field [label]=\"intl().linksHref\">\n\t\t\t\t<lu-text-input formControlName=\"href\" type=\"url\" [placeholder]=\"intl().linksPlaceholder\" />\n\t\t\t</lu-form-field>\n\t\t</lu-dialog-content>\n\t\t<lu-dialog-footer>\n\t\t\t@if (dialogData) {\n\t\t\t\t<div class=\"footer-content\">\n\t\t\t\t\t<button type=\"button\" luButton=\"ghost\" delete (click)=\"deleteLink()\">{{ intl().linksDelete }}</button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"footer-actions\">\n\t\t\t\t<button type=\"submit\" luButton>{{ intl().linksSubmit }}</button>\n\t\t\t\t<button type=\"button\" luButton=\"ghost\" luDialogDismiss>{{ intl().linksCancel }}</button>\n\t\t\t</div>\n\t\t</lu-dialog-footer>\n\t</form>\n</lu-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "lu-dialog", inputs: ["stacked", "fancyIllustration", "fancyIllustrationUrl"] }, { kind: "component", type: DialogContentComponent, selector: "lu-dialog-content" }, { kind: "component", type: DialogFooterComponent, selector: "lu-dialog-footer" }, { kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["intl", "label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter", "presentation"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["intl", "mask", "placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "searchIcon", "type"], outputs: ["blur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton], a[luButton], span[luButton], button[prButton], a[prButton], span[prButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton", "prButton"] }, { kind: "directive", type: DialogDismissDirective, selector: "[luDialogDismiss]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: LinkDialogComponent, isStandalone: true, selector: "lu-rich-text-plugin-link-dialog", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<lu-dialog>\n\t<form class=\"dialog-form\" (submit)=\"save()\" [formGroup]=\"formGroup\">\n\t\t<lu-dialog-content>\n\t\t\t<lu-form-field [label]=\"intl().linksHref\">\n\t\t\t\t<lu-text-input formControlName=\"href\" type=\"url\" [placeholder]=\"intl().linksPlaceholder\" />\n\t\t\t</lu-form-field>\n\t\t</lu-dialog-content>\n\t\t<lu-dialog-footer>\n\t\t\t@if (dialogData.url && dialogData.canDelete) {\n\t\t\t\t<div class=\"footer-content\">\n\t\t\t\t\t<button type=\"button\" luButton=\"ghost\" critical (click)=\"deleteLink()\">{{ intl().linksDelete }}</button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"footer-actions\">\n\t\t\t\t<button type=\"submit\" luButton>{{ intl().linksSubmit }}</button>\n\t\t\t\t<button type=\"button\" luButton=\"ghost\" luDialogDismiss>{{ intl().linksCancel }}</button>\n\t\t\t</div>\n\t\t</lu-dialog-footer>\n\t</form>\n</lu-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "lu-dialog", inputs: ["stacked", "fancyIllustration", "fancyIllustrationUrl"] }, { kind: "component", type: DialogContentComponent, selector: "lu-dialog-content" }, { kind: "component", type: DialogFooterComponent, selector: "lu-dialog-footer" }, { kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["intl", "label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter", "presentation"], outputs: ["rolePresentationLabelChange", "layoutChange"] }, { kind: "component", type: TextInputComponent, selector: "lu-text-input", inputs: ["intl", "mask", "placeholder", "autocomplete", "hasClearer", "hasSearchIcon", "valueAlignRight", "prefix", "suffix", "searchIcon", "type"], outputs: ["blur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton], a[luButton], span[luButton], button[prButton], a[prButton], span[prButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton", "prButton"] }, { kind: "directive", type: DialogDismissDirective, selector: "[luDialogDismiss]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LinkDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-rich-text-plugin-link-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DialogComponent, DialogContentComponent, DialogFooterComponent, FormFieldComponent, TextInputComponent, ReactiveFormsModule, ButtonComponent, DialogDismissDirective], template: "<lu-dialog>\n\t<form class=\"dialog-form\" (submit)=\"save()\" [formGroup]=\"formGroup\">\n\t\t<lu-dialog-content>\n\t\t\t<lu-form-field [label]=\"intl().linksHref\">\n\t\t\t\t<lu-text-input formControlName=\"href\" type=\"url\" [placeholder]=\"intl().linksPlaceholder\" />\n\t\t\t</lu-form-field>\n\t\t</lu-dialog-content>\n\t\t<lu-dialog-footer>\n\t\t\t@if (dialogData) {\n\t\t\t\t<div class=\"footer-content\">\n\t\t\t\t\t<button type=\"button\" luButton=\"ghost\" delete (click)=\"deleteLink()\">{{ intl().linksDelete }}</button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"footer-actions\">\n\t\t\t\t<button type=\"submit\" luButton>{{ intl().linksSubmit }}</button>\n\t\t\t\t<button type=\"button\" luButton=\"ghost\" luDialogDismiss>{{ intl().linksCancel }}</button>\n\t\t\t</div>\n\t\t</lu-dialog-footer>\n\t</form>\n</lu-dialog>\n" }]
+            args: [{ selector: 'lu-rich-text-plugin-link-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DialogComponent, DialogContentComponent, DialogFooterComponent, FormFieldComponent, TextInputComponent, ReactiveFormsModule, ButtonComponent, DialogDismissDirective], template: "<lu-dialog>\n\t<form class=\"dialog-form\" (submit)=\"save()\" [formGroup]=\"formGroup\">\n\t\t<lu-dialog-content>\n\t\t\t<lu-form-field [label]=\"intl().linksHref\">\n\t\t\t\t<lu-text-input formControlName=\"href\" type=\"url\" [placeholder]=\"intl().linksPlaceholder\" />\n\t\t\t</lu-form-field>\n\t\t</lu-dialog-content>\n\t\t<lu-dialog-footer>\n\t\t\t@if (dialogData.url && dialogData.canDelete) {\n\t\t\t\t<div class=\"footer-content\">\n\t\t\t\t\t<button type=\"button\" luButton=\"ghost\" critical (click)=\"deleteLink()\">{{ intl().linksDelete }}</button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"footer-actions\">\n\t\t\t\t<button type=\"submit\" luButton>{{ intl().linksSubmit }}</button>\n\t\t\t\t<button type=\"button\" luButton=\"ghost\" luDialogDismiss>{{ intl().linksCancel }}</button>\n\t\t\t</div>\n\t\t</lu-dialog-footer>\n\t</form>\n</lu-dialog>\n" }]
         }], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }] } });
 
 const FORMAT_LINK = createCommand('FORMAT_LINK');
@@ -702,9 +702,9 @@ class PopoverLinkNode extends LinkNode {
     getViewContainerRef() {
         return this.#viewContainerRef;
     }
-    setTemplateRef(vcr) {
+    setTemplateRef(templateRef) {
         const self = this.getWritable();
-        self.#templateRef = vcr;
+        self.#templateRef = templateRef;
         return self;
     }
     getTemplateRef() {
@@ -725,15 +725,14 @@ class PopoverLinkNode extends LinkNode {
                 title: this.__title,
                 target: this.__target,
                 key: this.__key,
+                isAutoLink: false,
             };
+            // if view already exists, destroy it. Can't reuse it since Lexical injects HTML content inside afterward (link text).
             if (this.#view) {
-                this.#view.context = context;
-                this.#view.markForCheck();
-            }
-            else {
-                // Create the view
-                this.#view = this.#viewContainerRef.createEmbeddedView(this.#templateRef, context);
+                this.#view.destroy();
             }
+            // Create the view
+            this.#view = this.#viewContainerRef.createEmbeddedView(this.#templateRef, context);
             // Return the template DOM element
             return this.#view.rootNodes[0];
         }
@@ -760,13 +759,13 @@ class PopoverLinkNode extends LinkNode {
         return $createPopoverLinkNode().updateFromJSON(serializedNode);
     }
     static clone(node) {
-        return new PopoverLinkNode(node.__url, { target: node.__target, rel: node.__rel, title: node.__title, templateRef: node.#templateRef, viewContainerRef: node.#viewContainerRef }, node.__key);
+        return $createPopoverLinkNode(node.__url, { target: node.__target, rel: node.__rel, title: node.__title, templateRef: node.#templateRef, viewContainerRef: node.#viewContainerRef }, node.__key);
     }
 }
 function $createPopoverLinkNode(url, attributes, key) {
     return new PopoverLinkNode(url, attributes, key);
 }
-function $isPopoverLinkNode$1(node) {
+function $isPopoverLinkNode(node) {
     return node instanceof PopoverLinkNode;
 }
 
@@ -782,9 +781,9 @@ class PopoverAutoLinkNode extends AutoLinkNode {
     getViewContainerRef() {
         return this.#viewContainerRef;
     }
-    setTemplateRef(vcr) {
+    setTemplateRef(templateRef) {
         const self = this.getWritable();
-        self.#templateRef = vcr;
+        self.#templateRef = templateRef;
         return self;
     }
     getTemplateRef() {
@@ -805,15 +804,14 @@ class PopoverAutoLinkNode extends AutoLinkNode {
                 title: this.__title,
                 target: this.__target,
                 key: this.__key,
+                isAutoLink: true,
             };
+            // if view already exists, destroy it. Can't reuse it since Lexical injects HTML content inside afterward (link text).
             if (this.#view) {
-                this.#view.context = context;
-                this.#view.markForCheck();
-            }
-            else {
-                // Create the view
-                this.#view = this.#viewContainerRef.createEmbeddedView(this.#templateRef, context);
+                this.#view.destroy();
             }
+            // Create the view
+            this.#view = this.#viewContainerRef.createEmbeddedView(this.#templateRef, context);
             // Return the template DOM element
             return this.#view.rootNodes[0];
         }
@@ -846,7 +844,7 @@ class PopoverAutoLinkNode extends AutoLinkNode {
 function $createPopoverAutoLinkNode(url, attributes, key) {
     return new PopoverAutoLinkNode(url, attributes, key);
 }
-function $isPopoverLinkNode(node) {
+function $isPopoverAutoLinkNode(node) {
     return node instanceof PopoverAutoLinkNode;
 }
 
@@ -910,19 +908,24 @@ class LinkComponent {
     dispatchCommand() {
         this.#editor?.read(() => {
             let url = '';
+            let canDelete = false;
             const selection = $getSelection();
             if ($isRangeSelection(selection)) {
                 const node = getSelectedNode(selection);
                 const parent = $getNearestNodeOfType(node, LinkNode);
                 if (parent) {
                     url = parent.getURL();
+                    canDelete = !$isPopoverAutoLinkNode(parent);
                 }
             }
             this.#luDialogService
                 .open({
                 content: LinkDialogComponent,
                 size: 'S',
-                data: url,
+                data: {
+                    url,
+                    canDelete,
+                },
             })
                 .result$.subscribe((href) => {
                 let newHref = href;
@@ -945,13 +948,13 @@ class LinkComponent {
         this.isDisabled.set(isDisabled);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: LinkComponent, isStandalone: true, selector: "lu-rich-text-plugin-link", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "richTextField-toolbar-col-group" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: LinkComponent, isStandalone: true, selector: "lu-rich-text-plugin-link", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "richTextField-toolbar-col-group" }, providers: [
             provideLuDialog(),
             {
                 provide: RICH_TEXT_PLUGIN_COMPONENT,
                 useExisting: forwardRef(() => LinkComponent),
             },
-        ], viewQueries: [{ propertyName: "linkNodeTemplate", first: true, predicate: ["linkNodeTemplate"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n\t#element\n\tluButton=\"ghost\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"intl().linksLabel\"\n\t[attr.aria-pressed]=\"active()\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon icon=\"formatLink\" [alt]=\"intl().linksLabel\" />\n</button>\n\n<ng-template #linkNodeTemplate let-href=\"href\" let-title=\"title\" let-target=\"target\">\n\t<a [href]=\"href\" [title]=\"title\" [target]=\"target\" [luPopover2]=\"popover\" #trigger=\"luPopover2\"></a>\n\t<ng-template #popover>\n\t\t<div class=\"popover-contentOptional linkPopover\">\n\t\t\t<a [href]=\"href\" luLink external class=\"pr-u-ellipsis\">{{ href }}</a>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); dispatchCommand()\"\n\t\t\t\t[luTooltip]=\"intl().linksLabel\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"officePen\" [alt]=\"intl().linksLabel\" />\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); deleteLink()\"\n\t\t\t\t[luTooltip]=\"intl().linksDelete\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"trashDelete\" [alt]=\"intl().linksDelete\" />\n\t\t\t</button>\n\t\t</div>\n\t</ng-template>\n</ng-template>\n", styles: [".linkPopover{display:flex;justify-items:center;gap:var(--pr-t-spacings-50);max-width:20rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[luButton], a[luButton], span[luButton], button[prButton], a[prButton], span[prButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton", "prButton"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "directive", type: PopoverDirective, selector: "[luPopover2]", inputs: ["intl", "luPopover2", "luPopoverPosition", "overlayScrollStrategy", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverAnchor", "luPopoverOpenDelay", "luPopoverCloseDelay"], outputs: ["luPopoverTriggerChange", "luPopoverClosed", "luPopoverOpened"], exportAs: ["luPopover2"] }, { kind: "component", type: LinkComponent$1, selector: "a[luLink], button[luLink]", inputs: ["intl", "href", "luLink", "disabled", "decorationHover", "external"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "linkNodeTemplate", first: true, predicate: ["linkNodeTemplate"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n\t#element\n\tluButton=\"ghost\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"intl().linksLabel\"\n\t[attr.aria-pressed]=\"active()\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon icon=\"formatLink\" [alt]=\"intl().linksLabel\" />\n</button>\n\n<ng-template #linkNodeTemplate let-href=\"href\" let-title=\"title\" let-target=\"target\" let-isAutoLink=\"isAutoLink\">\n\t<a [href]=\"href\" [attr.title]=\"title\" [attr.target]=\"target\" [luPopover2]=\"popover\" rel=\"noopener noreferrer\" #trigger=\"luPopover2\"></a>\n\t<ng-template #popover>\n\t\t<div class=\"popover-contentOptional linkPopover\">\n\t\t\t<a [href]=\"href\" luLink external class=\"pr-u-ellipsis\">{{ href }}</a>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); dispatchCommand()\"\n\t\t\t\t[luTooltip]=\"intl().linksLabel\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"officePen\" [alt]=\"intl().linksLabel\" />\n\t\t\t</button>\n\t\t\t@if (!isAutoLink) {\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tluButton=\"ghost\"\n\t\t\t\t\tsize=\"XS\"\n\t\t\t\t\t(click)=\"trigger.close(); deleteLink()\"\n\t\t\t\t\t[luTooltip]=\"intl().linksDelete\"\n\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t>\n\t\t\t\t\t<lu-icon icon=\"trashDelete\" [alt]=\"intl().linksDelete\" />\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</ng-template>\n</ng-template>\n", styles: [".linkPopover{display:flex;justify-items:center;gap:var(--pr-t-spacings-50);max-width:20rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[luButton], a[luButton], span[luButton], button[prButton], a[prButton], span[prButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton", "prButton"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "directive", type: PopoverDirective, selector: "[luPopover2]", inputs: ["intl", "luPopover2", "luPopoverPosition", "overlayScrollStrategy", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverAnchor", "luPopoverOpenDelay", "luPopoverCloseDelay"], outputs: ["luPopoverTriggerChange", "luPopoverClosed", "luPopoverOpened"], exportAs: ["luPopover2"] }, { kind: "component", type: LinkComponent$1, selector: "a[luLink], button[luLink]", inputs: ["intl", "href", "luLink", "disabled", "decorationHover", "external"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LinkComponent, decorators: [{
             type: Component,
@@ -963,7 +966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             provide: RICH_TEXT_PLUGIN_COMPONENT,
                             useExisting: forwardRef(() => LinkComponent),
                         },
-                    ], template: "<button\n\t#element\n\tluButton=\"ghost\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"intl().linksLabel\"\n\t[attr.aria-pressed]=\"active()\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon icon=\"formatLink\" [alt]=\"intl().linksLabel\" />\n</button>\n\n<ng-template #linkNodeTemplate let-href=\"href\" let-title=\"title\" let-target=\"target\">\n\t<a [href]=\"href\" [title]=\"title\" [target]=\"target\" [luPopover2]=\"popover\" #trigger=\"luPopover2\"></a>\n\t<ng-template #popover>\n\t\t<div class=\"popover-contentOptional linkPopover\">\n\t\t\t<a [href]=\"href\" luLink external class=\"pr-u-ellipsis\">{{ href }}</a>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); dispatchCommand()\"\n\t\t\t\t[luTooltip]=\"intl().linksLabel\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"officePen\" [alt]=\"intl().linksLabel\" />\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); deleteLink()\"\n\t\t\t\t[luTooltip]=\"intl().linksDelete\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"trashDelete\" [alt]=\"intl().linksDelete\" />\n\t\t\t</button>\n\t\t</div>\n\t</ng-template>\n</ng-template>\n", styles: [".linkPopover{display:flex;justify-items:center;gap:var(--pr-t-spacings-50);max-width:20rem}\n"] }]
+                    ], template: "<button\n\t#element\n\tluButton=\"ghost\"\n\ttype=\"button\"\n\tsize=\"S\"\n\t(click)=\"dispatchCommand()\"\n\t[luTooltip]=\"intl().linksLabel\"\n\t[attr.aria-pressed]=\"active()\"\n\tluTooltipOnlyForDisplay\n\t[attr.tabindex]=\"tabindex()\"\n\t[disabled]=\"isDisabled()\"\n\tclass=\"richTextField-toolbar-button\"\n>\n\t<lu-icon icon=\"formatLink\" [alt]=\"intl().linksLabel\" />\n</button>\n\n<ng-template #linkNodeTemplate let-href=\"href\" let-title=\"title\" let-target=\"target\" let-isAutoLink=\"isAutoLink\">\n\t<a [href]=\"href\" [attr.title]=\"title\" [attr.target]=\"target\" [luPopover2]=\"popover\" rel=\"noopener noreferrer\" #trigger=\"luPopover2\"></a>\n\t<ng-template #popover>\n\t\t<div class=\"popover-contentOptional linkPopover\">\n\t\t\t<a [href]=\"href\" luLink external class=\"pr-u-ellipsis\">{{ href }}</a>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tluButton=\"ghost\"\n\t\t\t\tsize=\"XS\"\n\t\t\t\t(click)=\"trigger.close(); dispatchCommand()\"\n\t\t\t\t[luTooltip]=\"intl().linksLabel\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<lu-icon icon=\"officePen\" [alt]=\"intl().linksLabel\" />\n\t\t\t</button>\n\t\t\t@if (!isAutoLink) {\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tluButton=\"ghost\"\n\t\t\t\t\tsize=\"XS\"\n\t\t\t\t\t(click)=\"trigger.close(); deleteLink()\"\n\t\t\t\t\t[luTooltip]=\"intl().linksDelete\"\n\t\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t\t>\n\t\t\t\t\t<lu-icon icon=\"trashDelete\" [alt]=\"intl().linksDelete\" />\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</ng-template>\n</ng-template>\n", styles: [".linkPopover{display:flex;justify-items:center;gap:var(--pr-t-spacings-50);max-width:20rem}\n"] }]
         }], propDecorators: { linkNodeTemplate: [{ type: i0.ViewChild, args: ['linkNodeTemplate', { ...{ read: TemplateRef }, isSignal: true }] }], element: [{ type: i0.ViewChild, args: ['element', { ...{ read: (ElementRef) }, isSignal: true }] }], intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }] } });
 
 const FORMAT_LIST = createCommand('FORMAT_LIST');