@elasticias/ui 1.0.53 → 1.0.54

package/fesm2022/elasticias-ui-rich-text.mjs

@@ -0,0 +1,336 @@
+import * as i0 from '@angular/core';
+import { input, EventEmitter, inject, ElementRef, linkedSignal, signal, effect, untracked, Output, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgControl } from '@angular/forms';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { merge } from 'rxjs';
+import { Editor } from 'primeng/editor';
+import { AbstractEfFormControl, EfLabelComponent, EF_RICH_TEXT } from '@elasticias/ui';
+
+/** The tags ef-rich-text's toolbar can make. */
+const ALLOWED = new Set(['P', 'BR', 'STRONG', 'EM', 'U', 'OL', 'UL', 'LI', 'A']);
+/** Removed with everything inside them. */
+const DROPPED = new Set(['SCRIPT', 'STYLE', 'IFRAME', 'OBJECT', 'EMBED', 'TEMPLATE', 'NOSCRIPT', 'SVG', 'MATH']);
+const SAFE_HREF = /^(https?:|mailto:|tel:)/i;
+/**
+ * Whitelists the HTML an ef-rich-text produces: the toolbar's tags, a link's
+ * `href` when it is http(s), mailto or tel (with `rel` and `target` set by us),
+ * and no other attribute, so no style, class or event handler leaves the
+ * browser. Other tags are unwrapped, keeping their text; script, style and
+ * frames go with their content. Quill's non-breaking spaces between words
+ * become spaces. An editor holding no text returns `''`, never `<p><br></p>`.
+ *
+ * Browser only: it parses into a `<template>` and so needs `document`.
+ *
+ * Security note: `npm audit` flags quill 2.0.3 (GHSA-v3m3-f69x-jf25, XSS via
+ * HTML export; low severity, no patched release). It is mitigated here
+ * because every value ef-rich-text emits goes through this function, and
+ * incoming HTML goes through it before Quill parses it. Never render
+ * `getSemanticHTML()` without it.
+ */
+function sanitizeRichHtml(html) {
+    if (!html)
+        return '';
+    const tpl = document.createElement('template');
+    tpl.innerHTML = html;
+    clean(tpl.content);
+    if (!(tpl.content.textContent ?? '').trim())
+        return '';
+    const out = document.createElement('div');
+    out.appendChild(tpl.content);
+    return out.innerHTML;
+}
+function clean(parent) {
+    for (const node of Array.from(parent.childNodes)) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            node.textContent = (node.textContent ?? '').replace(/\u00a0/g, ' ');
+            continue;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            node.parentNode?.removeChild(node);
+            continue;
+        }
+        const el = node;
+        const tag = el.tagName.toUpperCase();
+        if (DROPPED.has(tag) || el.classList.contains('ql-ui')) {
+            el.remove();
+            continue;
+        }
+        clean(el);
+        if (!ALLOWED.has(tag)) {
+            el.replaceWith(...Array.from(el.childNodes));
+            continue;
+        }
+        const href = tag === 'A' ? (el.getAttribute('href') ?? '').trim() : '';
+        for (const attr of Array.from(el.attributes))
+            el.removeAttribute(attr.name);
+        if (tag === 'A') {
+            if (!SAFE_HREF.test(href)) {
+                el.replaceWith(...Array.from(el.childNodes));
+                continue;
+            }
+            el.setAttribute('href', href);
+            el.setAttribute('rel', 'noopener noreferrer');
+            el.setAttribute('target', '_blank');
+        }
+    }
+}
+
+/** What the toolbar can make, so a paste cannot bring in headings, images or colours. */
+const FORMATS = ['bold', 'italic', 'underline', 'list', 'link'];
+/** Tab leaves the editor instead of inserting a tab or indenting a list (WCAG 2.1.2). */
+const LEAVE_ON_TAB = { key: 'Tab', handler: () => true };
+const MODULES = {
+    keyboard: {
+        bindings: {
+            tab: LEAVE_ON_TAB,
+            'indent code-block': null,
+            'outdent code-block': null,
+            'remove tab': null,
+            indent: { ...LEAVE_ON_TAB, format: ['blockquote', 'indent', 'list'] },
+            outdent: { ...LEAVE_ON_TAB, shiftKey: true, format: ['blockquote', 'indent', 'list'] },
+        },
+    },
+};
+let nextId = 0;
+/**
+ * A rich text field: PrimeNG's Editor (Quill 2) with a small toolbar (bold,
+ * italic, underline, bulleted and numbered lists, link, clear formatting) and
+ * sanitised HTML out (`sanitizeRichHtml`): the toolbar's tags only, safe links,
+ * no script, style, class or event attribute, and `''` for an empty editor.
+ *
+ * It lives in `@elasticias/ui/rich-text` so that only apps that use it bundle
+ * the editor and need `quill` (a peer dependency of this entry). PrimeNG loads
+ * Quill with a dynamic import the first time an editor renders, so a screen
+ * without one never downloads it. `ef-localized-input`'s `rich` mode renders
+ * it through `EF_RICH_TEXT`; provide that with `provideEfRichText()`.
+ *
+ * - `dir` and `lang` apply to the editing area only; the toolbar is page chrome.
+ * - Disabled by `[disabled]`, a form's `disable()` or `[efReadOnly]`; `readonly`
+ *   keeps the text selectable. The toolbar is disabled with it.
+ * - The editing area is a `role="textbox"` named by the label and described
+ *   by the hint, the errors and `describedByExtra`.
+ * - An incoming value equal to what it last emitted is ignored, so binding
+ *   the output back never resets the caret.
+ *
+ * i18n keys the app's bundles must define (toolbar names and the link bubble,
+ * whose Quill texts are otherwise hardcoded English):
+ *
+ * | key | fr | ar | en |
+ * |---|---|---|---|
+ * | `ef_rich_text_bold` | Gras | غامق | Bold |
+ * | `ef_rich_text_italic` | Italique | مائل | Italic |
+ * | `ef_rich_text_underline` | Souligné | تسطير | Underline |
+ * | `ef_rich_text_bullet_list` | Liste à puces | قائمة نقطية | Bulleted list |
+ * | `ef_rich_text_ordered_list` | Liste numérotée | قائمة مرقمة | Numbered list |
+ * | `ef_rich_text_link` | Lien | رابط | Link |
+ * | `ef_rich_text_clean` | Effacer la mise en forme | مسح التنسيق | Clear formatting |
+ * | `ef_rich_text_toolbar` | Mise en forme | التنسيق | Formatting |
+ * | `ef_rich_text_link_enter` | Adresse du lien : | عنوان الرابط: | Link address: |
+ * | `ef_rich_text_link_visit` | Ouvrir : | فتح: | Open: |
+ * | `ef_rich_text_link_edit` | Modifier | تعديل | Edit |
+ * | `ef_rich_text_link_remove` | Retirer | إزالة | Remove |
+ * | `ef_rich_text_link_save` | Enregistrer | حفظ | Save |
+ *
+ * ```html
+ * <ef-rich-text name="description" labelKey="product_description" dir="rtl" lang="ar"
+ *     [value]="html()" (valueChangeEvent)="html.set($event)" />
+ * ```
+ */
+class EfRichTextComponent extends AbstractEfFormControl {
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Direction of the text (`rtl` for Arabic), on the editing area only. */
+    dir = input(null, ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+    /** Language of the text, on the editing area only. */
+    lang = input(null, ...(ngDevMode ? [{ debugName: "lang" }] : /* istanbul ignore next */ []));
+    /** Id(s) naming the editing area when the label is rendered elsewhere
+     *  (`ef-localized-input` draws one label above its culture tabs). */
+    labelledBy = input(null, ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    /** Visible height of the editing area, in lines. */
+    rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /** Sanitised HTML, `''` when the editor holds no text. */
+    valueChangeEvent = new EventEmitter();
+    ngControl = inject(NgControl, { self: true, optional: true });
+    host = inject(ElementRef);
+    formats = FORMATS;
+    modules = MODULES;
+    labelId = `ef-rich-text-${nextId++}-label`;
+    current = linkedSignal(() => this.value() ?? '', ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    quill = signal(null, ...(ngDevMode ? [{ debugName: "quill" }] : /* istanbul ignore next */ []));
+    lastEmitted = null;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        super();
+        if (this.ngControl)
+            this.ngControl.valueAccessor = this;
+        effect(() => {
+            const html = this.current();
+            const q = this.quill();
+            if (q)
+                untracked(() => this.apply(q, html));
+        });
+        // Attributes that follow signals are written when those change, not
+        // on every check of the parent.
+        effect(() => {
+            const q = this.quill();
+            if (q)
+                this.decorateFromInputs(q.root);
+        });
+        // Translations can load after the editor is up (a lazy bundle, a slow
+        // fetch), which changes the texts without changing the language.
+        merge(this.translateService.onLangChange, this.translateService.onTranslationChange).pipe(takeUntilDestroyed()).subscribe(() => {
+            const q = this.quill();
+            if (!q)
+                return;
+            this.translateBubble();
+            this.decorateFromInputs(q.root);
+        });
+    }
+    get isInvalid() {
+        if (this.resolvedExternalErrors()?.length)
+            return true;
+        const c = this.ngControl?.control;
+        return !!(c?.invalid && (c.touched || c.dirty));
+    }
+    get serverErrors() {
+        return this.resolvedExternalErrors() ?? null;
+    }
+    get showRequired() {
+        const c = this.ngControl?.control;
+        return !!(c?.hasError('required') && c.touched);
+    }
+    /** Read-only or disabled: Quill and the toolbar stop editing. */
+    locked() {
+        return this.isDisabled() || this.readonly();
+    }
+    onInit(event) {
+        const q = event.editor;
+        this.decorateFromForm(q.root);
+        this.translateBubble();
+        this.quill.set(q);
+    }
+    onTextChange() {
+        const q = this.quill();
+        if (!q)
+            return;
+        const html = sanitizeRichHtml(q.getSemanticHTML());
+        if (html === this.lastEmitted)
+            return;
+        this.lastEmitted = html;
+        this.current.set(html);
+        this.onChange(html);
+        this.valueChangeEvent.emit(html);
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    ngDoCheck() {
+        // The form control's state is not a signal, so it is read per check;
+        // these are two attributes, written only when they change.
+        const q = this.quill();
+        if (q)
+            this.decorateFromForm(q.root);
+    }
+    writeValue(v) {
+        this.current.set(v ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.updateDisabledState(disabled);
+    }
+    /** Replaces the content unless it is our own echo or the same HTML. */
+    apply(q, html) {
+        if (html === this.lastEmitted)
+            return;
+        if (sanitizeRichHtml(html) === sanitizeRichHtml(q.getSemanticHTML()))
+            return;
+        // Our own allowlist first, so the guarantee does not rest on Quill's
+        // clipboard and link sanitiser alone.
+        q.setContents(q.clipboard.convert({ html: sanitizeRichHtml(html) }), 'silent');
+    }
+    /** Role, name, state, direction and language: everything that follows signals. */
+    decorateFromInputs(root) {
+        const set = setter(root);
+        set('role', 'textbox');
+        set('aria-multiline', 'true');
+        set('id', this.effectiveId);
+        set('aria-labelledby', this.labelKey() || this.label() ? this.labelId : this.labelledBy());
+        set('aria-label', this.effectiveAriaLabel);
+        set('aria-required', this.required() ? 'true' : null);
+        // A read-only editor stays focusable, so its hint is announced and its
+        // text can be selected; a disabled one leaves the tab order.
+        const readOnlyOnly = this.readonly() && !this.isDisabled();
+        set('aria-readonly', readOnlyOnly ? 'true' : null);
+        set('aria-disabled', this.isDisabled() ? 'true' : null);
+        set('tabindex', readOnlyOnly ? '0' : null);
+        set('dir', this.dir());
+        set('lang', this.lang());
+    }
+    /** Validity and what describes the field, which follow the form control. */
+    decorateFromForm(root) {
+        const set = setter(root);
+        set('aria-describedby', this.describedBy(this.showRequired || !!this.serverErrors));
+        set('aria-invalid', this.isInvalid ? 'true' : null);
+    }
+    /** Quill's link bubble texts are hardcoded English in its CSS; ours come from attributes. */
+    translateBubble() {
+        const tooltip = this.host.nativeElement.querySelector('.ql-tooltip');
+        if (!tooltip)
+            return;
+        const t = (key) => this.translateService.instant(key);
+        tooltip.dataset['efEnter'] = t('ef_rich_text_link_enter');
+        tooltip.dataset['efVisit'] = t('ef_rich_text_link_visit');
+        const action = tooltip.querySelector('a.ql-action');
+        if (action) {
+            action.dataset['efEdit'] = t('ef_rich_text_link_edit');
+            action.dataset['efSave'] = t('ef_rich_text_link_save');
+        }
+        const remove = tooltip.querySelector('a.ql-remove');
+        if (remove)
+            remove.dataset['efRemove'] = t('ef_rich_text_link_remove');
+        tooltip.querySelector('input')?.setAttribute('data-link', 'https://');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfRichTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfRichTextComponent, isStandalone: true, selector: "ef-rich-text", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "labelledBy", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChangeEvent: "valueChangeEvent" }, host: { properties: { "style.--ef-rich-text-rows": "rows()", "attr.lang": "null" } }, usesInheritance: true, ngImport: i0, template: "@if (labelKey() || label()) {\n    <!-- A contenteditable area cannot be the target of label[for], so the\n         editing area points at this wrapper with aria-labelledby. -->\n    <span class=\"ef-rich-text__label\" [id]=\"labelId\">\n        <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [required]=\"required()\" />\n    </span>\n}\n<div class=\"ef-field-control\">\n    <div #box class=\"ef-rich-text__box\" [class.is-invalid]=\"isInvalid\" [class.is-locked]=\"locked()\">\n        <p-editor\n            [bounds]=\"box\"\n            [formats]=\"formats\"\n            [modules]=\"modules\"\n            [readonly]=\"locked()\"\n            [placeholder]=\"effectivePlaceholder\"\n            (onInit)=\"onInit($event)\"\n            (onTextChange)=\"onTextChange()\"\n            (onBlur)=\"handleBlur()\"\n        >\n            <ng-template #header>\n                <span class=\"ql-formats\" role=\"group\" [attr.aria-label]=\"'ef_rich_text_toolbar' | translate\">\n                    <button type=\"button\" class=\"ql-bold\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_bold' | translate\" [title]=\"'ef_rich_text_bold' | translate\"></button>\n                    <button type=\"button\" class=\"ql-italic\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_italic' | translate\" [title]=\"'ef_rich_text_italic' | translate\"></button>\n                    <button type=\"button\" class=\"ql-underline\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_underline' | translate\" [title]=\"'ef_rich_text_underline' | translate\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button type=\"button\" class=\"ql-list\" value=\"bullet\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_bullet_list' | translate\" [title]=\"'ef_rich_text_bullet_list' | translate\"></button>\n                    <button type=\"button\" class=\"ql-list\" value=\"ordered\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_ordered_list' | translate\" [title]=\"'ef_rich_text_ordered_list' | translate\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button type=\"button\" class=\"ql-link\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_link' | translate\" [title]=\"'ef_rich_text_link' | translate\"></button>\n                    <button type=\"button\" class=\"ql-clean\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_clean' | translate\" [title]=\"'ef_rich_text_clean' | translate\"></button>\n                </span>\n            </ng-template>\n        </p-editor>\n    </div>\n    @if (effectiveHint) {\n        <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n    }\n    @if (showRequired || serverErrors) {\n        <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n            @if (showRequired) {\n                <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n            }\n            @if (serverErrors; as errors) {\n                @for (error of errors; track error) {\n                    <small class=\"text-danger block\">{{ error }}</small>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: ["ef-rich-text{display:block;min-width:0}ef-rich-text[dir]{direction:inherit}ef-rich-text .ef-rich-text__label{display:block}ef-rich-text .ef-rich-text__box{min-width:0;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--paper)}ef-rich-text .ef-rich-text__box:focus-within{border-color:var(--ink-active)}ef-rich-text .ef-rich-text__box.is-invalid{border-color:var(--st-cancelled-fg)}ef-rich-text .ef-rich-text__box.is-locked{background:var(--paper-alt)}ef-rich-text .p-editor,ef-rich-text .p-editor .p-editor-toolbar,ef-rich-text .p-editor .p-editor-content{border:0;border-radius:0;background:transparent}ef-rich-text .ql-toolbar.ql-snow{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s-2);padding:4px;border:0;border-bottom:1px solid var(--rule);background:var(--paper-alt);font-family:inherit;border-radius:var(--r-md) var(--r-md) 0 0}ef-rich-text .ql-snow .ql-formats{display:inline-flex;gap:2px;margin:0}ef-rich-text .ql-snow.ql-toolbar button{float:none;display:inline-grid;place-items:center;width:var(--hit, 32px);height:var(--hit, 32px);padding:7px;border-radius:var(--r-sm);color:var(--text-mute)}ef-rich-text .ql-snow .ql-stroke{stroke:currentColor}ef-rich-text .ql-snow .ql-fill,ef-rich-text .ql-snow .ql-stroke.ql-fill{fill:currentColor}ef-rich-text .ql-snow.ql-toolbar button:hover:not([disabled]),ef-rich-text .ql-snow.ql-toolbar button:focus-visible,ef-rich-text .ql-snow.ql-toolbar button.ql-active{color:var(--text);background:var(--paper)}ef-rich-text .ql-snow.ql-toolbar button:focus-visible{outline:0;box-shadow:0 0 0 2px color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent)}ef-rich-text .ql-snow.ql-toolbar button[disabled]{opacity:.4;cursor:not-allowed}ef-rich-text .ql-container.ql-snow{border:0;border-radius:0 0 var(--r-md) var(--r-md);font-family:inherit;font-size:13.5px;color:var(--text)}ef-rich-text .ql-editor{min-height:calc(var(--ef-rich-text-rows, 4) * 1.55em + 24px);line-height:1.55;text-align:start}ef-rich-text .p-editor .p-editor-content .ql-editor{color:var(--text);background:transparent}ef-rich-text .ql-editor.ql-blank:before{color:var(--text-mute);font-style:normal}ef-rich-text .ql-snow .ql-editor a{color:inherit}ef-rich-text .ql-editor{counter-reset:list-0}ef-rich-text .ql-editor p{counter-set:list-0}ef-rich-text .ql-editor ol{margin:0;padding-inline-start:0}ef-rich-text .ql-editor li[data-list]{position:relative;list-style-type:none;padding-inline-start:1.5em;padding-inline-end:0}ef-rich-text .ql-editor li[data-list]:before{content:none}ef-rich-text .ql-editor li[data-list]>.ql-ui{position:absolute}ef-rich-text .ql-editor li[data-list]>.ql-ui:before{display:inline-block;width:1.2em;margin-inline-start:-1.5em;margin-inline-end:.3em;text-align:end;white-space:nowrap}ef-rich-text .ql-editor li[data-list=bullet]{counter-increment:none}ef-rich-text .ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}ef-rich-text .ql-editor li[data-list=ordered]{counter-increment:list-0}ef-rich-text .ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}ef-rich-text .ql-snow .ql-tooltip{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);box-shadow:0 4px 16px color-mix(in srgb,var(--ink-active, #0f1115) 14%,transparent);color:var(--text);max-width:calc(100% - 16px)}ef-rich-text .ql-snow .ql-tooltip input[type=text]{border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper);color:var(--text)}ef-rich-text .ql-snow .ql-tooltip:before{content:attr(data-ef-visit)}ef-rich-text .ql-snow .ql-tooltip[data-mode=link]:before{content:attr(data-ef-enter)}ef-rich-text .ql-snow .ql-tooltip a.ql-action:after{content:attr(data-ef-edit);border-color:var(--rule)}ef-rich-text .ql-snow .ql-tooltip.ql-editing a.ql-action:after{content:attr(data-ef-save)}ef-rich-text .ql-snow .ql-tooltip a.ql-remove:before{content:attr(data-ef-remove)}@media(max-width:767px),(pointer:coarse){ef-rich-text .ql-snow.ql-toolbar button{width:var(--hit-touch);height:var(--hit-touch);padding:12px}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange", "onEditorChange", "onFocus", "onBlur"] }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfRichTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ef-rich-text', standalone: true, imports: [TranslateModule, Editor, EfLabelComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[style.--ef-rich-text-rows]': 'rows()', '[attr.lang]': 'null' }, template: "@if (labelKey() || label()) {\n    <!-- A contenteditable area cannot be the target of label[for], so the\n         editing area points at this wrapper with aria-labelledby. -->\n    <span class=\"ef-rich-text__label\" [id]=\"labelId\">\n        <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [required]=\"required()\" />\n    </span>\n}\n<div class=\"ef-field-control\">\n    <div #box class=\"ef-rich-text__box\" [class.is-invalid]=\"isInvalid\" [class.is-locked]=\"locked()\">\n        <p-editor\n            [bounds]=\"box\"\n            [formats]=\"formats\"\n            [modules]=\"modules\"\n            [readonly]=\"locked()\"\n            [placeholder]=\"effectivePlaceholder\"\n            (onInit)=\"onInit($event)\"\n            (onTextChange)=\"onTextChange()\"\n            (onBlur)=\"handleBlur()\"\n        >\n            <ng-template #header>\n                <span class=\"ql-formats\" role=\"group\" [attr.aria-label]=\"'ef_rich_text_toolbar' | translate\">\n                    <button type=\"button\" class=\"ql-bold\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_bold' | translate\" [title]=\"'ef_rich_text_bold' | translate\"></button>\n                    <button type=\"button\" class=\"ql-italic\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_italic' | translate\" [title]=\"'ef_rich_text_italic' | translate\"></button>\n                    <button type=\"button\" class=\"ql-underline\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_underline' | translate\" [title]=\"'ef_rich_text_underline' | translate\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button type=\"button\" class=\"ql-list\" value=\"bullet\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_bullet_list' | translate\" [title]=\"'ef_rich_text_bullet_list' | translate\"></button>\n                    <button type=\"button\" class=\"ql-list\" value=\"ordered\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_ordered_list' | translate\" [title]=\"'ef_rich_text_ordered_list' | translate\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button type=\"button\" class=\"ql-link\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_link' | translate\" [title]=\"'ef_rich_text_link' | translate\"></button>\n                    <button type=\"button\" class=\"ql-clean\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_clean' | translate\" [title]=\"'ef_rich_text_clean' | translate\"></button>\n                </span>\n            </ng-template>\n        </p-editor>\n    </div>\n    @if (effectiveHint) {\n        <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n    }\n    @if (showRequired || serverErrors) {\n        <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n            @if (showRequired) {\n                <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n            }\n            @if (serverErrors; as errors) {\n                @for (error of errors; track error) {\n                    <small class=\"text-danger block\">{{ error }}</small>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: ["ef-rich-text{display:block;min-width:0}ef-rich-text[dir]{direction:inherit}ef-rich-text .ef-rich-text__label{display:block}ef-rich-text .ef-rich-text__box{min-width:0;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--paper)}ef-rich-text .ef-rich-text__box:focus-within{border-color:var(--ink-active)}ef-rich-text .ef-rich-text__box.is-invalid{border-color:var(--st-cancelled-fg)}ef-rich-text .ef-rich-text__box.is-locked{background:var(--paper-alt)}ef-rich-text .p-editor,ef-rich-text .p-editor .p-editor-toolbar,ef-rich-text .p-editor .p-editor-content{border:0;border-radius:0;background:transparent}ef-rich-text .ql-toolbar.ql-snow{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s-2);padding:4px;border:0;border-bottom:1px solid var(--rule);background:var(--paper-alt);font-family:inherit;border-radius:var(--r-md) var(--r-md) 0 0}ef-rich-text .ql-snow .ql-formats{display:inline-flex;gap:2px;margin:0}ef-rich-text .ql-snow.ql-toolbar button{float:none;display:inline-grid;place-items:center;width:var(--hit, 32px);height:var(--hit, 32px);padding:7px;border-radius:var(--r-sm);color:var(--text-mute)}ef-rich-text .ql-snow .ql-stroke{stroke:currentColor}ef-rich-text .ql-snow .ql-fill,ef-rich-text .ql-snow .ql-stroke.ql-fill{fill:currentColor}ef-rich-text .ql-snow.ql-toolbar button:hover:not([disabled]),ef-rich-text .ql-snow.ql-toolbar button:focus-visible,ef-rich-text .ql-snow.ql-toolbar button.ql-active{color:var(--text);background:var(--paper)}ef-rich-text .ql-snow.ql-toolbar button:focus-visible{outline:0;box-shadow:0 0 0 2px color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent)}ef-rich-text .ql-snow.ql-toolbar button[disabled]{opacity:.4;cursor:not-allowed}ef-rich-text .ql-container.ql-snow{border:0;border-radius:0 0 var(--r-md) var(--r-md);font-family:inherit;font-size:13.5px;color:var(--text)}ef-rich-text .ql-editor{min-height:calc(var(--ef-rich-text-rows, 4) * 1.55em + 24px);line-height:1.55;text-align:start}ef-rich-text .p-editor .p-editor-content .ql-editor{color:var(--text);background:transparent}ef-rich-text .ql-editor.ql-blank:before{color:var(--text-mute);font-style:normal}ef-rich-text .ql-snow .ql-editor a{color:inherit}ef-rich-text .ql-editor{counter-reset:list-0}ef-rich-text .ql-editor p{counter-set:list-0}ef-rich-text .ql-editor ol{margin:0;padding-inline-start:0}ef-rich-text .ql-editor li[data-list]{position:relative;list-style-type:none;padding-inline-start:1.5em;padding-inline-end:0}ef-rich-text .ql-editor li[data-list]:before{content:none}ef-rich-text .ql-editor li[data-list]>.ql-ui{position:absolute}ef-rich-text .ql-editor li[data-list]>.ql-ui:before{display:inline-block;width:1.2em;margin-inline-start:-1.5em;margin-inline-end:.3em;text-align:end;white-space:nowrap}ef-rich-text .ql-editor li[data-list=bullet]{counter-increment:none}ef-rich-text .ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}ef-rich-text .ql-editor li[data-list=ordered]{counter-increment:list-0}ef-rich-text .ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}ef-rich-text .ql-snow .ql-tooltip{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);box-shadow:0 4px 16px color-mix(in srgb,var(--ink-active, #0f1115) 14%,transparent);color:var(--text);max-width:calc(100% - 16px)}ef-rich-text .ql-snow .ql-tooltip input[type=text]{border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper);color:var(--text)}ef-rich-text .ql-snow .ql-tooltip:before{content:attr(data-ef-visit)}ef-rich-text .ql-snow .ql-tooltip[data-mode=link]:before{content:attr(data-ef-enter)}ef-rich-text .ql-snow .ql-tooltip a.ql-action:after{content:attr(data-ef-edit);border-color:var(--rule)}ef-rich-text .ql-snow .ql-tooltip.ql-editing a.ql-action:after{content:attr(data-ef-save)}ef-rich-text .ql-snow .ql-tooltip a.ql-remove:before{content:attr(data-ef-remove)}@media(max-width:767px),(pointer:coarse){ef-rich-text .ql-snow.ql-toolbar button{width:var(--hit-touch);height:var(--hit-touch);padding:12px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelledBy", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], valueChangeEvent: [{
+                type: Output
+            }] } });
+/** Writes an attribute only when it changes; null removes it. */
+function setter(el) {
+    return (name, value) => {
+        if (value === null)
+            el.removeAttribute(name);
+        else if (el.getAttribute(name) !== value)
+            el.setAttribute(name, value);
+    };
+}
+
+/**
+ * Turns on `ef-localized-input`'s `rich` mode for the app. Quill still loads
+ * lazily, the first time an editor renders.
+ *
+ * ```ts
+ * providers: [provideEfRichText()]
+ * ```
+ */
+function provideEfRichText() {
+    return { provide: EF_RICH_TEXT, useValue: () => Promise.resolve(EfRichTextComponent) };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EfRichTextComponent, provideEfRichText, sanitizeRichHtml };
+//# sourceMappingURL=elasticias-ui-rich-text.mjs.map

