New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@operato/popup

Package Overview
Dependencies
Maintainers
6
Versions
345
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@operato/popup - npm Package Compare versions

Comparing version 9.0.0-beta.6 to 9.0.0-beta.10

109

dist/src/ox-floating-overlay.js

@@ -34,33 +34,3 @@ import { __decorate } from "tslib";

let OxFloatingOverlay = class OxFloatingOverlay extends LitElement {
constructor() {
super(...arguments);
/**
* A boolean property that determines whether a backdrop should be displayed behind the overlay.
* Backdrop provides a semi-transparent background that covers the entire screen when the overlay is open.
*/
this.backdrop = false;
/**
* A string property that sets the title of the overlay.
* The title is typically displayed in the header of the overlay.
*/
this.title = '';
/**
* A boolean property that determines whether the overlay can be closed by the user.
* If set to true, a close button will be displayed in the header.
*/
this.closable = false;
/**
* A boolean property that determines whether the overlay is considered historical.
* Historical overlays may have specific behavior or interactions, such as navigating back in history.
*/
this.historical = false;
/**
* A boolean property that determines whether the overlay can be moved by dragging.
* If set to true, the overlay can be repositioned by dragging its header.
*/
this.movable = false;
this.dragEndHandler = this.onDragEnd.bind(this);
this.dragMoveHandler = this.onDragMove.bind(this);
}
static { this.styles = [
static styles = [
ScrollbarStyles,

@@ -313,3 +283,78 @@ css `

`
]; }
];
/**
* A boolean property that determines whether a backdrop should be displayed behind the overlay.
* Backdrop provides a semi-transparent background that covers the entire screen when the overlay is open.
*/
backdrop = false;
/**
* A string property that specifies the direction in which the overlay should appear.
* Possible values are: 'up', 'down', 'left', or 'right'.
*/
direction;
/**
* A string property that reflects the hovering state of the overlay.
* Possible values are: 'center', 'edge', or 'next'.
*/
hovering;
/**
* A string property that specifies the size of the overlay.
* Possible values are: 'small', 'medium', or 'large'.
*/
size;
/**
* A string property that represents the name of the overlay.
* This can be used for identification or other purposes.
*/
name;
/**
* A string property that sets the title of the overlay.
* The title is typically displayed in the header of the overlay.
*/
title = '';
/**
* A boolean property that determines whether the overlay can be closed by the user.
* If set to true, a close button will be displayed in the header.
*/
closable = false;
/**
* An object property that can hold custom properties for the template of the overlay.
* These properties can be used to customize the template's behavior.
*/
templateProperties;
/**
* An object property that can hold information related to help or assistance for the overlay.
* This information may be used to provide additional guidance to users.
*/
help;
/**
* A boolean property that determines whether the overlay is considered historical.
* Historical overlays may have specific behavior or interactions, such as navigating back in history.
*/
historical = false;
/**
* A boolean property that determines whether the overlay can be moved by dragging.
* If set to true, the overlay can be repositioned by dragging its header.
*/
movable = false;
/**
* An object property that can hold information related to a search feature within the overlay.
* It can include properties like 'value', 'handler', and 'placeholder'.
*/
search;
/**
* An object property that can hold information related to a filter feature within the overlay.
* It can include a 'handler' function for filtering content.
*/
filter;
/**
* A numeric property that specifies the z-index of the overlay.
* The z-index determines the stacking order of the overlay in relation to other elements on the page.
*/
zIndex;
dragStart;
dragEndHandler = this.onDragEnd.bind(this);
dragMoveHandler = this.onDragMove.bind(this);
overlayed;
content;
render() {

@@ -316,0 +361,0 @@ const direction = this.hovering == 'center' ? undefined : this.direction;

149

dist/src/ox-popup-list.js

@@ -25,66 +25,3 @@ import { __decorate } from "tslib";

let OxPopupList = class OxPopupList extends OxPopup {
constructor() {
super(...arguments);
/**
* A boolean property that, when set to true, allows multiple options to be selected in the popup list.
* @type {boolean}
*/
this.multiple = false;
/**
* A boolean property that, when set to true, enables the drag-and-drop sorting functionality within the popup list.
* This allows users to reorder the options in the list by dragging them into new positions.
* @type {boolean|undefined}
*/
this.sortable = false;
this.nothingToSelect = false;
this.locked = false;
this._onkeydown = function (e) {
e.stopPropagation();
switch (e.key) {
case 'Esc': // for IE/Edge
case 'Escape':
this.close();
break;
case 'Left': // for IE/Edge
case 'ArrowLeft':
case 'Up': // for IE/Edge
case 'ArrowUp':
this.activeIndex--;
break;
case 'Right': // for IE/Edge
case 'ArrowRight':
case 'Down': // for IE/Edge
case 'ArrowDown':
this.activeIndex++;
break;
case 'Enter':
case ' ':
case 'Spacebar': // for old firefox
this.setActive(this.activeIndex, true);
this.select();
break;
}
}.bind(this);
this._onfocusout = function (e) {
const to = e.relatedTarget;
if (!this.contains(to)) {
/* If the focus has clearly moved to an element outside of my range, the ox-popup-list should be closed. */
// @ts-ignore for debug
!this.preventCloseOnBlur && !this.debug && !window.POPUP_DEBUG && this.close();
}
}.bind(this);
this._onclick = function (e) {
e.stopPropagation();
// Check if the click event target is a checkbox
if (e.target.closest('input[type="checkbox"]')) {
return; // Do not proceed if it's a checkbox click
}
const option = e.target?.closest('[option]');
if (option) {
this.setActive(option, true);
this.select();
}
}.bind(this);
}
static { this.styles = [
static styles = [
...OxPopup.styles,

@@ -201,3 +138,38 @@ css `

`
]; }
];
/**
* A boolean property that, when set to true, allows multiple options to be selected in the popup list.
* @type {boolean}
*/
multiple = false;
/**
* An optional attribute that specifies the name of the attribute used to mark selected options in the list.
* @type {string|undefined}
*/
attrSelected;
/**
* A boolean property that, when set to true, enables the search functionality in the popup list.
* Users can search/filter options by typing in a search bar.
* @type {boolean|undefined}
*/
withSearch;
/**
* A boolean property that, when set to true, enables the drag-and-drop sorting functionality within the popup list.
* This allows users to reorder the options in the list by dragging them into new positions.
* @type {boolean|undefined}
*/
sortable = false;
/**
* The value(s) of the selected option(s) in the popup list.
* This property can be a string or an array of strings, depending on whether multiple selections are allowed.
* @type {string|string[]|undefined}
*/
value;
activeIndex;
searchKeyword;
nothingToSelect = false;
searchInput;
body;
sortableObject;
locked = false;
render() {

@@ -257,2 +229,49 @@ return html `

}
_onkeydown = function (e) {
e.stopPropagation();
switch (e.key) {
case 'Esc': // for IE/Edge
case 'Escape':
this.close();
break;
case 'Left': // for IE/Edge
case 'ArrowLeft':
case 'Up': // for IE/Edge
case 'ArrowUp':
this.activeIndex--;
break;
case 'Right': // for IE/Edge
case 'ArrowRight':
case 'Down': // for IE/Edge
case 'ArrowDown':
this.activeIndex++;
break;
case 'Enter':
case ' ':
case 'Spacebar': // for old firefox
this.setActive(this.activeIndex, true);
this.select();
break;
}
}.bind(this);
_onfocusout = function (e) {
const to = e.relatedTarget;
if (!this.contains(to)) {
/* If the focus has clearly moved to an element outside of my range, the ox-popup-list should be closed. */
// @ts-ignore for debug
!this.preventCloseOnBlur && !this.debug && !window.POPUP_DEBUG && this.close();
}
}.bind(this);
_onclick = function (e) {
e.stopPropagation();
// Check if the click event target is a checkbox
if (e.target.closest('input[type="checkbox"]')) {
return; // Do not proceed if it's a checkbox click
}
const option = e.target?.closest('[option]');
if (option) {
this.setActive(option, true);
this.select();
}
}.bind(this);
updated(changes) {

@@ -259,0 +278,0 @@ if (changes.has('activeIndex')) {

121

dist/src/ox-popup-menu.js

@@ -17,63 +17,3 @@ import { __decorate } from "tslib";

let OxPopupMenu = class OxPopupMenu extends OxPopup {
constructor() {
super(...arguments);
/**
* Property to track the index of the active menu item.
*/
this.activeIndex = 0;
this._onkeydown = function (e) {
e.stopPropagation();
switch (e.key) {
case 'Esc': // for IE/Edge
case 'Escape':
case 'Left': // for IE/Edge
case 'ArrowLeft':
this.close();
break;
case 'Up': // for IE/Edge
case 'ArrowUp':
this.activeIndex--;
break;
case 'Right': // for IE/Edge
case 'ArrowRight':
case 'Down': // for IE/Edge
case 'ArrowDown':
this.activeIndex++;
break;
case 'Enter':
e.stopPropagation();
var menu = e.target?.closest('[menu], ox-popup-menuitem');
if (menu) {
this.select(menu);
}
break;
}
}.bind(this);
this._onfocusout = function (e) {
const target = e.target;
const to = e.relatedTarget;
const from = target.closest('ox-popup-menu');
if (!to && from !== this) {
e.stopPropagation();
/* "하위의 POPUP-MENU 엘리먼트가 포커스를 잃었지만, 그 포커스를 받은 엘리먼트가 없다."는 의미는 그 서브메뉴가 클로즈된 것을 의미한다. */
this.setActive(this.activeIndex);
}
else {
if (!this.contains(to)) {
/* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, popup-menu는 닫혀야 한다. */
// @ts-ignore for debug
!window.POPUP_DEBUG && this.close();
}
}
}.bind(this);
this._onclick = function (e) {
e.stopPropagation();
const menu = e.target?.closest('[menu], ox-popup-menuitem');
if (menu) {
this.setActive(menu);
this.select(menu);
}
}.bind(this);
}
static { this.styles = [
static styles = [
...OxPopup.styles,

@@ -142,6 +82,63 @@ css `

`
]; }
];
/**
* Property to track the index of the active menu item.
*/
activeIndex = 0;
render() {
return html ` <slot> </slot> `;
}
_onkeydown = function (e) {
e.stopPropagation();
switch (e.key) {
case 'Esc': // for IE/Edge
case 'Escape':
case 'Left': // for IE/Edge
case 'ArrowLeft':
this.close();
break;
case 'Up': // for IE/Edge
case 'ArrowUp':
this.activeIndex--;
break;
case 'Right': // for IE/Edge
case 'ArrowRight':
case 'Down': // for IE/Edge
case 'ArrowDown':
this.activeIndex++;
break;
case 'Enter':
e.stopPropagation();
var menu = e.target?.closest('[menu], ox-popup-menuitem');
if (menu) {
this.select(menu);
}
break;
}
}.bind(this);
_onfocusout = function (e) {
const target = e.target;
const to = e.relatedTarget;
const from = target.closest('ox-popup-menu');
if (!to && from !== this) {
e.stopPropagation();
/* "하위의 POPUP-MENU 엘리먼트가 포커스를 잃었지만, 그 포커스를 받은 엘리먼트가 없다."는 의미는 그 서브메뉴가 클로즈된 것을 의미한다. */
this.setActive(this.activeIndex);
}
else {
if (!this.contains(to)) {
/* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, popup-menu는 닫혀야 한다. */
// @ts-ignore for debug
!window.POPUP_DEBUG && this.close();
}
}
}.bind(this);
_onclick = function (e) {
e.stopPropagation();
const menu = e.target?.closest('[menu], ox-popup-menuitem');
if (menu) {
this.setActive(menu);
this.select(menu);
}
}.bind(this);
updated(changes) {

@@ -148,0 +145,0 @@ if (changes.has('activeIndex')) {

96

dist/src/ox-popup-menuitem.js

@@ -9,48 +9,3 @@ import { __decorate } from "tslib";

let OxPopupMenuItem = class OxPopupMenuItem extends LitElement {
constructor() {
super(...arguments);
/**
* Property indicating whether the menu item is active or not.
* When active, it may show a submenu.
*/
this.active = false;
this._onclick = function (e) {
if (!this._submenu) {
return;
}
e.stopPropagation();
const parent = this.closest('ox-popup-menu');
if (parent) {
parent.setActive(this);
}
this.dispatchEvent(new CustomEvent('select'));
requestAnimationFrame(() => {
this.expand(false);
});
}.bind(this);
this._onkeydown = function (e) {
switch (e.key) {
case 'Right':
case 'ArrowRight':
e.stopPropagation();
this.expand(false);
break;
case 'Left':
case 'ArrowLeft':
e.stopPropagation();
this.collapseSelf();
break;
case 'Enter':
if (this._submenu) {
e.stopPropagation();
this.expand(false);
}
break;
}
}.bind(this);
this._onslotchange = function (e) {
this._submenu = this.querySelector('ox-popup-menu');
}.bind(this);
}
static { this.styles = [
static styles = [
css `

@@ -97,3 +52,13 @@ :host {

`
]; }
];
/**
* Property indicating whether the menu item is active or not.
* When active, it may show a submenu.
*/
active = false;
/**
* The label to display for the menu item.
*/
label;
_submenu;
render() {

@@ -116,2 +81,39 @@ return html `

}
_onclick = function (e) {
if (!this._submenu) {
return;
}
e.stopPropagation();
const parent = this.closest('ox-popup-menu');
if (parent) {
parent.setActive(this);
}
this.dispatchEvent(new CustomEvent('select'));
requestAnimationFrame(() => {
this.expand(false);
});
}.bind(this);
_onkeydown = function (e) {
switch (e.key) {
case 'Right':
case 'ArrowRight':
e.stopPropagation();
this.expand(false);
break;
case 'Left':
case 'ArrowLeft':
e.stopPropagation();
this.collapseSelf();
break;
case 'Enter':
if (this._submenu) {
e.stopPropagation();
this.expand(false);
}
break;
}
}.bind(this);
_onslotchange = function (e) {
this._submenu = this.querySelector('ox-popup-menu');
}.bind(this);
updated(changes) {

@@ -118,0 +120,0 @@ if (changes.has('active')) {

97

dist/src/ox-popup.js

@@ -17,51 +17,3 @@ import { __decorate } from "tslib";

let OxPopup = class OxPopup extends LitElement {
constructor() {
super(...arguments);
this.preventCloseOnBlur = false;
this.backdrop = false;
this.lastActive = document.activeElement;
this.removeAfterUse = false;
this._onfocusout = function (e) {
const to = e.relatedTarget;
if (!this.contains(to)) {
!this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close();
}
}.bind(this);
this._onkeydown = function (e) {
e.stopPropagation();
switch (e.key) {
case 'Esc': // for IE/Edge
case 'Escape':
this.close();
break;
}
}.bind(this);
this._onkeyup = function (e) {
e.stopPropagation();
}.bind(this);
this._onmouseup = function (e) {
e.stopPropagation();
}.bind(this);
this._onmousedown = function (e) {
e.stopPropagation();
}.bind(this);
this._oncontextmenu = function (e) {
e.stopPropagation();
// this.close()
}.bind(this);
this._onclick = function (e) {
e.stopPropagation();
}.bind(this);
this._onclose = function (e) {
this.close();
}.bind(this);
this._oncollapse = function (e) {
e.stopPropagation();
this.close();
}.bind(this);
this._onwindowblur = function (e) {
!this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close();
}.bind(this);
}
static { this.styles = [
static styles = [
ScrollbarStyles,

@@ -103,3 +55,7 @@ css `

`
]; }
];
preventCloseOnBlur = false;
backdrop = false;
lastActive = document.activeElement;
removeAfterUse = false;
render() {

@@ -111,2 +67,43 @@ return html `

}
_onfocusout = function (e) {
const to = e.relatedTarget;
if (!this.contains(to)) {
!this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close();
}
}.bind(this);
_onkeydown = function (e) {
e.stopPropagation();
switch (e.key) {
case 'Esc': // for IE/Edge
case 'Escape':
this.close();
break;
}
}.bind(this);
_onkeyup = function (e) {
e.stopPropagation();
}.bind(this);
_onmouseup = function (e) {
e.stopPropagation();
}.bind(this);
_onmousedown = function (e) {
e.stopPropagation();
}.bind(this);
_oncontextmenu = function (e) {
e.stopPropagation();
// this.close()
}.bind(this);
_onclick = function (e) {
e.stopPropagation();
}.bind(this);
_onclose = function (e) {
this.close();
}.bind(this);
_oncollapse = function (e) {
e.stopPropagation();
this.close();
}.bind(this);
_onwindowblur = function (e) {
!this.preventCloseOnBlur && !window.POPUP_DEBUG && this.close();
}.bind(this);
connectedCallback() {

@@ -113,0 +110,0 @@ super.connectedCallback();

166

dist/src/ox-prompt.js

@@ -21,69 +21,3 @@ import { __decorate } from "tslib";

let OxPrompt = class OxPrompt extends LitElement {
constructor() {
super(...arguments);
/**
* Specifies the title of the popup.
*/
this.titler = '';
/**
* Prevents the popup from closing when it loses focus (blur event).
*/
this.preventCloseOnBlur = false;
this.resolveFn = null;
this._onfocusout = function (e) {
const to = e.relatedTarget;
if (!this.contains(to)) {
/* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-prompt은 닫혀야 한다. */
// @ts-ignore for debug
if (this.preventCloseOnBlur || window.POPUP_DEBUG) {
return;
}
this.resolve(false);
this.close();
}
}.bind(this);
this._onkeydown = function (e) {
e.stopPropagation();
switch (e.key) {
case 'Esc': // for IE/Edge
case 'Escape':
this.resolve(false);
this.close();
break;
}
}.bind(this);
this._onkeyup = function (e) {
e.stopPropagation();
}.bind(this);
this._onmouseup = function (e) {
e.stopPropagation();
}.bind(this);
this._onmousedown = function (e) {
e.stopPropagation();
}.bind(this);
this._oncontextmenu = function (e) {
e.stopPropagation();
}.bind(this);
this._onclick = function (e) {
e.stopPropagation();
}.bind(this);
this._onclose = function (e) {
this.resolve(false);
this.close();
}.bind(this);
this._oncollapse = function (e) {
e.stopPropagation();
this.resolve(false);
this.close();
}.bind(this);
this._onwindowblur = function (e) {
// @ts-ignore for debug
if (this.preventCloseOnBlur || window.POPUP_DEBUG) {
return;
}
this.resolve(false);
this.close();
}.bind(this);
}
static { this.styles = [
static styles = [
MDTypeScaleStyles,

@@ -187,3 +121,45 @@ ScrollbarStyles,

`
]; }
];
/**
* Specifies the type of the popup. Possible values are 'success', 'error', 'warning', 'info', 'question'.
*/
type;
/**
* Specifies the icon of the popup.
*/
icon;
/**
* Specifies the title of the popup.
*/
titler = '';
/**
* Specifies the text content of the popup.
*/
text;
/**
* Specifies the footer (additional information at the bottom) of the popup.
*/
footer;
/**
* Determines whether the popup is displayed as a toast.
*/
toast;
/**
* Specifies settings for the confirmation button.
*/
confirmButton;
/**
* Specifies settings for the cancel button.
*/
cancelButton;
/**
* Prevents the popup from closing when it loses focus (blur event).
*/
preventCloseOnBlur = false;
/**
* A callback function called when the popup is closed, providing the result of the user's interaction.
*/
callback;
_parent;
resolveFn = null;
render() {

@@ -238,2 +214,56 @@ return html `

}
_onfocusout = function (e) {
const to = e.relatedTarget;
if (!this.contains(to)) {
/* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-prompt은 닫혀야 한다. */
// @ts-ignore for debug
if (this.preventCloseOnBlur || window.POPUP_DEBUG) {
return;
}
this.resolve(false);
this.close();
}
}.bind(this);
_onkeydown = function (e) {
e.stopPropagation();
switch (e.key) {
case 'Esc': // for IE/Edge
case 'Escape':
this.resolve(false);
this.close();
break;
}
}.bind(this);
_onkeyup = function (e) {
e.stopPropagation();
}.bind(this);
_onmouseup = function (e) {
e.stopPropagation();
}.bind(this);
_onmousedown = function (e) {
e.stopPropagation();
}.bind(this);
_oncontextmenu = function (e) {
e.stopPropagation();
}.bind(this);
_onclick = function (e) {
e.stopPropagation();
}.bind(this);
_onclose = function (e) {
this.resolve(false);
this.close();
}.bind(this);
_oncollapse = function (e) {
e.stopPropagation();
this.resolve(false);
this.close();
}.bind(this);
_onwindowblur = function (e) {
// @ts-ignore for debug
if (this.preventCloseOnBlur || window.POPUP_DEBUG) {
return;
}
this.resolve(false);
this.close();
}.bind(this);
connectedCallback() {

@@ -240,0 +270,0 @@ super.connectedCallback();

10

package.json

@@ -5,3 +5,3 @@ {

"author": "heartyoh",
"version": "9.0.0-beta.6",
"version": "9.0.0-beta.10",
"type": "module",

@@ -67,4 +67,4 @@ "main": "dist/src/index.js",

"@material/web": "^2.0.0",
"@operato/styles": "^9.0.0-beta.6",
"@operato/utils": "^9.0.0-beta.6",
"@operato/styles": "^9.0.0-beta.10",
"@operato/utils": "^9.0.0-beta.10",
"lit": "^3.1.2"

@@ -86,3 +86,3 @@ },

"husky": "^9.0.11",
"i18next": "^23.11.5",
"i18next": "^24.2.1",
"lint-staged": "^15.2.2",

@@ -107,3 +107,3 @@ "prettier": "^3.2.5",

},
"gitHead": "7e4dd57049f0a3dd0cbd194f7998e81f3b2c7559"
"gitHead": "5f56d67c7097c8362e658c78262e6bbec66029cf"
}
CHANGELOG.md

Sorry, the diff of this file is too big to display

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

dist/src/ox-popup.js.map

Sorry, the diff of this file is not supported yet

dist/src/ox-prompt.js.map

Sorry, the diff of this file is not supported yet

dist/tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc