@kouji-ui/core 0.11.1 → 0.12.0

package/fesm2022/kouji-ui-core.mjs

@@ -5330,6 +5330,12 @@ class KjListNavigator {
     ...(ngDevMode ? [{ debugName: "kjPageSize" }] : /* istanbul ignore next */ []));
     /** Activate item on pointer hover. Default: `false`. */
     kjActivateOnHover = input(false, { ...(ngDevMode ? { debugName: "kjActivateOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Publish `aria-activedescendant` on this host in `'activedescendant'`
+     * mode. Turn off when another element keeps DOM focus and publishes
+     * `activeId` itself (a search field above the list). Default: `true`.
+     */
+    kjHostActiveDescendant = input(true, { ...(ngDevMode ? { debugName: "kjHostActiveDescendant" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Focus model. `'activedescendant'` (default) keeps DOM focus on the
      * navigator host and signals the active option via
@@ -5705,7 +5711,7 @@ class KjListNavigator {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjListNavigator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjListNavigator, isStandalone: true, selector: "[kjListNavigator]", inputs: { kjOrientation: { classPropertyName: "kjOrientation", publicName: "kjOrientation", isSignal: true, isRequired: false, transformFunction: null }, kjWrap: { classPropertyName: "kjWrap", publicName: "kjWrap", isSignal: true, isRequired: false, transformFunction: null }, kjPageSize: { classPropertyName: "kjPageSize", publicName: "kjPageSize", isSignal: true, isRequired: false, transformFunction: null }, kjActivateOnHover: { classPropertyName: "kjActivateOnHover", publicName: "kjActivateOnHover", isSignal: true, isRequired: false, transformFunction: null }, kjFocusMode: { classPropertyName: "kjFocusMode", publicName: "kjFocusMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjActiveChange: "kjActiveChange" }, host: { listeners: { "keydown": "_onKeydown($event)", "focusin": "_onFocusin($event)" }, properties: { "attr.aria-activedescendant": "kjFocusMode() === \"activedescendant\" ? activeId() : null" } }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjListNavigator, isStandalone: true, selector: "[kjListNavigator]", inputs: { kjOrientation: { classPropertyName: "kjOrientation", publicName: "kjOrientation", isSignal: true, isRequired: false, transformFunction: null }, kjWrap: { classPropertyName: "kjWrap", publicName: "kjWrap", isSignal: true, isRequired: false, transformFunction: null }, kjPageSize: { classPropertyName: "kjPageSize", publicName: "kjPageSize", isSignal: true, isRequired: false, transformFunction: null }, kjActivateOnHover: { classPropertyName: "kjActivateOnHover", publicName: "kjActivateOnHover", isSignal: true, isRequired: false, transformFunction: null }, kjHostActiveDescendant: { classPropertyName: "kjHostActiveDescendant", publicName: "kjHostActiveDescendant", isSignal: true, isRequired: false, transformFunction: null }, kjFocusMode: { classPropertyName: "kjFocusMode", publicName: "kjFocusMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjActiveChange: "kjActiveChange" }, host: { listeners: { "keydown": "_onKeydown($event)", "focusin": "_onFocusin($event)" }, properties: { "attr.aria-activedescendant": "kjFocusMode() === \"activedescendant\" && kjHostActiveDescendant() ? activeId() : null" } }, providers: [
             {
                 provide: KJ_LIST_FOCUS_MODE,
                 // The factory closes over the directive instance via `inject`,
@@ -5734,12 +5740,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         // really holds focus — must not publish it as well. A container that pins
                         // `KJ_LIST_FOCUS_MODE_DEFAULT` to `'roving'` (menu, menubar, tree-select)
                         // therefore drops the attribute entirely.
-                        '[attr.aria-activedescendant]': 'kjFocusMode() === "activedescendant" ? activeId() : null',
+                        '[attr.aria-activedescendant]': 'kjFocusMode() === "activedescendant" && kjHostActiveDescendant() ? activeId() : null',
                         '(keydown)': '_onKeydown($event)',
                         '(focusin)': '_onFocusin($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { kjOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOrientation", required: false }] }], kjWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjWrap", required: false }] }], kjPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPageSize", required: false }] }], kjActivateOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjActivateOnHover", required: false }] }], kjFocusMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFocusMode", required: false }] }], kjActiveChange: [{ type: i0.Output, args: ["kjActiveChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { kjOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOrientation", required: false }] }], kjWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjWrap", required: false }] }], kjPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPageSize", required: false }] }], kjActivateOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjActivateOnHover", required: false }] }], kjHostActiveDescendant: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjHostActiveDescendant", required: false }] }], kjFocusMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFocusMode", required: false }] }], kjActiveChange: [{ type: i0.Output, args: ["kjActiveChange"] }] } });
 /** Types of `<input>` that hold text the user types (Space is a character). */
 const NON_TEXT_INPUT_TYPES = new Set([
     'button',
@@ -26409,6 +26415,9 @@ class KjSelect {
     ...(ngDevMode ? [{ debugName: "_multiple" }] : /* istanbul ignore next */ []));
     /** Whether multi-select is enabled. */
     multiple = this._multiple.asReadonly();
+    /** @internal — written by `KjSelectContent`'s `kjSearchable` input. */
+    _searchable = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_searchable" }] : /* istanbul ignore next */ []));
     /** @internal — set by `KjSelectTrigger` at construction time. */
     _triggerEl = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_triggerEl" }] : /* istanbul ignore next */ []));
@@ -26437,6 +26446,13 @@ class KjSelect {
      * not to this one.
      */
     items = ownListItems(this, this.allItems);
+    /**
+     * Implements `KjListNavigatorConfig.visibleItems`: the items a wrapper has
+     * not hidden through `KjListItem.setVisible` (a search filter, a folded
+     * group). The navigator and type-ahead walk only these.
+     */
+    visibleItems = computed(() => this.items().filter(i => i.visible()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
     /** Implements `KjListNavigatorConfig.mode`. */
     mode = computed(() => this._multiple() ? 'multi' : 'single', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
@@ -26564,7 +26580,7 @@ class KjSelectTrigger {
         this._overlayTrigger.attachPanel(panel);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjSelectTrigger, isStandalone: true, selector: "[kjSelectTrigger]", inputs: { kjMultiple: { classPropertyName: "kjMultiple", publicName: "kjMultiple", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" } }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjSelectTrigger, isStandalone: true, selector: "[kjSelectTrigger]", inputs: { kjMultiple: { classPropertyName: "kjMultiple", publicName: "kjMultiple", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.aria-haspopup": "select?._searchable() ? \"dialog\" : \"listbox\"" } }, providers: [
             {
                 provide: KJ_OVERLAY_TRIGGER_EVENT_STRATEGY,
                 useFactory: () => listboxClickTrigger(),
@@ -26604,6 +26620,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ],
                     host: {
                         '(keydown)': 'onKeydown($event)',
+                        // Runs after the composed `KjOverlayTrigger`'s binding, so it wins: a
+                        // searchable panel is a dialog (search field + listbox), not a listbox.
+                        '[attr.aria-haspopup]': 'select?._searchable() ? "dialog" : "listbox"',
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { kjMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMultiple", required: false }] }] } });
@@ -26760,7 +26779,15 @@ class KjSelectContent {
     ...(ngDevMode ? [{ debugName: "kjAlign" }] : /* istanbul ignore next */ []));
     /** Pixel offset between trigger and panel. */
     kjOffset = input(4, { ...(ngDevMode ? { debugName: "kjOffset" } : /* istanbul ignore next */ {}), transform: pxOffset(4) });
+    /**
+     * The panel holds a search field above an inner listbox the consumer
+     * renders: the panel becomes `role="dialog"` and the trigger advertises
+     * `aria-haspopup="dialog"`. Defaults to `false`.
+     */
+    kjSearchable = input(false, { ...(ngDevMode ? { debugName: "kjSearchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     constructor() {
+        const select = inject(KJ_SELECT, { optional: true });
+        effect(() => select?._searchable.set(this.kjSearchable()));
         injectAnchoredPosition({
             side: this.kjSide,
             align: this.kjAlign,
@@ -26769,7 +26796,7 @@ class KjSelectContent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSelectContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjSelectContent, isStandalone: true, selector: "kj-select-content", inputs: { kjSide: { classPropertyName: "kjSide", publicName: "kjSide", isSignal: true, isRequired: false, transformFunction: null }, kjAlign: { classPropertyName: "kjAlign", publicName: "kjAlign", isSignal: true, isRequired: false, transformFunction: null }, kjOffset: { classPropertyName: "kjOffset", publicName: "kjOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-multiselectable": "selection.mode() === \"multi\" ? \"true\" : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjSelectContent, isStandalone: true, selector: "kj-select-content", inputs: { kjSide: { classPropertyName: "kjSide", publicName: "kjSide", isSignal: true, isRequired: false, transformFunction: null }, kjAlign: { classPropertyName: "kjAlign", publicName: "kjAlign", isSignal: true, isRequired: false, transformFunction: null }, kjOffset: { classPropertyName: "kjOffset", publicName: "kjOffset", isSignal: true, isRequired: false, transformFunction: null }, kjSearchable: { classPropertyName: "kjSearchable", publicName: "kjSearchable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "kjSearchable() ? \"dialog\" : \"listbox\"", "attr.aria-multiselectable": "!kjSearchable() && selection.mode() === \"multi\" ? \"true\" : null" } }, providers: [
             { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'listbox' },
             { provide: KJ_OVERLAY_MOUNT_STRATEGY, useFactory: () => bodyPortal() },
             { provide: KJ_OVERLAY_POSITION_STRATEGY, useFactory: () => anchoredTo() },
@@ -26777,7 +26804,7 @@ class KjSelectContent {
             // what screen readers announce, so no `aria-activedescendant` is needed
             // on a panel that never holds focus itself.
             { provide: KJ_LIST_FOCUS_MODE_DEFAULT, useValue: 'roving' },
-        ], hostDirectives: [{ directive: KjOverlayPanel, inputs: ["kjFor", "kjFor"] }, { directive: KjListNavigator }, { directive: KjListPanelFocus }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], hostDirectives: [{ directive: KjOverlayPanel, inputs: ["kjFor", "kjFor"] }, { directive: KjListNavigator, inputs: ["kjFocusMode", "kjFocusMode", "kjHostActiveDescendant", "kjHostActiveDescendant"] }, { directive: KjListPanelFocus }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSelectContent, decorators: [{
             type: Component,
@@ -26786,7 +26813,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     standalone: true,
                     hostDirectives: [
                         { directive: KjOverlayPanel, inputs: ['kjFor'] },
-                        KjListNavigator,
+                        // `kjFocusMode` is forwarded so a wrapper that keeps DOM focus in a
+                        // search field can switch the panel to `aria-activedescendant`.
+                        { directive: KjListNavigator, inputs: ['kjFocusMode', 'kjHostActiveDescendant'] },
                         KjListPanelFocus,
                     ],
                     providers: [
@@ -26799,13 +26828,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         { provide: KJ_LIST_FOCUS_MODE_DEFAULT, useValue: 'roving' },
                     ],
                     host: {
-                        '[attr.aria-multiselectable]': 'selection.mode() === "multi" ? "true" : null',
+                        // With `kjSearchable` the panel is a `dialog` holding a search combobox
+                        // and an inner `listbox` the wrapper renders, so the listbox-only
+                        // attributes move to that inner element. These run after the composed
+                        // panel's / navigator's own bindings, so they win.
+                        '[attr.role]': 'kjSearchable() ? "dialog" : "listbox"',
+                        '[attr.aria-multiselectable]': '!kjSearchable() && selection.mode() === "multi" ? "true" : null',
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     template: `<ng-content />`,
                 }]
-        }], ctorParameters: () => [], propDecorators: { kjSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSide", required: false }] }], kjAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAlign", required: false }] }], kjOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOffset", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { kjSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSide", required: false }] }], kjAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAlign", required: false }] }], kjOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOffset", required: false }] }], kjSearchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSearchable", required: false }] }] } });
 
 /**
  * Individual option inside a `<kj-select-content>`. Public inputs