@kouji-ui/core 0.6.0 → 0.6.2

package/fesm2022/kouji-ui-core.mjs

@@ -3613,6 +3613,18 @@ class KjRovingTabindexItemDirective {
     /** @internal */
     active = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Registration is by DI, NOT by a content query on the container: a styled
+        // wrapper (`<kj-tab>`) renders its item inside its OWN view, and a content
+        // query cannot cross that boundary. Querying left every item at
+        // tabindex="-1" whenever the wrappers were used — i.e. in every app — so
+        // the tab strip could not be reached by keyboard at all.
+        const parent = inject(KJ_ROVING_TABINDEX, { optional: true });
+        if (!parent)
+            return;
+        parent.register(this);
+        inject(DestroyRef).onDestroy(() => parent.unregister(this));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjRovingTabindexItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: KjRovingTabindexItemDirective, isStandalone: true, selector: "[kjRovingTabindexItem]", host: { properties: { "attr.tabindex": "active() ? \"0\" : \"-1\"" } }, ngImport: i0 });
 }
@@ -3625,7 +3637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[attr.tabindex]': 'active() ? "0" : "-1"',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /**
  * Implements the roving tabindex pattern for composite widgets such as toolbars and tab lists.
  * Only one item has `tabindex="0"` at a time; arrow keys move focus between items.
