npm - @operato/popup - Versions diffs - 7.0.5 → 7.0.20 - Mend

@operato/popup 7.0.5 → 7.0.20

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.

Files changed (29) hide show

package/CHANGELOG.md +18 -0
package/dist/src/ox-popup-list.d.ts +1 -0
package/dist/src/ox-popup-list.js.map +1 -1
package/dist/src/ox-popup-menu.d.ts +2 -1
package/dist/src/ox-popup-menu.js +2 -2
package/dist/src/ox-popup-menu.js.map +1 -1
package/dist/src/ox-popup-menuitem.js +1 -1
package/dist/src/ox-popup-menuitem.js.map +1 -1
package/dist/src/ox-popup.d.ts +10 -2
package/dist/src/ox-popup.js +25 -17
package/dist/src/ox-popup.js.map +1 -1
package/dist/stories/ox-popup-list-sortable.stories.js +5 -2
package/dist/stories/ox-popup-list-sortable.stories.js.map +1 -1
package/dist/stories/ox-popup-list.stories.js +36 -23
package/dist/stories/ox-popup-list.stories.js.map +1 -1
package/dist/stories/ox-popup-menu.stories.js +22 -6
package/dist/stories/ox-popup-menu.stories.js.map +1 -1
package/dist/stories/ox-popup.stories.js +7 -4
package/dist/stories/ox-popup.stories.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +3 -3
package/src/ox-popup-list.ts +1 -0
package/src/ox-popup-menu.ts +4 -2
package/src/ox-popup-menuitem.ts +2 -1
package/src/ox-popup.ts +40 -17
package/stories/ox-popup-list-sortable.stories.ts +5 -2
package/stories/ox-popup-list.stories.ts +39 -26
package/stories/ox-popup-menu.stories.ts +22 -6
package/stories/ox-popup.stories.ts +7 -4

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [7.0.20](https://github.com/hatiolab/operato/compare/v7.0.19...v7.0.20) (2024-07-17)
+### :bug: Bug Fix
+* popup position (absolute => fixed) ([ab3a964](https://github.com/hatiolab/operato/commit/ab3a96447d7967c4da4766f0b571dfc3892607bd))
+* popup position absolute => fixed ([52ab460](https://github.com/hatiolab/operato/commit/52ab460a95bed03ee60bf8034d3f044dc19be410))
+### [7.0.8](https://github.com/hatiolab/operato/compare/v7.0.7...v7.0.8) (2024-07-07)
+**Note:** Version bump only for package @operato/popup
 ### [7.0.5](https://github.com/hatiolab/operato/compare/v7.0.4...v7.0.5) (2024-07-04)
 **Note:** Version bump only for package @operato/popup

package/dist/src/ox-popup-list.d.ts CHANGED Viewed

@@ -83,6 +83,7 @@ export declare class OxPopupList extends OxPopup {
         width?: string;
         height?: string;
         silent?: boolean;
+        absolutePosition?: boolean;
     }): void;
     /**
      * Overrides the 'close' method of the base class 'OxPopup' to dispatch a custom event

package/dist/src/ox-popup-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-popup-list.js","sourceRoot":"","sources":["../../src/ox-popup-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, CSSResult, html, PropertyValues } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport Sortable from 'sortablejs'\n\nimport { OxPopup } from './ox-popup'\n\nfunction guaranteeFocus(element: HTMLElement) {\n // 1. Give focus opportunity to the first focusable element within the option element.\n const focusible = element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])')\n\n if (focusible) {\n ;(focusible as HTMLElement).focus()\n return\n }\n\n // 2. Give focus opportunity to the closest parent, including itself.\n const closest = element.closest(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n ) as HTMLElement\n\n closest?.focus()\n}\n\n/*\n A custom element representing a list-like popup menu.\n /\n@customElement('ox-popup-list')\nexport class OxPopupList extends OxPopup {\n static styles = [\n ...OxPopup.styles,\n css`\n :host {\n display: none;\n align-items: stretch;\n background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface-container-lowest));\n z-index: 100;\n box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n padding: var(--spacing-small) 0;\n border-radius: var(--md-sys-shape-corner-small, 5px);\n\n color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n font:\n normal 14px 'Roboto',\n sans-serif;\n }\n\n :host([active]) {\n display: flex;\n flex-direction: column;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n :host([nowrap]) ::slotted([option]) {\n white-space: nowrap;\n }\n\n ::slotted([option]) {\n border-left: 3px solid transparent;\n }\n\n ::slotted() {\n padding: var(--spacing-medium);\n border-bottom: 1px solid var(--md-sys-color-surface-variant);\n cursor: pointer;\n outline: none;\n color: var(--ox-popup-list-color, var(--md-sys-color-on-surface-variant));\n }\n\n ::slotted(:focus) {\n outline: none;\n }\n\n ::slotted([option][active]),\n ::slotted([option]:hover) {\n background-color: var(--ox-popup-list-background-color-variant, var(--md-sys-color-primary-container));\n color: var(--ox-popup-list-color-variant, var(--md-sys-color-primary));\n }\n\n ::slotted([option][selected]) {\n border-left: 3px solid var(--md-sys-color-primary);\n font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n }\n\n ::slotted([separator]) {\n height: 1px;\n width: 100%;\n padding: 0;\n background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));\n }\n\n ::slotted([hidden]) {\n display: none;\n }\n\n [search] {\n display: flex;\n position: relative;\n align-items: center;\n padding: var(--spacing-small) var(--spacing-medium);\n\n --md-icon-size: var(--icon-size-small);\n }\n\n [search] [type='text'] {\n flex: 1;\n background-color: transparent;\n border: 0;\n padding: 0 0 0 var(--spacing-huge);\n outline: none;\n width: 50px;\n }\n\n [search] md-icon {\n color: var(--md-sys-color-secondary);\n }\n\n [search] md-icon[search-icon] {\n position: absolute;\n }\n\n [search] md-icon[delete-icon] {\n opacity: 0.5;\n --md-icon-size: var(--icon-size-tiny);\n }\n\n [nothing] {\n opacity: 0.5;\n text-align: center;\n }\n\n div[body] {\n flex: 1;\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n overflow: auto;\n }\n `\n ]\n\n /*\n A boolean property that, when set to true, allows multiple options to be selected in the popup list.\n * @type {boolean}\n /\n @property({ type: Boolean, attribute: true, reflect: true }) multiple: boolean = false\n\n /\n An optional attribute that specifies the name of the attribute used to mark selected options in the list.\n * @type {string\|undefined}\n /\n @property({ type: String, attribute: 'attr-selected', reflect: true }) attrSelected?: string\n\n /\n A boolean property that, when set to true, enables the search functionality in the popup list.\n * Users can search/filter options by typing in a search bar.\n * @type {boolean\|undefined}\n /\n @property({ type: Boolean, attribute: 'with-search', reflect: true }) withSearch?: boolean\n\n /\n A boolean property that, when set to true, enables the drag-and-drop sorting functionality within the popup list.\n * This allows users to reorder the options in the list by dragging them into new positions.\n * @type {boolean\|undefined}\n /\n @property({ type: Boolean, attribute: 'sortable', reflect: true }) sortable?: boolean = false\n\n /\n The value(s) of the selected option(s) in the popup list.\n * This property can be a string or an array of strings, depending on whether multiple selections are allowed.\n * @type {string\|string[]\|undefined}\n /\n @property({ type: String }) value?: string \| string[]\n\n @state() activeIndex?: number\n @state() searchKeyword?: string\n @state() nothingToSelect: boolean = false\n\n @query('[search] input') searchInput!: HTMLInputElement\n @query('div[body]') body!: HTMLDivElement\n\n private sortableObject?: Sortable\n private locked: boolean = false\n\n render() {\n return html`\n <slot name=\"header\"> </slot>\n\n ${this.withSearch\n ? html`\n <label search for=\"search\" @input=${(e: InputEvent) => this._oninputsearch(e)}>\n <md-icon search-icon>search</md-icon>\n <input\n id=\"search\"\n type=\"text\"\n autocomplete=\"off\"\n @keydown=${(e: KeyboardEvent) => this._onkeydownsearch(e)}\n @change=${(e: InputEvent) => this._onchangesearch(e)}\n />\n <md-icon\n @click=${() => {\n this.searchInput.value = ''\n this.searchKeyword = ''\n }}\n delete-icon\n >delete</md-icon\n >\n </label>\n `\n : html``}\n\n <div body>\n <slot\n @change=${(e: Event) => {\n e.stopPropagation()\n }}\n >\n </slot>\n </div>\n\n ${this.nothingToSelect ? html`<label nothing>nothing to select</label>` : html``}\n `\n }\n\n protected _oninputsearch(e: InputEvent) {\n e.stopPropagation()\n e.preventDefault()\n\n this.searchKeyword = (e.target as HTMLInputElement).value\n }\n\n protected _onchangesearch(e: InputEvent) {\n e.stopPropagation()\n this.searchKeyword = (e.target as HTMLInputElement).value\n }\n\n protected _onkeydownsearch(e: KeyboardEvent) {\n const keys = ['Esc', 'Escape', 'Up', 'ArrowUp', 'Down', 'ArrowDown']\n if (!keys.includes(e.key)) {\n e.stopPropagation()\n }\n }\n\n protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupList, 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 case 'Left': // for IE/Edge\n case 'ArrowLeft':\n case 'Up': // for IE/Edge\n case 'ArrowUp':\n this.activeIndex!--\n break\n\n case 'Right': // for IE/Edge\n case 'ArrowRight':\n case 'Down': // for IE/Edge\n case 'ArrowDown':\n this.activeIndex!++\n break\n\n case 'Enter':\n case ' ':\n case 'Spacebar': // for old firefox\n this.setActive(this.activeIndex!, true)\n this.select()\n break\n }\n }.bind(this)\n\n protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopupList, e: FocusEvent) {\n const to = e.relatedTarget as HTMLElement\n\n if (!this.contains(to)) {\n / If the focus has clearly moved to an element outside of my range, the ox-popup-list should be closed. /\n // @ts-ignore for debug\n !this.preventCloseOnBlur && !this.debug && !window.POPUP_DEBUG && this.close()\n }\n }.bind(this)\n\n protected _onclick: (e: MouseEvent) => void = function (this: OxPopupList, e: MouseEvent) {\n e.stopPropagation()\n\n // Check if the click event target is a checkbox\n if ((e.target as HTMLElement).closest('input[type=\"checkbox\"]')) {\n return // Do not proceed if it's a checkbox click\n }\n\n const option = (e.target as HTMLElement)?.closest('[option]')\n if (option) {\n this.setActive(option, true)\n this.select()\n }\n }.bind(this)\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('activeIndex')) {\n this.activeIndex !== undefined && this.setActive(this.activeIndex)\n }\n\n if (changes.has('sortable')) {\n this.sortableObject && this.sortableObject.destroy()\n\n if (this.sortable) {\n this.sortableObject = Sortable.create(this, {\n handle: '[option]',\n draggable: '[option]',\n direction: 'vertical',\n animation: 150,\n touchStartThreshold: 10,\n onEnd: e => {\n this.locked = false\n this.dispatchEvent(\n new CustomEvent('sorted', {\n detail: Array.from(this.querySelectorAll('[option]'))\n })\n )\n },\n onMove: e => {\n // Check if the drag event target is a checkbox\n if ((e.dragged as HTMLElement).querySelector('input[type=\"checkbox\"]')) {\n return false // Prevent sorting if it's a checkbox drag\n }\n this.locked = true\n }\n })\n }\n }\n\n if (changes.has('searchKeyword')) {\n const attrSelected = this.attrSelected \|\| 'selected'\n this.querySelectorAll(`[option]`).forEach(item => {\n if (!this.searchKeyword \|\| item.textContent?.match(new RegExp(this.searchKeyword, 'i'))) {\n item.removeAttribute('hidden')\n } else {\n item.removeAttribute('selected')\n item.setAttribute('hidden', '')\n }\n })\n this.nothingToSelect = this.querySelectorAll(`[option]:not([hidden])`).length === 0\n }\n\n if (changes.has('value')) {\n const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n var values = this.value\n if (!(values instanceof Array)) {\n values = [values as string]\n }\n\n options.forEach(option => {\n if (values?.includes((option as HTMLElement).getAttribute('value') \|\| '')) {\n option.setAttribute(this.attrSelected \|\| 'selected', '')\n } else {\n option.removeAttribute(this.attrSelected \|\| 'selected')\n }\n })\n }\n }\n\n /\n Retrieves the labels of the selected options in the popup list.\n * If multiple selections are allowed, an array of labels is returned. Otherwise, a single label is returned.\n * @returns {string\|string[]} The label(s) of the selected option(s).\n /\n public getSelectedLabels(): string \| string[] {\n const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n const selected = options\n .filter(option => option.hasAttribute('value') && option.hasAttribute(this.attrSelected \|\| 'selected'))\n .map(option => option.textContent \|\| '')\n\n return this.multiple ? selected : selected[0]\n }\n\n /\n Handles the selection of options in the popup list and dispatches a 'select' event with the selected value(s).\n * If multiple selections are allowed, an array of selected values is dispatched; otherwise, a single value is dispatched.\n * Also, it checks whether the selected option should remain alive and whether the popup should be closed.\n /\n async select() {\n await this.updateComplete\n\n const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n const selected = options\n .filter(option => option.hasAttribute('value') && option.hasAttribute(this.attrSelected \|\| 'selected'))\n .map(option => option.getAttribute('value'))\n\n this.dispatchEvent(\n new CustomEvent('select', {\n bubbles: true,\n composed: true,\n detail: this.multiple ? selected : selected[0]\n })\n )\n\n const option = options[this.activeIndex!]\n if (!option.hasAttribute('alive-on-select') && !this.hasAttribute('multiple')) {\n this.close()\n }\n }\n\n /\n Sets the active option within the popup list based on the given index or Element.\n * If 'withSelect' is true, it also manages the selection state of the option.\n \n @param {number \| Element \| null} active - The index or Element of the option to set as active.\n * @param {boolean \| undefined} withSelect - Indicates whether to manage the selection state of the option.\n /\n setActive(active: number \| Element \| null, withSelect?: boolean) {\n var options = Array.from(this.querySelectorAll('[option]:not([hidden])'))\n if (this.withSearch) {\n options.push(this.renderRoot.querySelector('[search]')!)\n }\n\n if (active instanceof Element) {\n const index = options.findIndex(option => option === active)\n this.setActive(index === -1 ? 0 : index, withSelect)\n return\n }\n\n const attrSelected = this.attrSelected \|\| 'selected'\n\n options.forEach(async (option, index) => {\n if (typeof active === 'number' && index === (active + options.length) % options.length) {\n option.setAttribute('active', '')\n\n if (withSelect && !this.attrSelected) {\n / being set attribute attrs-selected means, that element should know how to do when event happened. /\n this.multiple ? option.toggleAttribute('selected') : option.setAttribute('selected', '')\n }\n\n guaranteeFocus(option as HTMLElement)\n\n this.activeIndex = index\n } else {\n option.removeAttribute('active')\n / even thought attribute attrs-selected set, ox-popup-list have to unset others. /\n !this.multiple && withSelect && option.removeAttribute(attrSelected)\n }\n })\n }\n\n /\n Overrides the 'open' method of the base class 'OxPopup' to set the initial active index\n * when the popup list is opened. It ensures that an option is initially selected for user interaction.\n \n @param {object} params - The parameters for opening the popup, including position and size.\n /\n override open(params: {\n left?: number\n top?: number\n right?: number\n bottom?: number\n width?: string\n height?: string\n silent?: boolean\n }) {\n super.open(params)\n\n if (this.activeIndex === undefined) {\n const activeElement = this.querySelector(`[${this.attrSelected \|\| 'selected'}]`)\n this.setActive(activeElement \|\| 0)\n } else {\n this.setActive(this.activeIndex)\n }\n }\n\n /\n Overrides the 'close' method of the base class 'OxPopup' to dispatch a custom event\n * indicating that the popup list is being closed. This event can be used for further interactions\n * or logic in the application.\n /\n override close() {\n if (this.locked) {\n return\n }\n\n if (this.hasAttribute('active')) {\n this.dispatchEvent(\n new CustomEvent('close', {\n bubbles: true,\n composed: true\n })\n )\n }\n\n super.close()\n }\n\n /\n Open OxPopup\n \n @param {PopupOpenOptions}\n */\n static open({\n template,\n top,\n left,\n right,\n bottom,\n parent,\n multiple,\n sortable,\n attrSelected,\n styles,\n debug\n }: {\n template: unknown\n top?: number\n left?: number\n right?: number\n bottom?: number\n parent?: Element \| null\n multiple?: boolean\n sortable?: boolean\n debug?: boolean\n attrSelected?: string\n styles: CSSResult\n }): OxPopupList {\n const owner = parent \|\| document.body\n const target = document.createElement('ox-popup-list') as OxPopupList\n\n if (styles) {\n const style = document.createElement('style')\n style.textContent = styles.cssText\n\n const shadow = target.attachShadow({ mode: 'open' })\n shadow.appendChild(style)\n }\n\n if (!!debug) {\n target.setAttribute('debug', '')\n }\n\n if (!!multiple) {\n target.setAttribute('multiple', '')\n }\n\n if (!!sortable) {\n target.setAttribute('sortable', '')\n }\n\n if (attrSelected) {\n target.setAttribute('attr-selected', attrSelected)\n }\n\n render(template, target)\n\n target._parent = owner\n\n owner.appendChild(target)\n\n target.open({ top, left, right, bottom })\n\n return target\n }\n}\n"]}
1	+ {"version":3,"file":"ox-popup-list.js","sourceRoot":"","sources":["../../src/ox-popup-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, CSSResult, html, PropertyValues } from 'lit'\nimport { render } from 'lit-html'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport Sortable from 'sortablejs'\n\nimport { OxPopup } from './ox-popup'\n\nfunction guaranteeFocus(element: HTMLElement) {\n // 1. Give focus opportunity to the first focusable element within the option element.\n const focusible = element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])')\n\n if (focusible) {\n ;(focusible as HTMLElement).focus()\n return\n }\n\n // 2. Give focus opportunity to the closest parent, including itself.\n const closest = element.closest(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n ) as HTMLElement\n\n closest?.focus()\n}\n\n/*\n A custom element representing a list-like popup menu.\n /\n@customElement('ox-popup-list')\nexport class OxPopupList extends OxPopup {\n static styles = [\n ...OxPopup.styles,\n css`\n :host {\n display: none;\n align-items: stretch;\n background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface-container-lowest));\n z-index: 100;\n box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n padding: var(--spacing-small) 0;\n border-radius: var(--md-sys-shape-corner-small, 5px);\n\n color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n font:\n normal 14px 'Roboto',\n sans-serif;\n }\n\n :host([active]) {\n display: flex;\n flex-direction: column;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n :host([nowrap]) ::slotted([option]) {\n white-space: nowrap;\n }\n\n ::slotted([option]) {\n border-left: 3px solid transparent;\n }\n\n ::slotted() {\n padding: var(--spacing-medium);\n border-bottom: 1px solid var(--md-sys-color-surface-variant);\n cursor: pointer;\n outline: none;\n color: var(--ox-popup-list-color, var(--md-sys-color-on-surface-variant));\n }\n\n ::slotted(:focus) {\n outline: none;\n }\n\n ::slotted([option][active]),\n ::slotted([option]:hover) {\n background-color: var(--ox-popup-list-background-color-variant, var(--md-sys-color-primary-container));\n color: var(--ox-popup-list-color-variant, var(--md-sys-color-primary));\n }\n\n ::slotted([option][selected]) {\n border-left: 3px solid var(--md-sys-color-primary);\n font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n }\n\n ::slotted([separator]) {\n height: 1px;\n width: 100%;\n padding: 0;\n background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));\n }\n\n ::slotted([hidden]) {\n display: none;\n }\n\n [search] {\n display: flex;\n position: relative;\n align-items: center;\n padding: var(--spacing-small) var(--spacing-medium);\n\n --md-icon-size: var(--icon-size-small);\n }\n\n [search] [type='text'] {\n flex: 1;\n background-color: transparent;\n border: 0;\n padding: 0 0 0 var(--spacing-huge);\n outline: none;\n width: 50px;\n }\n\n [search] md-icon {\n color: var(--md-sys-color-secondary);\n }\n\n [search] md-icon[search-icon] {\n position: absolute;\n }\n\n [search] md-icon[delete-icon] {\n opacity: 0.5;\n --md-icon-size: var(--icon-size-tiny);\n }\n\n [nothing] {\n opacity: 0.5;\n text-align: center;\n }\n\n div[body] {\n flex: 1;\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n overflow: auto;\n }\n `\n ]\n\n /*\n A boolean property that, when set to true, allows multiple options to be selected in the popup list.\n * @type {boolean}\n /\n @property({ type: Boolean, attribute: true, reflect: true }) multiple: boolean = false\n\n /\n An optional attribute that specifies the name of the attribute used to mark selected options in the list.\n * @type {string\|undefined}\n /\n @property({ type: String, attribute: 'attr-selected', reflect: true }) attrSelected?: string\n\n /\n A boolean property that, when set to true, enables the search functionality in the popup list.\n * Users can search/filter options by typing in a search bar.\n * @type {boolean\|undefined}\n /\n @property({ type: Boolean, attribute: 'with-search', reflect: true }) withSearch?: boolean\n\n /\n A boolean property that, when set to true, enables the drag-and-drop sorting functionality within the popup list.\n * This allows users to reorder the options in the list by dragging them into new positions.\n * @type {boolean\|undefined}\n /\n @property({ type: Boolean, attribute: 'sortable', reflect: true }) sortable?: boolean = false\n\n /\n The value(s) of the selected option(s) in the popup list.\n * This property can be a string or an array of strings, depending on whether multiple selections are allowed.\n * @type {string\|string[]\|undefined}\n /\n @property({ type: String }) value?: string \| string[]\n\n @state() activeIndex?: number\n @state() searchKeyword?: string\n @state() nothingToSelect: boolean = false\n\n @query('[search] input') searchInput!: HTMLInputElement\n @query('div[body]') body!: HTMLDivElement\n\n private sortableObject?: Sortable\n private locked: boolean = false\n\n render() {\n return html`\n <slot name=\"header\"> </slot>\n\n ${this.withSearch\n ? html`\n <label search for=\"search\" @input=${(e: InputEvent) => this._oninputsearch(e)}>\n <md-icon search-icon>search</md-icon>\n <input\n id=\"search\"\n type=\"text\"\n autocomplete=\"off\"\n @keydown=${(e: KeyboardEvent) => this._onkeydownsearch(e)}\n @change=${(e: InputEvent) => this._onchangesearch(e)}\n />\n <md-icon\n @click=${() => {\n this.searchInput.value = ''\n this.searchKeyword = ''\n }}\n delete-icon\n >delete</md-icon\n >\n </label>\n `\n : html``}\n\n <div body>\n <slot\n @change=${(e: Event) => {\n e.stopPropagation()\n }}\n >\n </slot>\n </div>\n\n ${this.nothingToSelect ? html`<label nothing>nothing to select</label>` : html``}\n `\n }\n\n protected _oninputsearch(e: InputEvent) {\n e.stopPropagation()\n e.preventDefault()\n\n this.searchKeyword = (e.target as HTMLInputElement).value\n }\n\n protected _onchangesearch(e: InputEvent) {\n e.stopPropagation()\n this.searchKeyword = (e.target as HTMLInputElement).value\n }\n\n protected _onkeydownsearch(e: KeyboardEvent) {\n const keys = ['Esc', 'Escape', 'Up', 'ArrowUp', 'Down', 'ArrowDown']\n if (!keys.includes(e.key)) {\n e.stopPropagation()\n }\n }\n\n protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupList, 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 case 'Left': // for IE/Edge\n case 'ArrowLeft':\n case 'Up': // for IE/Edge\n case 'ArrowUp':\n this.activeIndex!--\n break\n\n case 'Right': // for IE/Edge\n case 'ArrowRight':\n case 'Down': // for IE/Edge\n case 'ArrowDown':\n this.activeIndex!++\n break\n\n case 'Enter':\n case ' ':\n case 'Spacebar': // for old firefox\n this.setActive(this.activeIndex!, true)\n this.select()\n break\n }\n }.bind(this)\n\n protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopupList, e: FocusEvent) {\n const to = e.relatedTarget as HTMLElement\n\n if (!this.contains(to)) {\n / If the focus has clearly moved to an element outside of my range, the ox-popup-list should be closed. /\n // @ts-ignore for debug\n !this.preventCloseOnBlur && !this.debug && !window.POPUP_DEBUG && this.close()\n }\n }.bind(this)\n\n protected _onclick: (e: MouseEvent) => void = function (this: OxPopupList, e: MouseEvent) {\n e.stopPropagation()\n\n // Check if the click event target is a checkbox\n if ((e.target as HTMLElement).closest('input[type=\"checkbox\"]')) {\n return // Do not proceed if it's a checkbox click\n }\n\n const option = (e.target as HTMLElement)?.closest('[option]')\n if (option) {\n this.setActive(option, true)\n this.select()\n }\n }.bind(this)\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('activeIndex')) {\n this.activeIndex !== undefined && this.setActive(this.activeIndex)\n }\n\n if (changes.has('sortable')) {\n this.sortableObject && this.sortableObject.destroy()\n\n if (this.sortable) {\n this.sortableObject = Sortable.create(this, {\n handle: '[option]',\n draggable: '[option]',\n direction: 'vertical',\n animation: 150,\n touchStartThreshold: 10,\n onEnd: e => {\n this.locked = false\n this.dispatchEvent(\n new CustomEvent('sorted', {\n detail: Array.from(this.querySelectorAll('[option]'))\n })\n )\n },\n onMove: e => {\n // Check if the drag event target is a checkbox\n if ((e.dragged as HTMLElement).querySelector('input[type=\"checkbox\"]')) {\n return false // Prevent sorting if it's a checkbox drag\n }\n this.locked = true\n }\n })\n }\n }\n\n if (changes.has('searchKeyword')) {\n const attrSelected = this.attrSelected \|\| 'selected'\n this.querySelectorAll(`[option]`).forEach(item => {\n if (!this.searchKeyword \|\| item.textContent?.match(new RegExp(this.searchKeyword, 'i'))) {\n item.removeAttribute('hidden')\n } else {\n item.removeAttribute('selected')\n item.setAttribute('hidden', '')\n }\n })\n this.nothingToSelect = this.querySelectorAll(`[option]:not([hidden])`).length === 0\n }\n\n if (changes.has('value')) {\n const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n var values = this.value\n if (!(values instanceof Array)) {\n values = [values as string]\n }\n\n options.forEach(option => {\n if (values?.includes((option as HTMLElement).getAttribute('value') \|\| '')) {\n option.setAttribute(this.attrSelected \|\| 'selected', '')\n } else {\n option.removeAttribute(this.attrSelected \|\| 'selected')\n }\n })\n }\n }\n\n /\n Retrieves the labels of the selected options in the popup list.\n * If multiple selections are allowed, an array of labels is returned. Otherwise, a single label is returned.\n * @returns {string\|string[]} The label(s) of the selected option(s).\n /\n public getSelectedLabels(): string \| string[] {\n const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n const selected = options\n .filter(option => option.hasAttribute('value') && option.hasAttribute(this.attrSelected \|\| 'selected'))\n .map(option => option.textContent \|\| '')\n\n return this.multiple ? selected : selected[0]\n }\n\n /\n Handles the selection of options in the popup list and dispatches a 'select' event with the selected value(s).\n * If multiple selections are allowed, an array of selected values is dispatched; otherwise, a single value is dispatched.\n * Also, it checks whether the selected option should remain alive and whether the popup should be closed.\n /\n async select() {\n await this.updateComplete\n\n const options = Array.from(this.querySelectorAll(':scope > [option]'))\n\n const selected = options\n .filter(option => option.hasAttribute('value') && option.hasAttribute(this.attrSelected \|\| 'selected'))\n .map(option => option.getAttribute('value'))\n\n this.dispatchEvent(\n new CustomEvent('select', {\n bubbles: true,\n composed: true,\n detail: this.multiple ? selected : selected[0]\n })\n )\n\n const option = options[this.activeIndex!]\n if (!option.hasAttribute('alive-on-select') && !this.hasAttribute('multiple')) {\n this.close()\n }\n }\n\n /\n Sets the active option within the popup list based on the given index or Element.\n * If 'withSelect' is true, it also manages the selection state of the option.\n \n @param {number \| Element \| null} active - The index or Element of the option to set as active.\n * @param {boolean \| undefined} withSelect - Indicates whether to manage the selection state of the option.\n /\n setActive(active: number \| Element \| null, withSelect?: boolean) {\n var options = Array.from(this.querySelectorAll('[option]:not([hidden])'))\n if (this.withSearch) {\n options.push(this.renderRoot.querySelector('[search]')!)\n }\n\n if (active instanceof Element) {\n const index = options.findIndex(option => option === active)\n this.setActive(index === -1 ? 0 : index, withSelect)\n return\n }\n\n const attrSelected = this.attrSelected \|\| 'selected'\n\n options.forEach(async (option, index) => {\n if (typeof active === 'number' && index === (active + options.length) % options.length) {\n option.setAttribute('active', '')\n\n if (withSelect && !this.attrSelected) {\n / being set attribute attrs-selected means, that element should know how to do when event happened. /\n this.multiple ? option.toggleAttribute('selected') : option.setAttribute('selected', '')\n }\n\n guaranteeFocus(option as HTMLElement)\n\n this.activeIndex = index\n } else {\n option.removeAttribute('active')\n / even thought attribute attrs-selected set, ox-popup-list have to unset others. /\n !this.multiple && withSelect && option.removeAttribute(attrSelected)\n }\n })\n }\n\n /\n Overrides the 'open' method of the base class 'OxPopup' to set the initial active index\n * when the popup list is opened. It ensures that an option is initially selected for user interaction.\n \n @param {object} params - The parameters for opening the popup, including position and size.\n /\n override open(params: {\n left?: number\n top?: number\n right?: number\n bottom?: number\n width?: string\n height?: string\n silent?: boolean\n absolutePosition?: boolean\n }) {\n super.open(params)\n\n if (this.activeIndex === undefined) {\n const activeElement = this.querySelector(`[${this.attrSelected \|\| 'selected'}]`)\n this.setActive(activeElement \|\| 0)\n } else {\n this.setActive(this.activeIndex)\n }\n }\n\n /\n Overrides the 'close' method of the base class 'OxPopup' to dispatch a custom event\n * indicating that the popup list is being closed. This event can be used for further interactions\n * or logic in the application.\n /\n override close() {\n if (this.locked) {\n return\n }\n\n if (this.hasAttribute('active')) {\n this.dispatchEvent(\n new CustomEvent('close', {\n bubbles: true,\n composed: true\n })\n )\n }\n\n super.close()\n }\n\n /\n Open OxPopup\n \n @param {PopupOpenOptions}\n */\n static open({\n template,\n top,\n left,\n right,\n bottom,\n parent,\n multiple,\n sortable,\n attrSelected,\n styles,\n debug\n }: {\n template: unknown\n top?: number\n left?: number\n right?: number\n bottom?: number\n parent?: Element \| null\n multiple?: boolean\n sortable?: boolean\n debug?: boolean\n attrSelected?: string\n styles: CSSResult\n }): OxPopupList {\n const owner = parent \|\| document.body\n const target = document.createElement('ox-popup-list') as OxPopupList\n\n if (styles) {\n const style = document.createElement('style')\n style.textContent = styles.cssText\n\n const shadow = target.attachShadow({ mode: 'open' })\n shadow.appendChild(style)\n }\n\n if (!!debug) {\n target.setAttribute('debug', '')\n }\n\n if (!!multiple) {\n target.setAttribute('multiple', '')\n }\n\n if (!!sortable) {\n target.setAttribute('sortable', '')\n }\n\n if (attrSelected) {\n target.setAttribute('attr-selected', attrSelected)\n }\n\n render(template, target)\n\n target._parent = owner\n\n owner.appendChild(target)\n\n target.open({ top, left, right, bottom })\n\n return target\n }\n}\n"]}

package/dist/src/ox-popup-menu.d.ts CHANGED Viewed

@@ -29,12 +29,13 @@ export declare class OxPopupMenu extends OxPopup {
      *
      * @param {PopupOpenOptions}
      */
-    static open({ template, top, left, right, bottom, parent }: {
+    static open({ template, top, left, right, bottom, parent, absolutePosition }: {
         template: unknown;
         top?: number;
         left?: number;
         right?: number;
         bottom?: number;
         parent?: Element | null;
+        absolutePosition?: boolean;
     }): OxPopupMenu;
 }

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

@@ -187,14 +187,14 @@ let OxPopupMenu = class OxPopupMenu extends OxPopup {
      *
      * @param {PopupOpenOptions}
      */
-    static open({ template, top, left, right, bottom, parent }) {
+    static open({ template, top, left, right, bottom, parent, absolutePosition = false }) {
         const owner = parent || document.body;
         const target = document.createElement('ox-popup-menu');
         render(template, target);
         target.setAttribute('active', '');
         target._parent = owner;
         owner.appendChild(target);
-        target.open({ top, left, right, bottom });
+        target.open({ top, left, right, bottom, absolutePosition });
         return target;
     }
 };

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

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

package/dist/src/ox-popup-menuitem.js CHANGED Viewed

@@ -136,7 +136,7 @@ let OxPopupMenuItem = class OxPopupMenuItem extends LitElement {
         }
         const top = 0;
         const left = this.clientWidth;
-        this._submenu.open({ top, left, silent });
+        this._submenu.open({ top, left, silent, absolutePosition: false });
     }
     /**
      * Collapses the submenu, if it exists.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-popup-menuitem.js","sourceRoot":"","sources":["../../src/ox-popup-menuitem.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAIlE;;;GAGG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QA6CL;;;WAGG;QAC0B,WAAM,GAAY,KAAK,CAAA;QA4B1C,aAAQ,GAA4B,UAAiC,CAAa;YAC1F,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,OAAM;YACR,CAAC;YAED,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAgB,CAAA;YAC3D,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;YACxB,CAAC;YAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAA;YAE7C,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACpB,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,eAAU,GAA+B,UAAiC,CAAgB;YAClG,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;gBACd,KAAK,OAAO,CAAC;gBACb,KAAK,YAAY;oBACf,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBAClB,MAAK;gBAEP,KAAK,MAAM,CAAC;gBACZ,KAAK,WAAW;oBACd,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,IAAI,CAAC,YAAY,EAAE,CAAA;oBACnB,MAAK;gBAEP,KAAK,OAAO;oBACV,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;wBAClB,CAAC,CAAC,eAAe,EAAE,CAAA;wBACnB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBACpB,CAAC;oBACD,MAAK;YACT,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,kBAAa,GAAuB,UAAiC,CAAQ;YACrF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAgB,CAAA;QACpE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;~~IAsDd~~,CAAC;~~aA9KQ~~,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCF;KACF,AA1CY,CA0CZ;IAeD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;mBAII,IAAI,CAAC,KAAK;;QAErB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;0BAE7C,IAAI,CAAC,aAAa;KACvC,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QAClC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACjD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC/C,CAAC;IAgDD,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,YAAY,EAAE,CAAA;QACrB,CAAC;IACH,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;QACnB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,EAAE,CAAA;QACjB,CAAC;IACH,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,MAAe;QACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAM;QACR,CAAC;QAED,MAAM,GAAG,GAAG,CAAC,CAAA;QACb,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAA;~~QAC7B~~,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAA;~~IAC3C~~,CAAC;IAED;;OAEG;IACH,QAAQ;QACN,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAA;IACxB,CAAC;IAED;;;OAGG;IACH,YAAY;QACV,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IACrG,CAAC;IAED;;;OAGG;IACH,KAAK;QACH,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClG,CAAC;;~~AA7H4B~~;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAwB;AAKxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAe;AAEjC;IAAR,KAAK,EAAE;iDAAuB;AAxDpB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,~~CA+K3B~~","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopupMenu } from './ox-popup-menu'\n\n/*\n Custom element representing a menu item within an OxPopup menu.\n * It can contain a label and an optional submenu.\n /\n@customElement('ox-popup-menuitem')\nexport class OxPopupMenuItem extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: row;\n position: relative;\n align-items: center;\n }\n\n [icon] {\n width: 20px;\n display: flex;\n flex-direction: row;\n padding: 0;\n margin: 0 var(--spacing-small) 0 0;\n align-items: center;\n justify-content: center;\n }\n\n [icon] > {\n flex: 1;\n }\n\n [label] {\n flex: 1;\n text-transform: capitalize;\n }\n\n ::slotted([slot='icon']) {\n color: var(--ox-popup-menu-color-variant, var(--md-sys-color-on-surface-variant));\n font-size: var(--icon-size-small);\n }\n\n md-icon {\n display: block;\n width: 24px;\n text-align: right;\n font-size: var(--icon-size-small);\n color: var(--ox-popup-menu-color-variant, var(--md-sys-color-primary));\n opacity: 0.7;\n }\n `\n ]\n\n /\n Property indicating whether the menu item is active or not.\n * When active, it may show a submenu.\n /\n @property({ type: Boolean }) active: boolean = false\n\n /\n The label to display for the menu item.\n /\n @property({ type: String }) label!: string\n\n @state() _submenu?: OxPopupMenu\n\n render() {\n return html`\n <div icon>\n <slot name=\"icon\"> </slot>\n </div>\n <div label>${this.label}</div>\n\n ${this._submenu ? html`<md-icon>chevron_right</md-icon>` : html``}\n\n <slot @slotchange=${this._onslotchange}> </slot>\n `\n }\n\n firstUpdated() {\n this.setAttribute('tabindex', '0')\n this.addEventListener('keydown', this._onkeydown)\n this.addEventListener('click', this._onclick)\n }\n\n protected _onclick: (e: MouseEvent) => void = function (this: OxPopupMenuItem, e: MouseEvent) {\n if (!this._submenu) {\n return\n }\n\n e.stopPropagation()\n\n const parent = this.closest('ox-popup-menu') as OxPopupMenu\n if (parent) {\n parent.setActive(this)\n }\n\n this.dispatchEvent(new CustomEvent('select'))\n\n requestAnimationFrame(() => {\n this.expand(false)\n })\n }.bind(this)\n\n protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupMenuItem, e: KeyboardEvent) {\n switch (e.key) {\n case 'Right':\n case 'ArrowRight':\n e.stopPropagation()\n this.expand(false)\n break\n\n case 'Left':\n case 'ArrowLeft':\n e.stopPropagation()\n this.collapseSelf()\n break\n\n case 'Enter':\n if (this._submenu) {\n e.stopPropagation()\n this.expand(false)\n }\n break\n }\n }.bind(this)\n\n protected _onslotchange: (e: Event) => void = function (this: OxPopupMenuItem, e: Event) {\n this._submenu = this.querySelector('ox-popup-menu') as OxPopupMenu\n }.bind(this)\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('active')) {\n this.updateActive()\n }\n }\n\n updateActive() {\n if (this.active) {\n this.expand(true)\n } else {\n this.collapse()\n }\n }\n\n /\n Expands the submenu, if it exists.\n * The submenu is displayed below and to the right of the menu item.\n \n @param {boolean} silent - If true, the submenu is opened silently without user interaction.\n /\n expand(silent: boolean) {\n if (!this._submenu) {\n return\n }\n\n const top = 0\n const left = this.clientWidth\n this._submenu.open({ top, left, silent })\n }\n\n /\n Collapses the submenu, if it exists.\n /\n collapse() {\n this._submenu?.close()\n }\n\n /\n Dispatches a custom 'ox-collapse' event indicating that the menu item should collapse itself.\n * This event can be used to trigger further interactions or logic in the application.\n /\n collapseSelf() {\n this.dispatchEvent(new CustomEvent('ox-collapse', { bubbles: true, composed: true, detail: this }))\n }\n\n /\n Dispatches a custom 'ox-close' event indicating that the menu item should close itself.\n * This event can be used to trigger further interactions or logic in the application.\n */\n close() {\n this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }))\n }\n}\n"]}
1	+ {"version":3,"file":"ox-popup-menuitem.js","sourceRoot":"","sources":["../../src/ox-popup-menuitem.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopupMenu } from './ox-popup-menu'\n\n/*\n Custom element representing a menu item within an OxPopup menu.\n * It can contain a label and an optional submenu.\n /\n@customElement('ox-popup-menuitem')\nexport class OxPopupMenuItem extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: row;\n position: relative;\n align-items: center;\n }\n\n [icon] {\n width: 20px;\n display: flex;\n flex-direction: row;\n padding: 0;\n margin: 0 var(--spacing-small) 0 0;\n align-items: center;\n justify-content: center;\n }\n\n [icon] > {\n flex: 1;\n }\n\n [label] {\n flex: 1;\n text-transform: capitalize;\n }\n\n ::slotted([slot='icon']) {\n color: var(--ox-popup-menu-color-variant, var(--md-sys-color-on-surface-variant));\n font-size: var(--icon-size-small);\n }\n\n md-icon {\n display: block;\n width: 24px;\n text-align: right;\n font-size: var(--icon-size-small);\n color: var(--ox-popup-menu-color-variant, var(--md-sys-color-primary));\n opacity: 0.7;\n }\n `\n ]\n\n /\n Property indicating whether the menu item is active or not.\n * When active, it may show a submenu.\n /\n @property({ type: Boolean }) active: boolean = false\n\n /\n The label to display for the menu item.\n /\n @property({ type: String }) label!: string\n\n @state() _submenu?: OxPopupMenu\n\n render() {\n return html`\n <div icon>\n <slot name=\"icon\"> </slot>\n </div>\n <div label>${this.label}</div>\n\n ${this._submenu ? html`<md-icon>chevron_right</md-icon>` : html``}\n\n <slot @slotchange=${this._onslotchange}> </slot>\n `\n }\n\n firstUpdated() {\n this.setAttribute('tabindex', '0')\n this.addEventListener('keydown', this._onkeydown)\n this.addEventListener('click', this._onclick)\n }\n\n protected _onclick: (e: MouseEvent) => void = function (this: OxPopupMenuItem, e: MouseEvent) {\n if (!this._submenu) {\n return\n }\n\n e.stopPropagation()\n\n const parent = this.closest('ox-popup-menu') as OxPopupMenu\n if (parent) {\n parent.setActive(this)\n }\n\n this.dispatchEvent(new CustomEvent('select'))\n\n requestAnimationFrame(() => {\n this.expand(false)\n })\n }.bind(this)\n\n protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupMenuItem, e: KeyboardEvent) {\n switch (e.key) {\n case 'Right':\n case 'ArrowRight':\n e.stopPropagation()\n this.expand(false)\n break\n\n case 'Left':\n case 'ArrowLeft':\n e.stopPropagation()\n this.collapseSelf()\n break\n\n case 'Enter':\n if (this._submenu) {\n e.stopPropagation()\n this.expand(false)\n }\n break\n }\n }.bind(this)\n\n protected _onslotchange: (e: Event) => void = function (this: OxPopupMenuItem, e: Event) {\n this._submenu = this.querySelector('ox-popup-menu') as OxPopupMenu\n }.bind(this)\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('active')) {\n this.updateActive()\n }\n }\n\n updateActive() {\n if (this.active) {\n this.expand(true)\n } else {\n this.collapse()\n }\n }\n\n /\n Expands the submenu, if it exists.\n * The submenu is displayed below and to the right of the menu item.\n \n @param {boolean} silent - If true, the submenu is opened silently without user interaction.\n /\n expand(silent: boolean) {\n if (!this._submenu) {\n return\n }\n\n const top = 0\n const left = this.clientWidth\n\n this._submenu.open({ top, left, silent, absolutePosition: false })\n }\n\n /\n Collapses the submenu, if it exists.\n /\n collapse() {\n this._submenu?.close()\n }\n\n /\n Dispatches a custom 'ox-collapse' event indicating that the menu item should collapse itself.\n * This event can be used to trigger further interactions or logic in the application.\n /\n collapseSelf() {\n this.dispatchEvent(new CustomEvent('ox-collapse', { bubbles: true, composed: true, detail: this }))\n }\n\n /\n Dispatches a custom 'ox-close' event indicating that the menu item should close itself.\n * This event can be used to trigger further interactions or logic in the application.\n */\n close() {\n this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }))\n }\n}\n"]}

package/dist/src/ox-popup.d.ts CHANGED Viewed

@@ -1,4 +1,9 @@
 import { LitElement } from 'lit';
+declare global {
+    interface Window {
+        POPUP_DEBUG?: boolean;
+    }
+}
 /**
  * Custom element class representing the 'ox-popup' component.
  *
@@ -34,7 +39,7 @@ export declare class OxPopup extends LitElement {
      * @property {Number} left The position-left where the pop-up will be displayed
      * @property {HTMLElement} parent Popup's parent element
      */
-    static open({ template, top, left, right, bottom, width, height, parent, style, preventCloseOnBlur }: {
+    static open({ template, top, left, right, bottom, width, height, parent, style, preventCloseOnBlur, absolutePosition }: {
         template: unknown;
         top?: number;
         left?: number;
@@ -45,6 +50,7 @@ export declare class OxPopup extends LitElement {
         parent?: Element | null;
         style?: string;
         preventCloseOnBlur?: boolean;
+        absolutePosition?: boolean;
     }): OxPopup;
     /**
      * Opens the 'ox-popup' with the specified position and dimensions.
@@ -57,8 +63,9 @@ export declare class OxPopup extends LitElement {
      * @param {string} options.width - The maximum width of the popup (CSS string). For example, '300px'.
      * @param {string} options.height - The maximum height of the popup (CSS string). For example, '200px'.
      * @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.
+     * @param {boolean} [options.absolutePosition=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.
      */
-    open({ left, top, right, bottom, width, height, silent }: {
+    open({ left, top, right, bottom, width, height, silent, absolutePosition }: {
         left?: number;
         top?: number;
         right?: number;
@@ -66,6 +73,7 @@ export declare class OxPopup extends LitElement {
         width?: string;
         height?: string;
         silent?: boolean;
+        absolutePosition?: boolean;
     }): void;
     guaranteeFocus(target?: HTMLElement): void;
     /**

package/dist/src/ox-popup.js CHANGED Viewed

@@ -21,8 +21,6 @@ let OxPopup = class OxPopup extends LitElement {
         this._onfocusout = function (e) {
             const to = e.relatedTarget;
             if (!this.contains(to)) {
-                /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup은 닫혀야 한다. */
-                // @ts-ignore for preventCloseOnBlur
                 !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close();
             }
         }.bind(this);
@@ -59,7 +57,6 @@ let OxPopup = class OxPopup extends LitElement {
             this.close();
         }.bind(this);
         this._onwindowblur = function (e) {
-            // @ts-ignore for preventCloseOnBlur
             !this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close();
         }.bind(this);
     }
@@ -67,9 +64,9 @@ let OxPopup = class OxPopup extends LitElement {
         ScrollbarStyles,
         css `
       :host {
-        position: absolute;
+        position: fixed;
         display: none;
-        z-index: 100;
+        z-index: 1000; /* Increased z-index to ensure it's on top */
         padding: 0;
         box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
         box-sizing: border-box;
@@ -78,6 +75,7 @@ let OxPopup = class OxPopup extends LitElement {
         text-align: initial;
         background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));
         color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));
+        margin: 0;
       }
       :host([active]) {
@@ -116,7 +114,7 @@ let OxPopup = class OxPopup extends LitElement {
      * @property {Number} left The position-left where the pop-up will be displayed
      * @property {HTMLElement} parent Popup's parent element
      */
-    static open({ template, top, left, right, bottom, width, height, parent, style, preventCloseOnBlur }) {
+    static open({ template, top, left, right, bottom, width, height, parent, style, preventCloseOnBlur, absolutePosition = false }) {
         const owner = parent || document.body;
         const target = document.createElement('ox-popup');
         if (preventCloseOnBlur) {
@@ -128,7 +126,7 @@ let OxPopup = class OxPopup extends LitElement {
         render(template, target);
         target._parent = owner;
         owner.appendChild(target);
-        target.open({ top, left, right, bottom, width, height });
+        target.open({ top, left, right, bottom, width, height, absolutePosition });
         return target;
     }
     /**
@@ -142,8 +140,9 @@ let OxPopup = class OxPopup extends LitElement {
      * @param {string} options.width - The maximum width of the popup (CSS string). For example, '300px'.
      * @param {string} options.height - The maximum height of the popup (CSS string). For example, '200px'.
      * @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.
+     * @param {boolean} [options.absolutePosition=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.
      */
-    open({ left, top, right, bottom, width, height, silent = false }) {
+    open({ left, top, right, bottom, width, height, silent = false, absolutePosition = false }) {
         if (width) {
             this.style.maxWidth = width;
             this.style.overflowX = 'auto';
@@ -158,14 +157,28 @@ let OxPopup = class OxPopup extends LitElement {
             this.style.top = '50%';
         }
         else {
-            if (left !== undefined)
+            const bounding = this.parentElement?.getBoundingClientRect() || {
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0
+            };
+            if (left !== undefined) {
+                left = absolutePosition ? left : left + bounding.left;
                 this.style.left = `${left}px`;
-            if (top !== undefined)
+            }
+            if (top !== undefined) {
+                top = absolutePosition ? top : top + bounding.top;
                 this.style.top = `${top}px`;
-            if (right !== undefined)
+            }
+            if (right !== undefined) {
+                right = absolutePosition ? right : window.innerWidth - (bounding.right - right);
                 this.style.right = `${right}px`;
-            if (bottom !== undefined)
+            }
+            if (bottom !== undefined) {
+                bottom = absolutePosition ? bottom : window.innerHeight - (bounding.bottom - bottom);
                 this.style.bottom = `${bottom}px`;
+            }
         }
         this.setAttribute('active', '');
         // adjust popup position
@@ -197,19 +210,14 @@ let OxPopup = class OxPopup extends LitElement {
             else if (vh < t + h) {
                 this.style.top = `calc(${computedStyle.top} - ${t + h - vh + 10}px)`; // 현재의 top 값에 차감한다.
                 this.style.bottom = '';
-                // this.style.top = ''
-                // this.style.bottom = '10px'
             }
             if (l < 0) {
                 this.style.left = `calc(${computedStyle.left} - ${l - 10}px)`; // 현재의 left 값에 l를 차감한다. (왼쪽으로 이탈했기 때문에 오른쪽으로 가야 화면에 보임)
-                // this.style.left = '10px'
                 this.style.right = '';
             }
             else if (vw < l + w) {
                 this.style.left = `calc(${computedStyle.left} - ${l + w - vw + 10}px)`; // 현재의 left 값에 차감한다.
                 this.style.right = '';
-                // this.style.left = ''
-                // this.style.right = '10px'
             }
         });
         // auto focusing

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

	@@ -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 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"]}
1	+ {"version":3,"file":"ox-popup.js","sourceRoot":"","sources":["../../src/ox-popup.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAQjD;;;;;;;;GAQG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QA8B4D,uBAAkB,GAAY,KAAK,CAAA;QAE3F,YAAO,GAAmB,IAAI,CAAA;QAE/B,eAAU,GAAgB,QAAQ,CAAC,aAA4B,CAAA;QAM7D,gBAAW,GAA4B,UAAyB,CAAa;YACrF,MAAM,EAAE,GAAG,CAAC,CAAC,aAA4B,CAAA;YAEzC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;gBACvB,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,CAAA;YACjE,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,eAAU,GAA+B,UAAyB,CAAgB;YAC1F,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;gBACd,KAAK,KAAK,CAAC,CAAC,cAAc;gBAC1B,KAAK,QAAQ;oBACX,IAAI,CAAC,KAAK,EAAE,CAAA;oBACZ,MAAK;YACT,CAAC;QACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,aAAQ,GAA+B,UAAyB,CAAgB;YACxF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,eAAU,GAA4B,UAAyB,CAAa;YACpF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,iBAAY,GAA4B,UAAyB,CAAa;YACtF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,mBAAc,GAAuB,UAAyB,CAAQ;YAC9E,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,eAAe;QACjB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,aAAQ,GAA4B,UAAyB,CAAa;YAClF,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,aAAQ,GAAuB,UAAyB,CAAQ;YACxE,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,gBAAW,GAAuB,UAAyB,CAAQ;YAC3E,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEF,kBAAa,GAAuB,UAAyB,CAAQ;YAC7E,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,CAAA;QACjE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IA8Od,CAAC;aAxUQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;KAwBF;KACF,AA3BY,CA2BZ;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA,UAAU,CAAA;IACvB,CAAC;IAuDD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;QACnD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACjD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC7C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC7C,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACjD,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;QACrD,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;QACzD,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QAChD,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;QAEtD,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA,CAAC,8BAA8B;QACjE,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED;;;;;;;;OAQG;IACH,MAAM,CAAC,IAAI,CAAC,EACV,QAAQ,EACR,GAAG,EACH,IAAI,EACJ,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,EACL,kBAAkB,EAClB,gBAAgB,GAAG,KAAK,EAazB;QACC,MAAM,KAAK,GAAG,MAAM,IAAI,QAAQ,CAAC,IAAI,CAAA;QACrC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAY,CAAA;QAC5D,IAAI,kBAAkB,EAAE,CAAC;YACvB,MAAM,CAAC,kBAAkB,GAAG,kBAAkB,CAAA;QAChD,CAAC;QACD,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAA;QAC9B,CAAC;QAED,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAExB,MAAM,CAAC,OAAO,GAAG,KAAK,CAAA;QACtB,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;QAEzB,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAA;QAE1E,OAAO,MAAM,CAAA;IACf,CAAC;IAED;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EACH,IAAI,EACJ,GAAG,EACH,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,GAAG,KAAK,EACd,gBAAgB,GAAG,KAAK,EAUzB;QACC,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAA;YAC3B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;QAC/B,CAAC;QAED,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;YAC7B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;QAC/B,CAAC;QAED,IAAI,IAAI,KAAK,SAAS,IAAI,GAAG,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YAC3F,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,mCAAmC,CAAA;YAC1D,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAA;YACvB,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAA;QACxB,CAAC;aAAM,CAAC;YACN,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,qBAAqB,EAAE,IAAI;gBAC9D,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,CAAC;gBACR,GAAG,EAAE,CAAC;gBACN,MAAM,EAAE,CAAC;aACV,CAAA;YAED,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;gBACvB,IAAI,GAAG,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAA;gBACrD,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAA;YAC/B,CAAC;YACD,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBACtB,GAAG,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAA;gBACjD,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;YAC7B,CAAC;YACD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACxB,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC,CAAA;gBAC/E,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAA;YACjC,CAAC;YACD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;gBACzB,MAAM,GAAG,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;gBACpF,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAA;YACnC,CAAC;QACH,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;QAE/B,wBAAwB;QACxB,qBAAqB,CAAC,GAAG,EAAE;YACzB,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAA;YACrC,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAA;YAEpC,IAAI,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;YAE3C,IAAI,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAA;YACvB,IAAI,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAA;YACtB,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAA;YACpB,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAA;YAErB,+DAA+D;YAC/D,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;gBACX,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;gBAC1F,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAA;gBAC5B,CAAC,GAAG,EAAE,CAAA;YACR,CAAC;YAED,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;gBACX,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;gBACzF,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAA;gBAC5B,CAAC,GAAG,EAAE,CAAA;YACR,CAAC;YAED,8DAA8D;YAC9D,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAA;YAE5C,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;gBACV,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,MAAM,CAAA;gBACvB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAA;YACxB,CAAC;iBAAM,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBACtB,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,aAAa,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAA,CAAC,mBAAmB;gBACxF,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAA;YACxB,CAAC;YAED,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;gBACV,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,QAAQ,aAAa,CAAC,IAAI,MAAM,CAAC,GAAG,EAAE,KAAK,CAAA,CAAC,uDAAuD;gBACrH,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;YACvB,CAAC;iBAAM,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBACtB,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,QAAQ,aAAa,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAA,CAAC,oBAAoB;gBAC3F,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;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;IACrD,CAAC;IAED,cAAc,CAAC,MAAoB;QACjC,MAAM,SAAS,GAAG,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,aAAa,CAC9C,gIAAgI,CACjI,CAAA;QAED,IAAI,SAAS,EAAE,CAAC;YACd,CAAC;YAAC,SAAyB,CAAC,KAAK,EAAE,CAAA;QACrC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC;IACH,CAAC;IAED;;OAEG;IACH,KAAK;QACH,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;QAE9B,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAEtD,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,gEAAgE;YAChE,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;YACtD,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;YACpD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;YAChD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;YAChD,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;YACnD,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;YACzD,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;YACpD,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;YACxD,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;YAE5D,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;YAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;YAEnB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;YAClD,CAAC;QACH,CAAC;IACH,CAAC;;AA1SgE;IAAhE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;mDAAoC;AAE3F;IAAR,KAAK,EAAE;wCAA+B;AAhC5B,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAyUnB","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\ndeclare global {\n interface Window {\n POPUP_DEBUG?: boolean\n }\n}\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: fixed;\n display: none;\n z-index: 1000; / Increased z-index to ensure it's on top /\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 margin: 0;\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 !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 !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 absolutePosition = false\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 absolutePosition?: 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, absolutePosition })\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 * @param {boolean} [options.absolutePosition=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 absolutePosition = false\n }: {\n left?: number\n top?: number\n right?: number\n bottom?: number\n width?: string\n height?: string\n silent?: boolean\n absolutePosition?: 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 const bounding = this.parentElement?.getBoundingClientRect() \|\| {\n left: 0,\n right: 0,\n top: 0,\n bottom: 0\n }\n\n if (left !== undefined) {\n left = absolutePosition ? left : left + bounding.left\n this.style.left = `${left}px`\n }\n if (top !== undefined) {\n top = absolutePosition ? top : top + bounding.top\n this.style.top = `${top}px`\n }\n if (right !== undefined) {\n right = absolutePosition ? right : window.innerWidth - (bounding.right - right)\n this.style.right = `${right}px`\n }\n if (bottom !== undefined) {\n bottom = absolutePosition ? bottom : window.innerHeight - (bounding.bottom - bottom)\n this.style.bottom = `${bottom}px`\n }\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 }\n\n if (l < 0) {\n this.style.left = `calc(${computedStyle.left} - ${l - 10}px)` // 현재의 left 값에 l를 차감한다. (왼쪽으로 이탈했기 때문에 오른쪽으로 가야 화면에 보임)\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 }\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/stories/ox-popup-list-sortable.stories.js CHANGED Viewed

@@ -14,8 +14,9 @@ export default {
 function popup(e) {
     const popupList = document.querySelector('#popup-list');
     popupList?.open({
-        top: e.pageY,
-        left: e.pageX
+        top: e.offsetY,
+        left: e.offsetX,
+        absolutePosition: false
     });
 }
 const columns = [
@@ -103,6 +104,8 @@ const Template = ({ preventCloseOnBlur }) => html `
       background: lightgreen;
       text-align: center;
       line-height: 100px;
+      padding: 20px;
+      margin: 20px;
       background-color: var(--md-sys-color-primary-container);
       color: var(--md-sys-color-on-primary-container);