@operato/layout 0.3.20 → 0.3.26
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 +51 -0
- package/dist/src/actions/layout.d.ts +89 -0
- package/dist/src/actions/layout.js +159 -0
- package/dist/src/actions/layout.js.map +1 -0
- package/dist/src/actions/snackbar.d.ts +22 -0
- package/dist/src/actions/snackbar.js +24 -0
- package/dist/src/actions/snackbar.js.map +1 -0
- package/dist/src/components/ox-floating-overlay.d.ts +2 -0
- package/dist/src/components/ox-floating-overlay.js +333 -0
- package/dist/src/components/ox-floating-overlay.js.map +1 -0
- package/dist/src/components/ox-resize-splitter.d.ts +13 -0
- package/dist/src/components/ox-resize-splitter.js +108 -0
- package/dist/src/components/ox-resize-splitter.js.map +1 -0
- package/dist/src/index.d.ts +8 -1
- package/dist/src/index.js +8 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/initializer.d.ts +2 -0
- package/dist/src/initializer.js +91 -0
- package/dist/src/initializer.js.map +1 -0
- package/dist/src/layouts/ox-aside-bar.d.ts +2 -0
- package/dist/src/layouts/ox-aside-bar.js +106 -0
- package/dist/src/layouts/ox-aside-bar.js.map +1 -0
- package/dist/src/layouts/ox-footer-bar.d.ts +2 -0
- package/dist/src/layouts/ox-footer-bar.js +107 -0
- package/dist/src/layouts/ox-footer-bar.js.map +1 -0
- package/dist/src/layouts/ox-header-bar.d.ts +2 -0
- package/dist/src/layouts/ox-header-bar.js +104 -0
- package/dist/src/layouts/ox-header-bar.js.map +1 -0
- package/dist/src/layouts/ox-nav-bar.d.ts +2 -0
- package/dist/src/layouts/ox-nav-bar.js +108 -0
- package/dist/src/layouts/ox-nav-bar.js.map +1 -0
- package/dist/src/layouts/ox-snack-bar.d.ts +2 -0
- package/dist/src/layouts/ox-snack-bar.js +119 -0
- package/dist/src/layouts/ox-snack-bar.js.map +1 -0
- package/dist/src/reducers/layout.d.ts +13 -0
- package/dist/src/reducers/layout.js +62 -0
- package/dist/src/reducers/layout.js.map +1 -0
- package/dist/src/reducers/snackbar.d.ts +18 -0
- package/dist/src/reducers/snackbar.js +30 -0
- package/dist/src/reducers/snackbar.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +15 -7
- package/src/actions/layout.ts +233 -0
- package/src/actions/snackbar.ts +60 -0
- package/src/components/ox-floating-overlay.ts +319 -0
- package/src/components/ox-resize-splitter.ts +126 -0
- package/src/index.ts +10 -1
- package/src/initializer.ts +113 -0
- package/src/layouts/ox-aside-bar.ts +106 -0
- package/src/layouts/ox-footer-bar.ts +106 -0
- package/src/layouts/ox-header-bar.ts +103 -0
- package/src/layouts/ox-nav-bar.ts +108 -0
- package/src/layouts/ox-snack-bar.ts +108 -0
- package/src/reducers/layout.ts +72 -0
- package/src/reducers/snackbar.ts +32 -0
- package/dist/src/ox-layout.d.ts +0 -45
- package/dist/src/ox-layout.js +0 -148
- package/dist/src/ox-layout.js.map +0 -1
- package/dist/src/ox-toolbar-style.d.ts +0 -4
- package/dist/src/ox-toolbar-style.js +0 -207
- package/dist/src/ox-toolbar-style.js.map +0 -1
- package/dist/src/ox-toolbar.d.ts +0 -4
- package/dist/src/ox-toolbar.js +0 -123
- package/dist/src/ox-toolbar.js.map +0 -1
- package/dist/stories/index.stories.d.ts +0 -33
- package/dist/stories/index.stories.js +0 -33
- package/dist/stories/index.stories.js.map +0 -1
- package/dist/test/ox-layout.test.d.ts +0 -1
- package/dist/test/ox-layout.test.js +0 -24
- package/dist/test/ox-layout.test.js.map +0 -1
- package/src/ox-layout.ts +0 -191
- package/src/ox-toolbar-style.ts +0 -208
- package/src/ox-toolbar.ts +0 -135
- package/stories/index.stories.ts +0 -52
- package/test/ox-layout.test.ts +0 -35
package/dist/src/ox-layout.js
DELETED
|
@@ -1,148 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { css, html, LitElement } from 'lit';
|
|
3
|
-
import { render } from 'lit-html';
|
|
4
|
-
import { customElement, state } from 'lit/decorators.js';
|
|
5
|
-
import { ScrollbarStyles } from '@operato/styles';
|
|
6
|
-
let OxLayout = class OxLayout extends LitElement {
|
|
7
|
-
constructor() {
|
|
8
|
-
super(...arguments);
|
|
9
|
-
this._onfocusout = function (e) {
|
|
10
|
-
const to = e.relatedTarget;
|
|
11
|
-
if (!this.contains(to)) {
|
|
12
|
-
/* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup은 닫혀야 한다. */
|
|
13
|
-
// @ts-ignore for debug
|
|
14
|
-
!window.POPUP_DEBUG && this.close();
|
|
15
|
-
}
|
|
16
|
-
}.bind(this);
|
|
17
|
-
this._onkeydown = function (e) {
|
|
18
|
-
e.stopPropagation();
|
|
19
|
-
switch (e.key) {
|
|
20
|
-
case 'Esc': // for IE/Edge
|
|
21
|
-
case 'Escape':
|
|
22
|
-
this.close();
|
|
23
|
-
break;
|
|
24
|
-
}
|
|
25
|
-
}.bind(this);
|
|
26
|
-
this._onkeyup = function (e) {
|
|
27
|
-
e.stopPropagation();
|
|
28
|
-
}.bind(this);
|
|
29
|
-
this._onclick = function (e) {
|
|
30
|
-
e.stopPropagation();
|
|
31
|
-
}.bind(this);
|
|
32
|
-
this._onclose = function (e) {
|
|
33
|
-
this.close();
|
|
34
|
-
}.bind(this);
|
|
35
|
-
this._oncollapse = function (e) {
|
|
36
|
-
e.stopPropagation();
|
|
37
|
-
this.close();
|
|
38
|
-
}.bind(this);
|
|
39
|
-
this._onwindowblur = function (e) {
|
|
40
|
-
// @ts-ignore for debug
|
|
41
|
-
!window.POPUP_DEBUG && this.close();
|
|
42
|
-
}.bind(this);
|
|
43
|
-
}
|
|
44
|
-
render() {
|
|
45
|
-
return html ` <slot> </slot> `;
|
|
46
|
-
}
|
|
47
|
-
connectedCallback() {
|
|
48
|
-
super.connectedCallback();
|
|
49
|
-
this.addEventListener('focusout', this._onfocusout);
|
|
50
|
-
this.addEventListener('keydown', this._onkeydown);
|
|
51
|
-
this.addEventListener('keyup', this._onkeyup);
|
|
52
|
-
this.addEventListener('click', this._onclick);
|
|
53
|
-
this.addEventListener('ox-close', this._onclose);
|
|
54
|
-
this.addEventListener('ox-collapse', this._oncollapse);
|
|
55
|
-
this.setAttribute('tabindex', '0'); // make this element focusable
|
|
56
|
-
this.guaranteeFocus();
|
|
57
|
-
}
|
|
58
|
-
/**
|
|
59
|
-
* Configuration for opening ox-layout
|
|
60
|
-
*
|
|
61
|
-
* @typedef {Object} PopupOpenOptions
|
|
62
|
-
* @property {HTMLTemplate} template HTMLTemplate to be displayed inside the layout
|
|
63
|
-
* @property {Number} top The position-top where the pop-up will be displayed
|
|
64
|
-
* @property {Number} left The position-left where the pop-up will be displayed
|
|
65
|
-
* @property {HTMLElement} parent Popup's parent element
|
|
66
|
-
*/
|
|
67
|
-
/**
|
|
68
|
-
* Open Popup
|
|
69
|
-
*
|
|
70
|
-
* @param {PopupOpenOptions}
|
|
71
|
-
*/
|
|
72
|
-
static open({ template, top, left, right, bottom, parent }) {
|
|
73
|
-
const owner = parent || document.body;
|
|
74
|
-
const target = document.createElement('ox-layout');
|
|
75
|
-
render(template, target);
|
|
76
|
-
target._parent = owner;
|
|
77
|
-
owner.appendChild(target);
|
|
78
|
-
target.open({ top, left, right, bottom });
|
|
79
|
-
}
|
|
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`;
|
|
89
|
-
this.setAttribute('active', '');
|
|
90
|
-
!silent && this.guaranteeFocus();
|
|
91
|
-
/* When the window is out of focus, all pop-ups should disappear. */
|
|
92
|
-
window.addEventListener('blur', this._onwindowblur);
|
|
93
|
-
}
|
|
94
|
-
guaranteeFocus() {
|
|
95
|
-
const focusible = this.querySelector(':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex="-1"])');
|
|
96
|
-
if (focusible) {
|
|
97
|
-
;
|
|
98
|
-
focusible.focus();
|
|
99
|
-
}
|
|
100
|
-
else {
|
|
101
|
-
this.focus();
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
close() {
|
|
105
|
-
this.removeAttribute('active');
|
|
106
|
-
window.removeEventListener('blur', this._onwindowblur);
|
|
107
|
-
if (this._parent) {
|
|
108
|
-
/* this case is when the layout is opened by OxLayout.open(...) */
|
|
109
|
-
this.removeEventListener('focusout', this._onfocusout);
|
|
110
|
-
this.removeEventListener('keydown', this._onkeydown);
|
|
111
|
-
this.removeEventListener('keyup', this._onkeyup);
|
|
112
|
-
this.removeEventListener('click', this._onclick);
|
|
113
|
-
this.removeEventListener('ox-close', this._onclose);
|
|
114
|
-
this.removeEventListener('ox-collapse', this._oncollapse);
|
|
115
|
-
this._parent.removeChild(this);
|
|
116
|
-
delete this._parent;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
};
|
|
120
|
-
OxLayout.styles = [
|
|
121
|
-
ScrollbarStyles,
|
|
122
|
-
css `
|
|
123
|
-
:host {
|
|
124
|
-
position: absolute;
|
|
125
|
-
display: none;
|
|
126
|
-
background-color: white;
|
|
127
|
-
z-index: 100;
|
|
128
|
-
box-sizing: border-box;
|
|
129
|
-
min-width: fit-content;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
:host([active]) {
|
|
133
|
-
display: block;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
:host(*:focus) {
|
|
137
|
-
outline: none;
|
|
138
|
-
}
|
|
139
|
-
`
|
|
140
|
-
];
|
|
141
|
-
__decorate([
|
|
142
|
-
state()
|
|
143
|
-
], OxLayout.prototype, "_parent", void 0);
|
|
144
|
-
OxLayout = __decorate([
|
|
145
|
-
customElement('ox-layout')
|
|
146
|
-
], OxLayout);
|
|
147
|
-
export { OxLayout };
|
|
148
|
-
//# sourceMappingURL=ox-layout.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ox-layout.js","sourceRoot":"","sources":["../../src/ox-layout.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { render } from 'lit-html';\nimport { customElement, state } from 'lit/decorators.js';\n\nimport { ScrollbarStyles } from '@operato/styles';\n\n@customElement('ox-layout')\nexport class OxLayout 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: OxLayout, 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: OxLayout, 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: OxLayout, e: KeyboardEvent) {\n e.stopPropagation()\n }.bind(this)\n\n protected _onclick: (e: MouseEvent) => void = function (this: OxLayout, e: MouseEvent) {\n e.stopPropagation()\n }.bind(this)\n\n protected _onclose: (e: Event) => void = function (this: OxLayout, e: Event) {\n this.close()\n }.bind(this)\n\n protected _oncollapse: (e: Event) => void = function (this: OxLayout, e: Event) {\n e.stopPropagation()\n this.close()\n }.bind(this)\n\n protected _onwindowblur: (e: Event) => void = function (this: OxLayout, 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-layout\n *\n * @typedef {Object} PopupOpenOptions\n * @property {HTMLTemplate} template HTMLTemplate to be displayed inside the layout\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-layout') as OxLayout\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 layout is opened by OxLayout.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,207 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
-
*/
|
|
4
|
-
import { css } from 'lit';
|
|
5
|
-
export const style = css `
|
|
6
|
-
:host {
|
|
7
|
-
background-color: var(--edit-toolbar-background-color, #394e64);
|
|
8
|
-
overflow: hidden;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
[tools] {
|
|
12
|
-
display: flex;
|
|
13
|
-
align-items: center;
|
|
14
|
-
overflow: none;
|
|
15
|
-
padding: 0px 10px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
[tools] > * {
|
|
19
|
-
padding: 0px;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
[tools] > span[button] {
|
|
23
|
-
min-width: 30px;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
[tools] > span[padding] {
|
|
27
|
-
flex: 1;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
[tools] > .vline {
|
|
31
|
-
display: block;
|
|
32
|
-
flex: none;
|
|
33
|
-
border-left: 1px solid rgba(255, 255, 255, 0.2);
|
|
34
|
-
border-right: 1px solid rgba(0, 0, 0, 0.15);
|
|
35
|
-
width: 0px;
|
|
36
|
-
height: 18px;
|
|
37
|
-
margin: 0 3px;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
span[button] {
|
|
41
|
-
min-height: 35px;
|
|
42
|
-
|
|
43
|
-
background: var(--url-icon-toolbar) no-repeat;
|
|
44
|
-
background-position-x: 50%;
|
|
45
|
-
opacity: 0.8;
|
|
46
|
-
}
|
|
47
|
-
span[button]:hover {
|
|
48
|
-
opacity: 1;
|
|
49
|
-
background-color: rgba(0, 0, 0, 0.1);
|
|
50
|
-
cursor: pointer;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
#fullscreen,
|
|
54
|
-
#toggle-property {
|
|
55
|
-
flex: none;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
#align-left {
|
|
59
|
-
background-position-y: 8px;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
#align-center {
|
|
63
|
-
background-position-y: -42px;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
#align-right {
|
|
67
|
-
background-position-y: -92px;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
#align-top {
|
|
71
|
-
background-position-y: -142px;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
#align-middle {
|
|
75
|
-
background-position-y: -192px;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
#align-bottom {
|
|
79
|
-
background-position-y: -242px;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
#undo {
|
|
83
|
-
background-position-y: -592px;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
#redo {
|
|
87
|
-
background-position-y: -642px;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
#front {
|
|
91
|
-
background-position-y: -292px;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
#back {
|
|
95
|
-
background-position-y: -342px;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
#forward {
|
|
99
|
-
background-position-y: -392px;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
#backward {
|
|
103
|
-
background-position-y: -442px;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
#symmetry-x {
|
|
107
|
-
background-position-y: -492px;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
#symmetry-y {
|
|
111
|
-
background-position-y: -542px;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
#group {
|
|
115
|
-
background-position-y: -492px;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
#ungroup {
|
|
119
|
-
background-position-y: -542px;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
#fullscreen {
|
|
123
|
-
background-position-y: -692px;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
#toggle-property {
|
|
127
|
-
background-position-y: -692px;
|
|
128
|
-
float: right;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
#zoomin {
|
|
132
|
-
background-position-y: -742px;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
#zoomout {
|
|
136
|
-
background-position-y: -792px;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
#fit-scene {
|
|
140
|
-
background-position-y: -1492px;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
#cut {
|
|
144
|
-
background-position-y: -842px;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
#copy {
|
|
148
|
-
background-position-y: -892px;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
#paste {
|
|
152
|
-
background-position-y: -942px;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
#delete {
|
|
156
|
-
background-position-y: -992px;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
#font-increase {
|
|
160
|
-
background-position-y: -1042px;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
#font-decrease {
|
|
164
|
-
background-position-y: -1092px;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
#style-copy {
|
|
168
|
-
background-position-y: -1142px;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
#context-menu {
|
|
172
|
-
background-position-y: -692px;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
#symmetry-x {
|
|
176
|
-
background-position-y: -1192px;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
#symmetry-y {
|
|
180
|
-
background-position-y: -1242px;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
#rotate-cw {
|
|
184
|
-
background-position-y: -1292px;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
#rotate-ccw {
|
|
188
|
-
background-position-y: -1342px;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
#distribute-horizontal {
|
|
192
|
-
background-position-y: -1542px;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
#distribute-vertical {
|
|
196
|
-
background-position-y: -1593px;
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
#toggle-property {
|
|
200
|
-
background-position-y: -1392px;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
#preview {
|
|
204
|
-
background-position-y: -1640px;
|
|
205
|
-
}
|
|
206
|
-
`;
|
|
207
|
-
//# sourceMappingURL=ox-toolbar-style.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ox-toolbar-style.js","sourceRoot":"","sources":["../../src/ox-toolbar-style.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyMvB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css } from 'lit'\n\nexport const style = css`\n :host {\n background-color: var(--edit-toolbar-background-color, #394e64);\n overflow: hidden;\n }\n\n [tools] {\n display: flex;\n align-items: center;\n overflow: none;\n padding: 0px 10px;\n }\n\n [tools] > * {\n padding: 0px;\n }\n\n [tools] > span[button] {\n min-width: 30px;\n }\n\n [tools] > span[padding] {\n flex: 1;\n }\n\n [tools] > .vline {\n display: block;\n flex: none;\n border-left: 1px solid rgba(255, 255, 255, 0.2);\n border-right: 1px solid rgba(0, 0, 0, 0.15);\n width: 0px;\n height: 18px;\n margin: 0 3px;\n }\n\n span[button] {\n min-height: 35px;\n\n background: var(--url-icon-toolbar) no-repeat;\n background-position-x: 50%;\n opacity: 0.8;\n }\n span[button]:hover {\n opacity: 1;\n background-color: rgba(0, 0, 0, 0.1);\n cursor: pointer;\n }\n\n #fullscreen,\n #toggle-property {\n flex: none;\n }\n\n #align-left {\n background-position-y: 8px;\n }\n\n #align-center {\n background-position-y: -42px;\n }\n\n #align-right {\n background-position-y: -92px;\n }\n\n #align-top {\n background-position-y: -142px;\n }\n\n #align-middle {\n background-position-y: -192px;\n }\n\n #align-bottom {\n background-position-y: -242px;\n }\n\n #undo {\n background-position-y: -592px;\n }\n\n #redo {\n background-position-y: -642px;\n }\n\n #front {\n background-position-y: -292px;\n }\n\n #back {\n background-position-y: -342px;\n }\n\n #forward {\n background-position-y: -392px;\n }\n\n #backward {\n background-position-y: -442px;\n }\n\n #symmetry-x {\n background-position-y: -492px;\n }\n\n #symmetry-y {\n background-position-y: -542px;\n }\n\n #group {\n background-position-y: -492px;\n }\n\n #ungroup {\n background-position-y: -542px;\n }\n\n #fullscreen {\n background-position-y: -692px;\n }\n\n #toggle-property {\n background-position-y: -692px;\n float: right;\n }\n\n #zoomin {\n background-position-y: -742px;\n }\n\n #zoomout {\n background-position-y: -792px;\n }\n\n #fit-scene {\n background-position-y: -1492px;\n }\n\n #cut {\n background-position-y: -842px;\n }\n\n #copy {\n background-position-y: -892px;\n }\n\n #paste {\n background-position-y: -942px;\n }\n\n #delete {\n background-position-y: -992px;\n }\n\n #font-increase {\n background-position-y: -1042px;\n }\n\n #font-decrease {\n background-position-y: -1092px;\n }\n\n #style-copy {\n background-position-y: -1142px;\n }\n\n #context-menu {\n background-position-y: -692px;\n }\n\n #symmetry-x {\n background-position-y: -1192px;\n }\n\n #symmetry-y {\n background-position-y: -1242px;\n }\n\n #rotate-cw {\n background-position-y: -1292px;\n }\n\n #rotate-ccw {\n background-position-y: -1342px;\n }\n\n #distribute-horizontal {\n background-position-y: -1542px;\n }\n\n #distribute-vertical {\n background-position-y: -1593px;\n }\n\n #toggle-property {\n background-position-y: -1392px;\n }\n\n #preview {\n background-position-y: -1640px;\n }\n`\n"]}
|
package/dist/src/ox-toolbar.d.ts
DELETED
package/dist/src/ox-toolbar.js
DELETED
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
-
*/
|
|
4
|
-
import { __decorate } from "tslib";
|
|
5
|
-
import { css, html, LitElement } from 'lit';
|
|
6
|
-
import { customElement } from 'lit/decorators.js';
|
|
7
|
-
import { isMacOS } from '@operato/utils';
|
|
8
|
-
const MACOS = isMacOS();
|
|
9
|
-
let OxToolbar = class OxToolbar extends LitElement {
|
|
10
|
-
render() {
|
|
11
|
-
return html ` <slot></slot> `;
|
|
12
|
-
}
|
|
13
|
-
firstUpdated() {
|
|
14
|
-
this.addEventListener('mousewheel', this.onWheelEvent.bind(this), false);
|
|
15
|
-
}
|
|
16
|
-
onWheelEvent(e) {
|
|
17
|
-
var delta = Math.max(-1, Math.min(1, e.deltaY || -e.detail));
|
|
18
|
-
this.scrollLeft -= delta * 40;
|
|
19
|
-
e.preventDefault();
|
|
20
|
-
}
|
|
21
|
-
getSymbol(key) {
|
|
22
|
-
var symbol;
|
|
23
|
-
switch (key) {
|
|
24
|
-
case 'cmd':
|
|
25
|
-
case 'ctrl':
|
|
26
|
-
symbol = MACOS ? '⌘' : 'Ctrl';
|
|
27
|
-
break;
|
|
28
|
-
case 'shift':
|
|
29
|
-
symbol = MACOS ? '⇧' : 'Shift';
|
|
30
|
-
break;
|
|
31
|
-
case 'alt':
|
|
32
|
-
case 'option':
|
|
33
|
-
symbol = MACOS ? '⌥' : 'Alt';
|
|
34
|
-
break;
|
|
35
|
-
case 'backspace':
|
|
36
|
-
symbol = MACOS ? '⌫' : 'BackSpace';
|
|
37
|
-
break;
|
|
38
|
-
case 'delete':
|
|
39
|
-
symbol = MACOS ? '⌦' : 'Del';
|
|
40
|
-
break;
|
|
41
|
-
default:
|
|
42
|
-
symbol = key.toUpperCase();
|
|
43
|
-
break;
|
|
44
|
-
}
|
|
45
|
-
return symbol;
|
|
46
|
-
}
|
|
47
|
-
getShortcutString() {
|
|
48
|
-
var symbols = [];
|
|
49
|
-
for (var i = 0; i < arguments.length; i++) {
|
|
50
|
-
symbols.push(this.getSymbol(arguments[i]));
|
|
51
|
-
}
|
|
52
|
-
return symbols.join(MACOS ? '' : '+');
|
|
53
|
-
}
|
|
54
|
-
onShortcut(e) {
|
|
55
|
-
var ctrlKey = MACOS ? e.metaKey : e.ctrlKey;
|
|
56
|
-
var altKey = e.altKey;
|
|
57
|
-
var shiftKey = e.shiftKey;
|
|
58
|
-
var defaultPrevent = ctrlKey || altKey;
|
|
59
|
-
switch (e.code) {
|
|
60
|
-
default:
|
|
61
|
-
return false;
|
|
62
|
-
}
|
|
63
|
-
if (defaultPrevent)
|
|
64
|
-
e.preventDefault();
|
|
65
|
-
return true;
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
OxToolbar.styles = [
|
|
69
|
-
css `
|
|
70
|
-
:host {
|
|
71
|
-
background-color: var(--edit-toolbar-background-color, #394e64);
|
|
72
|
-
overflow: hidden;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
[tools] {
|
|
76
|
-
display: flex;
|
|
77
|
-
align-items: center;
|
|
78
|
-
overflow: none;
|
|
79
|
-
padding: 0px 10px;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
[tools] > * {
|
|
83
|
-
padding: 0px;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
[tools] > span[button] {
|
|
87
|
-
min-width: 30px;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
[tools] > span[padding] {
|
|
91
|
-
flex: 1;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
[tools] > .vline {
|
|
95
|
-
display: block;
|
|
96
|
-
flex: none;
|
|
97
|
-
border-left: 1px solid rgba(255, 255, 255, 0.2);
|
|
98
|
-
border-right: 1px solid rgba(0, 0, 0, 0.15);
|
|
99
|
-
width: 0px;
|
|
100
|
-
height: 18px;
|
|
101
|
-
margin: 0 3px;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
span[button] {
|
|
105
|
-
min-height: 35px;
|
|
106
|
-
|
|
107
|
-
background: var(--url-icon-toolbar) no-repeat;
|
|
108
|
-
background-position-x: 50%;
|
|
109
|
-
opacity: 0.8;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
span[button]:hover {
|
|
113
|
-
opacity: 1;
|
|
114
|
-
background-color: rgba(0, 0, 0, 0.1);
|
|
115
|
-
cursor: pointer;
|
|
116
|
-
}
|
|
117
|
-
`
|
|
118
|
-
];
|
|
119
|
-
OxToolbar = __decorate([
|
|
120
|
-
customElement('ox-toolbar')
|
|
121
|
-
], OxToolbar);
|
|
122
|
-
customElements.define('process-edit-toolbar', OxToolbar);
|
|
123
|
-
//# sourceMappingURL=ox-toolbar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ox-toolbar.js","sourceRoot":"","sources":["../../src/ox-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { isMacOS } from '@operato/utils'\n\nconst MACOS = isMacOS()\n\n@customElement('ox-toolbar')\nclass OxToolbar extends LitElement {\n static styles = [\n css`\n :host {\n background-color: var(--edit-toolbar-background-color, #394e64);\n overflow: hidden;\n }\n\n [tools] {\n display: flex;\n align-items: center;\n overflow: none;\n padding: 0px 10px;\n }\n\n [tools] > * {\n padding: 0px;\n }\n\n [tools] > span[button] {\n min-width: 30px;\n }\n\n [tools] > span[padding] {\n flex: 1;\n }\n\n [tools] > .vline {\n display: block;\n flex: none;\n border-left: 1px solid rgba(255, 255, 255, 0.2);\n border-right: 1px solid rgba(0, 0, 0, 0.15);\n width: 0px;\n height: 18px;\n margin: 0 3px;\n }\n\n span[button] {\n min-height: 35px;\n\n background: var(--url-icon-toolbar) no-repeat;\n background-position-x: 50%;\n opacity: 0.8;\n }\n\n span[button]:hover {\n opacity: 1;\n background-color: rgba(0, 0, 0, 0.1);\n cursor: pointer;\n }\n `\n ]\n\n render() {\n return html` <slot></slot> `\n }\n\n firstUpdated() {\n this.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)\n }\n\n onWheelEvent(e: Event) {\n var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n this.scrollLeft -= delta * 40\n\n e.preventDefault()\n }\n\n getSymbol(key: string) {\n var symbol\n switch (key) {\n case 'cmd':\n case 'ctrl':\n symbol = MACOS ? '⌘' : 'Ctrl'\n break\n case 'shift':\n symbol = MACOS ? '⇧' : 'Shift'\n break\n case 'alt':\n case 'option':\n symbol = MACOS ? '⌥' : 'Alt'\n break\n case 'backspace':\n symbol = MACOS ? '⌫' : 'BackSpace'\n break\n case 'delete':\n symbol = MACOS ? '⌦' : 'Del'\n break\n default:\n symbol = key.toUpperCase()\n break\n }\n\n return symbol\n }\n\n getShortcutString() {\n var symbols = []\n for (var i = 0; i < arguments.length; i++) {\n symbols.push(this.getSymbol(arguments[i]))\n }\n\n return symbols.join(MACOS ? '' : '+')\n }\n\n onShortcut(e: KeyboardEvent) {\n var ctrlKey = MACOS ? e.metaKey : e.ctrlKey\n var altKey = e.altKey\n var shiftKey = e.shiftKey\n\n var defaultPrevent = ctrlKey || altKey\n\n switch (e.code) {\n default:\n return false\n }\n\n if (defaultPrevent) e.preventDefault()\n return true\n }\n}\n\ncustomElements.define('process-edit-toolbar', OxToolbar)\n"]}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import '../src/ox-layout';
|
|
2
|
-
import { TemplateResult } from 'lit';
|
|
3
|
-
declare const _default: {
|
|
4
|
-
title: string;
|
|
5
|
-
component: string;
|
|
6
|
-
argTypes: {
|
|
7
|
-
title: {
|
|
8
|
-
control: string;
|
|
9
|
-
};
|
|
10
|
-
counter: {
|
|
11
|
-
control: string;
|
|
12
|
-
};
|
|
13
|
-
textColor: {
|
|
14
|
-
control: string;
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
};
|
|
18
|
-
export default _default;
|
|
19
|
-
interface Story<T> {
|
|
20
|
-
(args: T): TemplateResult;
|
|
21
|
-
args?: Partial<T>;
|
|
22
|
-
argTypes?: Record<string, unknown>;
|
|
23
|
-
}
|
|
24
|
-
interface ArgTypes {
|
|
25
|
-
title?: string;
|
|
26
|
-
counter?: number;
|
|
27
|
-
textColor?: string;
|
|
28
|
-
slot?: TemplateResult;
|
|
29
|
-
}
|
|
30
|
-
export declare const Regular: Story<ArgTypes>;
|
|
31
|
-
export declare const CustomTitle: Story<ArgTypes>;
|
|
32
|
-
export declare const CustomCounter: Story<ArgTypes>;
|
|
33
|
-
export declare const SlottedContent: Story<ArgTypes>;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import '../src/ox-layout';
|
|
2
|
-
import { html } from 'lit';
|
|
3
|
-
export default {
|
|
4
|
-
title: 'ContextMenu',
|
|
5
|
-
component: 'ox-layout',
|
|
6
|
-
argTypes: {
|
|
7
|
-
title: { control: 'text' },
|
|
8
|
-
counter: { control: 'number' },
|
|
9
|
-
textColor: { control: 'color' }
|
|
10
|
-
}
|
|
11
|
-
};
|
|
12
|
-
const Template = ({ title = 'Hello world', counter = 5, textColor, slot }) => html `
|
|
13
|
-
<ox-layout style="--ox-layout-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
|
|
14
|
-
${slot}
|
|
15
|
-
</ox-layout>
|
|
16
|
-
`;
|
|
17
|
-
export const Regular = Template.bind({});
|
|
18
|
-
export const CustomTitle = Template.bind({});
|
|
19
|
-
CustomTitle.args = {
|
|
20
|
-
title: 'My title'
|
|
21
|
-
};
|
|
22
|
-
export const CustomCounter = Template.bind({});
|
|
23
|
-
CustomCounter.args = {
|
|
24
|
-
counter: 123456
|
|
25
|
-
};
|
|
26
|
-
export const SlottedContent = Template.bind({});
|
|
27
|
-
SlottedContent.args = {
|
|
28
|
-
slot: html `<p>Slotted content</p>`
|
|
29
|
-
};
|
|
30
|
-
SlottedContent.argTypes = {
|
|
31
|
-
slot: { table: { disable: true } }
|
|
32
|
-
};
|
|
33
|
-
//# sourceMappingURL=index.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAE3C,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,aAAa,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;8CAC/D,SAAS,IAAI,OAAO,YAAY,KAAK,aAAa,OAAO;MACjG,IAAI;;CAET,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC9C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAA;AACD,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAA","sourcesContent":["import '../src/ox-layout';\n\nimport { html, TemplateResult } from 'lit';\n\nexport default {\n title: 'ContextMenu',\n component: 'ox-layout',\n argTypes: {\n title: { control: 'text' },\n counter: { control: 'number' },\n textColor: { control: 'color' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n title?: string\n counter?: number\n textColor?: string\n slot?: TemplateResult\n}\n\nconst Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`\n <ox-layout style=\"--ox-layout-text-color: ${textColor || 'black'}\" .title=${title} .counter=${counter}>\n ${slot}\n </ox-layout>\n`\n\nexport const Regular = Template.bind({})\n\nexport const CustomTitle = Template.bind({})\nCustomTitle.args = {\n title: 'My title'\n}\n\nexport const CustomCounter = Template.bind({})\nCustomCounter.args = {\n counter: 123456\n}\n\nexport const SlottedContent = Template.bind({})\nSlottedContent.args = {\n slot: html`<p>Slotted content</p>`\n}\nSlottedContent.argTypes = {\n slot: { table: { disable: true } }\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '../src/ox-layout';
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import '../src/ox-layout';
|
|
2
|
-
import { html } from 'lit';
|
|
3
|
-
import { expect, fixture } from '@open-wc/testing';
|
|
4
|
-
describe('Layout', () => {
|
|
5
|
-
it('has a default title "Hey there" and counter 5', async () => {
|
|
6
|
-
const el = await fixture(html `<ox-layout></ox-layout>`);
|
|
7
|
-
expect(el.title).to.equal('Hey there');
|
|
8
|
-
// expect(el.counter).to.equal(5)
|
|
9
|
-
});
|
|
10
|
-
it('increases the counter on button click', async () => {
|
|
11
|
-
const el = await fixture(html `<ox-layout></ox-layout>`);
|
|
12
|
-
el.shadowRoot.querySelector('button').click();
|
|
13
|
-
// expect(el.counter).to.equal(6)
|
|
14
|
-
});
|
|
15
|
-
it('can override the title via attribute', async () => {
|
|
16
|
-
const el = await fixture(html `<ox-layout title="attribute title"></ox-layout>`);
|
|
17
|
-
expect(el.title).to.equal('attribute title');
|
|
18
|
-
});
|
|
19
|
-
it('passes the a11y audit', async () => {
|
|
20
|
-
const el = await fixture(html `<ox-layout></ox-layout>`);
|
|
21
|
-
await expect(el).shadowDom.to.be.accessible();
|
|
22
|
-
});
|
|
23
|
-
});
|
|
24
|
-
//# sourceMappingURL=ox-layout.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ox-layout.test.js","sourceRoot":"","sources":["../../test/ox-layout.test.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAInD,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAA;QAEjE,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,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAA;QACjE,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,CAAW,IAAI,CAAA,iDAAiD,CAAC,CAAA;QAEzF,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,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAA;QAEjE,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-layout';\n\nimport { html } from 'lit';\n\nimport { expect, fixture } from '@open-wc/testing';\n\nimport { OxLayout } from '../src/ox-layout';\n\ndescribe('Layout', () => {\n it('has a default title \"Hey there\" and counter 5', async () => {\n const el = await fixture<OxLayout>(html`<ox-layout></ox-layout>`)\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<OxLayout>(html`<ox-layout></ox-layout>`)\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<OxLayout>(html`<ox-layout title=\"attribute title\"></ox-layout>`)\n\n expect(el.title).to.equal('attribute title')\n })\n\n it('passes the a11y audit', async () => {\n const el = await fixture<OxLayout>(html`<ox-layout></ox-layout>`)\n\n await expect(el).shadowDom.to.be.accessible()\n })\n})\n"]}
|