@operato/popup 7.0.0-rc.8 → 7.0.0

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

@@ -6,7 +6,7 @@ import { OxPopup } from './ox-popup';
 function focusClosest(element) {
     /* Find the closest focusable element. */
     const closest = element.closest('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-    closest === null || closest === void 0 ? void 0 : closest.focus();
+    closest?.focus();
     return closest;
 }
 /**
@@ -20,7 +20,6 @@ let OxPopupMenu = class OxPopupMenu extends OxPopup {
          */
         this.activeIndex = 0;
         this._onkeydown = function (e) {
-            var _a;
             e.stopPropagation();
             switch (e.key) {
                 case 'Esc': // for IE/Edge
@@ -41,7 +40,7 @@ let OxPopupMenu = class OxPopupMenu extends OxPopup {
                     break;
                 case 'Enter':
                     e.stopPropagation();
-                    var menu = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest('[menu], ox-popup-menuitem');
+                    var menu = e.target?.closest('[menu], ox-popup-menuitem');
                     if (menu) {
                         this.select(menu);
                     }
@@ -66,78 +65,17 @@ let OxPopupMenu = class OxPopupMenu extends OxPopup {
             }
         }.bind(this);
         this._onclick = function (e) {
-            var _a;
             e.stopPropagation();
-            const menu = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest('[menu], ox-popup-menuitem');
+            const menu = e.target?.closest('[menu], ox-popup-menuitem');
             if (menu) {
                 this.setActive(menu);
                 this.select(menu);
             }
         }.bind(this);
     }
-    render() {
-        return html ` <slot> </slot> `;
-    }
-    updated(changes) {
-        if (changes.has('activeIndex')) {
-            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) => {
-            if (typeof active === 'number' && index === (active + menus.length) % menus.length) {
-                menu.setAttribute('active', '');
-                focusClosest(menu);
-                this.activeIndex = index;
-            }
-            else if (active === menu) {
-                if (this.activeIndex === index) {
-                    /* 메뉴의 update를 유도하기 위해서 강제로 토글시킴 */
-                    menu.removeAttribute('active');
-                    await this.updateComplete;
-                    menu.setAttribute('active', '');
-                }
-                this.activeIndex = index;
-            }
-            else {
-                menu.removeAttribute('active');
-            }
-        });
-    }
-    /**
-     * Static method to open a popup menu with the provided template and position options.
-     * Creates and returns an instance of OxPopupMenu.
-     *
-     * @param {PopupOpenOptions}
-     */
-    static open({ template, top, left, right, bottom, parent }) {
-        const owner = parent || document.body;
-        const target = document.createElement('ox-popup-menu');
-        render(template, target);
-        target.setAttribute('active', '');
-        target._parent = owner;
-        owner.appendChild(target);
-        target.open({ top, left, right, bottom });
-        return target;
-    }
-};
-OxPopupMenu.styles = [
-    ...OxPopup.styles,
-    css `
+    static { this.styles = [
+        ...OxPopup.styles,
+        css `
       :host {
         display: none;
         flex-direction: column;
@@ -146,6 +84,7 @@ OxPopupMenu.styles = [
         z-index: 100;
         box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
         padding: var(--spacing-small) 0;
+        border-radius: var(--spacing-small);
 
         color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));
         font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
@@ -198,7 +137,67 @@ OxPopupMenu.styles = [
         background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));
       }
     `
-];
+    ]; }
+    render() {
+        return html ` <slot> </slot> `;
+    }
+    updated(changes) {
+        if (changes.has('activeIndex')) {
+            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) => {
+            if (typeof active === 'number' && index === (active + menus.length) % menus.length) {
+                menu.setAttribute('active', '');
+                focusClosest(menu);
+                this.activeIndex = index;
+            }
+            else if (active === menu) {
+                if (this.activeIndex === index) {
+                    /* 메뉴의 update를 유도하기 위해서 강제로 토글시킴 */
+                    menu.removeAttribute('active');
+                    await this.updateComplete;
+                    menu.setAttribute('active', '');
+                }
+                this.activeIndex = index;
+            }
+            else {
+                menu.removeAttribute('active');
+            }
+        });
+    }
+    /**
+     * Static method to open a popup menu with the provided template and position options.
+     * Creates and returns an instance of OxPopupMenu.
+     *
+     * @param {PopupOpenOptions}
+     */
+    static open({ template, top, left, right, bottom, parent }) {
+        const owner = parent || document.body;
+        const target = document.createElement('ox-popup-menu');
+        render(template, target);
+        target.setAttribute('active', '');
+        target._parent = owner;
+        owner.appendChild(target);
+        target.open({ top, left, right, bottom });
+        return target;
+    }
+};
 __decorate([
     property({ type: Number })
 ], OxPopupMenu.prototype, "activeIndex", void 0);

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

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

@@ -51,6 +51,49 @@ let OxPopupMenuItem = class OxPopupMenuItem extends LitElement {
             this._submenu = this.querySelector('ox-popup-menu');
         }.bind(this);
     }
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-direction: row;
+        position: relative;
+        align-items: center;
+      }
+
+      [icon] {
+        width: 20px;
+        display: flex;
+        flex-direction: row;
+        padding: 0;
+        margin: 0 var(--spacing-small) 0 0;
+        align-items: center;
+        justify-content: center;
+      }
+
+      [icon] > * {
+        flex: 1;
+      }
+
+      [label] {
+        flex: 1;
+        text-transform: capitalize;
+      }
+
+      ::slotted(*[slot='icon']) {
+        color: var(--ox-popup-menu-color-variant, var(--md-sys-color-on-surface-variant));
+        font-size: var(--icon-size-small);
+      }
+
+      md-icon {
+        display: block;
+        width: 24px;
+        text-align: right;
+        font-size: var(--icon-size-small);
+        color: var(--ox-popup-menu-color-variant, var(--md-sys-color-primary));
+        opacity: 0.7;
+      }
+    `
+    ]; }
     render() {
         return html `
       <div icon>
@@ -99,8 +142,7 @@ let OxPopupMenuItem = class OxPopupMenuItem extends LitElement {
      * Collapses the submenu, if it exists.
      */
     collapse() {
-        var _a;
-        (_a = this._submenu) === null || _a === void 0 ? void 0 : _a.close();
+        this._submenu?.close();
     }
     /**
      * Dispatches a custom 'ox-collapse' event indicating that the menu item should collapse itself.
@@ -117,49 +159,6 @@ let OxPopupMenuItem = class OxPopupMenuItem extends LitElement {
         this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }));
     }
 };
-OxPopupMenuItem.styles = [
-    css `
-      :host {
-        display: flex;
-        flex-direction: row;
-        position: relative;
-        align-items: center;
-      }
-
-      [icon] {
-        width: 20px;
-        display: flex;
-        flex-direction: row;
-        padding: 0;
-        margin: 0 var(--spacing-small) 0 0;
-        align-items: center;
-        justify-content: center;
-      }
-
-      [icon] > * {
-        flex: 1;
-      }
-
-      [label] {
-        flex: 1;
-        text-transform: capitalize;
-      }
-
-      ::slotted(*[slot='icon']) {
-        color: var(--ox-popup-menu-color-variant, var(--md-sys-color-on-surface-variant));
-        font-size: var(--icon-size-small);
-      }
-
-      md-icon {
-        display: block;
-        width: 24px;
-        text-align: right;
-        font-size: var(--icon-size-small);
-        color: var(--ox-popup-menu-color-variant, var(--md-sys-color-primary));
-        opacity: 0.7;
-      }
-    `
-];
 __decorate([
     property({ type: Boolean })
 ], OxPopupMenuItem.prototype, "active", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"ox-popup-menuitem.js","sourceRoot":"","sources":["../../src/ox-popup-menuitem.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopupMenu } from './ox-popup-menu'\n\n/**\n * Custom element representing a menu item within an OxPopup menu.\n * It can contain a label and an optional submenu.\n */\n@customElement('ox-popup-menuitem')\nexport class OxPopupMenuItem extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n        position: relative;\n        align-items: center;\n      }\n\n      [icon] {\n        width: 20px;\n        display: flex;\n        flex-direction: row;\n        padding: 0;\n        margin: 0 var(--spacing-small) 0 0;\n        align-items: center;\n        justify-content: center;\n      }\n\n      [icon] > * {\n        flex: 1;\n      }\n\n      [label] {\n        flex: 1;\n        text-transform: capitalize;\n      }\n\n      ::slotted(*[slot='icon']) {\n        color: var(--ox-popup-menu-color-variant, var(--md-sys-color-on-surface-variant));\n        font-size: var(--icon-size-small);\n      }\n\n      md-icon {\n        display: block;\n        width: 24px;\n        text-align: right;\n        font-size: var(--icon-size-small);\n        color: var(--ox-popup-menu-color-variant, var(--md-sys-color-primary));\n        opacity: 0.7;\n      }\n    `\n  ]\n\n  /**\n   * Property indicating whether the menu item is active or not.\n   * When active, it may show a submenu.\n   */\n  @property({ type: Boolean }) active: boolean = false\n\n  /**\n   * The label to display for the menu item.\n   */\n  @property({ type: String }) label!: string\n\n  @state() _submenu?: OxPopupMenu\n\n  render() {\n    return html`\n      <div icon>\n        <slot name=\"icon\"> </slot>\n      </div>\n      <div label>${this.label}</div>\n\n      ${this._submenu ? html`<md-icon>chevron_right</md-icon>` : html``}\n\n      <slot @slotchange=${this._onslotchange}> </slot>\n    `\n  }\n\n  firstUpdated() {\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', this._onkeydown)\n    this.addEventListener('click', this._onclick)\n  }\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPopupMenuItem, e: MouseEvent) {\n    if (!this._submenu) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const parent = this.closest('ox-popup-menu') as OxPopupMenu\n    if (parent) {\n      parent.setActive(this)\n    }\n\n    this.dispatchEvent(new CustomEvent('select'))\n\n    requestAnimationFrame(() => {\n      this.expand(false)\n    })\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupMenuItem, e: KeyboardEvent) {\n    switch (e.key) {\n      case 'Right':\n      case 'ArrowRight':\n        e.stopPropagation()\n        this.expand(false)\n        break\n\n      case 'Left':\n      case 'ArrowLeft':\n        e.stopPropagation()\n        this.collapseSelf()\n        break\n\n      case 'Enter':\n        if (this._submenu) {\n          e.stopPropagation()\n          this.expand(false)\n        }\n        break\n    }\n  }.bind(this)\n\n  protected _onslotchange: (e: Event) => void = function (this: OxPopupMenuItem, e: Event) {\n    this._submenu = this.querySelector('ox-popup-menu') as OxPopupMenu\n  }.bind(this)\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('active')) {\n      this.updateActive()\n    }\n  }\n\n  updateActive() {\n    if (this.active) {\n      this.expand(true)\n    } else {\n      this.collapse()\n    }\n  }\n\n  /**\n   * Expands the submenu, if it exists.\n   * The submenu is displayed below and to the right of the menu item.\n   *\n   * @param {boolean} silent - If true, the submenu is opened silently without user interaction.\n   */\n  expand(silent: boolean) {\n    if (!this._submenu) {\n      return\n    }\n\n    const top = 0\n    const left = this.clientWidth\n    this._submenu.open({ top, left, silent })\n  }\n\n  /**\n   * Collapses the submenu, if it exists.\n   */\n  collapse() {\n    this._submenu?.close()\n  }\n\n  /**\n   * Dispatches a custom 'ox-collapse' event indicating that the menu item should collapse itself.\n   * This event can be used to trigger further interactions or logic in the application.\n   */\n  collapseSelf() {\n    this.dispatchEvent(new CustomEvent('ox-collapse', { bubbles: true, composed: true, detail: this }))\n  }\n\n  /**\n   * Dispatches a custom 'ox-close' event indicating that the menu item should close itself.\n   * This event can be used to trigger further interactions or logic in the application.\n   */\n  close() {\n    this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }))\n  }\n}\n"]}
+{"version":3,"file":"ox-popup-menuitem.js","sourceRoot":"","sources":["../../src/ox-popup-menuitem.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopupMenu } from './ox-popup-menu'\n\n/**\n * Custom element representing a menu item within an OxPopup menu.\n * It can contain a label and an optional submenu.\n */\n@customElement('ox-popup-menuitem')\nexport class OxPopupMenuItem extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n        position: relative;\n        align-items: center;\n      }\n\n      [icon] {\n        width: 20px;\n        display: flex;\n        flex-direction: row;\n        padding: 0;\n        margin: 0 var(--spacing-small) 0 0;\n        align-items: center;\n        justify-content: center;\n      }\n\n      [icon] > * {\n        flex: 1;\n      }\n\n      [label] {\n        flex: 1;\n        text-transform: capitalize;\n      }\n\n      ::slotted(*[slot='icon']) {\n        color: var(--ox-popup-menu-color-variant, var(--md-sys-color-on-surface-variant));\n        font-size: var(--icon-size-small);\n      }\n\n      md-icon {\n        display: block;\n        width: 24px;\n        text-align: right;\n        font-size: var(--icon-size-small);\n        color: var(--ox-popup-menu-color-variant, var(--md-sys-color-primary));\n        opacity: 0.7;\n      }\n    `\n  ]\n\n  /**\n   * Property indicating whether the menu item is active or not.\n   * When active, it may show a submenu.\n   */\n  @property({ type: Boolean }) active: boolean = false\n\n  /**\n   * The label to display for the menu item.\n   */\n  @property({ type: String }) label!: string\n\n  @state() _submenu?: OxPopupMenu\n\n  render() {\n    return html`\n      <div icon>\n        <slot name=\"icon\"> </slot>\n      </div>\n      <div label>${this.label}</div>\n\n      ${this._submenu ? html`<md-icon>chevron_right</md-icon>` : html``}\n\n      <slot @slotchange=${this._onslotchange}> </slot>\n    `\n  }\n\n  firstUpdated() {\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', this._onkeydown)\n    this.addEventListener('click', this._onclick)\n  }\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPopupMenuItem, e: MouseEvent) {\n    if (!this._submenu) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const parent = this.closest('ox-popup-menu') as OxPopupMenu\n    if (parent) {\n      parent.setActive(this)\n    }\n\n    this.dispatchEvent(new CustomEvent('select'))\n\n    requestAnimationFrame(() => {\n      this.expand(false)\n    })\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupMenuItem, e: KeyboardEvent) {\n    switch (e.key) {\n      case 'Right':\n      case 'ArrowRight':\n        e.stopPropagation()\n        this.expand(false)\n        break\n\n      case 'Left':\n      case 'ArrowLeft':\n        e.stopPropagation()\n        this.collapseSelf()\n        break\n\n      case 'Enter':\n        if (this._submenu) {\n          e.stopPropagation()\n          this.expand(false)\n        }\n        break\n    }\n  }.bind(this)\n\n  protected _onslotchange: (e: Event) => void = function (this: OxPopupMenuItem, e: Event) {\n    this._submenu = this.querySelector('ox-popup-menu') as OxPopupMenu\n  }.bind(this)\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('active')) {\n      this.updateActive()\n    }\n  }\n\n  updateActive() {\n    if (this.active) {\n      this.expand(true)\n    } else {\n      this.collapse()\n    }\n  }\n\n  /**\n   * Expands the submenu, if it exists.\n   * The submenu is displayed below and to the right of the menu item.\n   *\n   * @param {boolean} silent - If true, the submenu is opened silently without user interaction.\n   */\n  expand(silent: boolean) {\n    if (!this._submenu) {\n      return\n    }\n\n    const top = 0\n    const left = this.clientWidth\n    this._submenu.open({ top, left, silent })\n  }\n\n  /**\n   * Collapses the submenu, if it exists.\n   */\n  collapse() {\n    this._submenu?.close()\n  }\n\n  /**\n   * Dispatches a custom 'ox-collapse' event indicating that the menu item should collapse itself.\n   * This event can be used to trigger further interactions or logic in the application.\n   */\n  collapseSelf() {\n    this.dispatchEvent(new CustomEvent('ox-collapse', { bubbles: true, composed: true, detail: this }))\n  }\n\n  /**\n   * Dispatches a custom 'ox-close' event indicating that the menu item should close itself.\n   * This event can be used to trigger further interactions or logic in the application.\n   */\n  close() {\n    this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }))\n  }\n}\n"]}

package/dist/src/ox-popup.js

@@ -63,6 +63,33 @@ let OxPopup = class OxPopup extends LitElement {
             !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close();
         }.bind(this);
     }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        position: absolute;
