ngwr 7.3.0 → 9.0.0

package/fesm2022/ngwr-command-palette.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-command-palette.mjs","sources":["../../../projects/lib/command-palette/command-palette.ts","../../../projects/lib/command-palette/command-palette.html","../../../projects/lib/command-palette/ngwr-command-palette.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { type ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';\nimport { type BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  type ElementRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\n\nimport { WrHotkey, type WrHotkeyHandle, type WrHotkeySpec } from 'ngwr/hotkey';\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrIcon } from 'ngwr/icon';\nimport { WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet } from 'ngwr/overlay';\n\nimport type { WrCommandItem } from './interfaces';\n\ninterface Bucket {\n  readonly title: string | null;\n  readonly items: readonly WrCommandItem[];\n}\n\nlet listboxUid = 0;\n\nfunction bucketize(items: readonly WrCommandItem[]): readonly Bucket[] {\n  const map = new Map<string | null, WrCommandItem[]>();\n  for (const item of items) {\n    const key = item.group ?? null;\n    const bucket = map.get(key);\n    if (bucket) bucket.push(item);\n    else map.set(key, [item]);\n  }\n  return [...map.entries()].map(([title, items]) => ({ title, items }));\n}\n\nfunction matches(item: WrCommandItem, query: string): boolean {\n  if (!query) return true;\n  const q = query.toLowerCase();\n  if (item.label.toLowerCase().includes(q)) return true;\n  if (item.description?.toLowerCase().includes(q)) return true;\n  if (item.group?.toLowerCase().includes(q)) return true;\n  if (item.keywords?.some(k => k.toLowerCase().includes(q))) return true;\n  return false;\n}\n\n/**\n * `⌘K`-style command palette — a centred modal with a search input and\n * filtered list of actions. Items can be grouped, have icons, descriptions,\n * and visual shortcut hints.\n *\n * Drop one at the root of the app, pass it the list of commands, and bind\n * a global hotkey (default `'mod+k'`). Use `[(open)]` for controlled\n * visibility, or let it manage itself.\n *\n * @example\n * ```html\n * <wr-command-palette [items]=\"commands\" trigger=\"mod+k\" (picked)=\"onPicked($event)\" />\n * ```\n *\n * @see https://ngwr.dev/components/command-palette\n */\n@Component({\n  selector: 'wr-command-palette',\n  templateUrl: './command-palette.html',\n  encapsulation: ViewEncapsulation.None,\n  imports: [WrIcon],\n})\nexport class WrCommandPalette {\n  /** Items shown in the palette. */\n  readonly items = input<readonly WrCommandItem[]>([]);\n\n  /** Controlled open state (two-way bindable). @default false */\n  readonly open = model(false);\n\n  /** Global hotkey that opens the palette. `null` disables auto-binding. @default 'mod+k' */\n  readonly trigger = input<WrHotkeySpec | null>('mod+k');\n\n  /** Search input placeholder. Falls back to `commandPalette.placeholder`. */\n  readonly placeholder = input<string | null>(null);\n\n  /** Text shown when no items match. Falls back to `commandPalette.noResults`. */\n  readonly emptyText = input<string | null>(null);\n\n  protected readonly resolvedPlaceholder = useI18nText(\n    this.placeholder,\n    'commandPalette.placeholder',\n    'Type a command or search…'\n  );\n  protected readonly resolvedEmpty = useI18nText(this.emptyText, 'commandPalette.noResults', 'No results');\n\n  /** Auto-close on `(picked)`. Set false to keep open. @default true */\n  readonly closeOnPick = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Present the palette full-screen on small viewports instead of a centred\n   * modal. `undefined` follows the app-wide `provideWrResponsiveOverlays()`\n   * setting; `true`/`false` overrides it. The palette docks to the top (it\n   * auto-focuses its input, so the on-screen keyboard stays clear).\n   * @default undefined\n   */\n  readonly responsive = input<boolean | undefined, BooleanInput>(undefined, {\n    transform: (v: BooleanInput): boolean | undefined => (v == null ? undefined : coerceBooleanProperty(v)),\n  });\n\n  /** Fires when the user commits an item (Enter / click). */\n  readonly picked = output<WrCommandItem>();\n\n  protected readonly query = signal('');\n  protected readonly activeIndex = signal(0);\n\n  /** Whether the current opening is presented full-screen. Decided on open. */\n  protected readonly presentAsSheet = signal(false);\n  protected readonly inputEl = viewChild<ElementRef<HTMLInputElement>>('input');\n  protected readonly panelEl = viewChild<ElementRef<HTMLElement>>('panel');\n\n  /** Listbox id (referenced by the input's `aria-controls`). */\n  protected readonly listboxId = `wr-command-palette-listbox-${++listboxUid}`;\n\n  /** @internal Build a stable option id for a given flat index. */\n  protected optionId(i: number): string {\n    return `${this.listboxId}-opt-${i}`;\n  }\n\n  /** Id of the active option for `aria-activedescendant`. */\n  protected readonly activeOptionId = computed<string | null>(() => {\n    const i = this.activeIndex();\n    return i >= 0 && i < this.filtered().length ? this.optionId(i) : null;\n  });\n\n  private readonly hotkeys = inject(WrHotkey);\n  private readonly responsiveConfig = inject(WR_RESPONSIVE_OVERLAYS);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly focusTrapFactory = inject(ConfigurableFocusTrapFactory);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private bindingHandle: WrHotkeyHandle | null = null;\n  private focusTrap: ConfigurableFocusTrap | null = null;\n  private previouslyFocused: HTMLElement | null = null;\n\n  /** Flat filtered list — what keyboard navigation walks. */\n  protected readonly filtered = computed<readonly WrCommandItem[]>(() =>\n    this.items().filter(item => matches(item, this.query()))\n  );\n\n  /** Grouped view — what the template renders. */\n  protected readonly buckets = computed<readonly Bucket[]>(() => bucketize(this.filtered()));\n\n  constructor() {\n    // Bind / re-bind the global trigger whenever the spec changes.\n    effect(() => {\n      this.bindingHandle?.unbind();\n      const spec = this.trigger();\n      if (!spec) return;\n      this.bindingHandle = this.hotkeys.bind(spec, () => this.open.update(v => !v), { allowInInput: true });\n    });\n\n    // Reset query + active index whenever we open; focus the input.\n    effect(() => {\n      if (!this.open()) return;\n      this.query.set('');\n      this.activeIndex.set(0);\n      this.presentAsSheet.set(wrPresentAsSheet(this.responsive(), this.responsiveConfig));\n    });\n\n    // Focus trap + restore.\n    effect(() => {\n      if (!this.isBrowser) return;\n      if (this.open()) {\n        const active = document.activeElement;\n        this.previouslyFocused = active instanceof HTMLElement ? active : null;\n        queueMicrotask(() => {\n          const host = this.panelEl()?.nativeElement;\n          if (!host) return;\n          this.focusTrap?.destroy();\n          this.focusTrap = this.focusTrapFactory.create(host);\n          void this.focusTrap.focusInitialElementWhenReady();\n        });\n      } else {\n        this.focusTrap?.destroy();\n        this.focusTrap = null;\n        const restore = this.previouslyFocused;\n        this.previouslyFocused = null;\n        if (restore && typeof restore.focus === 'function') restore.focus();\n      }\n    });\n\n    afterNextRender(() => {\n      if (this.open()) this.inputEl()?.nativeElement.focus();\n    });\n\n    // Auto-focus the input when opened.\n    effect(() => {\n      if (!this.open()) return;\n      queueMicrotask(() => this.inputEl()?.nativeElement.focus());\n    });\n\n    // Clamp the active index when the filtered list shrinks.\n    effect(() => {\n      const max = Math.max(0, this.filtered().length - 1);\n      if (this.activeIndex() > max) this.activeIndex.set(max);\n    });\n\n    this.destroyRef.onDestroy(() => this.bindingHandle?.unbind());\n  }\n\n  // Template handlers\n\n  protected onQueryInput(event: Event): void {\n    this.query.set((event.target as HTMLInputElement).value);\n    this.activeIndex.set(0);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    const list = this.filtered();\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        if (list.length > 0) this.activeIndex.set((this.activeIndex() + 1) % list.length);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (list.length > 0) this.activeIndex.set((this.activeIndex() - 1 + list.length) % list.length);\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.activeIndex.set(0);\n        break;\n      case 'End':\n        event.preventDefault();\n        this.activeIndex.set(Math.max(0, list.length - 1));\n        break;\n      case 'Enter': {\n        event.preventDefault();\n        const item = list[this.activeIndex()];\n        if (item) this.commit(item);\n        break;\n      }\n      case 'Escape':\n        event.preventDefault();\n        this.close();\n        break;\n      default:\n        break;\n    }\n  }\n\n  protected onBackdropClick(): void {\n    this.close();\n  }\n\n  protected onItemClick(item: WrCommandItem, event: MouseEvent): void {\n    event.preventDefault();\n    this.commit(item);\n  }\n\n  protected onItemHover(item: WrCommandItem): void {\n    const i = this.filtered().indexOf(item);\n    if (i >= 0) this.activeIndex.set(i);\n  }\n\n  /** Flat index of an item within the filtered list — for highlight checks. */\n  protected indexOf(item: WrCommandItem): number {\n    return this.filtered().indexOf(item);\n  }\n\n  // Public API\n\n  /** Open the palette. */\n  show(): void {\n    this.open.set(true);\n  }\n\n  /** Close the palette. */\n  close(): void {\n    this.open.set(false);\n  }\n\n  // Internals\n\n  private commit(item: WrCommandItem): void {\n    item.action?.();\n    this.picked.emit(item);\n    if (this.closeOnPick()) this.close();\n  }\n}\n","@if (open()) {\n  <div\n    class=\"wr-command-palette\"\n    [class.wr-command-palette--sheet]=\"presentAsSheet()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Command palette\"\n  >\n    <!-- Backdrop captures clicks to close. Not focusable — keyboard users use\n         Esc on the panel below. -->\n\n    <div class=\"wr-command-palette__backdrop\" aria-hidden=\"true\" (click)=\"onBackdropClick()\"></div>\n\n    <!-- Keydown is delegated from the search input; tabindex enables Esc when\n         the input is unfocused. -->\n    <div #panel class=\"wr-command-palette__panel\" tabindex=\"-1\" (keydown)=\"onKeydown($event)\">\n      <div class=\"wr-command-palette__search\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <circle cx=\"7\" cy=\"7\" r=\"5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n          <path d=\"M11 11 L14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n        </svg>\n        <input\n          #input\n          type=\"text\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          aria-autocomplete=\"list\"\n          [attr.aria-controls]=\"listboxId\"\n          [attr.aria-expanded]=\"true\"\n          [attr.aria-activedescendant]=\"activeOptionId() || null\"\n          [placeholder]=\"resolvedPlaceholder()\"\n          [value]=\"query()\"\n          (input)=\"onQueryInput($event)\"\n        />\n        <kbd class=\"wr-command-palette__hint\">esc</kbd>\n      </div>\n\n      <div class=\"wr-command-palette__body\" role=\"listbox\" [attr.id]=\"listboxId\">\n        @if (filtered().length === 0) {\n          <div class=\"wr-command-palette__empty\">{{ resolvedEmpty() }}</div>\n        } @else {\n          @for (bucket of buckets(); track bucket.title) {\n            <div class=\"wr-command-palette__group\">\n              @if (bucket.title) {\n                <div class=\"wr-command-palette__group-title\">{{ bucket.title }}</div>\n              }\n              @for (item of bucket.items; track item.id) {\n                <div\n                  class=\"wr-command-palette__option\"\n                  role=\"option\"\n                  [attr.id]=\"optionId(indexOf(item))\"\n                  [class.wr-command-palette__option--active]=\"indexOf(item) === activeIndex()\"\n                  [attr.aria-selected]=\"indexOf(item) === activeIndex()\"\n                  (mouseenter)=\"onItemHover(item)\"\n                  (mousedown)=\"onItemClick(item, $event)\"\n                >\n                  @if (item.icon) {\n                    <wr-icon class=\"wr-command-palette__option-icon\" [name]=\"item.icon\" size=\"16\" />\n                  } @else {\n                    <span class=\"wr-command-palette__option-icon\" aria-hidden=\"true\"></span>\n                  }\n                  <div class=\"wr-command-palette__option-body\">\n                    <div class=\"wr-command-palette__option-label\">{{ item.label }}</div>\n                    @if (item.description) {\n                      <div class=\"wr-command-palette__option-description\">{{ item.description }}</div>\n                    }\n                  </div>\n                  @if (item.shortcut) {\n                    <kbd class=\"wr-command-palette__option-shortcut\">{{ item.shortcut }}</kbd>\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-command-palette.mjs","sources":["../../../projects/lib/command-palette/command-palette.ts","../../../projects/lib/command-palette/command-palette.html","../../../projects/lib/command-palette/ngwr-command-palette.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { type ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';\nimport { type BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  type ElementRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\n\nimport { WrHotkey, type WrHotkeyHandle, type WrHotkeySpec } from 'ngwr/hotkey';\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrIcon } from 'ngwr/icon';\nimport { WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet } from 'ngwr/overlay';\n\nimport type { WrCommandItem } from './interfaces';\n\ninterface Bucket {\n  readonly title: string | null;\n  readonly items: readonly WrCommandItem[];\n}\n\nlet listboxUid = 0;\n\nfunction bucketize(items: readonly WrCommandItem[]): readonly Bucket[] {\n  const map = new Map<string | null, WrCommandItem[]>();\n  for (const item of items) {\n    const key = item.group ?? null;\n    const bucket = map.get(key);\n    if (bucket) bucket.push(item);\n    else map.set(key, [item]);\n  }\n  return [...map.entries()].map(([title, items]) => ({ title, items }));\n}\n\nfunction matches(item: WrCommandItem, query: string): boolean {\n  if (!query) return true;\n  const q = query.toLowerCase();\n  if (item.label.toLowerCase().includes(q)) return true;\n  if (item.description?.toLowerCase().includes(q)) return true;\n  if (item.group?.toLowerCase().includes(q)) return true;\n  if (item.keywords?.some(k => k.toLowerCase().includes(q))) return true;\n  return false;\n}\n\n/**\n * `⌘K`-style command palette — a centred modal with a search input and\n * filtered list of actions. Items can be grouped, have icons, descriptions,\n * and visual shortcut hints.\n *\n * Drop one at the root of the app, pass it the list of commands, and bind\n * a global hotkey (default `'mod+k'`). Use `[(open)]` for controlled\n * visibility, or let it manage itself.\n *\n * @example\n * ```html\n * <wr-command-palette [items]=\"commands\" trigger=\"mod+k\" (picked)=\"onPicked($event)\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/command-palette\n */\n@Component({\n  selector: 'wr-command-palette',\n  templateUrl: './command-palette.html',\n  encapsulation: ViewEncapsulation.None,\n  imports: [WrIcon],\n})\nexport class WrCommandPalette {\n  /** Items shown in the palette. */\n  readonly items = input<readonly WrCommandItem[]>([]);\n\n  /** Controlled open state (two-way bindable). @default false */\n  readonly open = model(false);\n\n  /** Global hotkey that opens the palette. `null` disables auto-binding. @default 'mod+k' */\n  readonly trigger = input<WrHotkeySpec | null>('mod+k');\n\n  /** Search input placeholder. Falls back to `commandPalette.placeholder`. */\n  readonly placeholder = input<string | null>(null);\n\n  /** Text shown when no items match. Falls back to `commandPalette.noResults`. */\n  readonly emptyText = input<string | null>(null);\n\n  protected readonly resolvedPlaceholder = useI18nText(\n    this.placeholder,\n    'commandPalette.placeholder',\n    'Type a command or search…'\n  );\n  protected readonly resolvedEmpty = useI18nText(this.emptyText, 'commandPalette.noResults', 'No results');\n\n  /** Auto-close on `(picked)`. Set false to keep open. @default true */\n  readonly closeOnPick = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Present the palette full-screen on small viewports instead of a centred\n   * modal. `undefined` follows the app-wide `provideWrResponsiveOverlays()`\n   * setting; `true`/`false` overrides it. The palette docks to the top (it\n   * auto-focuses its input, so the on-screen keyboard stays clear).\n   * @default undefined\n   */\n  readonly responsive = input<boolean | undefined, BooleanInput>(undefined, {\n    transform: (v: BooleanInput): boolean | undefined => (v == null ? undefined : coerceBooleanProperty(v)),\n  });\n\n  /** Fires when the user commits an item (Enter / click). */\n  readonly picked = output<WrCommandItem>();\n\n  protected readonly query = signal('');\n  protected readonly activeIndex = signal(0);\n\n  /** Whether the current opening is presented full-screen. Decided on open. */\n  protected readonly presentAsSheet = signal(false);\n  protected readonly inputEl = viewChild<ElementRef<HTMLInputElement>>('input');\n  protected readonly panelEl = viewChild<ElementRef<HTMLElement>>('panel');\n\n  /** Listbox id (referenced by the input's `aria-controls`). */\n  protected readonly listboxId = `wr-command-palette-listbox-${++listboxUid}`;\n\n  /** @internal Build a stable option id for a given flat index. */\n  protected optionId(i: number): string {\n    return `${this.listboxId}-opt-${i}`;\n  }\n\n  /** Id of the active option for `aria-activedescendant`. */\n  protected readonly activeOptionId = computed<string | null>(() => {\n    const i = this.activeIndex();\n    return i >= 0 && i < this.filtered().length ? this.optionId(i) : null;\n  });\n\n  private readonly hotkeys = inject(WrHotkey);\n  private readonly responsiveConfig = inject(WR_RESPONSIVE_OVERLAYS);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly focusTrapFactory = inject(ConfigurableFocusTrapFactory);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private bindingHandle: WrHotkeyHandle | null = null;\n  private focusTrap: ConfigurableFocusTrap | null = null;\n  private previouslyFocused: HTMLElement | null = null;\n\n  /** Flat filtered list — what keyboard navigation walks. */\n  protected readonly filtered = computed<readonly WrCommandItem[]>(() =>\n    this.items().filter(item => matches(item, this.query()))\n  );\n\n  /** Grouped view — what the template renders. */\n  protected readonly buckets = computed<readonly Bucket[]>(() => bucketize(this.filtered()));\n\n  constructor() {\n    // Bind / re-bind the global trigger whenever the spec changes.\n    effect(() => {\n      this.bindingHandle?.unbind();\n      const spec = this.trigger();\n      if (!spec) return;\n      this.bindingHandle = this.hotkeys.bind(spec, () => this.open.update(v => !v), { allowInInput: true });\n    });\n\n    // Reset query + active index whenever we open; focus the input.\n    effect(() => {\n      if (!this.open()) return;\n      this.query.set('');\n      this.activeIndex.set(0);\n      this.presentAsSheet.set(wrPresentAsSheet(this.responsive(), this.responsiveConfig));\n    });\n\n    // Focus trap + restore.\n    effect(() => {\n      if (!this.isBrowser) return;\n      if (this.open()) {\n        const active = document.activeElement;\n        this.previouslyFocused = active instanceof HTMLElement ? active : null;\n        queueMicrotask(() => {\n          const host = this.panelEl()?.nativeElement;\n          if (!host) return;\n          this.focusTrap?.destroy();\n          this.focusTrap = this.focusTrapFactory.create(host);\n          void this.focusTrap.focusInitialElementWhenReady();\n        });\n      } else {\n        this.focusTrap?.destroy();\n        this.focusTrap = null;\n        const restore = this.previouslyFocused;\n        this.previouslyFocused = null;\n        if (restore && typeof restore.focus === 'function') restore.focus();\n      }\n    });\n\n    afterNextRender(() => {\n      if (this.open()) this.inputEl()?.nativeElement.focus();\n    });\n\n    // Auto-focus the input when opened.\n    effect(() => {\n      if (!this.open()) return;\n      queueMicrotask(() => this.inputEl()?.nativeElement.focus());\n    });\n\n    // Clamp the active index when the filtered list shrinks.\n    effect(() => {\n      const max = Math.max(0, this.filtered().length - 1);\n      if (this.activeIndex() > max) this.activeIndex.set(max);\n    });\n\n    this.destroyRef.onDestroy(() => this.bindingHandle?.unbind());\n  }\n\n  // Template handlers\n\n  protected onQueryInput(event: Event): void {\n    this.query.set((event.target as HTMLInputElement).value);\n    this.activeIndex.set(0);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    const list = this.filtered();\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        if (list.length > 0) this.activeIndex.set((this.activeIndex() + 1) % list.length);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (list.length > 0) this.activeIndex.set((this.activeIndex() - 1 + list.length) % list.length);\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.activeIndex.set(0);\n        break;\n      case 'End':\n        event.preventDefault();\n        this.activeIndex.set(Math.max(0, list.length - 1));\n        break;\n      case 'Enter': {\n        event.preventDefault();\n        const item = list[this.activeIndex()];\n        if (item) this.commit(item);\n        break;\n      }\n      case 'Escape':\n        event.preventDefault();\n        this.close();\n        break;\n      default:\n        break;\n    }\n  }\n\n  protected onBackdropClick(): void {\n    this.close();\n  }\n\n  protected onItemClick(item: WrCommandItem, event: MouseEvent): void {\n    event.preventDefault();\n    this.commit(item);\n  }\n\n  protected onItemHover(item: WrCommandItem): void {\n    const i = this.filtered().indexOf(item);\n    if (i >= 0) this.activeIndex.set(i);\n  }\n\n  /** Flat index of an item within the filtered list — for highlight checks. */\n  protected indexOf(item: WrCommandItem): number {\n    return this.filtered().indexOf(item);\n  }\n\n  // Public API\n\n  /** Open the palette. */\n  show(): void {\n    this.open.set(true);\n  }\n\n  /** Close the palette. */\n  close(): void {\n    this.open.set(false);\n  }\n\n  // Internals\n\n  private commit(item: WrCommandItem): void {\n    item.action?.();\n    this.picked.emit(item);\n    if (this.closeOnPick()) this.close();\n  }\n}\n","@if (open()) {\n  <div\n    class=\"wr-command-palette\"\n    [class.wr-command-palette--sheet]=\"presentAsSheet()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Command palette\"\n  >\n    <!-- Backdrop captures clicks to close. Not focusable — keyboard users use\n         Esc on the panel below. -->\n\n    <div class=\"wr-command-palette__backdrop\" aria-hidden=\"true\" (click)=\"onBackdropClick()\"></div>\n\n    <!-- Keydown is delegated from the search input; tabindex enables Esc when\n         the input is unfocused. -->\n    <div #panel class=\"wr-command-palette__panel\" tabindex=\"-1\" (keydown)=\"onKeydown($event)\">\n      <div class=\"wr-command-palette__search\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <circle cx=\"7\" cy=\"7\" r=\"5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n          <path d=\"M11 11 L14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n        </svg>\n        <input\n          #input\n          type=\"text\"\n          role=\"combobox\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          aria-autocomplete=\"list\"\n          [attr.aria-controls]=\"listboxId\"\n          [attr.aria-expanded]=\"true\"\n          [attr.aria-activedescendant]=\"activeOptionId() || null\"\n          [placeholder]=\"resolvedPlaceholder()\"\n          [value]=\"query()\"\n          (input)=\"onQueryInput($event)\"\n        />\n        <kbd class=\"wr-command-palette__hint\">esc</kbd>\n      </div>\n\n      <div class=\"wr-command-palette__body\" role=\"listbox\" [attr.id]=\"listboxId\">\n        @if (filtered().length === 0) {\n          <div class=\"wr-command-palette__empty\">{{ resolvedEmpty() }}</div>\n        } @else {\n          @for (bucket of buckets(); track bucket.title) {\n            <div class=\"wr-command-palette__group\">\n              @if (bucket.title) {\n                <div class=\"wr-command-palette__group-title\">{{ bucket.title }}</div>\n              }\n              @for (item of bucket.items; track item.id) {\n                <div\n                  class=\"wr-command-palette__option\"\n                  role=\"option\"\n                  [attr.id]=\"optionId(indexOf(item))\"\n                  [class.wr-command-palette__option--active]=\"indexOf(item) === activeIndex()\"\n                  [attr.aria-selected]=\"indexOf(item) === activeIndex()\"\n                  (mouseenter)=\"onItemHover(item)\"\n                  (mousedown)=\"onItemClick(item, $event)\"\n                >\n                  @if (item.icon) {\n                    <wr-icon class=\"wr-command-palette__option-icon\" [name]=\"item.icon\" size=\"16\" />\n                  } @else {\n                    <span class=\"wr-command-palette__option-icon\" aria-hidden=\"true\"></span>\n                  }\n                  <div class=\"wr-command-palette__option-body\">\n                    <div class=\"wr-command-palette__option-label\">{{ item.label }}</div>\n                    @if (item.description) {\n                      <div class=\"wr-command-palette__option-description\">{{ item.description }}</div>\n                    }\n                  </div>\n                  @if (item.shortcut) {\n                    <kbd class=\"wr-command-palette__option-shortcut\">{{ item.shortcut }}</kbd>\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-compare.mjs

@@ -28,7 +28,7 @@ import { clamp } from 'ngwr/utils';
  * </wr-compare>
  * ```
  *
- * @see https://ngwr.dev/components/compare
+ * @see https://ngwr.dev/reference/components/compare
  */
 class WrCompare {
     /** Divider position as a percentage (0–100). Two-way bindable. @default 50 */
@@ -121,10 +121,10 @@ class WrCompare {
             : ((event.clientY - rect.top) / rect.height) * 100;
         this.position.set(clamp(raw, this.minPosition(), this.maxPosition()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrCompare, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrCompare, isStandalone: true, selector: "wr-compare", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minPosition: { classPropertyName: "minPosition", publicName: "minPosition", isSignal: true, isRequired: false, transformFunction: null }, maxPosition: { classPropertyName: "maxPosition", publicName: "maxPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { position: "positionChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div\n  class=\"wr-compare__surface\"\n  role=\"slider\"\n  aria-label=\"Comparison divider\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-valuemin]=\"minPosition()\"\n  [attr.aria-valuemax]=\"maxPosition()\"\n  [attr.aria-valuenow]=\"position()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div class=\"wr-compare__layers\">\n    <div class=\"wr-compare__layer wr-compare__layer--before\">\n      <ng-content select=\"[wrCompareBefore]\" />\n    </div>\n    <div class=\"wr-compare__layer wr-compare__layer--after\" [style.clip-path]=\"clipPath()\">\n      <ng-content select=\"[wrCompareAfter]\" />\n    </div>\n  </div>\n\n  <div\n    class=\"wr-compare__divider\"\n    [style.left.%]=\"orientation() === 'horizontal' ? position() : null\"\n    [style.top.%]=\"orientation() === 'vertical' ? position() : null\"\n    aria-hidden=\"true\"\n  >\n    @if (showHandle()) {\n      <span class=\"wr-compare__handle\">\n        @if (orientation() === 'horizontal') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M5 4 L1 8 L5 12 M11 4 L15 8 L11 12\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M4 5 L8 1 L12 5 M4 11 L8 15 L12 11\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        }\n      </span>\n    }\n  </div>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCompare, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrCompare, isStandalone: true, selector: "wr-compare", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minPosition: { classPropertyName: "minPosition", publicName: "minPosition", isSignal: true, isRequired: false, transformFunction: null }, maxPosition: { classPropertyName: "maxPosition", publicName: "maxPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { position: "positionChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<div\n  class=\"wr-compare__surface\"\n  role=\"slider\"\n  aria-label=\"Comparison divider\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-valuemin]=\"minPosition()\"\n  [attr.aria-valuemax]=\"maxPosition()\"\n  [attr.aria-valuenow]=\"position()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div class=\"wr-compare__layers\">\n    <div class=\"wr-compare__layer wr-compare__layer--before\">\n      <ng-content select=\"[wrCompareBefore]\" />\n    </div>\n    <div class=\"wr-compare__layer wr-compare__layer--after\" [style.clip-path]=\"clipPath()\">\n      <ng-content select=\"[wrCompareAfter]\" />\n    </div>\n  </div>\n\n  <div\n    class=\"wr-compare__divider\"\n    [style.left.%]=\"orientation() === 'horizontal' ? position() : null\"\n    [style.top.%]=\"orientation() === 'vertical' ? position() : null\"\n    aria-hidden=\"true\"\n  >\n    @if (showHandle()) {\n      <span class=\"wr-compare__handle\">\n        @if (orientation() === 'horizontal') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M5 4 L1 8 L5 12 M11 4 L15 8 L11 12\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M4 5 L8 1 L12 5 M4 11 L8 15 L12 11\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        }\n      </span>\n    }\n  </div>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrCompare, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCompare, decorators: [{
             type: Component,
             args: [{ selector: 'wr-compare', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<div\n  class=\"wr-compare__surface\"\n  role=\"slider\"\n  aria-label=\"Comparison divider\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-valuemin]=\"minPosition()\"\n  [attr.aria-valuemax]=\"maxPosition()\"\n  [attr.aria-valuenow]=\"position()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div class=\"wr-compare__layers\">\n    <div class=\"wr-compare__layer wr-compare__layer--before\">\n      <ng-content select=\"[wrCompareBefore]\" />\n    </div>\n    <div class=\"wr-compare__layer wr-compare__layer--after\" [style.clip-path]=\"clipPath()\">\n      <ng-content select=\"[wrCompareAfter]\" />\n    </div>\n  </div>\n\n  <div\n    class=\"wr-compare__divider\"\n    [style.left.%]=\"orientation() === 'horizontal' ? position() : null\"\n    [style.top.%]=\"orientation() === 'vertical' ? position() : null\"\n    aria-hidden=\"true\"\n  >\n    @if (showHandle()) {\n      <span class=\"wr-compare__handle\">\n        @if (orientation() === 'horizontal') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M5 4 L1 8 L5 12 M11 4 L15 8 L11 12\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M4 5 L8 1 L12 5 M4 11 L8 15 L12 11\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        }\n      </span>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }, { type: i0.Output, args: ["positionChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHandle", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "minPosition", required: false }] }], maxPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPosition", required: false }] }] } });

package/fesm2022/ngwr-compare.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-compare.mjs","sources":["../../../projects/lib/compare/compare.ts","../../../projects/lib/compare/compare.html","../../../projects/lib/compare/ngwr-compare.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ElementRef, ViewEncapsulation, computed, inject, input, model } from '@angular/core';\n\nimport { clamp } from 'ngwr/utils';\n\n/**\n * Before/after comparison slider. Works with any content — project two\n * pieces of markup with `wrCompareBefore` and `wrCompareAfter` attributes;\n * the component stacks them in the same cell and clips the \"after\" side\n * with a draggable divider.\n *\n * @example\n * ```html\n * <wr-compare [(position)]=\"pos\">\n *   <img wrCompareBefore src=\"before.jpg\" alt=\"\" />\n *   <img wrCompareAfter src=\"after.jpg\" alt=\"\" />\n * </wr-compare>\n *\n * <wr-compare orientation=\"vertical\">\n *   <pre wrCompareBefore>{{ oldCode }}</pre>\n *   <pre wrCompareAfter>{{ newCode }}</pre>\n * </wr-compare>\n * ```\n *\n * @see https://ngwr.dev/components/compare\n */\n@Component({\n  selector: 'wr-compare',\n  templateUrl: './compare.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrCompare {\n  /** Divider position as a percentage (0–100). Two-way bindable. @default 50 */\n  readonly position = model(50);\n\n  /**\n   * Divider direction:\n   * - `'horizontal'` — divider line is vertical, drags left/right.\n   * - `'vertical'`   — divider line is horizontal, drags up/down.\n   * @default 'horizontal'\n   */\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n  /** Show the round drag handle on the divider. @default true */\n  readonly showHandle = input(true, { transform: coerceBooleanProperty });\n\n  /** Disable interaction (divider stays put). @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Initial position transform — accepts any number / numeric string. */\n  readonly minPosition = input(0, { transform: (v: unknown): number => coerceNumberProperty(v, 0) });\n  readonly maxPosition = input(100, { transform: (v: unknown): number => coerceNumberProperty(v, 100) });\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private dragging = false;\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-compare', `wr-compare--${this.orientation()}`];\n    if (this.disabled()) parts.push('wr-compare--disabled');\n    return parts.join(' ');\n  });\n\n  /** Clip path applied to the \"after\" layer so the divider reveals it. */\n  protected readonly clipPath = computed(() => {\n    const p = clamp(this.position(), 0, 100);\n    if (this.orientation() === 'horizontal') {\n      // Show from `p%` to the right edge.\n      return `inset(0 0 0 ${p}%)`;\n    }\n    return `inset(${p}% 0 0 0)`;\n  });\n\n  // Pointer handlers\n\n  protected onPointerDown(event: PointerEvent): void {\n    if (this.disabled()) return;\n    event.preventDefault();\n    this.dragging = true;\n    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);\n    this.updateFromPointer(event);\n  }\n\n  protected onPointerMove(event: PointerEvent): void {\n    if (!this.dragging) return;\n    this.updateFromPointer(event);\n  }\n\n  protected onPointerUp(event: PointerEvent): void {\n    if (!this.dragging) return;\n    this.dragging = false;\n    (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (this.disabled()) return;\n    const step = event.shiftKey ? 10 : 1;\n    let next: number | null = null;\n    if (this.orientation() === 'horizontal') {\n      if (event.key === 'ArrowLeft') next = this.position() - step;\n      else if (event.key === 'ArrowRight') next = this.position() + step;\n    } else {\n      if (event.key === 'ArrowUp') next = this.position() - step;\n      else if (event.key === 'ArrowDown') next = this.position() + step;\n    }\n    if (event.key === 'Home') next = this.minPosition();\n    else if (event.key === 'End') next = this.maxPosition();\n    if (next === null) return;\n    event.preventDefault();\n    this.position.set(clamp(next, this.minPosition(), this.maxPosition()));\n  }\n\n  private updateFromPointer(event: PointerEvent): void {\n    const rect = this.host.nativeElement.getBoundingClientRect();\n    const raw =\n      this.orientation() === 'horizontal'\n        ? ((event.clientX - rect.left) / rect.width) * 100\n        : ((event.clientY - rect.top) / rect.height) * 100;\n    this.position.set(clamp(raw, this.minPosition(), this.maxPosition()));\n  }\n}\n","<div\n  class=\"wr-compare__surface\"\n  role=\"slider\"\n  aria-label=\"Comparison divider\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-valuemin]=\"minPosition()\"\n  [attr.aria-valuemax]=\"maxPosition()\"\n  [attr.aria-valuenow]=\"position()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div class=\"wr-compare__layers\">\n    <div class=\"wr-compare__layer wr-compare__layer--before\">\n      <ng-content select=\"[wrCompareBefore]\" />\n    </div>\n    <div class=\"wr-compare__layer wr-compare__layer--after\" [style.clip-path]=\"clipPath()\">\n      <ng-content select=\"[wrCompareAfter]\" />\n    </div>\n  </div>\n\n  <div\n    class=\"wr-compare__divider\"\n    [style.left.%]=\"orientation() === 'horizontal' ? position() : null\"\n    [style.top.%]=\"orientation() === 'vertical' ? position() : null\"\n    aria-hidden=\"true\"\n  >\n    @if (showHandle()) {\n      <span class=\"wr-compare__handle\">\n        @if (orientation() === 'horizontal') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M5 4 L1 8 L5 12 M11 4 L15 8 L11 12\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M4 5 L8 1 L12 5 M4 11 L8 15 L12 11\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        }\n      </span>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-compare.mjs","sources":["../../../projects/lib/compare/compare.ts","../../../projects/lib/compare/compare.html","../../../projects/lib/compare/ngwr-compare.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ElementRef, ViewEncapsulation, computed, inject, input, model } from '@angular/core';\n\nimport { clamp } from 'ngwr/utils';\n\n/**\n * Before/after comparison slider. Works with any content — project two\n * pieces of markup with `wrCompareBefore` and `wrCompareAfter` attributes;\n * the component stacks them in the same cell and clips the \"after\" side\n * with a draggable divider.\n *\n * @example\n * ```html\n * <wr-compare [(position)]=\"pos\">\n *   <img wrCompareBefore src=\"before.jpg\" alt=\"\" />\n *   <img wrCompareAfter src=\"after.jpg\" alt=\"\" />\n * </wr-compare>\n *\n * <wr-compare orientation=\"vertical\">\n *   <pre wrCompareBefore>{{ oldCode }}</pre>\n *   <pre wrCompareAfter>{{ newCode }}</pre>\n * </wr-compare>\n * ```\n *\n * @see https://ngwr.dev/reference/components/compare\n */\n@Component({\n  selector: 'wr-compare',\n  templateUrl: './compare.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrCompare {\n  /** Divider position as a percentage (0–100). Two-way bindable. @default 50 */\n  readonly position = model(50);\n\n  /**\n   * Divider direction:\n   * - `'horizontal'` — divider line is vertical, drags left/right.\n   * - `'vertical'`   — divider line is horizontal, drags up/down.\n   * @default 'horizontal'\n   */\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n  /** Show the round drag handle on the divider. @default true */\n  readonly showHandle = input(true, { transform: coerceBooleanProperty });\n\n  /** Disable interaction (divider stays put). @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Initial position transform — accepts any number / numeric string. */\n  readonly minPosition = input(0, { transform: (v: unknown): number => coerceNumberProperty(v, 0) });\n  readonly maxPosition = input(100, { transform: (v: unknown): number => coerceNumberProperty(v, 100) });\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private dragging = false;\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-compare', `wr-compare--${this.orientation()}`];\n    if (this.disabled()) parts.push('wr-compare--disabled');\n    return parts.join(' ');\n  });\n\n  /** Clip path applied to the \"after\" layer so the divider reveals it. */\n  protected readonly clipPath = computed(() => {\n    const p = clamp(this.position(), 0, 100);\n    if (this.orientation() === 'horizontal') {\n      // Show from `p%` to the right edge.\n      return `inset(0 0 0 ${p}%)`;\n    }\n    return `inset(${p}% 0 0 0)`;\n  });\n\n  // Pointer handlers\n\n  protected onPointerDown(event: PointerEvent): void {\n    if (this.disabled()) return;\n    event.preventDefault();\n    this.dragging = true;\n    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);\n    this.updateFromPointer(event);\n  }\n\n  protected onPointerMove(event: PointerEvent): void {\n    if (!this.dragging) return;\n    this.updateFromPointer(event);\n  }\n\n  protected onPointerUp(event: PointerEvent): void {\n    if (!this.dragging) return;\n    this.dragging = false;\n    (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (this.disabled()) return;\n    const step = event.shiftKey ? 10 : 1;\n    let next: number | null = null;\n    if (this.orientation() === 'horizontal') {\n      if (event.key === 'ArrowLeft') next = this.position() - step;\n      else if (event.key === 'ArrowRight') next = this.position() + step;\n    } else {\n      if (event.key === 'ArrowUp') next = this.position() - step;\n      else if (event.key === 'ArrowDown') next = this.position() + step;\n    }\n    if (event.key === 'Home') next = this.minPosition();\n    else if (event.key === 'End') next = this.maxPosition();\n    if (next === null) return;\n    event.preventDefault();\n    this.position.set(clamp(next, this.minPosition(), this.maxPosition()));\n  }\n\n  private updateFromPointer(event: PointerEvent): void {\n    const rect = this.host.nativeElement.getBoundingClientRect();\n    const raw =\n      this.orientation() === 'horizontal'\n        ? ((event.clientX - rect.left) / rect.width) * 100\n        : ((event.clientY - rect.top) / rect.height) * 100;\n    this.position.set(clamp(raw, this.minPosition(), this.maxPosition()));\n  }\n}\n","<div\n  class=\"wr-compare__surface\"\n  role=\"slider\"\n  aria-label=\"Comparison divider\"\n  [attr.aria-orientation]=\"orientation()\"\n  [attr.aria-valuemin]=\"minPosition()\"\n  [attr.aria-valuemax]=\"maxPosition()\"\n  [attr.aria-valuenow]=\"position()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <div class=\"wr-compare__layers\">\n    <div class=\"wr-compare__layer wr-compare__layer--before\">\n      <ng-content select=\"[wrCompareBefore]\" />\n    </div>\n    <div class=\"wr-compare__layer wr-compare__layer--after\" [style.clip-path]=\"clipPath()\">\n      <ng-content select=\"[wrCompareAfter]\" />\n    </div>\n  </div>\n\n  <div\n    class=\"wr-compare__divider\"\n    [style.left.%]=\"orientation() === 'horizontal' ? position() : null\"\n    [style.top.%]=\"orientation() === 'vertical' ? position() : null\"\n    aria-hidden=\"true\"\n  >\n    @if (showHandle()) {\n      <span class=\"wr-compare__handle\">\n        @if (orientation() === 'horizontal') {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M5 4 L1 8 L5 12 M11 4 L15 8 L11 12\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else {\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path\n              d=\"M4 5 L8 1 L12 5 M4 11 L8 15 L12 11\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        }\n      </span>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-confetti.mjs

@@ -145,10 +145,10 @@ class WrConfetti {
             this.rafId = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrConfetti, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.2", ngImport: i0, type: WrConfetti });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrConfetti, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.0", ngImport: i0, type: WrConfetti });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrConfetti, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrConfetti, decorators: [{
             type: Service
         }] });
 

