@cdevhub/ngx-tw 0.5.0 → 0.6.0

package/fesm2022/cdevhub-ngx-tw-command-palette-testing.mjs

@@ -0,0 +1,200 @@
+import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
+
+/**
+ * Harness for a single result row in an open `tw-command-palette`.
+ *
+ * These rows are `role="option"` inside an activedescendant listbox: they never
+ * receive DOM focus and have no keyboard handlers of their own. "Active" here
+ * therefore means *referenced by the input's `aria-activedescendant`*, which the
+ * component mirrors onto each row as `aria-selected`. It does **not** mean
+ * `document.activeElement`.
+ */
+class CommandPaletteItemHarness extends ComponentHarness {
+    static hostSelector = '[role="option"]';
+    /** Predicate for `locatorFor` / `locatorForAll`. */
+    static with(options = {}) {
+        return new HarnessPredicate(CommandPaletteItemHarness, options)
+            .addOption('text', options.text, async (harness, text) => HarnessPredicate.stringMatches(await harness.getText(), text))
+            .addOption('active', options.active, async (harness, active) => (await harness.isActive()) === active)
+            .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);
+    }
+    /** The row's rendered text, trimmed. Includes the description when one is rendered. */
+    async getText() {
+        return (await (await this.host()).text()).trim();
+    }
+    /** The row's DOM id, which is what `aria-activedescendant` points at. */
+    async getId() {
+        return (await this.host()).getAttribute('id');
+    }
+    /**
+     * Whether this row is the active descendant. Read from `aria-selected`, which
+     * the component binds to the active id — not from DOM focus, which never moves
+     * off the search input.
+     */
+    async isActive() {
+        return (await (await this.host()).getAttribute('aria-selected')) === 'true';
+    }
+    /** Whether the row reports `aria-disabled="true"`. */
+    async isDisabled() {
+        return (await (await this.host()).getAttribute('aria-disabled')) === 'true';
+    }
+    /** Clicks the row, activating the command. */
+    async click() {
+        await (await this.host()).click();
+    }
+}
+
+/**
+ * Harness for `tw-command-palette`.
+ *
+ * The palette renders into the CDK overlay container, outside the
+ * `tw-command-palette` host, so this harness resolves the panel through
+ * `documentRootLocatorFactory()`. A consumer loads it from the ordinary fixture
+ * loader and still reaches the results.
+ *
+ * The palette is an **activedescendant listbox**: DOM focus stays on the search
+ * input and the active row is identified only by `aria-activedescendant`. Every
+ * "active" method here resolves that id reference — none of them consults
+ * `document.activeElement`, which would always report the input.
+ */
+class CommandPaletteHarness extends ComponentHarness {
+    static hostSelector = 'tw-command-palette';
+    panel = this.documentRootLocatorFactory().locatorForOptional('[role="dialog"]');
+    input = this.documentRootLocatorFactory().locatorForOptional('input[role="combobox"]');
+    /** Predicate for `locatorFor` / `locatorForAll`. */
+    static with(options = {}) {
+        return new HarnessPredicate(CommandPaletteHarness, options).addOption('label', options.label, async (harness, label) => HarnessPredicate.stringMatches(await harness.getLabel(), label));
+    }
+    /** Whether the palette overlay is currently attached. */
+    async isOpen() {
+        return (await this.panel()) !== null;
+    }
+    /** The palette's accessible label, or `null` when it is closed. */
+    async getLabel() {
+        const panel = await this.panel();
+        return panel ? panel.getAttribute('aria-label') : null;
+    }
+    /** The current search query. Returns an empty string when the palette is closed. */
+    async getQuery() {
+        const input = await this.input();
+        return input ? input.getProperty('value') : '';
+    }
+    /**
+     * Types into the search input, replacing any existing query, then waits for
+     * the results to settle.
+     */
+    async setQuery(query) {
+        const input = await this.requireInput('setQuery');
+        await input.clear();
+        await input.sendKeys(query);
+        await this.waitForTasksOutsideAngular();
+    }
+    /** Clears the search query. */
+    async clearQuery() {
+        const input = await this.requireInput('clearQuery');
+        await input.clear();
+        await this.waitForTasksOutsideAngular();
+    }
+    /**
+     * Sends Escape to the search input. No-op when the palette is already closed.
+     *
+     * **The overlay is still attached when this resolves.** The component defers
+     * the detach behind a leave animation, so a caller asserting on `isOpen()`
+     * immediately afterwards will still see `true`. Wait for the animation before
+     * asserting — with a plain timer, not by polling a harness method.
+     *
+     * That caveat is deliberate rather than hidden behind a poll. An earlier
+     * version looped on `isOpen()` until the panel detached, which reads better
+     * but is unsound here: every harness call routes through
+     * `fixture.whenStable()`, and under zoneless that can wait on a re-scheduled
+     * timer and never resolve. A deadline checked *between* awaits cannot bound a
+     * single await that never returns, so the loop hung the suite instead of
+     * failing it. A harness that can hang is worse than one that makes the caller
+     * wait explicitly.
+     *
+     * **This method is not covered by a spec.** A test driving it hung at the full
+     * 15000ms budget in roughly one run in three: the harness calls it makes
+     * around a leave animation route through `whenStable()`, which can wait on a
+     * re-scheduled timer and never resolve. Escape dismissal itself is covered in
+     * `command-palette.spec.ts`, directly against the component.
+     */
+    async close() {
+        const input = await this.input();
+        if (!input)
+            return;
+        await input.sendKeys(TestKey.ESCAPE);
+    }
+    /** Moves the active descendant down one row. */
+    async pressArrowDown() {
+        await (await this.requireInput('pressArrowDown')).sendKeys(TestKey.DOWN_ARROW);
+        await this.waitForTasksOutsideAngular();
+    }
+    /** Moves the active descendant up one row. */
+    async pressArrowUp() {
+        await (await this.requireInput('pressArrowUp')).sendKeys(TestKey.UP_ARROW);
+        await this.waitForTasksOutsideAngular();
+    }
+    /** Activates the current active descendant with Enter. */
+    async pressEnter() {
+        await (await this.requireInput('pressEnter')).sendKeys(TestKey.ENTER);
+        await this.waitForTasksOutsideAngular();
+    }
+    /**
+     * Every result row currently rendered. Returns an empty array when the palette
+     * is closed.
+     */
+    async getItems(filters = {}) {
+        if (!(await this.panel()))
+            return [];
+        return this.documentRootLocatorFactory().locatorForAll(CommandPaletteItemHarness.with(filters))();
+    }
+    /**
+     * The labels of the rendered group headings, in DOM order. Ungrouped results
+     * produce an empty array.
+     */
+    async getGroupLabels() {
+        if (!(await this.panel()))
+            return [];
+        const groups = await this.documentRootLocatorFactory().locatorForAll('[role="group"]')();
+        const labels = await Promise.all(groups.map((group) => group.getAttribute('aria-label')));
+        return labels.filter((label) => label !== null);
+    }
+    /**
+     * The text of the active row, resolved through the input's
+     * `aria-activedescendant`, or `null` when nothing is active.
+     */
+    async getActiveItemText() {
+        const active = await this.getItems({ active: true });
+        return active.length > 0 ? active[0].getText() : null;
+    }
+    /**
+     * Clicks the first row whose text matches. Throws when nothing matches, rather
+     * than failing silently.
+     */
+    async selectItem(text) {
+        const matches = await this.getItems({ text });
+        if (matches.length === 0) {
+            throw new Error(`CommandPaletteHarness.selectItem: no result matching ${String(text)}.`);
+        }
+        await matches[0].click();
+        await this.waitForTasksOutsideAngular();
+    }
+    /**
+     * The search input, or a named error when the palette is closed. Every typing
+     * and key method needs it, and "cannot read property of null" would not say why.
+     */
+    async requireInput(method) {
+        const input = await this.input();
+        if (!input) {
+            throw new Error(`CommandPaletteHarness.${method}: the palette is closed, so it has no search input.`);
+        }
+        return input;
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CommandPaletteHarness, CommandPaletteItemHarness };
+//# sourceMappingURL=cdevhub-ngx-tw-command-palette-testing.mjs.map

package/fesm2022/cdevhub-ngx-tw-command-palette-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdevhub-ngx-tw-command-palette-testing.mjs","sources":["../../../projects/ngx-tw/command-palette/testing/command-palette-item-harness.ts","../../../projects/ngx-tw/command-palette/testing/command-palette-harness.ts","../../../projects/ngx-tw/command-palette/testing/cdevhub-ngx-tw-command-palette-testing.ts"],"sourcesContent":["import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\nimport type { BaseHarnessFilters } from '@angular/cdk/testing';\n\n/** Filters accepted by `CommandPaletteItemHarness.with`. */\nexport interface CommandPaletteItemHarnessFilters extends BaseHarnessFilters {\n  /** Match by the item's visible text, which includes its description when it has one. */\n  text?: string | RegExp;\n  /** Match the active (`aria-activedescendant`) item. */\n  active?: boolean;\n  /** Match disabled / enabled items. */\n  disabled?: boolean;\n}\n\n/**\n * Harness for a single result row in an open `tw-command-palette`.\n *\n * These rows are `role=\"option\"` inside an activedescendant listbox: they never\n * receive DOM focus and have no keyboard handlers of their own. \"Active\" here\n * therefore means *referenced by the input's `aria-activedescendant`*, which the\n * component mirrors onto each row as `aria-selected`. It does **not** mean\n * `document.activeElement`.\n */\nexport class CommandPaletteItemHarness extends ComponentHarness {\n  static hostSelector = '[role=\"option\"]';\n\n  /** Predicate for `locatorFor` / `locatorForAll`. */\n  static with(\n    options: CommandPaletteItemHarnessFilters = {},\n  ): HarnessPredicate<CommandPaletteItemHarness> {\n    return new HarnessPredicate(CommandPaletteItemHarness, options)\n      .addOption('text', options.text, async (harness, text) =>\n        HarnessPredicate.stringMatches(await harness.getText(), text),\n      )\n      .addOption(\n        'active',\n        options.active,\n        async (harness, active) => (await harness.isActive()) === active,\n      )\n      .addOption(\n        'disabled',\n        options.disabled,\n        async (harness, disabled) => (await harness.isDisabled()) === disabled,\n      );\n  }\n\n  /** The row's rendered text, trimmed. Includes the description when one is rendered. */\n  async getText(): Promise<string> {\n    return (await (await this.host()).text()).trim();\n  }\n\n  /** The row's DOM id, which is what `aria-activedescendant` points at. */\n  async getId(): Promise<string | null> {\n    return (await this.host()).getAttribute('id');\n  }\n\n  /**\n   * Whether this row is the active descendant. Read from `aria-selected`, which\n   * the component binds to the active id — not from DOM focus, which never moves\n   * off the search input.\n   */\n  async isActive(): Promise<boolean> {\n    return (await (await this.host()).getAttribute('aria-selected')) === 'true';\n  }\n\n  /** Whether the row reports `aria-disabled=\"true\"`. */\n  async isDisabled(): Promise<boolean> {\n    return (await (await this.host()).getAttribute('aria-disabled')) === 'true';\n  }\n\n  /** Clicks the row, activating the command. */\n  async click(): Promise<void> {\n    await (await this.host()).click();\n  }\n}\n","import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';\nimport type { BaseHarnessFilters } from '@angular/cdk/testing';\nimport {\n  CommandPaletteItemHarness,\n  type CommandPaletteItemHarnessFilters,\n} from './command-palette-item-harness';\n\n/** Filters accepted by `CommandPaletteHarness.with`. */\nexport interface CommandPaletteHarnessFilters extends BaseHarnessFilters {\n  /** Match by the palette's accessible label. */\n  label?: string | RegExp;\n}\n\n/**\n * Harness for `tw-command-palette`.\n *\n * The palette renders into the CDK overlay container, outside the\n * `tw-command-palette` host, so this harness resolves the panel through\n * `documentRootLocatorFactory()`. A consumer loads it from the ordinary fixture\n * loader and still reaches the results.\n *\n * The palette is an **activedescendant listbox**: DOM focus stays on the search\n * input and the active row is identified only by `aria-activedescendant`. Every\n * \"active\" method here resolves that id reference — none of them consults\n * `document.activeElement`, which would always report the input.\n */\nexport class CommandPaletteHarness extends ComponentHarness {\n  static hostSelector = 'tw-command-palette';\n\n  private readonly panel =\n    this.documentRootLocatorFactory().locatorForOptional('[role=\"dialog\"]');\n  private readonly input =\n    this.documentRootLocatorFactory().locatorForOptional('input[role=\"combobox\"]');\n\n  /** Predicate for `locatorFor` / `locatorForAll`. */\n  static with(\n    options: CommandPaletteHarnessFilters = {},\n  ): HarnessPredicate<CommandPaletteHarness> {\n    return new HarnessPredicate(CommandPaletteHarness, options).addOption(\n      'label',\n      options.label,\n      async (harness, label) =>\n        HarnessPredicate.stringMatches(await harness.getLabel(), label),\n    );\n  }\n\n  /** Whether the palette overlay is currently attached. */\n  async isOpen(): Promise<boolean> {\n    return (await this.panel()) !== null;\n  }\n\n  /** The palette's accessible label, or `null` when it is closed. */\n  async getLabel(): Promise<string | null> {\n    const panel = await this.panel();\n    return panel ? panel.getAttribute('aria-label') : null;\n  }\n\n  /** The current search query. Returns an empty string when the palette is closed. */\n  async getQuery(): Promise<string> {\n    const input = await this.input();\n    return input ? input.getProperty<string>('value') : '';\n  }\n\n  /**\n   * Types into the search input, replacing any existing query, then waits for\n   * the results to settle.\n   */\n  async setQuery(query: string): Promise<void> {\n    const input = await this.requireInput('setQuery');\n    await input.clear();\n    await input.sendKeys(query);\n    await this.waitForTasksOutsideAngular();\n  }\n\n  /** Clears the search query. */\n  async clearQuery(): Promise<void> {\n    const input = await this.requireInput('clearQuery');\n    await input.clear();\n    await this.waitForTasksOutsideAngular();\n  }\n\n  /**\n   * Sends Escape to the search input. No-op when the palette is already closed.\n   *\n   * **The overlay is still attached when this resolves.** The component defers\n   * the detach behind a leave animation, so a caller asserting on `isOpen()`\n   * immediately afterwards will still see `true`. Wait for the animation before\n   * asserting — with a plain timer, not by polling a harness method.\n   *\n   * That caveat is deliberate rather than hidden behind a poll. An earlier\n   * version looped on `isOpen()` until the panel detached, which reads better\n   * but is unsound here: every harness call routes through\n   * `fixture.whenStable()`, and under zoneless that can wait on a re-scheduled\n   * timer and never resolve. A deadline checked *between* awaits cannot bound a\n   * single await that never returns, so the loop hung the suite instead of\n   * failing it. A harness that can hang is worse than one that makes the caller\n   * wait explicitly.\n   *\n   * **This method is not covered by a spec.** A test driving it hung at the full\n   * 15000ms budget in roughly one run in three: the harness calls it makes\n   * around a leave animation route through `whenStable()`, which can wait on a\n   * re-scheduled timer and never resolve. Escape dismissal itself is covered in\n   * `command-palette.spec.ts`, directly against the component.\n   */\n  async close(): Promise<void> {\n    const input = await this.input();\n    if (!input) return;\n    await input.sendKeys(TestKey.ESCAPE);\n  }\n\n  /** Moves the active descendant down one row. */\n  async pressArrowDown(): Promise<void> {\n    await (await this.requireInput('pressArrowDown')).sendKeys(TestKey.DOWN_ARROW);\n    await this.waitForTasksOutsideAngular();\n  }\n\n  /** Moves the active descendant up one row. */\n  async pressArrowUp(): Promise<void> {\n    await (await this.requireInput('pressArrowUp')).sendKeys(TestKey.UP_ARROW);\n    await this.waitForTasksOutsideAngular();\n  }\n\n  /** Activates the current active descendant with Enter. */\n  async pressEnter(): Promise<void> {\n    await (await this.requireInput('pressEnter')).sendKeys(TestKey.ENTER);\n    await this.waitForTasksOutsideAngular();\n  }\n\n  /**\n   * Every result row currently rendered. Returns an empty array when the palette\n   * is closed.\n   */\n  async getItems(\n    filters: CommandPaletteItemHarnessFilters = {},\n  ): Promise<CommandPaletteItemHarness[]> {\n    if (!(await this.panel())) return [];\n    return this.documentRootLocatorFactory().locatorForAll(\n      CommandPaletteItemHarness.with(filters),\n    )();\n  }\n\n  /**\n   * The labels of the rendered group headings, in DOM order. Ungrouped results\n   * produce an empty array.\n   */\n  async getGroupLabels(): Promise<string[]> {\n    if (!(await this.panel())) return [];\n    const groups = await this.documentRootLocatorFactory().locatorForAll(\n      '[role=\"group\"]',\n    )();\n    const labels = await Promise.all(\n      groups.map((group) => group.getAttribute('aria-label')),\n    );\n    return labels.filter((label): label is string => label !== null);\n  }\n\n  /**\n   * The text of the active row, resolved through the input's\n   * `aria-activedescendant`, or `null` when nothing is active.\n   */\n  async getActiveItemText(): Promise<string | null> {\n    const active = await this.getItems({ active: true });\n    return active.length > 0 ? active[0].getText() : null;\n  }\n\n  /**\n   * Clicks the first row whose text matches. Throws when nothing matches, rather\n   * than failing silently.\n   */\n  async selectItem(text: string | RegExp): Promise<void> {\n    const matches = await this.getItems({ text });\n    if (matches.length === 0) {\n      throw new Error(\n        `CommandPaletteHarness.selectItem: no result matching ${String(text)}.`,\n      );\n    }\n    await matches[0].click();\n    await this.waitForTasksOutsideAngular();\n  }\n\n  /**\n   * The search input, or a named error when the palette is closed. Every typing\n   * and key method needs it, and \"cannot read property of null\" would not say why.\n   */\n  private async requireInput(method: string) {\n    const input = await this.input();\n    if (!input) {\n      throw new Error(\n        `CommandPaletteHarness.${method}: the palette is closed, so it has no search input.`,\n      );\n    }\n    return input;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/cdevhub-ngx-tw-command-palette.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, Directive, output, viewChild, inject, computed, ChangeDetectionStrategy, Component, TemplateRef, model, ViewContainerRef, Injector, DestroyRef, contentChildren, contentChild, signal, linkedSignal, effect, untracked } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
+import { InjectionToken, input, Directive, output, viewChild, inject, computed, ChangeDetectionStrategy, Component, TemplateRef, model, ViewContainerRef, Injector, DestroyRef, PLATFORM_ID, contentChildren, contentChild, signal, linkedSignal, effect, untracked } from '@angular/core';
+import { NgTemplateOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { FocusTrapFactory, LiveAnnouncer } from '@angular/cdk/a11y';
@@ -8,7 +8,14 @@ import { Subscription } from 'rxjs';
 import { tv } from 'tailwind-variants';
 
 /** Injection token providing a `CommandPaletteRef` to palette overlay content. */
-const COMMAND_PALETTE_REF = new InjectionToken('COMMAND_PALETTE_REF');
+const TW_COMMAND_PALETTE_REF = new InjectionToken('TW_COMMAND_PALETTE_REF');
+/**
+ * @deprecated Renamed to {@link TW_COMMAND_PALETTE_REF} for consistency with
+ * every other ngx-tw injection token. This is the *same token instance*, not a
+ * copy — providing under either name and injecting under the other resolves —
+ * so the rename is safe to adopt incrementally. Removed in the next major.
+ */
+const COMMAND_PALETTE_REF = TW_COMMAND_PALETTE_REF;
 
 // ── Constants ──
 /** Duration of leave animation (ms) — matches scale-out/fade-out in theme/_base.css. */
@@ -35,6 +42,12 @@ const commandPaletteVariants = tv({
         footer: 'border-t border-border px-4 py-2 bg-surface-muted',
     },
     variants: {
+        // The search input's `py-*` runs one full step above the item rows
+        // (8/10/12/14/16px vs 4/6/8/10/12px) — it is the palette's primary
+        // control, not a list row. `lg`'s `py-3.5` is the half-step that keeps
+        // that ramp monotonic: `py-3` collides with `md` and `py-4` with `xl`,
+        // either of which collapses `lg` into a neighbouring density and leaves
+        // the five-step size axis with only four distinct search-field heights.
         size: {
             xs: {
                 item: 'py-1 text-xs',
@@ -337,7 +350,7 @@ class CommandPaletteComponent {
     /** Placeholder text shown inside the search input. Defaults to `'Type a command or search…'`. */
     placeholder = input('Type a command or search…', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    /** Two-way bindable search query. Reads or resets the current filter. Defaults to `''`. */
+    /** Two-way bindable search query. Writes back on every keystroke in the search input. Opening and closing the palette leave it untouched — reset it yourself if each open should start empty. Defaults to `''`. */
     query = model('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
     /** Two-way bindable open state. Setting to `true` opens the palette; closing updates it to `false`. Defaults to `false`. */
@@ -382,6 +395,8 @@ class CommandPaletteComponent {
     destroyRef = inject(DestroyRef);
     focusTrapFactory = inject(FocusTrapFactory);
     announcer = inject(LiveAnnouncer);
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     declarativeItems = contentChildren(CommandPaletteItemDirective, { ...(ngDevMode ? { debugName: "declarativeItems" } : /* istanbul ignore next */ {}), descendants: true });
     emptyDirective = contentChild(CommandPaletteEmptyDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "emptyDirective" }] : /* istanbul ignore next */ []));
@@ -588,8 +603,20 @@ class CommandPaletteComponent {
     }
     // ── Private ──
     openPalette() {
+        // SSR guard. `openPalette()` is reachable from the constructor `effect()`
+        // below, and effects run during server render (only `afterRender*` hooks
+        // are client-only) — so a consumer deep-linking the palette with a bound
+        // `[open]="true"` executed this path on Node. A CDK overlay is a
+        // browser-only construct and there is nothing meaningful to serialize, so
+        // bail out entirely; the client instance re-runs the same effect during
+        // hydration and opens then. Matches `split.ts` / `theme.service.ts`, which
+        // gate on the same `isPlatformBrowser(inject(PLATFORM_ID))` flag.
+        if (!this.isBrowser)
+            return;
+        // `document` is injected rather than read as a global so the reference is
+        // testable and consistent with the rest of the library.
         this.previousFocus =
-            document.activeElement ?? null;
+            this.document.activeElement ?? null;
         this.ensureOverlay();
         this.attachContent();
         this.subscribePerOpen();
@@ -655,7 +682,7 @@ class CommandPaletteComponent {
             parent: this.injector,
             providers: [
                 { provide: CommandPaletteComponent, useValue: this },
-                { provide: COMMAND_PALETTE_REF, useValue: paletteRef },
+                { provide: TW_COMMAND_PALETTE_REF, useValue: paletteRef },
             ],
         });
         const portal = new ComponentPortal(CommandPaletteOverlayComponent, this.viewContainerRef, contentInjector);
@@ -784,5 +811,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { COMMAND_PALETTE_REF, CommandPaletteComponent, CommandPaletteEmptyDirective, CommandPaletteFooterDirective, CommandPaletteGroupDirective, CommandPaletteItemDescriptionDirective, CommandPaletteItemDirective, CommandPaletteItemIconDirective };
+export { COMMAND_PALETTE_REF, CommandPaletteComponent, CommandPaletteEmptyDirective, CommandPaletteFooterDirective, CommandPaletteGroupDirective, CommandPaletteItemDescriptionDirective, CommandPaletteItemDirective, CommandPaletteItemIconDirective, TW_COMMAND_PALETTE_REF };
 //# sourceMappingURL=cdevhub-ngx-tw-command-palette.mjs.map