@@ -3643,9 +3655,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  */
 class KjRovingTabindex {
     host = inject((ElementRef));
-    items = contentChildren(KjRovingTabindexItemDirective, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
+    registered = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registered" }] : /* istanbul ignore next */ []));
+    /** Items in DOM order — registration order follows creation, which a
+     *  re-order (`@for` with a changing track) does not preserve. */
+    items = computed(() => [...this.registered()].sort((a, b) => a.el.nativeElement.compareDocumentPosition(b.el.nativeElement) &
+        Node.DOCUMENT_POSITION_FOLLOWING
+        ? -1
+        : 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     activeIndex = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    register(item) {
+        this.registered.update((all) => [...all, item]);
+    }
+    /** @internal */
+    unregister(item) {
+        this.registered.update((all) => all.filter((i) => i !== item));
+    }
     /**
      * Restricts arrow-key navigation to a single axis.
      * - `'horizontal'`: only ArrowLeft / ArrowRight move focus.
@@ -3726,7 +3754,7 @@ class KjRovingTabindex {
         all[next].el.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjRovingTabindex, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: KjRovingTabindex, isStandalone: true, selector: "[kjRovingTabindex]", inputs: { kjRovingOrientation: { classPropertyName: "kjRovingOrientation", publicName: "kjRovingOrientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)", "focusin": "onFocusIn($event)" } }, providers: [{ provide: KJ_ROVING_TABINDEX, useExisting: forwardRef(() => KjRovingTabindex) }], queries: [{ propertyName: "items", predicate: KjRovingTabindexItemDirective, descendants: true, isSignal: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjRovingTabindex, isStandalone: true, selector: "[kjRovingTabindex]", inputs: { kjRovingOrientation: { classPropertyName: "kjRovingOrientation", publicName: "kjRovingOrientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)", "focusin": "onFocusIn($event)" } }, providers: [{ provide: KJ_ROVING_TABINDEX, useExisting: forwardRef(() => KjRovingTabindex) }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjRovingTabindex, decorators: [{
             type: Directive,
@@ -3739,9 +3767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '(focusin)': 'onFocusIn($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KjRovingTabindexItemDirective), { ...{
-                            descendants: true,
-                        }, isSignal: true }] }], kjRovingOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjRovingOrientation", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { kjRovingOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjRovingOrientation", required: false }] }] } });
 
 /**
  * Visually hides an element while keeping it accessible to screen readers.
@@ -13496,8 +13522,23 @@ function nextConfirmPopupMessageId() {
  * @doc-category Core/Overlay
  */
 class KjConfirmPopup {
-    /** The overlay controller provided by the trigger directive on the same element. */
-    controller = inject(KjOverlayController, { optional: true });
+    /** The overlay controller, when the trigger sits on this very element. */
+    selfController = inject(KjOverlayController, { optional: true });
+    /**
+     * The controller of a nested `[kjConfirmPopupTrigger]`. The documented
+     * composition puts the trigger on a CHILD of `[kjConfirmPopup]` (see every
+     * example), so the controller is NOT in this element's injector — without
+     * this registration `close()` bailed out and `(kjConfirmed)` never fired.
+     */
+    registered = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registered" }] : /* istanbul ignore next */ []));
+    /** @internal — called by a nested `[kjConfirmPopupTrigger]`. */
+    _registerController(c) {
+        this.registered.set(c);
+    }
+    controllerOf() {
+        return this.selfController ?? this.registered();
+    }
     /** When `true`, the confirm action renders with destructive intent. */
     kjDestructive = input(false, { ...(ngDevMode ? { debugName: "kjDestructive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Where to place initial focus. Default `'cancel'`. */
@@ -13511,10 +13552,8 @@ class KjConfirmPopup {
     kjResult = output();
     // ── KjConfirmPopupContext ──────────────────────────────────────────
     /** Open state forwarded from the underlying controller. */
-    open = (() => {
-        const ctrl = this.controller;
-        return ctrl ? ctrl.isOpen : (() => false);
-    })();
+    open = computed(() => this.controllerOf()?.isOpen() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     /** Whether the confirm action should render destructively. */
     destructive = this.kjDestructive;
     /** Resolved default focus target. */
@@ -13526,7 +13565,7 @@ class KjConfirmPopup {
     constructor() {
         // Bridge the controller's open signal into the resolution contract.
         effect(() => {
-            const isOpen = this.controller?.isOpen() ?? false;
+            const isOpen = this.controllerOf()?.isOpen() ?? false;
             if (isOpen && !this.wasOpen) {
                 this.resolved = false;
             }
@@ -13542,7 +13581,8 @@ class KjConfirmPopup {
      * Close the popup with the given result. `true` confirms, `false` cancels.
      */
     close(result) {
-        if (!this.controller || !this.controller.isOpen())
+        const controller = this.controllerOf();
+        if (!controller || !controller.isOpen())
             return;
         this.resolved = true;
         if (result)
@@ -13550,7 +13590,7 @@ class KjConfirmPopup {
         else
             this.kjCancelled.emit();
         this.kjResult.emit(result);
-        this.controller.close('programmatic');
+        controller.close('programmatic');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjConfirmPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjConfirmPopup, isStandalone: true, selector: "[kjConfirmPopup]", inputs: { kjDestructive: { classPropertyName: "kjDestructive", publicName: "kjDestructive", isSignal: true, isRequired: false, transformFunction: null }, kjDefaultFocus: { classPropertyName: "kjDefaultFocus", publicName: "kjDefaultFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjConfirmed: "kjConfirmed", kjCancelled: "kjCancelled", kjResult: "kjResult" }, providers: [
@@ -13578,6 +13618,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  */
 class KjConfirmPopupTrigger {
     _overlayTrigger = inject(KjOverlayTrigger, { self: true });
+    constructor() {
+        // The trigger normally sits on a CHILD of `[kjConfirmPopup]`, so the root
+        // cannot see this controller through its own injector. Hand it over, or
+        // the confirm/cancel slots resolve nothing.
+        inject(KJ_CONFIRM_POPUP, { optional: true })?._registerController?.(this._overlayTrigger.controller);
+    }
     /** Forwarded controller for sibling `[kjFor]` panels. */
     get controller() {
         return this._overlayTrigger.controller;
@@ -13596,7 +13642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     exportAs: 'kjConfirmPopupTrigger',
                     hostDirectives: [KjPopoverTrigger],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * The floating confirm popup panel. Composes `kj-popover-content` (a
@@ -15550,12 +15596,20 @@ class KjCommandPalette {
                 }
             });
         });
-        // When items register asynchronously (same query), pick first if nothing highlighted.
+        // Re-seed when the visible set changes under the active item: items may
+        // register asynchronously (nothing highlighted yet), and with
+        // `[kjShouldFilter]="false"` the consumer re-renders the list AFTER the
+        // query effect above ran — so that effect highlighted an item that is
+        // already gone. Without the `some()` check the palette kept a stale value,
+        // no row was active, and Enter did nothing (reproducible by typing fast
+        // or pasting a query).
         effect(() => {
             const visible = this.visibleItems();
             const active = this.kjValue();
             const autoFirst = this.kjAutoActivateFirst();
-            if (!autoFirst || visible.length === 0 || active !== null)
+            if (!autoFirst || visible.length === 0)
+                return;
+            if (active !== null && visible.some(i => i.value() === active))
                 return;
             untracked(() => {
                 const nav = this._nav();