@operato/popup 10.29.44 → 10.29.52

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [10.29.52](https://github.com/hatiolab/operato/compare/v10.29.51...v10.29.52) (2026-10-25)
+
+
+### :bug: Bug Fix
+
+* **popup:** a popup never covers the select or point it opens from ([129bffe](https://github.com/hatiolab/operato/commit/129bffe96a3812e3dad0bdb7daae6db307d0afe9))
+* **popup:** searchable list opens with the focus in its search box ([ba42c80](https://github.com/hatiolab/operato/commit/ba42c8005b44431c66244b202013c4641c9347a3))
+
+
+
+### [10.29.49](https://github.com/hatiolab/operato/compare/v10.29.48...v10.29.49) (2026-10-23)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
 ### [10.29.44](https://github.com/hatiolab/operato/compare/v10.29.43...v10.29.44) (2026-10-18)
 
 **Note:** Version bump only for package @operato/popup

package/dist/src/ox-popup-list.d.ts

@@ -90,7 +90,9 @@ export declare class OxPopupList extends OxPopup {
         width?: string;
         height?: string;
         silent?: boolean;
+        anchorTop?: number;
     }): void;
+    guaranteeFocus(target?: HTMLElement): void;
     /**
      * Overrides the 'close' method of the base class 'OxPopup' to dispatch a custom event
      * indicating that the popup list is being closed. This event can be used for further interactions

package/dist/src/ox-popup-list.js

@@ -16,7 +16,9 @@ function guaranteeFocus(element) {
     }
     // 2. Give focus opportunity to the closest parent, including itself.
     const closest = element.closest('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-    closest?.focus();
+    /* The popup itself places itself in view; scrolling the page to it, while it still stands at full height before
+       it is fitted, moved it and its select off the place it was fitted to. */
+    closest?.focus({ preventScroll: closest instanceof OxPopup });
 }
 /**
  * A custom element representing a list-like popup menu.
@@ -190,6 +192,8 @@ let OxPopupList = class OxPopupList extends OxPopup {
 
       div[body] {
         flex: 1;
+        /* Cut to the room it has, the list scrolls under the search box rather than past it. */
+        min-height: 0;
         display: flex;
         flex-direction: column;
         margin: 0;
@@ -252,6 +256,17 @@ let OxPopupList = class OxPopupList extends OxPopup {
         if (!keys.includes(e.key)) {
             e.stopPropagation();
         }
+        /* Enter picks from the search box: the first match once something is typed, the active option before that. */
+        if (e.key === 'Enter' && !e.isComposing) {
+            e.preventDefault();
+            const visible = Array.from(this.querySelectorAll(':scope > [option]:not([hidden])'));
+            const active = this.querySelector(':scope > [option][active]:not([hidden])');
+            const option = this.searchKeyword ? visible[0] : active || visible[0];
+            if (option) {
+                this.setActive(option, true);
+                this.select();
+            }
+        }
     }
     updated(changes) {
         if (changes.has('activeIndex')) {
@@ -405,6 +420,24 @@ let OxPopupList = class OxPopupList extends OxPopup {
         else {
             this.setActive(this.activeIndex);
         }
+        /* A searchable list opens ready to type, with the last search cleared. */
+        if (this.withSearch) {
+            this.searchKeyword = '';
+            this.updateComplete.then(() => {
+                if (!this.searchInput)
+                    return;
+                this.searchInput.value = '';
+                this.searchInput.focus();
+            });
+        }
+    }
+    /* The popup takes the focus when it opens and again a frame after it is attached; a searchable list gives it to the search box. */
+    guaranteeFocus(target) {
+        if (!target && this.withSearch && this.searchInput) {
+            this.searchInput.focus();
+            return;
+        }
+        super.guaranteeFocus(target);
     }
     /**
      * Overrides the 'close' method of the base class 'OxPopup' to dispatch a custom event

package/dist/src/ox-popup-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-popup-list.js","sourceRoot":"","sources":["../../src/ox-popup-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, CSSResult, html, PropertyValues } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport Sortable from 'sortablejs'\n\nimport { OxPopup } from './ox-popup.js'\nimport { convertToFixedPosition } from './position-converter.js'\n\nfunction guaranteeFocus(element: HTMLElement) {\n  // 1. Give focus opportunity to the first focusable element within the option element.\n  const focusible = element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])')\n\n  if (focusible) {\n    ;(focusible as HTMLElement).focus()\n    return\n  }\n\n  // 2. Give focus opportunity to the closest parent, including itself.\n  const closest = element.closest(\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  ) as HTMLElement\n\n  closest?.focus()\n}\n\n/**\n * A custom element representing a list-like popup menu.\n */\n@customElement('ox-popup-list')\nexport class OxPopupList extends OxPopup {\n  static styles = [\n    ...OxPopup.styles,\n    css`\n      :host {\n        display: none;\n        align-items: stretch;\n        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface-container-lowest));\n        color: var(--ox-popup-list-color, var(--md-sys-color-on-surface));\n        z-index: 1000;\n        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n        padding: var(--spacing-small) 0;\n        border-radius: var(--md-sys-shape-corner-small, 5px);\n\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      }\n\n      :host([active]) {\n        display: flex;\n        flex-direction: column;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n\n      :host([nowrap]) ::slotted([option]) {\n        white-space: nowrap;\n      }\n\n      ::slotted([option]) {\n        border-left: 3px solid transparent;\n      }\n\n      ::slotted(*) {\n        padding: var(--spacing-medium);\n        border-bottom: 1px solid var(--md-sys-color-surface-variant);\n        cursor: pointer;\n        outline: none;\n        color: var(--ox-popup-list-color, var(--md-sys-color-on-surface-variant));\n      }\n\n      ::slotted(*:focus) {\n        outline: none;\n      }\n\n      ::slotted([option][active]),\n      ::slotted([option]:hover) {\n        background-color: var(--ox-popup-list-background-color-variant, var(--md-sys-color-surface-variant));\n        color: var(--ox-popup-list-color-variant, var(--md-sys-color-on-surface-variant));\n      }\n\n      ::slotted([option][selected]) {\n        border-left: 3px solid var(--md-sys-color-primary);\n        font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n      }\n\n      ::slotted([separator]) {\n        height: 1px;\n        width: 100%;\n        padding: 0;\n        background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));\n      }\n\n      ::slotted([hidden]) {\n        display: none;\n      }\n\n      [search] {\n        display: flex;\n        position: relative;\n        align-items: center;\n        padding: var(--spacing-small) var(--spacing-medium);\n\n        --md-icon-size: var(--icon-size-small);\n      }\n\n      [search] [type='text'] {\n        flex: 1;\n        background-color: transparent;\n        border: 0;\n        padding: 0 0 0 var(--spacing-huge);\n        outline: none;\n        width: 50px;\n      }\n\n      [search] md-icon {\n        color: var(--md-sys-color-secondary);\n      }\n\n      [search] md-icon[search-icon] {\n        position: absolute;\n      }\n\n      [search] md-icon[delete-icon] {\n        opacity: 0.5;\n        --md-icon-size: var(--icon-size-tiny);\n      }\n\n      [nothing] {\n        opacity: 0.5;\n        text-align: center;\n      }\n\n      div[body] {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        margin: 0;\n        padding: 0;\n        overflow: auto;\n      }\n    `\n  ]\n\n  /**\n   * A boolean property that, when set to true, allows multiple options to be selected in the popup list.\n   * @type {boolean}\n   */\n  @property({ type: Boolean, attribute: true, reflect: true }) multiple: boolean = false\n\n  /**\n   * An optional attribute that specifies the name of the attribute used to mark selected options in the list.\n   * @type {string|undefined}\n   */\n  @property({ type: String, attribute: 'attr-selected', reflect: true }) attrSelected?: string\n\n  /**\n   * A boolean property that, when set to true, enables the search functionality in the popup list.\n   * Users can search/filter options by typing in a search bar.\n   * @type {boolean|undefined}\n   */\n  @property({ type: Boolean, attribute: 'with-search', reflect: true }) withSearch?: boolean\n\n  /**\n   * A boolean property that, when set to true, enables the drag-and-drop sorting functionality within the popup list.\n   * This allows users to reorder the options in the list by dragging them into new positions.\n   * @type {boolean|undefined}\n   */\n  @property({ type: Boolean, attribute: 'sortable', reflect: true }) sortable?: boolean = false\n\n  /**\n   * The value(s) of the selected option(s) in the popup list.\n   * This property can be a string or an array of strings, depending on whether multiple selections are allowed.\n   * @type {string|string[]|undefined}\n   */\n  @property({ type: String }) value?: string | string[]\n\n  @state() activeIndex?: number\n  @state() searchKeyword?: string\n  @state() nothingToSelect: boolean = false\n\n  @query('[search] input') searchInput!: HTMLInputElement\n  @query('div[body]') body!: HTMLDivElement\n\n  private sortableObject?: Sortable\n  private locked: boolean = false\n\n  render() {\n    return html`\n      <slot name=\"header\"> </slot>\n\n      ${this.withSearch\n        ? html`\n            <label search for=\"search\" @input=${(e: InputEvent) => this._oninputsearch(e)}>\n              <md-icon search-icon>search</md-icon>\n              <input\n                id=\"search\"\n                type=\"text\"\n                autocomplete=\"off\"\n                @keydown=${(e: KeyboardEvent) => this._onkeydownsearch(e)}\n                @change=${(e: InputEvent) => this._onchangesearch(e)}\n              />\n              <md-icon\n                @click=${() => {\n                  this.searchInput.value = ''\n                  this.searchKeyword = ''\n                }}\n                delete-icon\n                >delete</md-icon\n              >\n            </label>\n          `\n        : html``}\n\n      <div body>\n        <slot\n          @change=${(e: Event) => {\n            e.stopPropagation()\n          }}\n          @slotchange=${() => this.optionsChanged()}\n        >\n        </slot>\n      </div>\n\n      ${this.nothingToSelect ? html`<label nothing>nothing to select</label>` : html``}\n    `\n  }\n\n  protected _oninputsearch(e: InputEvent) {\n    e.stopPropagation()\n    e.preventDefault()\n\n    this.searchKeyword = (e.target as HTMLInputElement).value\n  }\n\n  protected _onchangesearch(e: InputEvent) {\n    e.stopPropagation()\n    this.searchKeyword = (e.target as HTMLInputElement).value\n  }\n\n  protected _onkeydownsearch(e: KeyboardEvent) {\n    const keys = ['Esc', 'Escape', 'Up', 'ArrowUp', 'Down', 'ArrowDown']\n    if (!keys.includes(e.key)) {\n      e.stopPropagation()\n    }\n  }\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupList, e: KeyboardEvent) {\n    e.stopPropagation()\n\n    switch (e.key) {\n      case 'Esc': // for IE/Edge\n      case 'Escape':\n        this.close()\n        break\n\n      case 'Left': // for IE/Edge\n      case 'ArrowLeft':\n      case 'Up': // for IE/Edge\n      case 'ArrowUp':\n        this.activeIndex!--\n        break\n\n      case 'Right': // for IE/Edge\n      case 'ArrowRight':\n      case 'Down': // for IE/Edge\n      case 'ArrowDown':\n        this.activeIndex!++\n        break\n\n      case 'Enter':\n      case ' ':\n      case 'Spacebar': // for old firefox\n        this.setActive(this.activeIndex!, true)\n        this.select()\n        break\n    }\n  }.bind(this)\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopupList, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      /* If the focus has clearly moved to an element outside of my range, the ox-popup-list should be closed. */\n      // @ts-ignore for debug\n      !this.preventCloseOnBlur && !this.debug && !window.POPUP_DEBUG && this.close()\n    }\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPopupList, e: MouseEvent) {\n    e.stopPropagation()\n\n    // Check if the click event target is a checkbox\n    if ((e.target as HTMLElement).closest('input[type=\"checkbox\"]')) {\n      return // Do not proceed if it's a checkbox click\n    }\n\n    const option = (e.target as HTMLElement)?.closest('[option]')\n    if (option) {\n      this.setActive(option, true)\n      this.select()\n    }\n  }.bind(this)\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('activeIndex')) {\n      this.activeIndex !== undefined && this.setActive(this.activeIndex)\n    }\n\n    if (changes.has('sortable')) {\n      this.sortableObject && this.sortableObject.destroy()\n\n      if (this.sortable) {\n        this.sortableObject = Sortable.create(this, {\n          handle: '[option]',\n          draggable: '[option]',\n          direction: 'vertical',\n          animation: 150,\n          touchStartThreshold: 10,\n          onEnd: e => {\n            this.locked = false\n            this.dispatchEvent(\n              new CustomEvent('sorted', {\n                detail: Array.from(this.querySelectorAll('[option]'))\n              })\n            )\n          },\n          onMove: e => {\n            // Check if the drag event target is a checkbox\n            if ((e.dragged as HTMLElement).querySelector('input[type=\"checkbox\"]')) {\n              return false // Prevent sorting if it's a checkbox drag\n            }\n            this.locked = true\n          }\n        })\n      }\n    }\n\n    if (changes.has('searchKeyword')) {\n      const attrSelected = this.attrSelected || 'selected'\n      this.querySelectorAll(`[option]`).forEach(item => {\n        if (!this.searchKeyword || item.textContent?.match(new RegExp(this.searchKeyword, 'i'))) {\n          item.removeAttribute('hidden')\n        } else {\n          item.removeAttribute('selected')\n          item.setAttribute('hidden', '')\n        }\n      })\n      this.nothingToSelect = this.querySelectorAll(`[option]:not([hidden])`).length === 0\n    }\n\n    if (changes.has('value')) this.markSelected()\n  }\n\n  /** Marks the options holding the value. */\n  private markSelected() {\n    const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n    var values = this.value\n    if (!(values instanceof Array)) {\n      values = [values as string]\n    }\n\n    options.forEach(option => {\n      if (values?.includes((option as HTMLElement).getAttribute('value') || '')) {\n        option.setAttribute(this.attrSelected || 'selected', '')\n      } else {\n        option.removeAttribute(this.attrSelected || 'selected')\n      }\n    })\n  }\n\n  /**\n   * Options can arrive after the value - choices read from the server. They are marked when they arrive, and the\n   * owner is told so it can show the chosen label instead of the raw value.\n   */\n  private optionsChanged() {\n    this.markSelected()\n    this.dispatchEvent(new CustomEvent('options-change', { bubbles: true }))\n  }\n\n  /**\n   * Retrieves the labels of the selected options in the popup list.\n   * If multiple selections are allowed, an array of labels is returned. Otherwise, a single label is returned.\n   * @returns {string|string[]} The label(s) of the selected option(s).\n   */\n  public getSelectedLabels(): string | string[] {\n    const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n    const selected = options\n      .filter(option => option.hasAttribute('value') && option.hasAttribute(this.attrSelected || 'selected'))\n      .map(option => option.textContent || '')\n\n    return this.multiple ? selected : selected[0]\n  }\n\n  /**\n   * Handles the selection of options in the popup list and dispatches a 'select' event with the selected value(s).\n   * If multiple selections are allowed, an array of selected values is dispatched; otherwise, a single value is dispatched.\n   * Also, it checks whether the selected option should remain alive and whether the popup should be closed.\n   */\n  async select() {\n    await this.updateComplete\n\n    const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n    const selected = options\n      .filter(option => option.hasAttribute('value') && option.hasAttribute(this.attrSelected || 'selected'))\n      .map(option => option.getAttribute('value'))\n\n    this.dispatchEvent(\n      new CustomEvent('select', {\n        bubbles: true,\n        composed: true,\n        detail: this.multiple ? selected : selected[0]\n      })\n    )\n\n    const option = options[this.activeIndex!]\n    if (!option.hasAttribute('alive-on-select') && !this.hasAttribute('multiple')) {\n      this.close()\n    }\n  }\n\n  /**\n   * Sets the active option within the popup list based on the given index or Element.\n   * If 'withSelect' is true, it also manages the selection state of the option.\n   *\n   * @param {number | Element | null} active - The index or Element of the option to set as active.\n   * @param {boolean | undefined} withSelect - Indicates whether to manage the selection state of the option.\n   */\n  setActive(active: number | Element | null, withSelect?: boolean) {\n    var options = Array.from(this.querySelectorAll('[option]:not([hidden])'))\n    if (this.withSearch) {\n      options.push(this.renderRoot.querySelector('[search]')!)\n    }\n\n    if (active instanceof Element) {\n      const index = options.findIndex(option => option === active)\n      this.setActive(index === -1 ? 0 : index, withSelect)\n      return\n    }\n\n    const attrSelected = this.attrSelected || 'selected'\n\n    options.forEach(async (option, index) => {\n      if (typeof active === 'number' && index === (active + options.length) % options.length) {\n        option.setAttribute('active', '')\n\n        if (withSelect && !this.attrSelected) {\n          /* being set attribute attrs-selected means, that element should know how to do when event happened. */\n          this.multiple ? option.toggleAttribute('selected') : option.setAttribute('selected', '')\n        }\n\n        guaranteeFocus(option as HTMLElement)\n\n        this.activeIndex = index\n      } else {\n        option.removeAttribute('active')\n        /* even thought attribute attrs-selected set, ox-popup-list have to unset others. */\n        !this.multiple && withSelect && option.removeAttribute(attrSelected)\n      }\n    })\n  }\n\n  /**\n   * Overrides the 'open' method of the base class 'OxPopup' to set the initial active index\n   * when the popup list is opened. It ensures that an option is initially selected for user interaction.\n   *\n   * @param {object} params - The parameters for opening the popup, including position and size.\n   */\n  override open(params: {\n    left?: number\n    top?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    silent?: boolean\n    // fixed?: boolean\n  }) {\n    super.open(params)\n\n    if (this.activeIndex === undefined) {\n      const activeElement = this.querySelector(`[${this.attrSelected || 'selected'}]`)\n      this.setActive(activeElement || 0)\n    } else {\n      this.setActive(this.activeIndex)\n    }\n  }\n\n  /**\n   * Overrides the 'close' method of the base class 'OxPopup' to dispatch a custom event\n   * indicating that the popup list is being closed. This event can be used for further interactions\n   * or logic in the application.\n   */\n  override close() {\n    if (this.locked) {\n      return\n    }\n\n    if (this.hasAttribute('active')) {\n      this.dispatchEvent(\n        new CustomEvent('close', {\n          bubbles: true,\n          composed: true\n        })\n      )\n    }\n\n    super.close()\n  }\n\n  /**\n   * Open OxPopup\n   *\n   * @param {PopupOpenOptions}\n   */\n  static open({\n    template,\n    top,\n    left,\n    right,\n    bottom,\n    parent,\n    multiple,\n    sortable,\n    attrSelected,\n    styles,\n    debug\n  }: {\n    template: unknown\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    parent?: Element | null\n    multiple?: boolean\n    sortable?: boolean\n    debug?: boolean\n    attrSelected?: string\n    styles?: CSSResult\n  }): OxPopupList {\n    const target = document.createElement('ox-popup-list') as OxPopupList\n\n    if (styles) {\n      const style = document.createElement('style')\n      style.textContent = styles.cssText\n\n      const shadow = target.attachShadow({ mode: 'open' })\n      shadow.appendChild(style)\n    }\n\n    if (!!debug) {\n      target.setAttribute('debug', '')\n    }\n\n    if (!!multiple) {\n      target.setAttribute('multiple', '')\n    }\n\n    if (!!sortable) {\n      target.setAttribute('sortable', '')\n    }\n\n    if (attrSelected) {\n      target.setAttribute('attr-selected', attrSelected)\n    }\n\n    render(template, target)\n\n    if (parent) {\n      var { left, top, right, bottom } = convertToFixedPosition({\n        left,\n        top,\n        right,\n        bottom,\n        relativeElement: parent as HTMLElement\n      })\n    }\n\n    document.body.appendChild(target)\n    target.removeAfterUse = true\n    target.open({ top, left, right, bottom })\n\n    return target\n  }\n}\n"]}
+{"version":3,"file":"ox-popup-list.js","sourceRoot":"","sources":["../../src/ox-popup-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, CSSResult, html, PropertyValues } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport Sortable from 'sortablejs'\n\nimport { OxPopup } from './ox-popup.js'\nimport { convertToFixedPosition } from './position-converter.js'\n\nfunction guaranteeFocus(element: HTMLElement) {\n  // 1. Give focus opportunity to the first focusable element within the option element.\n  const focusible = element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])')\n\n  if (focusible) {\n    ;(focusible as HTMLElement).focus()\n    return\n  }\n\n  // 2. Give focus opportunity to the closest parent, including itself.\n  const closest = element.closest(\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  ) as HTMLElement\n\n  /* The popup itself places itself in view; scrolling the page to it, while it still stands at full height before\n     it is fitted, moved it and its select off the place it was fitted to. */\n  closest?.focus({ preventScroll: closest instanceof OxPopup })\n}\n\n/**\n * A custom element representing a list-like popup menu.\n */\n@customElement('ox-popup-list')\nexport class OxPopupList extends OxPopup {\n  static styles = [\n    ...OxPopup.styles,\n    css`\n      :host {\n        display: none;\n        align-items: stretch;\n        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface-container-lowest));\n        color: var(--ox-popup-list-color, var(--md-sys-color-on-surface));\n        z-index: 1000;\n        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n        padding: var(--spacing-small) 0;\n        border-radius: var(--md-sys-shape-corner-small, 5px);\n\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      }\n\n      :host([active]) {\n        display: flex;\n        flex-direction: column;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n\n      :host([nowrap]) ::slotted([option]) {\n        white-space: nowrap;\n      }\n\n      ::slotted([option]) {\n        border-left: 3px solid transparent;\n      }\n\n      ::slotted(*) {\n        padding: var(--spacing-medium);\n        border-bottom: 1px solid var(--md-sys-color-surface-variant);\n        cursor: pointer;\n        outline: none;\n        color: var(--ox-popup-list-color, var(--md-sys-color-on-surface-variant));\n      }\n\n      ::slotted(*:focus) {\n        outline: none;\n      }\n\n      ::slotted([option][active]),\n      ::slotted([option]:hover) {\n        background-color: var(--ox-popup-list-background-color-variant, var(--md-sys-color-surface-variant));\n        color: var(--ox-popup-list-color-variant, var(--md-sys-color-on-surface-variant));\n      }\n\n      ::slotted([option][selected]) {\n        border-left: 3px solid var(--md-sys-color-primary);\n        font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n      }\n\n      ::slotted([separator]) {\n        height: 1px;\n        width: 100%;\n        padding: 0;\n        background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));\n      }\n\n      ::slotted([hidden]) {\n        display: none;\n      }\n\n      [search] {\n        display: flex;\n        position: relative;\n        align-items: center;\n        padding: var(--spacing-small) var(--spacing-medium);\n\n        --md-icon-size: var(--icon-size-small);\n      }\n\n      [search] [type='text'] {\n        flex: 1;\n        background-color: transparent;\n        border: 0;\n        padding: 0 0 0 var(--spacing-huge);\n        outline: none;\n        width: 50px;\n      }\n\n      [search] md-icon {\n        color: var(--md-sys-color-secondary);\n      }\n\n      [search] md-icon[search-icon] {\n        position: absolute;\n      }\n\n      [search] md-icon[delete-icon] {\n        opacity: 0.5;\n        --md-icon-size: var(--icon-size-tiny);\n      }\n\n      [nothing] {\n        opacity: 0.5;\n        text-align: center;\n      }\n\n      div[body] {\n        flex: 1;\n        /* Cut to the room it has, the list scrolls under the search box rather than past it. */\n        min-height: 0;\n        display: flex;\n        flex-direction: column;\n        margin: 0;\n        padding: 0;\n        overflow: auto;\n      }\n    `\n  ]\n\n  /**\n   * A boolean property that, when set to true, allows multiple options to be selected in the popup list.\n   * @type {boolean}\n   */\n  @property({ type: Boolean, attribute: true, reflect: true }) multiple: boolean = false\n\n  /**\n   * An optional attribute that specifies the name of the attribute used to mark selected options in the list.\n   * @type {string|undefined}\n   */\n  @property({ type: String, attribute: 'attr-selected', reflect: true }) attrSelected?: string\n\n  /**\n   * A boolean property that, when set to true, enables the search functionality in the popup list.\n   * Users can search/filter options by typing in a search bar.\n   * @type {boolean|undefined}\n   */\n  @property({ type: Boolean, attribute: 'with-search', reflect: true }) withSearch?: boolean\n\n  /**\n   * A boolean property that, when set to true, enables the drag-and-drop sorting functionality within the popup list.\n   * This allows users to reorder the options in the list by dragging them into new positions.\n   * @type {boolean|undefined}\n   */\n  @property({ type: Boolean, attribute: 'sortable', reflect: true }) sortable?: boolean = false\n\n  /**\n   * The value(s) of the selected option(s) in the popup list.\n   * This property can be a string or an array of strings, depending on whether multiple selections are allowed.\n   * @type {string|string[]|undefined}\n   */\n  @property({ type: String }) value?: string | string[]\n\n  @state() activeIndex?: number\n  @state() searchKeyword?: string\n  @state() nothingToSelect: boolean = false\n\n  @query('[search] input') searchInput!: HTMLInputElement\n  @query('div[body]') body!: HTMLDivElement\n\n  private sortableObject?: Sortable\n  private locked: boolean = false\n\n  render() {\n    return html`\n      <slot name=\"header\"> </slot>\n\n      ${this.withSearch\n        ? html`\n            <label search for=\"search\" @input=${(e: InputEvent) => this._oninputsearch(e)}>\n              <md-icon search-icon>search</md-icon>\n              <input\n                id=\"search\"\n                type=\"text\"\n                autocomplete=\"off\"\n                @keydown=${(e: KeyboardEvent) => this._onkeydownsearch(e)}\n                @change=${(e: InputEvent) => this._onchangesearch(e)}\n              />\n              <md-icon\n                @click=${() => {\n                  this.searchInput.value = ''\n                  this.searchKeyword = ''\n                }}\n                delete-icon\n                >delete</md-icon\n              >\n            </label>\n          `\n        : html``}\n\n      <div body>\n        <slot\n          @change=${(e: Event) => {\n            e.stopPropagation()\n          }}\n          @slotchange=${() => this.optionsChanged()}\n        >\n        </slot>\n      </div>\n\n      ${this.nothingToSelect ? html`<label nothing>nothing to select</label>` : html``}\n    `\n  }\n\n  protected _oninputsearch(e: InputEvent) {\n    e.stopPropagation()\n    e.preventDefault()\n\n    this.searchKeyword = (e.target as HTMLInputElement).value\n  }\n\n  protected _onchangesearch(e: InputEvent) {\n    e.stopPropagation()\n    this.searchKeyword = (e.target as HTMLInputElement).value\n  }\n\n  protected _onkeydownsearch(e: KeyboardEvent) {\n    const keys = ['Esc', 'Escape', 'Up', 'ArrowUp', 'Down', 'ArrowDown']\n    if (!keys.includes(e.key)) {\n      e.stopPropagation()\n    }\n\n    /* Enter picks from the search box: the first match once something is typed, the active option before that. */\n    if (e.key === 'Enter' && !e.isComposing) {\n      e.preventDefault()\n      const visible = Array.from(this.querySelectorAll(':scope > [option]:not([hidden])'))\n      const active = this.querySelector(':scope > [option][active]:not([hidden])')\n      const option = this.searchKeyword ? visible[0] : active || visible[0]\n      if (option) {\n        this.setActive(option, true)\n        this.select()\n      }\n    }\n  }\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupList, e: KeyboardEvent) {\n    e.stopPropagation()\n\n    switch (e.key) {\n      case 'Esc': // for IE/Edge\n      case 'Escape':\n        this.close()\n        break\n\n      case 'Left': // for IE/Edge\n      case 'ArrowLeft':\n      case 'Up': // for IE/Edge\n      case 'ArrowUp':\n        this.activeIndex!--\n        break\n\n      case 'Right': // for IE/Edge\n      case 'ArrowRight':\n      case 'Down': // for IE/Edge\n      case 'ArrowDown':\n        this.activeIndex!++\n        break\n\n      case 'Enter':\n      case ' ':\n      case 'Spacebar': // for old firefox\n        this.setActive(this.activeIndex!, true)\n        this.select()\n        break\n    }\n  }.bind(this)\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopupList, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      /* If the focus has clearly moved to an element outside of my range, the ox-popup-list should be closed. */\n      // @ts-ignore for debug\n      !this.preventCloseOnBlur && !this.debug && !window.POPUP_DEBUG && this.close()\n    }\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPopupList, e: MouseEvent) {\n    e.stopPropagation()\n\n    // Check if the click event target is a checkbox\n    if ((e.target as HTMLElement).closest('input[type=\"checkbox\"]')) {\n      return // Do not proceed if it's a checkbox click\n    }\n\n    const option = (e.target as HTMLElement)?.closest('[option]')\n    if (option) {\n      this.setActive(option, true)\n      this.select()\n    }\n  }.bind(this)\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('activeIndex')) {\n      this.activeIndex !== undefined && this.setActive(this.activeIndex)\n    }\n\n    if (changes.has('sortable')) {\n      this.sortableObject && this.sortableObject.destroy()\n\n      if (this.sortable) {\n        this.sortableObject = Sortable.create(this, {\n          handle: '[option]',\n          draggable: '[option]',\n          direction: 'vertical',\n          animation: 150,\n          touchStartThreshold: 10,\n          onEnd: e => {\n            this.locked = false\n            this.dispatchEvent(\n              new CustomEvent('sorted', {\n                detail: Array.from(this.querySelectorAll('[option]'))\n              })\n            )\n          },\n          onMove: e => {\n            // Check if the drag event target is a checkbox\n            if ((e.dragged as HTMLElement).querySelector('input[type=\"checkbox\"]')) {\n              return false // Prevent sorting if it's a checkbox drag\n            }\n            this.locked = true\n          }\n        })\n      }\n    }\n\n    if (changes.has('searchKeyword')) {\n      const attrSelected = this.attrSelected || 'selected'\n      this.querySelectorAll(`[option]`).forEach(item => {\n        if (!this.searchKeyword || item.textContent?.match(new RegExp(this.searchKeyword, 'i'))) {\n          item.removeAttribute('hidden')\n        } else {\n          item.removeAttribute('selected')\n          item.setAttribute('hidden', '')\n        }\n      })\n      this.nothingToSelect = this.querySelectorAll(`[option]:not([hidden])`).length === 0\n    }\n\n    if (changes.has('value')) this.markSelected()\n  }\n\n  /** Marks the options holding the value. */\n  private markSelected() {\n    const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n    var values = this.value\n    if (!(values instanceof Array)) {\n      values = [values as string]\n    }\n\n    options.forEach(option => {\n      if (values?.includes((option as HTMLElement).getAttribute('value') || '')) {\n        option.setAttribute(this.attrSelected || 'selected', '')\n      } else {\n        option.removeAttribute(this.attrSelected || 'selected')\n      }\n    })\n  }\n\n  /**\n   * Options can arrive after the value - choices read from the server. They are marked when they arrive, and the\n   * owner is told so it can show the chosen label instead of the raw value.\n   */\n  private optionsChanged() {\n    this.markSelected()\n    this.dispatchEvent(new CustomEvent('options-change', { bubbles: true }))\n  }\n\n  /**\n   * Retrieves the labels of the selected options in the popup list.\n   * If multiple selections are allowed, an array of labels is returned. Otherwise, a single label is returned.\n   * @returns {string|string[]} The label(s) of the selected option(s).\n   */\n  public getSelectedLabels(): string | string[] {\n    const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n    const selected = options\n      .filter(option => option.hasAttribute('value') && option.hasAttribute(this.attrSelected || 'selected'))\n      .map(option => option.textContent || '')\n\n    return this.multiple ? selected : selected[0]\n  }\n\n  /**\n   * Handles the selection of options in the popup list and dispatches a 'select' event with the selected value(s).\n   * If multiple selections are allowed, an array of selected values is dispatched; otherwise, a single value is dispatched.\n   * Also, it checks whether the selected option should remain alive and whether the popup should be closed.\n   */\n  async select() {\n    await this.updateComplete\n\n    const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n    const selected = options\n      .filter(option => option.hasAttribute('value') && option.hasAttribute(this.attrSelected || 'selected'))\n      .map(option => option.getAttribute('value'))\n\n    this.dispatchEvent(\n      new CustomEvent('select', {\n        bubbles: true,\n        composed: true,\n        detail: this.multiple ? selected : selected[0]\n      })\n    )\n\n    const option = options[this.activeIndex!]\n    if (!option.hasAttribute('alive-on-select') && !this.hasAttribute('multiple')) {\n      this.close()\n    }\n  }\n\n  /**\n   * Sets the active option within the popup list based on the given index or Element.\n   * If 'withSelect' is true, it also manages the selection state of the option.\n   *\n   * @param {number | Element | null} active - The index or Element of the option to set as active.\n   * @param {boolean | undefined} withSelect - Indicates whether to manage the selection state of the option.\n   */\n  setActive(active: number | Element | null, withSelect?: boolean) {\n    var options = Array.from(this.querySelectorAll('[option]:not([hidden])'))\n    if (this.withSearch) {\n      options.push(this.renderRoot.querySelector('[search]')!)\n    }\n\n    if (active instanceof Element) {\n      const index = options.findIndex(option => option === active)\n      this.setActive(index === -1 ? 0 : index, withSelect)\n      return\n    }\n\n    const attrSelected = this.attrSelected || 'selected'\n\n    options.forEach(async (option, index) => {\n      if (typeof active === 'number' && index === (active + options.length) % options.length) {\n        option.setAttribute('active', '')\n\n        if (withSelect && !this.attrSelected) {\n          /* being set attribute attrs-selected means, that element should know how to do when event happened. */\n          this.multiple ? option.toggleAttribute('selected') : option.setAttribute('selected', '')\n        }\n\n        guaranteeFocus(option as HTMLElement)\n\n        this.activeIndex = index\n      } else {\n        option.removeAttribute('active')\n        /* even thought attribute attrs-selected set, ox-popup-list have to unset others. */\n        !this.multiple && withSelect && option.removeAttribute(attrSelected)\n      }\n    })\n  }\n\n  /**\n   * Overrides the 'open' method of the base class 'OxPopup' to set the initial active index\n   * when the popup list is opened. It ensures that an option is initially selected for user interaction.\n   *\n   * @param {object} params - The parameters for opening the popup, including position and size.\n   */\n  override open(params: {\n    left?: number\n    top?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    silent?: boolean\n    // fixed?: boolean\n    anchorTop?: number\n  }) {\n    super.open(params)\n\n    if (this.activeIndex === undefined) {\n      const activeElement = this.querySelector(`[${this.attrSelected || 'selected'}]`)\n      this.setActive(activeElement || 0)\n    } else {\n      this.setActive(this.activeIndex)\n    }\n\n    /* A searchable list opens ready to type, with the last search cleared. */\n    if (this.withSearch) {\n      this.searchKeyword = ''\n      this.updateComplete.then(() => {\n        if (!this.searchInput) return\n        this.searchInput.value = ''\n        this.searchInput.focus()\n      })\n    }\n  }\n\n  /* The popup takes the focus when it opens and again a frame after it is attached; a searchable list gives it to the search box. */\n  override guaranteeFocus(target?: HTMLElement) {\n    if (!target && this.withSearch && this.searchInput) {\n      this.searchInput.focus()\n      return\n    }\n    super.guaranteeFocus(target)\n  }\n\n  /**\n   * Overrides the 'close' method of the base class 'OxPopup' to dispatch a custom event\n   * indicating that the popup list is being closed. This event can be used for further interactions\n   * or logic in the application.\n   */\n  override close() {\n    if (this.locked) {\n      return\n    }\n\n    if (this.hasAttribute('active')) {\n      this.dispatchEvent(\n        new CustomEvent('close', {\n          bubbles: true,\n          composed: true\n        })\n      )\n    }\n\n    super.close()\n  }\n\n  /**\n   * Open OxPopup\n   *\n   * @param {PopupOpenOptions}\n   */\n  static open({\n    template,\n    top,\n    left,\n    right,\n    bottom,\n    parent,\n    multiple,\n    sortable,\n    attrSelected,\n    styles,\n    debug\n  }: {\n    template: unknown\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    parent?: Element | null\n    multiple?: boolean\n    sortable?: boolean\n    debug?: boolean\n    attrSelected?: string\n    styles?: CSSResult\n  }): OxPopupList {\n    const target = document.createElement('ox-popup-list') as OxPopupList\n\n    if (styles) {\n      const style = document.createElement('style')\n      style.textContent = styles.cssText\n\n      const shadow = target.attachShadow({ mode: 'open' })\n      shadow.appendChild(style)\n    }\n\n    if (!!debug) {\n      target.setAttribute('debug', '')\n    }\n\n    if (!!multiple) {\n      target.setAttribute('multiple', '')\n    }\n\n    if (!!sortable) {\n      target.setAttribute('sortable', '')\n    }\n\n    if (attrSelected) {\n      target.setAttribute('attr-selected', attrSelected)\n    }\n\n    render(template, target)\n\n    if (parent) {\n      var { left, top, right, bottom } = convertToFixedPosition({\n        left,\n        top,\n        right,\n        bottom,\n        relativeElement: parent as HTMLElement\n      })\n    }\n\n    document.body.appendChild(target)\n    target.removeAfterUse = true\n    target.open({ top, left, right, bottom })\n\n    return target\n  }\n}\n"]}

package/dist/src/ox-popup.d.ts

@@ -72,8 +72,10 @@ export declare class OxPopup extends LitElement {
      * @param {string} options.height - The maximum height of the popup (CSS string). For example, '200px'.
      * @param {boolean} [options.silent=false] - A flag indicating whether the popup should auto-focus or not. If set to true, the popup won't attempt to focus on any element.
      * @param {boolean} [options.fixed=false] - A flag indicating whether the popup should be positioned fixed relative to the viewport. If set to true, the popup will be fixed.
+     * @param {number} [options.anchorTop] - Where the element the popup opens under begins, in the same terms as `top` (which is where it ends).
+     *   A popup with too little room below opens above that line instead. Without it, `top` is a point.
      */
-    open({ left, top, right, bottom, width, height, silent, fixed }: {
+    open({ left, top, right, bottom, width, height, silent, fixed, anchorTop }: {
         left?: number;
         top?: number;
         right?: number;
@@ -82,7 +84,15 @@ export declare class OxPopup extends LitElement {
         height?: string;
         silent?: boolean;
         fixed?: boolean;
+        anchorTop?: number;
     }): void;
+    /**
+     * A popup opened downward from a line - the bottom of its select, or a point - never covers that line or what is
+     * above it down to `anchorTop`: covered, the select's next press lands on the popup (a double-click in a grid cell
+     * picked an option). With too little room below it opens above, if there is more room there; either way it is cut
+     * to the room it has and scrolls inside.
+     */
+    private keepOffTheLine;
     guaranteeFocus(target?: HTMLElement): void;
     /**
      * Closes the 'ox-popup'.

package/dist/src/ox-popup.js

@@ -173,8 +173,10 @@ let OxPopup = class OxPopup extends LitElement {
      * @param {string} options.height - The maximum height of the popup (CSS string). For example, '200px'.
      * @param {boolean} [options.silent=false] - A flag indicating whether the popup should auto-focus or not. If set to true, the popup won't attempt to focus on any element.
      * @param {boolean} [options.fixed=false] - A flag indicating whether the popup should be positioned fixed relative to the viewport. If set to true, the popup will be fixed.
+     * @param {number} [options.anchorTop] - Where the element the popup opens under begins, in the same terms as `top` (which is where it ends).
+     *   A popup with too little room below opens above that line instead. Without it, `top` is a point.
      */
-    open({ left, top, right, bottom, width, height, silent = false, fixed = false }) {
+    open({ left, top, right, bottom, width, height, silent = false, fixed = false, anchorTop }) {
         if (this.backdrop) {
             this.createBackdrop();
         }
@@ -182,6 +184,13 @@ let OxPopup = class OxPopup extends LitElement {
             this.style.maxWidth = width;
             this.style.overflowX = 'auto';
         }
+        /* A popup opened again starts from where it is asked to open, not from where it was last moved or cut. */
+        this.style.height = '';
+        this.style.maxHeight = '';
+        if (top !== undefined && bottom === undefined)
+            this.style.bottom = '';
+        if (bottom !== undefined && top === undefined)
+            this.style.top = '';
         if (height) {
             this.style.maxHeight = height;
             this.style.overflowY = 'auto';
@@ -240,7 +249,7 @@ let OxPopup = class OxPopup extends LitElement {
             var t = bounding.top;
             var l = bounding.left;
             // If the popup is too large, it will cause overflow scrolling.
-            if (vh < h) {
+            if (vh < h && (top === undefined || bottom !== undefined)) {
                 this.style.height = `${Math.min(Math.max(Math.floor((vh * 2) / 3), vh - (t + 20)), vh)}px`;
                 this.style.overflow = 'auto';
                 h = vh;
@@ -252,7 +261,10 @@ let OxPopup = class OxPopup extends LitElement {
             }
             // To prevent pop-ups from crossing screen boundaries, use the
             const computedStyle = getComputedStyle(this);
-            if (t < 0) {
+            if (top !== undefined && bottom === undefined) {
+                this.keepOffTheLine(bounding, top, anchorTop, computedStyle.top);
+            }
+            else if (t < 0) {
                 this.style.top = '10px';
                 this.style.bottom = '';
             }
@@ -274,6 +286,35 @@ let OxPopup = class OxPopup extends LitElement {
         /* When the window is out of focus, all pop-ups should disappear. */
         window.addEventListener('blur', this._onwindowblur);
     }
+    /**
+     * A popup opened downward from a line - the bottom of its select, or a point - never covers that line or what is
+     * above it down to `anchorTop`: covered, the select's next press lands on the popup (a double-click in a grid cell
+     * picked an option). With too little room below it opens above, if there is more room there; either way it is cut
+     * to the room it has and scrolls inside.
+     */
+    keepOffTheLine(bounding, top, anchorTop, styledTop) {
+        const margin = 10;
+        const height = bounding.height;
+        const line = bounding.top;
+        const lineAbove = anchorTop === undefined ? line : line - (top - anchorTop);
+        const below = window.innerHeight - line - margin;
+        const above = lineAbove - margin;
+        if (height <= below) {
+            return;
+        }
+        if (above > below) {
+            const fitted = Math.min(height, above);
+            if (fitted < height) {
+                this.style.maxHeight = `${fitted}px`;
+                this.style.overflowY = 'auto';
+            }
+            this.style.top = `calc(${styledTop} - ${line - (lineAbove - fitted)}px)`;
+        }
+        else {
+            this.style.maxHeight = `${Math.max(below, 0)}px`;
+            this.style.overflowY = 'auto';
+        }
+    }
     guaranteeFocus(target) {
         const focusible = (target || this).querySelector(':host > button, :host > [href], :host > input, :host > select, :host > textarea, :host > [tabindex]:not([tabindex="-1"])');
         if (focusible) {

package/dist/src/ox-popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-popup.js","sourceRoot":"","sources":["../../src/ox-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { convertToFixedPosition } from './position-converter.js'\n\ndeclare global {\n  interface Window {\n    POPUP_DEBUG?: boolean\n  }\n}\n\n/**\n * Custom element class representing the 'ox-popup' component.\n *\n * This component provides the functionality to display a popup with various configuration options.\n * It can be used to show additional information, notifications, or user interactions within a web application.\n *\n * @fires ox-close - Dispatched when the popup is closed.\n * @fires ox-collapse - Dispatched when the popup is collapsed.\n */\n@customElement('ox-popup')\nexport class OxPopup extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: absolute;\n        display: none;\n        z-index: 1000; /* Increased z-index to ensure it's on top */\n        padding: 0;\n        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n        box-sizing: border-box;\n        min-width: fit-content;\n        line-height: initial;\n        text-align: initial;\n        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));\n        color: var(--ox-popup-list-color, var(--md-sys-color-on-surface));\n        margin: 0;\n      }\n\n      :host([active]) {\n        display: flex;\n        flex-direction: column;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n\n      #backdrop {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100vw;\n        height: 100vh;\n        background-color: black;\n        opacity: 0.5;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur: boolean = false\n  @property({ type: Boolean, attribute: 'backdrop' }) backdrop: boolean = false\n\n  private lastActive: HTMLElement = document.activeElement as HTMLElement\n  protected removeAfterUse: boolean = false\n\n  render() {\n    return html` <slot></slot> `\n  }\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopup, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close()\n    }\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopup, e: KeyboardEvent) {\n    e.stopPropagation()\n\n    switch (e.key) {\n      case 'Esc': // for IE/Edge\n      case 'Escape':\n        this.close()\n        break\n    }\n  }.bind(this)\n\n  protected _onkeyup: (e: KeyboardEvent) => void = function (this: OxPopup, e: KeyboardEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmouseup: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmousedown: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _oncontextmenu: (e: Event) => void = function (this: OxPopup, e: Event) {\n    e.stopPropagation()\n    // this.close()\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclose: (e: Event) => void = function (this: OxPopup, e: Event) {\n    this.close()\n  }.bind(this)\n\n  protected _oncollapse: (e: Event) => void = function (this: OxPopup, e: Event) {\n    e.stopPropagation()\n    this.close()\n  }.bind(this)\n\n  protected _onwindowblur: (e: Event) => void = function (this: OxPopup, e: Event) {\n    !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close()\n  }.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.addEventListener('focusout', this._onfocusout)\n    this.addEventListener('keydown', this._onkeydown)\n    this.addEventListener('keyup', this._onkeyup)\n    this.addEventListener('click', this._onclick)\n    this.addEventListener('mouseup', this._onmouseup)\n    this.addEventListener('mousedown', this._onmousedown)\n    this.addEventListener('contextmenu', this._oncontextmenu)\n    this.addEventListener('ox-close', this._onclose)\n    this.addEventListener('ox-collapse', this._oncollapse)\n\n    this.setAttribute('tabindex', '0') // make this element focusable\n    requestAnimationFrame(() => {\n      this.guaranteeFocus()\n    })\n  }\n\n  /**\n   * Configuration for opening ox-popup\n   *\n   * @typedef {Object} PopupOpenOptions\n   * @property {HTMLTemplate} template HTMLTemplate to be displayed inside the popup\n   * @property {Number} top The position-top where the pop-up will be displayed\n   * @property {Number} left The position-left where the pop-up will be displayed\n   * @property {Number} right The position-right where the pop-up will be displayed\n   * @property {Number} bottom The position-bottom where the pop-up will be displayed\n   * @property {string} width The maximum width of the popup (CSS string)\n   * @property {string} height The maximum height of the popup (CSS string)\n   * @property {HTMLElement} parent Popup's parent element\n   * @property {string} style Additional CSS styles for the popup\n   * @property {boolean} preventCloseOnBlur Flag to prevent closing the popup on blur\n   * @property {boolean} backdrop If true, a semi-transparent background will be applied behind the popup, dimming the rest of the page.\n   */\n  static open({\n    template,\n    top,\n    left,\n    right,\n    bottom,\n    width,\n    height,\n    parent,\n    style,\n    preventCloseOnBlur,\n    backdrop\n  }: {\n    template: unknown\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    parent?: Element | null\n    style?: string\n    preventCloseOnBlur?: boolean\n    backdrop?: boolean\n  }): OxPopup {\n    const target = document.createElement('ox-popup') as OxPopup\n    if (preventCloseOnBlur) {\n      target.preventCloseOnBlur = preventCloseOnBlur\n    }\n\n    if (backdrop) {\n      target.backdrop = backdrop\n    }\n\n    if (style) {\n      target.style.cssText = style\n    }\n\n    render(template, target)\n\n    if (parent) {\n      var { left, top, right, bottom } = convertToFixedPosition({\n        left,\n        top,\n        right,\n        bottom,\n        relativeElement: parent as HTMLElement\n      })\n    }\n\n    document.body.appendChild(target)\n    target.removeAfterUse = true\n    target.open({ top, left, right, bottom, width, height })\n\n    return target\n  }\n\n  /**\n   * Opens the 'ox-popup' with the specified position and dimensions.\n   *\n   * @param {Object} options - An object specifying the position and dimensions of the popup.\n   * @param {number} options.left - The left position (in pixels) where the popup should be displayed. If not provided, it will be centered horizontally.\n   * @param {number} options.top - The top position (in pixels) where the popup should be displayed. If not provided, it will be centered vertically.\n   * @param {number} options.right - The right position (in pixels) where the popup should be displayed. If provided, it will override the 'left' value.\n   * @param {number} options.bottom - The bottom position (in pixels) where the popup should be displayed. If provided, it will override the 'top' value.\n   * @param {string} options.width - The maximum width of the popup (CSS string). For example, '300px'.\n   * @param {string} options.height - The maximum height of the popup (CSS string). For example, '200px'.\n   * @param {boolean} [options.silent=false] - A flag indicating whether the popup should auto-focus or not. If set to true, the popup won't attempt to focus on any element.\n   * @param {boolean} [options.fixed=false] - A flag indicating whether the popup should be positioned fixed relative to the viewport. If set to true, the popup will be fixed.\n   */\n  open({\n    left,\n    top,\n    right,\n    bottom,\n    width,\n    height,\n    silent = false,\n    fixed = false\n  }: {\n    left?: number\n    top?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    silent?: boolean\n    fixed?: boolean\n  }) {\n    if (this.backdrop) {\n      this.createBackdrop()\n    }\n\n    if (width) {\n      this.style.maxWidth = width\n      this.style.overflowX = 'auto'\n    }\n\n    if (height) {\n      this.style.maxHeight = height\n      this.style.overflowY = 'auto'\n    }\n\n    if (left === undefined && top === undefined && right === undefined && bottom === undefined) {\n      this.style.transform = 'translateX(-50%) translateY(-50%)'\n      this.style.left = '50%'\n      this.style.top = '50%'\n    } else if (fixed) {\n      const bounding = this.parentElement?.getBoundingClientRect() || {\n        left: 0,\n        right: 0,\n        top: 0,\n        bottom: 0\n      }\n\n      this.style.position = 'fixed'\n\n      if (left !== undefined) {\n        left += bounding.left\n        this.style.left = `${left}px`\n      }\n      if (top !== undefined) {\n        top += bounding.top\n        this.style.top = `${top}px`\n      }\n      if (right !== undefined) {\n        right = window.innerWidth - (bounding.right - right)\n        this.style.right = `${right}px`\n      }\n      if (bottom !== undefined) {\n        bottom = window.innerHeight - (bounding.bottom - bottom)\n        this.style.bottom = `${bottom}px`\n      }\n    } else {\n      if (left !== undefined) {\n        this.style.left = `${left}px`\n      }\n      if (top !== undefined) {\n        this.style.top = `${top}px`\n      }\n      if (right !== undefined) {\n        this.style.right = `${right}px`\n      }\n      if (bottom !== undefined) {\n        this.style.bottom = `${bottom}px`\n      }\n    }\n\n    this.setAttribute('active', '')\n\n    requestAnimationFrame(() => {\n      const vh = window.innerHeight\n      const vw = window.innerWidth\n\n      var bounding = this.getBoundingClientRect()\n\n      var h = bounding.height\n      var w = bounding.width\n      var t = bounding.top\n      var l = bounding.left\n\n      // If the popup is too large, it will cause overflow scrolling.\n      if (vh < h) {\n        this.style.height = `${Math.min(Math.max(Math.floor((vh * 2) / 3), vh - (t + 20)), vh)}px`\n        this.style.overflow = 'auto'\n        h = vh\n      }\n\n      if (vw < w) {\n        this.style.width = `${Math.min(Math.max(Math.floor((vw * 2) / 3), vw - (l + 20)), vw)}px`\n        this.style.overflow = 'auto'\n        w = vw\n      }\n\n      // To prevent pop-ups from crossing screen boundaries, use the\n      const computedStyle = getComputedStyle(this)\n\n      if (t < 0) {\n        this.style.top = '10px'\n        this.style.bottom = ''\n      } else if (vh <= t + h) {\n        this.style.top = ''\n        this.style.bottom = '10px'\n      }\n\n      if (l < 0) {\n        this.style.left = `calc(${computedStyle.left} - ${l - 10}px)`\n        this.style.right = ''\n      } else if (vw < l + w) {\n        this.style.left = `calc(${computedStyle.left} - ${l + w - vw + 10}px)`\n        this.style.right = ''\n      }\n    })\n\n    // auto focusing\n    !silent && this.guaranteeFocus()\n\n    /* When the window is out of focus, all pop-ups should disappear. */\n    window.addEventListener('blur', this._onwindowblur)\n  }\n\n  guaranteeFocus(target?: HTMLElement) {\n    const focusible = (target || this).querySelector(\n      ':host > button, :host > [href], :host > input, :host > select, :host > textarea, :host > [tabindex]:not([tabindex=\"-1\"])'\n    )\n\n    if (focusible) {\n      ;(focusible as HTMLElement).focus()\n    } else {\n      this.focus()\n    }\n  }\n\n  /**\n   * Closes the 'ox-popup'.\n   */\n  close() {\n    this.removeAttribute('active')\n\n    window.removeEventListener('blur', this._onwindowblur)\n\n    if (this.backdrop) {\n      this.removeBackdrop()\n    }\n\n    if (this.removeAfterUse && this.parentElement) {\n      /* this case is when the popup is opened by OxPopup.open(...) */\n      this.removeEventListener('focusout', this._onfocusout)\n      this.removeEventListener('keydown', this._onkeydown)\n      this.removeEventListener('keyup', this._onkeyup)\n      this.removeEventListener('click', this._onclick)\n      this.removeEventListener('ox-close', this._onclose)\n      this.removeEventListener('ox-collapse', this._oncollapse)\n      this.removeEventListener('mouseup', this._onmouseup)\n      this.removeEventListener('mousedown', this._onmousedown)\n      this.removeEventListener('contextmenu', this._oncontextmenu)\n\n      this.parentElement.removeChild(this)\n\n      if (this.lastActive) {\n        this.lastActive.focus && this.lastActive.focus()\n      }\n    }\n  }\n\n  private createBackdrop() {\n    let backdrop = document.createElement('div')\n    backdrop.id = 'ox-popup-backdrop'\n    backdrop.style.position = 'fixed'\n    backdrop.style.top = '0'\n    backdrop.style.left = '0'\n    backdrop.style.width = '100vw'\n    backdrop.style.height = '100vh'\n    backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'\n    backdrop.style.zIndex = '999'\n    backdrop.style.backdropFilter = 'blur(5px)'\n    backdrop.style.transition = 'opacity 0.3s ease-in-out'\n    backdrop.style.opacity = '0'\n\n    document.body.appendChild(backdrop)\n    requestAnimationFrame(() => {\n      backdrop.style.opacity = '1'\n    })\n\n    backdrop.addEventListener('click', () => this.close())\n  }\n\n  private removeBackdrop() {\n    const backdrops = document.querySelectorAll('#ox-popup-backdrop')\n\n    if (backdrops.length > 0) {\n      const lastBackdrop = backdrops[backdrops.length - 1] as HTMLElement\n      lastBackdrop.style.opacity = '0'\n      setTimeout(() => {\n        lastBackdrop.remove()\n      }, 300)\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-popup.js","sourceRoot":"","sources":["../../src/ox-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { convertToFixedPosition } from './position-converter.js'\n\ndeclare global {\n  interface Window {\n    POPUP_DEBUG?: boolean\n  }\n}\n\n/**\n * Custom element class representing the 'ox-popup' component.\n *\n * This component provides the functionality to display a popup with various configuration options.\n * It can be used to show additional information, notifications, or user interactions within a web application.\n *\n * @fires ox-close - Dispatched when the popup is closed.\n * @fires ox-collapse - Dispatched when the popup is collapsed.\n */\n@customElement('ox-popup')\nexport class OxPopup extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: absolute;\n        display: none;\n        z-index: 1000; /* Increased z-index to ensure it's on top */\n        padding: 0;\n        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n        box-sizing: border-box;\n        min-width: fit-content;\n        line-height: initial;\n        text-align: initial;\n        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));\n        color: var(--ox-popup-list-color, var(--md-sys-color-on-surface));\n        margin: 0;\n      }\n\n      :host([active]) {\n        display: flex;\n        flex-direction: column;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n\n      #backdrop {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100vw;\n        height: 100vh;\n        background-color: black;\n        opacity: 0.5;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur: boolean = false\n  @property({ type: Boolean, attribute: 'backdrop' }) backdrop: boolean = false\n\n  private lastActive: HTMLElement = document.activeElement as HTMLElement\n  protected removeAfterUse: boolean = false\n\n  render() {\n    return html` <slot></slot> `\n  }\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopup, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close()\n    }\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopup, e: KeyboardEvent) {\n    e.stopPropagation()\n\n    switch (e.key) {\n      case 'Esc': // for IE/Edge\n      case 'Escape':\n        this.close()\n        break\n    }\n  }.bind(this)\n\n  protected _onkeyup: (e: KeyboardEvent) => void = function (this: OxPopup, e: KeyboardEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmouseup: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmousedown: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _oncontextmenu: (e: Event) => void = function (this: OxPopup, e: Event) {\n    e.stopPropagation()\n    // this.close()\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclose: (e: Event) => void = function (this: OxPopup, e: Event) {\n    this.close()\n  }.bind(this)\n\n  protected _oncollapse: (e: Event) => void = function (this: OxPopup, e: Event) {\n    e.stopPropagation()\n    this.close()\n  }.bind(this)\n\n  protected _onwindowblur: (e: Event) => void = function (this: OxPopup, e: Event) {\n    !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close()\n  }.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.addEventListener('focusout', this._onfocusout)\n    this.addEventListener('keydown', this._onkeydown)\n    this.addEventListener('keyup', this._onkeyup)\n    this.addEventListener('click', this._onclick)\n    this.addEventListener('mouseup', this._onmouseup)\n    this.addEventListener('mousedown', this._onmousedown)\n    this.addEventListener('contextmenu', this._oncontextmenu)\n    this.addEventListener('ox-close', this._onclose)\n    this.addEventListener('ox-collapse', this._oncollapse)\n\n    this.setAttribute('tabindex', '0') // make this element focusable\n    requestAnimationFrame(() => {\n      this.guaranteeFocus()\n    })\n  }\n\n  /**\n   * Configuration for opening ox-popup\n   *\n   * @typedef {Object} PopupOpenOptions\n   * @property {HTMLTemplate} template HTMLTemplate to be displayed inside the popup\n   * @property {Number} top The position-top where the pop-up will be displayed\n   * @property {Number} left The position-left where the pop-up will be displayed\n   * @property {Number} right The position-right where the pop-up will be displayed\n   * @property {Number} bottom The position-bottom where the pop-up will be displayed\n   * @property {string} width The maximum width of the popup (CSS string)\n   * @property {string} height The maximum height of the popup (CSS string)\n   * @property {HTMLElement} parent Popup's parent element\n   * @property {string} style Additional CSS styles for the popup\n   * @property {boolean} preventCloseOnBlur Flag to prevent closing the popup on blur\n   * @property {boolean} backdrop If true, a semi-transparent background will be applied behind the popup, dimming the rest of the page.\n   */\n  static open({\n    template,\n    top,\n    left,\n    right,\n    bottom,\n    width,\n    height,\n    parent,\n    style,\n    preventCloseOnBlur,\n    backdrop\n  }: {\n    template: unknown\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    parent?: Element | null\n    style?: string\n    preventCloseOnBlur?: boolean\n    backdrop?: boolean\n  }): OxPopup {\n    const target = document.createElement('ox-popup') as OxPopup\n    if (preventCloseOnBlur) {\n      target.preventCloseOnBlur = preventCloseOnBlur\n    }\n\n    if (backdrop) {\n      target.backdrop = backdrop\n    }\n\n    if (style) {\n      target.style.cssText = style\n    }\n\n    render(template, target)\n\n    if (parent) {\n      var { left, top, right, bottom } = convertToFixedPosition({\n        left,\n        top,\n        right,\n        bottom,\n        relativeElement: parent as HTMLElement\n      })\n    }\n\n    document.body.appendChild(target)\n    target.removeAfterUse = true\n    target.open({ top, left, right, bottom, width, height })\n\n    return target\n  }\n\n  /**\n   * Opens the 'ox-popup' with the specified position and dimensions.\n   *\n   * @param {Object} options - An object specifying the position and dimensions of the popup.\n   * @param {number} options.left - The left position (in pixels) where the popup should be displayed. If not provided, it will be centered horizontally.\n   * @param {number} options.top - The top position (in pixels) where the popup should be displayed. If not provided, it will be centered vertically.\n   * @param {number} options.right - The right position (in pixels) where the popup should be displayed. If provided, it will override the 'left' value.\n   * @param {number} options.bottom - The bottom position (in pixels) where the popup should be displayed. If provided, it will override the 'top' value.\n   * @param {string} options.width - The maximum width of the popup (CSS string). For example, '300px'.\n   * @param {string} options.height - The maximum height of the popup (CSS string). For example, '200px'.\n   * @param {boolean} [options.silent=false] - A flag indicating whether the popup should auto-focus or not. If set to true, the popup won't attempt to focus on any element.\n   * @param {boolean} [options.fixed=false] - A flag indicating whether the popup should be positioned fixed relative to the viewport. If set to true, the popup will be fixed.\n   * @param {number} [options.anchorTop] - Where the element the popup opens under begins, in the same terms as `top` (which is where it ends).\n   *   A popup with too little room below opens above that line instead. Without it, `top` is a point.\n   */\n  open({\n    left,\n    top,\n    right,\n    bottom,\n    width,\n    height,\n    silent = false,\n    fixed = false,\n    anchorTop\n  }: {\n    left?: number\n    top?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    silent?: boolean\n    fixed?: boolean\n    anchorTop?: number\n  }) {\n    if (this.backdrop) {\n      this.createBackdrop()\n    }\n\n    if (width) {\n      this.style.maxWidth = width\n      this.style.overflowX = 'auto'\n    }\n\n    /* A popup opened again starts from where it is asked to open, not from where it was last moved or cut. */\n    this.style.height = ''\n    this.style.maxHeight = ''\n    if (top !== undefined && bottom === undefined) this.style.bottom = ''\n    if (bottom !== undefined && top === undefined) this.style.top = ''\n\n    if (height) {\n      this.style.maxHeight = height\n      this.style.overflowY = 'auto'\n    }\n\n    if (left === undefined && top === undefined && right === undefined && bottom === undefined) {\n      this.style.transform = 'translateX(-50%) translateY(-50%)'\n      this.style.left = '50%'\n      this.style.top = '50%'\n    } else if (fixed) {\n      const bounding = this.parentElement?.getBoundingClientRect() || {\n        left: 0,\n        right: 0,\n        top: 0,\n        bottom: 0\n      }\n\n      this.style.position = 'fixed'\n\n      if (left !== undefined) {\n        left += bounding.left\n        this.style.left = `${left}px`\n      }\n      if (top !== undefined) {\n        top += bounding.top\n        this.style.top = `${top}px`\n      }\n      if (right !== undefined) {\n        right = window.innerWidth - (bounding.right - right)\n        this.style.right = `${right}px`\n      }\n      if (bottom !== undefined) {\n        bottom = window.innerHeight - (bounding.bottom - bottom)\n        this.style.bottom = `${bottom}px`\n      }\n    } else {\n      if (left !== undefined) {\n        this.style.left = `${left}px`\n      }\n      if (top !== undefined) {\n        this.style.top = `${top}px`\n      }\n      if (right !== undefined) {\n        this.style.right = `${right}px`\n      }\n      if (bottom !== undefined) {\n        this.style.bottom = `${bottom}px`\n      }\n    }\n\n    this.setAttribute('active', '')\n\n    requestAnimationFrame(() => {\n      const vh = window.innerHeight\n      const vw = window.innerWidth\n\n      var bounding = this.getBoundingClientRect()\n\n      var h = bounding.height\n      var w = bounding.width\n      var t = bounding.top\n      var l = bounding.left\n\n      // If the popup is too large, it will cause overflow scrolling.\n      if (vh < h && (top === undefined || bottom !== undefined)) {\n        this.style.height = `${Math.min(Math.max(Math.floor((vh * 2) / 3), vh - (t + 20)), vh)}px`\n        this.style.overflow = 'auto'\n        h = vh\n      }\n\n      if (vw < w) {\n        this.style.width = `${Math.min(Math.max(Math.floor((vw * 2) / 3), vw - (l + 20)), vw)}px`\n        this.style.overflow = 'auto'\n        w = vw\n      }\n\n      // To prevent pop-ups from crossing screen boundaries, use the\n      const computedStyle = getComputedStyle(this)\n\n      if (top !== undefined && bottom === undefined) {\n        this.keepOffTheLine(bounding, top, anchorTop, computedStyle.top)\n      } else if (t < 0) {\n        this.style.top = '10px'\n        this.style.bottom = ''\n      } else if (vh <= t + h) {\n        this.style.top = ''\n        this.style.bottom = '10px'\n      }\n\n      if (l < 0) {\n        this.style.left = `calc(${computedStyle.left} - ${l - 10}px)`\n        this.style.right = ''\n      } else if (vw < l + w) {\n        this.style.left = `calc(${computedStyle.left} - ${l + w - vw + 10}px)`\n        this.style.right = ''\n      }\n    })\n\n    // auto focusing\n    !silent && this.guaranteeFocus()\n\n    /* When the window is out of focus, all pop-ups should disappear. */\n    window.addEventListener('blur', this._onwindowblur)\n  }\n\n  /**\n   * A popup opened downward from a line - the bottom of its select, or a point - never covers that line or what is\n   * above it down to `anchorTop`: covered, the select's next press lands on the popup (a double-click in a grid cell\n   * picked an option). With too little room below it opens above, if there is more room there; either way it is cut\n   * to the room it has and scrolls inside.\n   */\n  private keepOffTheLine(bounding: DOMRect, top: number, anchorTop: number | undefined, styledTop: string) {\n    const margin = 10\n    const height = bounding.height\n    const line = bounding.top\n    const lineAbove = anchorTop === undefined ? line : line - (top - anchorTop)\n    const below = window.innerHeight - line - margin\n    const above = lineAbove - margin\n\n    if (height <= below) {\n      return\n    }\n\n    if (above > below) {\n      const fitted = Math.min(height, above)\n      if (fitted < height) {\n        this.style.maxHeight = `${fitted}px`\n        this.style.overflowY = 'auto'\n      }\n      this.style.top = `calc(${styledTop} - ${line - (lineAbove - fitted)}px)`\n    } else {\n      this.style.maxHeight = `${Math.max(below, 0)}px`\n      this.style.overflowY = 'auto'\n    }\n  }\n\n  guaranteeFocus(target?: HTMLElement) {\n    const focusible = (target || this).querySelector(\n      ':host > button, :host > [href], :host > input, :host > select, :host > textarea, :host > [tabindex]:not([tabindex=\"-1\"])'\n    )\n\n    if (focusible) {\n      ;(focusible as HTMLElement).focus()\n    } else {\n      this.focus()\n    }\n  }\n\n  /**\n   * Closes the 'ox-popup'.\n   */\n  close() {\n    this.removeAttribute('active')\n\n    window.removeEventListener('blur', this._onwindowblur)\n\n    if (this.backdrop) {\n      this.removeBackdrop()\n    }\n\n    if (this.removeAfterUse && this.parentElement) {\n      /* this case is when the popup is opened by OxPopup.open(...) */\n      this.removeEventListener('focusout', this._onfocusout)\n      this.removeEventListener('keydown', this._onkeydown)\n      this.removeEventListener('keyup', this._onkeyup)\n      this.removeEventListener('click', this._onclick)\n      this.removeEventListener('ox-close', this._onclose)\n      this.removeEventListener('ox-collapse', this._oncollapse)\n      this.removeEventListener('mouseup', this._onmouseup)\n      this.removeEventListener('mousedown', this._onmousedown)\n      this.removeEventListener('contextmenu', this._oncontextmenu)\n\n      this.parentElement.removeChild(this)\n\n      if (this.lastActive) {\n        this.lastActive.focus && this.lastActive.focus()\n      }\n    }\n  }\n\n  private createBackdrop() {\n    let backdrop = document.createElement('div')\n    backdrop.id = 'ox-popup-backdrop'\n    backdrop.style.position = 'fixed'\n    backdrop.style.top = '0'\n    backdrop.style.left = '0'\n    backdrop.style.width = '100vw'\n    backdrop.style.height = '100vh'\n    backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'\n    backdrop.style.zIndex = '999'\n    backdrop.style.backdropFilter = 'blur(5px)'\n    backdrop.style.transition = 'opacity 0.3s ease-in-out'\n    backdrop.style.opacity = '0'\n\n    document.body.appendChild(backdrop)\n    requestAnimationFrame(() => {\n      backdrop.style.opacity = '1'\n    })\n\n    backdrop.addEventListener('click', () => this.close())\n  }\n\n  private removeBackdrop() {\n    const backdrops = document.querySelectorAll('#ox-popup-backdrop')\n\n    if (backdrops.length > 0) {\n      const lastBackdrop = backdrops[backdrops.length - 1] as HTMLElement\n      lastBackdrop.style.opacity = '0'\n      setTimeout(() => {\n        lastBackdrop.remove()\n      }, 300)\n    }\n  }\n}\n"]}

package/dist/test/ox-popup-list-search.test.d.ts

@@ -0,0 +1 @@
+import '../src/ox-popup-list.js';

package/dist/test/ox-popup-list-search.test.js

@@ -0,0 +1,61 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/ox-popup-list.js';
+/**
+ * A searchable list is a select with a search box on top. It opened with the focus on an option, so the user had to
+ * click the box before typing, and Enter in the box did nothing.
+ */
+describe('ox-popup-list with search', () => {
+    const tick = () => new Promise(resolve => setTimeout(resolve, 10));
+    async function opened() {
+        const list = await fixture(html `<ox-popup-list with-search>
+      <div option value="a">Alpha</div>
+      <div option value="m1">MES one</div>
+      <div option value="m2">MES two</div>
+    </ox-popup-list>`);
+        list.open({ left: 0, top: 0 });
+        await list.updateComplete;
+        await tick();
+        return list;
+    }
+    const type = async (list, text) => {
+        list.searchInput.value = text;
+        list.searchInput.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+        await list.updateComplete;
+    };
+    const enter = (list, init = {}) => list.searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true, ...init }));
+    it('opens with the focus in the search box', async () => {
+        const list = await opened();
+        /* Compared as a boolean: a failed chai match on an element hangs the runner. */
+        expect(list.shadowRoot.activeElement === list.searchInput).to.equal(true);
+    });
+    it('picks the first match on Enter in the search box', async () => {
+        const list = await opened();
+        await type(list, 'mes');
+        let picked;
+        list.addEventListener('select', (e) => (picked = e.detail));
+        enter(list);
+        await tick();
+        expect(picked).to.equal('m1');
+    });
+    it('leaves Enter alone while a word is being composed', async () => {
+        const list = await opened();
+        await type(list, 'mes');
+        let picked = false;
+        list.addEventListener('select', () => (picked = true));
+        enter(list, { isComposing: true });
+        await tick();
+        expect(picked).to.equal(false);
+    });
+    it('clears the last search when it opens again', async () => {
+        const list = await opened();
+        await type(list, 'mes');
+        list.close();
+        list.open({ left: 0, top: 0 });
+        await list.updateComplete;
+        await tick();
+        expect(list.searchInput.value).to.equal('');
+        expect(list.querySelectorAll('[option]:not([hidden])').length).to.equal(3);
+    });
+});
+//# sourceMappingURL=ox-popup-list-search.test.js.map

package/dist/test/ox-popup-list-search.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-popup-list-search.test.js","sourceRoot":"","sources":["../../test/ox-popup-list-search.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture } from '@open-wc/testing'\nimport { html } from 'lit'\n\nimport '../src/ox-popup-list.js'\nimport type { OxPopupList } from '../src/ox-popup-list.js'\n\n/**\n * A searchable list is a select with a search box on top. It opened with the focus on an option, so the user had to\n * click the box before typing, and Enter in the box did nothing.\n */\ndescribe('ox-popup-list with search', () => {\n  const tick = () => new Promise(resolve => setTimeout(resolve, 10))\n\n  async function opened() {\n    const list = await fixture<OxPopupList>(html`<ox-popup-list with-search>\n      <div option value=\"a\">Alpha</div>\n      <div option value=\"m1\">MES one</div>\n      <div option value=\"m2\">MES two</div>\n    </ox-popup-list>`)\n    list.open({ left: 0, top: 0 })\n    await list.updateComplete\n    await tick()\n    return list\n  }\n\n  const type = async (list: OxPopupList, text: string) => {\n    list.searchInput.value = text\n    list.searchInput.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }))\n    await list.updateComplete\n  }\n\n  const enter = (list: OxPopupList, init: KeyboardEventInit = {}) =>\n    list.searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true, ...init }))\n\n  it('opens with the focus in the search box', async () => {\n    const list = await opened()\n    /* Compared as a boolean: a failed chai match on an element hangs the runner. */\n    expect(list.shadowRoot!.activeElement === list.searchInput).to.equal(true)\n  })\n\n  it('picks the first match on Enter in the search box', async () => {\n    const list = await opened()\n    await type(list, 'mes')\n    let picked: unknown\n    list.addEventListener('select', (e: Event) => (picked = (e as CustomEvent).detail))\n    enter(list)\n    await tick()\n    expect(picked).to.equal('m1')\n  })\n\n  it('leaves Enter alone while a word is being composed', async () => {\n    const list = await opened()\n    await type(list, 'mes')\n    let picked = false\n    list.addEventListener('select', () => (picked = true))\n    enter(list, { isComposing: true })\n    await tick()\n    expect(picked).to.equal(false)\n  })\n\n  it('clears the last search when it opens again', async () => {\n    const list = await opened()\n    await type(list, 'mes')\n    list.close()\n    list.open({ left: 0, top: 0 })\n    await list.updateComplete\n    await tick()\n    expect(list.searchInput.value).to.equal('')\n    expect(list.querySelectorAll('[option]:not([hidden])').length).to.equal(3)\n  })\n})\n"]}

package/dist/test/ox-popup-placement.test.d.ts

@@ -0,0 +1 @@
+import '../src/ox-popup-list.js';