@muxima-ui/core 1.2.0 → 1.4.0

package/styles/components/kanban.css

@@ -0,0 +1,115 @@
+/* ---------- Kanban ---------- */
+
+.mx-kanban {
+  display: block;
+  width: 100%;
+  font-family: var(--mx-font-sans);
+}
+.mx-kanban-board {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding-bottom: 6px;
+  overflow-x: auto;
+}
+.mx-kanban-column {
+  display: flex;
+  flex: 0 0 272px;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+  max-height: 100%;
+  padding: 10px;
+  border-radius: var(--mx-radius-surface);
+  background: var(--mx-subtle);
+}
+.mx-kanban-column-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 2px 4px;
+}
+.mx-kanban-column-title {
+  margin: 0;
+  color: var(--mx-ink);
+  font-size: var(--mx-text-sm);
+  font-weight: 600;
+}
+.mx-kanban-count {
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: var(--mx-surface);
+  color: var(--mx-muted);
+  font-size: var(--mx-text-xs);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.mx-kanban-column[data-full] .mx-kanban-count {
+  background: color-mix(in oklab, var(--mx-warning) 14%, var(--mx-surface));
+  color: var(--mx-warning);
+}
+.mx-kanban-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 56px;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+.mx-kanban-card {
+  box-sizing: border-box;
+  padding: 10px 12px;
+  border: var(--mx-border);
+  border-radius: var(--mx-radius);
+  background: var(--mx-surface);
+  color: var(--mx-ink);
+  font-size: var(--mx-text-sm);
+  line-height: 1.4;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+  cursor: grab;
+  transition: box-shadow var(--mx-duration) var(--mx-ease), transform var(--mx-duration) var(--mx-ease);
+}
+.mx-kanban-card:hover {
+  border-color: var(--mx-stone-strong);
+}
+.mx-kanban-card:focus-visible {
+  outline: var(--mx-focus-width) solid var(--mx-accent);
+  outline-offset: var(--mx-focus-offset);
+}
+.mx-kanban-card[data-grabbed] {
+  border-color: var(--mx-accent);
+  box-shadow: var(--mx-shadow-overlay);
+  transform: rotate(-1.5deg);
+}
+.mx-kanban-card.cdk-drag-preview {
+  box-shadow: var(--mx-shadow-overlay);
+  cursor: grabbing;
+}
+.mx-kanban-card.cdk-drag-animating,
+.mx-kanban-list.cdk-drop-list-dragging .mx-kanban-card:not(.cdk-drag-placeholder) {
+  transition: transform 200ms var(--mx-ease);
+}
+.mx-kanban-placeholder {
+  min-height: 44px;
+  border: 1.5px dashed var(--mx-accent);
+  border-radius: var(--mx-radius);
+  background: var(--mx-accent-soft);
+}
+.mx-kanban-empty {
+  padding: 16px 8px;
+  border: 1.5px dashed var(--mx-stone-strong);
+  border-radius: var(--mx-radius);
+  color: var(--mx-muted);
+  font-size: var(--mx-text-sm);
+  text-align: center;
+}
+.mx-kanban-list.cdk-drop-list-dragging .mx-kanban-empty,
+.mx-kanban-list:has(.cdk-drag-placeholder) .mx-kanban-empty {
+  display: none;
+}
+.mx-kanban-column-foot {
+  padding-top: 2px;
+}

package/styles/components/tour.css

@@ -0,0 +1,155 @@
+/* ---------- Tour (visita guiada) ---------- */
+
+.mx-tour-pane {
+  pointer-events: auto;
+}
+.mx-tour-layer {
+  position: fixed;
+  inset: 0;
+  display: block;
+  font-family: var(--mx-font-sans);
+}
+.mx-tour-dim {
+  position: fixed;
+  inset: 0;
+  background: var(--mx-backdrop);
+  animation: mx-fade-in var(--mx-duration) var(--mx-ease);
+}
+/* o recorte: uma sombra enorme escurece tudo à volta do elemento */
+.mx-tour-spotlight {
+  position: fixed;
+  border-radius: var(--mx-radius);
+  box-shadow:
+    0 0 0 2px var(--mx-accent),
+    0 0 0 200vmax var(--mx-backdrop);
+  pointer-events: none;
+  transition:
+    top 200ms var(--mx-ease),
+    left 200ms var(--mx-ease),
+    width 200ms var(--mx-ease),
+    height 200ms var(--mx-ease);
+}
+.mx-tour-card {
+  position: fixed;
+  box-sizing: border-box;
+  width: min(340px, calc(100vw - 24px));
+  padding: 16px 16px 14px;
+  border: var(--mx-border);
+  border-radius: var(--mx-radius-surface);
+  background: var(--mx-surface);
+  box-shadow: var(--mx-shadow-overlay);
+  color: var(--mx-ink);
+  font-size: var(--mx-text-md);
+  line-height: 1.5;
+  outline: none;
+  animation: mx-fade-in var(--mx-duration) var(--mx-ease);
+}
+.mx-tour-card:focus,
+.mx-tour-card:focus-visible {
+  outline: none;
+}
+.mx-tour-card[data-placement='center'] {
+  top: 50%;
+  left: 50%;
+  width: min(400px, calc(100vw - 24px));
+  transform: translate(-50%, -50%);
+}
+.mx-tour-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 24px;
+}
+.mx-tour-progress {
+  margin: 0;
+  color: var(--mx-muted);
+  font-size: var(--mx-text-xs);
+  font-variant-numeric: tabular-nums;
+}
+.mx-tour-close {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  margin: -4px -6px -4px 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--mx-radius);
+  background: transparent;
+  color: var(--mx-muted);
+  cursor: pointer;
+}
+.mx-tour-close:hover {
+  background: var(--mx-subtle);
+  color: var(--mx-ink);
+}
+.mx-tour-close svg {
+  width: 16px;
+  height: 16px;
+}
+.mx-tour-title {
+  margin: 6px 0 4px;
+  font-size: var(--mx-text-lg);
+  font-weight: 600;
+  line-height: 1.35;
+}
+.mx-tour-body {
+  color: var(--mx-muted);
+}
+.mx-tour-body > :first-child {
+  margin-top: 0;
+}
+.mx-tour-body > :last-child {
+  margin-bottom: 0;
+}
+.mx-tour-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 14px;
+}
+.mx-tour-dots {
+  display: inline-flex;
+  gap: 5px;
+}
+.mx-tour-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--mx-stone);
+}
+.mx-tour-dot[data-active] {
+  width: 16px;
+  border-radius: 3px;
+  background: var(--mx-accent);
+}
+.mx-tour-actions {
+  display: inline-flex;
+  gap: 6px;
+  margin-left: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mx-tour-spotlight {
+    transition: none;
+  }
+  .mx-tour-card,
+  .mx-tour-dim {
+    animation: none;
+  }
+}
+/* sem sombras em alto contraste: o destaque passa a ser um contorno */
+@media (forced-colors: active) {
+  .mx-tour-spotlight {
+    outline: 3px solid Highlight;
+  }
+  .mx-tour-card {
+    border: 1px solid CanvasText;
+  }
+  .mx-tour-dot[data-active] {
+    background: Highlight;
+  }
+}

