@operato/popup 8.0.3 → 9.0.0-beta.10

package/CHANGELOG.md

@@ -3,25 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [8.0.3](https://github.com/hatiolab/operato/compare/v8.0.2...v8.0.3) (2025-02-14)
+## [9.0.0-beta.10](https://github.com/hatiolab/operato/compare/v9.0.0-beta.9...v9.0.0-beta.10) (2025-01-25)
 
 
 ### :bug: Bug Fix
 
-* 팝업 포커스 소스 정리 ([00a627b](https://github.com/hatiolab/operato/commit/00a627b07a8c7d993e071e7613df41447ba9059c))
+* i18next@24.2.1 ([1c5920c](https://github.com/hatiolab/operato/commit/1c5920c6f77d28f07051a0a49997b9fb1dbf08bf))
+* tweak tsconfig.json ([3c424b1](https://github.com/hatiolab/operato/commit/3c424b18d046f95d5619076d113d49a4b4dc9bbb))
 
 
 
-### [8.0.2](https://github.com/hatiolab/operato/compare/v8.0.1...v8.0.2) (2025-02-14)
+## [9.0.0-beta.6](https://github.com/hatiolab/operato/compare/v9.0.0-beta.5...v9.0.0-beta.6) (2025-01-20)
 
 
 ### :bug: Bug Fix
 
-* :scope 셀렉터 :host로 변경 ([d5b0b89](https://github.com/hatiolab/operato/commit/d5b0b89f9e9f749ebb4ea522717598da788d0e3d))
+* esm module ([9642b97](https://github.com/hatiolab/operato/commit/9642b97650623d9ce71f6db0fd1995a2379205b5))
 
 
 
-## [8.0.0](https://github.com/hatiolab/operato/compare/v7.1.33...v8.0.0) (2025-01-14)
+## [9.0.0-beta.5](https://github.com/hatiolab/operato/compare/v9.0.0-beta.4...v9.0.0-beta.5) (2025-01-20)
+
+
+### :bug: Bug Fix
+
+* esm module ([1319b00](https://github.com/hatiolab/operato/commit/1319b00d6955a514f63b3469fb514a28f84168a2))
+
+
+
+## [9.0.0-beta.4](https://github.com/hatiolab/operato/compare/v9.0.0-beta.3...v9.0.0-beta.4) (2025-01-20)
+
+
+### :bug: Bug Fix
+
+* esm module ([0402232](https://github.com/hatiolab/operato/commit/04022327fa47eac64eaf3c56eeec55b9ace13e0e))
+
+
+
+## [9.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-beta.11...v9.0.0-beta.0) (2025-01-13)
 
 **Note:** Version bump only for package @operato/popup
 
@@ -29,44 +48,77 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-### [7.1.32](https://github.com/hatiolab/operato/compare/v7.1.31...v7.1.32) (2025-01-11)
+## [8.0.0-beta.5](https://github.com/hatiolab/operato/compare/v8.0.0-beta.4...v8.0.0-beta.5) (2025-01-10)
+
+
+### :bug: Bug Fix
+
+* alert 텍스트 정렬 속성 추가 ([d3b5c9b](https://github.com/hatiolab/operato/commit/d3b5c9bd706f30498b5c11ca89f83d6588961950))
+
+
+
+## [8.0.0-beta.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
+
+
+
+## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
 
 
 ### :bug: Bug Fix
 
-* missing .npmignore ([03db207](https://github.com/hatiolab/operato/commit/03db207498088b294ccfb9645f6839c2f11645d5))
-* typo .npmignore ([df91cae](https://github.com/hatiolab/operato/commit/df91caea0f5938a3febd9307184e5b036a65e2bd))
+* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
 
 
 
-### [7.1.30](https://github.com/hatiolab/operato/compare/v7.1.29...v7.1.30) (2025-01-10)
+## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [8.0.0-alpha.51](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.50...v8.0.0-alpha.51) (2024-11-29)
 
 
 ### :bug: Bug Fix
 
-* alert 텍스트 정렬 속성 추가 ([4ece917](https://github.com/hatiolab/operato/commit/4ece91785c1d84974f5a5e0dfac2d497da549843))
+* 팝업 텍스트 줄바꿈 추가 ([799df6d](https://github.com/hatiolab/operato/commit/799df6d43193353b43af977be8f6c65f997d1173))
+
+
+
+## [8.0.0-alpha.50](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.49...v8.0.0-alpha.50) (2024-11-16)
+
+**Note:** Version bump only for package @operato/popup
+
+
 
 
 
-### [7.1.27](https://github.com/hatiolab/operato/compare/v7.1.26...v7.1.27) (2024-12-09)
+## [8.0.0-alpha.41](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.40...v8.0.0-alpha.41) (2024-10-21)
 
 
 ### :bug: Bug Fix
 
-* calendar css variables ([75a7eb0](https://github.com/hatiolab/operato/commit/75a7eb0c68a9d863f2b0db44152fdb9b9536ceca))
+* remove import to escape circular referencing (temporary) ([4887944](https://github.com/hatiolab/operato/commit/488794473b84964ddbff0ee838d180b86cd00fc3))
 
 
 
-### [7.1.26](https://github.com/hatiolab/operato/compare/v7.1.25...v7.1.26) (2024-11-28)
+## [8.0.0-alpha.37](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.36...v8.0.0-alpha.37) (2024-10-20)
 
 
 ### :bug: Bug Fix
 
-* 팝업 텍스트 줄바꿈 추가 ([4c1e74f](https://github.com/hatiolab/operato/commit/4c1e74f996097a0c7f5efa941cfebccf05c1d9aa))
+* update dev-dependencies version ([d6fe342](https://github.com/hatiolab/operato/commit/d6fe342de738c6bad3528550a862b5a1d2573161))
 
 
 
-### [7.1.25](https://github.com/hatiolab/operato/compare/v7.1.24...v7.1.25) (2024-11-23)
+## [8.0.0-alpha.33](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.32...v8.0.0-alpha.33) (2024-10-14)
 
 **Note:** Version bump only for package @operato/popup
 
@@ -74,16 +126,32 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-### [7.1.13](https://github.com/hatiolab/operato/compare/v7.1.12...v7.1.13) (2024-09-23)
+## [8.0.0-alpha.29](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.28...v8.0.0-alpha.29) (2024-10-10)
+
+**Note:** Version bump only for package @operato/popup
+
+
+
+
+
+## [8.0.0-alpha.27](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.26...v8.0.0-alpha.27) (2024-10-06)
 
 
 ### :bug: Bug Fix
 
-* 팝업 - 포커스 안되는 현상 수정 ([4593f04](https://github.com/hatiolab/operato/commit/4593f04b6c9cdccfc3591026a5d8d6f9dbbcebc8))
+* calendar css variables ([9ea1918](https://github.com/hatiolab/operato/commit/9ea191844c72de5f920a8da85ad50209ba77cc07))
+
+
+
+## [8.0.0-alpha.4](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.3...v8.0.0-alpha.4) (2024-09-07)
+
+**Note:** Version bump only for package @operato/popup
+
+
 
 
 
-### [7.1.6](https://github.com/hatiolab/operato/compare/v7.1.5...v7.1.6) (2024-09-07)
+## [8.0.0-alpha.0](https://github.com/hatiolab/operato/compare/v7.1.1...v8.0.0-alpha.0) (2024-09-01)
 
 **Note:** Version bump only for package @operato/popup
 

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

@@ -1,5 +1,4 @@
 import '@material/web/icon/icon.js';
-import '@operato/input/ox-input-search.js';
 import { LitElement, PropertyValues } from 'lit';
 /**
  * Custom element for creating floating overlays.

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

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import '@material/web/icon/icon.js';
-import '@operato/input/ox-input-search.js';
+// 순환 참조가 되어서 일단 코멘트 처리함.
+// import '@operato/input/ox-input-search.js'
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -30,37 +31,7 @@ function getPoint(e) {
  * 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);
-    }
-    static { this.styles = [
+    static styles = [
         ScrollbarStyles,
         css `
       /* for layout style */
@@ -308,7 +279,82 @@ let OxFloatingOverlay = class OxFloatingOverlay extends LitElement {
         }
       }
     `
-    ]; }
+    ];
+    /**
+     * 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 = false;
+    /**
+     * A string property that specifies the direction in which the overlay should appear.
+     * Possible values are: 'up', 'down', 'left', or 'right'.
+     */
+    direction;
+    /**
+     * A string property that reflects the hovering state of the overlay.
+     * Possible values are: 'center', 'edge', or 'next'.
+     */
+    hovering;
+    /**
+     * A string property that specifies the size of the overlay.
+     * Possible values are: 'small', 'medium', or 'large'.
+     */
+    size;
+    /**
+     * A string property that represents the name of the overlay.
+     * This can be used for identification or other purposes.
+     */
+    name;
+    /**
+     * A string property that sets the title of the overlay.
+     * The title is typically displayed in the header of the overlay.
+     */
+    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.
+     */
+    closable = false;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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 = 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.
+     */
+    movable = false;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    dragStart;
+    dragEndHandler = this.onDragEnd.bind(this);
+    dragMoveHandler = this.onDragMove.bind(this);
+    overlayed;
+    content;
     render() {
         const direction = this.hovering == 'center' ? undefined : this.direction;
         const { value = '', handler: searchHandler, placeholder = '', autofocus = true } = this.search || {};

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/web/icon/icon.js'\nimport '@operato/input/ox-input-search.js'\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        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\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(--md-sys-color-shadow, #000);\n        opacity: 0.4;\n      }\n\n      [overlayed] {\n        position: absolute;\n\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\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        border: 2px solid var(--md-sys-color-primary);\n      }\n\n      [overlayed][hovering='center'][opened] {\n        opacity: 1;\n        transition: opacity 0.3s ease-in;\n        background-color: var(--md-sys-color-surface-container-lowest);\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: var(--md-sys-color-on-primary-container);\n        --help-icon-hover-color: var(--md-sys-color-on-primary-container);\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        background-color: var(--md-sys-color-primary);\n        font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n        color: var(--md-sys-color-on-primary);\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        text-transform: capitalize;\n      }\n\n      [name='header']::slotted(*) {\n        margin: 0 auto;\n      }\n\n      [name='header'] > h1 {\n        font-size: var(--md-sys-typescale-title-medium-size, 1rem);\n        margin-block: 0.4rem;\n      }\n\n      [historyback] {\n        margin-left: var(--spacing-medium);\n        margin-right: auto;\n      }\n\n      [close] {\n        margin-left: auto;\n        margin-right: var(--spacing-medium);\n      }\n\n      [historyback],\n      [close] {\n        display: none;\n      }\n\n      [closable][close] {\n        display: block;\n        cursor: pointer;\n      }\n\n      [search] ox-help-icon {\n        color: var(--md-sys-color-on-secondary-container);\n      }\n\n      [search] {\n        --help-icon-color: var(--md-sys-color-primary);\n        --help-icon-hover-color: var(--md-sys-color-primary);\n        --help-icon-opacity: 0.2;\n        --help-icon-size: 20px;\n\n        --md-icon-size: 20px;\n\n        --input-search-padding: var(--spacing-medium);\n        --input-search-focus-border-bottom: none;\n        --input-search-font: normal 16px var(--theme-font);\n\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n\n        align-self: center;\n        color: var(--md-sys-color-primary);\n        background-color: var(--md-sys-color-on-primary);\n        border-radius: 999em;\n        padding: 0 var(--spacing-medium);\n      }\n\n      [search] > * {\n        align-self: center;\n      }\n\n      ox-input-search {\n        color: var(--md-sys-color-primary);\n        background-color: var(--md-sys-color-on-primary);\n        border-radius: var(--md-sys-shape-corner-full);\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          <md-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} historyback>arrow_back</md-icon>\n          ${this.movable ? html`<md-icon>drag_indicator</md-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`<md-icon @click=${(e: MouseEvent) => filterHandler(this.firstElementChild)}>tune</md-icon>`\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          <md-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} close>close</md-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"]}
+{"version":3,"file":"ox-floating-overlay.js","sourceRoot":"","sources":["../../src/ox-floating-overlay.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n// 순환 참조가 되어서 일단 코멘트 처리함.\n// import '@operato/input/ox-input-search.js'\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        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\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(--md-sys-color-shadow, #000);\n        opacity: 0.4;\n      }\n\n      [overlayed] {\n        position: absolute;\n\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\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        border: 2px solid var(--md-sys-color-primary);\n      }\n\n      [overlayed][hovering='center'][opened] {\n        opacity: 1;\n        transition: opacity 0.3s ease-in;\n        background-color: var(--md-sys-color-surface-container-lowest);\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: var(--md-sys-color-on-primary-container);\n        --help-icon-hover-color: var(--md-sys-color-on-primary-container);\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        background-color: var(--md-sys-color-primary);\n        font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n        color: var(--md-sys-color-on-primary);\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        text-transform: capitalize;\n      }\n\n      [name='header']::slotted(*) {\n        margin: 0 auto;\n      }\n\n      [name='header'] > h1 {\n        font-size: var(--md-sys-typescale-title-medium-size, 1rem);\n        margin-block: 0.4rem;\n      }\n\n      [historyback] {\n        margin-left: var(--spacing-medium);\n        margin-right: auto;\n      }\n\n      [close] {\n        margin-left: auto;\n        margin-right: var(--spacing-medium);\n      }\n\n      [historyback],\n      [close] {\n        display: none;\n      }\n\n      [closable][close] {\n        display: block;\n        cursor: pointer;\n      }\n\n      [search] ox-help-icon {\n        color: var(--md-sys-color-on-secondary-container);\n      }\n\n      [search] {\n        --help-icon-color: var(--md-sys-color-primary);\n        --help-icon-hover-color: var(--md-sys-color-primary);\n        --help-icon-opacity: 0.2;\n        --help-icon-size: 20px;\n\n        --md-icon-size: 20px;\n\n        --input-search-padding: var(--spacing-medium);\n        --input-search-focus-border-bottom: none;\n        --input-search-font: normal 16px var(--theme-font);\n\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n\n        align-self: center;\n        color: var(--md-sys-color-primary);\n        background-color: var(--md-sys-color-on-primary);\n        border-radius: 999em;\n        padding: 0 var(--spacing-medium);\n      }\n\n      [search] > * {\n        align-self: center;\n      }\n\n      ox-input-search {\n        color: var(--md-sys-color-primary);\n        background-color: var(--md-sys-color-on-primary);\n        border-radius: var(--md-sys-shape-corner-full);\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          <md-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} historyback>arrow_back</md-icon>\n          ${this.movable ? html`<md-icon>drag_indicator</md-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`<md-icon @click=${(e: MouseEvent) => filterHandler(this.firstElementChild)}>tune</md-icon>`\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          <md-icon @click=${(e: Event) => this.onClose(e)} ?closable=${this.closable} close>close</md-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.js

@@ -22,70 +22,7 @@ function guaranteeFocus(element) {
  * 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;
-        /**
-         * A boolean property that, when set to true, enables the drag-and-drop sorting functionality within the popup list.
-         * This allows users to reorder the options in the list by dragging them into new positions.
-         * @type {boolean|undefined}
-         */
-        this.sortable = false;
-        this.nothingToSelect = false;
-        this.locked = false;
-        this._onkeydown = function (e) {
-            e.stopPropagation();
-            switch (e.key) {
-                case 'Esc': // for IE/Edge
-                case 'Escape':
-                    this.close();
-                    break;
-                case 'Left': // for IE/Edge
-                case 'ArrowLeft':
-                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':
-                case ' ':
-                case 'Spacebar': // for old firefox
-                    this.setActive(this.activeIndex, true);
-                    this.select();
-                    break;
-            }
-        }.bind(this);
-        this._onfocusout = function (e) {
-            const to = e.relatedTarget;
-            if (!this.contains(to)) {
-                /* If the focus has clearly moved to an element outside of my range, the ox-popup-list should be closed. */
-                // @ts-ignore for debug
-                !this.preventCloseOnBlur && !this.debug && !window.POPUP_DEBUG && this.close();
-            }
-        }.bind(this);
-        this._onclick = function (e) {
-            e.stopPropagation();
-            // Check if the click event target is a checkbox
-            if (e.target.closest('input[type="checkbox"]')) {
-                return; // Do not proceed if it's a checkbox click
-            }
-            const option = e.target?.closest('[option]');
-            if (option) {
-                this.setActive(option, true);
-                this.select();
-            }
-        }.bind(this);
-    }
-    static { this.styles = [
+    static styles = [
         ...OxPopup.styles,
         css `
       :host {
@@ -197,7 +134,42 @@ let OxPopupList = class OxPopupList extends OxPopup {
         overflow: auto;
       }
     `
-    ]; }
+    ];
+    /**
+     * A boolean property that, when set to true, allows multiple options to be selected in the popup list.
+     * @type {boolean}
+     */
+    multiple = false;
+    /**
+     * An optional attribute that specifies the name of the attribute used to mark selected options in the list.
+     * @type {string|undefined}
+     */
+    attrSelected;
+    /**
+     * 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;
+    /**
+     * A boolean property that, when set to true, enables the drag-and-drop sorting functionality within the popup list.
+     * This allows users to reorder the options in the list by dragging them into new positions.
+     * @type {boolean|undefined}
+     */
+    sortable = false;
+    /**
+     * 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;
+    activeIndex;
+    searchKeyword;
+    nothingToSelect = false;
+    searchInput;
+    body;
+    sortableObject;
+    locked = false;
     render() {
         return html `
       <slot name="header"> </slot>
@@ -252,6 +224,53 @@ let OxPopupList = class OxPopupList extends OxPopup {
             e.stopPropagation();
         }
     }
+    _onkeydown = function (e) {
+        e.stopPropagation();
+        switch (e.key) {
+            case 'Esc': // for IE/Edge
+            case 'Escape':
+                this.close();
+                break;
+            case 'Left': // for IE/Edge
+            case 'ArrowLeft':
+            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':
+            case ' ':
+            case 'Spacebar': // for old firefox
+                this.setActive(this.activeIndex, true);
+                this.select();
+                break;
+        }
+    }.bind(this);
+    _onfocusout = function (e) {
+        const to = e.relatedTarget;
+        if (!this.contains(to)) {
+            /* If the focus has clearly moved to an element outside of my range, the ox-popup-list should be closed. */
+            // @ts-ignore for debug
+            !this.preventCloseOnBlur && !this.debug && !window.POPUP_DEBUG && this.close();
+        }
+    }.bind(this);
+    _onclick = function (e) {
+        e.stopPropagation();
+        // Check if the click event target is a checkbox
+        if (e.target.closest('input[type="checkbox"]')) {
+            return; // Do not proceed if it's a checkbox click
+        }
+        const option = e.target?.closest('[option]');
+        if (option) {
+            this.setActive(option, true);
+            this.select();
+        }
+    }.bind(this);
     updated(changes) {
         if (changes.has('activeIndex')) {
             this.activeIndex !== undefined && this.setActive(this.activeIndex);