@mk-kit/ui 0.52.1 → 0.54.0

package/types/mk-kit-ui-status.d.ts

@@ -0,0 +1,158 @@
+import * as _angular_core from '@angular/core';
+import * as _mk_kit_ui_core from '@mk-kit/ui/core';
+import { MkSize, MkTone } from '@mk-kit/ui/core';
+
+/**
+ * Spinner — a circular indeterminate loading indicator. Exposes `role="status"`
+ * with a visually-hidden label so assistive tech announces the loading state.
+ * The animation slows under `prefers-reduced-motion`.
+ *
+ * ```html
+ * <mk-spinner />
+ * <mk-spinner size="lg" tone="neutral" label="Fetching results" />
+ * ```
+ */
+declare class MkSpinner {
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    /** Size scale. */
+    readonly size: _angular_core.InputSignal<MkSize>;
+    /** Semantic color tone. */
+    readonly tone: _angular_core.InputSignal<MkTone>;
+    /** Visually-hidden status label announced to screen readers. */
+    readonly label: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkSpinner, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkSpinner, "mk-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Visual treatment for a {@link MkBadge}. */
+type MkBadgeVariant = 'solid' | 'soft' | 'outline';
+/**
+ * Badge — a compact status pill, typically for counts or short state labels.
+ * Set `dot` for a minimal notification indicator with no text.
+ *
+ * ```html
+ * <mk-badge tone="success">Active</mk-badge>
+ * <mk-badge tone="danger" variant="solid">3</mk-badge>
+ * <mk-badge tone="danger" dot aria-label="Unread messages" />
+ * ```
+ */
+declare class MkBadge {
+    /** Semantic color tone. */
+    readonly tone: _angular_core.InputSignal<MkTone>;
+    /** Visual treatment. */
+    readonly variant: _angular_core.InputSignal<MkBadgeVariant>;
+    /** Size scale. */
+    readonly size: _angular_core.InputSignal<MkSize>;
+    /** Render as a tiny dot (no text) for notification indicators. */
+    readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkBadge, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkBadge, "mk-badge", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** Corner of the host an {@link MkBadgeOverlay} is anchored to. */
+type MkBadgeOverlayPosition = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';
+/**
+ * Badge overlay — anchors a small badge (count, dot or short text) to a corner
+ * of ANY element: an icon button, an avatar, a tab label. The host stays a
+ * single tab stop; the badge is a decorative, non-focusable child.
+ *
+ * - Numbers above `mkBadgeOverlayMax` (default 99) collapse to `99+`.
+ * - `mkBadgeOverlayDot` renders a textless dot ("something is new").
+ * - `mkBadgeOverlayAriaLabel` is the screen-reader text ("3 unread"). It is
+ *   rendered in a visually hidden span and wired to the host with
+ *   `aria-describedby`, so it is announced after the host's own name even
+ *   when the host has an `aria-label`. When it is given, the visible badge is
+ *   `aria-hidden` so the count is not read twice.
+ * - Positions use logical insets, so `top-end` sits at the top-right in LTR
+ *   and the top-left in RTL.
+ *
+ * The badge is painted with the global `.mk-badge-overlay` styles from
+ * `@mk-kit/ui/styles.css` and follows the `--mk-*` tone tokens.
+ *
+ * ```html
+ * <button mkButton iconOnly aria-label="Notifications"
+ *         [mkBadgeOverlay]="unread()" mkBadgeOverlayTone="danger"
+ *         [mkBadgeOverlayAriaLabel]="unread() + ' unread'">
+ *   <mk-icon name="bell" />
+ * </button>
+ *
+ * <mk-avatar name="Ada Lovelace" mkBadgeOverlay mkBadgeOverlayDot
+ *            mkBadgeOverlayTone="success" mkBadgeOverlayPosition="bottom-end" />
+ * ```
+ */
+declare class MkBadgeOverlay {
+    private readonly host;
+    private readonly renderer;
+    private readonly document;
+    private readonly isBrowser;
+    /**
+     * Badge content — a count or a short label. `null` / empty hides the badge
+     * unless `mkBadgeOverlayDot` is set. Numeric strings are treated as numbers
+     * so `mkBadgeOverlay="120"` also collapses to `99+`.
+     */
+    readonly content: _angular_core.InputSignal<string | number | null | undefined>;
+    /** Corner the badge is anchored to (logical: `end` flips in RTL). */
+    readonly position: _angular_core.InputSignal<MkBadgeOverlayPosition>;
+    /** Semantic color tone (same scale as `mk-badge`). */
+    readonly tone: _angular_core.InputSignal<MkTone>;
+    /** Render a textless dot instead of the content. */
+    readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Numbers above this render as `<max>+`. `0` disables the cap. */
+    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Hide the badge while keeping the directive (and its aria wiring) in place. */
+    readonly hidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Screen-reader text for the badge, e.g. `"3 unread"`. Announced as the
+     * host's description; the visible badge becomes `aria-hidden`.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** The text painted in the badge (`''` in dot mode). */
+    readonly label: _angular_core.Signal<string>;
+    /** Whether the badge is currently rendered. */
+    readonly visible: _angular_core.Signal<boolean>;
+    private readonly srId;
+    private badge;
+    private sr;
+    /** Set when WE made the host positioned, so we can undo it on removal. */
+    private positionedHost;
+    constructor();
+    private attach;
+    private detach;
+    /** Create / update / remove the hidden description and its aria-describedby link. */
+    private syncSr;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkBadgeOverlay, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkBadgeOverlay, "[mkBadgeOverlay]", never, { "content": { "alias": "mkBadgeOverlay"; "required": false; "isSignal": true; }; "position": { "alias": "mkBadgeOverlayPosition"; "required": false; "isSignal": true; }; "tone": { "alias": "mkBadgeOverlayTone"; "required": false; "isSignal": true; }; "dot": { "alias": "mkBadgeOverlayDot"; "required": false; "isSignal": true; }; "max": { "alias": "mkBadgeOverlayMax"; "required": false; "isSignal": true; }; "hidden": { "alias": "mkBadgeOverlayHidden"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "mkBadgeOverlayAriaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * EmptyState — a centered placeholder for "nothing here yet" situations: empty
+ * tables, no search results, a fresh dashboard, a cleared inbox. Provide a
+ * `title` (and usually a `description`), an `icon` or projected media, and
+ * call-to-action buttons via the actions slot.
+ *
+ * Slots: `[mkEmptyStateMedia]` (custom illustration, overrides `icon`), default
+ * content (extra body), `[mkEmptyStateActions]` (buttons).
+ *
+ * ```html
+ * <mk-empty-state icon="search" title="No results"
+ *   description="Try adjusting your filters.">
+ *   <button mkButton mkEmptyStateActions variant="outline">Clear filters</button>
+ * </mk-empty-state>
+ * ```
+ */
+declare class MkEmptyState {
+    /** Name of a registered icon shown above the title (ignored if media is projected). */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Main heading, e.g. "No invoices yet". */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Supporting sentence under the title. */
+    readonly description: _angular_core.InputSignal<string>;
+    /** Overall scale of the block. */
+    readonly size: _angular_core.InputSignal<MkSize>;
+    protected readonly iconSize: () => 28 | 48 | 36;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkEmptyState, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkEmptyState, "mk-empty-state", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["[mkEmptyStateMedia]", "*", "[mkEmptyStateActions]"], true, never>;
+}
+
+export { MkBadge, MkBadgeOverlay, MkEmptyState, MkSpinner };
+export type { MkBadgeOverlayPosition, MkBadgeVariant };

package/types/mk-kit-ui-table.d.ts

@@ -1094,6 +1094,12 @@ declare class MkTableDataSource<T> {
      * pending debounced filter, since the request reads the live filter value.
      */
     refresh(): void;
+    /**
+     * Back to page 1 and load — the "filters changed outside the search box"
+     * case. Unlike {@link setPage}, this loads even when already on page 1, so
+     * callers no longer need `page() === 1 ? refresh() : setPage(1)`.
+     */
+    reload(): void;
     /**
      * Pipe an `mkSort` directive's changes into {@link setSort}. Idempotent per
      * directive instance; all subscriptions are released by {@link destroy}.
@@ -1117,6 +1123,24 @@ declare class MkTableDataSource<T> {
     private unsubscribeActive;
     private clearSub;
 }
+/** Options for {@link mkClientFetcher}. */
+interface MkClientFetcherOptions<T> {
+    /** Row matcher for `setFilter` text; default: case-insensitive substring over every string/number field. */
+    match?: (row: T, query: string) => boolean;
+    /** Comparator for an active sort; default: locale compare on `row[sort.active]`. */
+    compare?: (a: T, b: T, sort: MkSortState) => number;
+}
+/**
+ * In-memory {@link MkDataFetcher}: filter, sort and slice a full row set that
+ * the app already holds (an API that returns everything). Lets a client-side
+ * list use {@link MkTableDataSource} — same pager, footer and API as a
+ * server-paged one — without hand-rolling `filtered/sorted/paged` computeds.
+ *
+ * ```ts
+ * ds = new MkTableDataSource(mkClientFetcher(() => this.rows()));
+ * ```
+ */
+declare function mkClientFetcher<T>(rows: () => readonly T[], opts?: MkClientFetcherOptions<T>): (req: MkDataRequest) => Promise<MkDataPage<T>>;
 
-export { MkSort, MkSortHeader, MkTable, MkTableCell, MkTableDataSource, MkTableRowDetail, mkCompactFilters, mkDownloadText, mkExportCsv, mkToCsv };
-export type { MkCellEdit, MkColumnResize, MkCsvColumn, MkCsvExportOptions, MkCsvOptions, MkDataFetcher, MkDataPage, MkDataRequest, MkGroupToggle, MkSortChange, MkSortDirection, MkSortState, MkSortable, MkTableAlign, MkTableCellContext, MkTableColumn, MkTableDataSourceOptions, MkTableDensity, MkTableExportOptions, MkTableExportRows, MkTableExportRowsOptions, MkTableFilterKind, MkTableFilterOption, MkTableFilterRange, MkTableFilters, MkTableGroup, MkTreeToggle };
+export { MkSort, MkSortHeader, MkTable, MkTableCell, MkTableDataSource, MkTableRowDetail, mkClientFetcher, mkCompactFilters, mkDownloadText, mkExportCsv, mkToCsv };
+export type { MkCellEdit, MkClientFetcherOptions, MkColumnResize, MkCsvColumn, MkCsvExportOptions, MkCsvOptions, MkDataFetcher, MkDataPage, MkDataRequest, MkGroupToggle, MkSortChange, MkSortDirection, MkSortState, MkSortable, MkTableAlign, MkTableCellContext, MkTableColumn, MkTableDataSourceOptions, MkTableDensity, MkTableExportOptions, MkTableExportRows, MkTableExportRowsOptions, MkTableFilterKind, MkTableFilterOption, MkTableFilterRange, MkTableFilters, MkTableGroup, MkTreeToggle };

package/types/mk-kit-ui.d.ts

@@ -11,7 +11,9 @@ export * from '@mk-kit/ui/navigation';
 export * from '@mk-kit/ui/forms';
 export * from '@mk-kit/ui/datetime';
 export * from '@mk-kit/ui/table';
+export * from '@mk-kit/ui/status';
 export * from '@mk-kit/ui/data';
+export * from '@mk-kit/ui/kanban';
 export * from '@mk-kit/ui/feedback';
 export * from '@mk-kit/ui/rich-text';
 export * from '@mk-kit/ui/block-editor';