@nexterajs/ui 0.0.1

package/fesm2022/nexterajs-ui-styling.mjs

@@ -0,0 +1,59 @@
+import { FlexibleConnectedPositionStrategy } from '@angular/cdk/overlay';
+
+/**
+ * Marker class carried by every nxe surface — component hosts and CDK overlay panes alike.
+ *
+ * It is the nxe counterpart of DevExtreme's `.dx-widget` base and is what gives a surface its
+ * font family/size/weight/line-height (see styling/_widget.scss).
+ *
+ * It matters most on overlays: a CDK pane is appended to `<body>`, so a portaled dropdown
+ * inherits the page, not the editor that opened it. Without this class a panel silently falls
+ * back to the host app's body font — which is how the select-box list ended up rendering 14px in
+ * an app whose every other text surface is 12.24px.
+ */
+const NXE_WIDGET_CLASS = 'nxe-widget';
+/** Set on the pane while the overlay is rendered ABOVE its origin instead of below. */
+const NXE_PANE_FLIPPED_CLASS = 'nxe-pane-flipped';
+/**
+ * Build the `panelClass` for a library-created overlay, guaranteeing the widget contract.
+ *
+ *     panelClass: nxePane('nxe-select-pane')
+ *     panelClass: nxePane('nxe-dropdownbox-pane', ...wrapperClass.split(/\s+/))
+ *
+ * Blank/undefined entries are dropped so callers can splat user-supplied class strings directly.
+ */
+function nxePane(...extra) {
+    return [NXE_WIDGET_CLASS, ...extra.filter((c) => !!c && c.trim().length > 0)];
+}
+/**
+ * Track whether a connected overlay has flipped above its origin, exposing it as
+ * {@link NXE_PANE_FLIPPED_CLASS} on the pane.
+ *
+ * DevExtreme drew dropdowns flush against the editor — no border on the shared edge — and moved
+ * that seam to the other side when the popup flipped up
+ * (`.dx-overlay-content.dx-dropdowneditor-overlay-flipped { border-top-width:1px; border-bottom-width:0 }`).
+ * CDK does not emit any equivalent hook, so panels need this to reproduce it.
+ *
+ * Returns the subscription; callers dispose it with the overlay.
+ */
+function trackPaneFlip(overlayRef) {
+    const strategy = overlayRef.getConfig().positionStrategy;
+    if (!(strategy instanceof FlexibleConnectedPositionStrategy)) {
+        return undefined;
+    }
+    return strategy.positionChanges.subscribe((change) => {
+        // Flipped == the overlay's TOP edge is anchored to the origin's top, i.e. it grew upward.
+        const flipped = change.connectionPair.overlayY === 'bottom';
+        const pane = overlayRef.overlayElement;
+        pane?.classList.toggle(NXE_PANE_FLIPPED_CLASS, flipped);
+    });
+}
+
+// @nexterajs/ui/styling — public API.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NXE_PANE_FLIPPED_CLASS, NXE_WIDGET_CLASS, nxePane, trackPaneFlip };
+//# sourceMappingURL=nexterajs-ui-styling.mjs.map

package/fesm2022/nexterajs-ui-styling.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"nexterajs-ui-styling.mjs","sources":["../../../projects/nextera-ui/styling/src/lib/styling/nxe-overlay.ts","../../../projects/nextera-ui/styling/src/public-api.ts","../../../projects/nextera-ui/styling/src/nexterajs-ui-styling.ts"],"sourcesContent":["import { ConnectedOverlayPositionChange, FlexibleConnectedPositionStrategy, OverlayRef } from '@angular/cdk/overlay';\r\nimport { Subscription } from 'rxjs';\r\n\r\n/**\r\n * Marker class carried by every nxe surface — component hosts and CDK overlay panes alike.\r\n *\r\n * It is the nxe counterpart of DevExtreme's `.dx-widget` base and is what gives a surface its\r\n * font family/size/weight/line-height (see styling/_widget.scss).\r\n *\r\n * It matters most on overlays: a CDK pane is appended to `<body>`, so a portaled dropdown\r\n * inherits the page, not the editor that opened it. Without this class a panel silently falls\r\n * back to the host app's body font — which is how the select-box list ended up rendering 14px in\r\n * an app whose every other text surface is 12.24px.\r\n */\r\nexport const NXE_WIDGET_CLASS = 'nxe-widget';\r\n\r\n/** Set on the pane while the overlay is rendered ABOVE its origin instead of below. */\r\nexport const NXE_PANE_FLIPPED_CLASS = 'nxe-pane-flipped';\r\n\r\n/**\r\n * Build the `panelClass` for a library-created overlay, guaranteeing the widget contract.\r\n *\r\n *     panelClass: nxePane('nxe-select-pane')\r\n *     panelClass: nxePane('nxe-dropdownbox-pane', ...wrapperClass.split(/\\s+/))\r\n *\r\n * Blank/undefined entries are dropped so callers can splat user-supplied class strings directly.\r\n */\r\nexport function nxePane(...extra: (string | null | undefined)[]): string[] {\r\n    return [NXE_WIDGET_CLASS, ...extra.filter((c): c is string => !!c && c.trim().length > 0)];\r\n}\r\n\r\n/**\r\n * Track whether a connected overlay has flipped above its origin, exposing it as\r\n * {@link NXE_PANE_FLIPPED_CLASS} on the pane.\r\n *\r\n * DevExtreme drew dropdowns flush against the editor — no border on the shared edge — and moved\r\n * that seam to the other side when the popup flipped up\r\n * (`.dx-overlay-content.dx-dropdowneditor-overlay-flipped { border-top-width:1px; border-bottom-width:0 }`).\r\n * CDK does not emit any equivalent hook, so panels need this to reproduce it.\r\n *\r\n * Returns the subscription; callers dispose it with the overlay.\r\n */\r\nexport function trackPaneFlip(overlayRef: OverlayRef): Subscription | undefined {\r\n    const strategy = overlayRef.getConfig().positionStrategy;\r\n    if (!(strategy instanceof FlexibleConnectedPositionStrategy)) {\r\n        return undefined;\r\n    }\r\n    return strategy.positionChanges.subscribe((change: ConnectedOverlayPositionChange) => {\r\n        // Flipped == the overlay's TOP edge is anchored to the origin's top, i.e. it grew upward.\r\n        const flipped = change.connectionPair.overlayY === 'bottom';\r\n        const pane = overlayRef.overlayElement;\r\n        pane?.classList.toggle(NXE_PANE_FLIPPED_CLASS, flipped);\r\n    });\r\n}\r\n","// @nexterajs/ui/styling — public API.\r\nexport * from './lib/styling/nxe-overlay';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAGA;;;;;;;;;;AAUG;AACI,MAAM,gBAAgB,GAAG;AAEhC;AACO,MAAM,sBAAsB,GAAG;AAEtC;;;;;;;AAOG;AACG,SAAU,OAAO,CAAC,GAAG,KAAoC,EAAA;IAC3D,OAAO,CAAC,gBAAgB,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AAC9F;AAEA;;;;;;;;;;AAUG;AACG,SAAU,aAAa,CAAC,UAAsB,EAAA;IAChD,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,EAAE,CAAC,gBAAgB;AACxD,IAAA,IAAI,EAAE,QAAQ,YAAY,iCAAiC,CAAC,EAAE;AAC1D,QAAA,OAAO,SAAS;IACpB;IACA,OAAO,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,MAAsC,KAAI;;QAEjF,MAAM,OAAO,GAAG,MAAM,CAAC,cAAc,CAAC,QAAQ,KAAK,QAAQ;AAC3D,QAAA,MAAM,IAAI,GAAG,UAAU,CAAC,cAAc;QACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,sBAAsB,EAAE,OAAO,CAAC;AAC3D,IAAA,CAAC,CAAC;AACN;;ACrDA;;ACAA;;AAEG;;"}

