@operato/popup 1.13.4 → 1.13.9

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.
 
+### [1.13.9](https://github.com/hatiolab/operato/compare/v1.13.8...v1.13.9) (2024-01-17)
+
+
+### :bug: Bug Fix
+
+* comment for libraries ([f18b096](https://github.com/hatiolab/operato/commit/f18b096a85257d915739af4df9595ee8779297a6))
+
+
+
+### [1.13.7](https://github.com/hatiolab/operato/compare/v1.13.6...v1.13.7) (2024-01-15)
+
+
+### :bug: Bug Fix
+
+* typo event name 'context' => 'contextmenu' ([85cc892](https://github.com/hatiolab/operato/commit/85cc89279fdf4da948e24bb75f51baa286ac969a))
+
+
+
 ### [1.13.4](https://github.com/hatiolab/operato/compare/v1.13.3...v1.13.4) (2024-01-15)
 
 

package/dist/src/ox-floating-overlay.d.ts

@@ -1,26 +1,87 @@
 import '@material/mwc-icon';
 import { LitElement, PropertyValues } from 'lit';
+/**
+ * Custom element for creating floating overlays.
+ * These overlays can have various properties like direction, size, title, and more.
+ * They are often used for modal dialogs, pop-ups, and similar UI elements.
+ */
 export declare class OxFloatingOverlay extends LitElement {
     static styles: import("lit").CSSResult[];
+    /**
+     * A boolean property that determines whether a backdrop should be displayed behind the overlay.
+     * Backdrop provides a semi-transparent background that covers the entire screen when the overlay is open.
+     */
     backdrop?: boolean;
+    /**
+     * A string property that specifies the direction in which the overlay should appear.
+     * Possible values are: 'up', 'down', 'left', or 'right'.
+     */
     direction?: 'up' | 'down' | 'left' | 'right';
+    /**
+     * A string property that reflects the hovering state of the overlay.
+     * Possible values are: 'center', 'edge', or 'next'.
+     */
     hovering?: 'center' | 'edge' | 'next';
+    /**
+     * A string property that specifies the size of the overlay.
+     * Possible values are: 'small', 'medium', or 'large'.
+     */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * A string property that represents the name of the overlay.
+     * This can be used for identification or other purposes.
+     */
     name?: string;
+    /**
+     * A string property that sets the title of the overlay.
+     * The title is typically displayed in the header of the overlay.
+     */
     title: string;
+    /**
+     * A boolean property that determines whether the overlay can be closed by the user.
+     * If set to true, a close button will be displayed in the header.
+     */
     closable?: boolean;
+    /**
+     * An object property that can hold custom properties for the template of the overlay.
+     * These properties can be used to customize the template's behavior.
+     */
     templateProperties: any;
+    /**
+     * An object property that can hold information related to help or assistance for the overlay.
+     * This information may be used to provide additional guidance to users.
+     */
     help: any;
+    /**
+     * A boolean property that determines whether the overlay is considered historical.
+     * Historical overlays may have specific behavior or interactions, such as navigating back in history.
+     */
     historical?: boolean;
+    /**
+     * A boolean property that determines whether the overlay can be moved by dragging.
+     * If set to true, the overlay can be repositioned by dragging its header.
+     */
     movable?: boolean;
+    /**
+     * An object property that can hold information related to a search feature within the overlay.
+     * It can include properties like 'value', 'handler', and 'placeholder'.
+     */
     search?: {
         value?: string;
         handler?: (instance: any, value: string) => void;
         placeholder?: string;
     };
+    /**
+     * An object property that can hold information related to a filter feature within the overlay.
+     * It can include a 'handler' function for filtering content.
+     */
     filter?: {
         handler?: (instance: any) => void;
     };
+    /**
+     * A numeric property that specifies the z-index of the overlay.
+     * The z-index determines the stacking order of the overlay in relation to other elements on the page.
+     */
     zIndex?: number;
     private dragStart?;
     private dragEndHandler;
@@ -35,6 +96,10 @@ export declare class OxFloatingOverlay extends LitElement {
     onDragStart(e: Event): false | undefined;
     onDragMove(e: Event): boolean;
     onDragEnd(e: Event): void;
+    /**
+     * A method that closes the overlay by removing it from its parent node in the DOM.
+     * When called, this method removes the overlay element, effectively hiding it from the user interface.
+     */
     close(): void;
     onClose(e: Event, escape?: boolean): true | undefined;
 }

package/dist/src/ox-floating-overlay.js

@@ -24,13 +24,38 @@ function getPoint(e) {
         return;
     }
 }
+/**
+ * Custom element for creating floating overlays.
+ * These overlays can have various properties like direction, size, title, and more.
+ * They are often used for modal dialogs, pop-ups, and similar UI elements.
+ */
 let OxFloatingOverlay = class OxFloatingOverlay extends LitElement {
     constructor() {
         super(...arguments);
+        /**
+         * A boolean property that determines whether a backdrop should be displayed behind the overlay.
+         * Backdrop provides a semi-transparent background that covers the entire screen when the overlay is open.
+         */
         this.backdrop = false;
+        /**
+         * A string property that sets the title of the overlay.
+         * The title is typically displayed in the header of the overlay.
+         */
         this.title = '';
+        /**
+         * A boolean property that determines whether the overlay can be closed by the user.
+         * If set to true, a close button will be displayed in the header.
+         */
         this.closable = false;
+        /**
+         * A boolean property that determines whether the overlay is considered historical.
+         * Historical overlays may have specific behavior or interactions, such as navigating back in history.
+         */
         this.historical = false;
+        /**
+         * A boolean property that determines whether the overlay can be moved by dragging.
+         * If set to true, the overlay can be repositioned by dragging its header.
+         */
         this.movable = false;
         this.dragEndHandler = this.onDragEnd.bind(this);
         this.dragMoveHandler = this.onDragMove.bind(this);
@@ -215,6 +240,10 @@ let OxFloatingOverlay = class OxFloatingOverlay extends LitElement {
             delete this.dragStart;
         }
     }
+    /**
+     * A method that closes the overlay by removing it from its parent node in the DOM.
+     * When called, this method removes the overlay element, effectively hiding it from the user interface.
+     */
     close() {
         var _a;
         (_a = this.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this);

package/dist/src/ox-floating-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-floating-overlay.js","sourceRoot":"","sources":["../../src/ox-floating-overlay.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isHandheldDevice } from '@operato/utils'\n\nfunction getPoint(e: Event): { x: number; y: number } | undefined {\n  if ((e as MouseEvent).button == 0) {\n    return {\n      x: (e as MouseEvent).clientX,\n      y: (e as MouseEvent).clientY\n    }\n  } else if ((e as TouchEvent).touches?.length == 1) {\n    const touch = (e as TouchEvent).touches[0]\n    return {\n      x: touch.clientX,\n      y: touch.clientY\n    }\n  } else {\n    return\n  }\n}\n\n@customElement('ox-floating-overlay')\nexport class OxFloatingOverlay extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      /* for layout style */\n      :host {\n        position: relative;\n        z-index: var(--z-index, 10);\n      }\n\n      :host([hovering='edge']) {\n        /* edge hovering 인 경우에는 상위 relative position 크기와 위치를 반영한다. */\n        position: initial;\n      }\n\n      #backdrop {\n        position: fixed;\n        left: 0;\n        top: 0;\n\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n\n        background-color: var(--overlay-background-color);\n      }\n\n      [overlayed] {\n        position: absolute;\n\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        background: transparent;\n      }\n\n      [overlayed][hovering='center'] {\n        position: fixed;\n\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n\n        opacity: 0;\n      }\n\n      [overlayed][hovering='center'][opened] {\n        opacity: 1;\n        transition: opacity 0.3s ease-in;\n      }\n\n      [hovering='center'] {\n        width: var(--overlay-center-normal-width, 60%);\n        height: var(--overlay-center-normal-height, 60%);\n      }\n\n      [hovering='center'][size='small'] {\n        width: var(--overlay-center-small-width, 40%);\n        height: var(--overlay-center-small-height, 40%);\n      }\n\n      [hovering='center'][size='large'] {\n        width: var(--overlay-center-large-width, 100%);\n        height: var(--overlay-center-large-height, 100%);\n      }\n\n      [header] {\n        --help-icon-color: #fff;\n        --help-icon-hover-color: #fff;\n\n        pointer-events: initial;\n      }\n\n      [content] {\n        flex: 1;\n        overflow: hidden;\n      }\n\n      ::slotted(*) {\n        box-sizing: border-box;\n        pointer-events: initial;\n      }\n\n      [hovering='center'] [content] ::slotted(*) {\n        width: 100%;\n        height: 100%;\n      }\n      [direction='up'],\n      [direction='down'] {\n        width: 100%;\n\n        max-height: 0;\n        transition: max-height 0.7s ease-in;\n      }\n      [direction='up'] {\n        bottom: 0;\n      }\n      [direction='down'] {\n        top: 0;\n      }\n\n      [direction='up'][opened],\n      [direction='down'][opened] {\n        max-height: 100vh;\n        max-height: 100dvh;\n      }\n\n      [settled][direction='down'] [content],\n      [settled][direction='up'] [content] {\n        overflow-y: auto;\n      }\n\n      [direction='left'],\n      [direction='right'] {\n        height: 100%;\n\n        max-width: 0;\n        transition: max-width 0.5s ease-in;\n      }\n      [direction='left'] {\n        right: 0;\n      }\n      [direction='right'] {\n        left: 0;\n      }\n\n      [direction='left'][opened],\n      [direction='right'][opened] {\n        max-width: 100vw;\n      }\n\n      [settled][direction='left'] [content],\n      [settled][direction='right'] [content] {\n        overflow-x: auto;\n      }\n\n      @media screen and (max-width: 460px) {\n        [direction='up'],\n        [direction='down'] {\n          max-height: 100vh;\n          max-height: 100dvh;\n        }\n\n        [direction='left'],\n        [direction='right'] {\n          max-width: 100vw;\n        }\n      }\n    `,\n    css`\n      /* for header style */\n      [header] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n\n        background-color: var(--overlay-header-background-color);\n        color: var(--overlay-header-color);\n      }\n\n      slot[name='header'] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: center;\n      }\n\n      [name='header']::slotted(*) {\n        margin: 0 auto;\n      }\n\n      [name='header'] > h1 {\n        text-transform: capitalize;\n        font: var(--overlay-header-font);\n      }\n\n      [historyback] {\n        margin-left: 10px;\n        margin-right: auto;\n      }\n\n      [close] {\n        margin-left: auto;\n        margin-right: 10px;\n      }\n\n      [historyback],\n      [close] {\n        display: none;\n      }\n\n      [closable][close] {\n        display: block;\n      }\n\n      [search] ox-help-icon {\n        color: var(--secondary-color);\n      }\n\n      [search] {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n\n        align-self: center;\n        color: var(--secondary-color);\n        background-color: var(--opacity-light-color);\n        border-radius: 999em;\n        padding: 0 10px;\n      }\n\n      [search] > * {\n        align-self: center;\n      }\n\n      @media screen and (max-width: 460px) {\n        [closable][historyback] {\n          display: block;\n        }\n\n        [closable][close] {\n          display: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) backdrop?: boolean = false\n  @property({ type: String }) direction?: 'up' | 'down' | 'left' | 'right'\n  @property({ type: String, reflect: true }) hovering?: 'center' | 'edge' | 'next'\n  @property({ type: String }) size?: 'small' | 'medium' | 'large'\n  @property({ type: String }) name?: string\n  @property({ type: String }) title: string = ''\n  @property({ type: Boolean }) closable?: boolean = false\n  @property({ type: Object }) templateProperties: any\n  @property({ type: Object }) help: any\n  @property({ type: Boolean }) historical?: boolean = false\n  @property({ type: Boolean }) movable?: boolean = false\n  @property({ type: Object }) search?: {\n    value?: string\n    handler?: (instance: any, value: string) => void\n    placeholder?: string\n  }\n  @property({ type: Object }) filter?: { handler?: (instance: any) => void }\n  @property({ type: Number, attribute: 'z-index' }) zIndex?: number\n\n  private dragStart?: { x: number; y: number }\n  private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n  private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n\n  @query('[overlayed]') overlayed!: HTMLDivElement\n  @query('[content]') content!: HTMLDivElement\n\n  render() {\n    const direction = this.hovering == 'center' ? undefined : this.direction\n\n    const { value = '', handler: searchHandler, placeholder = '', autofocus = true } = this.search || ({} as any)\n    const { handler: filterHandler } = this.filter || ({} as any)\n\n    const searchable = typeof searchHandler == 'function'\n    const filterable = typeof filterHandler == 'function'\n\n    return html`\n      ${Boolean(this.backdrop)\n        ? html`\n            <div\n              id=\"backdrop\"\n              ?hidden=${!this.backdrop}\n              @click=${(e: Event) => this.onClose(e, true /* escape */)}\n            ></div>\n          `\n        : html``}\n\n      <div\n        overlayed\n        hovering=${this.hovering || 'center'}\n        direction=${ifDefined(direction)}\n        size=${this.size || 'medium'}\n        @close-overlay=${(e: Event) => {\n          e.stopPropagation()\n          this.onClose(e)\n        }}\n        @transitionstart=${(e: Event) => {\n          /* to hide scrollbar during transition */\n          ;(e.target as HTMLElement).removeAttribute('settled')\n        }}\n        @transitionend=${(e: Event) => {\n          ;(e.target as HTMLElement).setAttribute('settled', '')\n        }}\n        @click=${(e: MouseEvent) => {\n          if (this.backdrop && e.target === this.content) {\n            this.onClose(e, true /* escape */)\n          }\n        }}\n      >\n        <div\n          header\n          @mousedown=${this.onDragStart.bind(this)}\n          @touchstart=${this.onDragStart.bind(this)}\n          draggable=\"false\"\n        >\n          <mwc-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} historyback>arrow_back</mwc-icon>\n          ${this.movable ? html`<mwc-icon>drag_indicator</mwc-icon>` : html``}\n          <slot name=\"header\">\n            ${this.title || this.closable\n              ? html`\n                  <h1>\n                    ${this.title || ''}&nbsp;${this.help\n                      ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>`\n                      : html``}\n                  </h1>\n                `\n              : html``}\n            ${searchable || filterable\n              ? html`\n                  <div search>\n                    ${searchable\n                      ? html` <ox-input-search\n                          .placeholder=${placeholder}\n                          .value=${value || ''}\n                          ?autofocus=${autofocus}\n                          @change=${(e: Event) => {\n                            searchHandler(this.firstElementChild, (e.target as any).value)\n                          }}\n                        ></ox-input-search>`\n                      : html``}\n                    ${this.help && searchable ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>` : html``}\n                    ${filterable\n                      ? html`<mwc-icon @click=${(e: MouseEvent) => filterHandler(this.firstElementChild)}\n                          >tune</mwc-icon\n                        >`\n                      : html``}\n                  </div>\n                `\n              : html``}\n            ${this.help && !searchable && !this.title /* help only */\n              ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>`\n              : html``}\n          </slot>\n          <mwc-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} close>close</mwc-icon>\n        </div>\n\n        <div content>\n          <slot> </slot>\n        </div>\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('templateProperties') && this.templateProperties) {\n      var template = this.firstElementChild\n      if (template) {\n        for (let prop in this.templateProperties) {\n          //@ts-ignore\n          template[prop] = this.templateProperties[prop]\n        }\n      }\n    }\n  }\n\n  firstUpdated() {\n    if (this.zIndex) {\n      this.style.setProperty('--z-index', String(this.zIndex))\n    }\n\n    requestAnimationFrame(() => {\n      /* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */\n      this.overlayed?.setAttribute('opened', 'true')\n    })\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.movable = this.movable && !isHandheldDevice()\n\n    if (this.movable) {\n      document.addEventListener('mouseup', this.dragEndHandler)\n      document.addEventListener('touchend', this.dragEndHandler)\n      document.addEventListener('touchcancel', this.dragEndHandler)\n      document.addEventListener('mousemove', this.dragMoveHandler)\n      document.addEventListener('touchmove', this.dragMoveHandler)\n    }\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('overlay-closed', {\n        detail: this.name\n      })\n    )\n\n    if (this.movable) {\n      document.removeEventListener('mouseup', this.dragEndHandler!)\n      document.removeEventListener('touchend', this.dragEndHandler!)\n      document.removeEventListener('touchcancel', this.dragEndHandler!)\n      document.removeEventListener('mousemove', this.dragMoveHandler!)\n      document.removeEventListener('touchmove', this.dragMoveHandler!)\n    }\n\n    super.disconnectedCallback()\n  }\n\n  onDragStart(e: Event) {\n    if (!this.movable) {\n      return\n    }\n\n    const point = getPoint(e)\n\n    if (point) {\n      this.dragStart = point\n      e.stopPropagation()\n      return false\n    }\n  }\n\n  onDragMove(e: Event) {\n    if (!this.movable || !this.dragStart) {\n      return false\n    }\n\n    const point = getPoint(e)\n\n    if (!point) {\n      return false\n    }\n\n    e.stopPropagation()\n    e.preventDefault()\n\n    const dragStart = point\n    var { x, y } = point\n\n    x -= this.dragStart.x\n    y -= this.dragStart.y\n\n    this.dragStart = dragStart\n\n    const overlayed = this.overlayed\n\n    var boundingRect = overlayed.getBoundingClientRect()\n\n    overlayed.style.left =\n      Math.min(document.body.offsetWidth - 40, Math.max(40 - overlayed.offsetWidth, boundingRect.left + x)) + 'px'\n    overlayed.style.top = Math.min(document.body.offsetHeight - 40, Math.max(0, boundingRect.top + y)) + 'px'\n\n    overlayed.style.transform = 'initial'\n\n    return false\n  }\n\n  onDragEnd(e: Event) {\n    if (this.movable && this.dragStart) {\n      e.stopPropagation()\n      e.preventDefault()\n\n      delete this.dragStart\n    }\n  }\n\n  close() {\n    this.parentNode?.removeChild(this)\n  }\n\n  onClose(e: Event, escape?: boolean) {\n    e.stopPropagation()\n    /* 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. */\n\n    if (this.historical) {\n      var state = history.state\n      var overlay = (state || {}).overlay\n\n      if (!overlay || overlay.name !== this.name) {\n        return\n      }\n\n      /* Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */\n      if (escape && !overlay.escapable) {\n        return true\n      }\n\n      history.back()\n    } else {\n      this.close()\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-floating-overlay.js","sourceRoot":"","sources":["../../src/ox-floating-overlay.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isHandheldDevice } from '@operato/utils'\n\nfunction getPoint(e: Event): { x: number; y: number } | undefined {\n  if ((e as MouseEvent).button == 0) {\n    return {\n      x: (e as MouseEvent).clientX,\n      y: (e as MouseEvent).clientY\n    }\n  } else if ((e as TouchEvent).touches?.length == 1) {\n    const touch = (e as TouchEvent).touches[0]\n    return {\n      x: touch.clientX,\n      y: touch.clientY\n    }\n  } else {\n    return\n  }\n}\n\n/**\n * Custom element for creating floating overlays.\n * These overlays can have various properties like direction, size, title, and more.\n * They are often used for modal dialogs, pop-ups, and similar UI elements.\n */\n@customElement('ox-floating-overlay')\nexport class OxFloatingOverlay extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      /* for layout style */\n      :host {\n        position: relative;\n        z-index: var(--z-index, 10);\n      }\n\n      :host([hovering='edge']) {\n        /* edge hovering 인 경우에는 상위 relative position 크기와 위치를 반영한다. */\n        position: initial;\n      }\n\n      #backdrop {\n        position: fixed;\n        left: 0;\n        top: 0;\n\n        width: 100vw;\n        height: 100vh;\n        height: 100dvh;\n\n        background-color: var(--overlay-background-color);\n      }\n\n      [overlayed] {\n        position: absolute;\n\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        background: transparent;\n      }\n\n      [overlayed][hovering='center'] {\n        position: fixed;\n\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n\n        opacity: 0;\n      }\n\n      [overlayed][hovering='center'][opened] {\n        opacity: 1;\n        transition: opacity 0.3s ease-in;\n      }\n\n      [hovering='center'] {\n        width: var(--overlay-center-normal-width, 60%);\n        height: var(--overlay-center-normal-height, 60%);\n      }\n\n      [hovering='center'][size='small'] {\n        width: var(--overlay-center-small-width, 40%);\n        height: var(--overlay-center-small-height, 40%);\n      }\n\n      [hovering='center'][size='large'] {\n        width: var(--overlay-center-large-width, 100%);\n        height: var(--overlay-center-large-height, 100%);\n      }\n\n      [header] {\n        --help-icon-color: #fff;\n        --help-icon-hover-color: #fff;\n\n        pointer-events: initial;\n      }\n\n      [content] {\n        flex: 1;\n        overflow: hidden;\n      }\n\n      ::slotted(*) {\n        box-sizing: border-box;\n        pointer-events: initial;\n      }\n\n      [hovering='center'] [content] ::slotted(*) {\n        width: 100%;\n        height: 100%;\n      }\n      [direction='up'],\n      [direction='down'] {\n        width: 100%;\n\n        max-height: 0;\n        transition: max-height 0.7s ease-in;\n      }\n      [direction='up'] {\n        bottom: 0;\n      }\n      [direction='down'] {\n        top: 0;\n      }\n\n      [direction='up'][opened],\n      [direction='down'][opened] {\n        max-height: 100vh;\n        max-height: 100dvh;\n      }\n\n      [settled][direction='down'] [content],\n      [settled][direction='up'] [content] {\n        overflow-y: auto;\n      }\n\n      [direction='left'],\n      [direction='right'] {\n        height: 100%;\n\n        max-width: 0;\n        transition: max-width 0.5s ease-in;\n      }\n      [direction='left'] {\n        right: 0;\n      }\n      [direction='right'] {\n        left: 0;\n      }\n\n      [direction='left'][opened],\n      [direction='right'][opened] {\n        max-width: 100vw;\n      }\n\n      [settled][direction='left'] [content],\n      [settled][direction='right'] [content] {\n        overflow-x: auto;\n      }\n\n      @media screen and (max-width: 460px) {\n        [direction='up'],\n        [direction='down'] {\n          max-height: 100vh;\n          max-height: 100dvh;\n        }\n\n        [direction='left'],\n        [direction='right'] {\n          max-width: 100vw;\n        }\n      }\n    `,\n    css`\n      /* for header style */\n      [header] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n\n        background-color: var(--overlay-header-background-color);\n        color: var(--overlay-header-color);\n      }\n\n      slot[name='header'] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: center;\n      }\n\n      [name='header']::slotted(*) {\n        margin: 0 auto;\n      }\n\n      [name='header'] > h1 {\n        text-transform: capitalize;\n        font: var(--overlay-header-font);\n      }\n\n      [historyback] {\n        margin-left: 10px;\n        margin-right: auto;\n      }\n\n      [close] {\n        margin-left: auto;\n        margin-right: 10px;\n      }\n\n      [historyback],\n      [close] {\n        display: none;\n      }\n\n      [closable][close] {\n        display: block;\n      }\n\n      [search] ox-help-icon {\n        color: var(--secondary-color);\n      }\n\n      [search] {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n\n        align-self: center;\n        color: var(--secondary-color);\n        background-color: var(--opacity-light-color);\n        border-radius: 999em;\n        padding: 0 10px;\n      }\n\n      [search] > * {\n        align-self: center;\n      }\n\n      @media screen and (max-width: 460px) {\n        [closable][historyback] {\n          display: block;\n        }\n\n        [closable][close] {\n          display: none;\n        }\n      }\n    `\n  ]\n\n  /**\n   * A boolean property that determines whether a backdrop should be displayed behind the overlay.\n   * Backdrop provides a semi-transparent background that covers the entire screen when the overlay is open.\n   */\n  @property({ type: Boolean }) backdrop?: boolean = false\n\n  /**\n   * A string property that specifies the direction in which the overlay should appear.\n   * Possible values are: 'up', 'down', 'left', or 'right'.\n   */\n  @property({ type: String }) direction?: 'up' | 'down' | 'left' | 'right'\n\n  /**\n   * A string property that reflects the hovering state of the overlay.\n   * Possible values are: 'center', 'edge', or 'next'.\n   */\n  @property({ type: String, reflect: true }) hovering?: 'center' | 'edge' | 'next'\n\n  /**\n   * A string property that specifies the size of the overlay.\n   * Possible values are: 'small', 'medium', or 'large'.\n   */\n  @property({ type: String }) size?: 'small' | 'medium' | 'large'\n\n  /**\n   * A string property that represents the name of the overlay.\n   * This can be used for identification or other purposes.\n   */\n  @property({ type: String }) name?: string\n\n  /**\n   * A string property that sets the title of the overlay.\n   * The title is typically displayed in the header of the overlay.\n   */\n  @property({ type: String }) title: string = ''\n\n  /**\n   * A boolean property that determines whether the overlay can be closed by the user.\n   * If set to true, a close button will be displayed in the header.\n   */\n  @property({ type: Boolean }) closable?: boolean = false\n\n  /**\n   * An object property that can hold custom properties for the template of the overlay.\n   * These properties can be used to customize the template's behavior.\n   */\n  @property({ type: Object }) templateProperties: any\n\n  /**\n   * An object property that can hold information related to help or assistance for the overlay.\n   * This information may be used to provide additional guidance to users.\n   */\n  @property({ type: Object }) help: any\n\n  /**\n   * A boolean property that determines whether the overlay is considered historical.\n   * Historical overlays may have specific behavior or interactions, such as navigating back in history.\n   */\n  @property({ type: Boolean }) historical?: boolean = false\n\n  /**\n   * A boolean property that determines whether the overlay can be moved by dragging.\n   * If set to true, the overlay can be repositioned by dragging its header.\n   */\n  @property({ type: Boolean }) movable?: boolean = false\n\n  /**\n   * An object property that can hold information related to a search feature within the overlay.\n   * It can include properties like 'value', 'handler', and 'placeholder'.\n   */\n  @property({ type: Object }) search?: {\n    value?: string\n    handler?: (instance: any, value: string) => void\n    placeholder?: string\n  }\n\n  /**\n   * An object property that can hold information related to a filter feature within the overlay.\n   * It can include a 'handler' function for filtering content.\n   */\n  @property({ type: Object }) filter?: { handler?: (instance: any) => void }\n\n  /**\n   * A numeric property that specifies the z-index of the overlay.\n   * The z-index determines the stacking order of the overlay in relation to other elements on the page.\n   */\n  @property({ type: Number, attribute: 'z-index' }) zIndex?: number\n\n  private dragStart?: { x: number; y: number }\n  private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n  private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n\n  @query('[overlayed]') overlayed!: HTMLDivElement\n  @query('[content]') content!: HTMLDivElement\n\n  render() {\n    const direction = this.hovering == 'center' ? undefined : this.direction\n\n    const { value = '', handler: searchHandler, placeholder = '', autofocus = true } = this.search || ({} as any)\n    const { handler: filterHandler } = this.filter || ({} as any)\n\n    const searchable = typeof searchHandler == 'function'\n    const filterable = typeof filterHandler == 'function'\n\n    return html`\n      ${Boolean(this.backdrop)\n        ? html`\n            <div\n              id=\"backdrop\"\n              ?hidden=${!this.backdrop}\n              @click=${(e: Event) => this.onClose(e, true /* escape */)}\n            ></div>\n          `\n        : html``}\n\n      <div\n        overlayed\n        hovering=${this.hovering || 'center'}\n        direction=${ifDefined(direction)}\n        size=${this.size || 'medium'}\n        @close-overlay=${(e: Event) => {\n          e.stopPropagation()\n          this.onClose(e)\n        }}\n        @transitionstart=${(e: Event) => {\n          /* to hide scrollbar during transition */\n          ;(e.target as HTMLElement).removeAttribute('settled')\n        }}\n        @transitionend=${(e: Event) => {\n          ;(e.target as HTMLElement).setAttribute('settled', '')\n        }}\n        @click=${(e: MouseEvent) => {\n          if (this.backdrop && e.target === this.content) {\n            this.onClose(e, true /* escape */)\n          }\n        }}\n      >\n        <div\n          header\n          @mousedown=${this.onDragStart.bind(this)}\n          @touchstart=${this.onDragStart.bind(this)}\n          draggable=\"false\"\n        >\n          <mwc-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} historyback>arrow_back</mwc-icon>\n          ${this.movable ? html`<mwc-icon>drag_indicator</mwc-icon>` : html``}\n          <slot name=\"header\">\n            ${this.title || this.closable\n              ? html`\n                  <h1>\n                    ${this.title || ''}&nbsp;${this.help\n                      ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>`\n                      : html``}\n                  </h1>\n                `\n              : html``}\n            ${searchable || filterable\n              ? html`\n                  <div search>\n                    ${searchable\n                      ? html` <ox-input-search\n                          .placeholder=${placeholder}\n                          .value=${value || ''}\n                          ?autofocus=${autofocus}\n                          @change=${(e: Event) => {\n                            searchHandler(this.firstElementChild, (e.target as any).value)\n                          }}\n                        ></ox-input-search>`\n                      : html``}\n                    ${this.help && searchable ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>` : html``}\n                    ${filterable\n                      ? html`<mwc-icon @click=${(e: MouseEvent) => filterHandler(this.firstElementChild)}\n                          >tune</mwc-icon\n                        >`\n                      : html``}\n                  </div>\n                `\n              : html``}\n            ${this.help && !searchable && !this.title /* help only */\n              ? html`<ox-help-icon .topic=${this.help}></ox-help-icon>`\n              : html``}\n          </slot>\n          <mwc-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} close>close</mwc-icon>\n        </div>\n\n        <div content>\n          <slot> </slot>\n        </div>\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('templateProperties') && this.templateProperties) {\n      var template = this.firstElementChild\n      if (template) {\n        for (let prop in this.templateProperties) {\n          //@ts-ignore\n          template[prop] = this.templateProperties[prop]\n        }\n      }\n    }\n  }\n\n  firstUpdated() {\n    if (this.zIndex) {\n      this.style.setProperty('--z-index', String(this.zIndex))\n    }\n\n    requestAnimationFrame(() => {\n      /* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */\n      this.overlayed?.setAttribute('opened', 'true')\n    })\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.movable = this.movable && !isHandheldDevice()\n\n    if (this.movable) {\n      document.addEventListener('mouseup', this.dragEndHandler)\n      document.addEventListener('touchend', this.dragEndHandler)\n      document.addEventListener('touchcancel', this.dragEndHandler)\n      document.addEventListener('mousemove', this.dragMoveHandler)\n      document.addEventListener('touchmove', this.dragMoveHandler)\n    }\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('overlay-closed', {\n        detail: this.name\n      })\n    )\n\n    if (this.movable) {\n      document.removeEventListener('mouseup', this.dragEndHandler!)\n      document.removeEventListener('touchend', this.dragEndHandler!)\n      document.removeEventListener('touchcancel', this.dragEndHandler!)\n      document.removeEventListener('mousemove', this.dragMoveHandler!)\n      document.removeEventListener('touchmove', this.dragMoveHandler!)\n    }\n\n    super.disconnectedCallback()\n  }\n\n  onDragStart(e: Event) {\n    if (!this.movable) {\n      return\n    }\n\n    const point = getPoint(e)\n\n    if (point) {\n      this.dragStart = point\n      e.stopPropagation()\n      return false\n    }\n  }\n\n  onDragMove(e: Event) {\n    if (!this.movable || !this.dragStart) {\n      return false\n    }\n\n    const point = getPoint(e)\n\n    if (!point) {\n      return false\n    }\n\n    e.stopPropagation()\n    e.preventDefault()\n\n    const dragStart = point\n    var { x, y } = point\n\n    x -= this.dragStart.x\n    y -= this.dragStart.y\n\n    this.dragStart = dragStart\n\n    const overlayed = this.overlayed\n\n    var boundingRect = overlayed.getBoundingClientRect()\n\n    overlayed.style.left =\n      Math.min(document.body.offsetWidth - 40, Math.max(40 - overlayed.offsetWidth, boundingRect.left + x)) + 'px'\n    overlayed.style.top = Math.min(document.body.offsetHeight - 40, Math.max(0, boundingRect.top + y)) + 'px'\n\n    overlayed.style.transform = 'initial'\n\n    return false\n  }\n\n  onDragEnd(e: Event) {\n    if (this.movable && this.dragStart) {\n      e.stopPropagation()\n      e.preventDefault()\n\n      delete this.dragStart\n    }\n  }\n\n  /**\n   * A method that closes the overlay by removing it from its parent node in the DOM.\n   * When called, this method removes the overlay element, effectively hiding it from the user interface.\n   */\n  close() {\n    this.parentNode?.removeChild(this)\n  }\n\n  onClose(e: Event, escape?: boolean) {\n    e.stopPropagation()\n    /* 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. */\n\n    if (this.historical) {\n      var state = history.state\n      var overlay = (state || {}).overlay\n\n      if (!overlay || overlay.name !== this.name) {\n        return\n      }\n\n      /* Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */\n      if (escape && !overlay.escapable) {\n        return true\n      }\n\n      history.back()\n    } else {\n      this.close()\n    }\n  }\n}\n"]}

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

@@ -1,11 +1,32 @@
 import '@material/mwc-icon';
 import { PropertyValues } from 'lit';
 import { OxPopup } from './ox-popup';
+/**
+ * A custom element representing a list-like popup menu.
+ */
 export declare class OxPopupList extends OxPopup {
     static styles: import("lit").CSSResult[];
+    /**
+     * A boolean property that, when set to true, allows multiple options to be selected in the popup list.
+     * @type {boolean}
+     */
     multiple: boolean;
+    /**
+     * An optional attribute that specifies the name of the attribute used to mark selected options in the list.
+     * @type {string|undefined}
+     */
     attrSelected?: string;
+    /**
+     * A boolean property that, when set to true, enables the search functionality in the popup list.
+     * Users can search/filter options by typing in a search bar.
+     * @type {boolean|undefined}
+     */
     withSearch?: boolean;
+    /**
+     * The value(s) of the selected option(s) in the popup list.
+     * This property can be a string or an array of strings, depending on whether multiple selections are allowed.
+     * @type {string|string[]|undefined}
+     */
     value?: string | string[];
     activeIndex?: number;
     searchKeyword?: string;
@@ -19,9 +40,32 @@ export declare class OxPopupList extends OxPopup {
     protected _onfocusout: (e: FocusEvent) => void;
     protected _onclick: (e: MouseEvent) => void;
     updated(changes: PropertyValues<this>): void;
+    /**
+     * Retrieves the labels of the selected options in the popup list.
+     * If multiple selections are allowed, an array of labels is returned. Otherwise, a single label is returned.
+     * @returns {string|string[]} The label(s) of the selected option(s).
+     */
     getSelectedLabels(): string | string[];
+    /**
+     * Handles the selection of options in the popup list and dispatches a 'select' event with the selected value(s).
+     * If multiple selections are allowed, an array of selected values is dispatched; otherwise, a single value is dispatched.
+     * Also, it checks whether the selected option should remain alive and whether the popup should be closed.
+     */
     select(): Promise<void>;
+    /**
+     * Sets the active option within the popup list based on the given index or Element.
+     * If 'withSelect' is true, it also manages the selection state of the option.
+     *
+     * @param {number | Element | null} active - The index or Element of the option to set as active.
+     * @param {boolean | undefined} withSelect - Indicates whether to manage the selection state of the option.
+     */
     setActive(active: number | Element | null, withSelect?: boolean): void;
+    /**
+     * Overrides the 'open' method of the base class 'OxPopup' to set the initial active index
+     * when the popup list is opened. It ensures that an option is initially selected for user interaction.
+     *
+     * @param {object} params - The parameters for opening the popup, including position and size.
+     */
     open(params: {
         left?: number;
         top?: number;
@@ -31,6 +75,11 @@ export declare class OxPopupList extends OxPopup {
         height?: string;
         silent?: boolean;
     }): 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
+     * or logic in the application.
+     */
     close(): void;
     /**
      * Open OxPopup

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

@@ -16,9 +16,16 @@ function guaranteeFocus(element) {
     const closest = element.closest('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
     closest === null || closest === void 0 ? void 0 : closest.focus();
 }
+/**
+ * A custom element representing a list-like popup menu.
+ */
 let OxPopupList = class OxPopupList extends OxPopup {
     constructor() {
         super(...arguments);
+        /**
+         * A boolean property that, when set to true, allows multiple options to be selected in the popup list.
+         * @type {boolean}
+         */
         this.multiple = false;
         this.nothingToSelect = false;
         this._onkeydown = function (e) {
@@ -151,6 +158,11 @@ let OxPopupList = class OxPopupList extends OxPopup {
             });
         }
     }
+    /**
+     * Retrieves the labels of the selected options in the popup list.
+     * If multiple selections are allowed, an array of labels is returned. Otherwise, a single label is returned.
+     * @returns {string|string[]} The label(s) of the selected option(s).
+     */
     getSelectedLabels() {
         const options = Array.from(this.querySelectorAll(':scope > [option]'));
         const selected = options
@@ -158,6 +170,11 @@ let OxPopupList = class OxPopupList extends OxPopup {
             .map(option => option.textContent || '');
         return this.multiple ? selected : selected[0];
     }
+    /**
+     * Handles the selection of options in the popup list and dispatches a 'select' event with the selected value(s).
+     * If multiple selections are allowed, an array of selected values is dispatched; otherwise, a single value is dispatched.
+     * Also, it checks whether the selected option should remain alive and whether the popup should be closed.
+     */
     async select() {
         await this.updateComplete;
         const options = Array.from(this.querySelectorAll(':scope > [option]'));
@@ -174,6 +191,13 @@ let OxPopupList = class OxPopupList extends OxPopup {
             this.close();
         }
     }
+    /**
+     * Sets the active option within the popup list based on the given index or Element.
+     * If 'withSelect' is true, it also manages the selection state of the option.
+     *
+     * @param {number | Element | null} active - The index or Element of the option to set as active.
+     * @param {boolean | undefined} withSelect - Indicates whether to manage the selection state of the option.
+     */
     setActive(active, withSelect) {
         var options = Array.from(this.querySelectorAll('[option]:not([hidden])'));
         if (this.withSearch) {
@@ -202,6 +226,12 @@ let OxPopupList = class OxPopupList extends OxPopup {
             }
         });
     }
+    /**
+     * Overrides the 'open' method of the base class 'OxPopup' to set the initial active index
+     * when the popup list is opened. It ensures that an option is initially selected for user interaction.
+     *
+     * @param {object} params - The parameters for opening the popup, including position and size.
+     */
     open(params) {
         super.open(params);
         if (this.activeIndex === undefined) {
@@ -211,6 +241,11 @@ let OxPopupList = class OxPopupList extends OxPopup {
             this.setActive(this.activeIndex);
         }
     }
+    /**
+     * 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
+     * or logic in the application.
+     */
     close() {
         if (this.hasAttribute('active')) {
             this.dispatchEvent(new CustomEvent('close', {

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/mwc-icon'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopup } from './ox-popup'\n\nfunction guaranteeFocus(element: HTMLElement) {\n  // 1. 옵션 엘리먼트의 하위 첫번째 focusible 엘리먼트에 focus 기회를 준다.\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. 자신을 포함해서 가장 가까운 부모에게 focus 기회를 준다.\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@customElement('ox-popup-list')\nexport class OxPopupList 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(--theme-white-color, #fff);\n        z-index: 100;\n        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n        padding: 4px 0;\n        color: var(--theme-primary-text-color, #3c3938);\n        font: normal 14px 'Roboto', sans-serif;\n      }\n\n      :host([active]) {\n        display: flex;\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: 5px 10px;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n        cursor: pointer;\n        outline: none;\n      }\n\n      ::slotted(*:focus) {\n        outline: none;\n      }\n\n      ::slotted([option][active]),\n      ::slotted([option]:hover) {\n        background-color: #f6f6f6;\n      }\n\n      ::slotted([option][selected]) {\n        border-left: 3px solid var(--primary-color, #38a25b);\n        font-weight: bold;\n      }\n\n      ::slotted([separator]) {\n        height: 1px;\n        width: 100%;\n        padding: 0;\n        background-color: rgba(0, 0, 0, 0.15);\n      }\n      ::slotted([option] > input) {\n        border: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.3));\n      }\n\n      ::slotted([hidden]) {\n        display: none;\n      }\n\n      [search] {\n        display: flex;\n        position: relative;\n        align-items: center;\n        padding: 5px 10px;\n\n        --mdc-icon-size: 20px;\n      }\n\n      [search] [type='text'] {\n        flex: 1;\n        background-color: transparent;\n        border: 0;\n        padding: 0 0 0 25px;\n        outline: none;\n        width: 50px;\n      }\n\n      [search] mwc-icon {\n        color: var(--secondary-color);\n      }\n\n      [search] mwc-icon[search-icon] {\n        position: absolute;\n      }\n\n      [search] mwc-icon[delete-icon] {\n        opacity: 0.5;\n        --mdc-icon-size: 14px;\n      }\n\n      [nothing] {\n        opacity: 0.5;\n        text-align: center;\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) multiple: boolean = false\n  @property({ type: String, attribute: 'attr-selected' }) attrSelected?: string\n  @property({ type: Boolean, attribute: 'with-search' }) withSearch?: boolean\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\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              <mwc-icon search-icon>search</mwc-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              <mwc-icon\n                @click=${() => {\n                  this.searchInput.value = ''\n                  this.searchKeyword = ''\n                }}\n                delete-icon\n                >delete</mwc-icon\n              >\n            </label>\n          `\n        : html``}\n\n      <slot\n        @change=${(e: Event) => {\n          e.stopPropagation()\n        }}\n      >\n      </slot>\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      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup-list는 닫혀야 한다. */\n      // @ts-ignore for debug\n      !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    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('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  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  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  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  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  }) {\n    super.open(params)\n\n    if (this.activeIndex === undefined) {\n      this.activeIndex = 0\n    } else {\n      this.setActive(this.activeIndex)\n    }\n  }\n\n  override close() {\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  }: {\n    template: unknown\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    parent?: Element | null\n  }): OxPopupList {\n    const owner = parent || document.body\n    const target = document.createElement('ox-popup-list') as OxPopupList\n    render(template, target)\n\n    target._parent = owner\n\n    owner.appendChild(target)\n\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":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,SAAS,cAAc,CAAC,OAAoB;IAC1C,mDAAmD;IACnD,MAAM,SAAS,GAAG,OAAO,CAAC,aAAa,CAAC,0EAA0E,CAAC,CAAA;IAEnH,IAAI,SAAS,EAAE,CAAC;QACd,CAAC;QAAC,SAAyB,CAAC,KAAK,EAAE,CAAA;QACnC,OAAM;IACR,CAAC;IAED,wCAAwC;IACxC,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAC7B,0EAA0E,CAC5D,CAAA;IAEhB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EAAE,CAAA;AAClB,CAAC;AAED;;GAEG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,OAAO;IAAjC;;QAyGL;;;WAGG;QAC0B,aAAQ,GAAY,KAAK,CAAA;QAwB7C,oBAAe,GAAY,KAAK,CAAA;QA4D/B,eAAU,GAA+B,UAA6B,CAAgB;YAC9F,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;gBACd,KAAK,KAAK,CAAC,CAAC,cAAc;gBAC1B,KAAK,QAAQ;oBACX,IAAI,CAAC,KAAK,EAAE,CAAA;oBACZ,MAAK;gBAEP,KAAK,MAAM,CAAC,CAAC,cAAc;gBAC3B,KAAK,WAAW,CAAC;gBACjB,KAAK,IAAI,CAAC,CAAC,cAAc;gBACzB,KAAK,SAAS;oBACZ,IAAI,CAAC,WAAY,EAAE,CAAA;oBACnB,MAAK;gBAEP,KAAK,OAAO,CAAC,CAAC,cAAc;gBAC5B,KAAK,YAAY,CAAC;gBAClB,KAAK,MAAM,CAAC,CAAC,cAAc;gBAC3B,KAAK,WAAW;oBACd,IAAI,CAAC,WAAY,EAAE,CAAA;oBACnB,MAAK;gBAEP,KAAK,OAAO,CAAC;gBACb,KAAK,GAAG,CAAC;gBACT,KAAK,UAAU,EAAE,kBAAkB;oBACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAY,EAAE,IAAI,CAAC,CAAA;oBACvC,IAAI,CAAC,MAAM,EAAE,CAAA;oBACb,MAAK;YACT,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,gBAAW,GAA4B,UAA6B,CAAa;YACzF,MAAM,EAAE,GAAG,CAAC,CAAC,aAA4B,CAAA;YAEzC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;gBACvB,2DAA2D;gBAC3D,uBAAuB;gBACvB,CAAC,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,CAAA;YACrC,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,aAAQ,GAA4B,UAA6B,CAAa;;YACtF,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,MAAM,MAAM,GAAG,MAAC,CAAC,CAAC,MAAsB,0CAAE,OAAO,CAAC,UAAU,CAAC,CAAA;YAC7D,IAAI,MAAM,EAAE,CAAC;gBACX,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;gBAC5B,IAAI,CAAC,MAAM,EAAE,CAAA;YACf,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAoMd,CAAC;IA9SC,MAAM;QACJ,OAAO,IAAI,CAAA;;;QAGP,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAA;gDACkC,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;;;;;2BAM9D,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;0BAC/C,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;;;yBAG3C,GAAG,EAAE;gBACZ,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,EAAE,CAAA;gBAC3B,IAAI,CAAC,aAAa,GAAG,EAAE,CAAA;YACzB,CAAC;;;;;WAKN;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;kBAGE,CAAC,CAAQ,EAAE,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC;;;QAGD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA,0CAA0C,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;KACjF,CAAA;IACH,CAAC;IAES,cAAc,CAAC,CAAa;QACpC,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,CAAC,aAAa,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;IAC3D,CAAC;IAES,eAAe,CAAC,CAAa;QACrC,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,aAAa,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;IAC3D,CAAC;IAES,gBAAgB,CAAC,CAAgB;QACzC,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,CAAC,CAAA;QACpE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YAC1B,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC;IACH,CAAC;IAsDD,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;QACpE,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;YACjC,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,UAAU,CAAA;YACpD,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;;gBAC/C,IAAI,CAAC,IAAI,CAAC,aAAa,KAAI,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC,CAAA,EAAE,CAAC;oBACxF,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;gBAChC,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;oBAChC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;gBACjC,CAAC;YACH,CAAC,CAAC,CAAA;YACF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,MAAM,KAAK,CAAC,CAAA;QACrF,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAA;YAEtE,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAA;YACvB,IAAI,CAAC,CAAC,MAAM,YAAY,KAAK,CAAC,EAAE,CAAC;gBAC/B,MAAM,GAAG,CAAC,MAAgB,CAAC,CAAA;YAC7B,CAAC;YAED,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;gBACvB,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAE,MAAsB,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC;oBAC1E,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,IAAI,UAAU,EAAE,EAAE,CAAC,CAAA;gBAC1D,CAAC;qBAAM,CAAC;oBACN,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,IAAI,UAAU,CAAC,CAAA;gBACzD,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED;;;;OAIG;IACI,iBAAiB;QACtB,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAA;QAEtE,MAAM,QAAQ,GAAG,OAAO;aACrB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,IAAI,UAAU,CAAC,CAAC;aACtG,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,IAAI,EAAE,CAAC,CAAA;QAE1C,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC/C,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,MAAM;QACV,MAAM,IAAI,CAAC,cAAc,CAAA;QAEzB,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAA;QAEtE,MAAM,QAAQ,GAAG,OAAO;aACrB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,IAAI,UAAU,CAAC,CAAC;aACtG,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAA;QAE9C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;SAC/C,CAAC,CACH,CAAA;QAED,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,WAAY,CAAC,CAAA;QACzC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;YAC9E,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC;IACH,CAAC;IAED;;;;;;OAMG;IACH,SAAS,CAAC,MAA+B,EAAE,UAAoB;QAC7D,IAAI,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,CAAA;QACzE,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAE,CAAC,CAAA;QAC1D,CAAC;QAED,IAAI,MAAM,YAAY,OAAO,EAAE,CAAC;YAC9B,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,KAAK,MAAM,CAAC,CAAA;YAC5D,IAAI,CAAC,SAAS,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,UAAU,CAAC,CAAA;YACpD,OAAM;QACR,CAAC;QAED,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,UAAU,CAAA;QAEpD,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE;YACtC,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,KAAK,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;gBACvF,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;gBAEjC,IAAI,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;oBACrC,uGAAuG;oBACvG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;gBAC1F,CAAC;gBAED,cAAc,CAAC,MAAqB,CAAC,CAAA;gBAErC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;YAC1B,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;gBAChC,oFAAoF;gBACpF,CAAC,IAAI,CAAC,QAAQ,IAAI,UAAU,IAAI,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,CAAA;YACtE,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED;;;;;OAKG;IACM,IAAI,CAAC,MAQb;QACC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAElB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE,CAAC;YACnC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAA;QACtB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;QAClC,CAAC;IACH,CAAC;IAED;;;;OAIG;IACM,KAAK;QACZ,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;YAChC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,OAAO,EAAE;gBACvB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAA;QACH,CAAC;QAED,KAAK,CAAC,KAAK,EAAE,CAAA;IACf,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,EACV,QAAQ,EACR,GAAG,EACH,IAAI,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EAQP;QACC,MAAM,KAAK,GAAG,MAAM,IAAI,QAAQ,CAAC,IAAI,CAAA;QACrC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAgB,CAAA;QACrE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAExB,MAAM,CAAC,OAAO,GAAG,KAAK,CAAA;QAEtB,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;QAEzB,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;QAEzC,OAAO,MAAM,CAAA;IACf,CAAC;;AArbM,kBAAM,GAAG;IACd,GAAG,OAAO,CAAC,MAAM;IACjB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmGF;CACF,AAtGY,CAsGZ;AAM4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAA0B;AAME;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;iDAAsB;AAOtB;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAAqB;AAO/C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA0B;AAE5C;IAAR,KAAK,EAAE;gDAAqB;AACpB;IAAR,KAAK,EAAE;kDAAuB;AACtB;IAAR,KAAK,EAAE;oDAAiC;AAEhB;IAAxB,KAAK,CAAC,gBAAgB,CAAC;gDAA+B;AAvI5C,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAubvB","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopup } from './ox-popup'\n\nfunction guaranteeFocus(element: HTMLElement) {\n  // 1. 옵션 엘리먼트의 하위 첫번째 focusible 엘리먼트에 focus 기회를 준다.\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. 자신을 포함해서 가장 가까운 부모에게 focus 기회를 준다.\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        flex-direction: column;\n        align-items: stretch;\n        background-color: var(--theme-white-color, #fff);\n        z-index: 100;\n        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n        padding: 4px 0;\n        color: var(--theme-primary-text-color, #3c3938);\n        font: normal 14px 'Roboto', sans-serif;\n      }\n\n      :host([active]) {\n        display: flex;\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: 5px 10px;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n        cursor: pointer;\n        outline: none;\n      }\n\n      ::slotted(*:focus) {\n        outline: none;\n      }\n\n      ::slotted([option][active]),\n      ::slotted([option]:hover) {\n        background-color: #f6f6f6;\n      }\n\n      ::slotted([option][selected]) {\n        border-left: 3px solid var(--primary-color, #38a25b);\n        font-weight: bold;\n      }\n\n      ::slotted([separator]) {\n        height: 1px;\n        width: 100%;\n        padding: 0;\n        background-color: rgba(0, 0, 0, 0.15);\n      }\n      ::slotted([option] > input) {\n        border: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.3));\n      }\n\n      ::slotted([hidden]) {\n        display: none;\n      }\n\n      [search] {\n        display: flex;\n        position: relative;\n        align-items: center;\n        padding: 5px 10px;\n\n        --mdc-icon-size: 20px;\n      }\n\n      [search] [type='text'] {\n        flex: 1;\n        background-color: transparent;\n        border: 0;\n        padding: 0 0 0 25px;\n        outline: none;\n        width: 50px;\n      }\n\n      [search] mwc-icon {\n        color: var(--secondary-color);\n      }\n\n      [search] mwc-icon[search-icon] {\n        position: absolute;\n      }\n\n      [search] mwc-icon[delete-icon] {\n        opacity: 0.5;\n        --mdc-icon-size: 14px;\n      }\n\n      [nothing] {\n        opacity: 0.5;\n        text-align: center;\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 }) 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' }) 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' }) withSearch?: boolean\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\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              <mwc-icon search-icon>search</mwc-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              <mwc-icon\n                @click=${() => {\n                  this.searchInput.value = ''\n                  this.searchKeyword = ''\n                }}\n                delete-icon\n                >delete</mwc-icon\n              >\n            </label>\n          `\n        : html``}\n\n      <slot\n        @change=${(e: Event) => {\n          e.stopPropagation()\n        }}\n      >\n      </slot>\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      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup-list는 닫혀야 한다. */\n      // @ts-ignore for debug\n      !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    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('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  }) {\n    super.open(params)\n\n    if (this.activeIndex === undefined) {\n      this.activeIndex = 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.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  }: {\n    template: unknown\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    parent?: Element | null\n  }): OxPopupList {\n    const owner = parent || document.body\n    const target = document.createElement('ox-popup-list') as OxPopupList\n    render(template, target)\n\n    target._parent = owner\n\n    owner.appendChild(target)\n\n    target.open({ top, left, right, bottom })\n\n    return target\n  }\n}\n"]}

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

@@ -1,17 +1,31 @@
 import { PropertyValues } from 'lit';
 import { OxPopup } from './ox-popup';
+/**
+ * Custom element representing a popup menu. It extends OxPopup.
+ */
 export declare class OxPopupMenu extends OxPopup {
     static styles: import("lit").CSSResult[];
+    /**
+     * Property to track the index of the active menu item.
+     */
     activeIndex: number;
     render(): import("lit").TemplateResult<1>;
     protected _onkeydown: (e: KeyboardEvent) => void;
     protected _onfocusout: (e: FocusEvent) => void;
     protected _onclick: (e: MouseEvent) => void;
     updated(changes: PropertyValues<this>): void;
+    /**
+     * Selects a menu item by dispatching a 'select' event.
+     * Closes the menu if the item doesn't have 'alive-on-select' attribute.
+     */
     select(menu: Element): void;
+    /**
+     * Sets the active menu item based on the index or the menu element itself.
+     */
     setActive(active: number | Element | null): void;
     /**
-     * Open Popup
+     * Static method to open a popup menu with the provided template and position options.
+     * Creates and returns an instance of OxPopupMenu.
      *
      * @param {PopupOpenOptions}
      */

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

@@ -9,9 +9,15 @@ function focusClosest(element) {
     closest === null || closest === void 0 ? void 0 : closest.focus();
     return closest;
 }
+/**
+ * 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) {
             var _a;
@@ -77,12 +83,19 @@ let OxPopupMenu = class OxPopupMenu extends OxPopup {
             this.setActive(this.activeIndex);
         }
     }
+    /**
+     * Selects a menu item by dispatching a 'select' event.
+     * Closes the menu if the item doesn't have 'alive-on-select' attribute.
+     */
     select(menu) {
         menu.dispatchEvent(new CustomEvent('select'));
         if (!menu.hasAttribute('alive-on-select')) {
             this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }));
         }
     }
+    /**
+     * Sets the active menu item based on the index or the menu element itself.
+     */
     setActive(active) {
         const menus = Array.from(this.querySelectorAll(':scope > ox-popup-menuitem, :scope > [menu]'));
         menus.map(async (menu, index) => {
@@ -106,7 +119,8 @@ let OxPopupMenu = class OxPopupMenu extends OxPopup {
         });
     }
     /**
-     * Open Popup
+     * Static method to open a popup menu with the provided template and position options.
+     * Creates and returns an instance of OxPopupMenu.
      *
      * @param {PopupOpenOptions}
      */