@operato/popup 8.0.3 → 9.0.0-beta.10

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: 100;\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        >\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')) {\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  /**\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  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: 100;\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        >\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')) {\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  /**\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"]}

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

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { OxPopup } from './ox-popup';
+import { OxPopup } from './ox-popup.js';
 /**
  * Custom element representing a popup menu. It extends OxPopup.
  */

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

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { render } from 'lit-html';
 import { customElement, property } from 'lit/decorators.js';
-import { OxPopup } from './ox-popup';
+import { OxPopup } from './ox-popup.js';
 import { convertToFixedPosition } from './position-converter.js';
 function focusClosest(element) {
     /* Find the closest focusable element. */
@@ -14,67 +14,7 @@ function focusClosest(element) {
  * Custom element representing a popup menu. It extends OxPopup.
  */
 let OxPopupMenu = class OxPopupMenu extends OxPopup {
-    constructor() {
-        super(...arguments);
-        /**
-         * Property to track the index of the active menu item.
-         */
-        this.activeIndex = 0;
-        this._onkeydown = function (e) {
-            e.stopPropagation();
-            switch (e.key) {
-                case 'Esc': // for IE/Edge
-                case 'Escape':
-                case 'Left': // for IE/Edge
-                case 'ArrowLeft':
-                    this.close();
-                    break;
-                case 'Up': // for IE/Edge
-                case 'ArrowUp':
-                    this.activeIndex--;
-                    break;
-                case 'Right': // for IE/Edge
-                case 'ArrowRight':
-                case 'Down': // for IE/Edge
-                case 'ArrowDown':
-                    this.activeIndex++;
-                    break;
-                case 'Enter':
-                    e.stopPropagation();
-                    var menu = e.target?.closest('[menu], ox-popup-menuitem');
-                    if (menu) {
-                        this.select(menu);
-                    }
-                    break;
-            }
-        }.bind(this);
-        this._onfocusout = function (e) {
-            const target = e.target;
-            const to = e.relatedTarget;
-            const from = target.closest('ox-popup-menu');
-            if (!to && from !== this) {
-                e.stopPropagation();
-                /* "하위의 POPUP-MENU 엘리먼트가 포커스를 잃었지만, 그 포커스를 받은 엘리먼트가 없다."는 의미는 그 서브메뉴가 클로즈된 것을 의미한다. */
-                this.setActive(this.activeIndex);
-            }
-            else {
-                if (!this.contains(to)) {
-                    /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, popup-menu는 닫혀야 한다. */
-                    // @ts-ignore for debug
-                    !window.POPUP_DEBUG && this.close();
-                }
-            }
-        }.bind(this);
-        this._onclick = function (e) {
-            e.stopPropagation();
-            const menu = e.target?.closest('[menu], ox-popup-menuitem');
-            if (menu) {
-                this.setActive(menu);
-                this.select(menu);
-            }
-        }.bind(this);
-    }
-    static { this.styles = [
+    static styles = [
         ...OxPopup.styles,
         css `
       :host {
@@ -138,10 +78,67 @@ let OxPopupMenu = class OxPopupMenu extends OxPopup {
         background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));
       }
     `
-    ]; }
+    ];
+    /**
+     * Property to track the index of the active menu item.
+     */
+    activeIndex = 0;
     render() {
         return html ` <slot> </slot> `;
     }
+    _onkeydown = function (e) {
+        e.stopPropagation();
+        switch (e.key) {
+            case 'Esc': // for IE/Edge
+            case 'Escape':
+            case 'Left': // for IE/Edge
+            case 'ArrowLeft':
+                this.close();
+                break;
+            case 'Up': // for IE/Edge
+            case 'ArrowUp':
+                this.activeIndex--;
+                break;
+            case 'Right': // for IE/Edge
+            case 'ArrowRight':
+            case 'Down': // for IE/Edge
+            case 'ArrowDown':
+                this.activeIndex++;
+                break;
+            case 'Enter':
+                e.stopPropagation();
+                var menu = e.target?.closest('[menu], ox-popup-menuitem');
+                if (menu) {
+                    this.select(menu);
+                }
+                break;
+        }
+    }.bind(this);
+    _onfocusout = function (e) {
+        const target = e.target;
+        const to = e.relatedTarget;
+        const from = target.closest('ox-popup-menu');
+        if (!to && from !== this) {
+            e.stopPropagation();
+            /* "하위의 POPUP-MENU 엘리먼트가 포커스를 잃었지만, 그 포커스를 받은 엘리먼트가 없다."는 의미는 그 서브메뉴가 클로즈된 것을 의미한다. */
+            this.setActive(this.activeIndex);
+        }
+        else {
+            if (!this.contains(to)) {
+                /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, popup-menu는 닫혀야 한다. */
+                // @ts-ignore for debug
+                !window.POPUP_DEBUG && this.close();
+            }
+        }
+    }.bind(this);
+    _onclick = function (e) {
+        e.stopPropagation();
+        const menu = e.target?.closest('[menu], ox-popup-menuitem');
+        if (menu) {
+            this.setActive(menu);
+            this.select(menu);
+        }
+    }.bind(this);
     updated(changes) {
         if (changes.has('activeIndex')) {
             this.setActive(this.activeIndex);

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

@@ -1 +1 @@
-{"version":3,"file":"ox-popup-menu.js","sourceRoot":"","sources":["../../src/ox-popup-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValues } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxPopup } from './ox-popup'\nimport { convertToFixedPosition } from './position-converter.js'\n\nfunction focusClosest(element: HTMLElement) {\n  /* Find the closest focusable element. */\n  const closest = element.closest(\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  ) as HTMLElement\n\n  closest?.focus()\n\n  return closest\n}\n\n/**\n * Custom element representing a popup menu. It extends OxPopup.\n */\n@customElement('ox-popup-menu')\nexport class OxPopupMenu extends OxPopup {\n  static styles = [\n    ...OxPopup.styles,\n    css`\n      :host {\n        display: none;\n        flex-direction: column;\n        align-items: stretch;\n        background-color: var(--ox-popup-menu-background-color, var(--md-sys-color-surface));\n        color: var(--ox-popup-list-color, var(--md-sys-color-on-surface));\n        z-index: 100;\n        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n        padding: var(--spacing-small) 0;\n        border-radius: var(--spacing-small);\n\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      }\n\n      :host([active]) {\n        display: flex;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n\n      ::slotted(*) {\n        padding: var(--spacing-medium);\n        border-bottom: 1px solid var(--md-sys-color-surface-variant);\n        cursor: pointer;\n        color: var(--ox-popup-list-color, var(--md-sys-color-outline-variant));\n      }\n\n      ::slotted(*:focus) {\n        cursor: pointer;\n        outline: none;\n      }\n\n      ::slotted([menu]),\n      ::slotted(ox-popup-menuitem) {\n        border-left: 3px solid transparent;\n        background-color: var(--ox-popup-menu-background-color, var(--md-sys-color-surface));\n        color: var(--ox-popup-menu-color, var(--md-sys-color-on-surface));\n      }\n\n      ::slotted([menu][active]),\n      ::slotted([menu]:hover),\n      ::slotted(ox-popup-menuitem[active]),\n      ::slotted(ox-popup-menuitem: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(ox-popup-menuitem[active]) {\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  ]\n\n  /**\n   * Property to track the index of the active menu item.\n   */\n  @property({ type: Number }) activeIndex: number = 0\n\n  render() {\n    return html` <slot> </slot> `\n  }\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupMenu, e: KeyboardEvent) {\n    e.stopPropagation()\n\n    switch (e.key) {\n      case 'Esc': // for IE/Edge\n      case 'Escape':\n      case 'Left': // for IE/Edge\n      case 'ArrowLeft':\n        this.close()\n        break\n\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        e.stopPropagation()\n        var menu = (e.target as HTMLElement)?.closest('[menu], ox-popup-menuitem')\n        if (menu) {\n          this.select(menu)\n        }\n        break\n    }\n  }.bind(this)\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopupMenu, e: FocusEvent) {\n    const target = e.target as HTMLElement\n    const to = e.relatedTarget as HTMLElement\n    const from = target.closest('ox-popup-menu')\n\n    if (!to && from !== this) {\n      e.stopPropagation()\n\n      /* \"하위의 POPUP-MENU 엘리먼트가 포커스를 잃었지만, 그 포커스를 받은 엘리먼트가 없다.\"는 의미는 그 서브메뉴가 클로즈된 것을 의미한다. */\n      this.setActive(this.activeIndex)\n    } else {\n      if (!this.contains(to)) {\n        /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, popup-menu는 닫혀야 한다. */\n        // @ts-ignore for debug\n        !window.POPUP_DEBUG && this.close()\n      }\n    }\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPopupMenu, e: MouseEvent) {\n    e.stopPropagation()\n\n    const menu = (e.target as HTMLElement)?.closest('[menu], ox-popup-menuitem')\n    if (menu) {\n      this.setActive(menu)\n      this.select(menu)\n    }\n  }.bind(this)\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('activeIndex')) {\n      this.setActive(this.activeIndex)\n    }\n  }\n\n  /**\n   * Selects a menu item by dispatching a 'select' event.\n   * Closes the menu if the item doesn't have 'alive-on-select' attribute.\n   */\n  select(menu: Element) {\n    menu.dispatchEvent(new CustomEvent('select'))\n    if (!menu.hasAttribute('alive-on-select')) {\n      this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }))\n    }\n  }\n\n  /**\n   * Sets the active menu item based on the index or the menu element itself.\n   */\n  setActive(active: number | Element | null) {\n    const menus = Array.from(this.querySelectorAll(':scope > ox-popup-menuitem, :scope > [menu]'))\n\n    menus.map(async (menu, index) => {\n      if (typeof active === 'number' && index === (active + menus.length) % menus.length) {\n        menu.setAttribute('active', '')\n        focusClosest(menu as HTMLElement)\n\n        this.activeIndex = index\n      } else if (active === menu) {\n        if (this.activeIndex === index) {\n          /* 메뉴의 update를 유도하기 위해서 강제로 토글시킴 */\n          menu.removeAttribute('active')\n          await this.updateComplete\n          menu.setAttribute('active', '')\n        }\n\n        this.activeIndex = index\n      } else {\n        menu.removeAttribute('active')\n      }\n    })\n  }\n\n  /**\n   * Static method to open a popup menu with the provided template and position options.\n   * Creates and returns an instance of OxPopupMenu.\n   *\n   * @param {PopupOpenOptions}\n   */\n  static open({\n    template,\n    top,\n    left,\n    right,\n    bottom,\n    parent\n  }: {\n    template: unknown\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    parent?: Element | null\n  }): OxPopupMenu {\n    const target = document.createElement('ox-popup-menu') as OxPopupMenu\n    render(template, target)\n\n    target.setAttribute('active', '')\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-menu.js","sourceRoot":"","sources":["../../src/ox-popup-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValues } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxPopup } from './ox-popup.js'\nimport { convertToFixedPosition } from './position-converter.js'\n\nfunction focusClosest(element: HTMLElement) {\n  /* Find the closest focusable element. */\n  const closest = element.closest(\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  ) as HTMLElement\n\n  closest?.focus()\n\n  return closest\n}\n\n/**\n * Custom element representing a popup menu. It extends OxPopup.\n */\n@customElement('ox-popup-menu')\nexport class OxPopupMenu extends OxPopup {\n  static styles = [\n    ...OxPopup.styles,\n    css`\n      :host {\n        display: none;\n        flex-direction: column;\n        align-items: stretch;\n        background-color: var(--ox-popup-menu-background-color, var(--md-sys-color-surface));\n        color: var(--ox-popup-list-color, var(--md-sys-color-on-surface));\n        z-index: 100;\n        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n        padding: var(--spacing-small) 0;\n        border-radius: var(--spacing-small);\n\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      }\n\n      :host([active]) {\n        display: flex;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n\n      ::slotted(*) {\n        padding: var(--spacing-medium);\n        border-bottom: 1px solid var(--md-sys-color-surface-variant);\n        cursor: pointer;\n        color: var(--ox-popup-list-color, var(--md-sys-color-outline-variant));\n      }\n\n      ::slotted(*:focus) {\n        cursor: pointer;\n        outline: none;\n      }\n\n      ::slotted([menu]),\n      ::slotted(ox-popup-menuitem) {\n        border-left: 3px solid transparent;\n        background-color: var(--ox-popup-menu-background-color, var(--md-sys-color-surface));\n        color: var(--ox-popup-menu-color, var(--md-sys-color-on-surface));\n      }\n\n      ::slotted([menu][active]),\n      ::slotted([menu]:hover),\n      ::slotted(ox-popup-menuitem[active]),\n      ::slotted(ox-popup-menuitem: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(ox-popup-menuitem[active]) {\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  ]\n\n  /**\n   * Property to track the index of the active menu item.\n   */\n  @property({ type: Number }) activeIndex: number = 0\n\n  render() {\n    return html` <slot> </slot> `\n  }\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupMenu, e: KeyboardEvent) {\n    e.stopPropagation()\n\n    switch (e.key) {\n      case 'Esc': // for IE/Edge\n      case 'Escape':\n      case 'Left': // for IE/Edge\n      case 'ArrowLeft':\n        this.close()\n        break\n\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        e.stopPropagation()\n        var menu = (e.target as HTMLElement)?.closest('[menu], ox-popup-menuitem')\n        if (menu) {\n          this.select(menu)\n        }\n        break\n    }\n  }.bind(this)\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopupMenu, e: FocusEvent) {\n    const target = e.target as HTMLElement\n    const to = e.relatedTarget as HTMLElement\n    const from = target.closest('ox-popup-menu')\n\n    if (!to && from !== this) {\n      e.stopPropagation()\n\n      /* \"하위의 POPUP-MENU 엘리먼트가 포커스를 잃었지만, 그 포커스를 받은 엘리먼트가 없다.\"는 의미는 그 서브메뉴가 클로즈된 것을 의미한다. */\n      this.setActive(this.activeIndex)\n    } else {\n      if (!this.contains(to)) {\n        /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, popup-menu는 닫혀야 한다. */\n        // @ts-ignore for debug\n        !window.POPUP_DEBUG && this.close()\n      }\n    }\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPopupMenu, e: MouseEvent) {\n    e.stopPropagation()\n\n    const menu = (e.target as HTMLElement)?.closest('[menu], ox-popup-menuitem')\n    if (menu) {\n      this.setActive(menu)\n      this.select(menu)\n    }\n  }.bind(this)\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('activeIndex')) {\n      this.setActive(this.activeIndex)\n    }\n  }\n\n  /**\n   * Selects a menu item by dispatching a 'select' event.\n   * Closes the menu if the item doesn't have 'alive-on-select' attribute.\n   */\n  select(menu: Element) {\n    menu.dispatchEvent(new CustomEvent('select'))\n    if (!menu.hasAttribute('alive-on-select')) {\n      this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }))\n    }\n  }\n\n  /**\n   * Sets the active menu item based on the index or the menu element itself.\n   */\n  setActive(active: number | Element | null) {\n    const menus = Array.from(this.querySelectorAll(':scope > ox-popup-menuitem, :scope > [menu]'))\n\n    menus.map(async (menu, index) => {\n      if (typeof active === 'number' && index === (active + menus.length) % menus.length) {\n        menu.setAttribute('active', '')\n        focusClosest(menu as HTMLElement)\n\n        this.activeIndex = index\n      } else if (active === menu) {\n        if (this.activeIndex === index) {\n          /* 메뉴의 update를 유도하기 위해서 강제로 토글시킴 */\n          menu.removeAttribute('active')\n          await this.updateComplete\n          menu.setAttribute('active', '')\n        }\n\n        this.activeIndex = index\n      } else {\n        menu.removeAttribute('active')\n      }\n    })\n  }\n\n  /**\n   * Static method to open a popup menu with the provided template and position options.\n   * Creates and returns an instance of OxPopupMenu.\n   *\n   * @param {PopupOpenOptions}\n   */\n  static open({\n    template,\n    top,\n    left,\n    right,\n    bottom,\n    parent\n  }: {\n    template: unknown\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    parent?: Element | null\n  }): OxPopupMenu {\n    const target = document.createElement('ox-popup-menu') as OxPopupMenu\n    render(template, target)\n\n    target.setAttribute('active', '')\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-menuitem.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
-import { OxPopupMenu } from './ox-popup-menu';
+import { OxPopupMenu } from './ox-popup-menu.js';
 /**
  * Custom element representing a menu item within an OxPopup menu.
  * It can contain a label and an optional submenu.

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

@@ -6,52 +6,7 @@ import { customElement, property, state } from 'lit/decorators.js';
  * It can contain a label and an optional submenu.
  */
 let OxPopupMenuItem = class OxPopupMenuItem extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Property indicating whether the menu item is active or not.
-         * When active, it may show a submenu.
-         */
-        this.active = false;
-        this._onclick = function (e) {
-            if (!this._submenu) {
-                return;
-            }
-            e.stopPropagation();
-            const parent = this.closest('ox-popup-menu');
-            if (parent) {
-                parent.setActive(this);
-            }
-            this.dispatchEvent(new CustomEvent('select'));
-            requestAnimationFrame(() => {
-                this.expand(false);
-            });
-        }.bind(this);
-        this._onkeydown = function (e) {
-            switch (e.key) {
-                case 'Right':
-                case 'ArrowRight':
-                    e.stopPropagation();
-                    this.expand(false);
-                    break;
-                case 'Left':
-                case 'ArrowLeft':
-                    e.stopPropagation();
-                    this.collapseSelf();
-                    break;
-                case 'Enter':
-                    if (this._submenu) {
-                        e.stopPropagation();
-                        this.expand(false);
-                    }
-                    break;
-            }
-        }.bind(this);
-        this._onslotchange = function (e) {
-            this._submenu = this.querySelector('ox-popup-menu');
-        }.bind(this);
-    }
-    static { this.styles = [
+    static styles = [
         css `
       :host {
         display: flex;
@@ -93,7 +48,17 @@ let OxPopupMenuItem = class OxPopupMenuItem extends LitElement {
         opacity: 0.7;
       }
     `
-    ]; }
+    ];
+    /**
+     * Property indicating whether the menu item is active or not.
+     * When active, it may show a submenu.
+     */
+    active = false;
+    /**
+     * The label to display for the menu item.
+     */
+    label;
+    _submenu;
     render() {
         return html `
       <div icon>
@@ -111,6 +76,43 @@ let OxPopupMenuItem = class OxPopupMenuItem extends LitElement {
         this.addEventListener('keydown', this._onkeydown);
         this.addEventListener('click', this._onclick);
     }
+    _onclick = function (e) {
+        if (!this._submenu) {
+            return;
+        }
+        e.stopPropagation();
+        const parent = this.closest('ox-popup-menu');
+        if (parent) {
+            parent.setActive(this);
+        }
+        this.dispatchEvent(new CustomEvent('select'));
+        requestAnimationFrame(() => {
+            this.expand(false);
+        });
+    }.bind(this);
+    _onkeydown = function (e) {
+        switch (e.key) {
+            case 'Right':
+            case 'ArrowRight':
+                e.stopPropagation();
+                this.expand(false);
+                break;
+            case 'Left':
+            case 'ArrowLeft':
+                e.stopPropagation();
+                this.collapseSelf();
+                break;
+            case 'Enter':
+                if (this._submenu) {
+                    e.stopPropagation();
+                    this.expand(false);
+                }
+                break;
+        }
+    }.bind(this);
+    _onslotchange = function (e) {
+        this._submenu = this.querySelector('ox-popup-menu');
+    }.bind(this);
     updated(changes) {
         if (changes.has('active')) {
             this.updateActive();

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

@@ -1 +1 @@
-{"version":3,"file":"ox-popup-menuitem.js","sourceRoot":"","sources":["../../src/ox-popup-menuitem.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAIlE;;;GAGG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QA6CL;;;WAGG;QAC0B,WAAM,GAAY,KAAK,CAAA;QA4B1C,aAAQ,GAA4B,UAAiC,CAAa;YAC1F,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,OAAM;YACR,CAAC;YAED,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAgB,CAAA;YAC3D,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;YACxB,CAAC;YAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAA;YAE7C,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACpB,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,eAAU,GAA+B,UAAiC,CAAgB;YAClG,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;gBACd,KAAK,OAAO,CAAC;gBACb,KAAK,YAAY;oBACf,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBAClB,MAAK;gBAEP,KAAK,MAAM,CAAC;gBACZ,KAAK,WAAW;oBACd,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,IAAI,CAAC,YAAY,EAAE,CAAA;oBACnB,MAAK;gBAEP,KAAK,OAAO;oBACV,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;wBAClB,CAAC,CAAC,eAAe,EAAE,CAAA;wBACnB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBACpB,CAAC;oBACD,MAAK;YACT,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,kBAAa,GAAuB,UAAiC,CAAQ;YACrF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAgB,CAAA;QACpE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAuDd,CAAC;aA/KQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCF;KACF,AA1CY,CA0CZ;IAeD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;mBAII,IAAI,CAAC,KAAK;;QAErB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;0BAE7C,IAAI,CAAC,aAAa;KACvC,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QAClC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACjD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC/C,CAAC;IAgDD,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,YAAY,EAAE,CAAA;QACrB,CAAC;IACH,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;QACnB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,EAAE,CAAA;QACjB,CAAC;IACH,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,MAAe;QACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAM;QACR,CAAC;QAED,MAAM,GAAG,GAAG,CAAC,CAAA;QACb,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAA;QAE7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAA;IAC3C,CAAC;IAED;;OAEG;IACH,QAAQ;QACN,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAA;IACxB,CAAC;IAED;;;OAGG;IACH,YAAY;QACV,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IACrG,CAAC;IAED;;;OAGG;IACH,KAAK;QACH,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClG,CAAC;;AA9H4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAwB;AAKxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAe;AAEjC;IAAR,KAAK,EAAE;iDAAuB;AAxDpB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAgL3B","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopupMenu } from './ox-popup-menu'\n\n/**\n * Custom element representing a menu item within an OxPopup menu.\n * It can contain a label and an optional submenu.\n */\n@customElement('ox-popup-menuitem')\nexport class OxPopupMenuItem extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n        position: relative;\n        align-items: center;\n      }\n\n      [icon] {\n        width: 20px;\n        display: flex;\n        flex-direction: row;\n        padding: 0;\n        margin: 0 var(--spacing-small) 0 0;\n        align-items: center;\n        justify-content: center;\n      }\n\n      [icon] > * {\n        flex: 1;\n      }\n\n      [label] {\n        flex: 1;\n        text-transform: capitalize;\n      }\n\n      ::slotted(*[slot='icon']) {\n        color: var(--ox-popup-menu-color-variant, var(--md-sys-color-on-surface-variant));\n        font-size: var(--icon-size-small);\n      }\n\n      md-icon {\n        display: block;\n        width: 24px;\n        text-align: right;\n        font-size: var(--icon-size-small);\n        color: var(--ox-popup-menu-color-variant, var(--md-sys-color-primary));\n        opacity: 0.7;\n      }\n    `\n  ]\n\n  /**\n   * Property indicating whether the menu item is active or not.\n   * When active, it may show a submenu.\n   */\n  @property({ type: Boolean }) active: boolean = false\n\n  /**\n   * The label to display for the menu item.\n   */\n  @property({ type: String }) label!: string\n\n  @state() _submenu?: OxPopupMenu\n\n  render() {\n    return html`\n      <div icon>\n        <slot name=\"icon\"> </slot>\n      </div>\n      <div label>${this.label}</div>\n\n      ${this._submenu ? html`<md-icon>chevron_right</md-icon>` : html``}\n\n      <slot @slotchange=${this._onslotchange}> </slot>\n    `\n  }\n\n  firstUpdated() {\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', this._onkeydown)\n    this.addEventListener('click', this._onclick)\n  }\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPopupMenuItem, e: MouseEvent) {\n    if (!this._submenu) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const parent = this.closest('ox-popup-menu') as OxPopupMenu\n    if (parent) {\n      parent.setActive(this)\n    }\n\n    this.dispatchEvent(new CustomEvent('select'))\n\n    requestAnimationFrame(() => {\n      this.expand(false)\n    })\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupMenuItem, e: KeyboardEvent) {\n    switch (e.key) {\n      case 'Right':\n      case 'ArrowRight':\n        e.stopPropagation()\n        this.expand(false)\n        break\n\n      case 'Left':\n      case 'ArrowLeft':\n        e.stopPropagation()\n        this.collapseSelf()\n        break\n\n      case 'Enter':\n        if (this._submenu) {\n          e.stopPropagation()\n          this.expand(false)\n        }\n        break\n    }\n  }.bind(this)\n\n  protected _onslotchange: (e: Event) => void = function (this: OxPopupMenuItem, e: Event) {\n    this._submenu = this.querySelector('ox-popup-menu') as OxPopupMenu\n  }.bind(this)\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('active')) {\n      this.updateActive()\n    }\n  }\n\n  updateActive() {\n    if (this.active) {\n      this.expand(true)\n    } else {\n      this.collapse()\n    }\n  }\n\n  /**\n   * Expands the submenu, if it exists.\n   * The submenu is displayed below and to the right of the menu item.\n   *\n   * @param {boolean} silent - If true, the submenu is opened silently without user interaction.\n   */\n  expand(silent: boolean) {\n    if (!this._submenu) {\n      return\n    }\n\n    const top = 0\n    const left = this.clientWidth\n\n    this._submenu.open({ top, left, silent })\n  }\n\n  /**\n   * Collapses the submenu, if it exists.\n   */\n  collapse() {\n    this._submenu?.close()\n  }\n\n  /**\n   * Dispatches a custom 'ox-collapse' event indicating that the menu item should collapse itself.\n   * This event can be used to trigger further interactions or logic in the application.\n   */\n  collapseSelf() {\n    this.dispatchEvent(new CustomEvent('ox-collapse', { bubbles: true, composed: true, detail: this }))\n  }\n\n  /**\n   * Dispatches a custom 'ox-close' event indicating that the menu item should close itself.\n   * This event can be used to trigger further interactions or logic in the application.\n   */\n  close() {\n    this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }))\n  }\n}\n"]}
+{"version":3,"file":"ox-popup-menuitem.js","sourceRoot":"","sources":["../../src/ox-popup-menuitem.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopupMenu } from './ox-popup-menu.js'\n\n/**\n * Custom element representing a menu item within an OxPopup menu.\n * It can contain a label and an optional submenu.\n */\n@customElement('ox-popup-menuitem')\nexport class OxPopupMenuItem extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n        position: relative;\n        align-items: center;\n      }\n\n      [icon] {\n        width: 20px;\n        display: flex;\n        flex-direction: row;\n        padding: 0;\n        margin: 0 var(--spacing-small) 0 0;\n        align-items: center;\n        justify-content: center;\n      }\n\n      [icon] > * {\n        flex: 1;\n      }\n\n      [label] {\n        flex: 1;\n        text-transform: capitalize;\n      }\n\n      ::slotted(*[slot='icon']) {\n        color: var(--ox-popup-menu-color-variant, var(--md-sys-color-on-surface-variant));\n        font-size: var(--icon-size-small);\n      }\n\n      md-icon {\n        display: block;\n        width: 24px;\n        text-align: right;\n        font-size: var(--icon-size-small);\n        color: var(--ox-popup-menu-color-variant, var(--md-sys-color-primary));\n        opacity: 0.7;\n      }\n    `\n  ]\n\n  /**\n   * Property indicating whether the menu item is active or not.\n   * When active, it may show a submenu.\n   */\n  @property({ type: Boolean }) active: boolean = false\n\n  /**\n   * The label to display for the menu item.\n   */\n  @property({ type: String }) label!: string\n\n  @state() _submenu?: OxPopupMenu\n\n  render() {\n    return html`\n      <div icon>\n        <slot name=\"icon\"> </slot>\n      </div>\n      <div label>${this.label}</div>\n\n      ${this._submenu ? html`<md-icon>chevron_right</md-icon>` : html``}\n\n      <slot @slotchange=${this._onslotchange}> </slot>\n    `\n  }\n\n  firstUpdated() {\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', this._onkeydown)\n    this.addEventListener('click', this._onclick)\n  }\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPopupMenuItem, e: MouseEvent) {\n    if (!this._submenu) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const parent = this.closest('ox-popup-menu') as OxPopupMenu\n    if (parent) {\n      parent.setActive(this)\n    }\n\n    this.dispatchEvent(new CustomEvent('select'))\n\n    requestAnimationFrame(() => {\n      this.expand(false)\n    })\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupMenuItem, e: KeyboardEvent) {\n    switch (e.key) {\n      case 'Right':\n      case 'ArrowRight':\n        e.stopPropagation()\n        this.expand(false)\n        break\n\n      case 'Left':\n      case 'ArrowLeft':\n        e.stopPropagation()\n        this.collapseSelf()\n        break\n\n      case 'Enter':\n        if (this._submenu) {\n          e.stopPropagation()\n          this.expand(false)\n        }\n        break\n    }\n  }.bind(this)\n\n  protected _onslotchange: (e: Event) => void = function (this: OxPopupMenuItem, e: Event) {\n    this._submenu = this.querySelector('ox-popup-menu') as OxPopupMenu\n  }.bind(this)\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('active')) {\n      this.updateActive()\n    }\n  }\n\n  updateActive() {\n    if (this.active) {\n      this.expand(true)\n    } else {\n      this.collapse()\n    }\n  }\n\n  /**\n   * Expands the submenu, if it exists.\n   * The submenu is displayed below and to the right of the menu item.\n   *\n   * @param {boolean} silent - If true, the submenu is opened silently without user interaction.\n   */\n  expand(silent: boolean) {\n    if (!this._submenu) {\n      return\n    }\n\n    const top = 0\n    const left = this.clientWidth\n\n    this._submenu.open({ top, left, silent })\n  }\n\n  /**\n   * Collapses the submenu, if it exists.\n   */\n  collapse() {\n    this._submenu?.close()\n  }\n\n  /**\n   * Dispatches a custom 'ox-collapse' event indicating that the menu item should collapse itself.\n   * This event can be used to trigger further interactions or logic in the application.\n   */\n  collapseSelf() {\n    this.dispatchEvent(new CustomEvent('ox-collapse', { bubbles: true, composed: true, detail: this }))\n  }\n\n  /**\n   * Dispatches a custom 'ox-close' event indicating that the menu item should close itself.\n   * This event can be used to trigger further interactions or logic in the application.\n   */\n  close() {\n    this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }))\n  }\n}\n"]}

package/dist/src/ox-popup.js

@@ -14,55 +14,7 @@ import { convertToFixedPosition } from './position-converter.js';
  * @fires ox-collapse - Dispatched when the popup is collapsed.
  */
 let OxPopup = class OxPopup extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.preventCloseOnBlur = false;
-        this.backdrop = false;
-        this.lastActive = document.activeElement;
-        this.removeAfterUse = false;
-        this._onfocusout = function (e) {
-            const to = e.relatedTarget;
-            if (!this.contains(to)) {
-                !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close();
-            }
-        }.bind(this);
-        this._onkeydown = function (e) {
-            e.stopPropagation();
-            switch (e.key) {
-                case 'Esc': // for IE/Edge
-                case 'Escape':
-                    this.close();
-                    break;
-            }
-        }.bind(this);
-        this._onkeyup = function (e) {
-            e.stopPropagation();
-        }.bind(this);
-        this._onmouseup = function (e) {
-            e.stopPropagation();
-        }.bind(this);
-        this._onmousedown = function (e) {
-            e.stopPropagation();
-        }.bind(this);
-        this._oncontextmenu = function (e) {
-            e.stopPropagation();
-            // this.close()
-        }.bind(this);
-        this._onclick = function (e) {
-            e.stopPropagation();
-        }.bind(this);
-        this._onclose = function (e) {
-            this.close();
-        }.bind(this);
-        this._oncollapse = function (e) {
-            e.stopPropagation();
-            this.close();
-        }.bind(this);
-        this._onwindowblur = function (e) {
-            !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close();
-        }.bind(this);
-    }
-    static { this.styles = [
+    static styles = [
         ScrollbarStyles,
         css `
       :host {
@@ -99,13 +51,58 @@ let OxPopup = class OxPopup extends LitElement {
         opacity: 0.5;
       }
     `
-    ]; }
+    ];
+    preventCloseOnBlur = false;
+    backdrop = false;
+    lastActive = document.activeElement;
+    removeAfterUse = false;
     render() {
         return html `
       ${this.backdrop ? html `<div id="backdrop" @click=${() => this.close()}></div>` : nothing}
       <slot></slot>
     `;
     }
+    _onfocusout = function (e) {
+        const to = e.relatedTarget;
+        if (!this.contains(to)) {
+            !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close();
+        }
+    }.bind(this);
+    _onkeydown = function (e) {
+        e.stopPropagation();
+        switch (e.key) {
+            case 'Esc': // for IE/Edge
+            case 'Escape':
+                this.close();
+                break;
+        }
+    }.bind(this);
+    _onkeyup = function (e) {
+        e.stopPropagation();
+    }.bind(this);
+    _onmouseup = function (e) {
+        e.stopPropagation();
+    }.bind(this);
+    _onmousedown = function (e) {
+        e.stopPropagation();
+    }.bind(this);
+    _oncontextmenu = function (e) {
+        e.stopPropagation();
+        // this.close()
+    }.bind(this);
+    _onclick = function (e) {
+        e.stopPropagation();
+    }.bind(this);
+    _onclose = function (e) {
+        this.close();
+    }.bind(this);
+    _oncollapse = function (e) {
+        e.stopPropagation();
+        this.close();
+    }.bind(this);
+    _onwindowblur = function (e) {
+        !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close();
+    }.bind(this);
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('focusout', this._onfocusout);
@@ -273,7 +270,7 @@ let OxPopup = class OxPopup extends LitElement {
         window.addEventListener('blur', this._onwindowblur);
     }
     guaranteeFocus(target) {
-        const focusible = (target || this).querySelector(':host > button, :host > [href], :host > input, :host > select, :host > textarea, :host > [tabindex]:not([tabindex="-1"])');
+        const focusible = (target || this).querySelector(':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex="-1"])');
         if (focusible) {
             ;
             focusible.focus();