+        display: none;
+        z-index: 100;
+        padding: 0;
+        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
+        box-sizing: border-box;
+        min-width: fit-content;
+        line-height: initial;
+        text-align: initial;
+        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));
+        color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));
+      }
+
+      :host([active]) {
+        display: flex;
+        flex-direction: column;
+      }
+
+      :host(*:focus) {
+        outline: none;
+      }
+    `
+    ]; }
     render() {
         return html `<slot />`;
     }
@@ -225,33 +252,6 @@ let OxPopup = class OxPopup extends LitElement {
         }
     }
 };
-OxPopup.styles = [
-    ScrollbarStyles,
-    css `
-      :host {
-        position: absolute;
-        display: none;
-        z-index: 100;
-        padding: 0;
-        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
-        box-sizing: border-box;
-        min-width: fit-content;
-        line-height: initial;
-        text-align: initial;
-        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));
-        color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));
-      }
-
-      :host([active]) {
-        display: flex;
-        flex-direction: column;
-      }
-
-      :host(*:focus) {
-        outline: none;
-      }
-    `
-];
 __decorate([
     property({ type: Boolean, attribute: 'prevent-close-on-blur' })
 ], OxPopup.prototype, "preventCloseOnBlur", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"ox-popup.js","sourceRoot":"","sources":["../../src/ox-popup.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD;;;;;;;;GAQG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QA6B4D,uBAAkB,GAAY,KAAK,CAAA;QAE3F,YAAO,GAAmB,IAAI,CAAA;QAE/B,eAAU,GAAgB,QAAQ,CAAC,aAA4B,CAAA;QAM7D,gBAAW,GAA4B,UAAyB,CAAa;YACrF,MAAM,EAAE,GAAG,CAAC,CAAC,aAA4B,CAAA;YAEzC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;gBACvB,sDAAsD;gBACtD,oCAAoC;gBACpC,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,CAAA;YACjE,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,eAAU,GAA+B,UAAyB,CAAgB;YAC1F,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;YACT,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,aAAQ,GAA+B,UAAyB,CAAgB;YACxF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,eAAU,GAA4B,UAAyB,CAAa;YACpF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,iBAAY,GAA4B,UAAyB,CAAa;YACtF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,mBAAc,GAAuB,UAAyB,CAAQ;YAC9E,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,eAAe;QACjB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,aAAQ,GAA4B,UAAyB,CAAa;YAClF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,aAAQ,GAAuB,UAAyB,CAAQ;YACxE,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,gBAAW,GAAuB,UAAyB,CAAQ;YAC3E,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,kBAAa,GAAuB,UAAyB,CAAQ;YAC7E,oCAAoC;YACpC,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,CAAA;QACjE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IA2Nd,CAAC;IArRC,MAAM;QACJ,OAAO,IAAI,CAAA,UAAU,CAAA;IACvB,CAAC;IA0DD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;QACnD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACjD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC7C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC7C,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACjD,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;QACrD,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;QACzD,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QAChD,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;QAEtD,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA,CAAC,8BAA8B;QACjE,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED;;;;;;;;OAQG;IACH,MAAM,CAAC,IAAI,CAAC,EACV,QAAQ,EACR,GAAG,EACH,IAAI,EACJ,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,EACL,kBAAkB,EAYnB;QACC,MAAM,KAAK,GAAG,MAAM,IAAI,QAAQ,CAAC,IAAI,CAAA;QACrC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAY,CAAA;QAC5D,IAAI,kBAAkB,EAAE,CAAC;YACvB,MAAM,CAAC,kBAAkB,GAAG,kBAAkB,CAAA;QAChD,CAAC;QACD,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAA;QAC9B,CAAC;QAED,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAExB,MAAM,CAAC,OAAO,GAAG,KAAK,CAAA;QACtB,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;QAEzB,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;QAExD,OAAO,MAAM,CAAA;IACf,CAAC;IAED;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EACH,IAAI,EACJ,GAAG,EACH,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,GAAG,KAAK,EASf;QACC,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAA;YAC3B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;QAC/B,CAAC;QAED,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;YAC7B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;QAC/B,CAAC;QAED,IAAI,IAAI,KAAK,SAAS,IAAI,GAAG,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YAC3F,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,mCAAmC,CAAA;YAC1D,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAA;YACvB,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAA;QACxB,CAAC;aAAM,CAAC;YACN,IAAI,IAAI,KAAK,SAAS;gBAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAA;YACrD,IAAI,GAAG,KAAK,SAAS;gBAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;YAClD,IAAI,KAAK,KAAK,SAAS;gBAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAA;YACxD,IAAI,MAAM,KAAK,SAAS;gBAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAA;QAC7D,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;QAE/B,wBAAwB;QACxB,qBAAqB,CAAC,GAAG,EAAE;YACzB,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAA;YACrC,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAA;YAEpC,IAAI,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;YAE3C,IAAI,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAA;YACvB,IAAI,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAA;YACtB,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAA;YACpB,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAA;YAErB,+DAA+D;YAC/D,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;gBACX,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;gBAC1F,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAA;gBAC5B,CAAC,GAAG,EAAE,CAAA;YACR,CAAC;YAED,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;gBACX,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;gBACzF,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAA;gBAC5B,CAAC,GAAG,EAAE,CAAA;YACR,CAAC;YAED,8DAA8D;YAC9D,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAA;YAE5C,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;gBACV,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,MAAM,CAAA;gBACvB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAA;YACxB,CAAC;iBAAM,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBACtB,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,aAAa,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAA,CAAC,mBAAmB;gBACxF,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAA;gBACtB,sBAAsB;gBACtB,6BAA6B;YAC/B,CAAC;YAED,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;gBACV,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,QAAQ,aAAa,CAAC,IAAI,MAAM,CAAC,GAAG,EAAE,KAAK,CAAA,CAAC,uDAAuD;gBACrH,2BAA2B;gBAC3B,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;YACvB,CAAC;iBAAM,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBACtB,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,QAAQ,aAAa,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAA,CAAC,oBAAoB;gBAC3F,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;gBACrB,uBAAuB;gBACvB,4BAA4B;YAC9B,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,gBAAgB;QAChB,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,EAAE,CAAA;QAEhC,oEAAoE;QACpE,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;IACrD,CAAC;IAED,cAAc,CAAC,MAAoB;QACjC,MAAM,SAAS,GAAG,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,aAAa,CAC9C,gIAAgI,CACjI,CAAA;QAED,IAAI,SAAS,EAAE,CAAC;YACd,CAAC;YAAC,SAAyB,CAAC,KAAK,EAAE,CAAA;QACrC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC;IACH,CAAC;IAED;;OAEG;IACH,KAAK;QACH,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;QAE9B,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAEtD,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,gEAAgE;YAChE,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;YACtD,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;YACpD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;YAChD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;YAChD,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;YACnD,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;YACzD,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;YACpD,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;YACxD,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;YAE5D,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;YAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;YAEnB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;YAClD,CAAC;QACH,CAAC;IACH,CAAC;;AAtTM,cAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;KAuBF;CACF,AA1BY,CA0BZ;AAEgE;IAAhE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;mDAAoC;AAE3F;IAAR,KAAK,EAAE;wCAA+B;AA/B5B,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAwTnB","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\n/**\n * Custom element class representing the 'ox-popup' component.\n *\n * This component provides the functionality to display a popup with various configuration options.\n * It can be used to show additional information, notifications, or user interactions within a web application.\n *\n * @fires ox-close - Dispatched when the popup is closed.\n * @fires ox-collapse - Dispatched when the popup is collapsed.\n */\n@customElement('ox-popup')\nexport class OxPopup extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: absolute;\n        display: none;\n        z-index: 100;\n        padding: 0;\n        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n        box-sizing: border-box;\n        min-width: fit-content;\n        line-height: initial;\n        text-align: initial;\n        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));\n        color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));\n      }\n\n      :host([active]) {\n        display: flex;\n        flex-direction: column;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur: boolean = false\n\n  @state() _parent: Element | null = null\n\n  private lastActive: HTMLElement = document.activeElement as HTMLElement\n\n  render() {\n    return html`<slot />`\n  }\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopup, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup은 닫혀야 한다. */\n      // @ts-ignore for preventCloseOnBlur\n      !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close()\n    }\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopup, e: KeyboardEvent) {\n    e.stopPropagation()\n\n    switch (e.key) {\n      case 'Esc': // for IE/Edge\n      case 'Escape':\n        this.close()\n        break\n    }\n  }.bind(this)\n\n  protected _onkeyup: (e: KeyboardEvent) => void = function (this: OxPopup, e: KeyboardEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmouseup: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmousedown: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _oncontextmenu: (e: Event) => void = function (this: OxPopup, e: Event) {\n    e.stopPropagation()\n    // this.close()\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclose: (e: Event) => void = function (this: OxPopup, e: Event) {\n    this.close()\n  }.bind(this)\n\n  protected _oncollapse: (e: Event) => void = function (this: OxPopup, e: Event) {\n    e.stopPropagation()\n    this.close()\n  }.bind(this)\n\n  protected _onwindowblur: (e: Event) => void = function (this: OxPopup, e: Event) {\n    // @ts-ignore for preventCloseOnBlur\n    !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close()\n  }.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.addEventListener('focusout', this._onfocusout)\n    this.addEventListener('keydown', this._onkeydown)\n    this.addEventListener('keyup', this._onkeyup)\n    this.addEventListener('click', this._onclick)\n    this.addEventListener('mouseup', this._onmouseup)\n    this.addEventListener('mousedown', this._onmousedown)\n    this.addEventListener('contextmenu', this._oncontextmenu)\n    this.addEventListener('ox-close', this._onclose)\n    this.addEventListener('ox-collapse', this._oncollapse)\n\n    this.setAttribute('tabindex', '0') // make this element focusable\n    this.guaranteeFocus()\n  }\n\n  /**\n   * Configuration for opening ox-popup\n   *\n   * @typedef {Object} PopupOpenOptions\n   * @property {HTMLTemplate} template HTMLTemplate to be displayed inside the popup\n   * @property {Number} top The position-top where the pop-up will be displayed\n   * @property {Number} left The position-left where the pop-up will be displayed\n   * @property {HTMLElement} parent Popup's parent element\n   */\n  static open({\n    template,\n    top,\n    left,\n    right,\n    bottom,\n    width,\n    height,\n    parent,\n    style,\n    preventCloseOnBlur\n  }: {\n    template: unknown\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    parent?: Element | null\n    style?: string\n    preventCloseOnBlur?: boolean\n  }): OxPopup {\n    const owner = parent || document.body\n    const target = document.createElement('ox-popup') as OxPopup\n    if (preventCloseOnBlur) {\n      target.preventCloseOnBlur = preventCloseOnBlur\n    }\n    if (style) {\n      target.style.cssText = style\n    }\n\n    render(template, target)\n\n    target._parent = owner\n    owner.appendChild(target)\n\n    target.open({ top, left, right, bottom, width, height })\n\n    return target\n  }\n\n  /**\n   * Opens the 'ox-popup' with the specified position and dimensions.\n   *\n   * @param {PopupOpenOptions} options - An object specifying the position and dimensions of the popup.\n   * @param {number} options.left - The left position (in pixels) where the popup should be displayed. If not provided, it will be centered horizontally.\n   * @param {number} options.top - The top position (in pixels) where the popup should be displayed. If not provided, it will be centered vertically.\n   * @param {number} options.right - The right position (in pixels) where the popup should be displayed. If provided, it will override the 'left' value.\n   * @param {number} options.bottom - The bottom position (in pixels) where the popup should be displayed. If provided, it will override the 'top' value.\n   * @param {string} options.width - The maximum width of the popup (CSS string). For example, '300px'.\n   * @param {string} options.height - The maximum height of the popup (CSS string). For example, '200px'.\n   * @param {boolean} [options.silent=false] - A flag indicating whether the popup should auto-focus or not. If set to true, the popup won't attempt to focus on any element.\n   */\n  open({\n    left,\n    top,\n    right,\n    bottom,\n    width,\n    height,\n    silent = false\n  }: {\n    left?: number\n    top?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    silent?: boolean\n  }) {\n    if (width) {\n      this.style.maxWidth = width\n      this.style.overflowX = 'auto'\n    }\n\n    if (height) {\n      this.style.maxHeight = height\n      this.style.overflowY = 'auto'\n    }\n\n    if (left === undefined && top === undefined && right === undefined && bottom === undefined) {\n      this.style.transform = 'translateX(-50%) translateY(-50%)'\n      this.style.left = '50%'\n      this.style.top = '50%'\n    } else {\n      if (left !== undefined) this.style.left = `${left}px`\n      if (top !== undefined) this.style.top = `${top}px`\n      if (right !== undefined) this.style.right = `${right}px`\n      if (bottom !== undefined) this.style.bottom = `${bottom}px`\n    }\n\n    this.setAttribute('active', '')\n\n    // adjust popup position\n    requestAnimationFrame(() => {\n      const vh = document.body.clientHeight\n      const vw = document.body.clientWidth\n\n      var bounding = this.getBoundingClientRect()\n\n      var h = bounding.height\n      var w = bounding.width\n      var t = bounding.top\n      var l = bounding.left\n\n      // If the popup is too large, it will cause overflow scrolling.\n      if (vh < h) {\n        this.style.height = `${Math.min(Math.max(Math.floor((vh * 2) / 3), vh - (t + 20)), vh)}px`\n        this.style.overflow = 'auto'\n        h = vh\n      }\n\n      if (vw < w) {\n        this.style.width = `${Math.min(Math.max(Math.floor((vw * 2) / 3), vw - (l + 20)), vw)}px`\n        this.style.overflow = 'auto'\n        w = vw\n      }\n\n      // To prevent pop-ups from crossing screen boundaries, use the\n      const computedStyle = getComputedStyle(this)\n\n      if (t < 0) {\n        this.style.top = '10px'\n        this.style.bottom = ''\n      } else if (vh < t + h) {\n        this.style.top = `calc(${computedStyle.top} - ${t + h - vh + 10}px)` // 현재의 top 값에 차감한다.\n        this.style.bottom = ''\n        // this.style.top = ''\n        // this.style.bottom = '10px'\n      }\n\n      if (l < 0) {\n        this.style.left = `calc(${computedStyle.left} - ${l - 10}px)` // 현재의 left 값에 l를 차감한다. (왼쪽으로 이탈했기 때문에 오른쪽으로 가야 화면에 보임)\n        // this.style.left = '10px'\n        this.style.right = ''\n      } else if (vw < l + w) {\n        this.style.left = `calc(${computedStyle.left} - ${l + w - vw + 10}px)` // 현재의 left 값에 차감한다.\n        this.style.right = ''\n        // this.style.left = ''\n        // this.style.right = '10px'\n      }\n    })\n\n    // auto focusing\n    !silent && this.guaranteeFocus()\n\n    /* When the window is out of focus, all pop-ups should disappear. */\n    window.addEventListener('blur', this._onwindowblur)\n  }\n\n  guaranteeFocus(target?: HTMLElement) {\n    const focusible = (target || this).querySelector(\n      ':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex=\"-1\"])'\n    )\n\n    if (focusible) {\n      ;(focusible as HTMLElement).focus()\n    } else {\n      this.focus()\n    }\n  }\n\n  /**\n   * Closes the 'ox-popup'.\n   */\n  close() {\n    this.removeAttribute('active')\n\n    window.removeEventListener('blur', this._onwindowblur)\n\n    if (this._parent) {\n      /* this case is when the popup is opened by OxPopup.open(...) */\n      this.removeEventListener('focusout', this._onfocusout)\n      this.removeEventListener('keydown', this._onkeydown)\n      this.removeEventListener('keyup', this._onkeyup)\n      this.removeEventListener('click', this._onclick)\n      this.removeEventListener('ox-close', this._onclose)\n      this.removeEventListener('ox-collapse', this._oncollapse)\n      this.removeEventListener('mouseup', this._onmouseup)\n      this.removeEventListener('mousedown', this._onmousedown)\n      this.removeEventListener('contextmenu', this._oncontextmenu)\n\n      this._parent.removeChild(this)\n      this._parent = null\n\n      if (this.lastActive) {\n        this.lastActive.focus && this.lastActive.focus()\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-popup.js","sourceRoot":"","sources":["../../src/ox-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\n/**\n * Custom element class representing the 'ox-popup' component.\n *\n * This component provides the functionality to display a popup with various configuration options.\n * It can be used to show additional information, notifications, or user interactions within a web application.\n *\n * @fires ox-close - Dispatched when the popup is closed.\n * @fires ox-collapse - Dispatched when the popup is collapsed.\n */\n@customElement('ox-popup')\nexport class OxPopup extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: absolute;\n        display: none;\n        z-index: 100;\n        padding: 0;\n        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n        box-sizing: border-box;\n        min-width: fit-content;\n        line-height: initial;\n        text-align: initial;\n        background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));\n        color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));\n      }\n\n      :host([active]) {\n        display: flex;\n        flex-direction: column;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur: boolean = false\n\n  @state() _parent: Element | null = null\n\n  private lastActive: HTMLElement = document.activeElement as HTMLElement\n\n  render() {\n    return html`<slot />`\n  }\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopup, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup은 닫혀야 한다. */\n      // @ts-ignore for preventCloseOnBlur\n      !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close()\n    }\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopup, e: KeyboardEvent) {\n    e.stopPropagation()\n\n    switch (e.key) {\n      case 'Esc': // for IE/Edge\n      case 'Escape':\n        this.close()\n        break\n    }\n  }.bind(this)\n\n  protected _onkeyup: (e: KeyboardEvent) => void = function (this: OxPopup, e: KeyboardEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmouseup: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmousedown: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _oncontextmenu: (e: Event) => void = function (this: OxPopup, e: Event) {\n    e.stopPropagation()\n    // this.close()\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclose: (e: Event) => void = function (this: OxPopup, e: Event) {\n    this.close()\n  }.bind(this)\n\n  protected _oncollapse: (e: Event) => void = function (this: OxPopup, e: Event) {\n    e.stopPropagation()\n    this.close()\n  }.bind(this)\n\n  protected _onwindowblur: (e: Event) => void = function (this: OxPopup, e: Event) {\n    // @ts-ignore for preventCloseOnBlur\n    !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close()\n  }.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.addEventListener('focusout', this._onfocusout)\n    this.addEventListener('keydown', this._onkeydown)\n    this.addEventListener('keyup', this._onkeyup)\n    this.addEventListener('click', this._onclick)\n    this.addEventListener('mouseup', this._onmouseup)\n    this.addEventListener('mousedown', this._onmousedown)\n    this.addEventListener('contextmenu', this._oncontextmenu)\n    this.addEventListener('ox-close', this._onclose)\n    this.addEventListener('ox-collapse', this._oncollapse)\n\n    this.setAttribute('tabindex', '0') // make this element focusable\n    this.guaranteeFocus()\n  }\n\n  /**\n   * Configuration for opening ox-popup\n   *\n   * @typedef {Object} PopupOpenOptions\n   * @property {HTMLTemplate} template HTMLTemplate to be displayed inside the popup\n   * @property {Number} top The position-top where the pop-up will be displayed\n   * @property {Number} left The position-left where the pop-up will be displayed\n   * @property {HTMLElement} parent Popup's parent element\n   */\n  static open({\n    template,\n    top,\n    left,\n    right,\n    bottom,\n    width,\n    height,\n    parent,\n    style,\n    preventCloseOnBlur\n  }: {\n    template: unknown\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    parent?: Element | null\n    style?: string\n    preventCloseOnBlur?: boolean\n  }): OxPopup {\n    const owner = parent || document.body\n    const target = document.createElement('ox-popup') as OxPopup\n    if (preventCloseOnBlur) {\n      target.preventCloseOnBlur = preventCloseOnBlur\n    }\n    if (style) {\n      target.style.cssText = style\n    }\n\n    render(template, target)\n\n    target._parent = owner\n    owner.appendChild(target)\n\n    target.open({ top, left, right, bottom, width, height })\n\n    return target\n  }\n\n  /**\n   * Opens the 'ox-popup' with the specified position and dimensions.\n   *\n   * @param {PopupOpenOptions} options - An object specifying the position and dimensions of the popup.\n   * @param {number} options.left - The left position (in pixels) where the popup should be displayed. If not provided, it will be centered horizontally.\n   * @param {number} options.top - The top position (in pixels) where the popup should be displayed. If not provided, it will be centered vertically.\n   * @param {number} options.right - The right position (in pixels) where the popup should be displayed. If provided, it will override the 'left' value.\n   * @param {number} options.bottom - The bottom position (in pixels) where the popup should be displayed. If provided, it will override the 'top' value.\n   * @param {string} options.width - The maximum width of the popup (CSS string). For example, '300px'.\n   * @param {string} options.height - The maximum height of the popup (CSS string). For example, '200px'.\n   * @param {boolean} [options.silent=false] - A flag indicating whether the popup should auto-focus or not. If set to true, the popup won't attempt to focus on any element.\n   */\n  open({\n    left,\n    top,\n    right,\n    bottom,\n    width,\n    height,\n    silent = false\n  }: {\n    left?: number\n    top?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    silent?: boolean\n  }) {\n    if (width) {\n      this.style.maxWidth = width\n      this.style.overflowX = 'auto'\n    }\n\n    if (height) {\n      this.style.maxHeight = height\n      this.style.overflowY = 'auto'\n    }\n\n    if (left === undefined && top === undefined && right === undefined && bottom === undefined) {\n      this.style.transform = 'translateX(-50%) translateY(-50%)'\n      this.style.left = '50%'\n      this.style.top = '50%'\n    } else {\n      if (left !== undefined) this.style.left = `${left}px`\n      if (top !== undefined) this.style.top = `${top}px`\n      if (right !== undefined) this.style.right = `${right}px`\n      if (bottom !== undefined) this.style.bottom = `${bottom}px`\n    }\n\n    this.setAttribute('active', '')\n\n    // adjust popup position\n    requestAnimationFrame(() => {\n      const vh = document.body.clientHeight\n      const vw = document.body.clientWidth\n\n      var bounding = this.getBoundingClientRect()\n\n      var h = bounding.height\n      var w = bounding.width\n      var t = bounding.top\n      var l = bounding.left\n\n      // If the popup is too large, it will cause overflow scrolling.\n      if (vh < h) {\n        this.style.height = `${Math.min(Math.max(Math.floor((vh * 2) / 3), vh - (t + 20)), vh)}px`\n        this.style.overflow = 'auto'\n        h = vh\n      }\n\n      if (vw < w) {\n        this.style.width = `${Math.min(Math.max(Math.floor((vw * 2) / 3), vw - (l + 20)), vw)}px`\n        this.style.overflow = 'auto'\n        w = vw\n      }\n\n      // To prevent pop-ups from crossing screen boundaries, use the\n      const computedStyle = getComputedStyle(this)\n\n      if (t < 0) {\n        this.style.top = '10px'\n        this.style.bottom = ''\n      } else if (vh < t + h) {\n        this.style.top = `calc(${computedStyle.top} - ${t + h - vh + 10}px)` // 현재의 top 값에 차감한다.\n        this.style.bottom = ''\n        // this.style.top = ''\n        // this.style.bottom = '10px'\n      }\n\n      if (l < 0) {\n        this.style.left = `calc(${computedStyle.left} - ${l - 10}px)` // 현재의 left 값에 l를 차감한다. (왼쪽으로 이탈했기 때문에 오른쪽으로 가야 화면에 보임)\n        // this.style.left = '10px'\n        this.style.right = ''\n      } else if (vw < l + w) {\n        this.style.left = `calc(${computedStyle.left} - ${l + w - vw + 10}px)` // 현재의 left 값에 차감한다.\n        this.style.right = ''\n        // this.style.left = ''\n        // this.style.right = '10px'\n      }\n    })\n\n    // auto focusing\n    !silent && this.guaranteeFocus()\n\n    /* When the window is out of focus, all pop-ups should disappear. */\n    window.addEventListener('blur', this._onwindowblur)\n  }\n\n  guaranteeFocus(target?: HTMLElement) {\n    const focusible = (target || this).querySelector(\n      ':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex=\"-1\"])'\n    )\n\n    if (focusible) {\n      ;(focusible as HTMLElement).focus()\n    } else {\n      this.focus()\n    }\n  }\n\n  /**\n   * Closes the 'ox-popup'.\n   */\n  close() {\n    this.removeAttribute('active')\n\n    window.removeEventListener('blur', this._onwindowblur)\n\n    if (this._parent) {\n      /* this case is when the popup is opened by OxPopup.open(...) */\n      this.removeEventListener('focusout', this._onfocusout)\n      this.removeEventListener('keydown', this._onkeydown)\n      this.removeEventListener('keyup', this._onkeyup)\n      this.removeEventListener('click', this._onclick)\n      this.removeEventListener('ox-close', this._onclose)\n      this.removeEventListener('ox-collapse', this._oncollapse)\n      this.removeEventListener('mouseup', this._onmouseup)\n      this.removeEventListener('mousedown', this._onmousedown)\n      this.removeEventListener('contextmenu', this._oncontextmenu)\n\n      this._parent.removeChild(this)\n      this._parent = null\n\n      if (this.lastActive) {\n        this.lastActive.focus && this.lastActive.focus()\n      }\n    }\n  }\n}\n"]}