package/fesm2022/elasticias-ui-rich-text.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"elasticias-ui-rich-text.mjs","sources":["../../../../libs/ui/rich-text/src/sanitize-rich-html.ts","../../../../libs/ui/rich-text/src/ef-rich-text.component.ts","../../../../libs/ui/rich-text/src/ef-rich-text.component.html","../../../../libs/ui/rich-text/src/provide-ef-rich-text.ts","../../../../libs/ui/rich-text/src/elasticias-ui-rich-text.ts"],"sourcesContent":["/** The tags ef-rich-text's toolbar can make. */\nconst ALLOWED = new Set(['P', 'BR', 'STRONG', 'EM', 'U', 'OL', 'UL', 'LI', 'A']);\n\n/** Removed with everything inside them. */\nconst DROPPED = new Set(['SCRIPT', 'STYLE', 'IFRAME', 'OBJECT', 'EMBED', 'TEMPLATE', 'NOSCRIPT', 'SVG', 'MATH']);\n\nconst SAFE_HREF = /^(https?:|mailto:|tel:)/i;\n\n/**\n * Whitelists the HTML an ef-rich-text produces: the toolbar's tags, a link's\n * `href` when it is http(s), mailto or tel (with `rel` and `target` set by us),\n * and no other attribute, so no style, class or event handler leaves the\n * browser. Other tags are unwrapped, keeping their text; script, style and\n * frames go with their content. Quill's non-breaking spaces between words\n * become spaces. An editor holding no text returns `''`, never `<p><br></p>`.\n *\n * Browser only: it parses into a `<template>` and so needs `document`.\n *\n * Security note: `npm audit` flags quill 2.0.3 (GHSA-v3m3-f69x-jf25, XSS via\n * HTML export; low severity, no patched release). It is mitigated here\n * because every value ef-rich-text emits goes through this function, and\n * incoming HTML goes through it before Quill parses it. Never render\n * `getSemanticHTML()` without it.\n */\nexport function sanitizeRichHtml(html: string | null | undefined): string {\n    if (!html) return '';\n    const tpl = document.createElement('template');\n    tpl.innerHTML = html;\n    clean(tpl.content);\n    if (!(tpl.content.textContent ?? '').trim()) return '';\n    const out = document.createElement('div');\n    out.appendChild(tpl.content);\n    return out.innerHTML;\n}\n\nfunction clean(parent: Node): void {\n    for (const node of Array.from(parent.childNodes)) {\n        if (node.nodeType === Node.TEXT_NODE) {\n            node.textContent = (node.textContent ?? '').replace(/\\u00a0/g, ' ');\n            continue;\n        }\n        if (node.nodeType !== Node.ELEMENT_NODE) {\n            node.parentNode?.removeChild(node);\n            continue;\n        }\n        const el = node as Element;\n        const tag = el.tagName.toUpperCase();\n        if (DROPPED.has(tag) || el.classList.contains('ql-ui')) {\n            el.remove();\n            continue;\n        }\n        clean(el);\n        if (!ALLOWED.has(tag)) {\n            el.replaceWith(...Array.from(el.childNodes));\n            continue;\n        }\n        const href = tag === 'A' ? (el.getAttribute('href') ?? '').trim() : '';\n        for (const attr of Array.from(el.attributes)) el.removeAttribute(attr.name);\n        if (tag === 'A') {\n            if (!SAFE_HREF.test(href)) {\n                el.replaceWith(...Array.from(el.childNodes));\n                continue;\n            }\n            el.setAttribute('href', href);\n            el.setAttribute('rel', 'noopener noreferrer');\n            el.setAttribute('target', '_blank');\n        }\n    }\n}\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    DoCheck,\n    ElementRef,\n    EventEmitter,\n    Output,\n    ViewEncapsulation,\n    effect,\n    inject,\n    input,\n    linkedSignal,\n    signal,\n    untracked,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { merge } from 'rxjs';\nimport { Editor, EditorInitEvent } from 'primeng/editor';\nimport { AbstractEfFormControl, EfLabelComponent } from '@elasticias/ui';\nimport { sanitizeRichHtml } from './sanitize-rich-html';\n\n/** The part of Quill this wrapper uses. Quill is never imported here: PrimeNG loads it. */\ninterface QuillLike {\n    root: HTMLElement;\n    container: HTMLElement;\n    clipboard: { convert(v: { html: string }): unknown };\n    setContents(delta: unknown, source?: string): void;\n    getSemanticHTML(): string;\n    focus(): void;\n}\n\n/** What the toolbar can make, so a paste cannot bring in headings, images or colours. */\nconst FORMATS = ['bold', 'italic', 'underline', 'list', 'link'];\n\n/** Tab leaves the editor instead of inserting a tab or indenting a list (WCAG 2.1.2). */\nconst LEAVE_ON_TAB = { key: 'Tab', handler: () => true };\nconst MODULES = {\n    keyboard: {\n        bindings: {\n            tab: LEAVE_ON_TAB,\n            'indent code-block': null,\n            'outdent code-block': null,\n            'remove tab': null,\n            indent: { ...LEAVE_ON_TAB, format: ['blockquote', 'indent', 'list'] },\n            outdent: { ...LEAVE_ON_TAB, shiftKey: true, format: ['blockquote', 'indent', 'list'] },\n        },\n    },\n};\n\nlet nextId = 0;\n\n/**\n * A rich text field: PrimeNG's Editor (Quill 2) with a small toolbar (bold,\n * italic, underline, bulleted and numbered lists, link, clear formatting) and\n * sanitised HTML out (`sanitizeRichHtml`): the toolbar's tags only, safe links,\n * no script, style, class or event attribute, and `''` for an empty editor.\n *\n * It lives in `@elasticias/ui/rich-text` so that only apps that use it bundle\n * the editor and need `quill` (a peer dependency of this entry). PrimeNG loads\n * Quill with a dynamic import the first time an editor renders, so a screen\n * without one never downloads it. `ef-localized-input`'s `rich` mode renders\n * it through `EF_RICH_TEXT`; provide that with `provideEfRichText()`.\n *\n * - `dir` and `lang` apply to the editing area only; the toolbar is page chrome.\n * - Disabled by `[disabled]`, a form's `disable()` or `[efReadOnly]`; `readonly`\n *   keeps the text selectable. The toolbar is disabled with it.\n * - The editing area is a `role=\"textbox\"` named by the label and described\n *   by the hint, the errors and `describedByExtra`.\n * - An incoming value equal to what it last emitted is ignored, so binding\n *   the output back never resets the caret.\n *\n * i18n keys the app's bundles must define (toolbar names and the link bubble,\n * whose Quill texts are otherwise hardcoded English):\n *\n * | key | fr | ar | en |\n * |---|---|---|---|\n * | `ef_rich_text_bold` | Gras | غامق | Bold |\n * | `ef_rich_text_italic` | Italique | مائل | Italic |\n * | `ef_rich_text_underline` | Souligné | تسطير | Underline |\n * | `ef_rich_text_bullet_list` | Liste à puces | قائمة نقطية | Bulleted list |\n * | `ef_rich_text_ordered_list` | Liste numérotée | قائمة مرقمة | Numbered list |\n * | `ef_rich_text_link` | Lien | رابط | Link |\n * | `ef_rich_text_clean` | Effacer la mise en forme | مسح التنسيق | Clear formatting |\n * | `ef_rich_text_toolbar` | Mise en forme | التنسيق | Formatting |\n * | `ef_rich_text_link_enter` | Adresse du lien : | عنوان الرابط: | Link address: |\n * | `ef_rich_text_link_visit` | Ouvrir : | فتح: | Open: |\n * | `ef_rich_text_link_edit` | Modifier | تعديل | Edit |\n * | `ef_rich_text_link_remove` | Retirer | إزالة | Remove |\n * | `ef_rich_text_link_save` | Enregistrer | حفظ | Save |\n *\n * ```html\n * <ef-rich-text name=\"description\" labelKey=\"product_description\" dir=\"rtl\" lang=\"ar\"\n *     [value]=\"html()\" (valueChangeEvent)=\"html.set($event)\" />\n * ```\n */\n@Component({\n    selector: 'ef-rich-text',\n    standalone: true,\n    imports: [TranslateModule, Editor, EfLabelComponent],\n    templateUrl: './ef-rich-text.component.html',\n    styleUrl: './ef-rich-text.component.scss',\n    // Quill builds its toolbar and editing area outside Angular's templates,\n    // so the rules are global and every selector starts with ef-rich-text.\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    // A static lang=\"ar\" belongs to the editing area only, not to the label around it.\n    host: { '[style.--ef-rich-text-rows]': 'rows()', '[attr.lang]': 'null' },\n})\nexport class EfRichTextComponent extends AbstractEfFormControl implements ControlValueAccessor, DoCheck {\n    readonly value = input<string | null | undefined>('');\n    /** Direction of the text (`rtl` for Arabic), on the editing area only. */\n    readonly dir = input<'ltr' | 'rtl' | 'auto' | null>(null);\n    /** Language of the text, on the editing area only. */\n    readonly lang = input<string | null>(null);\n    /** Id(s) naming the editing area when the label is rendered elsewhere\n     *  (`ef-localized-input` draws one label above its culture tabs). */\n    readonly labelledBy = input<string | null>(null);\n    /** Visible height of the editing area, in lines. */\n    readonly rows = input(4);\n\n    /** Sanitised HTML, `''` when the editor holds no text. */\n    @Output() readonly valueChangeEvent = new EventEmitter<string>();\n\n    readonly ngControl = inject(NgControl, { self: true, optional: true });\n    private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    protected readonly formats = FORMATS;\n    protected readonly modules = MODULES;\n    protected readonly labelId = `ef-rich-text-${nextId++}-label`;\n\n    private readonly current = linkedSignal(() => this.value() ?? '');\n    private readonly quill = signal<QuillLike | null>(null);\n    private lastEmitted: string | null = null;\n\n    private onChange: (v: string) => void = () => { /* noop */ };\n    private onTouched: () => void = () => { /* noop */ };\n\n    constructor() {\n        super();\n        if (this.ngControl) this.ngControl.valueAccessor = this;\n        effect(() => {\n            const html = this.current();\n            const q = this.quill();\n            if (q) untracked(() => this.apply(q, html));\n        });\n        // Attributes that follow signals are written when those change, not\n        // on every check of the parent.\n        effect(() => {\n            const q = this.quill();\n            if (q) this.decorateFromInputs(q.root);\n        });\n        // Translations can load after the editor is up (a lazy bundle, a slow\n        // fetch), which changes the texts without changing the language.\n        merge(this.translateService.onLangChange, this.translateService.onTranslationChange).pipe(takeUntilDestroyed()).subscribe(() => {\n            const q = this.quill();\n            if (!q) return;\n            this.translateBubble();\n            this.decorateFromInputs(q.root);\n        });\n    }\n\n    get isInvalid(): boolean {\n        if (this.resolvedExternalErrors()?.length) return true;\n        const c = this.ngControl?.control;\n        return !!(c?.invalid && (c.touched || c.dirty));\n    }\n\n    get serverErrors(): string[] | null {\n        return this.resolvedExternalErrors() ?? null;\n    }\n\n    get showRequired(): boolean {\n        const c = this.ngControl?.control;\n        return !!(c?.hasError('required') && c.touched);\n    }\n\n    /** Read-only or disabled: Quill and the toolbar stop editing. */\n    protected locked(): boolean {\n        return this.isDisabled() || this.readonly();\n    }\n\n    protected onInit(event: EditorInitEvent): void {\n        const q = event.editor as QuillLike;\n        this.decorateFromForm(q.root);\n        this.translateBubble();\n        this.quill.set(q);\n    }\n\n    protected onTextChange(): void {\n        const q = this.quill();\n        if (!q) return;\n        const html = sanitizeRichHtml(q.getSemanticHTML());\n        if (html === this.lastEmitted) return;\n        this.lastEmitted = html;\n        this.current.set(html);\n        this.onChange(html);\n        this.valueChangeEvent.emit(html);\n    }\n\n    protected handleBlur(): void {\n        this.onTouched();\n    }\n\n    ngDoCheck(): void {\n        // The form control's state is not a signal, so it is read per check;\n        // these are two attributes, written only when they change.\n        const q = this.quill();\n        if (q) this.decorateFromForm(q.root);\n    }\n\n    writeValue(v: string | null): void {\n        this.current.set(v ?? '');\n    }\n\n    registerOnChange(fn: (v: string) => void): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(disabled: boolean): void {\n        this.updateDisabledState(disabled);\n    }\n\n    /** Replaces the content unless it is our own echo or the same HTML. */\n    private apply(q: QuillLike, html: string): void {\n        if (html === this.lastEmitted) return;\n        if (sanitizeRichHtml(html) === sanitizeRichHtml(q.getSemanticHTML())) return;\n        // Our own allowlist first, so the guarantee does not rest on Quill's\n        // clipboard and link sanitiser alone.\n        q.setContents(q.clipboard.convert({ html: sanitizeRichHtml(html) }), 'silent');\n    }\n\n    /** Role, name, state, direction and language: everything that follows signals. */\n    private decorateFromInputs(root: HTMLElement): void {\n        const set = setter(root);\n        set('role', 'textbox');\n        set('aria-multiline', 'true');\n        set('id', this.effectiveId);\n        set('aria-labelledby', this.labelKey() || this.label() ? this.labelId : this.labelledBy());\n        set('aria-label', this.effectiveAriaLabel);\n        set('aria-required', this.required() ? 'true' : null);\n        // A read-only editor stays focusable, so its hint is announced and its\n        // text can be selected; a disabled one leaves the tab order.\n        const readOnlyOnly = this.readonly() && !this.isDisabled();\n        set('aria-readonly', readOnlyOnly ? 'true' : null);\n        set('aria-disabled', this.isDisabled() ? 'true' : null);\n        set('tabindex', readOnlyOnly ? '0' : null);\n        set('dir', this.dir());\n        set('lang', this.lang());\n    }\n\n    /** Validity and what describes the field, which follow the form control. */\n    private decorateFromForm(root: HTMLElement): void {\n        const set = setter(root);\n        set('aria-describedby', this.describedBy(this.showRequired || !!this.serverErrors));\n        set('aria-invalid', this.isInvalid ? 'true' : null);\n    }\n\n    /** Quill's link bubble texts are hardcoded English in its CSS; ours come from attributes. */\n    private translateBubble(): void {\n        const tooltip = this.host.nativeElement.querySelector<HTMLElement>('.ql-tooltip');\n        if (!tooltip) return;\n        const t = (key: string) => this.translateService.instant(key);\n        tooltip.dataset['efEnter'] = t('ef_rich_text_link_enter');\n        tooltip.dataset['efVisit'] = t('ef_rich_text_link_visit');\n        const action = tooltip.querySelector<HTMLElement>('a.ql-action');\n        if (action) {\n            action.dataset['efEdit'] = t('ef_rich_text_link_edit');\n            action.dataset['efSave'] = t('ef_rich_text_link_save');\n        }\n        const remove = tooltip.querySelector<HTMLElement>('a.ql-remove');\n        if (remove) remove.dataset['efRemove'] = t('ef_rich_text_link_remove');\n        tooltip.querySelector('input')?.setAttribute('data-link', 'https://');\n    }\n}\n\n/** Writes an attribute only when it changes; null removes it. */\nfunction setter(el: HTMLElement) {\n    return (name: string, value: string | null) => {\n        if (value === null) el.removeAttribute(name);\n        else if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n    };\n}\n","@if (labelKey() || label()) {\n    <!-- A contenteditable area cannot be the target of label[for], so the\n         editing area points at this wrapper with aria-labelledby. -->\n    <span class=\"ef-rich-text__label\" [id]=\"labelId\">\n        <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [required]=\"required()\" />\n    </span>\n}\n<div class=\"ef-field-control\">\n    <div #box class=\"ef-rich-text__box\" [class.is-invalid]=\"isInvalid\" [class.is-locked]=\"locked()\">\n        <p-editor\n            [bounds]=\"box\"\n            [formats]=\"formats\"\n            [modules]=\"modules\"\n            [readonly]=\"locked()\"\n            [placeholder]=\"effectivePlaceholder\"\n            (onInit)=\"onInit($event)\"\n            (onTextChange)=\"onTextChange()\"\n            (onBlur)=\"handleBlur()\"\n        >\n            <ng-template #header>\n                <span class=\"ql-formats\" role=\"group\" [attr.aria-label]=\"'ef_rich_text_toolbar' | translate\">\n                    <button type=\"button\" class=\"ql-bold\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_bold' | translate\" [title]=\"'ef_rich_text_bold' | translate\"></button>\n                    <button type=\"button\" class=\"ql-italic\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_italic' | translate\" [title]=\"'ef_rich_text_italic' | translate\"></button>\n                    <button type=\"button\" class=\"ql-underline\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_underline' | translate\" [title]=\"'ef_rich_text_underline' | translate\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button type=\"button\" class=\"ql-list\" value=\"bullet\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_bullet_list' | translate\" [title]=\"'ef_rich_text_bullet_list' | translate\"></button>\n                    <button type=\"button\" class=\"ql-list\" value=\"ordered\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_ordered_list' | translate\" [title]=\"'ef_rich_text_ordered_list' | translate\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button type=\"button\" class=\"ql-link\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_link' | translate\" [title]=\"'ef_rich_text_link' | translate\"></button>\n                    <button type=\"button\" class=\"ql-clean\" [disabled]=\"locked()\" [attr.aria-label]=\"'ef_rich_text_clean' | translate\" [title]=\"'ef_rich_text_clean' | translate\"></button>\n                </span>\n            </ng-template>\n        </p-editor>\n    </div>\n    @if (effectiveHint) {\n        <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n    }\n    @if (showRequired || serverErrors) {\n        <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n            @if (showRequired) {\n                <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n            }\n            @if (serverErrors; as errors) {\n                @for (error of errors; track error) {\n                    <small class=\"text-danger block\">{{ error }}</small>\n                }\n            }\n        </div>\n    }\n</div>\n","import { Provider } from '@angular/core';\nimport { EF_RICH_TEXT } from '@elasticias/ui';\nimport { EfRichTextComponent } from './ef-rich-text.component';\n\n/**\n * Turns on `ef-localized-input`'s `rich` mode for the app. Quill still loads\n * lazily, the first time an editor renders.\n *\n * ```ts\n * providers: [provideEfRichText()]\n * ```\n */\nexport function provideEfRichText(): Provider {\n    return { provide: EF_RICH_TEXT, useValue: () => Promise.resolve(EfRichTextComponent) };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}