@mk-kit/ui 0.34.1 → 0.36.0

package/README.md

@@ -2,14 +2,14 @@
 
 **Themable, accessible Angular component library for admin dashboards, back-offices and internal tools.**
 
-165+ standalone components, directives and services — data tables, charts,
+170+ standalone components, directives and services — data tables, charts,
 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. Zero runtime dependencies
 beyond Angular.
 
-- **Docs & live demos:** <https://github.com/mk-kit/mk-kit> (site: mk-kit.dev — coming soon)
+- **Docs & live demos:** <https://mk-kit.dev>
 - **Changelog:** [CHANGELOG.md](https://github.com/mk-kit/mk-kit/blob/main/CHANGELOG.md)
 - **Issues:** <https://github.com/mk-kit/mk-kit/issues>
 
@@ -73,14 +73,14 @@ export class AppRoot {
 |---|---|
 | **Forms & inputs** (49) | text, number, password (strength meter), OTP, phone (country prefix), postal code, currency, card number, IBAN, tax id, masked input, tag input, select, autocomplete, multi-select, tree-select, transfer list, checkbox, radio, switch, slider, range slider, rating, colour picker, file upload (dropzone), signature pad, numeric keypad & on-screen keyboard, repeater (`FormArray`), form field with automatic validation messages, form error summary |
 | **Date & time** | calendar, date picker, date-range picker, time picker, month/year picker, week picker, inline mini date, event calendar with editable week/day grid (drag to move / resize) |
-| **Tables & grids** (6) | data table — sort, multi-select, expandable rows, grouping, sticky header, column resize / reorder / pin, inline cell edit, responsive stacking — plus `MkTableDataSource` for server-side sort/page/filter |
+| **Tables & grids** (6) | data table — sort, multi-select, expandable rows, tree rows, grouping, sticky header, column resize / reorder / pin, inline cell edit, responsive stacking, CSV export, print styles — plus `MkTableDataSource` for server-side sort/page/filter |
 | **Charts** (12) | line/area, bar (stacked, horizontal, label fitting), donut, gauge, progress ring, scatter/bubble, radar, funnel, treemap, heatmap, calendar heatmap, sparkline — SVG, themed, accessible |
 | **Data display** (25) | cards, lists, stat cards, badges, tags, chips, avatars & groups, timeline, description list, tree, empty state, countdown, QR code, diff view, JSON viewer, code block, virtual scroll, carousel, kanban |
-| **Navigation & layout** (18) | app shell (responsive sidebar), nav list & groups, tabs, stepper, breadcrumb, pagination, menu, context menu, command palette (⌘K), page header, toolbar, splitter, drawer, scroll area, FAB, back-to-top |
+| **Navigation & layout** (21) | app shell (responsive sidebar), stack / flex / grid layout primitives, nav list & groups, tabs, stepper, breadcrumb, pagination, menu, context menu, command palette (⌘K), page header, toolbar, splitter, drawer, scroll area, FAB, back-to-top |
 | **Feedback & overlays** (20) | dialogs (+ `confirm()` / `alert()` / `prompt()`), bottom sheet, drawer, popover, popconfirm, hovercard, tooltip, toast, snackbar, alert, banner, result page, notification center, product tour, progress bar, loading bar, spinner, skeletons |
 | **Editors & interactions** (22) | block editor (Notion-style, HTML round-trip), rich text, markdown renderer, code editor, log viewer, drag & drop, sortable list, @mentions, hotkeys, undo/redo history, permissions (`*mkCan`), clipboard, intersect, infinite scroll, ripple, scrollspy |
 | **Media** (6) | image with states, gallery, lightbox, cropper, media manager |
-| **Core services** | theme (light/dark/system + density), overlay & anchored panels, focus trap, live announcer, icon registry, i18n |
+| **Core services** | theme (light/dark/system + density), breakpoints, overlay & anchored panels, focus trap, live announcer, icon registry (426 built-in icons), i18n |
 
 The full, searchable index lives in the docs (`/components-index`).
 
@@ -96,7 +96,7 @@ import { MkDatePicker } from '@mk-kit/ui/datetime';
 
 Available: `core`, `forms`, `datetime`, `table`, `data`, `navigation`,
 `feedback`, `directives`, `dnd`, `media`, `icon`, `button`, `checkbox`, `chip`,
-`context-menu`, `rich-text`, `block-editor`. `sideEffects: false` throughout.
+`context-menu`, `layout`, `rich-text`, `block-editor`. `sideEffects: false` throughout.
 
 ## Theming
 
@@ -196,4 +196,5 @@ for use of the name and logo.
 
 ## License
 
-MIT © Mateusz Kornaś
+MIT © Mateusz Kornaś. Part of the built-in icon set is derived from
+[Lucide](https://lucide.dev) (ISC) — see `THIRD_PARTY_NOTICES.md`.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,28 @@
+# Third-party notices
+
+## Lucide Icons
+
+Part of the built-in icon set (`MK_EXTENDED_ICONS`, generated by
+`scripts/gen-icons.mjs`) is derived from [Lucide](https://lucide.dev),
+distributed under the ISC licence:
+
+```
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+```
+
+Lucide itself is derived in part from [Feather](https://feathericons.com)
+(MIT, Copyright (c) 2013-2023 Cole Bemis).

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

@@ -176,6 +176,142 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/** The default scale (same numbers as Tailwind, so mental models transfer). */
+const MK_DEFAULT_BREAKPOINTS = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+};
+/** Override the breakpoint scale app-wide: `{ provide: MK_BREAKPOINTS, useValue: { …, lg: 1100 } }`. */
+const MK_BREAKPOINTS = new InjectionToken('MK_BREAKPOINTS', {
+    providedIn: 'root',
+    factory: () => MK_DEFAULT_BREAKPOINTS,
+});
+const ORDER = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+/** True when `value` is a per-breakpoint map rather than a plain value. */
+function mkIsResponsive(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        !Array.isArray(value) &&
+        Object.keys(value).every((k) => ORDER.includes(k)));
+}
+/**
+ * Reactive viewport breakpoints, one `matchMedia` listener per step.
+ *
+ * ```ts
+ * private readonly bp = inject(MkBreakpointService);
+ * readonly compact = this.bp.down('md');          // Signal<boolean>
+ * readonly columns = computed(() => this.bp.resolve({ xs: 1, md: 2, xl: 4 }));
+ * ```
+ *
+ * On the server (no `window`) everything reports `xs`.
+ */
+class MkBreakpointService {
+    /** The breakpoint scale in effect (see {@link MK_BREAKPOINTS}). */
+    breakpoints = inject(MK_BREAKPOINTS);
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** `matches` per step, in scale order (`sm` first). */
+    steps = new Map();
+    cleanup = [];
+    queries = new Map();
+    ups = new Map();
+    downs = new Map();
+    /** The widest breakpoint the viewport currently satisfies. */
+    current;
+    constructor() {
+        for (const name of ORDER.slice(1)) {
+            const min = this.breakpoints[name];
+            this.steps.set(name, this.watch(`(min-width: ${min}px)`));
+        }
+        this.current = computed(() => {
+            let current = 'xs';
+            for (const name of ORDER.slice(1))
+                if (this.steps.get(name)())
+                    current = name;
+            return current;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    }
+    /** True while the viewport is at least `bp` wide (`up('md')` = md, lg, xl, 2xl). */
+    up(bp) {
+        let s = this.ups.get(bp);
+        if (!s) {
+            s = bp === 'xs' ? signal(true).asReadonly() : this.steps.get(bp).asReadonly();
+            this.ups.set(bp, s);
+        }
+        return s;
+    }
+    /** True while the viewport is narrower than `bp` (`down('md')` = xs, sm). */
+    down(bp) {
+        let s = this.downs.get(bp);
+        if (!s) {
+            const up = this.up(bp);
+            s = computed(() => !up());
+            this.downs.set(bp, s);
+        }
+        return s;
+    }
+    /** True while the viewport is at least `from` and narrower than `to`. */
+    between(from, to) {
+        const lo = this.up(from);
+        const hi = this.down(to);
+        return computed(() => lo() && hi());
+    }
+    /** Any media query as a signal, e.g. `observe('(orientation: portrait)')`. */
+    observe(query) {
+        let s = this.queries.get(query);
+        if (!s) {
+            s = this.watch(query).asReadonly();
+            this.queries.set(query, s);
+        }
+        return s;
+    }
+    /**
+     * Pick the entry of a responsive value for the current viewport —
+     * mobile-first, so `{ xs: 1, md: 2 }` gives 1 on `sm` and 2 on `xl`.
+     * A plain value is returned as is. Read inside a `computed` to track it.
+     */
+    resolve(value) {
+        if (!mkIsResponsive(value))
+            return value;
+        const idx = ORDER.indexOf(this.current());
+        for (let i = idx; i >= 0; i--) {
+            const v = value[ORDER[i]];
+            if (v !== undefined)
+                return v;
+        }
+        return undefined;
+    }
+    ngOnDestroy() {
+        for (const off of this.cleanup)
+            off();
+        this.cleanup.length = 0;
+    }
+    watch(query) {
+        const s = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "s" }] : /* istanbul ignore next */ []));
+        if (!this.isBrowser)
+            return s;
+        const mql = this.document.defaultView?.matchMedia?.(query);
+        if (!mql)
+            return s;
+        s.set(mql.matches);
+        const onChange = (e) => s.set(e.matches);
+        mql.addEventListener('change', onChange);
+        this.cleanup.push(() => mql.removeEventListener('change', onChange));
+        return s;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBreakpointService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBreakpointService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBreakpointService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 /**
  * Announces messages to assistive technology via a visually-hidden
  * `aria-live` region. Used by toasts, form validation, sort changes, etc.
@@ -678,7 +814,7 @@ function sideOf(placement) {
         return 'top';
     if (placement.startsWith('bottom'))
         return 'bottom';
-    return placement;
+    return placement.startsWith('left') ? 'left' : 'right';
 }
 function alignOf(placement) {
     if (placement.endsWith('-start'))
@@ -740,8 +876,14 @@ function mkComputeAnchoredPosition(anchor, panel, viewport, opts) {
             left = anchor.left + anchor.width / 2 - w / 2;
     }
     else {
-        // Left/right: centre on the cross (vertical) axis.
-        top = anchor.top + anchor.height / 2 - h / 2;
+        // 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));
@@ -793,6 +935,13 @@ class MkAnchoredPanel {
     /** Clamp the panel inside the viewport. */
     clamp = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "clamp" }] : /* istanbul ignore next */ []));
