@muxima-ui/core 1.1.0 → 1.3.0

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 };

package/types/muxima-ui-core-image-cropper.d.ts

@@ -0,0 +1,105 @@
+import * as _angular_core from '@angular/core';
+
+/** Rectângulo em píxeis. */
+interface MxRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Puxadores de redimensionar: cantos e lados. */
+type MxCropHandle = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+/** Mantém o rectângulo dentro dos limites, sem mudar o tamanho (a não ser que não caiba). */
+declare function mxClampRect(r: MxRect, bounds: MxRect): MxRect;
+/** Maior rectângulo com a proporção dada, centrado nos limites (ocupa `fill` do espaço). */
+declare function mxCenteredRect(bounds: MxRect, ratio: number | null, fill?: number): MxRect;
+/**
+ * Redimensiona a partir de um puxador por (dx, dy), respeitando a proporção, o tamanho
+ * mínimo e os limites. O lado oposto ao puxador fica parado.
+ */
+declare function mxResizeRect(r: MxRect, handle: MxCropHandle, dx: number, dy: number, bounds: MxRect, ratio: number | null, min?: number): MxRect;
+
+/** Área recortada em píxeis da imagem original, com a rotação aplicada antes. */
+interface MxCropArea extends MxRect {
+    rotation: number;
+}
+/**
+ * Recortar uma imagem antes de a enviar: arrastar a área, redimensionar pelos cantos,
+ * zoom e rodar. Com teclado: setas movem a área, Alt + setas mudam o tamanho (Shift para
+ * passos maiores); cada mudança é anunciada.
+ *
+ * ```html
+ * <mx-image-cropper #c [src]="ficheiro" [aspectRatio]="1" round />
+ * <button mxButton (click)="c.toBlob().then(enviar)">Guardar</button>
+ * ```
+ *
+ * `src` aceita um URL ou um File. `toBlob()` devolve a imagem recortada na resolução original.
+ */
+declare class MxImageCropper {
+    readonly src: _angular_core.InputSignal<string | File | Blob | null>;
+    readonly alt: _angular_core.InputSignal<string>;
+    /** Largura / altura da área (1 = quadrado, 16/9...). null = livre. */
+    readonly aspectRatio: _angular_core.InputSignal<number | null>;
+    /** Máscara redonda (fotografias de perfil). toBlob devolve PNG com cantos transparentes. */
+    readonly round: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly controls: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly height: _angular_core.InputSignal<string>;
+    /** Tamanho mínimo da área no ecrã, em px. */
+    readonly minSize: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly zoom: _angular_core.ModelSignal<number>;
+    readonly rotation: _angular_core.ModelSignal<number>;
+    readonly helpText: _angular_core.InputSignal<string>;
+    readonly zoomText: _angular_core.InputSignal<string>;
+    readonly rotateLeftText: _angular_core.InputSignal<string>;
+    readonly rotateRightText: _angular_core.InputSignal<string>;
+    readonly resetText: _angular_core.InputSignal<string>;
+    /** Área recortada em píxeis da imagem original. */
+    readonly areaChange: _angular_core.OutputEmitterRef<MxCropArea>;
+    private readonly stage;
+    private readonly img;
+    private readonly announcer;
+    protected readonly helpId: string;
+    protected readonly handles: MxCropHandle[];
+    protected readonly url: _angular_core.WritableSignal<string | null>;
+    protected readonly natural: _angular_core.WritableSignal<{
+        w: number;
+        h: number;
+    }>;
+    private readonly stageSize;
+    protected readonly ready: _angular_core.WritableSignal<boolean>;
+    readonly box: _angular_core.WritableSignal<MxRect>;
+    protected readonly live: _angular_core.WritableSignal<string>;
+    private objectUrl;
+    private liveTimer?;
+    /** Escala que faz a imagem caber no palco, vezes o zoom. */
+    private readonly fit;
+    protected readonly scale: _angular_core.Signal<number>;
+    protected readonly zoomPct: _angular_core.Signal<number>;
+    /** Rectângulo da imagem no palco (onde a área pode estar). */
+    private readonly bounds;
+    /** Área em píxeis da imagem (rodada). */
+    readonly area: _angular_core.Signal<MxCropArea>;
+    protected readonly boxLabel: _angular_core.Signal<string>;
+    constructor();
+    private measure;
+    protected onLoad(): void;
+    /** Volta ao zoom 1, sem rotação, área centrada. */
+    reset(): void;
+    setZoom(z: number): void;
+    rotate(deg: number): void;
+    private say;
+    protected onKeydown(e: KeyboardEvent): void;
+    private drag;
+    protected startMove(e: PointerEvent): void;
+    protected startResize(e: PointerEvent, h: MxCropHandle): void;
+    /** Desenha o recorte num canvas na resolução original. */
+    toCanvas(): HTMLCanvasElement;
+    /** Recorte como Blob (PNG por omissão; com `round` é sempre PNG). */
+    toBlob(type?: string, quality?: number): Promise<Blob | null>;
+    toDataURL(type?: string, quality?: number): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxImageCropper, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MxImageCropper, "mx-image-cropper", ["mxImageCropper"], { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; "round": { "alias": "round"; "required": false; "isSignal": true; }; "controls": { "alias": "controls"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "rotation": { "alias": "rotation"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "zoomText": { "alias": "zoomText"; "required": false; "isSignal": true; }; "rotateLeftText": { "alias": "rotateLeftText"; "required": false; "isSignal": true; }; "rotateRightText": { "alias": "rotateRightText"; "required": false; "isSignal": true; }; "resetText": { "alias": "resetText"; "required": false; "isSignal": true; }; }, { "zoom": "zoomChange"; "rotation": "rotationChange"; "areaChange": "areaChange"; }, never, never, true, never>;
+}
+
+export { MxImageCropper, mxCenteredRect, mxClampRect, mxResizeRect };
+export type { MxCropArea, MxCropHandle, MxRect };

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

@@ -0,0 +1,83 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { CdkDrag, CdkDropList, CdkDragDrop } from '@angular/cdk/drag-drop';
+
+interface MxKanbanColumn<T = any> {
+    id: string;
+    title: string;
+    items: T[];
+    /** Máximo de cartões na coluna (WIP). Acima disso não se larga lá. */
+    limit?: number;
+}
+interface MxKanbanMove<T = any> {
+    item: T;
+    from: string;
+    to: string;
+    fromIndex: number;
+    toIndex: number;
+}
+/** Conteúdo do cartão: `<ng-template mxKanbanCard let-item let-column="column">`. */
+declare class MxKanbanCard {
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxKanbanCard, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MxKanbanCard, "ng-template[mxKanbanCard]", never, {}, {}, never, never, true, never>;
+}
+/** Rodapé de cada coluna (ex.: botão "Adicionar"): `<ng-template mxKanbanColumnFooter let-column>`. */
+declare class MxKanbanColumnFooter {
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxKanbanColumnFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MxKanbanColumnFooter, "ng-template[mxKanbanColumnFooter]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Quadro Kanban: cartões em colunas, com arrastar e largar (rato e toque) e mover com
+ * o teclado. Num cartão: Espaço agarra, setas movem (cima e baixo na coluna, esquerda e
+ * direita entre colunas), Espaço larga e Esc cancela. Cada passo é anunciado.
+ *
+ * ```html
+ * <mx-kanban [(columns)]="quadro" [itemLabel]="titulo" (moved)="guardar($event)">
+ *   <ng-template mxKanbanCard let-tarefa>{{ tarefa.titulo }}</ng-template>
+ * </mx-kanban>
+ * ```
+ */
+declare class MxKanban<T = any> {
+    readonly columns: _angular_core.ModelSignal<MxKanbanColumn<T>[]>;
+    /** Chave única de cada cartão: nome do campo ou função. */
+    readonly itemKey: _angular_core.InputSignal<string | ((item: T) => unknown)>;
+    /** Nome do cartão nos anúncios. Por omissão o campo `title` ou `titulo`. */
+    readonly itemLabel: _angular_core.InputSignal<(item: T) => string>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly headingLevel: _angular_core.InputSignal<number>;
+    readonly emptyText: _angular_core.InputSignal<string>;
+    readonly helpText: _angular_core.InputSignal<string>;
+    readonly moved: _angular_core.OutputEmitterRef<MxKanbanMove<T>>;
+    protected readonly cardTpl: _angular_core.Signal<MxKanbanCard | undefined>;
+    protected readonly footerTpl: _angular_core.Signal<MxKanbanColumnFooter | undefined>;
+    private readonly announcer;
+    private readonly host;
+    private readonly injector;
+    private readonly uid;
+    protected readonly helpId: string;
+    /** Cartão agarrado com o teclado: posição actual e de onde saiu. */
+    private readonly grabbed;
+    protected titleId(i: number): string;
+    protected listId(i: number): string;
+    keyOf(item: T): unknown;
+    protected labelOf(item: T): string;
+    protected isGrabbed(c: number, i: number): boolean;
+    protected isFull(col: MxKanbanColumn<T>): boolean;
+    protected canEnter(ci: number): (drag: CdkDrag, drop: CdkDropList) => boolean;
+    /** Move um cartão e devolve as colunas novas (sem mudar as antigas). */
+    private move;
+    protected onDrop(e: CdkDragDrop<number>): void;
+    private emitMove;
+    private focusCard;
+    private where;
+    protected onKeydown(event: KeyboardEvent, ci: number, ii: number): void;
+    protected onBlur(ci: number, ii: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxKanban<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MxKanban<any>, "mx-kanban", ["mxKanban"], { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "itemKey": { "alias": "itemKey"; "required": false; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; }, { "columns": "columnsChange"; "moved": "moved"; }, ["cardTpl", "footerTpl"], never, true, never>;
+}
+declare const MX_KANBAN: readonly [typeof MxKanban, typeof MxKanbanCard, typeof MxKanbanColumnFooter];
+
+export { MX_KANBAN, MxKanban, MxKanbanCard, MxKanbanColumnFooter };
+export type { MxKanbanColumn, MxKanbanMove };

package/types/muxima-ui-core-notification-center.d.ts

@@ -0,0 +1,91 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+
+interface MxNotification<D = unknown> {
+    id: string | number;
+    title: string;
+    description?: string;
+    time: Date;
+    read?: boolean;
+    /** Cor do marcador: info em Kwanza, success, warning, danger. */
+    variant?: 'default' | 'info' | 'success' | 'warning' | 'danger';
+    /** Agrupa por categoria nos filtros (ex.: "Facturas"). */
+    category?: string;
+    data?: D;
+}
+/** "agora", "há 5 min", "ontem", "há 3 dias" e, depois de uma semana, a data. */
+declare function mxRelativeTime(date: Date, now?: Date, locale?: string): string;
+/** Modelo para o conteúdo de cada notificação: `<ng-template mxNotificationContent let-n>`. */
+declare class MxNotificationContent {
+    readonly template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxNotificationContent, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MxNotificationContent, "ng-template[mxNotificationContent]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Lista de notificações com por ler e lidas, filtro "Por ler", "Marcar todas como lidas"
+ * e acções por notificação. Usa-se dentro de um popover, de um drawer ou numa página.
+ *
+ * ```html
+ * <mx-notification-center [items]="notificacoes()" (opened)="abrir($event)"
+ *   (markRead)="marcar($event)" (markAllRead)="marcarTodas()" (dismiss)="remover($event)" />
+ * ```
+ *
+ * O componente não guarda estado: recebe a lista e emite o que a pessoa fez.
+ * Quando chegam notificações novas por ler, anuncia-as ao leitor de ecrã.
+ */
+declare class MxNotificationCenter<D = unknown> {
+    readonly items: _angular_core.InputSignal<readonly MxNotification<D>[]>;
+    readonly title: _angular_core.InputSignal<string>;
+    /** Nível do título para o leitor de ecrã (h2 por omissão). */
+    readonly headingLevel: _angular_core.InputSignal<number>;
+    readonly markAllText: _angular_core.InputSignal<string>;
+    readonly emptyText: _angular_core.InputSignal<string>;
+    readonly emptyUnreadText: _angular_core.InputSignal<string>;
+    readonly filterLabel: _angular_core.InputSignal<string>;
+    /** Mostra os filtros Todas, Por ler e as categorias. */
+    readonly showFilter: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Mostra o botão de remover em cada notificação. */
+    readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Marca como lida ao abrir (emite markRead além de opened). */
+    readonly markReadOnOpen: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Anuncia ao leitor de ecrã quando chegam notificações por ler. */
+    readonly announce: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly locale: _angular_core.InputSignal<string>;
+    readonly opened: _angular_core.OutputEmitterRef<MxNotification<D>>;
+    readonly markRead: _angular_core.OutputEmitterRef<MxNotification<D>>;
+    readonly markAllRead: _angular_core.OutputEmitterRef<void>;
+    readonly dismiss: _angular_core.OutputEmitterRef<MxNotification<D>>;
+    protected readonly contentTpl: _angular_core.Signal<MxNotificationContent | undefined>;
+    private readonly announcer;
+    protected readonly titleId: string;
+    readonly filter: _angular_core.WritableSignal<string>;
+    /** Muda a cada minuto, para "há 5 min" se actualizar. */
+    private readonly now;
+    readonly unread: _angular_core.Signal<number>;
+    protected readonly categories: _angular_core.Signal<string[]>;
+    protected readonly visible: _angular_core.Signal<MxNotification<D>[]>;
+    constructor();
+    protected relative(d: Date): string;
+    protected open(n: MxNotification<D>): void;
+    protected dismissItem(n: MxNotification<D>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxNotificationCenter<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MxNotificationCenter<any>, "mx-notification-center", ["mxNotificationCenter"], { "items": { "alias": "items"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "markAllText": { "alias": "markAllText"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "emptyUnreadText": { "alias": "emptyUnreadText"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "showFilter": { "alias": "showFilter"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "markReadOnOpen": { "alias": "markReadOnOpen"; "required": false; "isSignal": true; }; "announce": { "alias": "announce"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "markRead": "markRead"; "markAllRead": "markAllRead"; "dismiss": "dismiss"; }, ["contentTpl"], ["[mxNotificationFooter]"], true, never>;
+}
+/**
+ * Botão do sino com a contagem por ler. O nome inclui a contagem:
+ * "Notificações, 3 por ler".
+ *
+ * ```html
+ * <button mxNotificationBell [count]="porLer()" [mxPopoverTrigger]="painel"></button>
+ * ```
+ */
+declare class MxNotificationBell {
+    readonly count: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
+    readonly label: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MxNotificationBell, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MxNotificationBell, "button[mxNotificationBell]", ["mxNotificationBell"], { "count": { "alias": "count"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { MxNotificationBell, MxNotificationCenter, MxNotificationContent, mxRelativeTime };
+export type { MxNotification };