@operato/popup 2.0.0-beta.9 → 7.0.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +108 -0
- package/dist/src/ox-floating-overlay.d.ts +1 -0
- package/dist/src/ox-floating-overlay.js +26 -6
- package/dist/src/ox-floating-overlay.js.map +1 -1
- package/dist/src/ox-popup-list.js +14 -5
- package/dist/src/ox-popup-list.js.map +1 -1
- package/dist/src/ox-popup-menu.js +1 -1
- package/dist/src/ox-popup-menu.js.map +1 -1
- package/dist/src/ox-popup.d.ts +3 -2
- package/dist/src/ox-popup.js +12 -8
- package/dist/src/ox-popup.js.map +1 -1
- package/dist/src/ox-prompt.d.ts +9 -2
- package/dist/src/ox-prompt.js +18 -13
- package/dist/src/ox-prompt.js.map +1 -1
- package/dist/stories/ox-popup-list-sortable.stories.d.ts +7 -2
- package/dist/stories/ox-popup-list-sortable.stories.js +22 -3
- package/dist/stories/ox-popup-list-sortable.stories.js.map +1 -1
- package/dist/stories/ox-prompt-icon.stories.d.ts +2 -2
- package/dist/stories/ox-prompt-icon.stories.js +12 -8
- package/dist/stories/ox-prompt-icon.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -5
- package/src/ox-floating-overlay.ts +26 -6
- package/src/ox-popup-list.ts +15 -5
- package/src/ox-popup-menu.ts +1 -1
- package/src/ox-popup.ts +12 -6
- package/src/ox-prompt.ts +17 -12
- package/stories/ox-popup-list-sortable.stories.ts +24 -4
- package/stories/ox-prompt-icon.stories.ts +13 -10
- package/themes/grist-theme.css +0 -2
package/dist/src/ox-popup.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ import { LitElement } from 'lit';
|
|
|
10
10
|
*/
|
|
11
11
|
export declare class OxPopup extends LitElement {
|
|
12
12
|
static styles: import("lit").CSSResult[];
|
|
13
|
-
|
|
13
|
+
preventCloseOnBlur: boolean;
|
|
14
14
|
_parent: Element | null;
|
|
15
15
|
private lastActive;
|
|
16
16
|
render(): import("lit-html").TemplateResult<1>;
|
|
@@ -34,7 +34,7 @@ export declare class OxPopup extends LitElement {
|
|
|
34
34
|
* @property {Number} left The position-left where the pop-up will be displayed
|
|
35
35
|
* @property {HTMLElement} parent Popup's parent element
|
|
36
36
|
*/
|
|
37
|
-
static open({ template, top, left, right, bottom, width, height, parent, style }: {
|
|
37
|
+
static open({ template, top, left, right, bottom, width, height, parent, style, preventCloseOnBlur }: {
|
|
38
38
|
template: unknown;
|
|
39
39
|
top?: number;
|
|
40
40
|
left?: number;
|
|
@@ -44,6 +44,7 @@ export declare class OxPopup extends LitElement {
|
|
|
44
44
|
height?: string;
|
|
45
45
|
parent?: Element | null;
|
|
46
46
|
style?: string;
|
|
47
|
+
preventCloseOnBlur?: boolean;
|
|
47
48
|
}): OxPopup;
|
|
48
49
|
/**
|
|
49
50
|
* Opens the 'ox-popup' with the specified position and dimensions.
|
package/dist/src/ox-popup.js
CHANGED
|
@@ -15,15 +15,15 @@ import { ScrollbarStyles } from '@operato/styles';
|
|
|
15
15
|
let OxPopup = class OxPopup extends LitElement {
|
|
16
16
|
constructor() {
|
|
17
17
|
super(...arguments);
|
|
18
|
-
this.
|
|
18
|
+
this.preventCloseOnBlur = false;
|
|
19
19
|
this._parent = null;
|
|
20
20
|
this.lastActive = document.activeElement;
|
|
21
21
|
this._onfocusout = function (e) {
|
|
22
22
|
const to = e.relatedTarget;
|
|
23
23
|
if (!this.contains(to)) {
|
|
24
24
|
/* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup은 닫혀야 한다. */
|
|
25
|
-
// @ts-ignore for
|
|
26
|
-
!this.
|
|
25
|
+
// @ts-ignore for preventCloseOnBlur
|
|
26
|
+
!this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close();
|
|
27
27
|
}
|
|
28
28
|
}.bind(this);
|
|
29
29
|
this._onkeydown = function (e) {
|
|
@@ -59,8 +59,8 @@ let OxPopup = class OxPopup extends LitElement {
|
|
|
59
59
|
this.close();
|
|
60
60
|
}.bind(this);
|
|
61
61
|
this._onwindowblur = function (e) {
|
|
62
|
-
// @ts-ignore for
|
|
63
|
-
!this.
|
|
62
|
+
// @ts-ignore for preventCloseOnBlur
|
|
63
|
+
!this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close();
|
|
64
64
|
}.bind(this);
|
|
65
65
|
}
|
|
66
66
|
render() {
|
|
@@ -89,9 +89,12 @@ let OxPopup = class OxPopup extends LitElement {
|
|
|
89
89
|
* @property {Number} left The position-left where the pop-up will be displayed
|
|
90
90
|
* @property {HTMLElement} parent Popup's parent element
|
|
91
91
|
*/
|
|
92
|
-
static open({ template, top, left, right, bottom, width, height, parent, style }) {
|
|
92
|
+
static open({ template, top, left, right, bottom, width, height, parent, style, preventCloseOnBlur }) {
|
|
93
93
|
const owner = parent || document.body;
|
|
94
94
|
const target = document.createElement('ox-popup');
|
|
95
|
+
if (preventCloseOnBlur) {
|
|
96
|
+
target.preventCloseOnBlur = preventCloseOnBlur;
|
|
97
|
+
}
|
|
95
98
|
if (style) {
|
|
96
99
|
target.style.cssText = style;
|
|
97
100
|
}
|
|
@@ -241,6 +244,7 @@ OxPopup.styles = [
|
|
|
241
244
|
|
|
242
245
|
:host([active]) {
|
|
243
246
|
display: flex;
|
|
247
|
+
flex-direction: column;
|
|
244
248
|
}
|
|
245
249
|
|
|
246
250
|
:host(*:focus) {
|
|
@@ -249,8 +253,8 @@ OxPopup.styles = [
|
|
|
249
253
|
`
|
|
250
254
|
];
|
|
251
255
|
__decorate([
|
|
252
|
-
property({ type: Boolean })
|
|
253
|
-
], OxPopup.prototype, "
|
|
256
|
+
property({ type: Boolean, attribute: 'prevent-close-on-blur' })
|
|
257
|
+
], OxPopup.prototype, "preventCloseOnBlur", void 0);
|
|
254
258
|
__decorate([
|
|
255
259
|
state()
|
|
256
260
|
], OxPopup.prototype, "_parent", void 0);
|
package/dist/src/ox-popup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 }\n\n :host(*:focus) {\n outline: none;\n }\n `\n ]\n\n @property({ type: Boolean }) debug: 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 debug\n !this.debug && !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 debug\n !this.debug && !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 }: {\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 }): OxPopup {\n const owner = parent || document.body\n const target = document.createElement('ox-popup') as OxPopup\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"]}
|
|
1
|
+
{"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"]}
|
package/dist/src/ox-prompt.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import '@material/web/button/
|
|
1
|
+
import '@material/web/button/filled-button.js';
|
|
2
|
+
import '@material/web/button/outlined-button.js';
|
|
2
3
|
import '@material/web/icon/icon.js';
|
|
3
4
|
import { LitElement } from 'lit';
|
|
4
5
|
/**
|
|
@@ -44,6 +45,10 @@ export declare class OxPrompt extends LitElement {
|
|
|
44
45
|
text: string;
|
|
45
46
|
color?: string;
|
|
46
47
|
};
|
|
48
|
+
/**
|
|
49
|
+
* Prevents the popup from closing when it loses focus (blur event).
|
|
50
|
+
*/
|
|
51
|
+
preventCloseOnBlur: boolean;
|
|
47
52
|
/**
|
|
48
53
|
* A callback function called when the popup is closed, providing the result of the user's interaction.
|
|
49
54
|
*/
|
|
@@ -94,10 +99,11 @@ export declare class OxPrompt extends LitElement {
|
|
|
94
99
|
* @param {string} [options.width] - The maximum width of the popup (CSS string).
|
|
95
100
|
* @param {string} [options.height] - The maximum height of the popup (CSS string).
|
|
96
101
|
* @param {Element | null} [options.parent] - The parent element to which the popup should be attached. If not provided, it will be attached to the document body.
|
|
102
|
+
* @param {boolean} [options.preventCloseOnBlur] - Prevents the popup from closing when it loses focus (blur event).
|
|
97
103
|
* @param {(result: { value: boolean }) => void} [options.callback] - A callback function that will be invoked when the user interacts with the popup, providing the result of the interaction.
|
|
98
104
|
* @returns {Promise<boolean>} A Promise that resolves based on user interaction with the popup.
|
|
99
105
|
*/
|
|
100
|
-
static open({ template, type, icon, title, text, footer, confirmButton, cancelButton, top, left, right, bottom, width, height, parent, callback }: {
|
|
106
|
+
static open({ template, type, icon, title, text, footer, confirmButton, cancelButton, top, left, right, bottom, width, height, parent, preventCloseOnBlur, callback }: {
|
|
101
107
|
template?: unknown;
|
|
102
108
|
type?: 'success' | 'error' | 'warning' | 'info' | 'question';
|
|
103
109
|
icon?: string;
|
|
@@ -119,6 +125,7 @@ export declare class OxPrompt extends LitElement {
|
|
|
119
125
|
width?: string;
|
|
120
126
|
height?: string;
|
|
121
127
|
parent?: Element | null;
|
|
128
|
+
preventCloseOnBlur?: boolean;
|
|
122
129
|
callback?: (result: {
|
|
123
130
|
value: boolean;
|
|
124
131
|
}) => void;
|
package/dist/src/ox-prompt.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import '@material/web/button/
|
|
2
|
+
import '@material/web/button/filled-button.js';
|
|
3
|
+
import '@material/web/button/outlined-button.js';
|
|
3
4
|
import '@material/web/icon/icon.js';
|
|
4
5
|
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
|
|
5
6
|
import { css, html, nothing, LitElement } from 'lit';
|
|
@@ -23,13 +24,17 @@ let OxPrompt = class OxPrompt extends LitElement {
|
|
|
23
24
|
* Specifies the title of the popup.
|
|
24
25
|
*/
|
|
25
26
|
this.titler = '';
|
|
27
|
+
/**
|
|
28
|
+
* Prevents the popup from closing when it loses focus (blur event).
|
|
29
|
+
*/
|
|
30
|
+
this.preventCloseOnBlur = false;
|
|
26
31
|
this.resolveFn = null;
|
|
27
32
|
this._onfocusout = function (e) {
|
|
28
33
|
const to = e.relatedTarget;
|
|
29
34
|
if (!this.contains(to)) {
|
|
30
35
|
/* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-prompt은 닫혀야 한다. */
|
|
31
36
|
// @ts-ignore for debug
|
|
32
|
-
if (window.POPUP_DEBUG) {
|
|
37
|
+
if (this.preventCloseOnBlur || window.POPUP_DEBUG) {
|
|
33
38
|
return;
|
|
34
39
|
}
|
|
35
40
|
this.resolveFn && this.resolveFn(false);
|
|
@@ -72,7 +77,7 @@ let OxPrompt = class OxPrompt extends LitElement {
|
|
|
72
77
|
}.bind(this);
|
|
73
78
|
this._onwindowblur = function (e) {
|
|
74
79
|
// @ts-ignore for debug
|
|
75
|
-
if (window.POPUP_DEBUG) {
|
|
80
|
+
if (this.preventCloseOnBlur || window.POPUP_DEBUG) {
|
|
76
81
|
return;
|
|
77
82
|
}
|
|
78
83
|
this.resolveFn && this.resolveFn(false);
|
|
@@ -95,14 +100,14 @@ let OxPrompt = class OxPrompt extends LitElement {
|
|
|
95
100
|
${this.confirmButton
|
|
96
101
|
? html `
|
|
97
102
|
<md-filled-button id="confirm" @click=${(e) => this.onConfirm()}
|
|
98
|
-
>${(_a = this.confirmButton) === null || _a === void 0 ? void 0 : _a.text}</md-
|
|
103
|
+
>${(_a = this.confirmButton) === null || _a === void 0 ? void 0 : _a.text}</md-filled-button
|
|
99
104
|
>
|
|
100
105
|
`
|
|
101
106
|
: nothing}
|
|
102
107
|
${this.cancelButton
|
|
103
108
|
? html `
|
|
104
109
|
<md-outlined-button id="cancel" @click=${(e) => this.onCancel()}
|
|
105
|
-
>${(_b = this.cancelButton) === null || _b === void 0 ? void 0 : _b.text}</md-
|
|
110
|
+
>${(_b = this.cancelButton) === null || _b === void 0 ? void 0 : _b.text}</md-outlined-button
|
|
106
111
|
>
|
|
107
112
|
`
|
|
108
113
|
: nothing}
|
|
@@ -159,10 +164,11 @@ let OxPrompt = class OxPrompt extends LitElement {
|
|
|
159
164
|
* @param {string} [options.width] - The maximum width of the popup (CSS string).
|
|
160
165
|
* @param {string} [options.height] - The maximum height of the popup (CSS string).
|
|
161
166
|
* @param {Element | null} [options.parent] - The parent element to which the popup should be attached. If not provided, it will be attached to the document body.
|
|
167
|
+
* @param {boolean} [options.preventCloseOnBlur] - Prevents the popup from closing when it loses focus (blur event).
|
|
162
168
|
* @param {(result: { value: boolean }) => void} [options.callback] - A callback function that will be invoked when the user interacts with the popup, providing the result of the interaction.
|
|
163
169
|
* @returns {Promise<boolean>} A Promise that resolves based on user interaction with the popup.
|
|
164
170
|
*/
|
|
165
|
-
static async open({ template, type, icon, title, text, footer, confirmButton, cancelButton, top, left, right, bottom, width, height, parent, callback }) {
|
|
171
|
+
static async open({ template, type, icon, title, text, footer, confirmButton, cancelButton, top, left, right, bottom, width, height, parent, preventCloseOnBlur, callback }) {
|
|
166
172
|
const owner = parent || document.body;
|
|
167
173
|
const target = document.createElement('ox-prompt');
|
|
168
174
|
target.type = type;
|
|
@@ -172,6 +178,7 @@ let OxPrompt = class OxPrompt extends LitElement {
|
|
|
172
178
|
target.footer = footer;
|
|
173
179
|
target.confirmButton = confirmButton;
|
|
174
180
|
target.cancelButton = cancelButton;
|
|
181
|
+
target.preventCloseOnBlur = !!preventCloseOnBlur;
|
|
175
182
|
render(template, target);
|
|
176
183
|
target._parent = owner;
|
|
177
184
|
owner.appendChild(target);
|
|
@@ -375,27 +382,22 @@ OxPrompt.styles = [
|
|
|
375
382
|
|
|
376
383
|
#confirm {
|
|
377
384
|
--md-filled-button-container-color: var(--md-sys-color-primary);
|
|
378
|
-
--md-filled-button-label-text-color: var(--md-sys-color-primary
|
|
385
|
+
--md-filled-button-label-text-color: var(--md-sys-color-on-primary);
|
|
379
386
|
--md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
|
|
380
387
|
--md-filled-button-container-height: var(--form-element-height-medium);
|
|
381
388
|
--md-filled-button-container-shape: var(--md-sys-shape-corner-small);
|
|
382
389
|
--md-filled-button-leading-space: var(--spacing-large);
|
|
383
390
|
--md-filled-button-trailing-space: var(--spacing-large);
|
|
384
|
-
--md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);
|
|
385
|
-
--md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);
|
|
386
|
-
--md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);
|
|
387
391
|
}
|
|
388
392
|
|
|
389
393
|
#cancel {
|
|
394
|
+
--md-outlined-button-container-color: var(--md-sys-color-surface-variant);
|
|
390
395
|
--md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);
|
|
391
396
|
--md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
|
|
392
397
|
--md-outlined-button-container-height: var(--form-element-height-medium);
|
|
393
398
|
--md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
|
|
394
399
|
--md-outlined-button-leading-space: var(--spacing-large);
|
|
395
400
|
--md-outlined-button-trailing-space: var(--spacing-large);
|
|
396
|
-
--md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);
|
|
397
|
-
--md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);
|
|
398
|
-
--md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);
|
|
399
401
|
}
|
|
400
402
|
`
|
|
401
403
|
];
|
|
@@ -423,6 +425,9 @@ __decorate([
|
|
|
423
425
|
__decorate([
|
|
424
426
|
property({ type: Object })
|
|
425
427
|
], OxPrompt.prototype, "cancelButton", void 0);
|
|
428
|
+
__decorate([
|
|
429
|
+
property({ type: Boolean, attribute: 'prevent-close-on-blur' })
|
|
430
|
+
], OxPrompt.prototype, "preventCloseOnBlur", void 0);
|
|
426
431
|
__decorate([
|
|
427
432
|
property({ type: Object })
|
|
428
433
|
], OxPrompt.prototype, "callback", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-prompt.js","sourceRoot":"","sources":["../../src/ox-prompt.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/icon/icon.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { css, html, nothing, LitElement } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nconst TYPES_ICON = {\n success: 'verified',\n error: 'error',\n warning: 'warning',\n info: 'info',\n question: 'question_mark'\n}\n\n/**\n * The `ox-prompt` custom element represents a modal popup that provides information or options for the user, such as confirmation or cancellation.\n */\n@customElement('ox-prompt')\nexport class OxPrompt extends LitElement {\n static styles = [\n MDTypeScaleStyles,\n ScrollbarStyles,\n css`\n :host {\n position: absolute;\n display: flex;\n flex-direction: column;\n gap: var(--ox-prompt-gap, var(--spacing-medium));\n background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));\n z-index: 100;\n padding: var(--ox-prompt-container-padding, var(--spacing-medium));\n box-shadow: var(--ox-prompt-container-box-shadow, 2px 3px 10px 5px rgba(0, 0, 0, 0.15));\n border-radius: var(--ox-prompt-container-border-radius, var(--md-sys-shape-corner-medium));\n box-sizing: border-box;\n min-width: 300;\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(--ox-prompt-title-padding, var(--spacing-medium));\n padding-bottom: 0;\n color: var(--ox-prompt-title-color, var(--md-sys-color-primary));\n font-size: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n }\n\n [content] {\n display: flex;\n flex-direction: column;\n gap: var(--ox-prompt-content-gap, var(--spacing-medium));\n padding: var(--ox-prompt-content-padding, var(--spacing-medium));\n color: var(--ox-prompt-body-color, var(--md-sys-color-on-surface));\n word-break: keep-all;\n\n md-icon {\n align-self: center;\n --md-icon-size: var(--icon-size-huge);\n color: var(--ox-prompt-body-color-variant, var(--md-sys-color-primary));\n }\n }\n\n [content].warning md-icon {\n color: var(--status-warning-color, #ee8d03);\n }\n\n [content].error md-icon {\n color: var(--status-danger-color, var(--md-sys-color-error));\n }\n\n [content].info md-icon {\n color: var(--status-info-color, #398ace);\n }\n\n [content].success md-icon {\n color: var(--status-success-color, #35a24a);\n }\n\n [buttons] {\n display: flex;\n border-top: 1px solid var(--md-sys-color-surface-variant);\n gap: var(--ox-prompt-buttons-spacing, var(--spacing-large));\n padding: var(--ox-prompt-buttons-padding, var(--spacing-medium));\n padding-top: var(--spacing-large);\n justify-content: center;\n }\n\n #confirm {\n --md-filled-button-container-color: var(--md-sys-color-primary);\n --md-filled-button-label-text-color: var(--md-sys-color-primary-container);\n --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n --md-filled-button-container-height: var(--form-element-height-medium);\n --md-filled-button-container-shape: var(--md-sys-shape-corner-small);\n --md-filled-button-leading-space: var(--spacing-large);\n --md-filled-button-trailing-space: var(--spacing-large);\n --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);\n --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);\n --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);\n }\n\n #cancel {\n --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);\n --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n --md-outlined-button-container-height: var(--form-element-height-medium);\n --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);\n --md-outlined-button-leading-space: var(--spacing-large);\n --md-outlined-button-trailing-space: var(--spacing-large);\n --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);\n --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);\n --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);\n }\n `\n ]\n\n /**\n * Specifies the type of the popup. Possible values are 'success', 'error', 'warning', 'info', 'question'.\n */\n @property({ type: String }) type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n\n /**\n * Specifies the icon of the popup.\n */\n @property({ type: String }) icon?: string\n\n /**\n * Specifies the title of the popup.\n */\n @property({ type: String }) titler?: string = ''\n\n /**\n * Specifies the text content of the popup.\n */\n @property({ type: String }) text?: string\n\n /**\n * Specifies the footer (additional information at the bottom) of the popup.\n */\n @property({ type: String }) footer?: string\n\n /**\n * Determines whether the popup is displayed as a toast.\n */\n @property({ type: Boolean }) toast?: boolean\n\n /**\n * Specifies settings for the confirmation button.\n */\n @property({ type: Object }) confirmButton?: { text: string; color?: string }\n\n /**\n * Specifies settings for the cancel button.\n */\n @property({ type: Object }) cancelButton?: { text: string; color?: string }\n\n /**\n * A callback function called when the popup is closed, providing the result of the user's interaction.\n */\n @property({ type: Object }) callback?: (result: { value: boolean }) => void\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 class=\"md-typescale-title-large\">${this.titler}</div> ` : nothing}\n <div content class=\"${this.type || 'info'} md-typescale-body-large\">\n ${this.icon || this.type\n ? html` <md-icon icon>${this.icon || TYPES_ICON[this.type || 'info']}</md-icon> `\n : nothing}\n ${this.text ? html` <div text>${this.text}</div> ` : nothing}\n <slot> </slot>\n ${this.footer ? html` <div footer class=\"md-typescale-body-large\">${this.footer}</div> ` : nothing}\n </div>\n <div buttons>\n ${this.confirmButton\n ? html`\n <md-filled-button id=\"confirm\" @click=${(e: Event) => this.onConfirm()}\n >${this.confirmButton?.text}</md-elevated-button\n >\n `\n : nothing}\n ${this.cancelButton\n ? html`\n <md-outlined-button id=\"cancel\" @click=${(e: Event) => this.onCancel()}\n >${this.cancelButton?.text}</md-elevated-button\n >\n `\n : nothing}\n </div>\n `\n }\n\n /**\n * Function called when the confirm button is clicked.\n */\n onConfirm() {\n this.resolveFn && this.resolveFn(true)\n this.close()\n }\n\n /**\n * Function called when the cancel button is clicked.\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 if (window.POPUP_DEBUG) {\n return\n }\n\n this.resolveFn && this.resolveFn(false)\n 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.resolveFn && this.resolveFn(false)\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 _oncontextmenu: (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.resolveFn && this.resolveFn(false)\n this.close()\n }.bind(this)\n\n protected _oncollapse: (e: Event) => void = function (this: OxPrompt, e: Event) {\n e.stopPropagation()\n\n this.resolveFn && this.resolveFn(false)\n this.close()\n }.bind(this)\n\n protected _onwindowblur: (e: Event) => void = function (this: OxPrompt, e: Event) {\n // @ts-ignore for debug\n if (window.POPUP_DEBUG) {\n return\n }\n\n this.resolveFn && this.resolveFn(false)\n 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 * Static method to open the `ox-prompt` popup.\n * @param {object} options - An object containing popup options.\n * @param {unknown} [options.template] - An optional content template to render inside the popup.\n * @param {'success' | 'error' | 'warning' | 'info' | 'question'} [options.type] - The type of the popup, which can be one of: 'success', 'error', 'warning', 'info', 'question'.\n * @param {string} [options.icon] - The icon to be displayed in the popup header.\n * @param {string} [options.title] - The title to be displayed in the popup header.\n * @param {string} [options.text] - The main text content of the popup.\n * @param {string} [options.footer] - Additional information to be displayed at the bottom of the popup.\n * @param {object} [options.confirmButton] - Configuration for the confirmation button in the popup.\n * @param {string} options.confirmButton.text - The text to be displayed on the confirmation button.\n * @param {string} [options.confirmButton.color] - The color of the confirmation button (CSS color).\n * @param {object} [options.cancelButton] - Configuration for the cancel button in the popup.\n * @param {string} options.cancelButton.text - The text to be displayed on the cancel button.\n * @param {string} [options.cancelButton.color] - The color of the cancel button (CSS color).\n * @param {number} [options.top] - The top position of the popup (in pixels).\n * @param {number} [options.left] - The left position of the popup (in pixels).\n * @param {number} [options.right] - The right position of the popup (in pixels).\n * @param {number} [options.bottom] - The bottom position of the popup (in pixels).\n * @param {string} [options.width] - The maximum width of the popup (CSS string).\n * @param {string} [options.height] - The maximum height of the popup (CSS string).\n * @param {Element | null} [options.parent] - The parent element to which the popup should be attached. If not provided, it will be attached to the document body.\n * @param {(result: { value: boolean }) => void} [options.callback] - A callback function that will be invoked when the user interacts with the popup, providing the result of the interaction.\n * @returns {Promise<boolean>} A Promise that resolves based on user interaction with the popup.\n */\n public static async 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 callback\n }: {\n template?: unknown\n type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n icon?: string\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 callback?: (result: { value: boolean }) => void\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 const result = await target.open({ top, left, right, bottom, width, height })\n\n if (callback) {\n await callback.call(null, { value: result })\n }\n\n return result\n }\n\n /**\n * Opens the popup with specified position and dimensions.\n * @param {object} options - An object specifying the position and dimensions of the popup.\n * @param {number} [options.left] - The left position of the popup (in pixels). If not provided, the popup will be horizontally centered.\n * @param {number} [options.top] - The top position of the popup (in pixels). If not provided, the popup will be vertically centered.\n * @param {number} [options.right] - The right position of the popup (in pixels). Overrides 'left' if both 'left' and 'right' are provided.\n * @param {number} [options.bottom] - The bottom position of the popup (in pixels). Overrides 'top' if both 'top' and 'bottom' are provided.\n * @param {string} [options.width] - The maximum width of the popup (CSS string). If not provided, no width restriction is applied.\n * @param {string} [options.height] - The maximum height of the popup (CSS string). If not provided, no height restriction is applied.\n * @param {boolean} [options.silent=false] - Determines whether to focus the popup automatically (true) or not (false).\n * @returns {Promise<boolean>} A Promise that resolves based on user interaction with the popup.\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 /**\n * Closes the 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 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('contextmenu', this._oncontextmenu)\n\n this._parent.removeChild(this)\n delete this._parent\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-prompt.js","sourceRoot":"","sources":["../../src/ox-prompt.ts"],"names":[],"mappings":";AAAA,OAAO,uCAAuC,CAAA;AAC9C,OAAO,yCAAyC,CAAA;AAChD,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,MAAM,UAAU,GAAG;IACjB,OAAO,EAAE,UAAU;IACnB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,eAAe;CAC1B,CAAA;AAED;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QA6GL;;WAEG;QACyB,WAAM,GAAY,EAAE,CAAA;QA2BhD;;WAEG;QAC8D,uBAAkB,GAAY,KAAK,CAAA;QAS5F,cAAS,GAAsC,IAAI,CAAA;QAgDjD,gBAAW,GAA4B,UAA0B,CAAa;YACtF,MAAM,EAAE,GAAG,CAAC,CAAC,aAA4B,CAAA;YAEzC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;gBACvB,uDAAuD;gBACvD,uBAAuB;gBACvB,IAAI,IAAI,CAAC,kBAAkB,IAAI,MAAM,CAAC,WAAW,EAAE,CAAC;oBAClD,OAAM;gBACR,CAAC;gBAED,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;gBACvC,IAAI,CAAC,KAAK,EAAE,CAAA;YACd,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,eAAU,GAA+B,UAA0B,CAAgB;YAC3F,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;gBACd,KAAK,KAAK,CAAC,CAAC,cAAc;gBAC1B,KAAK,QAAQ;oBACX,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;oBACvC,IAAI,CAAC,KAAK,EAAE,CAAA;oBACZ,MAAK;YACT,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,aAAQ,GAA+B,UAA0B,CAAgB;YACzF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,eAAU,GAA4B,UAA0B,CAAa;YACrF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,iBAAY,GAA4B,UAA0B,CAAa;YACvF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,mBAAc,GAAuB,UAA0B,CAAQ;YAC/E,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,aAAQ,GAA4B,UAA0B,CAAa;YACnF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,aAAQ,GAAuB,UAA0B,CAAQ;YACzE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;YACvC,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,gBAAW,GAAuB,UAA0B,CAAQ;YAC5E,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;YACvC,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,kBAAa,GAAuB,UAA0B,CAAQ;YAC9E,uBAAuB;YACvB,IAAI,IAAI,CAAC,kBAAkB,IAAI,MAAM,CAAC,WAAW,EAAE,CAAC;gBAClD,OAAM;YACR,CAAC;YAED,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;YACvC,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IA4Pd,CAAC;IA7WC,MAAM;;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,iDAAiD,IAAI,CAAC,MAAM,SAAS,CAAC,CAAC,CAAC,OAAO;4BAC7E,IAAI,CAAC,IAAI,IAAI,MAAM;UACrC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI;YACtB,CAAC,CAAC,IAAI,CAAA,kBAAkB,IAAI,CAAC,IAAI,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC,aAAa;YACjF,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,cAAc,IAAI,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,OAAO;;UAE1D,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,gDAAgD,IAAI,CAAC,MAAM,SAAS,CAAC,CAAC,CAAC,OAAO;;;UAGhG,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;sDACsC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;mBACjE,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI;;aAE9B;YACH,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,YAAY;YACjB,CAAC,CAAC,IAAI,CAAA;uDACuC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;mBACjE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI;;aAE7B;YACH,CAAC,CAAC,OAAO;;KAEd,CAAA;IACH,CAAC;IAED;;OAEG;IACH,SAAS;QACP,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;QACtC,IAAI,CAAC,KAAK,EAAE,CAAA;IACd,CAAC;IAED;;OAEG;IACH,QAAQ;QACN,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;QACvC,IAAI,CAAC,KAAK,EAAE,CAAA;IACd,CAAC;IAuED,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;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACI,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,aAAa,EACb,YAAY,EACZ,GAAG,EACH,IAAI,EACJ,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,EACN,kBAAkB,EAClB,QAAQ,EAmBT;QACC,MAAM,KAAK,GAAG,MAAM,IAAI,QAAQ,CAAC,IAAI,CAAA;QACrC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAa,CAAA;QAE9D,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;QAClB,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;QAClB,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;QAClB,MAAM,CAAC,MAAM,GAAG,KAAK,CAAA;QACrB,MAAM,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,MAAM,CAAC,aAAa,GAAG,aAAa,CAAA;QACpC,MAAM,CAAC,YAAY,GAAG,YAAY,CAAA;QAClC,MAAM,CAAC,kBAAkB,GAAG,CAAC,CAAC,kBAAkB,CAAA;QAEhD,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAExB,MAAM,CAAC,OAAO,GAAG,KAAK,CAAA;QACtB,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;QAEzB,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;QAE7E,IAAI,QAAQ,EAAE,CAAC;YACb,MAAM,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;QAC9C,CAAC;QAED,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,IAAI,GAAG,KAAK,CAAA;YACvB,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAA;YACtB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,mCAAmC,CAAA;QAC5D,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,QAAQ,aAAa,CAAC,GAAG,MAAM,CAAC,KAAK,CAAA,CAAC,sBAAsB;gBAC7E,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,KAAK,CAAA,CAAC,mBAAmB;gBACnF,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAA;YACxB,CAAC;YAED,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;gBACV,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,QAAQ,aAAa,CAAC,IAAI,MAAM,CAAC,KAAK,CAAA,CAAC,uBAAuB;gBAChF,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,KAAK,CAAA,CAAC,oBAAoB;gBACtF,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;YACvB,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;QAEnD,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;YAC3B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAA;QAC1B,CAAC,CAAC,CAAA;IACJ,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,iEAAiE;YACjE,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,OAAO,IAAI,CAAC,OAAO,CAAA;QACrB,CAAC;IACH,CAAC;;AApgBM,eAAM,GAAG;IACd,iBAAiB;IACjB,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4FF;CACF,AAhGY,CAgGZ;AAK2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAA6D;AAK5D;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAc;AAKb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAqB;AAKpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAc;AAKb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAgB;AAKd;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAgB;AAKhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAiD;AAKhD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgD;AAKV;IAAhE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;oDAAoC;AAKxE;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAgD;AAElE;IAAR,KAAK,EAAE;yCAAkB;AArJf,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsgBpB","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/outlined-button.js'\nimport '@material/web/icon/icon.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { css, html, nothing, LitElement } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nconst TYPES_ICON = {\n success: 'verified',\n error: 'error',\n warning: 'warning',\n info: 'info',\n question: 'question_mark'\n}\n\n/**\n * The `ox-prompt` custom element represents a modal popup that provides information or options for the user, such as confirmation or cancellation.\n */\n@customElement('ox-prompt')\nexport class OxPrompt extends LitElement {\n static styles = [\n MDTypeScaleStyles,\n ScrollbarStyles,\n css`\n :host {\n position: absolute;\n display: flex;\n flex-direction: column;\n gap: var(--ox-prompt-gap, var(--spacing-medium));\n background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));\n z-index: 100;\n padding: var(--ox-prompt-container-padding, var(--spacing-medium));\n box-shadow: var(--ox-prompt-container-box-shadow, 2px 3px 10px 5px rgba(0, 0, 0, 0.15));\n border-radius: var(--ox-prompt-container-border-radius, var(--md-sys-shape-corner-medium));\n box-sizing: border-box;\n min-width: 300;\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(--ox-prompt-title-padding, var(--spacing-medium));\n padding-bottom: 0;\n color: var(--ox-prompt-title-color, var(--md-sys-color-primary));\n font-size: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n }\n\n [content] {\n display: flex;\n flex-direction: column;\n gap: var(--ox-prompt-content-gap, var(--spacing-medium));\n padding: var(--ox-prompt-content-padding, var(--spacing-medium));\n color: var(--ox-prompt-body-color, var(--md-sys-color-on-surface));\n word-break: keep-all;\n\n md-icon {\n align-self: center;\n --md-icon-size: var(--icon-size-huge);\n color: var(--ox-prompt-body-color-variant, var(--md-sys-color-primary));\n }\n }\n\n [content].warning md-icon {\n color: var(--status-warning-color, #ee8d03);\n }\n\n [content].error md-icon {\n color: var(--status-danger-color, var(--md-sys-color-error));\n }\n\n [content].info md-icon {\n color: var(--status-info-color, #398ace);\n }\n\n [content].success md-icon {\n color: var(--status-success-color, #35a24a);\n }\n\n [buttons] {\n display: flex;\n border-top: 1px solid var(--md-sys-color-surface-variant);\n gap: var(--ox-prompt-buttons-spacing, var(--spacing-large));\n padding: var(--ox-prompt-buttons-padding, var(--spacing-medium));\n padding-top: var(--spacing-large);\n justify-content: center;\n }\n\n #confirm {\n --md-filled-button-container-color: var(--md-sys-color-primary);\n --md-filled-button-label-text-color: var(--md-sys-color-on-primary);\n --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n --md-filled-button-container-height: var(--form-element-height-medium);\n --md-filled-button-container-shape: var(--md-sys-shape-corner-small);\n --md-filled-button-leading-space: var(--spacing-large);\n --md-filled-button-trailing-space: var(--spacing-large);\n }\n\n #cancel {\n --md-outlined-button-container-color: var(--md-sys-color-surface-variant);\n --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);\n --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n --md-outlined-button-container-height: var(--form-element-height-medium);\n --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);\n --md-outlined-button-leading-space: var(--spacing-large);\n --md-outlined-button-trailing-space: var(--spacing-large);\n }\n `\n ]\n\n /**\n * Specifies the type of the popup. Possible values are 'success', 'error', 'warning', 'info', 'question'.\n */\n @property({ type: String }) type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n\n /**\n * Specifies the icon of the popup.\n */\n @property({ type: String }) icon?: string\n\n /**\n * Specifies the title of the popup.\n */\n @property({ type: String }) titler?: string = ''\n\n /**\n * Specifies the text content of the popup.\n */\n @property({ type: String }) text?: string\n\n /**\n * Specifies the footer (additional information at the bottom) of the popup.\n */\n @property({ type: String }) footer?: string\n\n /**\n * Determines whether the popup is displayed as a toast.\n */\n @property({ type: Boolean }) toast?: boolean\n\n /**\n * Specifies settings for the confirmation button.\n */\n @property({ type: Object }) confirmButton?: { text: string; color?: string }\n\n /**\n * Specifies settings for the cancel button.\n */\n @property({ type: Object }) cancelButton?: { text: string; color?: string }\n\n /**\n * Prevents the popup from closing when it loses focus (blur event).\n */\n @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur: boolean = false\n\n /**\n * A callback function called when the popup is closed, providing the result of the user's interaction.\n */\n @property({ type: Object }) callback?: (result: { value: boolean }) => void\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 class=\"md-typescale-title-large\">${this.titler}</div> ` : nothing}\n <div content class=\"${this.type || 'info'} md-typescale-body-large\">\n ${this.icon || this.type\n ? html` <md-icon icon>${this.icon || TYPES_ICON[this.type || 'info']}</md-icon> `\n : nothing}\n ${this.text ? html` <div text>${this.text}</div> ` : nothing}\n <slot> </slot>\n ${this.footer ? html` <div footer class=\"md-typescale-body-large\">${this.footer}</div> ` : nothing}\n </div>\n <div buttons>\n ${this.confirmButton\n ? html`\n <md-filled-button id=\"confirm\" @click=${(e: Event) => this.onConfirm()}\n >${this.confirmButton?.text}</md-filled-button\n >\n `\n : nothing}\n ${this.cancelButton\n ? html`\n <md-outlined-button id=\"cancel\" @click=${(e: Event) => this.onCancel()}\n >${this.cancelButton?.text}</md-outlined-button\n >\n `\n : nothing}\n </div>\n `\n }\n\n /**\n * Function called when the confirm button is clicked.\n */\n onConfirm() {\n this.resolveFn && this.resolveFn(true)\n this.close()\n }\n\n /**\n * Function called when the cancel button is clicked.\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 if (this.preventCloseOnBlur || window.POPUP_DEBUG) {\n return\n }\n\n this.resolveFn && this.resolveFn(false)\n 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.resolveFn && this.resolveFn(false)\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 _oncontextmenu: (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.resolveFn && this.resolveFn(false)\n this.close()\n }.bind(this)\n\n protected _oncollapse: (e: Event) => void = function (this: OxPrompt, e: Event) {\n e.stopPropagation()\n\n this.resolveFn && this.resolveFn(false)\n this.close()\n }.bind(this)\n\n protected _onwindowblur: (e: Event) => void = function (this: OxPrompt, e: Event) {\n // @ts-ignore for debug\n if (this.preventCloseOnBlur || window.POPUP_DEBUG) {\n return\n }\n\n this.resolveFn && this.resolveFn(false)\n 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 * Static method to open the `ox-prompt` popup.\n * @param {object} options - An object containing popup options.\n * @param {unknown} [options.template] - An optional content template to render inside the popup.\n * @param {'success' | 'error' | 'warning' | 'info' | 'question'} [options.type] - The type of the popup, which can be one of: 'success', 'error', 'warning', 'info', 'question'.\n * @param {string} [options.icon] - The icon to be displayed in the popup header.\n * @param {string} [options.title] - The title to be displayed in the popup header.\n * @param {string} [options.text] - The main text content of the popup.\n * @param {string} [options.footer] - Additional information to be displayed at the bottom of the popup.\n * @param {object} [options.confirmButton] - Configuration for the confirmation button in the popup.\n * @param {string} options.confirmButton.text - The text to be displayed on the confirmation button.\n * @param {string} [options.confirmButton.color] - The color of the confirmation button (CSS color).\n * @param {object} [options.cancelButton] - Configuration for the cancel button in the popup.\n * @param {string} options.cancelButton.text - The text to be displayed on the cancel button.\n * @param {string} [options.cancelButton.color] - The color of the cancel button (CSS color).\n * @param {number} [options.top] - The top position of the popup (in pixels).\n * @param {number} [options.left] - The left position of the popup (in pixels).\n * @param {number} [options.right] - The right position of the popup (in pixels).\n * @param {number} [options.bottom] - The bottom position of the popup (in pixels).\n * @param {string} [options.width] - The maximum width of the popup (CSS string).\n * @param {string} [options.height] - The maximum height of the popup (CSS string).\n * @param {Element | null} [options.parent] - The parent element to which the popup should be attached. If not provided, it will be attached to the document body.\n * @param {boolean} [options.preventCloseOnBlur] - Prevents the popup from closing when it loses focus (blur event).\n * @param {(result: { value: boolean }) => void} [options.callback] - A callback function that will be invoked when the user interacts with the popup, providing the result of the interaction.\n * @returns {Promise<boolean>} A Promise that resolves based on user interaction with the popup.\n */\n public static async 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 preventCloseOnBlur,\n callback\n }: {\n template?: unknown\n type?: 'success' | 'error' | 'warning' | 'info' | 'question'\n icon?: string\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 preventCloseOnBlur?: boolean\n callback?: (result: { value: boolean }) => void\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 target.preventCloseOnBlur = !!preventCloseOnBlur\n\n render(template, target)\n\n target._parent = owner\n owner.appendChild(target)\n\n const result = await target.open({ top, left, right, bottom, width, height })\n\n if (callback) {\n await callback.call(null, { value: result })\n }\n\n return result\n }\n\n /**\n * Opens the popup with specified position and dimensions.\n * @param {object} options - An object specifying the position and dimensions of the popup.\n * @param {number} [options.left] - The left position of the popup (in pixels). If not provided, the popup will be horizontally centered.\n * @param {number} [options.top] - The top position of the popup (in pixels). If not provided, the popup will be vertically centered.\n * @param {number} [options.right] - The right position of the popup (in pixels). Overrides 'left' if both 'left' and 'right' are provided.\n * @param {number} [options.bottom] - The bottom position of the popup (in pixels). Overrides 'top' if both 'top' and 'bottom' are provided.\n * @param {string} [options.width] - The maximum width of the popup (CSS string). If not provided, no width restriction is applied.\n * @param {string} [options.height] - The maximum height of the popup (CSS string). If not provided, no height restriction is applied.\n * @param {boolean} [options.silent=false] - Determines whether to focus the popup automatically (true) or not (false).\n * @returns {Promise<boolean>} A Promise that resolves based on user interaction with the popup.\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 /**\n * Closes the 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 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('contextmenu', this._oncontextmenu)\n\n this._parent.removeChild(this)\n delete this._parent\n }\n }\n}\n"]}
|
|
@@ -7,9 +7,13 @@ declare const _default: {
|
|
|
7
7
|
title: string;
|
|
8
8
|
component: string;
|
|
9
9
|
argTypes: {
|
|
10
|
-
|
|
10
|
+
preventCloseOnBlur: {
|
|
11
11
|
control: string;
|
|
12
12
|
};
|
|
13
|
+
theme: {
|
|
14
|
+
control: string;
|
|
15
|
+
options: string[];
|
|
16
|
+
};
|
|
13
17
|
};
|
|
14
18
|
};
|
|
15
19
|
export default _default;
|
|
@@ -19,6 +23,7 @@ interface Story<T> {
|
|
|
19
23
|
argTypes?: Record<string, unknown>;
|
|
20
24
|
}
|
|
21
25
|
interface ArgTypes {
|
|
22
|
-
|
|
26
|
+
preventCloseOnBlur: boolean;
|
|
27
|
+
theme?: 'light' | 'dark';
|
|
23
28
|
}
|
|
24
29
|
export declare const Regular: Story<ArgTypes>;
|
|
@@ -3,11 +3,13 @@ import '@material/web/button/outlined-button.js';
|
|
|
3
3
|
import '@operato/input/ox-checkbox.js';
|
|
4
4
|
import '../src/ox-popup-list.js';
|
|
5
5
|
import { html } from 'lit';
|
|
6
|
+
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
|
|
6
7
|
export default {
|
|
7
8
|
title: 'sortable OxPopupList',
|
|
8
9
|
component: 'ox-popup-list',
|
|
9
10
|
argTypes: {
|
|
10
|
-
|
|
11
|
+
preventCloseOnBlur: { control: 'boolean' },
|
|
12
|
+
theme: { control: 'select', options: ['light', 'dark'] }
|
|
11
13
|
}
|
|
12
14
|
};
|
|
13
15
|
function popup(e) {
|
|
@@ -71,7 +73,13 @@ const columns = [
|
|
|
71
73
|
hidden: false
|
|
72
74
|
}
|
|
73
75
|
];
|
|
74
|
-
const Template = ({
|
|
76
|
+
const Template = ({ preventCloseOnBlur, theme }) => html `
|
|
77
|
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
78
|
+
|
|
79
|
+
<link href="/themes/light.css" rel="stylesheet" />
|
|
80
|
+
<link href="/themes/dark.css" rel="stylesheet" />
|
|
81
|
+
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
82
|
+
|
|
75
83
|
<link
|
|
76
84
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
77
85
|
rel="stylesheet"
|
|
@@ -85,6 +93,10 @@ const Template = ({ debug }) => html `
|
|
|
85
93
|
rel="stylesheet"
|
|
86
94
|
/>
|
|
87
95
|
|
|
96
|
+
<style>
|
|
97
|
+
${MDTypeScaleStyles.cssText}
|
|
98
|
+
</style>
|
|
99
|
+
|
|
88
100
|
<style>
|
|
89
101
|
#place {
|
|
90
102
|
width: 100%;
|
|
@@ -92,6 +104,9 @@ const Template = ({ debug }) => html `
|
|
|
92
104
|
background: lightgreen;
|
|
93
105
|
text-align: center;
|
|
94
106
|
line-height: 100px;
|
|
107
|
+
|
|
108
|
+
background-color: var(--md-sys-color-primary-container);
|
|
109
|
+
color: var(--md-sys-color-on-primary-container);
|
|
95
110
|
}
|
|
96
111
|
|
|
97
112
|
ox-popup-list {
|
|
@@ -143,6 +158,10 @@ const Template = ({ debug }) => html `
|
|
|
143
158
|
}
|
|
144
159
|
</style>
|
|
145
160
|
|
|
161
|
+
<script>
|
|
162
|
+
document.body.classList.add('${theme}')
|
|
163
|
+
</script>
|
|
164
|
+
|
|
146
165
|
<div id="place" @click=${(e) => popup(e)}>
|
|
147
166
|
Click this to popup list
|
|
148
167
|
<ox-popup-list
|
|
@@ -153,7 +172,7 @@ const Template = ({ debug }) => html `
|
|
|
153
172
|
}}
|
|
154
173
|
multiple
|
|
155
174
|
sortable
|
|
156
|
-
?
|
|
175
|
+
?prevent-close-on-blur=${preventCloseOnBlur}
|
|
157
176
|
>
|
|
158
177
|
<div slot="header" titler>Plain Text <md-outlined-button>save</md-outlined-button></div>
|
|
159
178
|
${columns.map(column => html `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-popup-list-sortable.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list-sortable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yCAAyC,CAAA;AAChD,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-popup-list-sortable.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list-sortable.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/outlined-button.js'\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'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'sortable OxPopupList',\n component: 'ox-popup-list',\n argTypes: {\n preventCloseOnBlur: { control: 'boolean' },\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n preventCloseOnBlur: boolean\n theme?: 'light' | 'dark'\n}\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 columns = [\n {\n name: 'AAAAAA',\n hidden: false\n },\n {\n name: 'BBBBBB',\n hidden: true\n },\n {\n name: 'CCCCCC',\n hidden: false\n },\n {\n name: 'DDDDDD',\n hidden: false\n },\n {\n name: 'EEEEEE',\n hidden: false\n },\n {\n name: 'FFFFFF',\n hidden: false\n },\n {\n name: 'GGGGGG',\n hidden: false\n },\n {\n name: 'HHHHHH',\n hidden: false\n },\n {\n name: 'IIIIII',\n hidden: false\n },\n {\n name: 'JJJJJJ',\n hidden: false\n },\n {\n name: 'KKKKKK',\n hidden: false\n },\n {\n name: 'LLLLLL',\n hidden: false\n },\n {\n name: 'MMMMMM',\n hidden: false\n }\n]\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur, theme }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n #place {\n width: 100%;\n height: 100px;\n background: lightgreen;\n text-align: center;\n line-height: 100px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n\n ox-popup-list {\n width: 240px;\n max-height: 240px;\n overflow: hidden;\n }\n\n [titler] {\n --md-icon-size: 1.2em;\n --md-outlined-button-container-height: 24px;\n --md-outlined-button-container-shape: 4px;\n --md-outlined-button-leading-space: 4px;\n --md-outlined-button-trailing-space: 4px;\n\n display: flex;\n flex-direction: row;\n align-items: center;\n text-transform: capitalize;\n }\n\n md-outlined-button {\n margin-left: auto;\n }\n\n [option] {\n position: relative; /* 상대 위치 설정 */\n cursor: move; /* 커서를 이동 가능 표시로 변경 */\n user-select: none;\n }\n\n [option]::after {\n content: '☰'; /* 드래그 핸들 아이콘 (혹은 기호) */\n position: absolute; /* 절대 위치 설정 */\n top: 0; /* 위에서부터 10px */\n right: 10px; /* 오른쪽에서부터 10px */\n font-size: 20px; /* 폰트 크기 설정 */\n color: #888; /* 폰트 색상 설정 */\n }\n\n div[overlay] {\n display: block;\n width: 300px;\n height: 300px;\n left: 100px;\n top: 100px;\n z-index: 10;\n background-color: var(--md-sys-color-surface);\n }\n </style>\n\n <script>\n document.body.classList.add('${theme}')\n </script>\n\n <div id=\"place\" @click=${(e: MouseEvent) => popup(e)}>\n Click this to popup list\n <ox-popup-list\n id=\"popup-list\"\n @select=${(e: Event) => console.log('select', e.target)}\n @sorted=${(e: Event) => {\n console.log('sorted\\n', (e as CustomEvent).detail.map((element: any) => element.value).join('\\n'))\n }}\n multiple\n sortable\n ?prevent-close-on-blur=${preventCloseOnBlur}\n >\n <div slot=\"header\" titler>Plain Text <md-outlined-button>save</md-outlined-button></div>\n ${columns.map(\n column => html`\n <ox-checkbox label=\"checkbox\" ?checked=${!column.hidden} value=${column.name} option />${column.name}</ox-checkbox>\n `\n )}\n </ox-popup-list>\n </div>\n\n <div overlay>OVERLAYED</div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
|