@operato/popup 0.2.35 → 0.2.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +45 -0
- package/demo/index.html +2 -2
- package/demo/ox-popup-list.html +2 -2
- package/demo/ox-popup-menu.html +2 -2
- package/demo/ox-popup.html +2 -2
- package/dist/src/ox-popup-list.d.ts +21 -9
- package/dist/src/ox-popup-list.js +114 -61
- package/dist/src/ox-popup-list.js.map +1 -1
- package/dist/src/ox-popup-menu.d.ts +2 -2
- package/dist/src/ox-popup-menu.js +21 -17
- package/dist/src/ox-popup-menu.js.map +1 -1
- package/dist/src/ox-popup-menuitem.d.ts +3 -3
- package/dist/src/ox-popup-menuitem.js +11 -11
- package/dist/src/ox-popup-menuitem.js.map +1 -1
- package/dist/src/ox-popup.d.ts +9 -5
- package/dist/src/ox-popup.js +25 -17
- package/dist/src/ox-popup.js.map +1 -1
- package/dist/test/ox-popup-menu.test.js +2 -2
- package/dist/test/ox-popup-menu.test.js.map +1 -1
- package/dist/test/ox-popup.test.js +1 -1
- package/dist/test/ox-popup.test.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -2
- package/src/ox-popup-list.ts +127 -64
- package/src/ox-popup-menu.ts +21 -17
- package/src/ox-popup-menuitem.ts +11 -11
- package/src/ox-popup.ts +45 -25
- package/test/ox-popup-menu.test.ts +7 -8
- package/test/ox-popup.test.ts +6 -7
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { css, html } from 'lit';
|
|
3
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
-
import { Popup } from './ox-popup';
|
|
5
3
|
import { render } from 'lit-html';
|
|
4
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
5
|
+
import { OxPopup } from './ox-popup';
|
|
6
6
|
function focusClosest(element) {
|
|
7
7
|
/* Find the closest focusable element. */
|
|
8
8
|
const closest = element.closest('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
9
9
|
closest === null || closest === void 0 ? void 0 : closest.focus();
|
|
10
10
|
return closest;
|
|
11
11
|
}
|
|
12
|
-
let
|
|
12
|
+
let OxPopupMenu = class OxPopupMenu extends OxPopup {
|
|
13
13
|
constructor() {
|
|
14
14
|
super(...arguments);
|
|
15
15
|
this.activeIndex = 0;
|
|
@@ -78,7 +78,7 @@ let PopupMenu = class PopupMenu extends Popup {
|
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
select(menu) {
|
|
81
|
-
menu.dispatchEvent(new CustomEvent('
|
|
81
|
+
menu.dispatchEvent(new CustomEvent('select'));
|
|
82
82
|
if (!menu.hasAttribute('alive-on-select')) {
|
|
83
83
|
this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }));
|
|
84
84
|
}
|
|
@@ -121,8 +121,8 @@ let PopupMenu = class PopupMenu extends Popup {
|
|
|
121
121
|
owner.appendChild(target);
|
|
122
122
|
}
|
|
123
123
|
};
|
|
124
|
-
|
|
125
|
-
...
|
|
124
|
+
OxPopupMenu.styles = [
|
|
125
|
+
...OxPopup.styles,
|
|
126
126
|
css `
|
|
127
127
|
:host {
|
|
128
128
|
display: none;
|
|
@@ -131,7 +131,7 @@ PopupMenu.styles = [
|
|
|
131
131
|
background-color: var(--theme-white-color, #fff);
|
|
132
132
|
z-index: 100;
|
|
133
133
|
box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
|
|
134
|
-
padding:
|
|
134
|
+
padding: 4px 0;
|
|
135
135
|
|
|
136
136
|
color: var(--theme-primary-text-color, #3c3938);
|
|
137
137
|
font: normal 14px 'Roboto', sans-serif;
|
|
@@ -146,23 +146,27 @@ PopupMenu.styles = [
|
|
|
146
146
|
}
|
|
147
147
|
|
|
148
148
|
::slotted(*) {
|
|
149
|
-
|
|
150
|
-
|
|
149
|
+
padding: 5px 10px;
|
|
150
|
+
cursor: pointer;
|
|
151
151
|
}
|
|
152
152
|
|
|
153
153
|
::slotted(*:focus) {
|
|
154
154
|
outline: none;
|
|
155
155
|
}
|
|
156
156
|
|
|
157
|
+
::slotted([menu][active]),
|
|
158
|
+
::slotted([menu]:hover) {
|
|
159
|
+
background-color: #f6f6f6;
|
|
160
|
+
}
|
|
161
|
+
|
|
157
162
|
::slotted([menu]),
|
|
158
163
|
::slotted(ox-popup-menuitem) {
|
|
159
|
-
border-
|
|
164
|
+
border-left: 3px solid transparent;
|
|
160
165
|
}
|
|
161
166
|
|
|
162
|
-
::slotted([menu][active]),
|
|
163
167
|
::slotted(ox-popup-menuitem[active]) {
|
|
164
|
-
|
|
165
|
-
|
|
168
|
+
border-left: 3px solid var(--primary-color, #38a25b);
|
|
169
|
+
font-weight: bold;
|
|
166
170
|
}
|
|
167
171
|
|
|
168
172
|
::slotted([separator]) {
|
|
@@ -178,9 +182,9 @@ PopupMenu.styles = [
|
|
|
178
182
|
];
|
|
179
183
|
__decorate([
|
|
180
184
|
property({ type: Number })
|
|
181
|
-
],
|
|
182
|
-
|
|
185
|
+
], OxPopupMenu.prototype, "activeIndex", void 0);
|
|
186
|
+
OxPopupMenu = __decorate([
|
|
183
187
|
customElement('ox-popup-menu')
|
|
184
|
-
],
|
|
185
|
-
export {
|
|
188
|
+
], OxPopupMenu);
|
|
189
|
+
export { OxPopupMenu };
|
|
186
190
|
//# sourceMappingURL=ox-popup-menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-popup-menu.js","sourceRoot":"","sources":["../../src/ox-popup-menu.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
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@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(--theme-white-color, #fff);\n z-index: 100;\n box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);\n padding: 4px 0;\n\n color: var(--theme-primary-text-color, #3c3938);\n font: normal 14px 'Roboto', sans-serif;\n }\n\n :host([active]) {\n display: flex;\n }\n\n :host(*:focus) {\n outline: none;\n }\n\n ::slotted(*) {\n padding: 5px 10px;\n cursor: pointer;\n }\n\n ::slotted(*:focus) {\n outline: none;\n }\n\n ::slotted([menu][active]),\n ::slotted([menu]:hover) {\n background-color: #f6f6f6;\n }\n\n ::slotted([menu]),\n ::slotted(ox-popup-menuitem) {\n border-left: 3px solid transparent;\n }\n\n ::slotted(ox-popup-menuitem[active]) {\n border-left: 3px solid var(--primary-color, #38a25b);\n font-weight: bold;\n }\n\n ::slotted([separator]) {\n height: 1px;\n width: 100%;\n padding: 0;\n background-color: rgba(0, 0, 0, 0.15);\n }\n ::slotted([menu] > input) {\n border: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.3));\n }\n `\n ]\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 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 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 * Open Popup\n *\n * @param {PopupOpenOptions}\n */\n static open({\n template,\n top,\n left,\n parent\n }: {\n template: unknown\n top: number\n left: number\n parent?: Element | null\n }) {\n const owner = parent || document.body\n const target = document.createElement('ox-popup-menu') as OxPopupMenu\n render(template, target)\n\n target.style.left = `${left}px`\n target.style.top = `${top}px`\n\n target.setAttribute('active', '')\n\n target._parent = owner\n\n owner.appendChild(target)\n }\n}\n"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
-
import {
|
|
3
|
-
export declare class
|
|
2
|
+
import { OxPopupMenu } from './ox-popup-menu';
|
|
3
|
+
export declare class OxPopupMenuItem extends LitElement {
|
|
4
4
|
static styles: import("lit").CSSResult[];
|
|
5
5
|
active: boolean;
|
|
6
6
|
label: string;
|
|
7
|
-
_submenu?:
|
|
7
|
+
_submenu?: OxPopupMenu;
|
|
8
8
|
render(): import("lit-html").TemplateResult<1>;
|
|
9
9
|
firstUpdated(): void;
|
|
10
10
|
protected _onclick: (e: MouseEvent) => void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import {
|
|
2
|
+
import { css, html, LitElement } from 'lit';
|
|
3
3
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
4
|
-
let
|
|
4
|
+
let OxPopupMenuItem = class OxPopupMenuItem extends LitElement {
|
|
5
5
|
constructor() {
|
|
6
6
|
super(...arguments);
|
|
7
7
|
this.active = false;
|
|
@@ -14,7 +14,7 @@ let PopupMenuItem = class PopupMenuItem extends LitElement {
|
|
|
14
14
|
if (parent) {
|
|
15
15
|
parent.setActive(this);
|
|
16
16
|
}
|
|
17
|
-
this.dispatchEvent(new CustomEvent('
|
|
17
|
+
this.dispatchEvent(new CustomEvent('select'));
|
|
18
18
|
requestAnimationFrame(() => {
|
|
19
19
|
this.expand(false);
|
|
20
20
|
});
|
|
@@ -78,7 +78,7 @@ let PopupMenuItem = class PopupMenuItem extends LitElement {
|
|
|
78
78
|
return;
|
|
79
79
|
}
|
|
80
80
|
const top = 0;
|
|
81
|
-
const left = this.
|
|
81
|
+
const left = this.clientWidth;
|
|
82
82
|
this._submenu.open({ top, left, silent });
|
|
83
83
|
}
|
|
84
84
|
collapse() {
|
|
@@ -92,7 +92,7 @@ let PopupMenuItem = class PopupMenuItem extends LitElement {
|
|
|
92
92
|
this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }));
|
|
93
93
|
}
|
|
94
94
|
};
|
|
95
|
-
|
|
95
|
+
OxPopupMenuItem.styles = [
|
|
96
96
|
css `
|
|
97
97
|
:host {
|
|
98
98
|
display: flex;
|
|
@@ -137,15 +137,15 @@ PopupMenuItem.styles = [
|
|
|
137
137
|
];
|
|
138
138
|
__decorate([
|
|
139
139
|
property({ type: Boolean })
|
|
140
|
-
],
|
|
140
|
+
], OxPopupMenuItem.prototype, "active", void 0);
|
|
141
141
|
__decorate([
|
|
142
142
|
property({ type: String })
|
|
143
|
-
],
|
|
143
|
+
], OxPopupMenuItem.prototype, "label", void 0);
|
|
144
144
|
__decorate([
|
|
145
145
|
state()
|
|
146
|
-
],
|
|
147
|
-
|
|
146
|
+
], OxPopupMenuItem.prototype, "_submenu", void 0);
|
|
147
|
+
OxPopupMenuItem = __decorate([
|
|
148
148
|
customElement('ox-popup-menuitem')
|
|
149
|
-
],
|
|
150
|
-
export {
|
|
149
|
+
], OxPopupMenuItem);
|
|
150
|
+
export { OxPopupMenuItem };
|
|
151
151
|
//# sourceMappingURL=ox-popup-menuitem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-popup-menuitem.js","sourceRoot":"","sources":["../../src/ox-popup-menuitem.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
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;AAKlE,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;QA6C+B,WAAM,GAAY,KAAK,CAAA;QAwB1C,aAAQ,GAA4B,UAAiC,CAAa;YAC1F,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,OAAM;aACP;YAED,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAgB,CAAA;YAC3D,IAAI,MAAM,EAAE;gBACV,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;aACvB;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;gBACb,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;wBACjB,CAAC,CAAC,eAAe,EAAE,CAAA;wBACnB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;qBACnB;oBACD,MAAK;aACR;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;IAqCd,CAAC;IApGC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;mBAII,IAAI,CAAC,KAAK;;QAErB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,oCAAoC,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;0BAE/C,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;YACzB,IAAI,CAAC,YAAY,EAAE,CAAA;SACpB;IACH,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;SAClB;aAAM;YACL,IAAI,CAAC,QAAQ,EAAE,CAAA;SAChB;IACH,CAAC;IAED,MAAM,CAAC,MAAe;QACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAM;SACP;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,QAAQ;;QACN,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,EAAE,CAAA;IACxB,CAAC;IAED,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,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;CACF,CAAA;AArJQ,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCF;CACF,CAAA;AAE4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAwB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAe;AAEjC;IAAR,KAAK,EAAE;iDAAuB;AAhDpB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAsJ3B;SAtJY,eAAe","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@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 4px 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(--secondary-color, #476172);\n font-size: 18px;\n }\n\n mwc-icon {\n display: block;\n width: 24px;\n text-align: right;\n font-size: 18px;\n color: var(--theme-primary-text-color, #3c3938);\n opacity: 0.7;\n }\n `\n ]\n\n @property({ type: Boolean }) active: boolean = false\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`<mwc-icon>chevron_right</mwc-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 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 collapse() {\n this._submenu?.close()\n }\n\n collapseSelf() {\n this.dispatchEvent(new CustomEvent('ox-collapse', { bubbles: true, composed: true, detail: this }))\n }\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
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
export declare class
|
|
2
|
+
export declare class OxPopup extends LitElement {
|
|
3
3
|
static styles: import("lit").CSSResult[];
|
|
4
4
|
_parent?: Element;
|
|
5
5
|
render(): import("lit-html").TemplateResult<1>;
|
|
@@ -25,15 +25,19 @@ export declare class Popup extends LitElement {
|
|
|
25
25
|
*
|
|
26
26
|
* @param {PopupOpenOptions}
|
|
27
27
|
*/
|
|
28
|
-
static open({ template, top, left, parent }: {
|
|
28
|
+
static open({ template, top, left, right, bottom, parent }: {
|
|
29
29
|
template: unknown;
|
|
30
|
-
top
|
|
31
|
-
left
|
|
30
|
+
top?: number;
|
|
31
|
+
left?: number;
|
|
32
|
+
right?: number;
|
|
33
|
+
bottom?: number;
|
|
32
34
|
parent?: Element | null;
|
|
33
35
|
}): void;
|
|
34
|
-
open({ left, top, silent }: {
|
|
36
|
+
open({ left, top, right, bottom, silent }: {
|
|
35
37
|
left?: number;
|
|
36
38
|
top?: number;
|
|
39
|
+
right?: number;
|
|
40
|
+
bottom?: number;
|
|
37
41
|
silent?: boolean;
|
|
38
42
|
}): void;
|
|
39
43
|
guaranteeFocus(): void;
|
package/dist/src/ox-popup.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { LitElement, css, html } from 'lit';
|
|
3
3
|
import { customElement, state } from 'lit/decorators.js';
|
|
4
|
+
import { ScrollbarStyles } from '@operato/styles';
|
|
4
5
|
import { render } from 'lit-html';
|
|
5
|
-
let
|
|
6
|
+
let OxPopup = class OxPopup extends LitElement {
|
|
6
7
|
constructor() {
|
|
7
8
|
super(...arguments);
|
|
8
9
|
this._onfocusout = function (e) {
|
|
@@ -51,8 +52,6 @@ let Popup = class Popup extends LitElement {
|
|
|
51
52
|
this.addEventListener('click', this._onclick);
|
|
52
53
|
this.addEventListener('ox-close', this._onclose);
|
|
53
54
|
this.addEventListener('ox-collapse', this._oncollapse);
|
|
54
|
-
/* When the window is out of focus, all pop-ups should disappear. */
|
|
55
|
-
window.addEventListener('blur', this._onwindowblur);
|
|
56
55
|
this.setAttribute('tabindex', '0'); // make this element focusable
|
|
57
56
|
this.guaranteeFocus();
|
|
58
57
|
}
|
|
@@ -70,21 +69,27 @@ let Popup = class Popup extends LitElement {
|
|
|
70
69
|
*
|
|
71
70
|
* @param {PopupOpenOptions}
|
|
72
71
|
*/
|
|
73
|
-
static open({ template, top, left, parent }) {
|
|
72
|
+
static open({ template, top, left, right, bottom, parent }) {
|
|
74
73
|
const owner = parent || document.body;
|
|
75
74
|
const target = document.createElement('ox-popup');
|
|
76
75
|
render(template, target);
|
|
77
|
-
target.style.left = `${left}px`;
|
|
78
|
-
target.style.top = `${top}px`;
|
|
79
|
-
target.setAttribute('active', '');
|
|
80
76
|
target._parent = owner;
|
|
81
77
|
owner.appendChild(target);
|
|
78
|
+
target.open({ top, left, right, bottom });
|
|
82
79
|
}
|
|
83
|
-
open({ left
|
|
84
|
-
|
|
85
|
-
|
|
80
|
+
open({ left, top, right, bottom, silent = false }) {
|
|
81
|
+
if (left !== undefined)
|
|
82
|
+
this.style.left = `${left}px`;
|
|
83
|
+
if (top !== undefined)
|
|
84
|
+
this.style.top = `${top}px`;
|
|
85
|
+
if (right !== undefined)
|
|
86
|
+
this.style.right = `${right}px`;
|
|
87
|
+
if (bottom !== undefined)
|
|
88
|
+
this.style.bottom = `${bottom}px`;
|
|
86
89
|
this.setAttribute('active', '');
|
|
87
90
|
!silent && this.guaranteeFocus();
|
|
91
|
+
/* When the window is out of focus, all pop-ups should disappear. */
|
|
92
|
+
window.addEventListener('blur', this._onwindowblur);
|
|
88
93
|
}
|
|
89
94
|
guaranteeFocus() {
|
|
90
95
|
const focusible = this.querySelector(':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex="-1"])');
|
|
@@ -98,27 +103,30 @@ let Popup = class Popup extends LitElement {
|
|
|
98
103
|
}
|
|
99
104
|
close() {
|
|
100
105
|
this.removeAttribute('active');
|
|
106
|
+
window.removeEventListener('blur', this._onwindowblur);
|
|
101
107
|
if (this._parent) {
|
|
102
|
-
/* this case is when the popup is opened by
|
|
108
|
+
/* this case is when the popup is opened by OxPopup.open(...) */
|
|
103
109
|
this.removeEventListener('focusout', this._onfocusout);
|
|
104
110
|
this.removeEventListener('keydown', this._onkeydown);
|
|
105
111
|
this.removeEventListener('keyup', this._onkeyup);
|
|
106
112
|
this.removeEventListener('click', this._onclick);
|
|
107
113
|
this.removeEventListener('ox-close', this._onclose);
|
|
108
114
|
this.removeEventListener('ox-collapse', this._oncollapse);
|
|
109
|
-
window.removeEventListener('blur', this._onwindowblur);
|
|
110
115
|
this._parent.removeChild(this);
|
|
111
116
|
delete this._parent;
|
|
112
117
|
}
|
|
113
118
|
}
|
|
114
119
|
};
|
|
115
|
-
|
|
120
|
+
OxPopup.styles = [
|
|
121
|
+
ScrollbarStyles,
|
|
116
122
|
css `
|
|
117
123
|
:host {
|
|
118
124
|
position: absolute;
|
|
119
125
|
display: none;
|
|
120
126
|
background-color: white;
|
|
121
127
|
z-index: 100;
|
|
128
|
+
box-sizing: border-box;
|
|
129
|
+
min-width: fit-content;
|
|
122
130
|
}
|
|
123
131
|
|
|
124
132
|
:host([active]) {
|
|
@@ -132,9 +140,9 @@ Popup.styles = [
|
|
|
132
140
|
];
|
|
133
141
|
__decorate([
|
|
134
142
|
state()
|
|
135
|
-
],
|
|
136
|
-
|
|
143
|
+
], OxPopup.prototype, "_parent", void 0);
|
|
144
|
+
OxPopup = __decorate([
|
|
137
145
|
customElement('ox-popup')
|
|
138
|
-
],
|
|
139
|
-
export {
|
|
146
|
+
], OxPopup);
|
|
147
|
+
export { OxPopup };
|
|
140
148
|
//# sourceMappingURL=ox-popup.js.map
|
package/dist/src/ox-popup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-popup.js","sourceRoot":"","sources":["../../src/ox-popup.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,IAAa,
|
|
1
|
+
{"version":3,"file":"ox-popup.js","sourceRoot":"","sources":["../../src/ox-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { render } from 'lit-html'\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 background-color: white;\n z-index: 100;\n box-sizing: border-box;\n min-width: fit-content;\n }\n\n :host([active]) {\n display: block;\n }\n\n :host(*:focus) {\n outline: none;\n }\n `\n ]\n\n @state() _parent?: Element\n\n render() {\n return html` <slot> </slot> `\n }\n\n protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopup, e: FocusEvent) {\n const to = e.relatedTarget as HTMLElement\n\n if (!this.contains(to)) {\n /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup은 닫혀야 한다. */\n // @ts-ignore for debug\n !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 _onclick: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {\n e.stopPropagation()\n }.bind(this)\n\n protected _onclose: (e: Event) => void = function (this: OxPopup, e: Event) {\n this.close()\n }.bind(this)\n\n protected _oncollapse: (e: Event) => void = function (this: OxPopup, e: Event) {\n e.stopPropagation()\n this.close()\n }.bind(this)\n\n protected _onwindowblur: (e: Event) => void = function (this: OxPopup, e: Event) {\n // @ts-ignore for debug\n !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('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\n /**\n * Open Popup\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 }) {\n const owner = parent || document.body\n const target = document.createElement('ox-popup') as OxPopup\n\n render(template, target)\n\n target._parent = owner\n owner.appendChild(target)\n\n target.open({ top, left, right, bottom })\n }\n\n open({\n left,\n top,\n right,\n bottom,\n silent = false\n }: {\n left?: number\n top?: number\n right?: number\n bottom?: number\n silent?: boolean\n }) {\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 this.setAttribute('active', '')\n\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() {\n const focusible = this.querySelector(\n ':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex=\"-1\"])'\n )\n\n if (focusible) {\n ;(focusible as HTMLElement).focus()\n } else {\n this.focus()\n }\n }\n\n close() {\n this.removeAttribute('active')\n\n window.removeEventListener('blur', this._onwindowblur)\n\n if (this._parent) {\n /* this case is when the popup is opened by 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\n this._parent.removeChild(this)\n delete this._parent\n }\n }\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '../src/ox-popup-menu';
|
|
2
|
-
import { html } from 'lit';
|
|
3
2
|
import { expect, fixture } from '@open-wc/testing';
|
|
4
|
-
|
|
3
|
+
import { html } from 'lit';
|
|
4
|
+
describe('OxPopupMenu', () => {
|
|
5
5
|
it('has a default title "Hey there" and counter 5', async () => {
|
|
6
6
|
const el = await fixture(html `<ox-popup-menu></ox-popup-menu>`);
|
|
7
7
|
expect(el.title).to.equal('Hey there');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-popup-menu.test.js","sourceRoot":"","sources":["../../test/ox-popup-menu.test.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ox-popup-menu.test.js","sourceRoot":"","sources":["../../test/ox-popup-menu.test.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAGlD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA,iCAAiC,CAAC,CAAA;QAE5E,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;QACtC,iCAAiC;IACnC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA,iCAAiC,CAAC,CAAA;QAC5E,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,KAAK,EAAE,CAAA;QAE/C,iCAAiC;IACnC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA,yDAAyD,CAAC,CAAA;QAEpG,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA,iCAAiC,CAAC,CAAA;QAE5E,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAA;IAC/C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import '../src/ox-popup-menu'\n\nimport { expect, fixture } from '@open-wc/testing'\n\nimport { OxPopupMenu } from '../src/ox-popup-menu'\nimport { html } from 'lit'\n\ndescribe('OxPopupMenu', () => {\n it('has a default title \"Hey there\" and counter 5', async () => {\n const el = await fixture<OxPopupMenu>(html`<ox-popup-menu></ox-popup-menu>`)\n\n expect(el.title).to.equal('Hey there')\n // expect(el.counter).to.equal(5)\n })\n\n it('increases the counter on button click', async () => {\n const el = await fixture<OxPopupMenu>(html`<ox-popup-menu></ox-popup-menu>`)\n el.shadowRoot!.querySelector('button')!.click()\n\n // expect(el.counter).to.equal(6)\n })\n\n it('can override the title via attribute', async () => {\n const el = await fixture<OxPopupMenu>(html`<ox-popup-menu title=\"attribute title\"></ox-popup-menu>`)\n\n expect(el.title).to.equal('attribute title')\n })\n\n it('passes the a11y audit', async () => {\n const el = await fixture<OxPopupMenu>(html`<ox-popup-menu></ox-popup-menu>`)\n\n await expect(el).shadowDom.to.be.accessible()\n })\n})\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../src/ox-popup';
|
|
2
|
-
import { html } from 'lit';
|
|
3
2
|
import { expect, fixture } from '@open-wc/testing';
|
|
3
|
+
import { html } from 'lit';
|
|
4
4
|
describe('Popup', () => {
|
|
5
5
|
it('has a default title "Hey there" and counter 5', async () => {
|
|
6
6
|
const el = await fixture(html `<ox-popup></ox-popup>`);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-popup.test.js","sourceRoot":"","sources":["../../test/ox-popup.test.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ox-popup.test.js","sourceRoot":"","sources":["../../test/ox-popup.test.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAGlD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IACrB,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAU,IAAI,CAAA,uBAAuB,CAAC,CAAA;QAE9D,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;QACtC,iCAAiC;IACnC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAU,IAAI,CAAA,uBAAuB,CAAC,CAAA;QAC9D,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,KAAK,EAAE,CAAA;QAE/C,iCAAiC;IACnC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAU,IAAI,CAAA,+CAA+C,CAAC,CAAA;QAEtF,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAU,IAAI,CAAA,uBAAuB,CAAC,CAAA;QAE9D,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAA;IAC/C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import '../src/ox-popup'\n\nimport { expect, fixture } from '@open-wc/testing'\n\nimport { OxPopup } from '../src/ox-popup'\nimport { html } from 'lit'\n\ndescribe('Popup', () => {\n it('has a default title \"Hey there\" and counter 5', async () => {\n const el = await fixture<OxPopup>(html`<ox-popup></ox-popup>`)\n\n expect(el.title).to.equal('Hey there')\n // expect(el.counter).to.equal(5)\n })\n\n it('increases the counter on button click', async () => {\n const el = await fixture<OxPopup>(html`<ox-popup></ox-popup>`)\n el.shadowRoot!.querySelector('button')!.click()\n\n // expect(el.counter).to.equal(6)\n })\n\n it('can override the title via attribute', async () => {\n const el = await fixture<OxPopup>(html`<ox-popup title=\"attribute title\"></ox-popup>`)\n\n expect(el.title).to.equal('attribute title')\n })\n\n it('passes the a11y audit', async () => {\n const el = await fixture<OxPopup>(html`<ox-popup></ox-popup>`)\n\n await expect(el).shadowDom.to.be.accessible()\n })\n})\n"]}
|