+    /**
+     * Predicate consulted before an outside pointerdown dismisses the panel.
+     * Return `true` for targets that must keep it open — e.g. a nested panel
+     * (a submenu) that lives in the top layer outside this element.
+     */
+    keepOpenWhen = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keepOpenWhen" }] : /* istanbul ignore next */ []));
     /** Emitted on an outside pointerdown or when the window loses focus. */
     dismiss = output();
     popover = false;
@@ -828,6 +977,8 @@ class MkAnchoredPanel {
         const anchorEl = this.resolveAnchorEl();
         if (anchorEl?.contains(target))
             return;
+        if (this.keepOpenWhen()?.(target))
+            return;
         this.dismiss.emit();
     };
     onWindowBlur = () => this.dismiss.emit();
@@ -1022,7 +1173,7 @@ class MkAnchoredPanel {
         el.remove();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAnchoredPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkAnchoredPanel, isStandalone: true, selector: "[mkAnchoredPanel]", inputs: { anchor: { classPropertyName: "anchor", publicName: "mkAnchoredPanelFor", isSignal: true, isRequired: false, transformFunction: null }, anchorRect: { classPropertyName: "anchorRect", publicName: "anchorRect", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, matchWidth: { classPropertyName: "matchWidth", publicName: "matchWidth", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, clamp: { classPropertyName: "clamp", publicName: "clamp", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, exportAs: ["mkAnchoredPanel"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkAnchoredPanel, isStandalone: true, selector: "[mkAnchoredPanel]", inputs: { anchor: { classPropertyName: "anchor", publicName: "mkAnchoredPanelFor", isSignal: true, isRequired: false, transformFunction: null }, anchorRect: { classPropertyName: "anchorRect", publicName: "anchorRect", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, matchWidth: { classPropertyName: "matchWidth", publicName: "matchWidth", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, clamp: { classPropertyName: "clamp", publicName: "clamp", isSignal: true, isRequired: false, transformFunction: null }, keepOpenWhen: { classPropertyName: "keepOpenWhen", publicName: "keepOpenWhen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, exportAs: ["mkAnchoredPanel"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAnchoredPanel, decorators: [{
             type: Directive,
@@ -1030,7 +1181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     selector: '[mkAnchoredPanel]',
                     exportAs: 'mkAnchoredPanel',
                 }]
-        }], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkAnchoredPanelFor", required: false }] }], anchorRect: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorRect", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], matchWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchWidth", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], clamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "clamp", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
+        }], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkAnchoredPanelFor", required: false }] }], anchorRect: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorRect", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], matchWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchWidth", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], clamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "clamp", required: false }] }], keepOpenWhen: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpenWhen", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
 
 /** The built-in English validation messages. */
 const MK_DEFAULT_VALIDATION = {
@@ -1132,6 +1283,11 @@ const MK_DEFAULT_I18N = {
     chooseWeek: 'Choose week',
     openCalendar: 'Open calendar',
     openTimeList: 'Open time list',
+    moreActions: 'More actions',
+    selectDateTime: 'Select date and time…',
+    chooseDateTime: 'Choose date and time',
+    chooseTime: 'Choose time',
+    openDateTimePicker: 'Open date and time picker',
     daySegment: 'Day',
     monthSegment: 'Month',
     yearSegment: 'Year',
@@ -1147,6 +1303,8 @@ const MK_DEFAULT_I18N = {
     expandHeader: 'Expand',
     expandRow: 'Expand row',
     collapseRow: 'Collapse row',
+    expandTreeRow: 'Show child rows',
+    collapseTreeRow: 'Hide child rows',
     expandGroup: 'Expand group',
     collapseGroup: 'Collapse group',
     groupCount: (count) => `${count} item${count === 1 ? '' : 's'}`,
@@ -1572,5 +1730,5 @@ function mkFirstErrorMessage(errors, strings, overrides) {
  * Generated bundle index. Do not edit.
  */
 
-export { MK_DEFAULT_DATE_NAMES, MK_DEFAULT_I18N, MK_DEFAULT_VALIDATION, MK_I18N, MK_OVERLAY_DATA, MkAnchoredPanel, MkFieldContext, MkFocusTrap, MkLiveAnnouncer, MkOverlayRef, MkOverlayService, MkThemeService, mkComputeAnchoredPosition, mkFirstErrorMessage, mkGetFocusable, mkHighlight, mkHighlightJson, mkUniqueId, mkValidatorChange, provideMkI18n };
+export { MK_BREAKPOINTS, MK_DEFAULT_BREAKPOINTS, MK_DEFAULT_DATE_NAMES, MK_DEFAULT_I18N, MK_DEFAULT_VALIDATION, MK_I18N, MK_OVERLAY_DATA, MkAnchoredPanel, MkBreakpointService, MkFieldContext, MkFocusTrap, MkLiveAnnouncer, MkOverlayRef, MkOverlayService, MkThemeService, mkComputeAnchoredPosition, mkFirstErrorMessage, mkGetFocusable, mkHighlight, mkHighlightJson, mkIsResponsive, mkUniqueId, mkValidatorChange, provideMkI18n };
 //# sourceMappingURL=mk-kit-ui-core.mjs.map