package/styles/muxima.css

@@ -25,6 +25,8 @@
 @import './components/tabs.css';
 @import './components/sidebar.css';
 @import './components/table.css';
+@import './components/data-grid.css';
+@import './components/kanban.css';
 @import './components/badge.css';
 @import './components/chips.css';
 @import './components/card.css';
@@ -50,8 +52,11 @@
 @import './components/date-picker.css';
 @import './components/time-picker.css';
 @import './components/color-picker.css';
+@import './components/editor.css';
+@import './components/tour.css';
 @import './components/otp.css';
 @import './components/file-upload.css';
+@import './components/image-cropper.css';
 @import './components/stepper.css';
 @import './components/command.css';
 @import './motion.css';

package/types/muxima-ui-core-data-grid.d.ts

@@ -0,0 +1,175 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+
+/** Coluna da grelha. */
+interface MxGridColumn<T = any> {
+    key: string;
+    header: string;
+    /** Valor para ordenar e filtrar; por omissão row[key]. */
+    value?: (row: T) => unknown;
+    /** Texto mostrado; por omissão String(valor). */
+    format?: (value: any, row: T) => string;
+    /** Largura inicial em px. */
+    width?: number;
+    minWidth?: number;
+    sortable?: boolean;
+    /** Filtro no cabeçalho. `number` aceita 100, >100, <100 e 10-20. */
+    filter?: 'text' | 'number' | 'select' | false;
+    /** Opções do filtro `select`; por omissão, os valores que existem nos dados. */
+    filterOptions?: string[];
+    align?: 'start' | 'center' | 'end';
+    /** Fixa a coluna à esquerda (`start`) ou à direita (`end`) durante o scroll horizontal. */
+    pinned?: 'start' | 'end';
+    resizable?: boolean;
+    hidden?: boolean;
+    /** false: não aparece no menu de colunas. */
+    hideable?: boolean;
+}
+interface MxGridSort {
+    key: string | null;
+    direction: 'asc' | 'desc';
+}
+/**
+ * Modelo de uma célula: `<ng-template mxGridCell="estado" let-row let-value="value">`.
+ */
+declare class MxGridCell {
+    readonly key: _angular_core.InputSignal<string>;
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxGridCell, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MxGridCell, "ng-template[mxGridCell]", never, { "key": { "alias": "mxGridCell"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Conteúdo da barra por cima da grelha (pesquisa, botões). */
+declare class MxGridToolbar {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxGridToolbar, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MxGridToolbar, "[mxGridToolbar]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Grelha de dados (padrão WAI-ARIA Grid): ordenação, filtros por coluna, pesquisa,
+ * selecção, colunas redimensionáveis, fixas e escondíveis, e scroll virtual para
+ * milhares de linhas. Navega-se célula a célula com as setas.
+ *
+ * ```html
+ * <mx-data-grid [data]="facturas" [columns]="colunas" rowKey="numero"
+ *   selection="multiple" [(selected)]="escolhidas" height="480px" aria-label="Facturas">
+ *   <ng-template mxGridCell="estado" let-row>
+ *     <span mxBadge [variant]="cor(row.estado)">{{ row.estado }}</span>
+ *   </ng-template>
+ * </mx-data-grid>
+ * ```
+ *
+ * Com `manual`, a grelha não ordena nem filtra: emite [(sort)] e [(filters)] para o
+ * servidor e mostra `data` tal como chega (indica o total em `totalRows`).
+ */
+declare class MxDataGrid<T = any> {
+    readonly data: _angular_core.InputSignal<readonly T[]>;
+    readonly columns: _angular_core.InputSignal<readonly MxGridColumn<T>[]>;
+    /** Chave única de cada linha: nome do campo ou função. */
+    readonly rowKey: _angular_core.InputSignal<string | ((row: T) => unknown)>;
+    readonly selection: _angular_core.InputSignal<"none" | "single" | "multiple">;
+    /** Chaves das linhas seleccionadas. */
+    readonly selected: _angular_core.ModelSignal<readonly unknown[]>;
+    readonly sort: _angular_core.ModelSignal<MxGridSort>;
+    /** Texto de cada filtro, por chave de coluna. */
+    readonly filters: _angular_core.ModelSignal<Record<string, string>>;
+    /** Pesquisa em todas as colunas visíveis. */
+    readonly query: _angular_core.InputSignal<string>;
+    /** Não ordena nem filtra: só emite sort e filters (dados do servidor). */
+    readonly manual: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Total de linhas no servidor (modo manual), para aria-rowcount e o estado. */
+    readonly totalRows: _angular_core.InputSignal<number | null>;
+    readonly height: _angular_core.InputSignal<string | null>;
+    readonly maxHeight: _angular_core.InputSignal<string | null>;
+    readonly rowHeight: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Scroll virtual: `auto` liga a partir de 100 linhas (precisa de height). */
+    readonly virtual: _angular_core.InputSignal<boolean | "auto">;
+    readonly density: _angular_core.InputSignal<"comfortable" | "compact">;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly columnMenu: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Coluna cujo texto identifica a linha nos nomes ("Seleccionar FT 2026/0201"). */
+    readonly labelKey: _angular_core.InputSignal<string | null>;
+    readonly emptyText: _angular_core.InputSignal<string>;
+    readonly loadingText: _angular_core.InputSignal<string>;
+    readonly columnsText: _angular_core.InputSignal<string>;
+    readonly filterText: _angular_core.InputSignal<string>;
+    readonly allText: _angular_core.InputSignal<string>;
+    readonly selectAllText: _angular_core.InputSignal<string>;
+    readonly selectRowText: _angular_core.InputSignal<string>;
+    readonly selectText: _angular_core.InputSignal<string>;
+    readonly resizeHint: _angular_core.InputSignal<string>;
+    /** Enter ou duplo clique numa linha. */
+    readonly rowActivate: _angular_core.OutputEmitterRef<T>;
+    private readonly cells;
+    private readonly toolbarSlot;
+    private readonly scroller;
+    private readonly host;
+    private readonly injector;
+    private readonly announcer;
+    protected readonly checkWidth = 44;
+    protected readonly resizeHintId: string;
+    protected readonly radioName: string;
+    private readonly widths;
+    private readonly hiddenKeys;
+    private readonly scrollTop;
+    private readonly viewport;
+    /** Célula activa: linha e coluna na grelha (0 = cabeçalho). */
+    private readonly active;
+    protected readonly showToolbar: _angular_core.Signal<boolean>;
+    protected readonly offset: _angular_core.Signal<1 | 0>;
+    protected readonly hasFilters: _angular_core.Signal<boolean>;
+    protected readonly headerRows: _angular_core.Signal<number>;
+    protected readonly hideableColumns: _angular_core.Signal<MxGridColumn<T>[]>;
+    protected readonly visibleColumns: _angular_core.Signal<MxGridColumn<T>[]>;
+    protected readonly colCount: _angular_core.Signal<number>;
+    protected readonly tableWidth: _angular_core.Signal<number>;
+    /** Linhas depois de filtros, pesquisa e ordenação. */
+    readonly rows: _angular_core.Signal<readonly T[]>;
+    protected readonly isVirtual: _angular_core.Signal<boolean>;
+    protected readonly range: _angular_core.Signal<{
+        start: number;
+        end: number;
+    }>;
+    protected readonly rendered: _angular_core.Signal<T[]>;
+    protected readonly rowCount: _angular_core.Signal<number>;
+    private readonly selectedSet;
+    protected readonly allSelected: _angular_core.Signal<boolean>;
+    protected readonly someSelected: _angular_core.Signal<boolean>;
+    protected readonly statusText: _angular_core.Signal<string>;
+    constructor();
+    keyOf(row: T): unknown;
+    valueOf(c: MxGridColumn<T>, row: T): unknown;
+    protected text(c: MxGridColumn<T>, row: T): string;
+    protected rowLabel(row: T): string;
+    protected cellTemplate(key: string): TemplateRef<unknown> | null;
+    protected widthOf(c: MxGridColumn<T>): number;
+    protected pinOffset(c: MxGridColumn<T>): number;
+    protected pinOffsetEnd(c: MxGridColumn<T>): number;
+    protected optionsOf(c: MxGridColumn<T>): string[];
+    protected isHidden(c: MxGridColumn<T>): boolean;
+    protected ariaSort(c: MxGridColumn<T>): string | null;
+    isSelected(row: T): boolean;
+    toggleSort(c: MxGridColumn<T>): void;
+    setFilter(key: string, value: string): void;
+    toggleColumn(key: string): void;
+    toggleRow(row: T): void;
+    toggleAll(): void;
+    setWidth(key: string, width: number): void;
+    protected resetWidth(c: MxGridColumn<T>): void;
+    protected startResize(event: PointerEvent, c: MxGridColumn<T>): void;
+    private measure;
+    protected onScroll(): void;
+    private scrollTo;
+    private widgetIn;
+    private parseCell;
+    protected onFocusIn(event: FocusEvent): void;
+    private lastRow;
+    /** Move a célula activa e põe-lhe o foco (fazendo scroll se for preciso). */
+    focusCell(row: number, col: number): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxDataGrid<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MxDataGrid<any>, "mx-data-grid", ["mxDataGrid"], { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "query": { "alias": "query"; "required": false; "isSignal": true; }; "manual": { "alias": "manual"; "required": false; "isSignal": true; }; "totalRows": { "alias": "totalRows"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "columnMenu": { "alias": "columnMenu"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "columnsText": { "alias": "columnsText"; "required": false; "isSignal": true; }; "filterText": { "alias": "filterText"; "required": false; "isSignal": true; }; "allText": { "alias": "allText"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "selectRowText": { "alias": "selectRowText"; "required": false; "isSignal": true; }; "selectText": { "alias": "selectText"; "required": false; "isSignal": true; }; "resizeHint": { "alias": "resizeHint"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "sort": "sortChange"; "filters": "filtersChange"; "rowActivate": "rowActivate"; }, ["cells", "toolbarSlot"], ["[mxGridToolbar]", "[mxGridFooter]"], true, never>;
+}
+declare const MX_DATA_GRID: readonly [typeof MxDataGrid, typeof MxGridCell, typeof MxGridToolbar];
+
+export { MX_DATA_GRID, MxDataGrid, MxGridCell, MxGridToolbar };
+export type { MxGridColumn, MxGridSort };

package/types/muxima-ui-core-editor.d.ts

@@ -0,0 +1,104 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { SafeHtml } from '@angular/platform-browser';
+import { Editor } from '@tiptap/core';
+import { MxFormFieldControl, MxFormField } from '@muxima-ui/core/form-field';
+
+/** Botões possíveis da barra de formatação. `|` desenha um separador. */
+type MxEditorTool = 'bold' | 'italic' | 'underline' | 'strike' | 'code' | 'heading2' | 'heading3' | 'paragraph' | 'bulletList' | 'orderedList' | 'blockquote' | 'link' | 'undo' | 'redo' | '|';
+declare const MX_EDITOR_DEFAULT_TOOLS: MxEditorTool[];
+interface ToolDef {
+    label: string;
+    shortcut?: string;
+    icon: string;
+    run: (e: Editor) => void;
+    active?: (e: Editor) => boolean;
+    enabled?: (e: Editor) => boolean;
+    toggle?: boolean;
+}
+/**
+ * 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.
+ */
+declare class MxEditor implements ControlValueAccessor, MxFormFieldControl {
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly tools: Record<"bold" | "italic" | "underline" | "strike" | "code" | "heading2" | "heading3" | "paragraph" | "bulletList" | "orderedList" | "blockquote" | "link" | "undo" | "redo", ToolDef>;
+    readonly toolbar: _angular_core.InputSignal<MxEditorTool[]>;
+    /** Máximo de caracteres; mostra a contagem. */
+    readonly maxLength: _angular_core.InputSignalWithTransform<number | null, unknown>;
+    readonly minHeight: _angular_core.InputSignal<string>;
+    readonly maxHeight: _angular_core.InputSignal<string | null>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly id: _angular_core.InputSignal<string | undefined>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly toolbarLabel: _angular_core.InputSignal<string>;
+    readonly linkLabel: _angular_core.InputSignal<string>;
+    protected readonly field: MxFormField | null;
+    private readonly ngControl;
+    private readonly content;
+    private readonly toolbarEl;
+    private readonly linkInput;
+    private readonly injector;
+    private readonly generatedId;
+    readonly controlId: _angular_core.Signal<string>;
+    private readonly formDisabled;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly toolList: _angular_core.Signal<MxEditorTool[]>;
+    protected readonly focusIndex: _angular_core.WritableSignal<number>;
+    /** Muda a cada transacção, para os botões reflectirem o estado. */
+    private readonly tick;
+    protected readonly count: _angular_core.WritableSignal<number>;
+    protected readonly linkOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly linkUrl: _angular_core.WritableSignal<string>;
+    protected readonly linkActive: _angular_core.WritableSignal<boolean>;
+    /** O editor do Tiptap, para comandos próprios (editor()?.chain()...). */
+    readonly editor: _angular_core.WritableSignal<Editor | null>;
+    private writing;
+    private onChange;
+    private onTouched;
+    constructor();
+    private create;
+    private readonly sanitizer;
+    private readonly icons;
+    protected icon(t: Exclude<MxEditorTool, '|'>): SafeHtml;
+    protected isActive(t: Exclude<MxEditorTool, '|'>): boolean;
+    protected isEnabled(t: Exclude<MxEditorTool, '|'>): boolean;
+    protected runTool(t: Exclude<MxEditorTool, '|'>, index: number): void;
+    openLink(): void;
+    protected applyLink(): void;
+    protected removeLink(): void;
+    protected closeLink(): void;
+    private buttons;
+    focusToolbar(): void;
+    protected onToolbarKey(event: KeyboardEvent): void;
+    /** Põe o foco no texto. */
+    focus(): void;
+    errorState(): boolean;
+    isRequired(): boolean;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (v: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxEditor, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MxEditor, "mx-editor", ["mxEditor"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "toolbar": { "alias": "toolbar"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "toolbarLabel": { "alias": "toolbarLabel"; "required": false; "isSignal": true; }; "linkLabel": { "alias": "linkLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { MX_EDITOR_DEFAULT_TOOLS, MxEditor };
+export type { MxEditorTool };