@mk-kit/ui 0.48.0 → 0.50.0

package/README.md

@@ -7,8 +7,10 @@ date & time pickers, editors, kanban, overlays, an app shell — written for
 Angular 22 with signals and `OnPush` from day one. Every visual value is a
 `--mk-*` CSS custom property; light and dark ship out of the box; WCAG 2.1 AA
 is the target, not the marketing. MIT licensed. No third-party runtime
-dependencies — only Angular and the sibling `@mk-kit/validators` (the
-identifier checks, 14 kB, tree-shakeable).
+dependencies — only Angular and the sibling packages `@mk-kit/core` (the
+framework-free engines: diff, markdown, anchored positioning, query, dates)
+and `@mk-kit/validators` (the identifier checks) — both zero-dependency and
+tree-shakeable.
 
 - **Docs & live demos:** <https://mk-kit.dev>
 - **API reference:** <https://mk-kit.dev/api> — also as [api.json](https://mk-kit.dev/api.json), [llms.txt](https://mk-kit.dev/llms.txt) and [llms-full.txt](https://mk-kit.dev/llms-full.txt) for tools and AI assistants

package/fesm2022/mk-kit-ui-core.mjs

@@ -1,6 +1,8 @@
 import * as i0 from '@angular/core';
 import { inject, DOCUMENT, DestroyRef, PLATFORM_ID, signal, computed, effect, Injectable, InjectionToken, ApplicationRef, EnvironmentInjector, createComponent, Injector, ElementRef, input, output, Directive, untracked } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
+import { mkComputeAnchoredPosition } from '@mk-kit/core';
+export { MK_QUERY_OPERATORS, MK_QUERY_TEXT_EN, MK_QUERY_UNARY, mkComputeAnchoredPosition, mkCreateQueryGroup, mkCreateQueryRule, mkHighlight, mkHighlightJson, mkIsQueryGroup, mkQueryCompact, mkQueryIsEmpty, mkQueryOperatorLabel, mkQueryOperatorsFor, mkQueryRuleCount, mkQueryRuleIsComplete, mkQueryRuleMatches, mkQueryToPredicate, mkQueryToText, mkUniqueId } from '@mk-kit/core';
 import { Observable } from 'rxjs';
 import { FORM_FIELD } from '@angular/forms/signals';
 
@@ -551,17 +553,7 @@ class MkFocusTrap {
     }
 }
 
-let counter = 0;
-/**
- * Generates a stable, unique DOM id for wiring `aria-*` relationships
- * (labels, descriptions, controls). Prefer this over `Math.random()` so
- * ids are deterministic within a render and SSR-safe.
- *
- * @param prefix short semantic prefix, e.g. `mk-input`.
- */
-function mkUniqueId(prefix = 'mk') {
-    return `${prefix}-${++counter}`;
-}
+/** Delegates to `@mk-kit/core` — the exported name is unchanged. */
 
 /** Injection token exposing the data passed to an overlay component. */
 const MK_OVERLAY_DATA = new InjectionToken('MK_OVERLAY_DATA');
@@ -943,88 +935,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * dropdown is unusable; at that point overflowing beats collapsing.
  */
 const MIN_SIZE_CAP = 120;
