@muxima-ui/core 1.1.0 → 1.3.0

package/fesm2022/muxima-ui-core-editor.mjs

@@ -0,0 +1,575 @@
+import * as i0 from '@angular/core';
+import { model, input, numberAttribute, booleanAttribute, inject, viewChild, Injector, computed, signal, afterNextRender, DestroyRef, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgControl, Validators } from '@angular/forms';
+import { DomSanitizer } from '@angular/platform-browser';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import { Placeholder, CharacterCount } from '@tiptap/extensions';
+import { MxFormField, mxUniqueId, MX_FORM_FIELD_CONTROL } from '@muxima-ui/core/form-field';
+
+const MX_EDITOR_DEFAULT_TOOLS = [
+    'bold',
+    'italic',
+    'underline',
+    'strike',
+    '|',
+    'heading2',
+    'heading3',
+    '|',
+    'bulletList',
+    'orderedList',
+    'blockquote',
+    '|',
+    'link',
+    '|',
+    'undo',
+    'redo',
+];
+const I = (d) => `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${d}</svg>`;
+const TOOLS = {
+    bold: {
+        label: 'Negrito',
+        shortcut: 'Control+B',
+        icon: I('<path d="M4.5 3h4.2a2.5 2.5 0 0 1 0 5H4.5zM4.5 8h4.8a2.5 2.5 0 0 1 0 5H4.5z"/>'),
+        run: (e) => e.chain().focus().toggleBold().run(),
+        active: (e) => e.isActive('bold'),
+        toggle: true,
+    },
+    italic: {
+        label: 'Itálico',
+        shortcut: 'Control+I',
+        icon: I('<path d="M10 3H6.5M9.5 13H6M9 3l-2 10"/>'),
+        run: (e) => e.chain().focus().toggleItalic().run(),
+        active: (e) => e.isActive('italic'),
+        toggle: true,
+    },
+    underline: {
+        label: 'Sublinhado',
+        shortcut: 'Control+U',
+        icon: I('<path d="M4.5 3v4.5a3.5 3.5 0 0 0 7 0V3M4 13.5h8"/>'),
+        run: (e) => e.chain().focus().toggleUnderline().run(),
+        active: (e) => e.isActive('underline'),
+        toggle: true,
+    },
+    strike: {
+        label: 'Riscado',
+        icon: I('<path d="M3 8h10M10.5 4.5c-.5-1-1.5-1.5-2.7-1.5C6.2 3 5 3.9 5 5.2c0 .9.5 1.5 1.3 1.9M5.5 11.5c.5 1 1.6 1.5 2.9 1.5 1.7 0 2.9-.9 2.9-2.3 0-.5-.1-.9-.4-1.2"/>'),
+        run: (e) => e.chain().focus().toggleStrike().run(),
+        active: (e) => e.isActive('strike'),
+        toggle: true,
+    },
+    code: {
+        label: 'Código',
+        icon: I('<path d="M6 4.5L2.5 8 6 11.5M10 4.5L13.5 8 10 11.5"/>'),
+        run: (e) => e.chain().focus().toggleCode().run(),
+        active: (e) => e.isActive('code'),
+        toggle: true,
+    },
+    heading2: {
+        label: 'Título',
+        icon: I('<path d="M3 3.5v9M9 3.5v9M3 8h6M11.5 7.5c.3-.6.9-1 1.6-1 .9 0 1.4.6 1.4 1.3 0 1.3-3 2.4-3 4.7h3"/>'),
+        run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),
+        active: (e) => e.isActive('heading', { level: 2 }),
+        toggle: true,
+    },
+    heading3: {
+        label: 'Subtítulo',
+        icon: I('<path d="M3 3.5v9M9 3.5v9M3 8h6M11.5 7c.3-.5.8-.7 1.4-.7.8 0 1.3.5 1.3 1.1 0 .7-.6 1.1-1.3 1.1.8 0 1.5.4 1.5 1.2 0 .8-.6 1.3-1.5 1.3-.6 0-1.1-.3-1.4-.8"/>'),
+        run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),
+        active: (e) => e.isActive('heading', { level: 3 }),
+        toggle: true,
+    },
+    paragraph: {
+        label: 'Parágrafo',
+        icon: I('<path d="M10 13V3M12.5 13V3M13.5 3H7.5a2.5 2.5 0 0 0 0 5H10"/>'),
+        run: (e) => e.chain().focus().setParagraph().run(),
+        active: (e) => e.isActive('paragraph'),
+        toggle: true,
+    },
+    bulletList: {
+        label: 'Lista',
+        icon: I('<path d="M6.5 4h7M6.5 8h7M6.5 12h7"/><circle cx="3" cy="4" r=".6" fill="currentColor"/><circle cx="3" cy="8" r=".6" fill="currentColor"/><circle cx="3" cy="12" r=".6" fill="currentColor"/>'),
+        run: (e) => e.chain().focus().toggleBulletList().run(),
+        active: (e) => e.isActive('bulletList'),
+        toggle: true,
+    },
+    orderedList: {
+        label: 'Lista numerada',
+        icon: I('<path d="M6.5 4h7M6.5 8h7M6.5 12h7M2.5 3l1-.5V6M2.5 9.5c.2-.5.6-.7 1-.7.5 0 .9.3.9.8 0 .8-1.9 1.3-1.9 2.4h1.9"/>'),
+        run: (e) => e.chain().focus().toggleOrderedList().run(),
+        active: (e) => e.isActive('orderedList'),
+        toggle: true,
+    },
+    blockquote: {
+        label: 'Citação',
+        icon: I('<path d="M3 4.5h4v4H4.5L3 11.5zM9 4.5h4v4h-2.5L9 11.5z"/>'),
+        run: (e) => e.chain().focus().toggleBlockquote().run(),
+        active: (e) => e.isActive('blockquote'),
+        toggle: true,
+    },
+    link: {
+        label: 'Ligação',
+        shortcut: 'Control+K',
+        icon: I('<path d="M6.5 9.5l3-3M7 4.5l1-1a2.8 2.8 0 0 1 4 4l-1 1M9 11.5l-1 1a2.8 2.8 0 0 1-4-4l1-1"/>'),
+        run: () => { },
+        active: (e) => e.isActive('link'),
+        toggle: true,
+    },
+    undo: {
+        label: 'Anular',
+        shortcut: 'Control+Z',
+        icon: I('<path d="M5.5 3.5L2.5 6.5l3 3M2.5 6.5H10a3.5 3.5 0 0 1 0 7H7"/>'),
+        run: (e) => e.chain().focus().undo().run(),
+        enabled: (e) => e.can().undo(),
+    },
+    redo: {
+        label: 'Refazer',
+        shortcut: 'Control+Shift+Z',
+        icon: I('<path d="M10.5 3.5l3 3-3 3M13.5 6.5H6a3.5 3.5 0 0 0 0 7h3"/>'),
+        run: (e) => e.chain().focus().redo().run(),
+        enabled: (e) => e.can().redo(),
+    },
+};
+/**
+ * Editor de texto com formatação, sobre o Tiptap (ProseMirror). O Tiptap é uma dependência
+ * opcional: instala-o só se usares este ponto de entrada.
+ *
+ * ```bash
+ * npm install @tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/extensions
+ * ```
+ * ```html
+ * <mx-form-field>
+ *   <label mxLabel>Notas da factura</label>
+ *   <mx-editor formControlName="notas" placeholder="Escreve aqui..." [maxLength]="2000" />
+ * </mx-form-field>
+ * ```
+ *
+ * O valor é HTML (string; vazio quando não há texto). A barra é um role=toolbar:
+ * setas entre botões, Alt + F10 vai do texto para a barra e Esc volta ao texto.
+ */
+class MxEditor {
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    tools = TOOLS;
+    toolbar = input(MX_EDITOR_DEFAULT_TOOLS, ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
+    /** Máximo de caracteres; mostra a contagem. */
+    maxLength = input(null, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: (v) => (v == null || v === '' ? null : numberAttribute(v)) });
+    minHeight = input('140px', ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    maxHeight = input('420px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    toolbarLabel = input('Formatação', ...(ngDevMode ? [{ debugName: "toolbarLabel" }] : /* istanbul ignore next */ []));
+    linkLabel = input('Endereço da ligação', ...(ngDevMode ? [{ debugName: "linkLabel" }] : /* istanbul ignore next */ []));
+    field = inject(MxFormField, { optional: true });
+    ngControl = inject(NgControl, { self: true, optional: true });
+    content = viewChild.required('content');
+    toolbarEl = viewChild('toolbar', ...(ngDevMode ? [{ debugName: "toolbarEl" }] : /* istanbul ignore next */ []));
+    linkInput = viewChild('linkInput', ...(ngDevMode ? [{ debugName: "linkInput" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
+    generatedId = mxUniqueId('mx-editor');
+    controlId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    toolList = computed(() => this.toolbar(), ...(ngDevMode ? [{ debugName: "toolList" }] : /* istanbul ignore next */ []));
+    focusIndex = signal(0, ...(ngDevMode ? [{ debugName: "focusIndex" }] : /* istanbul ignore next */ []));
+    /** Muda a cada transacção, para os botões reflectirem o estado. */
+    tick = signal(0, ...(ngDevMode ? [{ debugName: "tick" }] : /* istanbul ignore next */ []));
+    count = signal(0, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    linkOpen = signal(false, ...(ngDevMode ? [{ debugName: "linkOpen" }] : /* istanbul ignore next */ []));
+    linkUrl = signal('', ...(ngDevMode ? [{ debugName: "linkUrl" }] : /* istanbul ignore next */ []));
+    linkActive = signal(false, ...(ngDevMode ? [{ debugName: "linkActive" }] : /* istanbul ignore next */ []));
+    /** O editor do Tiptap, para comandos próprios (editor()?.chain()...). */
+    editor = signal(null, ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+    writing = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        if (this.ngControl)
+            this.ngControl.valueAccessor = this;
+        afterNextRender(() => this.create());
+        inject(DestroyRef).onDestroy(() => this.editor()?.destroy());
+        effect(() => {
+            const e = this.editor();
+            const editable = !this.isDisabled() && !this.readonly();
+            if (e && e.isEditable !== editable)
+                e.setEditable(editable);
+        });
+        // aria do conteúdo acompanha o form field
+        effect(() => {
+            const e = this.editor();
+            this.tick();
+            if (!e)
+                return;
+            const el = e.view.dom;
+            const set = (k, v) => v == null ? el.removeAttribute(k) : el.setAttribute(k, v);
+            set('aria-labelledby', this.field?.labelId() ?? null);
+            set('aria-label', this.field?.labelId() ? null : (this.ariaLabel() ?? null));
+            set('aria-describedby', this.field?.describedBy() ?? null);
+            set('aria-invalid', this.errorState() ? 'true' : null);
+            set('aria-required', this.isRequired() ? 'true' : null);
+            set('aria-readonly', this.readonly() || this.isDisabled() ? 'true' : null);
+        });
+    }
+    create() {
+        const editor = new Editor({
+            element: this.content().nativeElement,
+            content: untracked(() => this.value()) || '',
+            editable: !this.isDisabled() && !this.readonly(),
+            extensions: [
+                StarterKit.configure({
+                    heading: { levels: [2, 3, 4] },
+                    link: { openOnClick: false, autolink: true, defaultProtocol: 'https' },
+                }),
+                Placeholder.configure({ placeholder: () => this.placeholder() }),
+                CharacterCount.configure({ limit: null }),
+            ],
+            editorProps: {
+                attributes: {
+                    id: this.controlId(),
+                    role: 'textbox',
+                    'aria-multiline': 'true',
+                    class: 'mx-editor-prose',
+                },
+                handleKeyDown: (_view, event) => {
+                    if (event.altKey && event.key === 'F10') {
+                        event.preventDefault();
+                        this.focusToolbar();
+                        return true;
+                    }
+                    if ((event.ctrlKey || event.metaKey) &&
+                        event.key.toLowerCase() === 'k' &&
+                        this.toolList().includes('link')) {
+                        event.preventDefault();
+                        // dentro do texto, Ctrl + K é a ligação (não o atalho global da aplicação)
+                        event.stopPropagation();
+                        this.openLink();
+                        return true;
+                    }
+                    return false;
+                },
+            },
+            onTransaction: () => this.tick.update((t) => t + 1),
+            onUpdate: ({ editor: e }) => {
+                this.count.set(e.storage.characterCount?.characters?.() ?? e.getText().length);
+                if (this.writing)
+                    return;
+                const html = e.isEmpty ? '' : e.getHTML();
+                this.value.set(html);
+                this.onChange(html);
+            },
+            onBlur: () => this.onTouched(),
+        });
+        this.count.set(editor.storage.characterCount?.characters?.() ?? editor.getText().length);
+        this.editor.set(editor);
+    }
+    sanitizer = inject(DomSanitizer);
+    icons = new Map();
+    icon(t) {
+        // os desenhos são constantes deste ficheiro, nunca texto de fora
+        if (!this.icons.has(t))
+            this.icons.set(t, this.sanitizer.bypassSecurityTrustHtml(TOOLS[t].icon));
+        return this.icons.get(t);
+    }
+    isActive(t) {
+        this.tick();
+        const e = this.editor();
+        return !!e && !!TOOLS[t].active?.(e);
+    }
+    isEnabled(t) {
+        this.tick();
+        const e = this.editor();
+        return !!e && (TOOLS[t].enabled ? TOOLS[t].enabled(e) : true);
+    }
+    runTool(t, index) {
+        this.focusIndex.set(index);
+        const e = this.editor();
+        if (!e)
+            return;
+        if (t === 'link') {
+            this.openLink();
+            return;
+        }
+        TOOLS[t].run(e);
+    }
+    // ---- ligações ----
+    openLink() {
+        const e = this.editor();
+        if (!e)
+            return;
+        this.linkActive.set(e.isActive('link'));
+        this.linkUrl.set(e.getAttributes('link')['href'] ?? '');
+        this.linkOpen.set(true);
+        afterNextRender(() => this.linkInput()?.nativeElement.focus(), { injector: this.injector });
+    }
+    applyLink() {
+        const e = this.editor();
+        const url = this.linkUrl().trim();
+        if (!e)
+            return;
+        if (!url)
+            this.removeLink();
+        else {
+            const href = /^(https?:|mailto:|tel:|\/|#)/i.test(url) ? url : `https://${url}`;
+            e.chain().focus().extendMarkRange('link').setLink({ href }).run();
+        }
+        this.linkOpen.set(false);
+    }
+    removeLink() {
+        this.editor()?.chain().focus().extendMarkRange('link').unsetLink().run();
+        this.linkOpen.set(false);
+    }
+    closeLink() {
+        this.linkOpen.set(false);
+        this.editor()?.commands.focus();
+    }
+    // ---- barra (roving tabindex) ----
+    buttons() {
+        return Array.from(this.toolbarEl()?.nativeElement.querySelectorAll('.mx-editor-tool:not(:disabled)') ?? []);
+    }
+    focusToolbar() {
+        const b = this.buttons();
+        const current = this.toolbarEl()?.nativeElement.querySelector('.mx-editor-tool[tabindex="0"]:not(:disabled)');
+        (current ?? b[0])?.focus();
+    }
+    onToolbarKey(event) {
+        const b = this.buttons();
+        const i = b.indexOf(document.activeElement);
+        let next = -1;
+        if (event.key === 'ArrowRight')
+            next = (i + 1) % b.length;
+        else if (event.key === 'ArrowLeft')
+            next = (i - 1 + b.length) % b.length;
+        else if (event.key === 'Home')
+            next = 0;
+        else if (event.key === 'End')
+            next = b.length - 1;
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.editor()?.commands.focus();
+            return;
+        }
+        if (next < 0 || !b[next])
+            return;
+        event.preventDefault();
+        const all = Array.from(this.toolbarEl().nativeElement.querySelectorAll('.mx-editor-tool, .mx-editor-sep'));
+        this.focusIndex.set(all.indexOf(b[next]));
+        b[next].focus();
+    }
+    /** Põe o foco no texto. */
+    focus() {
+        this.editor()?.commands.focus();
+    }
+    // ---- MxFormFieldControl ----
+    errorState() {
+        if (this.invalid())
+            return true;
+        const max = this.maxLength();
+        if (max && this.count() > max)
+            return true;
+        const c = this.ngControl;
+        return !!c && !!c.invalid && !!(c.touched || c.dirty);
+    }
+    isRequired() {
+        return this.required() || !!this.ngControl?.control?.hasValidator?.(Validators.required);
+    }
+    // ---- ControlValueAccessor ----
+    writeValue(value) {
+        const html = value ?? '';
+        this.value.set(html);
+        const e = this.editor();
+        if (e && (e.isEmpty ? '' : e.getHTML()) !== html) {
+            this.writing = true;
+            e.commands.setContent(html, { emitUpdate: false });
+            this.count.set(e.storage.characterCount?.characters?.() ?? e.getText().length);
+            this.writing = false;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: MxEditor, isStandalone: true, selector: "mx-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, toolbarLabel: { classPropertyName: "toolbarLabel", publicName: "toolbarLabel", isSignal: true, isRequired: false, transformFunction: null }, linkLabel: { classPropertyName: "linkLabel", publicName: "linkLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-invalid": "errorState() ? \"\" : null", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.data-readonly": "readonly() ? \"\" : null", "attr.aria-label": "null" }, classAttribute: "mx-editor" }, providers: [{ provide: MX_FORM_FIELD_CONTROL, useExisting: MxEditor }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "toolbarEl", first: true, predicate: ["toolbar"], descendants: true, isSignal: true }, { propertyName: "linkInput", first: true, predicate: ["linkInput"], descendants: true, isSignal: true }], exportAs: ["mxEditor"], ngImport: i0, template: `
+    @if (!readonly()) {
+      <div
+        class="mx-editor-toolbar"
+        role="toolbar"
+        #toolbar
+        [attr.aria-label]="toolbarLabel()"
+        [attr.aria-controls]="controlId()"
+        (keydown)="onToolbarKey($event)"
+      >
+        @for (t of toolList(); track $index) {
+          @if (t === '|') {
+            <span class="mx-editor-sep" role="separator" aria-orientation="vertical"></span>
+          } @else {
+            <button
+              type="button"
+              class="mx-editor-tool"
+              [tabIndex]="$index === focusIndex() ? 0 : -1"
+              [attr.data-tool]="t"
+              [attr.aria-label]="tools[t].label"
+              [attr.aria-keyshortcuts]="tools[t].shortcut ?? null"
+              [attr.aria-pressed]="tools[t].toggle ? isActive(t) : null"
+              [disabled]="isDisabled() || !isEnabled(t)"
+              (mousedown)="$event.preventDefault()"
+              (click)="runTool(t, $index)"
+            >
+              <span class="mx-editor-icon" [innerHTML]="icon(t)"></span>
+            </button>
+          }
+        }
+      </div>
+      @if (linkOpen()) {
+        <div class="mx-editor-linkbar" role="group" [attr.aria-label]="linkLabel()">
+          <input
+            #linkInput
+            class="mx-input"
+            data-size="sm"
+            type="url"
+            placeholder="https://"
+            [attr.aria-label]="linkLabel()"
+            [value]="linkUrl()"
+            (input)="linkUrl.set($any($event.target).value)"
+            (keydown.enter)="$event.preventDefault(); applyLink()"
+            (keydown.escape)="$event.preventDefault(); closeLink()"
+          />
+          <button type="button" class="mx-editor-text-button" (click)="applyLink()">Aplicar</button>
+          @if (linkActive()) {
+            <button type="button" class="mx-editor-text-button" (click)="removeLink()">
+              Remover
+            </button>
+          }
+          <button type="button" class="mx-editor-text-button" (click)="closeLink()">
+            Cancelar
+          </button>
+        </div>
+      }
+    }
+    <div
+      class="mx-editor-content"
+      #content
+      [style.min-height]="minHeight()"
+      [style.max-height]="maxHeight()"
+    ></div>
+    @if (maxLength()) {
+      <div class="mx-editor-footer">
+        <span
+          class="mx-editor-count"
+          [attr.data-over]="count() > maxLength()! ? '' : null"
+          [attr.aria-live]="count() >= maxLength()! * 0.9 ? 'polite' : null"
+        >
+          {{ count() }} / {{ maxLength() }}<span class="mx-visually-hidden"> caracteres</span>
+        </span>
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxEditor, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mx-editor',
+                    exportAs: 'mxEditor',
+                    providers: [{ provide: MX_FORM_FIELD_CONTROL, useExisting: MxEditor }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'mx-editor',
+                        '[attr.data-invalid]': 'errorState() ? "" : null',
+                        '[attr.data-disabled]': 'isDisabled() ? "" : null',
+                        '[attr.data-readonly]': 'readonly() ? "" : null',
+                        '[attr.aria-label]': 'null',
+                    },
+                    template: `
+    @if (!readonly()) {
+      <div
+        class="mx-editor-toolbar"
+        role="toolbar"
+        #toolbar
+        [attr.aria-label]="toolbarLabel()"
+        [attr.aria-controls]="controlId()"
+        (keydown)="onToolbarKey($event)"
+      >
+        @for (t of toolList(); track $index) {
+          @if (t === '|') {
+            <span class="mx-editor-sep" role="separator" aria-orientation="vertical"></span>
+          } @else {
+            <button
+              type="button"
+              class="mx-editor-tool"
+              [tabIndex]="$index === focusIndex() ? 0 : -1"
+              [attr.data-tool]="t"
+              [attr.aria-label]="tools[t].label"
+              [attr.aria-keyshortcuts]="tools[t].shortcut ?? null"
+              [attr.aria-pressed]="tools[t].toggle ? isActive(t) : null"
+              [disabled]="isDisabled() || !isEnabled(t)"
+              (mousedown)="$event.preventDefault()"
+              (click)="runTool(t, $index)"
+            >
+              <span class="mx-editor-icon" [innerHTML]="icon(t)"></span>
+            </button>
+          }
+        }
+      </div>
+      @if (linkOpen()) {
+        <div class="mx-editor-linkbar" role="group" [attr.aria-label]="linkLabel()">
+          <input
+            #linkInput
+            class="mx-input"
+            data-size="sm"
+            type="url"
+            placeholder="https://"
+            [attr.aria-label]="linkLabel()"
+            [value]="linkUrl()"
+            (input)="linkUrl.set($any($event.target).value)"
+            (keydown.enter)="$event.preventDefault(); applyLink()"
+            (keydown.escape)="$event.preventDefault(); closeLink()"
+          />
+          <button type="button" class="mx-editor-text-button" (click)="applyLink()">Aplicar</button>
+          @if (linkActive()) {
+            <button type="button" class="mx-editor-text-button" (click)="removeLink()">
+              Remover
+            </button>
+          }
+          <button type="button" class="mx-editor-text-button" (click)="closeLink()">
+            Cancelar
+          </button>
+        </div>
+      }
+    }
+    <div
+      class="mx-editor-content"
+      #content
+      [style.min-height]="minHeight()"
+      [style.max-height]="maxHeight()"
+    ></div>
+    @if (maxLength()) {
+      <div class="mx-editor-footer">
+        <span
+          class="mx-editor-count"
+          [attr.data-over]="count() > maxLength()! ? '' : null"
+          [attr.aria-live]="count() >= maxLength()! * 0.9 ? 'polite' : null"
+        >
+          {{ count() }} / {{ maxLength() }}<span class="mx-visually-hidden"> caracteres</span>
+        </span>
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], toolbarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarLabel", required: false }] }], linkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkLabel", required: false }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], toolbarEl: [{ type: i0.ViewChild, args: ['toolbar', { isSignal: true }] }], linkInput: [{ type: i0.ViewChild, args: ['linkInput', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MX_EDITOR_DEFAULT_TOOLS, MxEditor };
+//# sourceMappingURL=muxima-ui-core-editor.mjs.map