@operato/popup 1.0.0-beta.8 → 1.0.6

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

@@ -0,0 +1,349 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+let OxFloatingOverlay = class OxFloatingOverlay extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.backdrop = false;
+        this.title = '';
+        this.closable = false;
+        this.historical = false;
+    }
+    render() {
+        var direction = this.hovering == 'center' ? false : this.direction;
+        return html `
+      ${Boolean(this.backdrop)
+            ? html ` <div id="backdrop" ?hidden=${!this.backdrop} @click=${() => this.onClose(true)}></div> `
+            : html ``}
+
+      <div
+        overlayed
+        hovering=${this.hovering || 'center'}
+        direction=${direction}
+        size=${this.size || 'medium'}
+        @close-overlay=${(e) => {
+            e.stopPropagation();
+            this.onClose();
+        }}
+        @transitionstart=${(e) => {
+            /* to hide scrollbar during transition */
+            ;
+            e.target.removeAttribute('settled');
+        }}
+        @transitionend=${(e) => {
+            ;
+            e.target.setAttribute('settled', '');
+        }}
+      >
+        <div header>
+          <mwc-icon @click=${() => this.onClose()} ?closable=${this.closable} historyback>arrow_back</mwc-icon>
+          <slot name="header">
+            ${this.title || this.closable
+            ? html `
+                  <h1>
+                    ${this.title || ''}&nbsp;${this.help
+                ? html ` <ox-help-icon .topic=${this.help}></ox-help-icon>`
+                : html ``}
+                  </h1>
+                `
+            : html ``}</slot
+          >
+          <mwc-icon @click=${() => this.onClose()} ?closable=${this.closable} close>close</mwc-icon>
+        </div>
+
+        <div content>
+          <slot> </slot>
+        </div>
+      </div>
+    `;
+    }
+    updated(changes) {
+        if (changes.has('templateProperties') && this.templateProperties) {
+            var template = this.firstElementChild;
+            if (template) {
+                for (let prop in this.templateProperties) {
+                    //@ts-ignore
+                    template[prop] = this.templateProperties[prop];
+                }
+            }
+        }
+    }
+    firstUpdated() {
+        requestAnimationFrame(() => {
+            var _a;
+            /* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */
+            (_a = this.renderRoot.querySelector('[overlayed]')) === null || _a === void 0 ? void 0 : _a.setAttribute('opened', 'true');
+        });
+    }
+    disconnectedCallback() {
+        document.dispatchEvent(new CustomEvent('overlay-closed', {
+            detail: this.name
+        }));
+        super.disconnectedCallback();
+    }
+    close() {
+        var _a;
+        (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this);
+    }
+    onClose(escape) {
+        /* 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. */
+        if (this.historical) {
+            var state = history.state;
+            var overlay = (state || {}).overlay;
+            if (!overlay || overlay.name !== this.name) {
+                return;
+            }
+            /* Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */
+            if (escape && !overlay.escapable) {
+                return true;
+            }
+            history.back();
+        }
+        else {
+            this.close();
+        }
+    }
+};
+OxFloatingOverlay.styles = [
+    ScrollbarStyles,
+    css `
+      /* for layout style */
+      :host {
+        position: relative;
+        z-index: 1;
+      }
+
+      :host([hovering='edge']) {
+        /* edge hovering 인 경우에는 상위 relative position 크기와 위치를 반영한다. */
+        position: initial;
+      }
+
+      #backdrop {
+        position: fixed;
+        left: 0;
+        top: 0;
+
+        width: 100vw;
+        height: 100vh;
+
+        background-color: var(--overlay-background-color);
+      }
+
+      [overlayed] {
+        position: absolute;
+
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background: transparent;
+        pointer-events: none;
+      }
+
+      [overlayed][hovering='center'] {
+        position: fixed;
+
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+
+        opacity: 0;
+      }
+
+      [overlayed][hovering='center'][opened] {
+        opacity: 1;
+        transition: opacity 0.3s ease-in;
+      }
+
+      [hovering='center'] {
+        width: var(--overlay-center-normal-width, 60%);
+        height: var(--overlay-center-normal-height, 60%);
+      }
+
+      [hovering='center'][size='small'] {
+        width: var(--overlay-center-small-width, 40%);
+        height: var(--overlay-center-small-height, 40%);
+      }
+
+      [hovering='center'][size='large'] {
+        width: var(--overlay-center-large-width, 100%);
+        height: var(--overlay-center-large-height, 100%);
+      }
+
+      [header] {
+        --help-icon-color: #fff;
+        --help-icon-hover-color: #fff;
+
+        pointer-events: initial;
+      }
+
+      [content] {
+        flex: 1;
+
+        overflow: hidden;
+      }
+
+      ::slotted(*) {
+        box-sizing: border-box;
+        pointer-events: initial;
+      }
+
+      [hovering='center'] [content] ::slotted(*) {
+        width: 100%;
+        height: 100%;
+      }
+      [direction='up'],
+      [direction='down'] {
+        width: 100%;
+
+        max-height: 0;
+        transition: max-height 0.7s ease-in;
+      }
+      [direction='up'] {
+        bottom: 0;
+      }
+      [direction='down'] {
+        top: 0;
+      }
+
+      [direction='up'][opened],
+      [direction='down'][opened] {
+        max-height: 100vh;
+      }
+
+      [settled][direction='down'] [content],
+      [settled][direction='up'] [content] {
+        overflow-y: auto;
+      }
+
+      [direction='left'],
+      [direction='right'] {
+        height: 100%;
+
+        max-width: 0;
+        transition: max-width 0.5s ease-in;
+      }
+      [direction='left'] {
+        right: 0;
+      }
+      [direction='right'] {
+        left: 0;
+      }
+
+      [direction='left'][opened],
+      [direction='right'][opened] {
+        max-width: 100vw;
+      }
+
+      [settled][direction='left'] [content],
+      [settled][direction='right'] [content] {
+        overflow-x: auto;
+      }
+
+      @media screen and (max-width: 460px) {
+        [direction='up'],
+        [direction='down'] {
+          max-height: 100vh;
+        }
+
+        [direction='left'],
+        [direction='right'] {
+          max-width: 100vw;
+        }
+      }
+    `,
+    css `
+      /* for header style */
+      [header] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        background-color: var(--overlay-header-background-color);
+        color: var(--overlay-header-color);
+      }
+
+      slot[name='header'] {
+        flex: 1;
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      }
+
+      [name='header']::slotted(*) {
+        margin: 0 auto;
+      }
+
+      [name='header'] > h1 {
+        text-transform: capitalize;
+        font: var(--overlay-header-font);
+      }
+
+      [historyback] {
+        margin-left: 10px;
+        margin-right: auto;
+      }
+
+      [close] {
+        margin-left: auto;
+        margin-right: 10px;
+      }
+
+      [historyback],
+      [close] {
+        display: none;
+      }
+
+      [closable][close] {
+        display: block;
+      }
+
+      @media screen and (max-width: 460px) {
+        [closable][historyback] {
+          display: block;
+        }
+
+        [closable][close] {
+          display: none;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Boolean })
+], OxFloatingOverlay.prototype, "backdrop", void 0);
+__decorate([
+    property({ type: String })
+], OxFloatingOverlay.prototype, "direction", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], OxFloatingOverlay.prototype, "hovering", void 0);
+__decorate([
+    property({ type: String })
+], OxFloatingOverlay.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], OxFloatingOverlay.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], OxFloatingOverlay.prototype, "title", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxFloatingOverlay.prototype, "closable", void 0);
+__decorate([
+    property({ type: Object })
+], OxFloatingOverlay.prototype, "templateProperties", void 0);
+__decorate([
+    property({ type: Object })
+], OxFloatingOverlay.prototype, "help", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxFloatingOverlay.prototype, "historical", void 0);
+OxFloatingOverlay = __decorate([
+    customElement('ox-floating-overlay')
+], OxFloatingOverlay);
+export { OxFloatingOverlay };
+//# sourceMappingURL=ox-floating-overlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-floating-overlay.js","sourceRoot":"","sources":["../../src/ox-floating-overlay.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\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: 1;\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\n        background-color: var(--overlay-background-color);\n      }\n\n      [overlayed] {\n        position: absolute;\n\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        background: transparent;\n        pointer-events: none;\n      }\n\n      [overlayed][hovering='center'] {\n        position: fixed;\n\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n\n        opacity: 0;\n      }\n\n      [overlayed][hovering='center'][opened] {\n        opacity: 1;\n        transition: opacity 0.3s ease-in;\n      }\n\n      [hovering='center'] {\n        width: var(--overlay-center-normal-width, 60%);\n        height: var(--overlay-center-normal-height, 60%);\n      }\n\n      [hovering='center'][size='small'] {\n        width: var(--overlay-center-small-width, 40%);\n        height: var(--overlay-center-small-height, 40%);\n      }\n\n      [hovering='center'][size='large'] {\n        width: var(--overlay-center-large-width, 100%);\n        height: var(--overlay-center-large-height, 100%);\n      }\n\n      [header] {\n        --help-icon-color: #fff;\n        --help-icon-hover-color: #fff;\n\n        pointer-events: initial;\n      }\n\n      [content] {\n        flex: 1;\n\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      }\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        }\n\n        [direction='left'],\n        [direction='right'] {\n          max-width: 100vw;\n        }\n      }\n    `,\n    css`\n      /* for header style */\n      [header] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n\n        background-color: var(--overlay-header-background-color);\n        color: var(--overlay-header-color);\n      }\n\n      slot[name='header'] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: center;\n      }\n\n      [name='header']::slotted(*) {\n        margin: 0 auto;\n      }\n\n      [name='header'] > h1 {\n        text-transform: capitalize;\n        font: var(--overlay-header-font);\n      }\n\n      [historyback] {\n        margin-left: 10px;\n        margin-right: auto;\n      }\n\n      [close] {\n        margin-left: auto;\n        margin-right: 10px;\n      }\n\n      [historyback],\n      [close] {\n        display: none;\n      }\n\n      [closable][close] {\n        display: block;\n      }\n\n      @media screen and (max-width: 460px) {\n        [closable][historyback] {\n          display: block;\n        }\n\n        [closable][close] {\n          display: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) backdrop?: boolean = false\n  @property({ type: String }) direction?: 'up' | 'down' | 'left' | 'right'\n  @property({ type: String, reflect: true }) hovering?: 'center' | 'edge' | 'next'\n  @property({ type: String }) size?: 'small' | 'medium' | 'large'\n  @property({ type: String }) name?: string\n  @property({ type: String }) title: string = ''\n  @property({ type: Boolean }) closable?: boolean = false\n  @property({ type: Object }) templateProperties: any\n  @property({ type: Object }) help: any\n  @property({ type: Boolean }) historical?: boolean = false\n\n  render() {\n    var direction = this.hovering == 'center' ? false : this.direction\n\n    return html`\n      ${Boolean(this.backdrop)\n        ? html` <div id=\"backdrop\" ?hidden=${!this.backdrop} @click=${() => this.onClose(true)}></div> `\n        : html``}\n\n      <div\n        overlayed\n        hovering=${this.hovering || 'center'}\n        direction=${direction}\n        size=${this.size || 'medium'}\n        @close-overlay=${(e: Event) => {\n          e.stopPropagation()\n          this.onClose()\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      >\n        <div header>\n          <mwc-icon @click=${() => this.onClose()} ?closable=${this.closable} historyback>arrow_back</mwc-icon>\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``}</slot\n          >\n          <mwc-icon @click=${() => this.onClose()} ?closable=${this.closable} close>close</mwc-icon>\n        </div>\n\n        <div content>\n          <slot> </slot>\n        </div>\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('templateProperties') && this.templateProperties) {\n      var template = this.firstElementChild\n      if (template) {\n        for (let prop in this.templateProperties) {\n          //@ts-ignore\n          template[prop] = this.templateProperties[prop]\n        }\n      }\n    }\n  }\n\n  firstUpdated() {\n    requestAnimationFrame(() => {\n      /* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */\n      this.renderRoot.querySelector('[overlayed]')?.setAttribute('opened', 'true')\n    })\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('overlay-closed', {\n        detail: this.name\n      })\n    )\n\n    super.disconnectedCallback()\n  }\n\n  close() {\n    this.parentElement?.removeChild(this)\n  }\n\n  onClose(escape?: boolean) {\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.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
+import { css, html, LitElement } from 'lit';
+import { render } from 'lit-html';
 import { customElement, state } from 'lit/decorators.js';
 import { ScrollbarStyles } from '@operato/styles';
-import { render } from 'lit-html';
 let OxPopup = class OxPopup extends LitElement {
     constructor() {
         super(...arguments);
@@ -158,6 +158,8 @@ OxPopup.styles = [
         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;
       }
 
       :host([active]) {

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

@@ -1 +1 @@
-{"version":3,"file":"ox-popup.js","sourceRoot":"","sources":["../../src/ox-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { render } from 'lit-html'\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        background-color: var(--theme-white-color, #fff);\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      }\n\n      :host([active]) {\n        display: block;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n    `\n  ]\n\n  @state() _parent?: Element\n\n  render() {\n    return html` <slot> </slot> `\n  }\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopup, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup은 닫혀야 한다. */\n      // @ts-ignore for debug\n      !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 _oncontext: (e: Event) => void = function (this: OxPopup, e: Event) {\n    e.stopPropagation()\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 debug\n    !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('context', this._oncontext)\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\n  /**\n   * Open Popup\n   *\n   * @param {PopupOpenOptions}\n   */\n  static open({\n    template,\n    top,\n    left,\n    right,\n    bottom,\n    width,\n    height,\n    parent\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  }): OxPopup {\n    const owner = parent || document.body\n    const target = document.createElement('ox-popup') as OxPopup\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  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.width = width\n    }\n    if (height) {\n      this.style.height = height\n    }\n\n    if (left === undefined && top === undefined && right === undefined && bottom === undefined) {\n      this.style.left = '50%'\n      this.style.top = '50%'\n      this.style.transform = 'translateX(-50%) translateY(-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    !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() {\n    const focusible = 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  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('context', this._oncontext)\n\n      this._parent.removeChild(this)\n      delete this._parent\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, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\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        background-color: var(--theme-white-color, #fff);\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      }\n\n      :host([active]) {\n        display: block;\n      }\n\n      :host(*:focus) {\n        outline: none;\n      }\n    `\n  ]\n\n  @state() _parent?: Element\n\n  render() {\n    return html` <slot> </slot> `\n  }\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopup, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup은 닫혀야 한다. */\n      // @ts-ignore for debug\n      !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 _oncontext: (e: Event) => void = function (this: OxPopup, e: Event) {\n    e.stopPropagation()\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 debug\n    !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('context', this._oncontext)\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\n  /**\n   * Open Popup\n   *\n   * @param {PopupOpenOptions}\n   */\n  static open({\n    template,\n    top,\n    left,\n    right,\n    bottom,\n    width,\n    height,\n    parent\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  }): OxPopup {\n    const owner = parent || document.body\n    const target = document.createElement('ox-popup') as OxPopup\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  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.width = width\n    }\n    if (height) {\n      this.style.height = height\n    }\n\n    if (left === undefined && top === undefined && right === undefined && bottom === undefined) {\n      this.style.left = '50%'\n      this.style.top = '50%'\n      this.style.transform = 'translateX(-50%) translateY(-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    !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() {\n    const focusible = 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  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('context', this._oncontext)\n\n      this._parent.removeChild(this)\n      delete this._parent\n    }\n  }\n}\n"]}

package/dist/stories/open-popup.stories.d.ts

@@ -0,0 +1,46 @@
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        title: {
+            constol: string;
+        };
+        size: {
+            control: string;
+            options: string[];
+        };
+        hovering: {
+            control: string;
+            options: string[];
+        };
+        closable: {
+            control: string;
+        };
+        escapable: {
+            control: string;
+        };
+        backdrop: {
+            control: string;
+        };
+        help: {
+            constol: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    title: string;
+    size: 'large' | 'medium' | 'small';
+    hovering: 'center' | 'next' | 'edge';
+    closable: boolean;
+    escapable: boolean;
+    backdrop: boolean;
+    help: string;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/open-popup.stories.js

@@ -0,0 +1,51 @@
+import { html } from 'lit';
+import { openPopup } from '../src/open-popup';
+export default {
+    title: 'openPopup',
+    component: 'ox-popup',
+    argTypes: {
+        title: { constol: 'string' },
+        size: { control: 'select', options: ['large', 'medium', 'small'] },
+        hovering: { control: 'select', options: ['center', 'next', 'edge'] },
+        closable: { control: 'boolean' },
+        escapable: { control: 'boolean' },
+        backdrop: { control: 'boolean' },
+        help: { constol: 'string' }
+    }
+};
+function popup(e, options) {
+    const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
+    return openPopup(html `<img src=${noImage} />`, options);
+}
+const Template = ({ title = '', size = 'medium', hovering = 'center', closable, escapable, backdrop, help }) => html `
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+    <style>
+      #place {
+        width: 100%;
+        height: 500px;
+        background: lightgreen;
+        text-align: center;
+        line-height: 500px;
+      }
+    </style>
+
+    <div
+      id="place"
+      @click=${(e) => popup(e, { title, size, hovering, closable, escapable, backdrop, help })}
+    >
+      Click this to popup image
+    </div>
+  `;
+export const Regular = Template.bind({});
+Regular.args = {
+    title: 'Regular popup',
+    size: 'medium',
+    hovering: 'center',
+    closable: true,
+    escapable: true,
+    backdrop: true,
+    help: ''
+};
+//# sourceMappingURL=open-popup.stories.js.map

package/dist/stories/open-popup.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"open-popup.stories.js","sourceRoot":"","sources":["../../stories/open-popup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,SAAS,EAAgB,MAAM,mBAAmB,CAAA;AAE3D,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE;QAClE,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE;QACpE,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAA;AAkBD,SAAS,KAAK,CAAC,CAAa,EAAE,OAAqB;IACjD,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,OAAO,SAAS,CAAC,IAAI,CAAA,YAAY,OAAO,KAAK,EAAE,OAAO,CAAC,CAAA;AACzD,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,QAAQ,EACnB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,EACK,EAAE,EAAE,CACb,IAAI,CAAA;;;;;;;;;;;;;;;;eAgBS,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;;;GAIvG,CAAA;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,EAAE;CACT,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport { openPopup, PopupOptions } from '../src/open-popup'\n\nexport default {\n  title: 'openPopup',\n  component: 'ox-popup',\n  argTypes: {\n    title: { constol: 'string' },\n    size: { control: 'select', options: ['large', 'medium', 'small'] },\n    hovering: { control: 'select', options: ['center', 'next', 'edge'] },\n    closable: { control: 'boolean' },\n    escapable: { control: 'boolean' },\n    backdrop: { control: 'boolean' },\n    help: { constol: 'string' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  title: string\n  size: 'large' | 'medium' | 'small'\n  hovering: 'center' | 'next' | 'edge'\n  closable: boolean\n  escapable: boolean\n  backdrop: boolean\n  help: string\n}\n\nfunction popup(e: MouseEvent, options: PopupOptions) {\n  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n  return openPopup(html`<img src=${noImage} />`, options)\n}\n\nconst Template: Story<ArgTypes> = ({\n  title = '',\n  size = 'medium',\n  hovering = 'center',\n  closable,\n  escapable,\n  backdrop,\n  help\n}: ArgTypes) =>\n  html`\n    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n\n    <style>\n      #place {\n        width: 100%;\n        height: 500px;\n        background: lightgreen;\n        text-align: center;\n        line-height: 500px;\n      }\n    </style>\n\n    <div\n      id=\"place\"\n      @click=${(e: MouseEvent) => popup(e, { title, size, hovering, closable, escapable, backdrop, help })}\n    >\n      Click this to popup image\n    </div>\n  `\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  title: 'Regular popup',\n  size: 'medium',\n  hovering: 'center',\n  closable: true,\n  escapable: true,\n  backdrop: true,\n  help: ''\n}\n"]}

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

@@ -0,0 +1,18 @@
+import '@material/mwc-icon';
+import '@operato/input/ox-checkbox.js';
+import '../src/ox-popup-list.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {};
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+}
+export declare const Regular: Story<ArgTypes>;

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

@@ -0,0 +1,50 @@
+import '@material/mwc-icon';
+import '@operato/input/ox-checkbox.js';
+import '../src/ox-popup-list.js';
+import { html } from 'lit';
+export default {
+    title: 'OxPopuList',
+    component: 'ox-popup-list',
+    argTypes: {}
+};
+function popup(e) {
+    const popupList = document.querySelector('#popup-list');
+    popupList === null || popupList === void 0 ? void 0 : popupList.open({
+        top: e.pageY,
+        left: e.pageX
+    });
+}
+const Template = ({}) => html `
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <style>
+      #place {
+        width: 100%;
+        height: 500px;
+        background: lightgreen;
+        text-align: center;
+        line-height: 500px;
+      }
+    </style>
+
+    <div id="place" @click=${(e) => popup(e)}>Click this to popup list</div>
+    <ox-popup-list id="popup-list" @select=${(e) => console.log('select', e.target)} multiple>
+      <div option>Plain Text</div>
+
+      <div option>
+        <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
+      </div>
+
+      <div option>
+        <input id="checkbox-01" type="checkbox" />
+        <label for="checkbox-01">custom option</label>
+      </div>
+      
+      <div option>
+        <label for="text-01">value</label>
+        <input id="text-01" type="text" value="Plain text input" />
+      </div>
+    </ox-popup-list>
+  `;
+export const Regular = Template.bind({});
+Regular.args = {};
+//# sourceMappingURL=ox-popup-list.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-popup-list.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAI1C,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,KAAK;QACZ,IAAI,EAAE,CAAC,CAAC,KAAK;KACd,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CACjD,IAAI,CAAA;;;;;;;;;;;;6BAYuB,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;6CACX,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;GAiBvF,CAAA;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/mwc-icon'\nimport '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-list.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\n\nexport default {\n  title: 'OxPopuList',\n  component: 'ox-popup-list',\n  argTypes: {}\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nfunction popup(e: MouseEvent) {\n  const popupList = document.querySelector('#popup-list') as OxPopupList\n  popupList?.open({\n    top: e.pageY,\n    left: e.pageX\n  })\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) =>\n  html`\n    <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n    <style>\n      #place {\n        width: 100%;\n        height: 500px;\n        background: lightgreen;\n        text-align: center;\n        line-height: 500px;\n      }\n    </style>\n\n    <div id=\"place\" @click=${(e: MouseEvent) => popup(e)}>Click this to popup list</div>\n    <ox-popup-list id=\"popup-list\" @select=${(e: Event) => console.log('select', e.target)} multiple>\n      <div option>Plain Text</div>\n\n      <div option>\n        <ox-checkbox label=\"checkbox\" slot=\"icon\" checked />checkbox</ox-checkbox>\n      </div>\n\n      <div option>\n        <input id=\"checkbox-01\" type=\"checkbox\" />\n        <label for=\"checkbox-01\">custom option</label>\n      </div>\n      \n      <div option>\n        <label for=\"text-01\">value</label>\n        <input id=\"text-01\" type=\"text\" value=\"Plain text input\" />\n      </div>\n    </ox-popup-list>\n  `\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

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

@@ -0,0 +1,19 @@
+import '../src/ox-popup-menu.js';
+import '../src/ox-popup-menuitem.js';
+import '@material/mwc-icon';
+import '@operato/input/ox-checkbox.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {};
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+}
+export declare const Regular: Story<ArgTypes>;