package/fesm2022/nexterajs-ui-tree-view.mjs

@@ -0,0 +1,202 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * `nxe-tree-view` — drop-in replacement for DevExtreme `dx-tree-view`.
+ *
+ * The single usage (settings sidebar) feeds a FLAT list (`dataStructure="plain"`) and lets the
+ * widget assemble the hierarchy via `keyExpr`/`parentIdExpr`/`rootValue`; so this builds the tree
+ * internally. Single selection, `selectByClick`, optional search box, and a programmatic
+ * `expandAll()` (called via `@ViewChild(NxeTreeViewComponent).instance.expandAll()` after async
+ * load). `(onItemClick)` emits `{ itemData: <full original row>, ... }` so the navigation handler
+ * keeps reading `event.itemData.url/urlParams/objectName`.
+ */
+class NxeTreeViewComponent {
+    dataSource = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    /** Accepted for parity; this component always assembles a tree from the flat list. */
+    dataStructure = input('plain', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataStructure" }] : /* istanbul ignore next */ []));
+    keyExpr = input('id', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyExpr" }] : /* istanbul ignore next */ []));
+    displayExpr = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayExpr" }] : /* istanbul ignore next */ []));
+    parentIdExpr = input('parentId', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parentIdExpr" }] : /* istanbul ignore next */ []));
+    rootValue = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootValue" }] : /* istanbul ignore next */ []));
+    /** Accepted for parity (no-op: rows carry no `expanded` field; use `expandAll()`). */
+    expandedExpr = input('expanded', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedExpr" }] : /* istanbul ignore next */ []));
+    selectionMode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    selectByClick = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectByClick" }] : /* istanbul ignore next */ []));
+    searchEnabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchEnabled" }] : /* istanbul ignore next */ []));
+    searchMode = input('contains', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchMode" }] : /* istanbul ignore next */ []));
+    /** Accepted for parity (native scrolling is the default here anyway). */
+    useNativeScrolling = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "useNativeScrolling" }] : /* istanbul ignore next */ []));
+    width = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    onItemClick = output();
+    expanded = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    selectedKey = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedKey" }] : /* istanbul ignore next */ []));
+    searchText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    /** DevExtreme `.instance` facade — `expandAll()` is the only method used. */
+    get instance() {
+        return this;
+    }
+    widthStyle = computed(() => {
+        const w = this.width();
+        return typeof w === 'number' ? `${w}px` : w;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widthStyle" }] : /* istanbul ignore next */ []));
+    tree = computed(() => {
+        const rows = (this.dataSource() ?? []);
+        const keyF = this.keyExpr();
+        const parentF = this.parentIdExpr();
+        const dispF = this.displayExpr();
+        const root = this.rootValue();
+        const byKey = new Map();
+        for (const r of rows) {
+            byKey.set(r[keyF], {
+                key: r[keyF],
+                text: String(r[dispF] ?? ''),
+                data: r,
+                children: [],
+                hasChildren: false,
+                level: 0,
+            });
+        }
+        const roots = [];
+        for (const r of rows) {
+            const node = byKey.get(r[keyF]);
+            const parentKey = r[parentF];
+            const parent = parentKey !== root ? byKey.get(parentKey) : undefined;
+            if (parent) {
+                parent.children.push(node);
+                parent.hasChildren = true;
+            }
+            else {
+                roots.push(node);
+            }
+        }
+        const assignLevels = (nodes, level) => {
+            for (const n of nodes) {
+                n.level = level;
+                assignLevels(n.children, level + 1);
+            }
+        };
+        assignLevels(roots, 0);
+        return roots;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
+    /** Flattened list of currently-visible nodes (respects expand state + search). */
+    visibleNodes = computed(() => {
+        const out = [];
+        const query = this.searchText().trim().toLowerCase();
+        if (query) {
+            const match = (text) => {
+                const t = text.toLowerCase();
+                switch (this.searchMode()) {
+                    case 'startswith':
+                        return t.startsWith(query);
+                    case 'equals':
+                        return t === query;
+                    default:
+                        return t.includes(query);
+                }
+            };
+            const walkAll = (nodes) => {
+                for (const n of nodes) {
+                    if (match(n.text)) {
+                        out.push(n);
+                    }
+                    walkAll(n.children);
+                }
+            };
+            walkAll(this.tree());
+        }
+        else {
+            const expanded = this.expanded();
+            const walk = (nodes) => {
+                for (const n of nodes) {
+                    out.push(n);
+                    if (n.hasChildren && expanded.has(n.key)) {
+                        walk(n.children);
+                    }
+                }
+            };
+            walk(this.tree());
+        }
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleNodes" }] : /* istanbul ignore next */ []));
+    expandAll() {
+        const keys = new Set();
+        const walk = (nodes) => {
+            for (const n of nodes) {
+                if (n.hasChildren) {
+                    keys.add(n.key);
+                }
+                walk(n.children);
+            }
+        };
+        walk(this.tree());
+        this.expanded.set(keys);
+    }
+    collapseAll() {
+        this.expanded.set(new Set());
+    }
+    isExpanded(node) {
+        return this.expanded().has(node.key);
+    }
+    toggle(node, event) {
+        event.stopPropagation();
+        this.expanded.update((set) => {
+            const next = new Set(set);
+            next.has(node.key) ? next.delete(node.key) : next.add(node.key);
+            return next;
+        });
+    }
+    onNodeClick(node, event) {
+        if (this.selectByClick() && this.selectionMode() !== 'none') {
+            this.selectedKey.set(node.key);
+        }
+        this.onItemClick.emit({
+            itemData: node.data,
+            node,
+            event,
+            component: this,
+            element: event.currentTarget,
+        });
+    }
+    onSearch(event) {
+        this.searchText.set(event.target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTreeViewComponent, isStandalone: true, selector: "nxe-tree-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, dataStructure: { classPropertyName: "dataStructure", publicName: "dataStructure", isSignal: true, isRequired: false, transformFunction: null }, keyExpr: { classPropertyName: "keyExpr", publicName: "keyExpr", isSignal: true, isRequired: false, transformFunction: null }, displayExpr: { classPropertyName: "displayExpr", publicName: "displayExpr", isSignal: true, isRequired: false, transformFunction: null }, parentIdExpr: { classPropertyName: "parentIdExpr", publicName: "parentIdExpr", isSignal: true, isRequired: false, transformFunction: null }, rootValue: { classPropertyName: "rootValue", publicName: "rootValue", isSignal: true, isRequired: false, transformFunction: null }, expandedExpr: { classPropertyName: "expandedExpr", publicName: "expandedExpr", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectByClick: { classPropertyName: "selectByClick", publicName: "selectByClick", isSignal: true, isRequired: false, transformFunction: null }, searchEnabled: { classPropertyName: "searchEnabled", publicName: "searchEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchMode: { classPropertyName: "searchMode", publicName: "searchMode", isSignal: true, isRequired: false, transformFunction: null }, useNativeScrolling: { classPropertyName: "useNativeScrolling", publicName: "useNativeScrolling", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class.nxe-treeview-with-search": "searchEnabled()", "style.width": "widthStyle()" }, classAttribute: "nxe-widget nxe-tree-view" }, ngImport: i0, template: "@if (searchEnabled()) {\r\n    <div class=\"nxe-treeview-search\">\r\n        <input\r\n            class=\"nxe-treeview-search-input\"\r\n            type=\"text\"\r\n            placeholder=\"Search\"\r\n            [value]=\"searchText()\"\r\n            (input)=\"onSearch($event)\" />\r\n    </div>\r\n}\r\n\r\n<ul class=\"nxe-treeview-node-container nxe-treeview-node-container-opened\">\r\n    @for (node of visibleNodes(); track node.key) {\r\n        <li\r\n            class=\"nxe-treeview-node\"\r\n            [class.nxe-treeview-node-is-leaf]=\"!node.hasChildren\"\r\n            [class.nxe-state-selected]=\"selectionMode() !== 'none' && node.key === selectedKey()\"\r\n            [style.padding-left.px]=\"node.level * 15\">\r\n            <div class=\"nxe-treeview-item\" (click)=\"onNodeClick(node, $event)\">\r\n                @if (node.hasChildren) {\r\n                    <span\r\n                        class=\"nxe-treeview-toggle-item-visibility\"\r\n                        [class.nxe-treeview-toggle-item-visibility-opened]=\"isExpanded(node)\"\r\n                        (click)=\"toggle(node, $event)\">\r\n                    </span>\r\n                } @else {\r\n                    <span class=\"nxe-treeview-expander-icon-stub\"></span>\r\n                }\r\n                <div class=\"nxe-treeview-item-content\">\r\n                    <span>{{ node.text }}</span>\r\n                </div>\r\n            </div>\r\n        </li>\r\n    }\r\n</ul>\r\n", styles: ["nxe-tree-view{display:block;height:100%;overflow-y:auto;border:1px solid #ddd;border-radius:4px}nxe-tree-view .nxe-treeview-search{padding:4px 6px}nxe-tree-view .nxe-treeview-search .nxe-treeview-search-input{width:100%;box-sizing:border-box;padding:5px 8px;border:1px solid #ddd;border-radius:4px;font-size:1em;outline:none}nxe-tree-view .nxe-treeview-search .nxe-treeview-search-input:focus{border-color:#30374c}nxe-tree-view .nxe-treeview-node-container{list-style:none;margin:0;padding:0}nxe-tree-view .nxe-treeview-node{list-style:none}nxe-tree-view .nxe-treeview-item{display:flex;align-items:center;gap:4px;height:32px;box-sizing:border-box;padding:5px 8px 5px 10px;cursor:pointer;border-radius:4px}nxe-tree-view .nxe-treeview-item:hover{background-color:#0000000a}nxe-tree-view .nxe-treeview-node.nxe-state-selected>.nxe-treeview-item{background-color:#30374c1f;font-weight:500}nxe-tree-view .nxe-treeview-item-content{flex:1 1 auto;min-width:0}nxe-tree-view .nxe-treeview-item-content span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-tree-view .nxe-treeview-expander-icon-stub{display:inline-block;width:16px;height:16px;flex:0 0 16px}nxe-tree-view .nxe-treeview-toggle-item-visibility{display:inline-block;position:relative;width:16px;height:16px;flex:0 0 16px;cursor:pointer}nxe-tree-view .nxe-treeview-toggle-item-visibility:before{content:\"\";position:absolute;left:5px;top:4px;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid #444;transition:transform .15s ease;transform-origin:40% 50%}nxe-tree-view .nxe-treeview-toggle-item-visibility.nxe-treeview-toggle-item-visibility-opened:before{transform:rotate(90deg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTreeViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-tree-view', standalone: true, host: {
+                        class: 'nxe-widget nxe-tree-view',
+                        '[class.nxe-treeview-with-search]': 'searchEnabled()',
+                        '[style.width]': 'widthStyle()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (searchEnabled()) {\r\n    <div class=\"nxe-treeview-search\">\r\n        <input\r\n            class=\"nxe-treeview-search-input\"\r\n            type=\"text\"\r\n            placeholder=\"Search\"\r\n            [value]=\"searchText()\"\r\n            (input)=\"onSearch($event)\" />\r\n    </div>\r\n}\r\n\r\n<ul class=\"nxe-treeview-node-container nxe-treeview-node-container-opened\">\r\n    @for (node of visibleNodes(); track node.key) {\r\n        <li\r\n            class=\"nxe-treeview-node\"\r\n            [class.nxe-treeview-node-is-leaf]=\"!node.hasChildren\"\r\n            [class.nxe-state-selected]=\"selectionMode() !== 'none' && node.key === selectedKey()\"\r\n            [style.padding-left.px]=\"node.level * 15\">\r\n            <div class=\"nxe-treeview-item\" (click)=\"onNodeClick(node, $event)\">\r\n                @if (node.hasChildren) {\r\n                    <span\r\n                        class=\"nxe-treeview-toggle-item-visibility\"\r\n                        [class.nxe-treeview-toggle-item-visibility-opened]=\"isExpanded(node)\"\r\n                        (click)=\"toggle(node, $event)\">\r\n                    </span>\r\n                } @else {\r\n                    <span class=\"nxe-treeview-expander-icon-stub\"></span>\r\n                }\r\n                <div class=\"nxe-treeview-item-content\">\r\n                    <span>{{ node.text }}</span>\r\n                </div>\r\n            </div>\r\n        </li>\r\n    }\r\n</ul>\r\n", styles: ["nxe-tree-view{display:block;height:100%;overflow-y:auto;border:1px solid #ddd;border-radius:4px}nxe-tree-view .nxe-treeview-search{padding:4px 6px}nxe-tree-view .nxe-treeview-search .nxe-treeview-search-input{width:100%;box-sizing:border-box;padding:5px 8px;border:1px solid #ddd;border-radius:4px;font-size:1em;outline:none}nxe-tree-view .nxe-treeview-search .nxe-treeview-search-input:focus{border-color:#30374c}nxe-tree-view .nxe-treeview-node-container{list-style:none;margin:0;padding:0}nxe-tree-view .nxe-treeview-node{list-style:none}nxe-tree-view .nxe-treeview-item{display:flex;align-items:center;gap:4px;height:32px;box-sizing:border-box;padding:5px 8px 5px 10px;cursor:pointer;border-radius:4px}nxe-tree-view .nxe-treeview-item:hover{background-color:#0000000a}nxe-tree-view .nxe-treeview-node.nxe-state-selected>.nxe-treeview-item{background-color:#30374c1f;font-weight:500}nxe-tree-view .nxe-treeview-item-content{flex:1 1 auto;min-width:0}nxe-tree-view .nxe-treeview-item-content span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-tree-view .nxe-treeview-expander-icon-stub{display:inline-block;width:16px;height:16px;flex:0 0 16px}nxe-tree-view .nxe-treeview-toggle-item-visibility{display:inline-block;position:relative;width:16px;height:16px;flex:0 0 16px;cursor:pointer}nxe-tree-view .nxe-treeview-toggle-item-visibility:before{content:\"\";position:absolute;left:5px;top:4px;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid #444;transition:transform .15s ease;transform-origin:40% 50%}nxe-tree-view .nxe-treeview-toggle-item-visibility.nxe-treeview-toggle-item-visibility-opened:before{transform:rotate(90deg)}\n"] }]
+        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], dataStructure: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataStructure", required: false }] }], keyExpr: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExpr", required: false }] }], displayExpr: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExpr", required: false }] }], parentIdExpr: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentIdExpr", required: false }] }], rootValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootValue", required: false }] }], expandedExpr: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedExpr", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectByClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectByClick", required: false }] }], searchEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchEnabled", required: false }] }], searchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchMode", required: false }] }], useNativeScrolling: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativeScrolling", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }] } });
+
+// @nexterajs/ui/tree-view — public API.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NxeTreeViewComponent };
+//# sourceMappingURL=nexterajs-ui-tree-view.mjs.map