-function sideOf(placement) {
-    if (placement.startsWith('top'))
-        return 'top';
-    if (placement.startsWith('bottom'))
-        return 'bottom';
-    return placement.startsWith('left') ? 'left' : 'right';
-}
-function alignOf(placement) {
-    if (placement.endsWith('-start'))
-        return 'start';
-    if (placement.endsWith('-end'))
-        return 'end';
-    return 'center';
-}
-/**
- * Pure viewport-positioning maths shared by every anchored overlay
- * ({@link MkAnchoredPanel} and the tooltip). Given the anchor rect, the panel
- * size and the viewport size, returns the top/left for a `position: fixed`
- * panel — flipping to the opposite side when it would overflow and clamping
- * back inside the viewport.
- */
-function mkComputeAnchoredPosition(anchor, panel, viewport, opts) {
-    const { gap, flip, clamp } = opts;
-    let side = sideOf(opts.placement);
-    const align = alignOf(opts.placement);
-    const { width: w, height: h } = panel;
-    const { width: vw, height: vh } = viewport;
-    // Vertical flip for top/bottom placements.
-    if (flip && (side === 'top' || side === 'bottom')) {
-        const fitsBelow = anchor.bottom + gap + h <= vh;
-        const fitsAbove = anchor.top - gap - h >= 0;
-        if (side === 'bottom' && !fitsBelow && fitsAbove)
-            side = 'top';
-        else if (side === 'top' && !fitsAbove && fitsBelow)
-            side = 'bottom';
-    }
-    // Horizontal flip for left/right placements.
-    if (flip && (side === 'left' || side === 'right')) {
-        const fitsRight = anchor.right + gap + w <= vw;
-        const fitsLeft = anchor.left - gap - w >= 0;
-        if (side === 'right' && !fitsRight && fitsLeft)
-            side = 'left';
-        else if (side === 'left' && !fitsLeft && fitsRight)
-            side = 'right';
-    }
-    let top = 0;
-    let left = 0;
-    if (side === 'bottom')
-        top = anchor.bottom + gap;
-    else if (side === 'top')
-        top = anchor.top - h - gap;
-    else if (side === 'right')
-        left = anchor.right + gap;
-    else
-        left = anchor.left - w - gap;
-    if (side === 'top' || side === 'bottom') {
-        // Cross axis is horizontal; in RTL, inline-start is the anchor's right edge.
-        const startLeft = opts.rtl ? anchor.right - w : anchor.left;
-        const endLeft = opts.rtl ? anchor.left : anchor.right - w;
-        if (align === 'start')
-            left = startLeft;
-        else if (align === 'end')
-            left = endLeft;
-        else
-            left = anchor.left + anchor.width / 2 - w / 2;
-    }
-    else {
-        // Left/right: the cross axis is vertical. `-start` tops the panel with the
-        // anchor (a submenu beside its item), `-end` bottoms it, else centre.
-        if (align === 'start')
-            top = anchor.top;
-        else if (align === 'end')
-            top = anchor.bottom - h;
-        else
-            top = anchor.top + anchor.height / 2 - h / 2;
-    }
-    if (clamp) {
-        left = Math.max(gap, Math.min(left, vw - w - gap));
-        top = Math.max(gap, Math.min(top, vh - h - gap));
-    }
-    return { top: Math.round(top), left: Math.round(left), placement: `${side}${align === 'center' ? '' : `-${align}`}` };
-}
 /**
  * Anchored-overlay directive. Apply it to a floating panel element (a dropdown
  * list, calendar, menu, …) that is rendered inside its component's own template
@@ -1817,45 +1727,7 @@ function provideMkI18n(overrides, base = MK_DEFAULT_I18N) {
 class MkFieldContext {
 }
 
-/**
- * Dependency-free syntax highlighting for {@link MkCodeEditor}. Each function
- * takes source text and returns an HTML string of `<span class="mk-tok-…">`
- * tokens. Input is HTML-escaped first, so the result is safe to render.
- */
-/** Escape the three characters that could break out of HTML text content. */
-function mkEscapeHtml(src) {
-    return src.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-}
-/**
- * Highlight a JSON document. Recognises object keys, strings, numbers, the
- * `true`/`false`/`null` literals and structural punctuation. Invalid JSON is
- * still highlighted token-by-token (the editor validates separately).
- */
-function mkHighlightJson(src) {
-    const esc = mkEscapeHtml(src);
-    return esc.replace(
-    // 1: string (+ optional following colon → key) · 2: colon
-    // 3: keyword · 4: number · 5: punctuation
-    /("(?:\\.|[^"\\])*")(\s*:)?|\b(true|false|null)\b|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|([{}\[\],:])/g, (match, str, colon, keyword, num, punc) => {
-        if (str !== undefined) {
-            if (colon !== undefined) {
-                return `<span class="mk-tok-key">${str}</span><span class="mk-tok-punc">${colon}</span>`;
-            }
-            return `<span class="mk-tok-str">${str}</span>`;
-        }
-        if (keyword !== undefined)
-            return `<span class="mk-tok-kw">${keyword}</span>`;
-        if (num !== undefined)
-            return `<span class="mk-tok-num">${num}</span>`;
-        if (punc !== undefined)
-            return `<span class="mk-tok-punc">${punc}</span>`;
-        return match;
-    });
-}
-/** Highlight `src` for `language`, falling back to escaped plain text. */
-function mkHighlight(src, language) {
-    return language === 'json' ? mkHighlightJson(src) : mkEscapeHtml(src);
-}
+/** Delegates to `@mk-kit/core` — the exported names are unchanged. */
 
 /**
  * Re-validates the bound form control whenever a validator's inputs change.
@@ -2066,259 +1938,16 @@ function mkInjectFieldTouched() {
     });
 }
 
-/** Operators offered per field type, in menu order. */
-const MK_QUERY_OPERATORS = {
-    string: ['contains', 'notContains', 'eq', 'neq', 'startsWith', 'endsWith', 'empty', 'notEmpty'],
-    number: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'between', 'empty', 'notEmpty'],
-    boolean: ['eq'],
-    date: ['eq', 'neq', 'before', 'after', 'between', 'empty', 'notEmpty'],
-    select: ['eq', 'neq', 'in', 'notIn', 'empty', 'notEmpty'],
-};
-/** Operators that take no value. */
-const MK_QUERY_UNARY = new Set(['empty', 'notEmpty']);
-/** True for a group node (as opposed to a rule). */
-function mkIsQueryGroup(node) {
-    return Array.isArray(node.rules);
-}
-/** A fresh empty group. */
-function mkCreateQueryGroup(init = {}) {
-    return { id: mkUniqueId('mkq'), combinator: 'and', rules: [], ...init };
-}
-/** A fresh rule on `field`, using its first operator. */
-function mkCreateQueryRule(field) {
-    const ops = mkQueryOperatorsFor(field);
-    return { id: mkUniqueId('mkq'), field: field.key, operator: ops[0] ?? 'eq' };
-}
-/** Operators a field offers (its own list, else the defaults for its type). */
-function mkQueryOperatorsFor(field) {
-    if (!field)
-        return MK_QUERY_OPERATORS.string;
-    return field.operators ?? MK_QUERY_OPERATORS[field.type ?? 'string'];
-}
-/** True when the tree holds no rule at all (empty groups only). */
-function mkQueryIsEmpty(group) {
-    return group.rules.every((n) => (mkIsQueryGroup(n) ? mkQueryIsEmpty(n) : false));
-}
-/** Number of rules in the tree. */
-function mkQueryRuleCount(group) {
-    return group.rules.reduce((n, r) => n + (mkIsQueryGroup(r) ? mkQueryRuleCount(r) : 1), 0);
-}
-/** Drop empty groups and rules that still need a value, so the API gets only complete conditions. */
-function mkQueryCompact(group) {
-    const rules = group.rules
-        .map((n) => (mkIsQueryGroup(n) ? mkQueryCompact(n) : n))
-        .filter((n) => (mkIsQueryGroup(n) ? n.rules.length > 0 : mkQueryRuleIsComplete(n)));
-    return { ...group, rules };
-}
-/** A rule is complete when its operator needs no value or has one. */
-function mkQueryRuleIsComplete(rule) {
-    if (MK_QUERY_UNARY.has(rule.operator))
-        return true;
-    const v = rule.value;
-    if (v == null || v === '')
-        return false;
-    if (rule.operator === 'between')
-        return Array.isArray(v) && v.length === 2 && v.every((x) => x != null && x !== '');
-    if (rule.operator === 'in' || rule.operator === 'notIn')
-        return Array.isArray(v) && v.length > 0;
-    return true;
-}
-/** Sortable / comparable primitive of a raw value for a field type. */
-function normalise(value, type) {
-    if (value == null || value === '')
-        return null;
-    switch (type) {
-        case 'number': {
-            const n = typeof value === 'number' ? value : Number(value);
-            return Number.isNaN(n) ? null : n;
-        }
-        case 'date': {
-            const d = value instanceof Date ? value : new Date(value);
-            return Number.isNaN(d.getTime()) ? null : d.getTime();
-        }
-        case 'boolean':
-            return value === true || value === 'true';
-        default:
-            return typeof value === 'string' ? value : String(value);
-    }
-}
-/** Day precision for date equality: two timestamps on the same local day are equal. */
-function sameDay(a, b) {
-    const da = new Date(a);
-    const db = new Date(b);
-    return da.getFullYear() === db.getFullYear() && da.getMonth() === db.getMonth() && da.getDate() === db.getDate();
-}
-function inferType(rule) {
-    const v = Array.isArray(rule.value) ? rule.value[0] : rule.value;
-    if (typeof v === 'number')
-        return 'number';
-    if (typeof v === 'boolean')
-        return 'boolean';
-    if (v instanceof Date)
-        return 'date';
-    return 'string';
-}
-/** Evaluate one rule against a row. */
-function mkQueryRuleMatches(rule, row, field) {
-    const type = field?.type ?? inferType(rule);
-    const raw = row[rule.field];
-    const isEmpty = raw == null || raw === '' || (Array.isArray(raw) && raw.length === 0);
-    if (rule.operator === 'empty')
-        return isEmpty;
-    if (rule.operator === 'notEmpty')
-        return !isEmpty;
-    if (!mkQueryRuleIsComplete(rule))
-        return true; // an unfinished rule filters nothing
-    if (isEmpty)
-        return false;
-    const cmpType = type === 'select' ? 'string' : type;
-    const left = normalise(raw, cmpType);
-    const collator = new Intl.Collator(undefined, { sensitivity: 'base' });
-    const eqText = (a, b) => collator.compare(String(a), String(b)) === 0;
-    switch (rule.operator) {
-        case 'eq':
-        case 'neq': {
-            const right = normalise(rule.value, cmpType);
-            let equal;
-            if (left == null || right == null)
-                equal = left === right;
-            else if (cmpType === 'date')
-                equal = sameDay(left, right);
-            else if (cmpType === 'string')
-                equal = eqText(left, right);
-            else
-                equal = left === right;
-            return rule.operator === 'eq' ? equal : !equal;
-        }
-        case 'contains':
-        case 'notContains': {
-            const has = String(raw).toLocaleLowerCase().includes(String(rule.value).toLocaleLowerCase());
-            return rule.operator === 'contains' ? has : !has;
-        }
-        case 'startsWith':
-            return String(raw).toLocaleLowerCase().startsWith(String(rule.value).toLocaleLowerCase());
-        case 'endsWith':
-            return String(raw).toLocaleLowerCase().endsWith(String(rule.value).toLocaleLowerCase());
-        case 'gt':
-        case 'gte':
-        case 'lt':
-        case 'lte':
-        case 'before':
-        case 'after': {
-            const right = normalise(rule.value, cmpType);
-            if (left == null || right == null || typeof left === 'boolean' || typeof right === 'boolean')
-                return false;
-            const c = typeof left === 'number' && typeof right === 'number' ? left - right : collator.compare(String(left), String(right));
-            switch (rule.operator) {
-                case 'gt':
-                case 'after':
-                    return c > 0;
-                case 'gte':
-                    return c >= 0;
-                case 'lt':
-                case 'before':
-                    return c < 0;
-                default:
-                    return c <= 0;
-            }
-        }
-        case 'between': {
-            const [a, b] = rule.value;
-            const lo = normalise(a, cmpType);
-            const hi = normalise(b, cmpType);
-            if (left == null || lo == null || hi == null)
-                return false;
-            if (typeof left === 'number' && typeof lo === 'number' && typeof hi === 'number')
-                return left >= lo && left <= hi;
-            return collator.compare(String(left), String(lo)) >= 0 && collator.compare(String(left), String(hi)) <= 0;
-        }
-        case 'in':
-        case 'notIn': {
-            const set = rule.value;
-            const hit = Array.isArray(raw)
-                ? raw.some((r) => set.some((s) => eqText(r, s)))
-                : set.some((s) => (cmpType === 'string' ? eqText(raw, s) : normalise(raw, cmpType) === normalise(s, cmpType)));
-            return rule.operator === 'in' ? hit : !hit;
-        }
-        default:
-            return true;
-    }
-}
-/**
- * Compile a query into a row predicate for client-side filtering
- * (`rows.filter(mkQueryToPredicate(query, fields))`). Unfinished rules are
- * ignored, so a half-edited query never blanks the table.
- */
-function mkQueryToPredicate(group, fields = []) {
-    const byKey = new Map(fields.map((f) => [f.key, f]));
-    const evalGroup = (g, row) => {
-        const active = g.rules.filter((n) => (mkIsQueryGroup(n) ? !mkQueryIsEmpty(n) : mkQueryRuleIsComplete(n)));
-        let result;
-        if (!active.length)
-            result = true;
-        else if (g.combinator === 'or')
-            result = active.some((n) => evalNode(n, row));
-        else
-            result = active.every((n) => evalNode(n, row));
-        return g.not ? !result : result;
-    };
-    const evalNode = (n, row) => mkIsQueryGroup(n) ? evalGroup(n, row) : mkQueryRuleMatches(n, row, byKey.get(n.field));
-    return (row) => evalGroup(group, row);
-}
-/** Localised label of an operator. */
-function mkQueryOperatorLabel(op, i18n = MK_DEFAULT_I18N) {
-    const key = `queryOp${op[0].toUpperCase()}${op.slice(1)}`;
-    return i18n[key] ?? op;
-}
 /**
- * Human-readable sentence for a query, e.g.
- * `(Name contains "ada" and Orders at least 10) or Status is any of Active, Invited`.
+ * Delegates to `@mk-kit/core` — the exported names and behaviour are
+ * unchanged. `mkQueryOperatorLabel` / `mkQueryToText` accept the full
+ * `MkI18nStrings` map as before: it is a structural superset of the
+ * package's `MkQueryTextStrings`.
  */
