igniteui-webcomponents 4.5.0 → 4.6.0

package/components/common/controllers/key-bindings.d.ts

@@ -0,0 +1,149 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { Ref } from 'lit/directives/ref.js';
+export declare const arrowLeft: "ArrowLeft";
+export declare const arrowRight: "ArrowRight";
+export declare const arrowUp: "ArrowUp";
+export declare const arrowDown: "ArrowDown";
+export declare const enterKey: "Enter";
+export declare const spaceBar: " ";
+export declare const escapeKey: "Escape";
+export declare const homeKey: "Home";
+export declare const endKey: "End";
+export declare const pageUpKey: "PageUp";
+export declare const pageDownKey: "PageDown";
+export declare const tabKey: "Tab";
+export declare const altKey: "Alt";
+export declare const ctrlKey: "Ctrl";
+export declare const metaKey: "Meta";
+export declare const shiftKey: "Shift";
+export type KeyBindingHandler = (event: KeyboardEvent) => void;
+export type KeyBindingObserverCleanup = {
+    unsubscribe: () => void;
+};
+/**
+ * Whether the current event should be ignored by the controller.
+ *
+ * @param node - The event target
+ * @param event - The event object
+ *
+ * When `true` is returned, the current event is ignored.
+ */
+export type KeyBindingSkipCallback = (node: Element, event: KeyboardEvent) => boolean;
+/**
+ * The event type which will trigger the bound handler.
+ *
+ * @remarks
+ * `keydownRepeat` is similar to `keydown` with the exception
+ * that after the handler is invoked the pressed state of the key is reset
+ * in the controller.
+ */
+export type KeyBindingTrigger = 'keydown' | 'keyup' | 'keydownRepeat';
+/**
+ * Configuration object for the controller.
+ */
+export interface KeyBindingControllerOptions {
+    /**
+     * By default, the controller listens for keypress events in the context of the host element.
+     * If you pass a `ref`, you can limit the observation to a certain DOM part of the host scope.
+     */
+    ref?: Ref;
+    /**
+     * Option to ignore key press events.
+     *
+     * If passed an array of CSS selectors, it will ignore key presses originating from elements in the event composed path
+     * that match one of the selectors.
+     * Otherwise you can pass a {@link KeyBindingSkipCallback} function.
+     *
+     * Defaults to `['input', 'textarea', 'select']`.
+     *
+     * @example
+     * ```ts
+     * {
+     *  // Skip events originating from elements with `readonly` attribute
+     *  skip: ['[readonly]']
+     * }
+     * ...
+     * {
+     * // Same as above but with a callback
+     *  skip: (node: Element) => node.hasAttribute('readonly')
+     * }
+     * ```
+     */
+    skip?: string[] | KeyBindingSkipCallback;
+    /**
+     * A set of KeyBindingOptions configuration which is applied to every handler
+     * that is added to the controller.
+     *
+     * Any additional KeyBindingOptions values passed when `set` is called
+     * will be merged with `bindingDefaults`.
+     */
+    bindingDefaults?: KeyBindingOptions;
+}
+/**
+ * Configuration object for customizing the behavior of
+ * the registered handler.
+ */
+export interface KeyBindingOptions {
+    /**
+     * The event type(s) on which the handler will be invoked.
+     *
+     * Defaults to `keydown` if not set.
+     */
+    triggers?: KeyBindingTrigger[];
+    /**
+     * Whether to call `preventDefault` on the target event before the handler is invoked.
+     */
+    preventDefault?: boolean;
+    /**
+     * Whether to call `stopPropagation` on the target event before the handler is invoked.
+     */
+    stopPropagation?: boolean;
+}
+export declare function parseKeys(keys: string | string[]): {
+    keys: string[];
+    modifiers: string[];
+};
+declare class KeyBindingController implements ReactiveController {
+    protected _host: ReactiveControllerHost & Element;
+    protected _ref?: Ref;
+    protected _observedElement?: Element;
+    protected _options?: KeyBindingControllerOptions;
+    private bindings;
+    private pressedKeys;
+    protected get _element(): Element | undefined;
+    /**
+     * Sets the controller to listen for keyboard events on an arbitrary `element` in the page context.
+     * All the configuration and event handlers are applied as well.
+     *
+     * Returns an object with an `unsubscribe` function which should be called when the observing of keyboard
+     * events on the `element` should cease.
+     */
+    observeElement(element: Element): KeyBindingObserverCleanup;
+    constructor(host: ReactiveControllerHost & Element, options?: KeyBindingControllerOptions);
+    /**
+     * Checks and executes any event modifiers that are present in the matched binding.
+     */
+    private eventModifiersMatch;
+    private keysMatch;
+    private bindingMatches;
+    handleEvent(event: KeyboardEvent): void;
+    /**
+     * Registers a keybinding handler.
+     */
+    set(key: string | string[], fn: KeyBindingHandler, options?: KeyBindingOptions): this;
+    /**
+     * Register a handler function which is called when the target receives a key
+     * which "activates" it.
+     *
+     * In the browser context this is usually either an Enter and/or Space keypress.
+     */
+    setActivateHandler(fn: KeyBindingHandler, options?: KeyBindingOptions): this;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+/**
+ * Creates a keybinding controller and adds to it to the passed `element`
+ * with the provided `options`.
+ */
+export declare function addKeybindings(element: ReactiveControllerHost & Element, options?: KeyBindingControllerOptions): KeyBindingController;
+export {};

package/components/common/controllers/key-bindings.js

@@ -0,0 +1,168 @@
+export const arrowLeft = 'ArrowLeft';
+export const arrowRight = 'ArrowRight';
+export const arrowUp = 'ArrowUp';
+export const arrowDown = 'ArrowDown';
+export const enterKey = 'Enter';
+export const spaceBar = ' ';
+export const escapeKey = 'Escape';
+export const homeKey = 'Home';
+export const endKey = 'End';
+export const pageUpKey = 'PageUp';
+export const pageDownKey = 'PageDown';
+export const tabKey = 'Tab';
+export const altKey = 'Alt';
+export const ctrlKey = 'Ctrl';
+export const metaKey = 'Meta';
+export const shiftKey = 'Shift';
+const __modifiers = new Set([altKey, ctrlKey, metaKey, shiftKey].map((key) => key.toLowerCase()));
+const defaultOptions = {
+    skip: ['input', 'textarea', 'select'],
+};
+function normalizeKeys(keys) {
+    return (Array.isArray(keys) ? keys : [keys]).map((key) => key.toLowerCase());
+}
+function isModifier(key) {
+    return __modifiers.has(key);
+}
+function isKeydown(event) {
+    return event.type === 'keydown';
+}
+function isKeyup(event) {
+    return event.type === 'keyup';
+}
+function isKeydownTrigger(triggers) {
+    return triggers
+        ? triggers.includes('keydown') || isKeydownRepeatTrigger(triggers)
+        : false;
+}
+function isKeyupTrigger(triggers) {
+    return triggers ? triggers.includes('keyup') : false;
+}
+function isKeydownRepeatTrigger(triggers) {
+    return triggers ? triggers.includes('keydownRepeat') : false;
+}
+function isElement(node) {
+    return node.nodeType === Node.ELEMENT_NODE;
+}
+export function parseKeys(keys) {
+    const parsed = normalizeKeys(keys);
+    return {
+        keys: parsed.filter((key) => !isModifier(key)),
+        modifiers: parsed.filter((key) => isModifier(key)),
+    };
+}
+class KeyBindingController {
+    get _element() {
+        if (this._observedElement) {
+            return this._observedElement;
+        }
+        return this._ref ? this._ref.value : this._host;
+    }
+    observeElement(element) {
+        element.addEventListener('keydown', this);
+        element.addEventListener('keyup', this);
+        this._observedElement = element;
+        return {
+            unsubscribe: () => {
+                this._observedElement?.removeEventListener('keydown', this);
+                this._observedElement?.removeEventListener('keyup', this);
+                this._observedElement = undefined;
+            },
+        };
+    }
+    constructor(host, options) {
+        this.bindings = new Set();
+        this.pressedKeys = new Set();
+        this._host = host;
+        this._ref = options?.ref;
+        this._options = { ...defaultOptions, ...options };
+        host.addController(this);
+    }
+    eventModifiersMatch(binding, event) {
+        if (binding.options?.preventDefault) {
+            event.preventDefault();
+        }
+        if (binding.options?.stopPropagation) {
+            event.stopPropagation();
+        }
+    }
+    keysMatch(binding, event) {
+        const modifiers = binding.modifiers ?? [];
+        return (binding.keys.every((key) => this.pressedKeys.has(key)) &&
+            modifiers.every((mod) => !!event[`${mod}Key`]));
+    }
+    bindingMatches(binding, event) {
+        const triggers = binding.options?.triggers ?? ['keydown'];
+        if (!this.keysMatch(binding, event)) {
+            return false;
+        }
+        if (isKeydown(event) && isKeydownTrigger(triggers)) {
+            return true;
+        }
+        if (isKeyup(event) && isKeyupTrigger(triggers)) {
+            return true;
+        }
+        return false;
+    }
+    handleEvent(event) {
+        const key = event.key.toLowerCase();
+        const path = event.composedPath();
+        const skip = this._options?.skip;
+        if (!this._element || !path.includes(this._element)) {
+            return;
+        }
+        if (skip) {
+            const shouldSkip = Array.isArray(skip)
+                ? path.some((target) => isElement(target) &&
+                    skip.some((selector) => target.matches(selector)))
+                : skip.call(this._host, event.target, event);
+            if (shouldSkip) {
+                return;
+            }
+        }
+        if (isModifier(key)) {
+            this.pressedKeys.clear();
+        }
+        if (isKeydown(event) && !isModifier(key)) {
+            this.pressedKeys.add(key);
+        }
+        for (const binding of this.bindings) {
+            if (this.bindingMatches(binding, event)) {
+                this.eventModifiersMatch(binding, event);
+                binding.handler.call(this._host, event);
+                if (isKeydownRepeatTrigger(binding.options?.triggers)) {
+                    this.pressedKeys.delete(key);
+                }
+            }
+        }
+        if (isKeyup(event) && !isModifier(key)) {
+            this.pressedKeys.delete(key);
+        }
+    }
+    set(key, fn, options) {
+        this.bindings.add({
+            ...parseKeys(key),
+            handler: fn,
+            options: { ...this._options?.bindingDefaults, ...options },
+        });
+        return this;
+    }
+    setActivateHandler(fn, options) {
+        for (const key of [enterKey, spaceBar]) {
+            this.set(key, fn, options);
+        }
+        return this;
+    }
+    hostConnected() {
+        this._host.addEventListener('keyup', this);
+        this._host.addEventListener('keydown', this);
+    }
+    hostDisconnected() {
+        this._host.removeEventListener('keyup', this);
+        this._host.removeEventListener('keydown', this);
+    }
+}
+export function addKeybindings(element, options) {
+    return new KeyBindingController(element, options);
+}
+//# sourceMappingURL=key-bindings.js.map

package/components/common/controllers/key-bindings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-bindings.js","sourceRoot":"","sources":["../../../../src/components/common/controllers/key-bindings.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type { Ref } from 'lit/directives/ref.js';\n\n/* Common keys */\nexport const arrowLeft = 'ArrowLeft' as const;\nexport const arrowRight = 'ArrowRight' as const;\nexport const arrowUp = 'ArrowUp' as const;\nexport const arrowDown = 'ArrowDown' as const;\nexport const enterKey = 'Enter' as const;\nexport const spaceBar = ' ' as const;\nexport const escapeKey = 'Escape' as const;\nexport const homeKey = 'Home' as const;\nexport const endKey = 'End' as const;\nexport const pageUpKey = 'PageUp' as const;\nexport const pageDownKey = 'PageDown' as const;\nexport const tabKey = 'Tab' as const;\n\n/* Modifiers */\nexport const altKey = 'Alt' as const;\nexport const ctrlKey = 'Ctrl' as const;\nexport const metaKey = 'Meta' as const;\nexport const shiftKey = 'Shift' as const;\n\n/* Types */\nexport type KeyBindingHandler = (event: KeyboardEvent) => void;\nexport type KeyBindingObserverCleanup = { unsubscribe: () => void };\n\n/**\n * Whether the current event should be ignored by the controller.\n *\n * @param node - The event target\n * @param event - The event object\n *\n * When `true` is returned, the current event is ignored.\n */\nexport type KeyBindingSkipCallback = (\n  node: Element,\n  event: KeyboardEvent\n) => boolean;\n\n/**\n * The event type which will trigger the bound handler.\n *\n * @remarks\n * `keydownRepeat` is similar to `keydown` with the exception\n * that after the handler is invoked the pressed state of the key is reset\n * in the controller.\n */\nexport type KeyBindingTrigger = 'keydown' | 'keyup' | 'keydownRepeat';\n\n/**\n * Configuration object for the controller.\n */\nexport interface KeyBindingControllerOptions {\n  /**\n   * By default, the controller listens for keypress events in the context of the host element.\n   * If you pass a `ref`, you can limit the observation to a certain DOM part of the host scope.\n   */\n  ref?: Ref;\n  /**\n   * Option to ignore key press events.\n   *\n   * If passed an array of CSS selectors, it will ignore key presses originating from elements in the event composed path\n   * that match one of the selectors.\n   * Otherwise you can pass a {@link KeyBindingSkipCallback} function.\n   *\n   * Defaults to `['input', 'textarea', 'select']`.\n   *\n   * @example\n   * ```ts\n   * {\n   *  // Skip events originating from elements with `readonly` attribute\n   *  skip: ['[readonly]']\n   * }\n   * ...\n   * {\n   * // Same as above but with a callback\n   *  skip: (node: Element) => node.hasAttribute('readonly')\n   * }\n   * ```\n   */\n  skip?: string[] | KeyBindingSkipCallback;\n  /**\n   * A set of KeyBindingOptions configuration which is applied to every handler\n   * that is added to the controller.\n   *\n   * Any additional KeyBindingOptions values passed when `set` is called\n   * will be merged with `bindingDefaults`.\n   */\n  bindingDefaults?: KeyBindingOptions;\n}\n\n/**\n * Configuration object for customizing the behavior of\n * the registered handler.\n */\nexport interface KeyBindingOptions {\n  /**\n   * The event type(s) on which the handler will be invoked.\n   *\n   * Defaults to `keydown` if not set.\n   */\n  triggers?: KeyBindingTrigger[];\n  /**\n   * Whether to call `preventDefault` on the target event before the handler is invoked.\n   */\n  preventDefault?: boolean;\n  /**\n   * Whether to call `stopPropagation` on the target event before the handler is invoked.\n   */\n  stopPropagation?: boolean;\n}\n\ninterface KeyBinding {\n  keys: string[];\n  handler: KeyBindingHandler;\n  options?: KeyBindingOptions;\n  modifiers?: string[];\n}\n\nconst __modifiers = new Set<string>(\n  [altKey, ctrlKey, metaKey, shiftKey].map((key) => key.toLowerCase())\n);\n\nconst defaultOptions: KeyBindingControllerOptions = {\n  skip: ['input', 'textarea', 'select'],\n};\n\nfunction normalizeKeys(keys: string | string[]) {\n  return (Array.isArray(keys) ? keys : [keys]).map((key) => key.toLowerCase());\n}\n\nfunction isModifier(key: string) {\n  return __modifiers.has(key);\n}\n\nfunction isKeydown(event: Event) {\n  return event.type === 'keydown';\n}\n\nfunction isKeyup(event: Event) {\n  return event.type === 'keyup';\n}\n\nfunction isKeydownTrigger(triggers?: KeyBindingTrigger[]) {\n  return triggers\n    ? triggers.includes('keydown') || isKeydownRepeatTrigger(triggers)\n    : false;\n}\n\nfunction isKeyupTrigger(triggers?: KeyBindingTrigger[]) {\n  return triggers ? triggers.includes('keyup') : false;\n}\n\nfunction isKeydownRepeatTrigger(triggers?: KeyBindingTrigger[]) {\n  return triggers ? triggers.includes('keydownRepeat') : false;\n}\n\nfunction isElement(node: EventTarget): node is Element {\n  return (node as Element).nodeType === Node.ELEMENT_NODE;\n}\n\nexport function parseKeys(keys: string | string[]) {\n  const parsed = normalizeKeys(keys);\n  return {\n    keys: parsed.filter((key) => !isModifier(key)),\n    modifiers: parsed.filter((key) => isModifier(key)),\n  };\n}\n\nclass KeyBindingController implements ReactiveController {\n  protected _host: ReactiveControllerHost & Element;\n  protected _ref?: Ref;\n  protected _observedElement?: Element;\n  protected _options?: KeyBindingControllerOptions;\n  private bindings = new Set<KeyBinding>();\n  private pressedKeys = new Set<string>();\n\n  protected get _element() {\n    if (this._observedElement) {\n      return this._observedElement;\n    }\n    return this._ref ? this._ref.value : this._host;\n  }\n\n  /**\n   * Sets the controller to listen for keyboard events on an arbitrary `element` in the page context.\n   * All the configuration and event handlers are applied as well.\n   *\n   * Returns an object with an `unsubscribe` function which should be called when the observing of keyboard\n   * events on the `element` should cease.\n   */\n  public observeElement(element: Element): KeyBindingObserverCleanup {\n    element.addEventListener('keydown', this);\n    element.addEventListener('keyup', this);\n    this._observedElement = element;\n\n    return {\n      unsubscribe: () => {\n        this._observedElement?.removeEventListener('keydown', this);\n        this._observedElement?.removeEventListener('keyup', this);\n        this._observedElement = undefined;\n      },\n    };\n  }\n\n  constructor(\n    host: ReactiveControllerHost & Element,\n    options?: KeyBindingControllerOptions\n  ) {\n    this._host = host;\n    this._ref = options?.ref;\n    this._options = { ...defaultOptions, ...options };\n    host.addController(this);\n  }\n\n  /**\n   * Checks and executes any event modifiers that are present in the matched binding.\n   */\n  private eventModifiersMatch(binding: KeyBinding, event: KeyboardEvent) {\n    if (binding.options?.preventDefault) {\n      event.preventDefault();\n    }\n\n    if (binding.options?.stopPropagation) {\n      event.stopPropagation();\n    }\n  }\n\n  private keysMatch(binding: KeyBinding, event: KeyboardEvent) {\n    const modifiers = binding.modifiers ?? [];\n    return (\n      binding.keys.every((key) => this.pressedKeys.has(key)) &&\n      modifiers.every((mod) => !!event[`${mod}Key` as keyof KeyboardEvent])\n    );\n  }\n\n  private bindingMatches(binding: KeyBinding, event: KeyboardEvent) {\n    const triggers = binding.options?.triggers ?? ['keydown'];\n\n    if (!this.keysMatch(binding, event)) {\n      return false;\n    }\n\n    if (isKeydown(event) && isKeydownTrigger(triggers)) {\n      return true;\n    }\n\n    if (isKeyup(event) && isKeyupTrigger(triggers)) {\n      return true;\n    }\n\n    return false;\n  }\n\n  public handleEvent(event: KeyboardEvent) {\n    const key = event.key.toLowerCase();\n    const path = event.composedPath();\n    const skip = this._options?.skip;\n\n    if (!this._element || !path.includes(this._element)) {\n      return;\n    }\n\n    if (skip) {\n      const shouldSkip = Array.isArray(skip)\n        ? path.some(\n            (target) =>\n              isElement(target) &&\n              skip.some((selector) => target.matches(selector))\n          )\n        : skip.call(this._host, event.target as Element, event);\n\n      if (shouldSkip) {\n        return;\n      }\n    }\n\n    if (isModifier(key)) {\n      this.pressedKeys.clear();\n    }\n\n    if (isKeydown(event) && !isModifier(key)) {\n      this.pressedKeys.add(key);\n    }\n\n    for (const binding of this.bindings) {\n      if (this.bindingMatches(binding, event)) {\n        this.eventModifiersMatch(binding, event);\n\n        binding.handler.call(this._host, event);\n\n        if (isKeydownRepeatTrigger(binding.options?.triggers)) {\n          this.pressedKeys.delete(key);\n        }\n      }\n    }\n\n    if (isKeyup(event) && !isModifier(key)) {\n      this.pressedKeys.delete(key);\n    }\n  }\n\n  /**\n   * Registers a keybinding handler.\n   */\n  public set(\n    key: string | string[],\n    fn: KeyBindingHandler,\n    options?: KeyBindingOptions\n  ) {\n    this.bindings.add({\n      ...parseKeys(key),\n      handler: fn,\n      options: { ...this._options?.bindingDefaults, ...options },\n    });\n\n    return this;\n  }\n\n  /**\n   * Register a handler function which is called when the target receives a key\n   * which \"activates\" it.\n   *\n   * In the browser context this is usually either an Enter and/or Space keypress.\n   */\n  public setActivateHandler(\n    fn: KeyBindingHandler,\n    options?: KeyBindingOptions\n  ) {\n    for (const key of [enterKey, spaceBar]) {\n      this.set(key, fn, options);\n    }\n\n    return this;\n  }\n\n  public hostConnected(): void {\n    this._host.addEventListener('keyup', this);\n    this._host.addEventListener('keydown', this);\n  }\n\n  public hostDisconnected(): void {\n    this._host.removeEventListener('keyup', this);\n    this._host.removeEventListener('keydown', this);\n  }\n}\n\n/**\n * Creates a keybinding controller and adds to it to the passed `element`\n * with the provided `options`.\n */\nexport function addKeybindings(\n  element: ReactiveControllerHost & Element,\n  options?: KeyBindingControllerOptions\n) {\n  return new KeyBindingController(element, options);\n}\n"]}

package/components/common/controllers/root-click.d.ts

@@ -0,0 +1,25 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+type RootClickControllerConfig = {
+    hideCallback?: Function;
+    target?: HTMLElement;
+};
+type RootClickControllerHost = ReactiveControllerHost & HTMLElement & {
+    open: boolean;
+    keepOpenOnOutsideClick: boolean;
+    hide(): void;
+};
+declare class RootClickController implements ReactiveController {
+    private readonly host;
+    private config?;
+    constructor(host: RootClickControllerHost, config?: RootClickControllerConfig | undefined);
+    private addEventListeners;
+    private removeEventListeners;
+    private configureListeners;
+    handleEvent(event: MouseEvent): void;
+    private hide;
+    update(config?: RootClickControllerConfig): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+export declare function addRootClickHandler(host: RootClickControllerHost, config?: RootClickControllerConfig): RootClickController;
+export {};

package/components/common/controllers/root-click.js

@@ -0,0 +1,50 @@
+class RootClickController {
+    constructor(host, config) {
+        this.host = host;
+        this.config = config;
+        this.host.addController(this);
+    }
+    addEventListeners() {
+        if (!this.host.keepOpenOnOutsideClick) {
+            document.addEventListener('click', this);
+        }
+    }
+    removeEventListeners() {
+        document.removeEventListener('click', this);
+    }
+    configureListeners() {
+        this.host.open ? this.addEventListeners() : this.removeEventListeners();
+    }
+    handleEvent(event) {
+        if (this.host.keepOpenOnOutsideClick) {
+            return;
+        }
+        const path = event.composed ? event.composedPath() : [event.target];
+        const target = this.config?.target || null;
+        if (path.includes(this.host) || path.includes(target)) {
+            return;
+        }
+        this.hide();
+    }
+    hide() {
+        this.config?.hideCallback
+            ? this.config.hideCallback.call(this.host)
+            : this.host.hide();
+    }
+    update(config) {
+        if (config) {
+            this.config = { ...this.config, ...config };
+        }
+        this.configureListeners();
+    }
+    hostConnected() {
+        this.configureListeners();
+    }
+    hostDisconnected() {
+        this.removeEventListeners();
+    }
+}
+export function addRootClickHandler(host, config) {
+    return new RootClickController(host, config);
+}
+//# sourceMappingURL=root-click.js.map

package/components/common/controllers/root-click.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root-click.js","sourceRoot":"","sources":["../../../../src/components/common/controllers/root-click.ts"],"names":[],"mappings":"AAcA,MAAM,mBAAmB;IACvB,YACmB,IAA6B,EACtC,MAAkC;QADzB,SAAI,GAAJ,IAAI,CAAyB;QACtC,WAAM,GAAN,MAAM,CAA4B;QAE1C,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE;YACrC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;SAC1C;IACH,CAAC;IAEO,oBAAoB;QAC1B,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAC9C,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC1E,CAAC;IAEM,WAAW,CAAC,KAAiB;QAClC,IAAI,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE;YACpC,OAAO;SACR;QAED,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACpE,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC;QAC3C,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;YACrD,OAAO;SACR;QAED,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAEO,IAAI;QACV,IAAI,CAAC,MAAM,EAAE,YAAY;YACvB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;YAC1C,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC;IAEM,MAAM,CAAC,MAAkC;QAC9C,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;SAC7C;QACD,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEM,aAAa;QAClB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEM,gBAAgB;QACrB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;CACF;AAED,MAAM,UAAU,mBAAmB,CACjC,IAA6B,EAC7B,MAAkC;IAElC,OAAO,IAAI,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAC/C,CAAC","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\ntype RootClickControllerConfig = {\n  hideCallback?: Function;\n  target?: HTMLElement;\n};\n\ntype RootClickControllerHost = ReactiveControllerHost &\n  HTMLElement & {\n    open: boolean;\n    keepOpenOnOutsideClick: boolean;\n    hide(): void;\n  };\n\nclass RootClickController implements ReactiveController {\n  constructor(\n    private readonly host: RootClickControllerHost,\n    private config?: RootClickControllerConfig\n  ) {\n    this.host.addController(this);\n  }\n\n  private addEventListeners() {\n    if (!this.host.keepOpenOnOutsideClick) {\n      document.addEventListener('click', this);\n    }\n  }\n\n  private removeEventListeners() {\n    document.removeEventListener('click', this);\n  }\n\n  private configureListeners() {\n    this.host.open ? this.addEventListeners() : this.removeEventListeners();\n  }\n\n  public handleEvent(event: MouseEvent) {\n    if (this.host.keepOpenOnOutsideClick) {\n      return;\n    }\n\n    const path = event.composed ? event.composedPath() : [event.target];\n    const target = this.config?.target || null;\n    if (path.includes(this.host) || path.includes(target)) {\n      return;\n    }\n\n    this.hide();\n  }\n\n  private hide() {\n    this.config?.hideCallback\n      ? this.config.hideCallback.call(this.host)\n      : this.host.hide();\n  }\n\n  public update(config?: RootClickControllerConfig) {\n    if (config) {\n      this.config = { ...this.config, ...config };\n    }\n    this.configureListeners();\n  }\n\n  public hostConnected() {\n    this.configureListeners();\n  }\n\n  public hostDisconnected() {\n    this.removeEventListeners();\n  }\n}\n\nexport function addRootClickHandler(\n  host: RootClickControllerHost,\n  config?: RootClickControllerConfig\n) {\n  return new RootClickController(host, config);\n}\n"]}

package/components/common/controllers/root-scroll.d.ts

@@ -0,0 +1,27 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+type RootScrollControllerConfig = {
+    hideCallback?: Function;
+    resetListeners?: boolean;
+};
+type RootScrollControllerHost = ReactiveControllerHost & {
+    open: boolean;
+    hide(): void;
+    scrollStrategy?: 'scroll' | 'close' | 'block';
+};
+declare class RootScrollController implements ReactiveController {
+    private readonly host;
+    private config?;
+    private _cache;
+    constructor(host: RootScrollControllerHost, config?: RootScrollControllerConfig | undefined);
+    private configureListeners;
+    private hide;
+    private addEventListeners;
+    private removeEventListeners;
+    handleEvent(event: Event): void;
+    private _block;
+    update(config?: RootScrollControllerConfig): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+export declare function addRootScrollHandler(host: RootScrollControllerHost, config?: RootScrollControllerConfig): RootScrollController;
+export {};

package/components/common/controllers/root-scroll.js

@@ -0,0 +1,63 @@
+class RootScrollController {
+    constructor(host, config) {
+        this.host = host;
+        this.config = config;
+        this._cache = new WeakMap();
+        this.host.addController(this);
+    }
+    configureListeners() {
+        this.host.open ? this.addEventListeners() : this.removeEventListeners();
+    }
+    hide() {
+        this.config?.hideCallback
+            ? this.config.hideCallback.call(this.host)
+            : this.host.hide();
+    }
+    addEventListeners() {
+        if (this.host.scrollStrategy !== 'scroll') {
+            document.addEventListener('scroll', this, { capture: true });
+        }
+    }
+    removeEventListeners() {
+        document.removeEventListener('scroll', this, { capture: true });
+        this._cache = new WeakMap();
+    }
+    handleEvent(event) {
+        this.host.scrollStrategy === 'close' ? this.hide() : this._block(event);
+    }
+    _block(event) {
+        event.preventDefault();
+        const element = event.target;
+        const cache = this._cache;
+        if (!cache.has(element)) {
+            cache.set(element, {
+                scrollTop: element.firstElementChild?.scrollTop ?? element.scrollTop,
+                scrollLeft: element.firstElementChild?.scrollLeft ?? element.scrollLeft,
+            });
+        }
+        const record = cache.get(element);
+        Object.assign(element, record);
+        if (element.firstElementChild) {
+            Object.assign(element.firstElementChild, record);
+        }
+    }
+    update(config) {
+        if (config) {
+            this.config = { ...this.config, ...config };
+        }
+        if (config?.resetListeners) {
+            this.removeEventListeners();
+        }
+        this.configureListeners();
+    }
+    hostConnected() {
+        this.configureListeners();
+    }
+    hostDisconnected() {
+        this.removeEventListeners();
+    }
+}
+export function addRootScrollHandler(host, config) {
+    return new RootScrollController(host, config);
+}
+//# sourceMappingURL=root-scroll.js.map

package/components/common/controllers/root-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root-scroll.js","sourceRoot":"","sources":["../../../../src/components/common/controllers/root-scroll.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\ntype RootScrollControllerConfig = {\n  hideCallback?: Function;\n  resetListeners?: boolean;\n};\n\ntype RootScrollControllerHost = ReactiveControllerHost & {\n  open: boolean;\n  hide(): void;\n  scrollStrategy?: 'scroll' | 'close' | 'block';\n};\n\ntype ScrollRecord = { scrollTop: number; scrollLeft: number };\n\nclass RootScrollController implements ReactiveController {\n  private _cache: WeakMap<Element, ScrollRecord>;\n\n  constructor(\n    private readonly host: RootScrollControllerHost,\n    private config?: RootScrollControllerConfig\n  ) {\n    this._cache = new WeakMap();\n    this.host.addController(this);\n  }\n\n  private configureListeners() {\n    this.host.open ? this.addEventListeners() : this.removeEventListeners();\n  }\n\n  private hide() {\n    this.config?.hideCallback\n      ? this.config.hideCallback.call(this.host)\n      : this.host.hide();\n  }\n\n  private addEventListeners() {\n    if (this.host.scrollStrategy !== 'scroll') {\n      document.addEventListener('scroll', this, { capture: true });\n    }\n  }\n\n  private removeEventListeners() {\n    document.removeEventListener('scroll', this, { capture: true });\n    this._cache = new WeakMap();\n  }\n\n  public handleEvent(event: Event) {\n    this.host.scrollStrategy === 'close' ? this.hide() : this._block(event);\n  }\n\n  private _block(event: Event) {\n    event.preventDefault();\n    const element = event.target as Element;\n    const cache = this._cache;\n\n    if (!cache.has(element)) {\n      cache.set(element, {\n        scrollTop: element.firstElementChild?.scrollTop ?? element.scrollTop,\n        scrollLeft: element.firstElementChild?.scrollLeft ?? element.scrollLeft,\n      });\n    }\n\n    const record = cache.get(element)!;\n    Object.assign(element, record);\n\n    if (element.firstElementChild) {\n      Object.assign(element.firstElementChild, record);\n    }\n  }\n\n  public update(config?: RootScrollControllerConfig) {\n    if (config) {\n      this.config = { ...this.config, ...config };\n    }\n\n    if (config?.resetListeners) {\n      this.removeEventListeners();\n    }\n\n    this.configureListeners();\n  }\n\n  public hostConnected() {\n    this.configureListeners();\n  }\n\n  public hostDisconnected() {\n    this.removeEventListeners();\n  }\n}\n\nexport function addRootScrollHandler(\n  host: RootScrollControllerHost,\n  config?: RootScrollControllerConfig\n) {\n  return new RootScrollController(host, config);\n}\n"]}

package/components/common/decorators/watch.js

@@ -8,7 +8,7 @@ export function watch(propName, options) {
                 const oldValue = changedProps.get(propName);
                 const newValue = this[propName];
                 if (oldValue !== newValue) {
-                    if (!(options === null || options === void 0 ? void 0 : options.waitUntilFirstUpdate) || this.hasUpdated) {
+                    if (!options?.waitUntilFirstUpdate || this.hasUpdated) {
                         this[name].call(this, oldValue, newValue);
                     }
                 }

package/components/common/decorators/watch.js.map

@@ -1 +1 @@
-{"version":3,"file":"watch.js","sourceRoot":"","sources":["../../../../src/components/common/decorators/watch.ts"],"names":[],"mappings":"AAkBA,MAAM,UAAU,KAAK,CAAC,QAAgB,EAAE,OAAsB;IAC5D,OAAO,CAAC,iBAAsB,EAAE,IAAY,EAAO,EAAE;QACnD,MAAM,EAAE,UAAU,EAAE,GAAG,iBAAiB,CAAC;QAEzC,OAAO,GAAG,MAAM,CAAC,MAAM,CACrB,EAAE,oBAAoB,EAAE,KAAK,EAAE,EAC/B,OAAO,CACQ,CAAC;QAElB,iBAAiB,CAAC,UAAU,GAAG,UAAU,YAA8B;YACrE,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;YAEpC,IAAI,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;gBAC9B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;gBAC5C,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;gBAEhC,IAAI,QAAQ,KAAK,QAAQ,EAAE;oBACzB,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,CAAA,IAAI,IAAI,CAAC,UAAU,EAAE;wBACrD,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;qBAC3C;iBACF;aACF;QACH,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["// @watch decorator\n//\n// Runs when an observed property changes, e.g. @property or @state, but before the component updates.\n//\n// To wait for an update to complete after a change occurs, use `await this.updateComplete` in the handler. To start\n// watching after the initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.\n//\n// Usage:\n//\n//  @watch('propName')\n//  handlePropChange(oldValue, newValue) {\n//    ...\n//  }\n//\ninterface WatchOptions {\n  waitUntilFirstUpdate?: boolean;\n}\n\nexport function watch(propName: string, options?: WatchOptions) {\n  return (protoOrDescriptor: any, name: string): any => {\n    const { willUpdate } = protoOrDescriptor;\n\n    options = Object.assign(\n      { waitUntilFirstUpdate: false },\n      options\n    ) as WatchOptions;\n\n    protoOrDescriptor.willUpdate = function (changedProps: Map<string, any>) {\n      willUpdate.call(this, changedProps);\n\n      if (changedProps.has(propName)) {\n        const oldValue = changedProps.get(propName);\n        const newValue = this[propName];\n\n        if (oldValue !== newValue) {\n          if (!options?.waitUntilFirstUpdate || this.hasUpdated) {\n            this[name].call(this, oldValue, newValue);\n          }\n        }\n      }\n    };\n  };\n}\n"]}
+{"version":3,"file":"watch.js","sourceRoot":"","sources":["../../../../src/components/common/decorators/watch.ts"],"names":[],"mappings":"AAkBA,MAAM,UAAU,KAAK,CAAC,QAAgB,EAAE,OAAsB;IAC5D,OAAO,CAAC,iBAAsB,EAAE,IAAY,EAAO,EAAE;QACnD,MAAM,EAAE,UAAU,EAAE,GAAG,iBAAiB,CAAC;QAEzC,OAAO,GAAG,MAAM,CAAC,MAAM,CACrB,EAAE,oBAAoB,EAAE,KAAK,EAAE,EAC/B,OAAO,CACQ,CAAC;QAElB,iBAAiB,CAAC,UAAU,GAAG,UAAU,YAA8B;YACrE,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;YAEpC,IAAI,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;gBAC9B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;gBAC5C,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;gBAEhC,IAAI,QAAQ,KAAK,QAAQ,EAAE;oBACzB,IAAI,CAAC,OAAO,EAAE,oBAAoB,IAAI,IAAI,CAAC,UAAU,EAAE;wBACrD,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;qBAC3C;iBACF;aACF;QACH,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["// @watch decorator\n//\n// Runs when an observed property changes, e.g. @property or @state, but before the component updates.\n//\n// To wait for an update to complete after a change occurs, use `await this.updateComplete` in the handler. To start\n// watching after the initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.\n//\n// Usage:\n//\n//  @watch('propName')\n//  handlePropChange(oldValue, newValue) {\n//    ...\n//  }\n//\ninterface WatchOptions {\n  waitUntilFirstUpdate?: boolean;\n}\n\nexport function watch(propName: string, options?: WatchOptions) {\n  return (protoOrDescriptor: any, name: string): any => {\n    const { willUpdate } = protoOrDescriptor;\n\n    options = Object.assign(\n      { waitUntilFirstUpdate: false },\n      options\n    ) as WatchOptions;\n\n    protoOrDescriptor.willUpdate = function (changedProps: Map<string, any>) {\n      willUpdate.call(this, changedProps);\n\n      if (changedProps.has(propName)) {\n        const oldValue = changedProps.get(propName);\n        const newValue = this[propName];\n\n        if (oldValue !== newValue) {\n          if (!options?.waitUntilFirstUpdate || this.hasUpdated) {\n            this[name].call(this, oldValue, newValue);\n          }\n        }\n      }\n    };\n  };\n}\n"]}