package/fesm2022/nexterajs-ui-tree-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"nexterajs-ui-tree-view.mjs","sources":["../../../projects/nextera-ui/tree-view/src/lib/tree-view/nxe-tree-view.component.ts","../../../projects/nextera-ui/tree-view/src/lib/tree-view/nxe-tree-view.component.html","../../../projects/nextera-ui/tree-view/src/public-api.ts","../../../projects/nextera-ui/tree-view/src/nexterajs-ui-tree-view.ts"],"sourcesContent":["import {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    computed,\r\n    input,\r\n    output,\r\n    signal,\r\n    ViewEncapsulation,\r\n} from '@angular/core';\r\n\r\n/** A node in the assembled tree (children built from the flat `parentIdExpr` list). */\r\nexport interface NxeTreeNode {\r\n    key: unknown;\r\n    text: string;\r\n    /** The original data row (consumers read `itemData` off the click event = this). */\r\n    data: Record<string, unknown>;\r\n    children: NxeTreeNode[];\r\n    hasChildren: boolean;\r\n    level: number;\r\n}\r\n\r\n/** DevExtreme-shaped `onItemClick` payload (consumers read `event.itemData.<field>`). */\r\nexport interface NxeTreeItemClickEvent {\r\n    itemData: Record<string, unknown>;\r\n    node: NxeTreeNode;\r\n    event: Event;\r\n    component: NxeTreeViewComponent;\r\n    element: HTMLElement;\r\n}\r\n\r\n/**\r\n * `nxe-tree-view` — drop-in replacement for DevExtreme `dx-tree-view`.\r\n *\r\n * The single usage (settings sidebar) feeds a FLAT list (`dataStructure=\"plain\"`) and lets the\r\n * widget assemble the hierarchy via `keyExpr`/`parentIdExpr`/`rootValue`; so this builds the tree\r\n * internally. Single selection, `selectByClick`, optional search box, and a programmatic\r\n * `expandAll()` (called via `@ViewChild(NxeTreeViewComponent).instance.expandAll()` after async\r\n * load). `(onItemClick)` emits `{ itemData: <full original row>, ... }` so the navigation handler\r\n * keeps reading `event.itemData.url/urlParams/objectName`.\r\n */\r\n@Component({\r\n    selector: 'nxe-tree-view',\r\n    standalone: true,\r\n    templateUrl: './nxe-tree-view.component.html',\r\n    styleUrl: './nxe-tree-view.component.scss',\r\n    host: {\r\n        class: 'nxe-widget nxe-tree-view',\r\n        '[class.nxe-treeview-with-search]': 'searchEnabled()',\r\n        '[style.width]': 'widthStyle()',\r\n    },\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class NxeTreeViewComponent {\r\n    readonly dataSource = input<readonly unknown[] | null | undefined>([]);\r\n    /** Accepted for parity; this component always assembles a tree from the flat list. */\r\n    readonly dataStructure = input<'plain' | 'tree'>('plain');\r\n    readonly keyExpr = input<string>('id');\r\n    readonly displayExpr = input<string>('text');\r\n    readonly parentIdExpr = input<string>('parentId');\r\n    readonly rootValue = input<unknown>(0);\r\n    /** Accepted for parity (no-op: rows carry no `expanded` field; use `expandAll()`). */\r\n    readonly expandedExpr = input<string>('expanded');\r\n    readonly selectionMode = input<'single' | 'multiple' | 'none'>('single');\r\n    readonly selectByClick = input(false);\r\n    readonly searchEnabled = input(false);\r\n    readonly searchMode = input<'contains' | 'startswith' | 'equals'>('contains');\r\n    /** Accepted for parity (native scrolling is the default here anyway). */\r\n    readonly useNativeScrolling = input(true);\r\n    readonly width = input<number | string | undefined>(undefined);\r\n\r\n    readonly onItemClick = output<NxeTreeItemClickEvent>();\r\n\r\n    readonly expanded = signal<ReadonlySet<unknown>>(new Set());\r\n    readonly selectedKey = signal<unknown>(null);\r\n    readonly searchText = signal('');\r\n\r\n    /** DevExtreme `.instance` facade — `expandAll()` is the only method used. */\r\n    get instance(): this {\r\n        return this;\r\n    }\r\n\r\n    protected readonly widthStyle = computed(() => {\r\n        const w = this.width();\r\n        return typeof w === 'number' ? `${w}px` : w;\r\n    });\r\n\r\n    private readonly tree = computed<NxeTreeNode[]>(() => {\r\n        const rows = (this.dataSource() ?? []) as Record<string, unknown>[];\r\n        const keyF = this.keyExpr();\r\n        const parentF = this.parentIdExpr();\r\n        const dispF = this.displayExpr();\r\n        const root = this.rootValue();\r\n\r\n        const byKey = new Map<unknown, NxeTreeNode>();\r\n        for (const r of rows) {\r\n            byKey.set(r[keyF], {\r\n                key: r[keyF],\r\n                text: String(r[dispF] ?? ''),\r\n                data: r,\r\n                children: [],\r\n                hasChildren: false,\r\n                level: 0,\r\n            });\r\n        }\r\n        const roots: NxeTreeNode[] = [];\r\n        for (const r of rows) {\r\n            const node = byKey.get(r[keyF])!;\r\n            const parentKey = r[parentF];\r\n            const parent = parentKey !== root ? byKey.get(parentKey) : undefined;\r\n            if (parent) {\r\n                parent.children.push(node);\r\n                parent.hasChildren = true;\r\n            } else {\r\n                roots.push(node);\r\n            }\r\n        }\r\n        const assignLevels = (nodes: NxeTreeNode[], level: number): void => {\r\n            for (const n of nodes) {\r\n                n.level = level;\r\n                assignLevels(n.children, level + 1);\r\n            }\r\n        };\r\n        assignLevels(roots, 0);\r\n        return roots;\r\n    });\r\n\r\n    /** Flattened list of currently-visible nodes (respects expand state + search). */\r\n    protected readonly visibleNodes = computed<NxeTreeNode[]>(() => {\r\n        const out: NxeTreeNode[] = [];\r\n        const query = this.searchText().trim().toLowerCase();\r\n        if (query) {\r\n            const match = (text: string): boolean => {\r\n                const t = text.toLowerCase();\r\n                switch (this.searchMode()) {\r\n                    case 'startswith':\r\n                        return t.startsWith(query);\r\n                    case 'equals':\r\n                        return t === query;\r\n                    default:\r\n                        return t.includes(query);\r\n                }\r\n            };\r\n            const walkAll = (nodes: NxeTreeNode[]): void => {\r\n                for (const n of nodes) {\r\n                    if (match(n.text)) {\r\n                        out.push(n);\r\n                    }\r\n                    walkAll(n.children);\r\n                }\r\n            };\r\n            walkAll(this.tree());\r\n        } else {\r\n            const expanded = this.expanded();\r\n            const walk = (nodes: NxeTreeNode[]): void => {\r\n                for (const n of nodes) {\r\n                    out.push(n);\r\n                    if (n.hasChildren && expanded.has(n.key)) {\r\n                        walk(n.children);\r\n                    }\r\n                }\r\n            };\r\n            walk(this.tree());\r\n        }\r\n        return out;\r\n    });\r\n\r\n    expandAll(): void {\r\n        const keys = new Set<unknown>();\r\n        const walk = (nodes: NxeTreeNode[]): void => {\r\n            for (const n of nodes) {\r\n                if (n.hasChildren) {\r\n                    keys.add(n.key);\r\n                }\r\n                walk(n.children);\r\n            }\r\n        };\r\n        walk(this.tree());\r\n        this.expanded.set(keys);\r\n    }\r\n\r\n    collapseAll(): void {\r\n        this.expanded.set(new Set());\r\n    }\r\n\r\n    protected isExpanded(node: NxeTreeNode): boolean {\r\n        return this.expanded().has(node.key);\r\n    }\r\n\r\n    protected toggle(node: NxeTreeNode, event: Event): void {\r\n        event.stopPropagation();\r\n        this.expanded.update((set) => {\r\n            const next = new Set(set);\r\n            next.has(node.key) ? next.delete(node.key) : next.add(node.key);\r\n            return next;\r\n        });\r\n    }\r\n\r\n    protected onNodeClick(node: NxeTreeNode, event: Event): void {\r\n        if (this.selectByClick() && this.selectionMode() !== 'none') {\r\n            this.selectedKey.set(node.key);\r\n        }\r\n        this.onItemClick.emit({\r\n            itemData: node.data,\r\n            node,\r\n            event,\r\n            component: this,\r\n            element: event.currentTarget as HTMLElement,\r\n        });\r\n    }\r\n\r\n    protected onSearch(event: Event): void {\r\n        this.searchText.set((event.target as HTMLInputElement).value);\r\n    }\r\n}\r\n","@if (searchEnabled()) {\r\n    <div class=\"nxe-treeview-search\">\r\n        <input\r\n            class=\"nxe-treeview-search-input\"\r\n            type=\"text\"\r\n            placeholder=\"Search\"\r\n            [value]=\"searchText()\"\r\n            (input)=\"onSearch($event)\" />\r\n    </div>\r\n}\r\n\r\n<ul class=\"nxe-treeview-node-container nxe-treeview-node-container-opened\">\r\n    @for (node of visibleNodes(); track node.key) {\r\n        <li\r\n            class=\"nxe-treeview-node\"\r\n            [class.nxe-treeview-node-is-leaf]=\"!node.hasChildren\"\r\n            [class.nxe-state-selected]=\"selectionMode() !== 'none' && node.key === selectedKey()\"\r\n            [style.padding-left.px]=\"node.level * 15\">\r\n            <div class=\"nxe-treeview-item\" (click)=\"onNodeClick(node, $event)\">\r\n                @if (node.hasChildren) {\r\n                    <span\r\n                        class=\"nxe-treeview-toggle-item-visibility\"\r\n                        [class.nxe-treeview-toggle-item-visibility-opened]=\"isExpanded(node)\"\r\n                        (click)=\"toggle(node, $event)\">\r\n                    </span>\r\n                } @else {\r\n                    <span class=\"nxe-treeview-expander-icon-stub\"></span>\r\n                }\r\n                <div class=\"nxe-treeview-item-content\">\r\n                    <span>{{ node.text }}</span>\r\n                </div>\r\n            </div>\r\n        </li>\r\n    }\r\n</ul>\r\n","// @nexterajs/ui/tree-view — public API.\r\nexport * from './lib/tree-view/nxe-tree-view.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/nexterajs-ui-validation.mjs

@@ -0,0 +1,269 @@
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, contentChildren, signal, Injector, DestroyRef } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { distinctUntilChanged, startWith, pairwise } from 'rxjs';
+import { NXE_VALIDATION_TARGET, NxeValidationGroupRegistry } from '@nexterajs/ui/core';
+
+/**
+ * The message shown when a rule fails and the caller gave none.
+ *
+ * These are DevExtreme's own defaults, verbatim from its `validation-*` message keys. Without
+ * them a rule with no `message` blocks its group and displays nothing at all, because every
+ * editor renders its error bubble under `@if (validationError())` — falsy for the empty string.
+ */
+const NXE_DEFAULT_VALIDATION_MESSAGES = {
+    required: 'Required',
+    email: 'Email is invalid',
+    pattern: 'Value does not match pattern',
+    range: 'Value is out of range',
+    compare: 'Values do not match',
+    custom: 'Value is invalid',
+};
+/**
+ * `nxe-validation-rule` — drop-in for DevExtreme `dxi-validation-rule`.
+ *
+ * A no-template configuration child of `nxe-validator`. The codebase uses the universal element
+ * with a `type` attribute (overwhelmingly `type="required"`), so a single component with a
+ * `type` input covers 100% of usage.
+ */
+class NxeValidationRuleComponent {
+    type = input('required', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    message = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** `compare` rule: returns the value to compare against. Mirrors `comparisonTarget`. */
+    comparisonTarget = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "comparisonTarget" }] : /* istanbul ignore next */ []));
+    /** `compare` rule comparison operator (default `==`). */
+    comparisonType = input('==', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "comparisonType" }] : /* istanbul ignore next */ []));
+    /** `custom` rule: returns true when valid. Mirrors `validationCallback`. */
+    validationCallback = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "validationCallback" }] : /* istanbul ignore next */ []));
+    /** `pattern` rule. */
+    pattern = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
+    /** `range` rule bounds (DevExtreme RangeRule: empty values pass, bounds are inclusive). */
+    min = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /**
+     * The message to show when this rule fails: the caller's, or DevExtreme's default for the
+     * rule type. Whitespace counts as absent — a message of spaces is still an empty bubble.
+     */
+    resolvedMessage = computed(() => this.message().trim() || NXE_DEFAULT_VALIDATION_MESSAGES[this.type()] || '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMessage" }] : /* istanbul ignore next */ []));
+    /** Whether `value` satisfies this rule. */
+    evaluate(value) {
+        switch (this.type()) {
+            case 'required':
+                return !this.isEmpty(value);
+            case 'compare':
+                return this.compare(value);
+            case 'range':
+                return this.isEmpty(value) || this.inRange(value);
+            case 'pattern':
+                return this.isEmpty(value) || this.matchesPattern(value);
+            case 'email':
+                return this.isEmpty(value) || /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(String(value));
+            case 'custom':
+                return this.validationCallback()?.({ value, rule: this }) ?? true;
+            default:
+                return true;
+        }
+    }
+    /** DevExtreme RequiredRule semantics: null/undefined/''/false are "not specified". */
+    isEmpty(value) {
+        return (value === null ||
+            value === undefined ||
+            value === '' ||
+            value === false ||
+            (Array.isArray(value) && value.length === 0));
+    }
+    compare(value) {
+        const target = this.comparisonTarget()?.();
+        switch (this.comparisonType()) {
+            case '===':
+                return value === target;
+            case '!=':
+                // eslint-disable-next-line eqeqeq
+                return value != target;
+            case '!==':
+                return value !== target;
+            case '>':
+                return value > target;
+            case '<':
+                return value < target;
+            case '>=':
+                return value >= target;
+            case '<=':
+                return value <= target;
+            case '==':
+            default:
+                // eslint-disable-next-line eqeqeq
+                return value == target;
+        }
+    }
+    inRange(value) {
+        const num = Number(value);
+        if (Number.isNaN(num)) {
+            return false;
+        }
+        const min = this.min();
+        const max = this.max();
+        return (min === undefined || num >= min) && (max === undefined || num <= max);
+    }
+    matchesPattern(value) {
+        const pattern = this.pattern();
+        if (!pattern) {
+            return true;
+        }
+        const regex = typeof pattern === 'string' ? new RegExp(pattern) : pattern;
+        return regex.test(String(value));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeValidationRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeValidationRuleComponent, isStandalone: true, selector: "nxe-validation-rule", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, comparisonTarget: { classPropertyName: "comparisonTarget", publicName: "comparisonTarget", isSignal: true, isRequired: false, transformFunction: null }, comparisonType: { classPropertyName: "comparisonType", publicName: "comparisonType", isSignal: true, isRequired: false, transformFunction: null }, validationCallback: { classPropertyName: "validationCallback", publicName: "validationCallback", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeValidationRuleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-validation-rule',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], comparisonTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonTarget", required: false }] }], comparisonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonType", required: false }] }], validationCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationCallback", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+
+/**
+ * `nxe-validator` — drop-in for DevExtreme `dx-validator`.
+ *
+ * Placed inside an editor (`<nxe-text-box><nxe-validator><nxe-validation-rule .../></nxe-validator></nxe-text-box>`),
+ * it adapts the editor via {@link NXE_VALIDATION_TARGET}, collects its `nxe-validation-rule`
+ * children, and registers into the {@link NxeValidationGroupRegistry} under the editor's
+ * `validationGroup`. Validation is on-demand (matching DevExtreme: not auto-run on change) —
+ * `validate()` is invoked by `nxe-button[validationGroup]` (group-level) or directly.
+ */
+class NxeValidatorComponent {
+    target = inject(NXE_VALIDATION_TARGET, { optional: true });
+    registry = inject(NxeValidationGroupRegistry);
+    rules = contentChildren(NxeValidationRuleComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rules" }] : /* istanbul ignore next */ []));
+    /** Explicit group; otherwise inherited from the wrapped editor's `validationGroup`. */
+    validationGroupInput = input(undefined, { ...(ngDevMode ? { debugName: "validationGroupInput" } : /* istanbul ignore next */ {}), alias: 'validationGroup' });
+    // Bare validators (no group) join the implicit default group `''` — mirroring DevExtreme's
+    // global default group — so a groupless `nxe-button` validates them.
+    group = computed(() => this.validationGroupInput() ?? this.target?.validationGroup() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+    /** Last validation outcome (false once a rule has failed, until re-validated). */
+    isValid = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []));
+    /** DevExtreme parity: existing code calls `validator.instance.validate()` via `@ViewChild`. */
+    get instance() {
+        return this;
+    }
+    member = { validate: () => this.validate() };
+    constructor() {
+        // Register/unregister into the named group reactively (handles dynamic group changes).
+        /* ⚠ NOT an effect - UI-48. The registration follows ONE signal, and the unregister that
+           `onCleanup` used to run is the pairwise step below: a group change unregisters the old
+           one before registering the new, and destruction unregisters the last. */
+        toObservable(this.group, { injector: inject(Injector) })
+            .pipe(distinctUntilChanged(), startWith(undefined), pairwise(), takeUntilDestroyed())
+            .subscribe(([previous, group]) => {
+            if (previous !== undefined) {
+                this.registry.unregister(previous, this.member);
+            }
+            this.registry.register(group, this.member);
+        });
+        inject(DestroyRef).onDestroy(() => this.registry.unregister(this.group(), this.member));
+    }
+    /** Run all rules against the editor's current value; pushes the first failing message. */
+    validate() {
+        const value = this.target?.getValue();
+        for (const rule of this.rules()) {
+            if (!rule.evaluate(value)) {
+                // resolvedMessage(), not message(): a rule declared without one would otherwise
+                // push the empty string, and every editor guards its bubble with
+                // `@if (validationError())` — so the field would block the group in silence.
+                const message = rule.resolvedMessage();
+                this.isValid.set(false);
+                this.target?.setValidationError(message);
+                return {
+                    isValid: false,
+                    brokenRules: [{ type: rule.type(), message }],
+                    status: 'invalid',
+                };
+            }
+        }
+        this.isValid.set(true);
+        this.target?.setValidationError(null);
+        return { isValid: true, brokenRules: [], status: 'valid' };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeValidatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: NxeValidatorComponent, isStandalone: true, selector: "nxe-validator", inputs: { validationGroupInput: { classPropertyName: "validationGroupInput", publicName: "validationGroup", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "rules", predicate: NxeValidationRuleComponent, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeValidatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-validator',
+                    standalone: true,
+                    template: '<ng-content />',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: () => [], propDecorators: { rules: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeValidationRuleComponent), { isSignal: true }] }], validationGroupInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationGroup", required: false }] }] } });
+
+class NxeValidators {
+    /**
+     * Check for empty (optional fields) values
+     *
+     * @param value
+     */
+    static isEmptyInputValue(value) {
+        return value == null || value.length === 0;
+    }
+    /**
+     * Must match validator
+     *
+     * @param controlPath A dot-delimited string values that define the path to the control.
+     * @param matchingControlPath A dot-delimited string values that define the path to the matching control.
+     */
+    static mustMatch(controlPath, matchingControlPath) {
+        return (formGroup) => {
+            // Get the control and matching control
+            const control = formGroup.get(controlPath);
+            const matchingControl = formGroup.get(matchingControlPath);
+            // Return if control or matching control doesn't exist
+            if (!control || !matchingControl) {
+                return null;
+            }
+            // Delete the mustMatch error to reset the error on the matching control
+            if (matchingControl.hasError('mustMatch')) {
+                delete matchingControl.errors.mustMatch;
+                matchingControl.updateValueAndValidity();
+            }
+            // Don't validate empty values on the matching control
+            // Don't validate if values are matching
+            if (this.isEmptyInputValue(matchingControl.value) || control.value === matchingControl.value) {
+                return null;
+            }
+            // Prepare the validation errors
+            const errors = { mustMatch: true };
+            // Set the validation error on the matching control
+            matchingControl.setErrors(errors);
+            // Return the errors
+            return errors;
+        };
+    }
+}
+
+// @nexterajs/ui/validation — public API.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NXE_DEFAULT_VALIDATION_MESSAGES, NxeValidationRuleComponent, NxeValidatorComponent, NxeValidators };
+//# sourceMappingURL=nexterajs-ui-validation.mjs.map