@ngxsmk/cdk 1.3.1 → 2.0.0

package/fesm2022/ngxsmk-cdk-listbox-keyboard.mjs

@@ -0,0 +1,152 @@
+import { signal } from '@angular/core';
+
+/**
+ * Shared arrow-key navigation for dropdown listboxes.
+ *
+ * Encapsulates `activeIndex`, `move(delta)`, `scrollActiveIntoView()`, and the
+ * full `onKeydown()` handler. Components provide only their option list and
+ * CSS selector.
+ *
+ * ```ts
+ * private readonly kb = new ListboxKeyboard({
+ *   optionSelector: '.ngxsmk-combobox__option',
+ *   options: () => this.filtered(),
+ *   host: this.host,
+ * });
+ * ```
+ */
+class ListboxKeyboard {
+    constructor(config) {
+        this.activeIndex = signal(-1);
+        this.config = config;
+    }
+    /** Override the host element used for scroll queries (e.g. for portals). */
+    setHost(host) {
+        this.config.host = host;
+    }
+    /** Move the active index by `delta` positions, wrapping around. */
+    move(delta) {
+        const opts = this.config.options();
+        if (!opts.length)
+            return;
+        let next = this.activeIndex() + delta;
+        const min = this.config.placeholderIndex ?? 0;
+        for (let guard = 0; guard <= opts.length; guard++) {
+            if (next < min) {
+                next = opts.length - 1;
+            }
+            else if (next > opts.length - 1) {
+                next = min;
+            }
+            if (!this.config.skipDisabled || next === min || !opts[next]?.disabled) {
+                break;
+            }
+            next += delta;
+        }
+        this.activeIndex.set(next);
+        this.scrollActiveIntoView();
+    }
+    /** Scroll the active option into view within the host element. */
+    scrollActiveIntoView() {
+        requestAnimationFrame(() => {
+            const host = this.config.host?.nativeElement;
+            if (!host)
+                return;
+            const items = host.querySelectorAll(this.config.optionSelector);
+            let idx = this.activeIndex();
+            // Offset by 1 if there's a placeholder before the options
+            if (this.config.placeholderIndex !== undefined && idx >= 0) {
+                idx += 1;
+            }
+            items[idx]?.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    /** Jump to the first enabled option. */
+    home() {
+        const opts = this.config.options();
+        if (!opts.length)
+            return;
+        const min = this.config.placeholderIndex ?? 0;
+        if (this.config.skipDisabled) {
+            const first = opts.findIndex((o) => !o.disabled);
+            this.activeIndex.set(first >= 0 ? first : min);
+        }
+        else {
+            this.activeIndex.set(min);
+        }
+        this.scrollActiveIntoView();
+    }
+    /** Jump to the last option. */
+    end() {
+        const opts = this.config.options();
+        if (!opts.length)
+            return;
+        this.activeIndex.set(opts.length - 1);
+        this.scrollActiveIntoView();
+    }
+    /**
+     * Handle a keyboard event for listbox navigation.
+     *
+     * @returns `true` if the event was handled, `false` if the caller should
+     *   handle it (e.g. for typeahead or open/close toggling).
+     */
+    handleKeydown(event, callbacks = {}) {
+        const opts = this.config.options();
+        const isOpen = callbacks.isOpen?.() ?? true;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!isOpen) {
+                    callbacks.onOpen?.();
+                }
+                else {
+                    this.move(1);
+                }
+                return true;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (isOpen) {
+                    this.move(-1);
+                }
+                return true;
+            case 'Home':
+                if (isOpen && opts.length) {
+                    event.preventDefault();
+                    this.home();
+                }
+                return true;
+            case 'End':
+                if (isOpen && opts.length) {
+                    event.preventDefault();
+                    this.end();
+                }
+                return true;
+            case 'Enter':
+            case ' ':
+            case 'Spacebar':
+                if (isOpen) {
+                    event.preventDefault();
+                    const idx = this.activeIndex();
+                    if (idx >= 0 && opts[idx]) {
+                        callbacks.onSelect?.(idx);
+                    }
+                }
+                return true;
+            case 'Escape':
+                if (isOpen) {
+                    event.preventDefault();
+                    callbacks.onClose?.();
+                }
+                return true;
+            default:
+                return false;
+        }
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ListboxKeyboard };
+//# sourceMappingURL=ngxsmk-cdk-listbox-keyboard.mjs.map

package/fesm2022/ngxsmk-cdk-listbox-keyboard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngxsmk-cdk-listbox-keyboard.mjs","sources":["../../../../packages/cdk/listbox-keyboard/listbox-keyboard.ts","../../../../packages/cdk/listbox-keyboard/ngxsmk-cdk-listbox-keyboard.ts"],"sourcesContent":["import { ElementRef, signal } from '@angular/core';\n\n/**\n * Configuration for listbox keyboard navigation.\n *\n * @property optionSelector - CSS selector for option elements\n * @property options - Function returning the current option list\n * @property host - Optional host element for scroll queries (defaults to inject(ElementRef))\n * @property placeholderIndex - Index for the placeholder item (-1 if none)\n * @property skipDisabled - Whether to skip disabled options during navigation\n */\nexport interface ListboxKeyboardConfig {\n  optionSelector: string;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  options: () => any[];\n  host?: ElementRef<HTMLElement>;\n  placeholderIndex?: number;\n  skipDisabled?: boolean;\n}\n\n/**\n * Shared arrow-key navigation for dropdown listboxes.\n *\n * Encapsulates `activeIndex`, `move(delta)`, `scrollActiveIntoView()`, and the\n * full `onKeydown()` handler. Components provide only their option list and\n * CSS selector.\n *\n * ```ts\n * private readonly kb = new ListboxKeyboard({\n *   optionSelector: '.ngxsmk-combobox__option',\n *   options: () => this.filtered(),\n *   host: this.host,\n * });\n * ```\n */\nexport class ListboxKeyboard {\n  readonly activeIndex = signal(-1);\n\n  private readonly config: ListboxKeyboardConfig;\n\n  constructor(config: ListboxKeyboardConfig) {\n    this.config = config;\n  }\n\n  /** Override the host element used for scroll queries (e.g. for portals). */\n  setHost(host: ElementRef<HTMLElement>): void {\n    this.config.host = host;\n  }\n\n  /** Move the active index by `delta` positions, wrapping around. */\n  move(delta: number): void {\n    const opts = this.config.options();\n    if (!opts.length) return;\n\n    let next = this.activeIndex() + delta;\n    const min = this.config.placeholderIndex ?? 0;\n\n    for (let guard = 0; guard <= opts.length; guard++) {\n      if (next < min) {\n        next = opts.length - 1;\n      } else if (next > opts.length - 1) {\n        next = min;\n      }\n      if (!this.config.skipDisabled || next === min || !opts[next]?.disabled) {\n        break;\n      }\n      next += delta;\n    }\n\n    this.activeIndex.set(next);\n    this.scrollActiveIntoView();\n  }\n\n  /** Scroll the active option into view within the host element. */\n  scrollActiveIntoView(): void {\n    requestAnimationFrame(() => {\n      const host = this.config.host?.nativeElement;\n      if (!host) return;\n      const items = host.querySelectorAll<HTMLElement>(this.config.optionSelector);\n      let idx = this.activeIndex();\n      // Offset by 1 if there's a placeholder before the options\n      if (this.config.placeholderIndex !== undefined && idx >= 0) {\n        idx += 1;\n      }\n      items[idx]?.scrollIntoView({ block: 'nearest' });\n    });\n  }\n\n  /** Jump to the first enabled option. */\n  home(): void {\n    const opts = this.config.options();\n    if (!opts.length) return;\n    const min = this.config.placeholderIndex ?? 0;\n    if (this.config.skipDisabled) {\n      const first = opts.findIndex((o) => !o.disabled);\n      this.activeIndex.set(first >= 0 ? first : min);\n    } else {\n      this.activeIndex.set(min);\n    }\n    this.scrollActiveIntoView();\n  }\n\n  /** Jump to the last option. */\n  end(): void {\n    const opts = this.config.options();\n    if (!opts.length) return;\n    this.activeIndex.set(opts.length - 1);\n    this.scrollActiveIntoView();\n  }\n\n  /**\n   * Handle a keyboard event for listbox navigation.\n   *\n   * @returns `true` if the event was handled, `false` if the caller should\n   *   handle it (e.g. for typeahead or open/close toggling).\n   */\n  handleKeydown(\n    event: KeyboardEvent,\n    callbacks: {\n      onSelect?: (index: number) => void;\n      onOpen?: () => void;\n      onClose?: () => void;\n      isOpen?: () => boolean;\n    } = {},\n  ): boolean {\n    const opts = this.config.options();\n    const isOpen = callbacks.isOpen?.() ?? true;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        if (!isOpen) {\n          callbacks.onOpen?.();\n        } else {\n          this.move(1);\n        }\n        return true;\n\n      case 'ArrowUp':\n        event.preventDefault();\n        if (isOpen) {\n          this.move(-1);\n        }\n        return true;\n\n      case 'Home':\n        if (isOpen && opts.length) {\n          event.preventDefault();\n          this.home();\n        }\n        return true;\n\n      case 'End':\n        if (isOpen && opts.length) {\n          event.preventDefault();\n          this.end();\n        }\n        return true;\n\n      case 'Enter':\n      case ' ':\n      case 'Spacebar':\n        if (isOpen) {\n          event.preventDefault();\n          const idx = this.activeIndex();\n          if (idx >= 0 && opts[idx]) {\n            callbacks.onSelect?.(idx);\n          }\n        }\n        return true;\n\n      case 'Escape':\n        if (isOpen) {\n          event.preventDefault();\n          callbacks.onClose?.();\n        }\n        return true;\n\n      default:\n        return false;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}