-function mkQueryToText(group, fields = [], i18n = MK_DEFAULT_I18N) {
-    const byKey = new Map(fields.map((f) => [f.key, f]));
-    const fmt = (v, field) => {
-        if (field?.type === 'select') {
-            const opt = field.options?.find((o) => o.value === v);
-            if (opt)
-                return opt.label;
-        }
-        if (field?.type === 'boolean' || typeof v === 'boolean')
-            return v === true || v === 'true' ? i18n.queryTrue : i18n.queryFalse;
-        if (typeof v === 'number')
-            return String(v);
-        if (v instanceof Date)
-            return v.toISOString().slice(0, 10);
-        return `"${String(v)}"`;
-    };
-    const rule = (r) => {
-        const f = byKey.get(r.field);
-        const label = f?.label ?? r.field;
-        const op = mkQueryOperatorLabel(r.operator, i18n);
-        if (MK_QUERY_UNARY.has(r.operator))
-            return `${label} ${op}`;
-        if (r.operator === 'between' && Array.isArray(r.value))
-            return `${label} ${op} ${fmt(r.value[0], f)} – ${fmt(r.value[1], f)}`;
-        if (Array.isArray(r.value))
-            return `${label} ${op} ${r.value.map((v) => fmt(v, f)).join(', ')}`;
-        return `${label} ${op} ${fmt(r.value, f)}`;
-    };
-    const grp = (g, top) => {
-        const parts = g.rules
-            .filter((n) => (mkIsQueryGroup(n) ? !mkQueryIsEmpty(n) : mkQueryRuleIsComplete(n)))
-            .map((n) => (mkIsQueryGroup(n) ? grp(n, false) : rule(n)));
-        if (!parts.length)
-            return '';
-        const joiner = g.combinator === 'or' ? i18n.queryOr : i18n.queryAnd;
-        const body = parts.join(` ${joiner.toLocaleLowerCase()} `);
-        const wrapped = top && !g.not ? body : parts.length > 1 || g.not ? `(${body})` : body;
-        return g.not ? `${i18n.queryNot.toLocaleLowerCase()} ${wrapped}` : wrapped;
-    };
-    return grp(group, true);
-}
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MK_BREAKPOINTS, MK_DEFAULT_BREAKPOINTS, MK_DEFAULT_DATE_NAMES, MK_DEFAULT_I18N, MK_DEFAULT_VALIDATION, MK_I18N, MK_OVERLAY_DATA, MK_OVERLAY_ROOT, MK_QUERY_OPERATORS, MK_QUERY_UNARY, MkAnchoredPanel, MkBreakpointService, MkFieldContext, MkFocusTrap, MkLiveAnnouncer, MkOverlayRef, MkOverlayService, MkThemeService, mkBodyLevelAncestor, mkComputeAnchoredPosition, mkCreateQueryGroup, mkCreateQueryRule, mkFirstErrorMessage, mkGetFocusable, mkHighlight, mkHighlightJson, mkInjectFieldTouched, mkIsQueryGroup, mkIsResponsive, mkMergeI18n, mkQueryCompact, mkQueryIsEmpty, mkQueryOperatorLabel, mkQueryOperatorsFor, mkQueryRuleCount, mkQueryRuleIsComplete, mkQueryRuleMatches, mkQueryToPredicate, mkQueryToText, mkSignalErrorMessage, mkSignalErrorsToValidationErrors, mkUniqueId, mkValidatorChange, provideMkI18n };
+export { MK_BREAKPOINTS, MK_DEFAULT_BREAKPOINTS, MK_DEFAULT_DATE_NAMES, MK_DEFAULT_I18N, MK_DEFAULT_VALIDATION, MK_I18N, MK_OVERLAY_DATA, MK_OVERLAY_ROOT, MkAnchoredPanel, MkBreakpointService, MkFieldContext, MkFocusTrap, MkLiveAnnouncer, MkOverlayRef, MkOverlayService, MkThemeService, mkBodyLevelAncestor, mkFirstErrorMessage, mkGetFocusable, mkInjectFieldTouched, mkIsResponsive, mkMergeI18n, mkSignalErrorMessage, mkSignalErrorsToValidationErrors, mkValidatorChange, provideMkI18n };
 //# sourceMappingURL=mk-kit-ui-core.mjs.map