@mk-kit/ui 0.35.0 → 0.36.0

package/README.md

@@ -2,7 +2,7 @@
 
 **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
@@ -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.
@@ -1167,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'}`,
@@ -1592,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