Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@operato/popup

Package Overview
Dependencies
Maintainers
0
Versions
325
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 7.0.0-rc.11 to 7.0.0-rc.13

.storybook/preview.js
themes/app-theme.css
themes/calendar-theme.css
themes/layout-theme.css
themes/material-theme.css
themes/oops-theme.css
themes/report-theme.css
themes/tooltip-theme.css

2

dist/src/open-popup.js

@@ -48,3 +48,3 @@ import './ox-floating-overlay.js';

const popup = document.body.querySelector(`#${name}`);
popup === null || popup === void 0 ? void 0 : popup.close();
popup?.close();
popupHandle.onclosed && popupHandle.onclosed();

@@ -51,0 +51,0 @@ },

423

dist/src/ox-floating-overlay.js

@@ -10,3 +10,2 @@ import { __decorate } from "tslib";

function getPoint(e) {
var _a;
if (e.button == 0) {

@@ -18,3 +17,3 @@ return {

}
else if (((_a = e.touches) === null || _a === void 0 ? void 0 : _a.length) == 1) {
else if (e.touches?.length == 1) {
const touch = e.touches[0];

@@ -66,211 +65,5 @@ return {

}
render() {
const direction = this.hovering == 'center' ? undefined : this.direction;
const { value = '', handler: searchHandler, placeholder = '', autofocus = true } = this.search || {};
const { handler: filterHandler } = this.filter || {};
const searchable = typeof searchHandler == 'function';
const filterable = typeof filterHandler == 'function';
return html `
${Boolean(this.backdrop)
? html `
<div
id="backdrop"
?hidden=${!this.backdrop}
@click=${(e) => this.onClose(e, true /* escape */)}
></div>
`
: html ``}
<div
overlayed
hovering=${this.hovering || 'center'}
direction=${ifDefined(direction)}
size=${this.size || 'medium'}
@close-overlay=${(e) => {
e.stopPropagation();
this.onClose(e);
}}
@transitionstart=${(e) => {
/* to hide scrollbar during transition */
;
e.target.removeAttribute('settled');
}}
@transitionend=${(e) => {
;
e.target.setAttribute('settled', '');
}}
@click=${(e) => {
if (this.backdrop && e.target === this.content) {
this.onClose(e, true /* escape */);
}
}}
>
<div
header
@mousedown=${this.onDragStart.bind(this)}
@touchstart=${this.onDragStart.bind(this)}
draggable="false"
>
<md-icon @click=${(e) => this.onClose(e)} ?closable=${this.closable} historyback>arrow_back</md-icon>
${this.movable ? html `<md-icon>drag_indicator</md-icon>` : html ``}
<slot name="header">
${this.title || this.closable
? html `
<h1>
${this.title || ''}&nbsp;${this.help
? html `<ox-help-icon .topic=${this.help}></ox-help-icon>`
: html ``}
</h1>
`
: html ``}
${searchable || filterable
? html `
<div search>
${searchable
? html ` <ox-input-search
.placeholder=${placeholder}
.value=${value || ''}
?autofocus=${autofocus}
@change=${(e) => {
searchHandler(this.firstElementChild, e.target.value);
}}
></ox-input-search>`
: html ``}
${this.help && searchable ? html `<ox-help-icon .topic=${this.help}></ox-help-icon>` : html ``}
${filterable
? html `<md-icon @click=${(e) => filterHandler(this.firstElementChild)}>tune</md-icon>`
: html ``}
</div>
`
: html ``}
${this.help && !searchable && !this.title /* help only */
? html `<ox-help-icon .topic=${this.help}></ox-help-icon>`
: html ``}
</slot>
<md-icon @click=${(e) => this.onClose(e)} ?closable=${this.closable} close>close</md-icon>
</div>
<div content>
<slot> </slot>
</div>
</div>
`;
}
updated(changes) {
if (changes.has('templateProperties') && this.templateProperties) {
var template = this.firstElementChild;
if (template) {
for (let prop in this.templateProperties) {
//@ts-ignore
template[prop] = this.templateProperties[prop];
}
}
}
}
firstUpdated() {
if (this.zIndex) {
this.style.setProperty('--z-index', String(this.zIndex));
}
requestAnimationFrame(() => {
var _a;
/* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */
(_a = this.overlayed) === null || _a === void 0 ? void 0 : _a.setAttribute('opened', 'true');
});
}
connectedCallback() {
super.connectedCallback();
this.movable = this.movable && !isHandheldDevice();
if (this.movable) {
document.addEventListener('mouseup', this.dragEndHandler);
document.addEventListener('touchend', this.dragEndHandler);
document.addEventListener('touchcancel', this.dragEndHandler);
document.addEventListener('mousemove', this.dragMoveHandler);
document.addEventListener('touchmove', this.dragMoveHandler);
}
}
disconnectedCallback() {
document.dispatchEvent(new CustomEvent('overlay-closed', {
detail: this.name
}));
if (this.movable) {
document.removeEventListener('mouseup', this.dragEndHandler);
document.removeEventListener('touchend', this.dragEndHandler);
document.removeEventListener('touchcancel', this.dragEndHandler);
document.removeEventListener('mousemove', this.dragMoveHandler);
document.removeEventListener('touchmove', this.dragMoveHandler);
}
super.disconnectedCallback();
}
onDragStart(e) {
if (!this.movable) {
return;
}
const point = getPoint(e);
if (point) {
this.dragStart = point;
e.stopPropagation();
return false;
}
}
onDragMove(e) {
if (!this.movable || !this.dragStart) {
return false;
}
const point = getPoint(e);
if (!point) {
return false;
}
e.stopPropagation();
e.preventDefault();
const dragStart = point;
var { x, y } = point;
x -= this.dragStart.x;
y -= this.dragStart.y;
this.dragStart = dragStart;
const overlayed = this.overlayed;
var boundingRect = overlayed.getBoundingClientRect();
overlayed.style.left =
Math.min(document.body.offsetWidth - 40, Math.max(40 - overlayed.offsetWidth, boundingRect.left + x)) + 'px';
overlayed.style.top = Math.min(document.body.offsetHeight - 40, Math.max(0, boundingRect.top + y)) + 'px';
overlayed.style.transform = 'initial';
return false;
}
onDragEnd(e) {
if (this.movable && this.dragStart) {
e.stopPropagation();
e.preventDefault();
delete this.dragStart;
}
}
/**
* A method that closes the overlay by removing it from its parent node in the DOM.
* When called, this method removes the overlay element, effectively hiding it from the user interface.
*/
close() {
var _a;
(_a = this.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this);
}
onClose(e, escape) {
e.stopPropagation();
/* 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. */
if (this.historical) {
var state = history.state;
var overlay = (state || {}).overlay;
if (!overlay || overlay.name !== this.name) {
return;
}
/* Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */
if (escape && !overlay.escapable) {
return true;
}
history.back();
}
else {
this.close();
}
}
};
OxFloatingOverlay.styles = [
ScrollbarStyles,
css `
static { this.styles = [
ScrollbarStyles,
css `
/* for layout style */

@@ -424,3 +217,3 @@ :host {

`,
css `
css `
/* for header style */

@@ -522,3 +315,207 @@ [header] {

`
];
]; }
render() {
const direction = this.hovering == 'center' ? undefined : this.direction;
const { value = '', handler: searchHandler, placeholder = '', autofocus = true } = this.search || {};
const { handler: filterHandler } = this.filter || {};
const searchable = typeof searchHandler == 'function';
const filterable = typeof filterHandler == 'function';
return html `
${Boolean(this.backdrop)
? html `
<div
id="backdrop"
?hidden=${!this.backdrop}
@click=${(e) => this.onClose(e, true /* escape */)}
></div>
`
: html ``}
<div
overlayed
hovering=${this.hovering || 'center'}
direction=${ifDefined(direction)}
size=${this.size || 'medium'}
@close-overlay=${(e) => {
e.stopPropagation();
this.onClose(e);
}}
@transitionstart=${(e) => {
/* to hide scrollbar during transition */
;
e.target.removeAttribute('settled');
}}
@transitionend=${(e) => {
;
e.target.setAttribute('settled', '');
}}
@click=${(e) => {
if (this.backdrop && e.target === this.content) {
this.onClose(e, true /* escape */);
}
}}
>
<div
header
@mousedown=${this.onDragStart.bind(this)}
@touchstart=${this.onDragStart.bind(this)}
draggable="false"
>
<md-icon @click=${(e) => this.onClose(e)} ?closable=${this.closable} historyback>arrow_back</md-icon>
${this.movable ? html `<md-icon>drag_indicator</md-icon>` : html ``}
<slot name="header">
${this.title || this.closable
? html `
<h1>
${this.title || ''}&nbsp;${this.help
? html `<ox-help-icon .topic=${this.help}></ox-help-icon>`
: html ``}
</h1>
`
: html ``}
${searchable || filterable
? html `
<div search>
${searchable
? html ` <ox-input-search
.placeholder=${placeholder}
.value=${value || ''}
?autofocus=${autofocus}
@change=${(e) => {
searchHandler(this.firstElementChild, e.target.value);
}}
></ox-input-search>`
: html ``}
${this.help && searchable ? html `<ox-help-icon .topic=${this.help}></ox-help-icon>` : html ``}
${filterable
? html `<md-icon @click=${(e) => filterHandler(this.firstElementChild)}>tune</md-icon>`
: html ``}
</div>
`
: html ``}
${this.help && !searchable && !this.title /* help only */
? html `<ox-help-icon .topic=${this.help}></ox-help-icon>`
: html ``}
</slot>
<md-icon @click=${(e) => this.onClose(e)} ?closable=${this.closable} close>close</md-icon>
</div>
<div content>
<slot> </slot>
</div>
</div>
`;
}
updated(changes) {
if (changes.has('templateProperties') && this.templateProperties) {
var template = this.firstElementChild;
if (template) {
for (let prop in this.templateProperties) {
//@ts-ignore
template[prop] = this.templateProperties[prop];
}
}
}
}
firstUpdated() {
if (this.zIndex) {
this.style.setProperty('--z-index', String(this.zIndex));
}
requestAnimationFrame(() => {
/* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */
this.overlayed?.setAttribute('opened', 'true');
});
}
connectedCallback() {
super.connectedCallback();
this.movable = this.movable && !isHandheldDevice();
if (this.movable) {
document.addEventListener('mouseup', this.dragEndHandler);
document.addEventListener('touchend', this.dragEndHandler);
document.addEventListener('touchcancel', this.dragEndHandler);
document.addEventListener('mousemove', this.dragMoveHandler);
document.addEventListener('touchmove', this.dragMoveHandler);
}
}
disconnectedCallback() {
document.dispatchEvent(new CustomEvent('overlay-closed', {
detail: this.name
}));
if (this.movable) {
document.removeEventListener('mouseup', this.dragEndHandler);
document.removeEventListener('touchend', this.dragEndHandler);
document.removeEventListener('touchcancel', this.dragEndHandler);
document.removeEventListener('mousemove', this.dragMoveHandler);
document.removeEventListener('touchmove', this.dragMoveHandler);
}
super.disconnectedCallback();
}
onDragStart(e) {
if (!this.movable) {
return;
}
const point = getPoint(e);
if (point) {
this.dragStart = point;
e.stopPropagation();
return false;
}
}
onDragMove(e) {
if (!this.movable || !this.dragStart) {
return false;
}
const point = getPoint(e);
if (!point) {
return false;
}
e.stopPropagation();
e.preventDefault();
const dragStart = point;
var { x, y } = point;
x -= this.dragStart.x;
y -= this.dragStart.y;
this.dragStart = dragStart;
const overlayed = this.overlayed;
var boundingRect = overlayed.getBoundingClientRect();
overlayed.style.left =
Math.min(document.body.offsetWidth - 40, Math.max(40 - overlayed.offsetWidth, boundingRect.left + x)) + 'px';
overlayed.style.top = Math.min(document.body.offsetHeight - 40, Math.max(0, boundingRect.top + y)) + 'px';
overlayed.style.transform = 'initial';
return false;
}
onDragEnd(e) {
if (this.movable && this.dragStart) {
e.stopPropagation();
e.preventDefault();
delete this.dragStart;
}
}
/**
* A method that closes the overlay by removing it from its parent node in the DOM.
* When called, this method removes the overlay element, effectively hiding it from the user interface.
*/
close() {
this.parentNode?.removeChild(this);
}
onClose(e, escape) {
e.stopPropagation();
/* 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. */
if (this.historical) {
var state = history.state;
var overlay = (state || {}).overlay;
if (!overlay || overlay.name !== this.name) {
return;
}
/* Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */
if (escape && !overlay.escapable) {
return true;
}
history.back();
}
else {
this.close();
}
}
};
__decorate([

@@ -525,0 +522,0 @@ property({ type: Boolean })

242

dist/src/ox-popup-list.js

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

const closest = element.closest('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
closest === null || closest === void 0 ? void 0 : closest.focus();
closest?.focus();
}

@@ -76,3 +76,2 @@ /**

this._onclick = function (e) {
var _a;
e.stopPropagation();

@@ -83,3 +82,3 @@ // Check if the click event target is a checkbox

}
const option = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest('[option]');
const option = e.target?.closest('[option]');
if (option) {

@@ -91,2 +90,118 @@ this.setActive(option, true);

}
static { this.styles = [
...OxPopup.styles,
css `
:host {
display: none;
align-items: stretch;
background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface-container-lowest));
z-index: 100;
box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
padding: var(--spacing-small) 0;
border-radius: var(--md-sys-shape-corner-small, 5px);
color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));
font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
font:
normal 14px 'Roboto',
sans-serif;
}
:host([active]) {
display: flex;
flex-direction: column;
}
:host(*:focus) {
outline: none;
}
:host([nowrap]) ::slotted([option]) {
white-space: nowrap;
}
::slotted([option]) {
border-left: 3px solid transparent;
}
::slotted(*) {
padding: var(--spacing-medium);
border-bottom: 1px solid var(--md-sys-color-surface-variant);
cursor: pointer;
outline: none;
color: var(--ox-popup-list-color, var(--md-sys-color-on-surface-variant));
}
::slotted(*:focus) {
outline: none;
}
::slotted([option][active]),
::slotted([option]:hover) {
background-color: var(--ox-popup-list-background-color-variant, var(--md-sys-color-primary-container));
color: var(--ox-popup-list-color-variant, var(--md-sys-color-primary));
}
::slotted([option][selected]) {
border-left: 3px solid var(--md-sys-color-primary);
font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
}
::slotted([separator]) {
height: 1px;
width: 100%;
padding: 0;
background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));
}
::slotted([hidden]) {
display: none;
}
[search] {
display: flex;
position: relative;
align-items: center;
padding: var(--spacing-small) var(--spacing-medium);
--md-icon-size: var(--icon-size-small);
}
[search] [type='text'] {
flex: 1;
background-color: transparent;
border: 0;
padding: 0 0 0 var(--spacing-huge);
outline: none;
width: 50px;
}
[search] md-icon {
color: var(--md-sys-color-secondary);
}
[search] md-icon[search-icon] {
position: absolute;
}
[search] md-icon[delete-icon] {
opacity: 0.5;
--md-icon-size: var(--icon-size-tiny);
}
[nothing] {
opacity: 0.5;
text-align: center;
}
div[body] {
flex: 1;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
overflow: auto;
}
`
]; }
render() {

@@ -178,4 +293,3 @@ return html `

this.querySelectorAll(`[option]`).forEach(item => {
var _a;
if (!this.searchKeyword || ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.match(new RegExp(this.searchKeyword, 'i')))) {
if (!this.searchKeyword || item.textContent?.match(new RegExp(this.searchKeyword, 'i'))) {
item.removeAttribute('hidden');

@@ -197,3 +311,3 @@ }

options.forEach(option => {
if (values === null || values === void 0 ? void 0 : values.includes(option.getAttribute('value') || '')) {
if (values?.includes(option.getAttribute('value') || '')) {
option.setAttribute(this.attrSelected || 'selected', '');

@@ -341,118 +455,2 @@ }

};
OxPopupList.styles = [
...OxPopup.styles,
css `
:host {
display: none;
align-items: stretch;
background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface-container-lowest));
z-index: 100;
box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
padding: var(--spacing-small) 0;
border-radius: var(--md-sys-shape-corner-small, 5px);
color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));
font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
font:
normal 14px 'Roboto',
sans-serif;
}
:host([active]) {
display: flex;
flex-direction: column;
}
:host(*:focus) {
outline: none;
}
:host([nowrap]) ::slotted([option]) {
white-space: nowrap;
}
::slotted([option]) {
border-left: 3px solid transparent;
}
::slotted(*) {
padding: var(--spacing-medium);
border-bottom: 1px solid var(--md-sys-color-surface-variant);
cursor: pointer;
outline: none;
color: var(--ox-popup-list-color, var(--md-sys-color-on-surface-variant));
}
::slotted(*:focus) {
outline: none;
}
::slotted([option][active]),
::slotted([option]:hover) {
background-color: var(--ox-popup-list-background-color-variant, var(--md-sys-color-primary-container));
color: var(--ox-popup-list-color-variant, var(--md-sys-color-primary));
}
::slotted([option][selected]) {
border-left: 3px solid var(--md-sys-color-primary);
font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
}
::slotted([separator]) {
height: 1px;
width: 100%;
padding: 0;
background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));
}
::slotted([hidden]) {
display: none;
}
[search] {
display: flex;
position: relative;
align-items: center;
padding: var(--spacing-small) var(--spacing-medium);
--md-icon-size: var(--icon-size-small);
}
[search] [type='text'] {
flex: 1;
background-color: transparent;
border: 0;
padding: 0 0 0 var(--spacing-huge);
outline: none;
width: 50px;
}
[search] md-icon {
color: var(--md-sys-color-secondary);
}
[search] md-icon[search-icon] {
position: absolute;
}
[search] md-icon[delete-icon] {
opacity: 0.5;
--md-icon-size: var(--icon-size-tiny);
}
[nothing] {
opacity: 0.5;
text-align: center;
}
div[body] {
flex: 1;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
overflow: auto;
}
`
];
__decorate([

@@ -459,0 +457,0 @@ property({ type: Boolean, attribute: true, reflect: true })

137

dist/src/ox-popup-menu.js

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

const closest = element.closest('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
closest === null || closest === void 0 ? void 0 : closest.focus();
closest?.focus();
return closest;

@@ -24,3 +24,2 @@ }

this._onkeydown = function (e) {
var _a;
e.stopPropagation();

@@ -46,3 +45,3 @@ switch (e.key) {

e.stopPropagation();
var menu = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest('[menu], ox-popup-menuitem');
var menu = e.target?.closest('[menu], ox-popup-menuitem');
if (menu) {

@@ -72,5 +71,4 @@ this.select(menu);

this._onclick = function (e) {
var _a;
e.stopPropagation();
const menu = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest('[menu], ox-popup-menuitem');
const menu = e.target?.closest('[menu], ox-popup-menuitem');
if (menu) {

@@ -82,2 +80,67 @@ this.setActive(menu);

}
static { this.styles = [
...OxPopup.styles,
css `
:host {
display: none;
flex-direction: column;
align-items: stretch;
background-color: var(--ox-popup-menu-background-color, var(--md-sys-color-surface));
z-index: 100;
box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
padding: var(--spacing-small) 0;
border-radius: var(--spacing-small);
color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));
font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
}
:host([active]) {
display: flex;
}
:host(*:focus) {
outline: none;
}
::slotted(*) {
padding: var(--spacing-medium);
border-bottom: 1px solid var(--md-sys-color-surface-variant);
cursor: pointer;
color: var(--ox-popup-list-color, var(--md-sys-color-outline-variant));
}
::slotted(*:focus) {
cursor: pointer;
outline: none;
}
::slotted([menu]),
::slotted(ox-popup-menuitem) {
border-left: 3px solid transparent;
background-color: var(--ox-popup-menu-background-color, var(--md-sys-color-surface));
color: var(--ox-popup-menu-color, var(--md-sys-color-on-surface));
}
::slotted([menu][active]),
::slotted([menu]:hover),
::slotted(ox-popup-menuitem[active]),
::slotted(ox-popup-menuitem:hover) {
background-color: var(--ox-popup-list-background-color-variant, var(--md-sys-color-primary-container));
color: var(--ox-popup-list-color-variant, var(--md-sys-color-primary));
}
::slotted(ox-popup-menuitem[active]) {
border-left: 3px solid var(--md-sys-color-primary);
font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
}
::slotted([separator]) {
height: 1px;
width: 100%;
padding: 0;
background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));
}
`
]; }
render() {

@@ -143,66 +206,2 @@ return html ` <slot> </slot> `;

};
OxPopupMenu.styles = [
...OxPopup.styles,
css `
:host {
display: none;
flex-direction: column;
align-items: stretch;
background-color: var(--ox-popup-menu-background-color, var(--md-sys-color-surface));
z-index: 100;
box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
padding: var(--spacing-small) 0;
color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));
font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
}
:host([active]) {
display: flex;
}
:host(*:focus) {
outline: none;
}
::slotted(*) {
padding: var(--spacing-medium);
border-bottom: 1px solid var(--md-sys-color-surface-variant);
cursor: pointer;
color: var(--ox-popup-list-color, var(--md-sys-color-outline-variant));
}
::slotted(*:focus) {
cursor: pointer;
outline: none;
}
::slotted([menu]),
::slotted(ox-popup-menuitem) {
border-left: 3px solid transparent;
background-color: var(--ox-popup-menu-background-color, var(--md-sys-color-surface));
color: var(--ox-popup-menu-color, var(--md-sys-color-on-surface));
}
::slotted([menu][active]),
::slotted([menu]:hover),
::slotted(ox-popup-menuitem[active]),
::slotted(ox-popup-menuitem:hover) {
background-color: var(--ox-popup-list-background-color-variant, var(--md-sys-color-primary-container));
color: var(--ox-popup-list-color-variant, var(--md-sys-color-primary));
}
::slotted(ox-popup-menuitem[active]) {
border-left: 3px solid var(--md-sys-color-primary);
font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
}
::slotted([separator]) {
height: 1px;
width: 100%;
padding: 0;
background-color: var(--ox-popup-menu-separator-color, var(--md-sys-color-surface-variant));
}
`
];
__decorate([

@@ -209,0 +208,0 @@ property({ type: Number })

89

dist/src/ox-popup-menuitem.js

@@ -54,2 +54,45 @@ import { __decorate } from "tslib";

}
static { this.styles = [
css `
:host {
display: flex;
flex-direction: row;
position: relative;
align-items: center;
}
[icon] {
width: 20px;
display: flex;
flex-direction: row;
padding: 0;
margin: 0 var(--spacing-small) 0 0;
align-items: center;
justify-content: center;
}
[icon] > * {
flex: 1;
}
[label] {
flex: 1;
text-transform: capitalize;
}
::slotted(*[slot='icon']) {
color: var(--ox-popup-menu-color-variant, var(--md-sys-color-on-surface-variant));
font-size: var(--icon-size-small);
}
md-icon {
display: block;
width: 24px;
text-align: right;
font-size: var(--icon-size-small);
color: var(--ox-popup-menu-color-variant, var(--md-sys-color-primary));
opacity: 0.7;
}
`
]; }
render() {

@@ -103,4 +146,3 @@ return html `

collapse() {
var _a;
(_a = this._submenu) === null || _a === void 0 ? void 0 : _a.close();
this._submenu?.close();
}

@@ -122,45 +164,2 @@ /**

};
OxPopupMenuItem.styles = [
css `
:host {
display: flex;
flex-direction: row;
position: relative;
align-items: center;
}
[icon] {
width: 20px;
display: flex;
flex-direction: row;
padding: 0;
margin: 0 var(--spacing-small) 0 0;
align-items: center;
justify-content: center;
}
[icon] > * {
flex: 1;
}
[label] {
flex: 1;
text-transform: capitalize;
}
::slotted(*[slot='icon']) {
color: var(--ox-popup-menu-color-variant, var(--md-sys-color-on-surface-variant));
font-size: var(--icon-size-small);
}
md-icon {
display: block;
width: 24px;
text-align: right;
font-size: var(--icon-size-small);
color: var(--ox-popup-menu-color-variant, var(--md-sys-color-primary));
opacity: 0.7;
}
`
];
__decorate([

@@ -167,0 +166,0 @@ property({ type: Boolean })

54

dist/src/ox-popup.js

@@ -66,2 +66,29 @@ import { __decorate } from "tslib";

}
static { this.styles = [
ScrollbarStyles,
css `
:host {
position: absolute;
display: none;
z-index: 100;
padding: 0;
box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
box-sizing: border-box;
min-width: fit-content;
line-height: initial;
text-align: initial;
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));
}
:host([active]) {
display: flex;
flex-direction: column;
}
:host(*:focus) {
outline: none;
}
`
]; }
render() {

@@ -229,29 +256,2 @@ return html `<slot />`;

};
OxPopup.styles = [
ScrollbarStyles,
css `
:host {
position: absolute;
display: none;
z-index: 100;
padding: 0;
box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
box-sizing: border-box;
min-width: fit-content;
line-height: initial;
text-align: initial;
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));
}
:host([active]) {
display: flex;
flex-direction: column;
}
:host(*:focus) {
outline: none;
}
`
];
__decorate([

@@ -258,0 +258,0 @@ property({ type: Boolean, attribute: 'prevent-close-on-blur' })

199

dist/src/ox-prompt.js

@@ -87,4 +87,100 @@ import { __decorate } from "tslib";

}
static { this.styles = [
MDTypeScaleStyles,
ScrollbarStyles,
css `
:host {
position: absolute;
display: flex;
flex-direction: column;
gap: var(--ox-prompt-gap, var(--spacing-medium));
background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));
z-index: 100;
padding: var(--ox-prompt-container-padding, var(--spacing-medium));
box-shadow: var(--ox-prompt-container-box-shadow, 2px 3px 10px 5px rgba(0, 0, 0, 0.15));
border-radius: var(--ox-prompt-container-border-radius, var(--md-sys-shape-corner-medium));
box-sizing: border-box;
min-width: 300;
line-height: initial;
text-align: initial;
}
:host([active]) {
display: block;
}
:host(*:focus) {
outline: none;
}
[titler] {
padding: var(--ox-prompt-title-padding, var(--spacing-medium));
padding-bottom: 0;
color: var(--ox-prompt-title-color, var(--md-sys-color-primary));
font-size: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
}
[content] {
display: flex;
flex-direction: column;
gap: var(--ox-prompt-content-gap, var(--spacing-medium));
padding: var(--ox-prompt-content-padding, var(--spacing-medium));
color: var(--ox-prompt-body-color, var(--md-sys-color-on-surface));
word-break: keep-all;
md-icon {
align-self: center;
--md-icon-size: var(--icon-size-huge);
color: var(--ox-prompt-body-color-variant, var(--md-sys-color-primary));
}
}
[content].warning md-icon {
color: var(--status-warning-color, #ee8d03);
}
[content].error md-icon {
color: var(--md-sys-color-error, var(--md-sys-color-error));
}
[content].info md-icon {
color: var(--status-info-color, #398ace);
}
[content].success md-icon {
color: var(--status-success-color, #35a24a);
}
[buttons] {
display: flex;
border-top: 1px solid var(--md-sys-color-surface-variant);
gap: var(--ox-prompt-buttons-spacing, var(--spacing-large));
padding: var(--ox-prompt-buttons-padding, var(--spacing-medium));
padding-top: var(--spacing-large);
justify-content: center;
}
#confirm {
--md-filled-button-container-color: var(--md-sys-color-primary);
--md-filled-button-label-text-color: var(--md-sys-color-on-primary);
--md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
--md-filled-button-container-height: var(--form-element-height-medium);
--md-filled-button-container-shape: var(--md-sys-shape-corner-small);
--md-filled-button-leading-space: var(--spacing-large);
--md-filled-button-trailing-space: var(--spacing-large);
}
#cancel {
--md-outlined-button-container-color: var(--md-sys-color-surface-variant);
--md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);
--md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
--md-outlined-button-container-height: var(--form-element-height-medium);
--md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
--md-outlined-button-leading-space: var(--spacing-large);
--md-outlined-button-trailing-space: var(--spacing-large);
}
`
]; }
render() {
var _a, _b;
return html `

@@ -104,3 +200,3 @@ ${this.titler ? html ` <div titler class="md-typescale-title-large">${this.titler}</div> ` : nothing}

<md-filled-button id="confirm" @click=${(e) => this.onConfirm()}
>${(_a = this.confirmButton) === null || _a === void 0 ? void 0 : _a.text}</md-filled-button
>${this.confirmButton?.text}</md-filled-button
>

@@ -112,3 +208,3 @@ `

<md-outlined-button id="cancel" @click=${(e) => this.onCancel()}
>${(_b = this.cancelButton) === null || _b === void 0 ? void 0 : _b.text}</md-outlined-button
>${this.cancelButton?.text}</md-outlined-button
>

@@ -310,99 +406,2 @@ `

};
OxPrompt.styles = [
MDTypeScaleStyles,
ScrollbarStyles,
css `
:host {
position: absolute;
display: flex;
flex-direction: column;
gap: var(--ox-prompt-gap, var(--spacing-medium));
background-color: var(--ox-popup-list-background-color, var(--md-sys-color-surface));
z-index: 100;
padding: var(--ox-prompt-container-padding, var(--spacing-medium));
box-shadow: var(--ox-prompt-container-box-shadow, 2px 3px 10px 5px rgba(0, 0, 0, 0.15));
border-radius: var(--ox-prompt-container-border-radius, var(--md-sys-shape-corner-medium));
box-sizing: border-box;
min-width: 300;
line-height: initial;
text-align: initial;
}
:host([active]) {
display: block;
}
:host(*:focus) {
outline: none;
}
[titler] {
padding: var(--ox-prompt-title-padding, var(--spacing-medium));
padding-bottom: 0;
color: var(--ox-prompt-title-color, var(--md-sys-color-primary));
font-size: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
}
[content] {
display: flex;
flex-direction: column;
gap: var(--ox-prompt-content-gap, var(--spacing-medium));
padding: var(--ox-prompt-content-padding, var(--spacing-medium));
color: var(--ox-prompt-body-color, var(--md-sys-color-on-surface));
word-break: keep-all;
md-icon {
align-self: center;
--md-icon-size: var(--icon-size-huge);
color: var(--ox-prompt-body-color-variant, var(--md-sys-color-primary));
}
}
[content].warning md-icon {
color: var(--status-warning-color, #ee8d03);
}
[content].error md-icon {
color: var(--md-sys-color-error, var(--md-sys-color-error));
}
[content].info md-icon {
color: var(--status-info-color, #398ace);
}
[content].success md-icon {
color: var(--status-success-color, #35a24a);
}
[buttons] {
display: flex;
border-top: 1px solid var(--md-sys-color-surface-variant);
gap: var(--ox-prompt-buttons-spacing, var(--spacing-large));
padding: var(--ox-prompt-buttons-padding, var(--spacing-medium));
padding-top: var(--spacing-large);
justify-content: center;
}
#confirm {
--md-filled-button-container-color: var(--md-sys-color-primary);
--md-filled-button-label-text-color: var(--md-sys-color-on-primary);
--md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
--md-filled-button-container-height: var(--form-element-height-medium);
--md-filled-button-container-shape: var(--md-sys-shape-corner-small);
--md-filled-button-leading-space: var(--spacing-large);
--md-filled-button-trailing-space: var(--spacing-large);
}
#cancel {
--md-outlined-button-container-color: var(--md-sys-color-surface-variant);
--md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);
--md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
--md-outlined-button-container-height: var(--form-element-height-medium);
--md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
--md-outlined-button-leading-space: var(--spacing-large);
--md-outlined-button-trailing-space: var(--spacing-large);
}
`
];
__decorate([

@@ -409,0 +408,0 @@ property({ type: String })

5

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

@@ -30,6 +30,2 @@ import '@material/web/all.js';

};
theme: {
control: string;
options: string[];
};
};

@@ -51,4 +47,3 @@ };

help: string;
theme?: 'light' | 'dark';
}
export declare const Regular: Story<ArgTypes>;

9

dist/stories/open-popup.stories.js

@@ -15,4 +15,3 @@ import '@material/web/all.js';

backdrop: { control: 'boolean' },
help: { constol: 'string' },
theme: { control: 'select', options: ['light', 'dark'] }
help: { constol: 'string' }
}

@@ -24,3 +23,3 @@ };

}
const Template = ({ title = '', size = 'medium', hovering = 'center', closable, escapable, backdrop, help, theme = 'light' }) => html `
const Template = ({ title = '', size = 'medium', hovering = 'center', closable, escapable, backdrop, help }) => html `
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

@@ -60,6 +59,2 @@

<script>
document.body.classList.add('${theme}')
</script>
<div

@@ -66,0 +61,0 @@ id="place"

5

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

@@ -13,6 +13,2 @@ import '@material/web/icon/icon.js';

};
theme: {
control: string;
options: string[];
};
};

@@ -28,4 +24,3 @@ };

preventCloseOnBlur: boolean;
theme?: 'light' | 'dark';
}
export declare const Regular: Story<ArgTypes>;

11

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

@@ -11,4 +11,3 @@ import '@material/web/icon/icon.js';

argTypes: {
preventCloseOnBlur: { control: 'boolean' },
theme: { control: 'select', options: ['light', 'dark'] }
preventCloseOnBlur: { control: 'boolean' }
}

@@ -18,3 +17,3 @@ };

const popupList = document.querySelector('#popup-list');
popupList === null || popupList === void 0 ? void 0 : popupList.open({
popupList?.open({
top: e.pageY,

@@ -78,3 +77,3 @@ left: e.pageX

];
const Template = ({ preventCloseOnBlur, theme }) => html `
const Template = ({ preventCloseOnBlur }) => html `
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

@@ -164,6 +163,2 @@

<script>
document.body.classList.add('${theme}')
</script>
<div id="place" @click=${(e) => popup(e)}>

@@ -170,0 +165,0 @@ Click this to popup list

5

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

@@ -9,5 +9,4 @@ import '@material/web/all.js';

argTypes: {
theme: {
preventCloseOnBlur: {
control: string;
options: string[];
};

@@ -23,4 +22,4 @@ };

interface ArgTypes {
theme?: 'light' | 'dark';
preventCloseOnBlur: boolean;
}
export declare const Regular: Story<ArgTypes>;

25

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

@@ -10,8 +10,8 @@ import '@material/web/all.js';

argTypes: {
theme: { control: 'select', options: ['light', 'dark'] }
preventCloseOnBlur: { control: 'boolean' }
}
};
function popup(e) {
function popup(e, preventCloseOnBlur) {
const popupList = document.querySelector('#popup-list');
popupList === null || popupList === void 0 ? void 0 : popupList.open({
popupList?.open({
top: e.pageY,

@@ -21,3 +21,3 @@ left: e.pageX

}
const Template = ({ theme = 'light' }) => html `
const Template = ({ preventCloseOnBlur }) => html `
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

@@ -57,10 +57,11 @@

<script>
document.body.classList.add('${theme}')
</script>
<div id="place" @click=${(e) => popup(e)} class="md-typescale-display-medium">
<div id="place" @click=${(e) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
Click this to popup list
</div>
<ox-popup-list id="popup-list" @select=${(e) => console.log('select', e.target)} multiple>
<ox-popup-list
id="popup-list"
@select=${(e) => console.log('select', e.target)}
multiple
?prevent-close-on-blur=${preventCloseOnBlur}
>
<div option>Plain Text</div>

@@ -84,3 +85,5 @@

export const Regular = Template.bind({});
Regular.args = {};
Regular.args = {
preventCloseOnBlur: true
};
//# sourceMappingURL=ox-popup-list.stories.js.map

8

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

@@ -9,8 +9,3 @@ import '@material/web/all.js';

component: string;
argTypes: {
theme: {
control: string;
options: string[];
};
};
argTypes: {};
};

@@ -24,4 +19,3 @@ export default _default;

interface ArgTypes {
theme?: 'light' | 'dark';
}
export declare const Regular: Story<ArgTypes>;

10

dist/stories/ox-popup-menu.stories.js

@@ -11,5 +11,3 @@ import '@material/web/all.js';

component: 'ox-popup-menu',
argTypes: {
theme: { control: 'select', options: ['light', 'dark'] }
}
argTypes: {}
};

@@ -118,3 +116,3 @@ function popup(e) {

}
const Template = ({ theme = 'light' }) => html `
const Template = ({}) => html `
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

@@ -154,6 +152,2 @@

<script>
document.body.classList.add('${theme}')
</script>
<div id="place" @click=${(e) => popup(e)} class="md-typescale-display-medium">

@@ -160,0 +154,0 @@ Click this to popup menu

8

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

@@ -6,8 +6,3 @@ import '@material/web/all.js';

component: string;
argTypes: {
theme: {
control: string;
options: string[];
};
};
argTypes: {};
};

@@ -21,4 +16,3 @@ export default _default;

interface ArgTypes {
theme?: 'light' | 'dark';
}
export declare const Regular: Story<ArgTypes>;

10

dist/stories/ox-popup.stories.js

@@ -8,5 +8,3 @@ import '@material/web/all.js';

component: 'ox-popup',
argTypes: {
theme: { control: 'select', options: ['light', 'dark'] }
}
argTypes: {}
};

@@ -22,3 +20,3 @@ function popup(e) {

}
const Template = ({ theme = 'light' }) => html `
const Template = ({}) => html `
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

@@ -58,6 +56,2 @@

<script>
document.body.classList.add('${theme}')
</script>
<div id="place" @click=${(e) => popup(e)} class="md-typescale-display-medium">

@@ -64,0 +58,0 @@ Click this to popup image

5

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

@@ -14,6 +14,2 @@ import '@material/web/all.js';

};
theme: {
control: string;
options: string[];
};
};

@@ -30,4 +26,3 @@ };

preventCloseOnBlur: boolean;
theme?: 'light' | 'dark';
}
export declare const Regular: Story<ArgTypes>;

20

dist/stories/ox-prompt-icon.stories.js

@@ -10,8 +10,6 @@ import '@material/web/all.js';

type: { control: 'select', options: ['success', 'error', 'warning', 'info', 'question'] },
preventCloseOnBlur: { control: 'boolean' },
theme: { control: 'select', options: ['light', 'dark'] }
preventCloseOnBlur: { control: 'boolean' }
}
};
function popup(e, type = 'warning', theme, preventCloseOnBlur) {
const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
function popup(e, type = 'warning', preventCloseOnBlur) {
OxPrompt.open({

@@ -21,3 +19,3 @@ title: 'Are you sure ?',

type,
icon: noImage,
icon: 'logout',
confirmButton: { text: 'Confirm' },

@@ -28,3 +26,3 @@ cancelButton: { text: 'Cancel' },

}
const Template = ({ type, preventCloseOnBlur, theme = 'light' }) => html `
const Template = ({ type, preventCloseOnBlur }) => html `
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

@@ -64,11 +62,3 @@

<script>
document.body.classList.add('${theme}')
</script>
<div
id="place"
@click=${(e) => popup(e, type, theme, preventCloseOnBlur)}
class="md-typescale-display-medium"
>
<div id="place" @click=${(e) => popup(e, type, preventCloseOnBlur)} class="md-typescale-display-medium">
Click this to prompt image

@@ -75,0 +65,0 @@ </div>

5

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

@@ -7,5 +7,4 @@ import '@material/web/all.js';

argTypes: {
theme: {
preventCloseOnBlur: {
control: string;
options: string[];
};

@@ -21,4 +20,4 @@ };

interface ArgTypes {
theme?: 'light' | 'dark';
preventCloseOnBlur: boolean;
}
export declare const Regular: Story<ArgTypes>;

19

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

@@ -9,6 +9,6 @@ import '@material/web/all.js';

argTypes: {
theme: { control: 'select', options: ['light', 'dark'] }
preventCloseOnBlur: { control: 'boolean' }
}
};
function popup(e) {
function popup(e, preventCloseOnBlur) {
const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;

@@ -19,6 +19,7 @@ OxPrompt.open({

confirmButton: { text: 'Confirm' },
cancelButton: { text: 'Cancel' }
cancelButton: { text: 'Cancel' },
preventCloseOnBlur
});
}
const Template = ({ theme = 'light' }) => html `
const Template = ({ preventCloseOnBlur }) => html `
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

@@ -58,7 +59,3 @@

<script>
document.body.classList.add('${theme}')
</script>
<div id="place" @click=${(e) => popup(e)} class="md-typescale-display-medium">
<div id="place" @click=${(e) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
Click this to prompt image

@@ -68,3 +65,5 @@ </div>

export const Regular = Template.bind({});
Regular.args = {};
Regular.args = {
preventCloseOnBlur: true
};
//# sourceMappingURL=ox-prompt-normal.stories.js.map

5

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

@@ -6,5 +6,4 @@ import { TemplateResult } from 'lit';

argTypes: {
theme: {
preventCloseOnBlur: {
control: string;
options: string[];
};

@@ -20,4 +19,4 @@ };

interface ArgTypes {
theme?: 'light' | 'dark';
preventCloseOnBlur: boolean;
}
export declare const Regular: Story<ArgTypes>;

15

dist/stories/ox-prompt.stories.js

@@ -8,6 +8,6 @@ import { html } from 'lit';

argTypes: {
theme: { control: 'select', options: ['light', 'dark'] }
preventCloseOnBlur: { control: 'boolean' }
}
};
async function popup(e) {
async function popup(e, preventCloseOnBlur) {
const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;

@@ -21,6 +21,7 @@ await OxPrompt.open({

confirmButton: { text: 'Confirm' },
cancelButton: { text: 'Cancel' }
cancelButton: { text: 'Cancel' },
preventCloseOnBlur
});
}
const Template = ({ theme = 'light' }) => html `
const Template = ({ preventCloseOnBlur }) => html `
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

@@ -60,7 +61,3 @@

<script>
document.body.classList.add('${theme}')
</script>
<div id="place" @click=${(e) => popup(e)} class="md-typescale-display-medium">
<div id="place" @click=${(e) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
Click this to prompt image

@@ -67,0 +64,0 @@ </div>

9

package.json

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

"author": "heartyoh",
"version": "7.0.0-rc.11",
"version": "7.0.0-rc.13",
"main": "dist/src/index.js",

@@ -66,4 +66,4 @@ "module": "dist/src/index.js",

"@material/web": "^1.5.0",
"@operato/styles": "^7.0.0-rc.10",
"@operato/utils": "^7.0.0-rc.8",
"@operato/styles": "^7.0.0-rc.13",
"@operato/utils": "^7.0.0-rc.13",
"lit": "^3.1.2"

@@ -85,2 +85,3 @@ },

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

@@ -105,3 +106,3 @@ "prettier": "^3.2.5",

},
"gitHead": "e3b4a7601a1a6b0ccd909fe1e85fa8e524f1c5a5"
"gitHead": "30bb1e680f2d6b042ec75c5a29266b24d3067da5"
}

1

src/ox-popup-menu.ts

@@ -34,2 +34,3 @@ import { css, html, PropertyValues } from 'lit'

padding: var(--spacing-small) 0;
border-radius: var(--spacing-small);

@@ -36,0 +37,0 @@ color: var(--ox-popup-list-color, var(--md-sys-color-primary-container));

11

stories/open-popup.stories.ts

@@ -17,4 +17,3 @@ import '@material/web/all.js'

backdrop: { control: 'boolean' },
help: { constol: 'string' },
theme: { control: 'select', options: ['light', 'dark'] }
help: { constol: 'string' }
}

@@ -37,3 +36,2 @@ }

help: string
theme?: 'light' | 'dark'
}

@@ -54,4 +52,3 @@

backdrop,
help,
theme = 'light'
help
}: ArgTypes) => html`

@@ -92,6 +89,2 @@ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

<script>
document.body.classList.add('${theme}')
</script>
<div

@@ -98,0 +91,0 @@ id="place"

10

stories/ox-popup-list-sortable.stories.ts

@@ -15,4 +15,3 @@ import '@material/web/icon/icon.js'

argTypes: {
preventCloseOnBlur: { control: 'boolean' },
theme: { control: 'select', options: ['light', 'dark'] }
preventCloseOnBlur: { control: 'boolean' }
}

@@ -29,3 +28,2 @@ }

preventCloseOnBlur: boolean
theme?: 'light' | 'dark'
}

@@ -96,3 +94,3 @@

const Template: Story<ArgTypes> = ({ preventCloseOnBlur, theme }: ArgTypes) => html`
const Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

@@ -182,6 +180,2 @@

<script>
document.body.classList.add('${theme}')
</script>
<div id="place" @click=${(e: MouseEvent) => popup(e)}>

@@ -188,0 +182,0 @@ Click this to popup list

25

stories/ox-popup-list.stories.ts

@@ -14,3 +14,3 @@ import '@material/web/all.js'

argTypes: {
theme: { control: 'select', options: ['light', 'dark'] }
preventCloseOnBlur: { control: 'boolean' }
}

@@ -26,6 +26,6 @@ }

interface ArgTypes {
theme?: 'light' | 'dark'
preventCloseOnBlur: boolean
}
function popup(e: MouseEvent) {
function popup(e: MouseEvent, preventCloseOnBlur: boolean) {
const popupList = document.querySelector('#popup-list') as OxPopupList

@@ -38,3 +38,3 @@ popupList?.open({

const Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`
const Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

@@ -74,10 +74,11 @@

<script>
document.body.classList.add('${theme}')
</script>
<div id="place" @click=${(e: MouseEvent) => popup(e)} class="md-typescale-display-medium">
<div id="place" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
Click this to popup list
</div>
<ox-popup-list id="popup-list" @select=${(e: Event) => console.log('select', e.target)} multiple>
<ox-popup-list
id="popup-list"
@select=${(e: Event) => console.log('select', e.target)}
multiple
?prevent-close-on-blur=${preventCloseOnBlur}
>
<div option>Plain Text</div>

@@ -102,2 +103,4 @@

export const Regular = Template.bind({})
Regular.args = {}
Regular.args = {
preventCloseOnBlur: true
}

14

stories/ox-popup-menu.stories.ts

@@ -14,5 +14,3 @@ import '@material/web/all.js'

component: 'ox-popup-menu',
argTypes: {
theme: { control: 'select', options: ['light', 'dark'] }
}
argTypes: {}
}

@@ -26,5 +24,3 @@

interface ArgTypes {
theme?: 'light' | 'dark'
}
interface ArgTypes {}

@@ -134,3 +130,3 @@ function popup(e: MouseEvent) {

const Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`
const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

@@ -170,6 +166,2 @@

<script>
document.body.classList.add('${theme}')
</script>
<div id="place" @click=${(e: MouseEvent) => popup(e)} class="md-typescale-display-medium">

@@ -176,0 +168,0 @@ Click this to popup menu

14

stories/ox-popup.stories.ts

@@ -10,5 +10,3 @@ import '@material/web/all.js'

component: 'ox-popup',
argTypes: {
theme: { control: 'select', options: ['light', 'dark'] }
}
argTypes: {}
}

@@ -22,5 +20,3 @@

interface ArgTypes {
theme?: 'light' | 'dark'
}
interface ArgTypes {}

@@ -38,3 +34,3 @@ function popup(e: MouseEvent) {

const Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`
const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

@@ -74,6 +70,2 @@

<script>
document.body.classList.add('${theme}')
</script>
<div id="place" @click=${(e: MouseEvent) => popup(e)} class="md-typescale-display-medium">

@@ -80,0 +72,0 @@ Click this to popup image

21

stories/ox-prompt-icon.stories.ts

@@ -12,4 +12,3 @@ import '@material/web/all.js'

type: { control: 'select', options: ['success', 'error', 'warning', 'info', 'question'] },
preventCloseOnBlur: { control: 'boolean' },
theme: { control: 'select', options: ['light', 'dark'] }
preventCloseOnBlur: { control: 'boolean' }
}

@@ -27,3 +26,2 @@ }

preventCloseOnBlur: boolean
theme?: 'light' | 'dark'
}

@@ -34,7 +32,4 @@

type: 'success' | 'error' | 'warning' | 'info' | 'question' = 'warning',
theme: 'light' | 'dark',
preventCloseOnBlur: boolean
) {
const noImage = new URL('/assets/images/no-image.png', import.meta.url).href
OxPrompt.open({

@@ -44,3 +39,3 @@ title: 'Are you sure ?',

type,
icon: noImage,
icon: 'logout',
confirmButton: { text: 'Confirm' },

@@ -52,3 +47,3 @@ cancelButton: { text: 'Cancel' },

const Template: Story<ArgTypes> = ({ type, preventCloseOnBlur, theme = 'light' }: ArgTypes) => html`
const Template: Story<ArgTypes> = ({ type, preventCloseOnBlur }: ArgTypes) => html`
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

@@ -88,11 +83,3 @@

<script>
document.body.classList.add('${theme}')
</script>
<div
id="place"
@click=${(e: MouseEvent) => popup(e, type, theme, preventCloseOnBlur)}
class="md-typescale-display-medium"
>
<div id="place" @click=${(e: MouseEvent) => popup(e, type, preventCloseOnBlur)} class="md-typescale-display-medium">
Click this to prompt image

@@ -99,0 +86,0 @@ </div>

21

stories/ox-prompt-normal.stories.ts

@@ -11,3 +11,3 @@ import '@material/web/all.js'

argTypes: {
theme: { control: 'select', options: ['light', 'dark'] }
preventCloseOnBlur: { control: 'boolean' }
}

@@ -23,6 +23,6 @@ }

interface ArgTypes {
theme?: 'light' | 'dark'
preventCloseOnBlur: boolean
}
function popup(e: MouseEvent) {
function popup(e: MouseEvent, preventCloseOnBlur: boolean) {
const noImage = new URL('/assets/images/no-image.png', import.meta.url).href

@@ -34,7 +34,8 @@

confirmButton: { text: 'Confirm' },
cancelButton: { text: 'Cancel' }
cancelButton: { text: 'Cancel' },
preventCloseOnBlur
})
}
const Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`
const Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

@@ -74,7 +75,3 @@

<script>
document.body.classList.add('${theme}')
</script>
<div id="place" @click=${(e: MouseEvent) => popup(e)} class="md-typescale-display-medium">
<div id="place" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
Click this to prompt image

@@ -85,2 +82,4 @@ </div>

export const Regular = Template.bind({})
Regular.args = {}
Regular.args = {
preventCloseOnBlur: true
}

18

stories/ox-prompt.stories.ts
import { html, TemplateResult } from 'lit'
import { OxPrompt } from '../src/ox-prompt'
import { ifDefined } from 'lit/directives/if-defined.js'
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'

@@ -11,3 +10,3 @@

argTypes: {
theme: { control: 'select', options: ['light', 'dark'] }
preventCloseOnBlur: { control: 'boolean' }
}

@@ -23,6 +22,6 @@ }

interface ArgTypes {
theme?: 'light' | 'dark'
preventCloseOnBlur: boolean
}
async function popup(e: MouseEvent) {
async function popup(e: MouseEvent, preventCloseOnBlur: boolean) {
const noImage = new URL('/assets/images/no-image.png', import.meta.url).href

@@ -37,7 +36,8 @@

confirmButton: { text: 'Confirm' },
cancelButton: { text: 'Cancel' }
cancelButton: { text: 'Cancel' },
preventCloseOnBlur
})
}
const Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`
const Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

@@ -77,7 +77,3 @@

<script>
document.body.classList.add('${theme}')
</script>
<div id="place" @click=${(e: MouseEvent) => popup(e)} class="md-typescale-display-medium">
<div id="place" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
Click this to prompt image

@@ -84,0 +80,0 @@ </div>

3

tsconfig.json
{
"compilerOptions": {
"target": "es2018",
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"noEmitOnError": true,

@@ -7,0 +8,0 @@ "lib": ["es2017", "dom"],

themes/dark-hc.css
themes/dark-mc.css
themes/light-hc.css
themes/light-mc.css
CHANGELOG.md

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

dist/src/open-popup.js.map

Sorry, the diff of this file is not supported yet

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/stories/open-popup.stories.js.map

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

dist/stories/ox-prompt.stories.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

themes/dark.css

Sorry, the diff of this file is not supported yet

themes/grist-theme.css

Sorry, the diff of this file is not supported yet

themes/light.css

Sorry, the diff of this file is not supported yet

themes/spacing.css

Sorry, the diff of this file is not supported yet

themes/state-color.css

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