package/fesm2022/ngwr-context-menu.mjs

@@ -89,6 +89,20 @@ class WrContextMenuItem {
     constructor() {
         this.destroyRef.onDestroy(() => this.disposeSubmenu(true));
     }
+    /**
+     * @internal Pointer activation — selecting a leaf item dismisses the
+     * whole menu chain. The consumer's own `(click)` binding on the host
+     * runs in the same event; we defer the close to a microtask so that
+     * handler (the actual "select") always completes before the overlay
+     * tears down, regardless of listener registration order. Items that
+     * own a submenu (or are disabled) don't dismiss — clicking them just
+     * drills into / ignores the row.
+     */
+    onClick() {
+        if (this.disabled() || this.submenu())
+            return;
+        queueMicrotask(() => WrContextMenu.closeActive());
+    }
     /** @internal Keyboard activation — Enter / Space. */
     activate(event) {
         if (this.disabled())
@@ -300,10 +314,10 @@ class WrContextMenuItem {
         pane.classList.remove('wr-context-menu-overlay--open');
         setTimeout(() => ref.dispose(), SUBMENU_TRANSITION_MS);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrContextMenuItem, isStandalone: true, selector: "wr-context-menu-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, submenu: { classPropertyName: "submenu", publicName: "submenu", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave($event)", "keydown.enter": "activate($event)", "keydown.space": "activate($event)", "keydown.arrowRight": "onArrowRight($event)", "keydown.arrowLeft": "onArrowLeft($event)" }, properties: { "class": "classes()", "attr.tabindex": "-1", "attr.aria-disabled": "disabled() ? true : null", "attr.aria-haspopup": "submenu() ? \"menu\" : null", "attr.aria-expanded": "submenu() ? (submenuOpen ? \"true\" : \"false\") : null" } }, ngImport: i0, template: "@if (icon(); as name) {\n  <wr-icon class=\"wr-context-menu-item__icon\" [name]=\"name\" size=\"14\" />\n}\n<span class=\"wr-context-menu-item__label\"><ng-content /></span>\n@if (submenu()) {\n  <svg\n    class=\"wr-icon__svg wr-context-menu-item__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m9 18 6-6-6-6\" />\n  </svg>\n}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrContextMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrContextMenuItem, isStandalone: true, selector: "wr-context-menu-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, submenu: { classPropertyName: "submenu", publicName: "submenu", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave($event)", "click": "onClick()", "keydown.enter": "activate($event)", "keydown.space": "activate($event)", "keydown.arrowRight": "onArrowRight($event)", "keydown.arrowLeft": "onArrowLeft($event)" }, properties: { "class": "classes()", "attr.tabindex": "-1", "attr.aria-disabled": "disabled() ? true : null", "attr.aria-haspopup": "submenu() ? \"menu\" : null", "attr.aria-expanded": "submenu() ? (submenuOpen ? \"true\" : \"false\") : null" } }, ngImport: i0, template: "@if (icon(); as name) {\n  <wr-icon class=\"wr-context-menu-item__icon\" [name]=\"name\" size=\"14\" />\n}\n<span class=\"wr-context-menu-item__label\"><ng-content /></span>\n@if (submenu()) {\n  <svg\n    class=\"wr-icon__svg wr-context-menu-item__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m9 18 6-6-6-6\" />\n  </svg>\n}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenuItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrContextMenuItem, decorators: [{
             type: Component,
             args: [{ selector: 'wr-context-menu-item', encapsulation: ViewEncapsulation.None, host: {
                         role: 'menuitem',
@@ -314,6 +328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[attr.aria-expanded]': 'submenu() ? (submenuOpen ? "true" : "false") : null',
                         '(mouseenter)': 'onMouseEnter()',
                         '(mouseleave)': 'onMouseLeave($event)',
+                        '(click)': 'onClick()',
                         '(keydown.enter)': 'activate($event)',
                         '(keydown.space)': 'activate($event)',
                         '(keydown.arrowRight)': 'onArrowRight($event)',
@@ -329,9 +344,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  */
 /**
  * Attach to any element to show a `<wr-context-menu>` at the pointer
- * position when the user right-clicks, long-presses on touch, or otherwise
- * sends a `contextmenu` event (Shift+F10, etc.). The native browser menu is
- * suppressed for the host element.
+ * position when the user right-clicks or otherwise sends a `contextmenu`
+ * event (Shift+F10, etc.). The native browser menu is suppressed for the
+ * host element.
  *
  * @example
  * ```html
@@ -342,7 +357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * </wr-context-menu>
  * ```
  *
- * @see https://ngwr.dev/components/context-menu
+ * @see https://ngwr.dev/reference/components/context-menu
  */
 class WrContextMenu {
     /** Menu to open. Pass a `<wr-context-menu>` template reference. */
@@ -355,6 +370,14 @@ class WrContextMenu {
     overlayRef = null;
     closingTimer = null;
     leaveTimer = null;
+    // Touch long-press → open. Right-click keeps using `(contextmenu)`.
+    pressTimer = null;
+    pressX = 0;
+    pressY = 0;
+    pressPageX = 0;
+    pressPageY = 0;
+    lastLongPressAt = 0;
+    cancelPressScroll = null;
     /**
      * Single open root menu at a time. Submenu items use this to signal
      * chain-level hover state: when the cursor enters ANY pane in the
@@ -373,6 +396,15 @@ class WrContextMenu {
     static scheduleChainClose() {
         WrContextMenu.activeRoot?.scheduleLeave();
     }
+    /**
+     * Called from a `<wr-context-menu-item>` click — selecting an item
+     * dismisses the whole chain (root + any open submenus). Items live in
+     * a detached overlay portal, so they reach their owning root through
+     * this static handle rather than DI.
+     */
+    static closeActive() {
+        WrContextMenu.activeRoot?.closeOverlay();
+    }
     /**
      * Open/close animation duration in ms. Matches the longest SCSS
      * transition on `.wr-context-menu-overlay` (the spring-scale curve).
@@ -388,30 +420,25 @@ class WrContextMenu {
      * on a deliberate hover-out.
      */
     static LEAVE_DELAY = 240;
-    /** Hold duration (ms) before a stationary touch press opens the menu. */
+    /** Hold duration before a touch long-press opens the menu. */
     static LONG_PRESS_MS = 500;
-    /** Movement (px) that reclassifies a press as a scroll and cancels it. */
-    static LONG_PRESS_MOVE_TOLERANCE = 10;
-    longPressTimer = null;
-    touchStartX = 0;
-    touchStartY = 0;
-    longPressFired = false;
-    suppressContextMenuUntil = 0;
+    /** Finger travel (px) that turns a pending long-press into a scroll/drag. */
+    static PRESS_MOVE_TOLERANCE = 10;
     constructor() {
         this.destroyRef.onDestroy(() => {
-            this.clearLongPress();
+            this.cancelPress();
             this.closeOverlay();
         });
     }
     /** @internal Right-click handler — opens at the pointer (or re-positions if already open). */
     onContextMenu(event) {
         event.preventDefault();
-        event.stopPropagation();
-        // A touch long-press just opened the menu; ignore the synthetic
-        // `contextmenu` some platforms (Android) fire at the same threshold so we
-        // don't close-and-reopen with a flicker.
-        if (performance.now() < this.suppressContextMenuUntil)
+        // Some touch browsers (Android Chrome) fire a synthetic `contextmenu`
+        // right after a long-press has already opened the menu — swallow it so it
+        // doesn't re-open / restart the animation.
+        if (Date.now() - this.lastLongPressAt < 700)
             return;
+        event.stopPropagation();
         // Re-open at the new position even if it was already open.
         // Use page coords (document-relative) so the menu anchors to the
         // zone it was opened over — scrolling the page carries the menu
@@ -420,55 +447,49 @@ class WrContextMenu {
         this.openOverlay(event.pageX, event.pageY);
     }
     /**
-     * @internal Touch long-press → open the menu. Native `contextmenu` is
-     * unreliable on touch (iOS doesn't fire it, Android's timing varies), so we
-     * detect the press ourselves: a stationary hold for `LONG_PRESS_MS` opens
-     * the menu at the touch point; moving the finger reclassifies it as a
-     * scroll and cancels.
+     * @internal Touch/pen long-press → open the menu at the press point. Desktop
+     * right-click stays on `(contextmenu)`; this path is filtered to non-mouse
+     * pointers. Deliberately does NOT `preventDefault`/`setPointerCapture` or set
+     * `touch-action` — a press that turns into a scroll must still scroll, so the
+     * open is cancelled on movement (> tolerance), on scroll, and on early lift.
      */
-    onTouchStart(event) {
-        const touch = event.touches[0];
-        if (!touch)
+    onPointerDown(event) {
+        if (event.pointerType === 'mouse' || !event.isPrimary || this.pressTimer !== null)
             return;
-        this.touchStartX = touch.pageX;
-        this.touchStartY = touch.pageY;
-        this.longPressFired = false;
-        this.clearLongPress();
-        this.longPressTimer = setTimeout(() => {
-            this.longPressTimer = null;
-            this.longPressFired = true;
-            this.suppressContextMenuUntil = performance.now() + 700;
+        this.pressX = event.clientX;
+        this.pressY = event.clientY;
+        this.pressPageX = event.pageX;
+        this.pressPageY = event.pageY;
+        this.pressTimer = setTimeout(() => {
+            this.pressTimer = null;
+            this.cancelPress();
+            this.lastLongPressAt = Date.now();
             this.closeOverlay();
-            this.openOverlay(this.touchStartX, this.touchStartY);
+            this.openOverlay(this.pressPageX, this.pressPageY);
         }, WrContextMenu.LONG_PRESS_MS);
+        const onScroll = () => this.cancelPress();
+        document.addEventListener('scroll', onScroll, { capture: true, passive: true });
+        this.cancelPressScroll = () => document.removeEventListener('scroll', onScroll, { capture: true });
     }
-    /** @internal Cancel a pending long-press once the finger travels (a scroll). */
-    onTouchMove(event) {
-        if (this.longPressTimer === null)
-            return;
-        const touch = event.touches[0];
-        if (!touch)
+    /** @internal Finger moved too far before the hold fired — it's a scroll/drag. */
+    onPointerMove(event) {
+        if (this.pressTimer === null)
             return;
-        const moved = Math.abs(touch.pageX - this.touchStartX) > WrContextMenu.LONG_PRESS_MOVE_TOLERANCE ||
-            Math.abs(touch.pageY - this.touchStartY) > WrContextMenu.LONG_PRESS_MOVE_TOLERANCE;
-        if (moved)
-            this.clearLongPress();
-    }
-    /** @internal Release — drop a pending press; swallow the synthetic click a fired press would emit. */
-    onTouchEnd(event) {
-        this.clearLongPress();
-        if (this.longPressFired) {
-            this.longPressFired = false;
-            // Stop the browser turning this long-press into a synthetic click that
-            // would land outside the freshly-opened menu and dismiss it.
-            event.preventDefault();
+        if (Math.hypot(event.clientX - this.pressX, event.clientY - this.pressY) > WrContextMenu.PRESS_MOVE_TOLERANCE) {
+            this.cancelPress();
         }
     }
-    clearLongPress() {
-        if (this.longPressTimer !== null) {
-            clearTimeout(this.longPressTimer);
-            this.longPressTimer = null;
+    /** @internal Lifted (or the browser claimed the gesture) before the hold fired. */
+    onPointerUp() {
+        this.cancelPress();
+    }
+    cancelPress() {
+        if (this.pressTimer !== null) {
+            clearTimeout(this.pressTimer);
+            this.pressTimer = null;
         }
+        this.cancelPressScroll?.();
+        this.cancelPressScroll = null;
     }
     /** Close the menu. */
     close() {
@@ -624,19 +645,20 @@ class WrContextMenu {
             this.closeOverlay();
         }, WrContextMenu.LEAVE_DELAY);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: WrContextMenu, isStandalone: true, selector: "[wrContextMenu]", inputs: { menu: { classPropertyName: "menu", publicName: "wrContextMenu", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "contextmenu": "onContextMenu($event)", "touchstart": "onTouchStart($event)", "touchmove": "onTouchMove($event)", "touchend": "onTouchEnd($event)", "touchcancel": "onTouchEnd($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrContextMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: WrContextMenu, isStandalone: true, selector: "[wrContextMenu]", inputs: { menu: { classPropertyName: "menu", publicName: "wrContextMenu", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "contextmenu": "onContextMenu($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()" }, classAttribute: "wr-context-menu-host" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrContextMenu, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrContextMenu]',
                     host: {
+                        class: 'wr-context-menu-host',
                         '(contextmenu)': 'onContextMenu($event)',
-                        '(touchstart)': 'onTouchStart($event)',
-                        '(touchmove)': 'onTouchMove($event)',
-                        '(touchend)': 'onTouchEnd($event)',
-                        '(touchcancel)': 'onTouchEnd($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'onPointerUp()',
+                        '(pointercancel)': 'onPointerUp()',
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrContextMenu", required: true }] }] } });
@@ -663,11 +685,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  */
 class WrContextMenuPanel {
     /** The internal template the directive portals into the overlay. @internal */
-    contentTpl = viewChild.required(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: WrContextMenuPanel, isStandalone: true, selector: "wr-context-menu", host: { styleAttribute: "display:none" }, viewQueries: [{ propertyName: "contentTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["wrContextMenu"], ngImport: i0, template: '<ng-template><div class="wr-context-menu" role="menu"><ng-content /></div></ng-template>', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    contentTpl = viewChild.required(TemplateRef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentTpl" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrContextMenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: WrContextMenuPanel, isStandalone: true, selector: "wr-context-menu", host: { styleAttribute: "display:none" }, viewQueries: [{ propertyName: "contentTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["wrContextMenu"], ngImport: i0, template: '<ng-template><div class="wr-context-menu" role="menu"><ng-content /></div></ng-template>', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenuPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrContextMenuPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-context-menu',
@@ -700,10 +723,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * ```
  */
 class WrContextMenuDivider {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenuDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: WrContextMenuDivider, isStandalone: true, selector: "wr-context-menu-divider", host: { attributes: { "role": "separator", "aria-orientation": "horizontal" }, classAttribute: "wr-context-menu-divider" }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrContextMenuDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: WrContextMenuDivider, isStandalone: true, selector: "wr-context-menu-divider", host: { attributes: { "role": "separator", "aria-orientation": "horizontal" }, classAttribute: "wr-context-menu-divider" }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenuDivider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrContextMenuDivider, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-context-menu-divider',