@mk-kit/ui 0.45.0 → 0.47.0

package/README.md

@@ -2,12 +2,13 @@
 
 **Themable, accessible Angular component library for admin dashboards, back-offices and internal tools.**
 
-175+ standalone components, directives and services — data tables, charts,
+185+ components (225+ selectors with directives and pipes) and 16 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.
+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).
 
 - **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
@@ -28,7 +29,14 @@ ng add @mk-kit/ui
 **Coming from PrimeNG?** `ng g @mk-kit/ui:migrate-primeng --dry-run` shows
 what the codemod would rewrite (imports, class names, 1:1 selectors, a few
 input names) and what needs a manual touch; without `--dry-run` it applies
-the changes and writes `primeng-migration.md`. Details: <https://mk-kit.dev/migration>. By hand instead:
+the changes and writes `primeng-migration.md`. Details: <https://mk-kit.dev/migration>.
+
+**Scaffolding an admin screen?** `ng g @mk-kit/ui:crud product --fields
+"name!:string,price:currency,status:select=draft|published"` generates a
+working slice — typed model, data service (in-memory, or `--api /api/products`
+for HttpClient), `mk-table` list page with search/sort/pagination/delete,
+`mk-dynamic-form` create/edit page, lazy routes wired into the app, and a
+harness-driven spec. Details: <https://mk-kit.dev/crud>. By hand instead:
 
 ```bash
 npm install @mk-kit/ui
@@ -103,10 +111,13 @@ import { MkDatePicker } from '@mk-kit/ui/datetime';
 ```
 
 Available: `core`, `forms`, `datetime`, `table`, `data`, `navigation`,
-`feedback`, `directives`, `dnd`, `media`, `icon`, `button`, `checkbox`, `chip`,
-`context-menu`, `layout`, `chat`, `query-builder`, `dynamic-form`, `rich-text`, `block-editor`,
-plus `testing` (component harnesses for specs — never re-exported from the
-umbrella). `sideEffects: false` throughout.
+`feedback`, `directives`, `dnd`, `media`, `icon`, `icon/extended` (the opt-in
+305-icon set), `button`, `checkbox`, `chip`, `context-menu`, `layout`, `chat`,
+`query-builder`, `dynamic-form`, `rich-text`, `block-editor`, plus `testing`
+(component harnesses for specs), `locales/pl` (the Polish string pack) and
+`embed` (ship components as shadow-DOM custom elements,
+<https://mk-kit.dev/embed>) — the last three are never re-exported from the
+umbrella. `sideEffects: false` throughout.
 
 ## Theming
 

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

@@ -632,6 +632,47 @@ class MkOverlayRef {
     }
 }
 
+/**
+ * Where mk-kit mounts everything that leaves the component tree: overlay
+ * containers (dialogs), anchored panels (selects, menus, tooltips), toast /
+ * snackbar containers and the tour surfaces. Defaults to `document.body`.
+ *
+ * Override it to confine those surfaces to another element — `@mk-kit/ui/embed`
+ * points it at a themed shadow-DOM host so overlays opened by embedded custom
+ * elements stay isolated from the host page's stylesheet:
+ *
+ * ```ts
+ * { provide: MK_OVERLAY_ROOT, useValue: () => myOverlayHost }
+ * ```
+ */
+const MK_OVERLAY_ROOT = new InjectionToken('MK_OVERLAY_ROOT', {
+    providedIn: 'root',
+    factory: () => {
+        const doc = inject(DOCUMENT);
+        return () => doc.body;
+    },
+});
+/**
+ * The direct child of `document.body` an overlay-root descendant lives under,
+ * crossing shadow boundaries on the way up — `null` when the node is not under
+ * `body` at all. The overlay service uses it to keep the overlay's own host
+ * out of the elements it makes `inert` behind a modal.
+ */
+function mkBodyLevelAncestor(node, body) {
+    let current = node;
+    for (;;) {
+        const root = current.getRootNode();
+        if (root instanceof ShadowRoot) {
+            current = root.host;
+            continue;
+        }
+        let el = current;
+        while (el.parentNode && el.parentNode !== body)
+            el = el.parentNode;
+        return el.parentNode === body ? el : null;
+    }
+}
+
 /**
  * Body-level elements a modal must NOT inert:
  * - `[popover]` — anchored panels / tooltips teleport to `document.body` and
@@ -652,6 +693,7 @@ class MkOverlayService {
     appRef = inject(ApplicationRef);
     envInjector = inject(EnvironmentInjector);
     document = inject(DOCUMENT);
+    overlayRoot = inject(MK_OVERLAY_ROOT);
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     // All coordination state lives on the INSTANCE, not the module: the service
     // is a root singleton, so one app still shares one stack — but each test
@@ -830,7 +872,7 @@ class MkOverlayService {
         });
         overlayRef.componentRef = componentRef;
         this.appRef.attachView(componentRef.hostView);
-        this.document.body.appendChild(container);
+        this.overlayRoot().appendChild(container);
         // Lock body scroll while any overlay is open (see lockBodyScroll for the
         // iOS-proof fixed-body technique and the reference counting).
         if (this.openOverlays++ === 0) {
@@ -846,8 +888,12 @@ class MkOverlayService {
         const isModal = hasBackdrop && role !== 'menu';
         const inerted = [];
         if (isModal) {
+            // With a custom MK_OVERLAY_ROOT the container is nested (possibly behind
+            // a shadow boundary), so resolve which body child carries it — that one
+            // must stay interactive.
+            const containerHost = mkBodyLevelAncestor(container, this.document.body);
             for (const sibling of Array.from(this.document.body.children)) {
-                if (sibling === container ||
+                if (sibling === containerHost ||
                     sibling.hasAttribute('inert') ||
                     sibling.matches(INERT_EXEMPT_SELECTOR)) {
                     continue;
@@ -1002,6 +1048,7 @@ function mkComputeAnchoredPosition(anchor, panel, viewport, opts) {
 class MkAnchoredPanel {
     host = inject(ElementRef);
     document = inject(DOCUMENT);
+    overlayRoot = inject(MK_OVERLAY_ROOT);
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     /** The trigger element to position against. */
     anchor = input(undefined, { ...(ngDevMode ? { debugName: "anchor" } : /* istanbul ignore next */ {}), alias: 'mkAnchoredPanelFor' });
@@ -1080,7 +1127,7 @@ class MkAnchoredPanel {
         // setProperty (not .style.zIndex) so the CSS var() value is accepted. Only
         // matters in the no-Popover fallback; the top layer ignores z-index.
         el.style.setProperty('z-index', 'var(--mk-z-menu)');
-        this.document.body.appendChild(el);
+        this.overlayRoot().appendChild(el);
         // Promote into the top layer when the Popover API is available.
         const withPopover = el;
         if (typeof withPopover.showPopover === 'function') {
@@ -2273,5 +2320,5 @@ function mkQueryToText(group, fields = [], i18n = MK_DEFAULT_I18N) {
  * 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_QUERY_OPERATORS, MK_QUERY_UNARY, MkAnchoredPanel, MkBreakpointService, MkFieldContext, MkFocusTrap, MkLiveAnnouncer, MkOverlayRef, MkOverlayService, MkThemeService, 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, 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 };
 //# sourceMappingURL=mk-kit-ui-core.mjs.map