@operato/popup 1.4.86 → 1.5.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.5.1](https://github.com/hatiolab/operato/compare/v1.5.0...v1.5.1) (2023-10-07)
+
+
+### :bug: Bug Fix
+
+* ox-prompt style ([7df21cb](https://github.com/hatiolab/operato/commit/7df21cb0af5870805f7a33015004a2fa1a1d6ed3))
+* prompt style ([5b774f3](https://github.com/hatiolab/operato/commit/5b774f39bcba10172f3f69a88cebc0cfaee22ff8))
+
+
+
+## [1.5.0](https://github.com/hatiolab/operato/compare/v1.4.87...v1.5.0) (2023-10-07)
+
+
+### :rocket: New Features
+
+* ox-prompt ([3434709](https://github.com/hatiolab/operato/commit/34347091634a19fae3ed7e856b08389e5262c246))
+
+
+
 ### [1.4.86](https://github.com/hatiolab/operato/compare/v1.4.85...v1.4.86) (2023-09-30)
 
 

package/dist/src/ox-prompt.d.ts

@@ -0,0 +1,70 @@
+import '@material/mwc-button';
+import { LitElement } from 'lit';
+export declare class OxPrompt extends LitElement {
+    static styles: import("lit").CSSResult[];
+    type?: 'success' | 'error' | 'warning' | 'info' | 'question';
+    icon?: string;
+    titler?: string;
+    text?: string;
+    footer?: string;
+    toast?: boolean;
+    confirmButton?: {
+        text: string;
+        color?: string;
+    };
+    cancelButton?: {
+        text: string;
+        color?: string;
+    };
+    callback?: Function;
+    _parent?: Element;
+    private resolveFn;
+    render(): import("lit-html").TemplateResult<1>;
+    onConfirm(): void;
+    onCancel(): void;
+    protected _onfocusout: (e: FocusEvent) => void;
+    protected _onkeydown: (e: KeyboardEvent) => void;
+    protected _onkeyup: (e: KeyboardEvent) => void;
+    protected _onmouseup: (e: MouseEvent) => void;
+    protected _onmousedown: (e: MouseEvent) => void;
+    protected _oncontext: (e: Event) => void;
+    protected _onclick: (e: MouseEvent) => void;
+    protected _onclose: (e: Event) => void;
+    protected _oncollapse: (e: Event) => void;
+    protected _onwindowblur: (e: Event) => void;
+    connectedCallback(): void;
+    static open({ template, type, icon, title, text, footer, confirmButton, cancelButton, top, left, right, bottom, width, height, parent }: {
+        template?: unknown;
+        type?: 'success' | 'error' | 'warning' | 'info' | 'question';
+        icon?: 'success' | 'error' | 'warning' | 'info' | 'question';
+        title?: string;
+        text?: string;
+        footer?: string;
+        confirmButton?: {
+            text: string;
+            color?: string;
+        };
+        cancelButton?: {
+            text: string;
+            color?: string;
+        };
+        top?: number;
+        left?: number;
+        right?: number;
+        bottom?: number;
+        width?: string;
+        height?: string;
+        parent?: Element | null;
+    }): Promise<boolean>;
+    open({ left, top, right, bottom, width, height, silent }: {
+        left?: number;
+        top?: number;
+        right?: number;
+        bottom?: number;
+        width?: string;
+        height?: string;
+        silent?: boolean;
+    }): Promise<boolean>;
+    guaranteeFocus(target?: HTMLElement): void;
+    close(): void;
+}

package/dist/src/ox-prompt.js

@@ -0,0 +1,298 @@
+import { __decorate } from "tslib";
+import '@material/mwc-button';
+import { css, html, nothing, LitElement } from 'lit';
+import { render } from 'lit-html';
+import { customElement, property, state } from 'lit/decorators.js';
+let OxPrompt = class OxPrompt extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.titler = '';
+        this.resolveFn = null;
+        this._onfocusout = function (e) {
+            const to = e.relatedTarget;
+            if (!this.contains(to)) {
+                /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-prompt은 닫혀야 한다. */
+                // @ts-ignore for debug
+                !window.POPUP_DEBUG && this.close();
+            }
+        }.bind(this);
+        this._onkeydown = function (e) {
+            e.stopPropagation();
+            switch (e.key) {
+                case 'Esc': // for IE/Edge
+                case 'Escape':
+                    this.close();
+                    break;
+            }
+        }.bind(this);
+        this._onkeyup = function (e) {
+            e.stopPropagation();
+        }.bind(this);
+        this._onmouseup = function (e) {
+            e.stopPropagation();
+        }.bind(this);
+        this._onmousedown = function (e) {
+            e.stopPropagation();
+        }.bind(this);
+        this._oncontext = function (e) {
+            e.stopPropagation();
+        }.bind(this);
+        this._onclick = function (e) {
+            e.stopPropagation();
+        }.bind(this);
+        this._onclose = function (e) {
+            this.close();
+        }.bind(this);
+        this._oncollapse = function (e) {
+            e.stopPropagation();
+            this.close();
+        }.bind(this);
+        this._onwindowblur = function (e) {
+            // @ts-ignore for debug
+            !window.POPUP_DEBUG && this.close();
+        }.bind(this);
+    }
+    render() {
+        var _a, _b;
+        return html `
+      ${this.titler ? html ` <div titler>${this.titler}</div> ` : nothing}
+      <div content>
+        ${this.icon || this.type ? html ` <mwc-icon icon>${this.icon || this.type}</mwc-icon> ` : nothing}
+        ${this.text ? html ` <div text>${this.text}</div> ` : nothing}
+        <slot> </slot>
+        ${this.footer ? html ` <div footer>${this.footer}</div> ` : nothing}
+      </div>
+      <div buttons>
+        ${this.confirmButton
+            ? html ` <mwc-button raised @click=${(e) => this.onConfirm()}>${(_a = this.confirmButton) === null || _a === void 0 ? void 0 : _a.text}</mwc-button> `
+            : nothing}
+        ${this.cancelButton
+            ? html ` <mwc-button raised @click=${(e) => this.onCancel()}>${(_b = this.cancelButton) === null || _b === void 0 ? void 0 : _b.text}</mwc-button> `
+            : nothing}
+      </div>
+    `;
+    }
+    onConfirm() {
+        this.resolveFn && this.resolveFn(true);
+        this.close();
+    }
+    onCancel() {
+        this.resolveFn && this.resolveFn(false);
+        this.close();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('focusout', this._onfocusout);
+        this.addEventListener('keydown', this._onkeydown);
+        this.addEventListener('keyup', this._onkeyup);
+        this.addEventListener('click', this._onclick);
+        this.addEventListener('mouseup', this._onmouseup);
+        this.addEventListener('mousedown', this._onmousedown);
+        this.addEventListener('context', this._oncontext);
+        this.addEventListener('ox-close', this._onclose);
+        this.addEventListener('ox-collapse', this._oncollapse);
+        this.setAttribute('tabindex', '0'); // make this element focusable
+        this.guaranteeFocus();
+    }
+    static open({ template, type, icon, title, text, footer, confirmButton, cancelButton, top, left, right, bottom, width, height, parent }) {
+        const owner = parent || document.body;
+        const target = document.createElement('ox-prompt');
+        target.type = type;
+        target.icon = icon;
+        target.text = text;
+        target.titler = title;
+        target.footer = footer;
+        target.confirmButton = confirmButton;
+        target.cancelButton = cancelButton;
+        render(template, target);
+        target._parent = owner;
+        owner.appendChild(target);
+        return target.open({ top, left, right, bottom, width, height });
+    }
+    open({ left, top, right, bottom, width, height, silent = false }) {
+        if (width) {
+            this.style.maxWidth = width;
+            this.style.overflowX = 'auto';
+        }
+        if (height) {
+            this.style.maxHeight = height;
+            this.style.overflowY = 'auto';
+        }
+        if (left === undefined && top === undefined && right === undefined && bottom === undefined) {
+            this.style.left = '50%';
+            this.style.top = '50%';
+            this.style.transform = 'translateX(-50%) translateY(-50%)';
+        }
+        else {
+            if (left !== undefined)
+                this.style.left = `${left}px`;
+            if (top !== undefined)
+                this.style.top = `${top}px`;
+            if (right !== undefined)
+                this.style.right = `${right}px`;
+            if (bottom !== undefined)
+                this.style.bottom = `${bottom}px`;
+        }
+        this.setAttribute('active', '');
+        // adjust popup position
+        requestAnimationFrame(() => {
+            const vh = document.body.clientHeight;
+            const vw = document.body.clientWidth;
+            var bounding = this.getBoundingClientRect();
+            var h = bounding.height;
+            var w = bounding.width;
+            var t = bounding.top;
+            var l = bounding.left;
+            // If the popup is too large, it will cause overflow scrolling.
+            if (vh < h) {
+                this.style.height = `${Math.min(Math.max(Math.floor((vh * 2) / 3), vh - (t + 20)), vh)}px`;
+                this.style.overflow = 'auto';
+                h = vh;
+            }
+            if (vw < w) {
+                this.style.width = `${Math.min(Math.max(Math.floor((vw * 2) / 3), vw - (l + 20)), vw)}px`;
+                this.style.overflow = 'auto';
+                w = vw;
+            }
+            // To prevent pop-ups from crossing screen boundaries, use the
+            const computedStyle = getComputedStyle(this);
+            if (t < 0) {
+                this.style.top = `calc(${computedStyle.top} + ${t}px)`; // 현재의 top 값에 t를 추가한다.
+                this.style.bottom = '';
+            }
+            else if (vh < t + h) {
+                this.style.top = `calc(${computedStyle.top} - ${t + h - vh}px)`; // 현재의 top 값에 차감한다.
+                this.style.bottom = '';
+            }
+            if (l < 0) {
+                this.style.left = `calc(${computedStyle.left} + ${l}px)`; // 현재의 left 값에 l를 추가한다.
+                this.style.right = '';
+            }
+            else if (vw < l + w) {
+                this.style.left = `calc(${computedStyle.left} - ${l + w - vw}px)`; // 현재의 left 값에 차감한다.
+                this.style.right = '';
+            }
+        });
+        // auto focusing
+        !silent && this.guaranteeFocus();
+        /* When the window is out of focus, all pop-ups should disappear. */
+        window.addEventListener('blur', this._onwindowblur);
+        return new Promise(resolve => {
+            this.resolveFn = resolve;
+        });
+    }
+    guaranteeFocus(target) {
+        const focusible = (target || this).querySelector(':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex="-1"])');
+        if (focusible) {
+            ;
+            focusible.focus();
+        }
+        else {
+            this.focus();
+        }
+    }
+    close() {
+        this.removeAttribute('active');
+        window.removeEventListener('blur', this._onwindowblur);
+        if (this._parent) {
+            /* this case is when the popup is opened by OxPrompt.open(...) */
+            this.removeEventListener('focusout', this._onfocusout);
+            this.removeEventListener('keydown', this._onkeydown);
+            this.removeEventListener('keyup', this._onkeyup);
+            this.removeEventListener('click', this._onclick);
+            this.removeEventListener('ox-close', this._onclose);
+            this.removeEventListener('ox-collapse', this._oncollapse);
+            this.removeEventListener('mouseup', this._onmouseup);
+            this.removeEventListener('mousedown', this._onmousedown);
+            this.removeEventListener('context', this._oncontext);
+            this._parent.removeChild(this);
+            delete this._parent;
+        }
+    }
+};
+OxPrompt.styles = [
+    css `
+      :host {
+        --prompt-container-border-radius: 12px;
+        --prompt-container-box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
+
+        position: absolute;
+        display: none;
+        background-color: var(--theme-white-color, #fff);
+        z-index: 100;
+        padding: var(--padding-wide);
+        box-shadow: var(--prompt-container-box-shadow);
+        border-radius: var(--prompt-container-border-radius);
+        box-sizing: border-box;
+        min-width: fit-content;
+        line-height: initial;
+        text-align: initial;
+      }
+
+      :host([active]) {
+        display: block;
+      }
+
+      :host(*:focus) {
+        outline: none;
+      }
+
+      [titler] {
+        padding: var(--default-padding, 6px);
+        font: var(--title-font);
+        color: var(--title-text-color);
+      }
+
+      [content] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--margin-default);
+        padding: var(--padding-default);
+        color: var(--primary-text-color);
+        word-break: keep-all;
+      }
+
+      [buttons] {
+        display: flex;
+        gap: var(--margin-default);
+        padding: var(--padding-wide) 0 var(--padding-narrow) 0;
+        border-top: var(--border-dark-color);
+        justify-content: center;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], OxPrompt.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], OxPrompt.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], OxPrompt.prototype, "titler", void 0);
+__decorate([
+    property({ type: String })
+], OxPrompt.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], OxPrompt.prototype, "footer", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxPrompt.prototype, "toast", void 0);
+__decorate([
+    property({ type: Object })
+], OxPrompt.prototype, "confirmButton", void 0);
+__decorate([
+    property({ type: Object })
+], OxPrompt.prototype, "cancelButton", void 0);
+__decorate([
+    property({ type: Object })
+], OxPrompt.prototype, "callback", void 0);
+__decorate([
+    state()
+], OxPrompt.prototype, "_parent", void 0);
+OxPrompt = __decorate([
+    customElement('ox-prompt')
+], OxPrompt);
+export { OxPrompt };
+//# sourceMappingURL=ox-prompt.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-prompt.js","sourceRoot":"","sources":["../../src/ox-prompt.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-button'\n\nimport { css, html, nothing, LitElement } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n@customElement('ox-prompt')\nexport class OxPrompt extends LitElement {\n  static styles = [\n    css`\n      :host {\n        --prompt-container-border-radius: 12px;\n        --prompt-container-box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n\n        position: absolute;\n        display: none;\n        background-color: var(--theme-white-color, #fff);\n        z-index: 100;\n        padding: var(--padding-wide);\n        box-shadow: var(--prompt-container-box-shadow);\n        border-radius: var(--prompt-container-border-radius);\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      [titler] {\n        padding: var(--default-padding, 6px);\n        font: var(--title-font);\n        color: var(--title-text-color);\n      }\n\n      [content] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--margin-default);\n        padding: var(--padding-default);\n        color: var(--primary-text-color);\n        word-break: keep-all;\n      }\n\n      [buttons] {\n        display: flex;\n        gap: var(--margin-default);\n        padding: var(--padding-wide) 0 var(--padding-narrow) 0;\n        border-top: var(--border-dark-color);\n        justify-content: center;\n      }\n    `\n  ]\n\n  @property({ type: String }) type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n  @property({ type: String }) icon?: string\n  @property({ type: String }) titler?: string = ''\n  @property({ type: String }) text?: string\n  @property({ type: String }) footer?: string\n  // @property({ type: String }) position?:\n  //   | 'top'\n  //   | 'top-start'\n  //   | 'top-end'\n  //   | 'center'\n  //   | 'center-start'\n  //   | 'center-end'\n  //   | 'bottom'\n  //   | 'bottom-start'\n  //   | 'bottom-end'\n  @property({ type: Boolean }) toast?: boolean\n  @property({ type: Object }) confirmButton?: { text: string; color?: string }\n  @property({ type: Object }) cancelButton?: { text: string; color?: string }\n  @property({ type: Object }) callback?: Function\n\n  @state() _parent?: Element\n\n  private resolveFn: ((value: boolean) => void) | null = null\n\n  render() {\n    return html`\n      ${this.titler ? html` <div titler>${this.titler}</div> ` : nothing}\n      <div content>\n        ${this.icon || this.type ? html` <mwc-icon icon>${this.icon || this.type}</mwc-icon> ` : nothing}\n        ${this.text ? html` <div text>${this.text}</div> ` : nothing}\n        <slot> </slot>\n        ${this.footer ? html` <div footer>${this.footer}</div> ` : nothing}\n      </div>\n      <div buttons>\n        ${this.confirmButton\n          ? html` <mwc-button raised @click=${(e: Event) => this.onConfirm()}>${this.confirmButton?.text}</mwc-button> `\n          : nothing}\n        ${this.cancelButton\n          ? html` <mwc-button raised @click=${(e: Event) => this.onCancel()}>${this.cancelButton?.text}</mwc-button> `\n          : nothing}\n      </div>\n    `\n  }\n\n  onConfirm() {\n    this.resolveFn && this.resolveFn(true)\n    this.close()\n  }\n\n  onCancel() {\n    this.resolveFn && this.resolveFn(false)\n    this.close()\n  }\n\n  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPrompt, e: FocusEvent) {\n    const to = e.relatedTarget as HTMLElement\n\n    if (!this.contains(to)) {\n      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-prompt은 닫혀야 한다. */\n      // @ts-ignore for debug\n      !window.POPUP_DEBUG && this.close()\n    }\n  }.bind(this)\n\n  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPrompt, 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: OxPrompt, e: KeyboardEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmouseup: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onmousedown: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _oncontext: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclick: (e: MouseEvent) => void = function (this: OxPrompt, e: MouseEvent) {\n    e.stopPropagation()\n  }.bind(this)\n\n  protected _onclose: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    this.close()\n  }.bind(this)\n\n  protected _oncollapse: (e: Event) => void = function (this: OxPrompt, e: Event) {\n    e.stopPropagation()\n    this.close()\n  }.bind(this)\n\n  protected _onwindowblur: (e: Event) => void = function (this: OxPrompt, 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  public static open({\n    template,\n    type,\n    icon,\n    title,\n    text,\n    footer,\n    confirmButton,\n    cancelButton,\n    top,\n    left,\n    right,\n    bottom,\n    width,\n    height,\n    parent\n  }: {\n    template?: unknown\n    type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n    icon?: 'success' | 'error' | 'warning' | 'info' | 'question'\n    title?: string\n    text?: string\n    footer?: string\n    confirmButton?: { text: string; color?: string }\n    cancelButton?: { text: string; color?: string }\n    top?: number\n    left?: number\n    right?: number\n    bottom?: number\n    width?: string\n    height?: string\n    parent?: Element | null\n  }): Promise<boolean> {\n    const owner = parent || document.body\n    const target = document.createElement('ox-prompt') as OxPrompt\n\n    target.type = type\n    target.icon = icon\n    target.text = text\n    target.titler = title\n    target.footer = footer\n    target.confirmButton = confirmButton\n    target.cancelButton = cancelButton\n\n    render(template, target)\n\n    target._parent = owner\n    owner.appendChild(target)\n\n    return target.open({ top, left, right, bottom, width, height })\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  }): Promise<boolean> {\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.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    // 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 = `calc(${computedStyle.top} + ${t}px)` // 현재의 top 값에 t를 추가한다.\n        this.style.bottom = ''\n      } else if (vh < t + h) {\n        this.style.top = `calc(${computedStyle.top} - ${t + h - vh}px)` // 현재의 top 값에 차감한다.\n        this.style.bottom = ''\n      }\n\n      if (l < 0) {\n        this.style.left = `calc(${computedStyle.left} + ${l}px)` // 현재의 left 값에 l를 추가한다.\n        this.style.right = ''\n      } else if (vw < l + w) {\n        this.style.left = `calc(${computedStyle.left} - ${l + w - vw}px)` // 현재의 left 값에 차감한다.\n        this.style.right = ''\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    return new Promise(resolve => {\n      this.resolveFn = resolve\n    })\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  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 OxPrompt.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/ox-prompt-normal.stories.d.ts

@@ -0,0 +1,15 @@
+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-prompt-normal.stories.js

@@ -0,0 +1,35 @@
+import { html } from 'lit';
+import { OxPrompt } from '../src/ox-prompt';
+export default {
+    title: 'OxPrompt - Normal',
+    component: 'ox-prompt',
+    argTypes: {}
+};
+function popup(e) {
+    const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
+    OxPrompt.open({
+        title: 'Are you sure ?',
+        text: 'Are you sure to exit this page ?',
+        confirmButton: { text: 'Confirm' },
+        cancelButton: { text: 'Cancel' }
+    });
+}
+const Template = ({}) => 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)}>Click this to prompt image</div>
+  `;
+export const Regular = Template.bind({});
+Regular.args = {};
+//# sourceMappingURL=ox-prompt-normal.stories.js.map

package/dist/stories/ox-prompt-normal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-prompt-normal.stories.js","sourceRoot":"","sources":["../../stories/ox-prompt-normal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,QAAQ,CAAC,IAAI,CAAC;QACZ,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,kCAAkC;QACxC,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KACjC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CACjD,IAAI,CAAA;;;;;;;;;;;;;;6BAcuB,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;GACrD,CAAA;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport { OxPrompt } from '../src/ox-prompt'\n\nexport default {\n  title: 'OxPrompt - Normal',\n  component: 'ox-prompt',\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 noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n  OxPrompt.open({\n    title: 'Are you sure ?',\n    text: 'Are you sure to exit this page ?',\n    confirmButton: { text: 'Confirm' },\n    cancelButton: { text: 'Cancel' }\n  })\n}\n\nconst Template: Story<ArgTypes> = ({}: 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 id=\"place\" @click=${(e: MouseEvent) => popup(e)}>Click this to prompt image</div>\n  `\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

package/dist/stories/ox-prompt.stories copy.d.ts

@@ -0,0 +1,15 @@
+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-prompt.stories copy.js

@@ -0,0 +1,38 @@
+import { html } from 'lit';
+import { OxPrompt } from '../src/ox-prompt';
+export default {
+    title: 'OxPrompt',
+    component: 'ox-prompt',
+    argTypes: {}
+};
+function popup(e) {
+    const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
+    OxPrompt.open({
+        type: 'info',
+        title: 'title',
+        text: 'Are you sure ?',
+        footer: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+        template: html `<img src=${noImage} />`,
+        confirmButton: { text: 'Confirm' },
+        cancelButton: { text: 'Cancel' }
+    });
+}
+const Template = ({}) => 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)}>Click this to prompt image</div>
+  `;
+export const Regular = Template.bind({});
+Regular.args = {};
+//# sourceMappingURL=ox-prompt.stories%20copy.js.map

package/dist/stories/ox-prompt.stories copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-prompt.stories copy.js","sourceRoot":"","sources":["../../stories/ox-prompt.stories copy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,QAAQ,CAAC,IAAI,CAAC;QACZ,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,4BAA4B;QACpC,QAAQ,EAAE,IAAI,CAAA,YAAY,OAAO,KAAK;QACtC,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KACjC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CACjD,IAAI,CAAA;;;;;;;;;;;;;;6BAcuB,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;GACrD,CAAA;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport { OxPrompt } from '../src/ox-prompt'\n\nexport default {\n  title: 'OxPrompt',\n  component: 'ox-prompt',\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 noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n  OxPrompt.open({\n    type: 'info',\n    title: 'title',\n    text: 'Are you sure ?',\n    footer: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',\n    template: html`<img src=${noImage} />`,\n    confirmButton: { text: 'Confirm' },\n    cancelButton: { text: 'Cancel' }\n  })\n}\n\nconst Template: Story<ArgTypes> = ({}: 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 id=\"place\" @click=${(e: MouseEvent) => popup(e)}>Click this to prompt image</div>\n  `\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

package/dist/stories/ox-prompt.stories.d.ts

@@ -0,0 +1,15 @@
+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-prompt.stories.js

@@ -0,0 +1,38 @@
+import { html } from 'lit';
+import { OxPrompt } from '../src/ox-prompt';
+export default {
+    title: 'OxPrompt',
+    component: 'ox-prompt',
+    argTypes: {}
+};
+function popup(e) {
+    const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
+    OxPrompt.open({
+        type: 'info',
+        title: 'title',
+        text: 'Are you sure ?',
+        footer: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+        template: html `<img src=${noImage} />`,
+        confirmButton: { text: 'Confirm' },
+        cancelButton: { text: 'Cancel' }
+    });
+}
+const Template = ({}) => 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)}>Click this to prompt image</div>
+  `;
+export const Regular = Template.bind({});
+Regular.args = {};
+//# sourceMappingURL=ox-prompt.stories.js.map

package/dist/stories/ox-prompt.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-prompt.stories.js","sourceRoot":"","sources":["../../stories/ox-prompt.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,QAAQ,CAAC,IAAI,CAAC;QACZ,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,4BAA4B;QACpC,QAAQ,EAAE,IAAI,CAAA,YAAY,OAAO,KAAK;QACtC,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KACjC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CACjD,IAAI,CAAA;;;;;;;;;;;;;;6BAcuB,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;GACrD,CAAA;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport { OxPrompt } from '../src/ox-prompt'\n\nexport default {\n  title: 'OxPrompt',\n  component: 'ox-prompt',\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 noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n  OxPrompt.open({\n    type: 'info',\n    title: 'title',\n    text: 'Are you sure ?',\n    footer: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',\n    template: html`<img src=${noImage} />`,\n    confirmButton: { text: 'Confirm' },\n    cancelButton: { text: 'Cancel' }\n  })\n}\n\nconst Template: Story<ArgTypes> = ({}: 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 id=\"place\" @click=${(e: MouseEvent) => popup(e)}>Click this to prompt image</div>\n  `\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}