@kouji-ui/core 0.6.0 → 0.6.1

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.