@omegagrid/core 0.10.2 → 0.10.5
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/dist/common/actions.d.ts +16 -0
- package/dist/common/actions.d.ts.map +1 -0
- package/dist/common/actions.js +14 -0
- package/dist/common/actions.js.map +1 -0
- package/dist/common/colors.d.ts +39 -0
- package/dist/common/colors.d.ts.map +1 -0
- package/dist/common/colors.js +59 -0
- package/dist/common/colors.js.map +1 -0
- package/dist/common/csv.d.ts +23 -0
- package/dist/common/csv.d.ts.map +1 -0
- package/dist/common/csv.js +93 -0
- package/dist/common/csv.js.map +1 -0
- package/dist/common/dates.d.ts +32 -0
- package/dist/common/dates.d.ts.map +1 -0
- package/dist/common/dates.js +172 -0
- package/dist/common/dates.js.map +1 -0
- package/dist/common/device.d.ts +2 -0
- package/dist/common/device.d.ts.map +1 -0
- package/dist/common/device.js +13 -0
- package/dist/common/device.js.map +1 -0
- package/dist/common/dom.d.ts +90 -0
- package/dist/common/dom.d.ts.map +1 -0
- package/dist/common/dom.js +308 -0
- package/dist/common/dom.js.map +1 -0
- package/dist/common/events.d.ts +15 -0
- package/dist/common/events.d.ts.map +1 -0
- package/dist/common/events.js +33 -0
- package/dist/common/events.js.map +1 -0
- package/dist/common/html.d.ts +3 -0
- package/dist/common/html.d.ts.map +1 -0
- package/dist/common/html.js +25 -0
- package/dist/common/html.js.map +1 -0
- package/dist/common/index.d.ts +19 -0
- package/dist/common/index.d.ts.map +1 -0
- package/dist/common/index.js +19 -0
- package/dist/common/index.js.map +1 -0
- package/dist/common/linkedList.d.ts +24 -0
- package/dist/common/linkedList.d.ts.map +1 -0
- package/dist/common/linkedList.js +65 -0
- package/dist/common/linkedList.js.map +1 -0
- package/dist/common/loaders.d.ts +17 -0
- package/dist/common/loaders.d.ts.map +1 -0
- package/dist/common/loaders.js +54 -0
- package/dist/common/loaders.js.map +1 -0
- package/dist/common/logger.d.ts +25 -0
- package/dist/common/logger.d.ts.map +1 -0
- package/dist/common/logger.js +57 -0
- package/dist/common/logger.js.map +1 -0
- package/dist/common/matrix.d.ts +6 -0
- package/dist/common/matrix.d.ts.map +1 -0
- package/dist/common/matrix.js +17 -0
- package/dist/common/matrix.js.map +1 -0
- package/dist/common/numbers.d.ts +26 -0
- package/dist/common/numbers.d.ts.map +1 -0
- package/dist/common/numbers.js +239 -0
- package/dist/common/numbers.js.map +1 -0
- package/dist/common/options.d.ts +17 -0
- package/dist/common/options.d.ts.map +1 -0
- package/dist/common/options.js +29 -0
- package/dist/common/options.js.map +1 -0
- package/dist/common/paper.d.ts +8 -0
- package/dist/common/paper.d.ts.map +1 -0
- package/dist/common/paper.js +17 -0
- package/dist/common/paper.js.map +1 -0
- package/dist/common/shortcutManager.d.ts +17 -0
- package/dist/common/shortcutManager.d.ts.map +1 -0
- package/dist/common/shortcutManager.js +49 -0
- package/dist/common/shortcutManager.js.map +1 -0
- package/dist/common/tree.d.ts +87 -0
- package/dist/common/tree.d.ts.map +1 -0
- package/dist/common/tree.js +204 -0
- package/dist/common/tree.js.map +1 -0
- package/dist/common/utils.d.ts +30 -0
- package/dist/common/utils.d.ts.map +1 -0
- package/dist/common/utils.js +136 -0
- package/dist/common/utils.js.map +1 -0
- package/dist/constants.d.ts +48 -0
- package/dist/constants.d.ts.map +1 -0
- package/dist/constants.js +24 -0
- package/dist/constants.js.map +1 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +8 -0
- package/dist/index.js.map +1 -0
- package/dist/model/adapter.d.ts +8 -0
- package/dist/model/adapter.d.ts.map +1 -0
- package/dist/model/adapter.js +13 -0
- package/dist/model/adapter.js.map +1 -0
- package/dist/model/component.d.ts +19 -0
- package/dist/model/component.d.ts.map +1 -0
- package/dist/model/component.js +84 -0
- package/dist/model/component.js.map +1 -0
- package/dist/model/componentSlice.d.ts +8 -0
- package/dist/model/componentSlice.d.ts.map +1 -0
- package/dist/model/componentSlice.js +10 -0
- package/dist/model/componentSlice.js.map +1 -0
- package/dist/model/componentStore.d.ts +12 -0
- package/dist/model/componentStore.d.ts.map +1 -0
- package/dist/model/componentStore.js +26 -0
- package/dist/model/componentStore.js.map +1 -0
- package/dist/model/index.d.ts +6 -0
- package/dist/model/index.d.ts.map +1 -0
- package/dist/model/index.js +6 -0
- package/dist/model/index.js.map +1 -0
- package/dist/model/plugins.d.ts +13 -0
- package/dist/model/plugins.d.ts.map +1 -0
- package/dist/model/plugins.js +27 -0
- package/dist/model/plugins.js.map +1 -0
- package/dist/themes/definitions/tmDark.d.ts +4 -0
- package/dist/themes/definitions/tmDark.d.ts.map +1 -0
- package/dist/themes/definitions/tmDark.js +83 -0
- package/dist/themes/definitions/tmDark.js.map +1 -0
- package/dist/themes/definitions/tmLight.d.ts +4 -0
- package/dist/themes/definitions/tmLight.d.ts.map +1 -0
- package/dist/themes/definitions/tmLight.js +83 -0
- package/dist/themes/definitions/tmLight.js.map +1 -0
- package/dist/themes/helpers.d.ts +7 -0
- package/dist/themes/helpers.d.ts.map +1 -0
- package/dist/themes/helpers.js +34 -0
- package/dist/themes/helpers.js.map +1 -0
- package/dist/themes/index.d.ts +18 -0
- package/dist/themes/index.d.ts.map +1 -0
- package/dist/themes/index.js +48 -0
- package/dist/themes/index.js.map +1 -0
- package/dist/themes/mixins.d.ts +10 -0
- package/dist/themes/mixins.d.ts.map +1 -0
- package/dist/themes/mixins.js +39 -0
- package/dist/themes/mixins.js.map +1 -0
- package/dist/themes/transformations.d.ts +9 -0
- package/dist/themes/transformations.d.ts.map +1 -0
- package/dist/themes/transformations.js +48 -0
- package/dist/themes/transformations.js.map +1 -0
- package/dist/types.d.ts +130 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +12 -0
- package/dist/types.js.map +1 -0
- package/dist/ui/accordion.d.ts +16 -0
- package/dist/ui/accordion.d.ts.map +1 -0
- package/dist/ui/accordion.js +209 -0
- package/dist/ui/accordion.js.map +1 -0
- package/dist/ui/alert.d.ts +15 -0
- package/dist/ui/alert.d.ts.map +1 -0
- package/dist/ui/alert.js +101 -0
- package/dist/ui/alert.js.map +1 -0
- package/dist/ui/baseElement.d.ts +7 -0
- package/dist/ui/baseElement.d.ts.map +1 -0
- package/dist/ui/baseElement.js +10 -0
- package/dist/ui/baseElement.js.map +1 -0
- package/dist/ui/button.d.ts +21 -0
- package/dist/ui/button.d.ts.map +1 -0
- package/dist/ui/button.js +100 -0
- package/dist/ui/button.js.map +1 -0
- package/dist/ui/button.style.d.ts +2 -0
- package/dist/ui/button.style.d.ts.map +1 -0
- package/dist/ui/button.style.js +60 -0
- package/dist/ui/button.style.js.map +1 -0
- package/dist/ui/checkbox.d.ts +14 -0
- package/dist/ui/checkbox.d.ts.map +1 -0
- package/dist/ui/checkbox.js +47 -0
- package/dist/ui/checkbox.js.map +1 -0
- package/dist/ui/close.d.ts +6 -0
- package/dist/ui/close.d.ts.map +1 -0
- package/dist/ui/close.js +33 -0
- package/dist/ui/close.js.map +1 -0
- package/dist/ui/colorpicker.d.ts +24 -0
- package/dist/ui/colorpicker.d.ts.map +1 -0
- package/dist/ui/colorpicker.js +228 -0
- package/dist/ui/colorpicker.js.map +1 -0
- package/dist/ui/container.d.ts +39 -0
- package/dist/ui/container.d.ts.map +1 -0
- package/dist/ui/container.js +313 -0
- package/dist/ui/container.js.map +1 -0
- package/dist/ui/dropdown.d.ts +48 -0
- package/dist/ui/dropdown.d.ts.map +1 -0
- package/dist/ui/dropdown.js +300 -0
- package/dist/ui/dropdown.js.map +1 -0
- package/dist/ui/dropdownColorPicker.d.ts +12 -0
- package/dist/ui/dropdownColorPicker.d.ts.map +1 -0
- package/dist/ui/dropdownColorPicker.js +60 -0
- package/dist/ui/dropdownColorPicker.js.map +1 -0
- package/dist/ui/dropdownList.d.ts +8 -0
- package/dist/ui/dropdownList.d.ts.map +1 -0
- package/dist/ui/dropdownList.js +48 -0
- package/dist/ui/dropdownList.js.map +1 -0
- package/dist/ui/dropdownMenu.d.ts +11 -0
- package/dist/ui/dropdownMenu.d.ts.map +1 -0
- package/dist/ui/dropdownMenu.js +61 -0
- package/dist/ui/dropdownMenu.js.map +1 -0
- package/dist/ui/expander.d.ts +28 -0
- package/dist/ui/expander.d.ts.map +1 -0
- package/dist/ui/expander.js +144 -0
- package/dist/ui/expander.js.map +1 -0
- package/dist/ui/fileInput.d.ts +24 -0
- package/dist/ui/fileInput.d.ts.map +1 -0
- package/dist/ui/fileInput.js +130 -0
- package/dist/ui/fileInput.js.map +1 -0
- package/dist/ui/fileInput.style.d.ts +2 -0
- package/dist/ui/fileInput.style.d.ts.map +1 -0
- package/dist/ui/fileInput.style.js +73 -0
- package/dist/ui/fileInput.style.js.map +1 -0
- package/dist/ui/floatingWindow.d.ts +19 -0
- package/dist/ui/floatingWindow.d.ts.map +1 -0
- package/dist/ui/floatingWindow.js +87 -0
- package/dist/ui/floatingWindow.js.map +1 -0
- package/dist/ui/icon.d.ts +46 -0
- package/dist/ui/icon.d.ts.map +1 -0
- package/dist/ui/icon.js +189 -0
- package/dist/ui/icon.js.map +1 -0
- package/dist/ui/icon.style.d.ts +2 -0
- package/dist/ui/icon.style.d.ts.map +1 -0
- package/dist/ui/icon.style.js +556 -0
- package/dist/ui/icon.style.js.map +1 -0
- package/dist/ui/images.d.ts +2 -0
- package/dist/ui/images.d.ts.map +1 -0
- package/dist/ui/images.js +14 -0
- package/dist/ui/images.js.map +1 -0
- package/dist/ui/index.d.ts +32 -0
- package/dist/ui/index.d.ts.map +1 -0
- package/dist/ui/index.js +32 -0
- package/dist/ui/index.js.map +1 -0
- package/dist/ui/input.d.ts +12 -0
- package/dist/ui/input.d.ts.map +1 -0
- package/dist/ui/input.js +45 -0
- package/dist/ui/input.js.map +1 -0
- package/dist/ui/input.style.d.ts +2 -0
- package/dist/ui/input.style.d.ts.map +1 -0
- package/dist/ui/input.style.js +36 -0
- package/dist/ui/input.style.js.map +1 -0
- package/dist/ui/label.d.ts +16 -0
- package/dist/ui/label.d.ts.map +1 -0
- package/dist/ui/label.js +90 -0
- package/dist/ui/label.js.map +1 -0
- package/dist/ui/list.d.ts +87 -0
- package/dist/ui/list.d.ts.map +1 -0
- package/dist/ui/list.js +427 -0
- package/dist/ui/list.js.map +1 -0
- package/dist/ui/list.style.d.ts +2 -0
- package/dist/ui/list.style.d.ts.map +1 -0
- package/dist/ui/list.style.js +35 -0
- package/dist/ui/list.style.js.map +1 -0
- package/dist/ui/loader.d.ts +6 -0
- package/dist/ui/loader.d.ts.map +1 -0
- package/dist/ui/loader.js +25 -0
- package/dist/ui/loader.js.map +1 -0
- package/dist/ui/menu.d.ts +41 -0
- package/dist/ui/menu.d.ts.map +1 -0
- package/dist/ui/menu.js +154 -0
- package/dist/ui/menu.js.map +1 -0
- package/dist/ui/menu.style.d.ts +3 -0
- package/dist/ui/menu.style.d.ts.map +1 -0
- package/dist/ui/menu.style.js +50 -0
- package/dist/ui/menu.style.js.map +1 -0
- package/dist/ui/numericInput.d.ts +37 -0
- package/dist/ui/numericInput.d.ts.map +1 -0
- package/dist/ui/numericInput.js +175 -0
- package/dist/ui/numericInput.js.map +1 -0
- package/dist/ui/numericInput.style.d.ts +2 -0
- package/dist/ui/numericInput.style.d.ts.map +1 -0
- package/dist/ui/numericInput.style.js +29 -0
- package/dist/ui/numericInput.style.js.map +1 -0
- package/dist/ui/overlay.d.ts +17 -0
- package/dist/ui/overlay.d.ts.map +1 -0
- package/dist/ui/overlay.js +87 -0
- package/dist/ui/overlay.js.map +1 -0
- package/dist/ui/overlay.style.d.ts +2 -0
- package/dist/ui/overlay.style.d.ts.map +1 -0
- package/dist/ui/overlay.style.js +46 -0
- package/dist/ui/overlay.style.js.map +1 -0
- package/dist/ui/panel.d.ts +25 -0
- package/dist/ui/panel.d.ts.map +1 -0
- package/dist/ui/panel.js +151 -0
- package/dist/ui/panel.js.map +1 -0
- package/dist/ui/panel.style.d.ts +2 -0
- package/dist/ui/panel.style.d.ts.map +1 -0
- package/dist/ui/panel.style.js +73 -0
- package/dist/ui/panel.style.js.map +1 -0
- package/dist/ui/sizer.d.ts +57 -0
- package/dist/ui/sizer.d.ts.map +1 -0
- package/dist/ui/sizer.js +224 -0
- package/dist/ui/sizer.js.map +1 -0
- package/dist/ui/slider.d.ts +52 -0
- package/dist/ui/slider.d.ts.map +1 -0
- package/dist/ui/slider.js +213 -0
- package/dist/ui/slider.js.map +1 -0
- package/dist/ui/slider.style.d.ts +2 -0
- package/dist/ui/slider.style.d.ts.map +1 -0
- package/dist/ui/slider.style.js +61 -0
- package/dist/ui/slider.style.js.map +1 -0
- package/dist/ui/sortableList.d.ts +39 -0
- package/dist/ui/sortableList.d.ts.map +1 -0
- package/dist/ui/sortableList.js +167 -0
- package/dist/ui/sortableList.js.map +1 -0
- package/dist/ui/splitContainer.d.ts +52 -0
- package/dist/ui/splitContainer.d.ts.map +1 -0
- package/dist/ui/splitContainer.js +252 -0
- package/dist/ui/splitContainer.js.map +1 -0
- package/dist/ui/splitContainer.style.d.ts +2 -0
- package/dist/ui/splitContainer.style.d.ts.map +1 -0
- package/dist/ui/splitContainer.style.js +62 -0
- package/dist/ui/splitContainer.style.js.map +1 -0
- package/dist/ui/switch.d.ts +22 -0
- package/dist/ui/switch.d.ts.map +1 -0
- package/dist/ui/switch.js +83 -0
- package/dist/ui/switch.js.map +1 -0
- package/dist/ui/switch.style.d.ts +2 -0
- package/dist/ui/switch.style.d.ts.map +1 -0
- package/dist/ui/switch.style.js +149 -0
- package/dist/ui/switch.style.js.map +1 -0
- package/dist/ui/tooltip.d.ts +24 -0
- package/dist/ui/tooltip.d.ts.map +1 -0
- package/dist/ui/tooltip.js +143 -0
- package/dist/ui/tooltip.js.map +1 -0
- package/dist/ui/tooltip.style.d.ts +2 -0
- package/dist/ui/tooltip.style.d.ts.map +1 -0
- package/dist/ui/tooltip.style.js +112 -0
- package/dist/ui/tooltip.style.js.map +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html, css, unsafeCSS } from 'lit';
|
|
8
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
+
import constants from '../constants';
|
|
10
|
+
import { images } from './images';
|
|
11
|
+
const commonStyle = css `
|
|
12
|
+
:host {
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
width: ${constants.EXPANDER_SIZE}px;
|
|
15
|
+
height: ${constants.EXPANDER_SIZE}px;
|
|
16
|
+
border-radius: 50%;
|
|
17
|
+
position: relative;
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
z-index: 104;
|
|
20
|
+
font-family: arial;
|
|
21
|
+
background-color: var(--og-expander-background-color);
|
|
22
|
+
border: 1px solid var(--og-expander-color);
|
|
23
|
+
color: var(--og-expander-color);
|
|
24
|
+
white-space: nowrap;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:host(:hover) {
|
|
28
|
+
border-color: var(--og-accent-color);
|
|
29
|
+
color: var(--og-accent-color);
|
|
30
|
+
}
|
|
31
|
+
`;
|
|
32
|
+
export class ExpandEvent extends Event {
|
|
33
|
+
get collapsed() { return this.state == 'closed'; }
|
|
34
|
+
get closed() { return !this.collapsed; }
|
|
35
|
+
constructor(state) {
|
|
36
|
+
super('toggle', { bubbles: false, cancelable: true, composed: true });
|
|
37
|
+
this.state = state;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
export class LevelExpandEvent extends ExpandEvent {
|
|
41
|
+
constructor(level) {
|
|
42
|
+
super();
|
|
43
|
+
this.level = level;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
let Expander = class Expander extends LitElement {
|
|
47
|
+
constructor() {
|
|
48
|
+
super();
|
|
49
|
+
this.toggle = () => this.state = this.state == 'closed' ? 'open' : 'closed';
|
|
50
|
+
this.render = () => html `
|
|
51
|
+
<div class="${this.state == 'closed' ? 'plus' : 'minus'}"></div>
|
|
52
|
+
`;
|
|
53
|
+
this.addEventListener('mousedown', (e) => e.stopPropagation());
|
|
54
|
+
this.addEventListener('pointerdown', (e) => e.stopPropagation());
|
|
55
|
+
this.addEventListener('dblclick', (e) => e.stopPropagation());
|
|
56
|
+
this.addEventListener('click', () => {
|
|
57
|
+
this.toggle();
|
|
58
|
+
this.dispatchEvent(new ExpandEvent(this.state));
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
Expander.styles = [
|
|
63
|
+
commonStyle,
|
|
64
|
+
css `
|
|
65
|
+
:host([state="closed"]) > div {
|
|
66
|
+
mask-image: url(data:image/svg+xml;base64,${unsafeCSS(images['plus'])});
|
|
67
|
+
-webkit-mask-image: url(data:image/svg+xml;base64,${unsafeCSS(images['plus'])});
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
:host([state="open"]) > div {
|
|
71
|
+
mask-image: url(data:image/svg+xml;base64,${unsafeCSS(images['minus'])});
|
|
72
|
+
-webkit-mask-image: url(data:image/svg+xml;base64,${unsafeCSS(images['minus'])});
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
:host([state="waiting"]) > div {
|
|
76
|
+
mask-image: url(data:image/svg+xml;base64,${unsafeCSS(images['hourglass'])});
|
|
77
|
+
-webkit-mask-image: url(data:image/svg+xml;base64,${unsafeCSS(images['hourglass'])});
|
|
78
|
+
-webkit-mask-size: 50%;
|
|
79
|
+
mask-size: 50%;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
:host(:hover) > div {
|
|
83
|
+
background-color: var(--og-accent-color);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
div {
|
|
87
|
+
width: 100%;
|
|
88
|
+
height: 100%;
|
|
89
|
+
-webkit-mask-position: center center;
|
|
90
|
+
mask-position: center center;
|
|
91
|
+
-webkit-mask-repeat: no-repeat;
|
|
92
|
+
mask-repeat: no-repeat;
|
|
93
|
+
-webkit-mask-size: 70%;
|
|
94
|
+
mask-size: 70%;
|
|
95
|
+
background-color: var(--og-expander-color);
|
|
96
|
+
}
|
|
97
|
+
`
|
|
98
|
+
];
|
|
99
|
+
__decorate([
|
|
100
|
+
property({ type: String, reflect: true })
|
|
101
|
+
], Expander.prototype, "state", void 0);
|
|
102
|
+
__decorate([
|
|
103
|
+
property({ type: String })
|
|
104
|
+
], Expander.prototype, "collapsedImage", void 0);
|
|
105
|
+
__decorate([
|
|
106
|
+
property({ type: String })
|
|
107
|
+
], Expander.prototype, "expandedImage", void 0);
|
|
108
|
+
Expander = __decorate([
|
|
109
|
+
customElement('og-expander')
|
|
110
|
+
], Expander);
|
|
111
|
+
export { Expander };
|
|
112
|
+
let LevelExpander = class LevelExpander extends LitElement {
|
|
113
|
+
render() {
|
|
114
|
+
return html `<div>${this.level}</div>`;
|
|
115
|
+
}
|
|
116
|
+
constructor() {
|
|
117
|
+
super();
|
|
118
|
+
this.addEventListener('mousedown', (e) => e.stopPropagation());
|
|
119
|
+
this.addEventListener('pointerdown', (e) => e.stopPropagation());
|
|
120
|
+
this.addEventListener('dblclick', (e) => e.stopPropagation());
|
|
121
|
+
this.addEventListener('click', () => {
|
|
122
|
+
this.dispatchEvent(new LevelExpandEvent(this.level));
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
LevelExpander.styles = [
|
|
127
|
+
commonStyle,
|
|
128
|
+
css `
|
|
129
|
+
div {
|
|
130
|
+
width: 100%;
|
|
131
|
+
height: 100%;
|
|
132
|
+
font-size: 10px;
|
|
133
|
+
line-height: 12px;
|
|
134
|
+
}
|
|
135
|
+
`
|
|
136
|
+
];
|
|
137
|
+
__decorate([
|
|
138
|
+
property({ type: Number })
|
|
139
|
+
], LevelExpander.prototype, "level", void 0);
|
|
140
|
+
LevelExpander = __decorate([
|
|
141
|
+
customElement('og-levelexpander')
|
|
142
|
+
], LevelExpander);
|
|
143
|
+
export { LevelExpander };
|
|
144
|
+
//# sourceMappingURL=expander.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"expander.js","sourceRoot":"","sources":["../../src/ui/expander.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport constants from '../constants';\nimport { images } from './images';\n\nconst commonStyle = css`\n\t:host {\n\t\tbox-sizing: border-box;\n\t\twidth: ${constants.EXPANDER_SIZE}px;\n\t\theight: ${constants.EXPANDER_SIZE}px;\n\t\tborder-radius: 50%;\n\t\tposition: relative;\n\t\tcursor: pointer;\n\t\tz-index: 104;\n\t\tfont-family: arial;\n\t\tbackground-color: var(--og-expander-background-color);\n\t\tborder: 1px solid var(--og-expander-color);\n\t\tcolor: var(--og-expander-color);\n\t\twhite-space: nowrap;\n\t}\n\n\t:host(:hover) {\n\t\tborder-color: var(--og-accent-color);\n\t\tcolor: var(--og-accent-color);\n\t}\n`;\n\nexport type ExpanderState = 'open'|'closed'|'waiting';\n\nexport class ExpandEvent extends Event {\n\t\n\tget collapsed() { return this.state == 'closed' }\n\tget closed() { return !this.collapsed }\n\n\tconstructor(public readonly state?: ExpanderState) {\n\t\tsuper('toggle', {bubbles: false, cancelable: true, composed: true});\n\t}\n\n}\n\nexport class LevelExpandEvent extends ExpandEvent {\n\tconstructor(public readonly level: number) {\n\t\tsuper();\n\t}\n}\n\n@customElement('og-expander')\nexport class Expander extends LitElement {\n\n\tstatic styles = [\n\t\tcommonStyle,\n\t\tcss`\n\t\t\t:host([state=\"closed\"]) > div {\n\t\t\t\tmask-image: url(data:image/svg+xml;base64,${unsafeCSS(images['plus'])});\n\t\t\t\t-webkit-mask-image: url(data:image/svg+xml;base64,${unsafeCSS(images['plus'])});\n\t\t\t}\n\n\t\t\t:host([state=\"open\"]) > div {\n\t\t\t\tmask-image: url(data:image/svg+xml;base64,${unsafeCSS(images['minus'])});\n\t\t\t\t-webkit-mask-image: url(data:image/svg+xml;base64,${unsafeCSS(images['minus'])});\n\t\t\t}\n\n\t\t\t:host([state=\"waiting\"]) > div {\n\t\t\t\tmask-image: url(data:image/svg+xml;base64,${unsafeCSS(images['hourglass'])});\n\t\t\t\t-webkit-mask-image: url(data:image/svg+xml;base64,${unsafeCSS(images['hourglass'])});\n\t\t\t\t-webkit-mask-size: 50%;\n \t\t\t\tmask-size: 50%;\n\t\t\t}\n\n\t\t\t:host(:hover) > div {\n\t\t\t\tbackground-color: var(--og-accent-color);\n\t\t\t}\n\n\t\t\tdiv {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t-webkit-mask-position: center center;\n\t\t\t\tmask-position: center center;\n\t\t\t\t-webkit-mask-repeat: no-repeat;\n\t\t\t\tmask-repeat: no-repeat;\n\t\t\t\t-webkit-mask-size: 70%;\n \t\t\t\tmask-size: 70%;\n\t\t\t\tbackground-color: var(--og-expander-color);\n\t\t\t}\n\t\t`\n\t];\n\n\t@property({type: String, reflect: true})\n\tstate: ExpanderState;\n\n\t@property({type: String})\n\tcollapsedImage: string;\n\n\t@property({type: String})\n\texpandedImage: string;\n\n\ttoggle = () => this.state = this.state == 'closed' ? 'open' : 'closed';\n\t\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.addEventListener('mousedown', (e: MouseEvent) => e.stopPropagation());\n\t\tthis.addEventListener('pointerdown', (e: MouseEvent) => e.stopPropagation());\n\t\tthis.addEventListener('dblclick', (e: MouseEvent) => e.stopPropagation());\n\t\tthis.addEventListener('click', () => {\n\t\t\tthis.toggle();\n\t\t\tthis.dispatchEvent(new ExpandEvent(this.state));\n\t\t});\n\t}\n\n\trender = () => html`\n\t\t<div class=\"${this.state == 'closed' ? 'plus' : 'minus'}\"></div>\n\t`;\n\n}\n\n@customElement('og-levelexpander')\nexport class LevelExpander extends LitElement {\n\n\tstatic styles = [\n\t\tcommonStyle,\n\t\tcss`\n\t\t\tdiv {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tfont-size: 10px;\n\t\t\t\tline-height: 12px;\n\t\t\t}\n\t\t`\n\t];\n\n\t@property({type: Number})\n\tlevel: number;\n\n\trender() {\n\t\treturn html`<div>${this.level}</div>`;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.addEventListener('mousedown', (e: MouseEvent) => e.stopPropagation());\n\t\tthis.addEventListener('pointerdown', (e: MouseEvent) => e.stopPropagation());\n\t\tthis.addEventListener('dblclick', (e: MouseEvent) => e.stopPropagation());\n\t\tthis.addEventListener('click', () => {\n\t\t\tthis.dispatchEvent(new LevelExpandEvent(this.level));\n\t\t});\n\t}\n\n}"]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export declare class FileInput extends LitElement {
|
|
3
|
+
static styles: import("lit").CSSResult[];
|
|
4
|
+
disabled: boolean;
|
|
5
|
+
value: File;
|
|
6
|
+
input: HTMLInputElement;
|
|
7
|
+
extensions: string[] | string;
|
|
8
|
+
dragging: boolean;
|
|
9
|
+
dropping: boolean;
|
|
10
|
+
constructor();
|
|
11
|
+
willUpdate(props: Map<PropertyKey, unknown>): void;
|
|
12
|
+
connectedCallback(): void;
|
|
13
|
+
disconnectedCallback(): void;
|
|
14
|
+
_onWindowDragOver: (e: DragEvent) => void;
|
|
15
|
+
_onWindowDragLeave: (e: DragEvent) => void;
|
|
16
|
+
_onWindowDrop: (e: DragEvent) => void;
|
|
17
|
+
_onDragOver: (e: DragEvent) => void;
|
|
18
|
+
_onDragLeave: (e: DragEvent) => void;
|
|
19
|
+
_onDrop: (e: DragEvent) => void;
|
|
20
|
+
_onClick: () => void;
|
|
21
|
+
updateValue(file: File): void;
|
|
22
|
+
render: () => import("lit-html").TemplateResult<1>;
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=fileInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fileInput.d.ts","sourceRoot":"","sources":["../../src/ui/fileInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,qBACa,SAAU,SAAQ,UAAU;IAExC,MAAM,CAAC,MAAM,4BAAW;IAGxB,QAAQ,UAAS;IAGjB,KAAK,EAAE,IAAI,CAAC;IAGZ,KAAK,EAAE,gBAAgB,CAAC;IAGxB,UAAU,EAAE,MAAM,EAAE,GAAC,MAAM,CAAQ;IAGnC,QAAQ,UAAS;IAGjB,QAAQ,UAAS;;IAWjB,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAM3C,iBAAiB;IAOjB,oBAAoB;IAMpB,iBAAiB,GAAI,GAAG,SAAS,UAGhC;IAED,kBAAkB,GAAI,GAAG,SAAS,UAGjC;IAED,aAAa,GAAI,GAAG,SAAS,UAG5B;IAED,WAAW,GAAI,GAAG,SAAS,UAG1B;IAED,YAAY,GAAI,GAAG,SAAS,UAG3B;IAED,OAAO,GAAI,GAAG,SAAS,UAMtB;IAED,QAAQ,aAGP;IAED,WAAW,CAAC,IAAI,EAAE,IAAI;IAStB,MAAM,6CAuBJ;CAEF"}
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html } from 'lit';
|
|
8
|
+
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
9
|
+
import { msg } from '@omegagrid/localize';
|
|
10
|
+
import { style } from './fileInput.style';
|
|
11
|
+
import { ChangeEvent } from '../common/events';
|
|
12
|
+
import { utils } from '../common';
|
|
13
|
+
let FileInput = class FileInput extends LitElement {
|
|
14
|
+
constructor() {
|
|
15
|
+
super();
|
|
16
|
+
this.disabled = false;
|
|
17
|
+
this.extensions = null;
|
|
18
|
+
this.dragging = false;
|
|
19
|
+
this.dropping = false;
|
|
20
|
+
this._onWindowDragOver = (e) => {
|
|
21
|
+
e.preventDefault();
|
|
22
|
+
this.dragging = true;
|
|
23
|
+
};
|
|
24
|
+
this._onWindowDragLeave = (e) => {
|
|
25
|
+
e.preventDefault();
|
|
26
|
+
this.dragging = false;
|
|
27
|
+
};
|
|
28
|
+
this._onWindowDrop = (e) => {
|
|
29
|
+
e.preventDefault();
|
|
30
|
+
this.dragging = false;
|
|
31
|
+
};
|
|
32
|
+
this._onDragOver = (e) => {
|
|
33
|
+
e.preventDefault();
|
|
34
|
+
this.dropping = true;
|
|
35
|
+
};
|
|
36
|
+
this._onDragLeave = (e) => {
|
|
37
|
+
e.preventDefault();
|
|
38
|
+
this.dropping = false;
|
|
39
|
+
};
|
|
40
|
+
this._onDrop = (e) => {
|
|
41
|
+
e.preventDefault();
|
|
42
|
+
this.dropping = false;
|
|
43
|
+
if (e.dataTransfer.files.length) {
|
|
44
|
+
this.updateValue(e.dataTransfer.files[0]);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
this._onClick = () => {
|
|
48
|
+
if (this.disabled)
|
|
49
|
+
return;
|
|
50
|
+
this.input.click();
|
|
51
|
+
};
|
|
52
|
+
this.render = () => html `
|
|
53
|
+
<input type="file" ?disabled="${this.disabled}" @change="${() => {
|
|
54
|
+
this.updateValue(this.input.files.length ? this.input.files[0] : null);
|
|
55
|
+
}}">
|
|
56
|
+
${this.dragging ? html `
|
|
57
|
+
<div class="drop ${this.dropping ? 'dropping' : ''}">${msg('Drop file here')}</div>
|
|
58
|
+
` : html `
|
|
59
|
+
<div class="inner">
|
|
60
|
+
<og-icon icon="upload"></og-icon>
|
|
61
|
+
<div class="name">${this.value ? this.value.name : ''}</div>
|
|
62
|
+
${this.value ? html `
|
|
63
|
+
<og-button
|
|
64
|
+
id="cross"
|
|
65
|
+
@click="${(e) => {
|
|
66
|
+
e.stopPropagation();
|
|
67
|
+
this.updateValue(null);
|
|
68
|
+
}}"
|
|
69
|
+
icon="xmark"
|
|
70
|
+
color="red">
|
|
71
|
+
</og-button>
|
|
72
|
+
` : ''}
|
|
73
|
+
</div>
|
|
74
|
+
`}
|
|
75
|
+
`;
|
|
76
|
+
this.tabIndex = 1;
|
|
77
|
+
this.addEventListener('click', this._onClick);
|
|
78
|
+
this.addEventListener('dragover', this._onDragOver);
|
|
79
|
+
this.addEventListener('dragleave', this._onDragLeave);
|
|
80
|
+
this.addEventListener('drop', this._onDrop);
|
|
81
|
+
}
|
|
82
|
+
willUpdate(props) {
|
|
83
|
+
if (props.has('extensions') && utils.isString(this.extensions)) {
|
|
84
|
+
this.extensions = this.extensions.split(',').map((ext) => ext.trim());
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
connectedCallback() {
|
|
88
|
+
super.connectedCallback();
|
|
89
|
+
window.addEventListener('dragover', this._onWindowDragOver);
|
|
90
|
+
window.addEventListener('dragleave', this._onWindowDragLeave);
|
|
91
|
+
window.addEventListener('drop', this._onWindowDrop);
|
|
92
|
+
}
|
|
93
|
+
disconnectedCallback() {
|
|
94
|
+
window.removeEventListener('dragover', this._onWindowDragOver);
|
|
95
|
+
window.removeEventListener('dragleave', this._onWindowDragLeave);
|
|
96
|
+
window.removeEventListener('drop', this._onWindowDrop);
|
|
97
|
+
}
|
|
98
|
+
updateValue(file) {
|
|
99
|
+
if (this.extensions && file && !this.extensions.includes(file.name.split('.').pop())) {
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
102
|
+
this.value = file;
|
|
103
|
+
this.input.value = '';
|
|
104
|
+
this.dispatchEvent(new ChangeEvent({ value: this.value }));
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
FileInput.styles = [style];
|
|
108
|
+
__decorate([
|
|
109
|
+
property({ type: Boolean, reflect: true })
|
|
110
|
+
], FileInput.prototype, "disabled", void 0);
|
|
111
|
+
__decorate([
|
|
112
|
+
property({ type: Object })
|
|
113
|
+
], FileInput.prototype, "value", void 0);
|
|
114
|
+
__decorate([
|
|
115
|
+
query('input')
|
|
116
|
+
], FileInput.prototype, "input", void 0);
|
|
117
|
+
__decorate([
|
|
118
|
+
property()
|
|
119
|
+
], FileInput.prototype, "extensions", void 0);
|
|
120
|
+
__decorate([
|
|
121
|
+
state()
|
|
122
|
+
], FileInput.prototype, "dragging", void 0);
|
|
123
|
+
__decorate([
|
|
124
|
+
state()
|
|
125
|
+
], FileInput.prototype, "dropping", void 0);
|
|
126
|
+
FileInput = __decorate([
|
|
127
|
+
customElement(`og-fileinput`)
|
|
128
|
+
], FileInput);
|
|
129
|
+
export { FileInput };
|
|
130
|
+
//# sourceMappingURL=fileInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fileInput.js","sourceRoot":"","sources":["../../src/ui/fileInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { msg } from '@omegagrid/localize';\nimport { style } from './fileInput.style';\nimport { ChangeEvent } from '../common/events';\nimport { utils } from '../common';\n\n@customElement(`og-fileinput`)\nexport class FileInput extends LitElement {\n\n\tstatic styles = [style];\n\n\t@property({type: Boolean, reflect: true})\n\tdisabled = false;\n\n\t@property({type: Object})\n\tvalue: File;\n\n\t@query('input')\n\tinput: HTMLInputElement;\n\n\t@property()\n\textensions: string[]|string = null;\n\n\t@state()\n\tdragging = false;\n\n\t@state()\n\tdropping = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.tabIndex = 1;\n\t\tthis.addEventListener('click', this._onClick);\n\t\tthis.addEventListener('dragover', this._onDragOver);\n\t\tthis.addEventListener('dragleave', this._onDragLeave);\n\t\tthis.addEventListener('drop', this._onDrop);\n\t}\n\n\twillUpdate(props: Map<PropertyKey, unknown>) {\n\t\tif (props.has('extensions') && utils.isString(this.extensions)) {\n\t\t\tthis.extensions = (this.extensions as string).split(',').map((ext: string) => ext.trim());\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t\twindow.addEventListener('dragover', this._onWindowDragOver);\n\t\twindow.addEventListener('dragleave', this._onWindowDragLeave);\n\t\twindow.addEventListener('drop', this._onWindowDrop);\n\t}\n\n\tdisconnectedCallback() {\n\t\twindow.removeEventListener('dragover', this._onWindowDragOver);\n\t\twindow.removeEventListener('dragleave', this._onWindowDragLeave);\n\t\twindow.removeEventListener('drop', this._onWindowDrop);\n\t}\n\n\t_onWindowDragOver = (e: DragEvent) => {\n\t\te.preventDefault();\n\t\tthis.dragging = true;\n\t}\n\n\t_onWindowDragLeave = (e: DragEvent) => {\n\t\te.preventDefault();\n\t\tthis.dragging = false;\n\t}\n\n\t_onWindowDrop = (e: DragEvent) => {\n\t\te.preventDefault();\n\t\tthis.dragging = false;\n\t}\n\n\t_onDragOver = (e: DragEvent) => {\n\t\te.preventDefault();\n\t\tthis.dropping = true;\n\t}\n\n\t_onDragLeave = (e: DragEvent) => {\n\t\te.preventDefault();\n\t\tthis.dropping = false;\n\t}\n\n\t_onDrop = (e: DragEvent) => {\n\t\te.preventDefault();\n\t\tthis.dropping = false;\n\t\tif (e.dataTransfer.files.length) {\n\t\t\tthis.updateValue(e.dataTransfer.files[0]);\n\t\t}\n\t}\n\n\t_onClick = () => {\n\t\tif (this.disabled) return;\n\t\tthis.input.click();\n\t}\n\n\tupdateValue(file: File) {\n\t\tif (this.extensions && file && !this.extensions.includes(file.name.split('.').pop())) {\n\t\t\treturn;\n\t\t}\n\t\tthis.value = file;\n\t\tthis.input.value = '';\n\t\tthis.dispatchEvent(new ChangeEvent<File>({value: this.value}));\n\t}\n\n\trender = () => html`\n\t\t<input type=\"file\" ?disabled=\"${this.disabled}\" @change=\"${() => {\n\t\t\tthis.updateValue(this.input.files.length ? this.input.files[0] : null);\n\t\t}}\">\n\t\t${this.dragging ? html`\n\t\t\t<div class=\"drop ${this.dropping ? 'dropping' : ''}\">${msg('Drop file here')}</div>\n\t\t` : html`\n\t\t\t<div class=\"inner\">\n\t\t\t\t<og-icon icon=\"upload\"></og-icon>\n\t\t\t\t<div class=\"name\">${this.value ? this.value.name : ''}</div>\n\t\t\t\t${this.value ? html`\n\t\t\t\t\t<og-button\n\t\t\t\t\t\tid=\"cross\"\n\t\t\t\t\t\t@click=\"${(e: MouseEvent) => {\n\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\tthis.updateValue(null);\n\t\t\t\t\t\t}}\"\n\t\t\t\t\t\ticon=\"xmark\"\n\t\t\t\t\t\tcolor=\"red\">\n\t\t\t\t\t</og-button>\n\t\t\t\t` : ''}\n\t\t\t</div>\n\t\t`}\n\t`;\n\t\n}"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fileInput.style.d.ts","sourceRoot":"","sources":["../../src/ui/fileInput.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBAsEjB,CAAC"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const style = css `
|
|
3
|
+
:host {
|
|
4
|
+
display: inline-block;
|
|
5
|
+
background-color: var(--og-colortype-gray-background-color);
|
|
6
|
+
border: 1px solid var(--og-colortype-gray-border-color);
|
|
7
|
+
height: 20px;
|
|
8
|
+
line-height: 20px;
|
|
9
|
+
width: 100px;
|
|
10
|
+
cursor: pointer;
|
|
11
|
+
font-size: var(--og-font-size);
|
|
12
|
+
position: relative;
|
|
13
|
+
border-radius: var(--og-base-radius);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
:host([disabled]) {
|
|
17
|
+
cursor: not-allowed;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
* {
|
|
21
|
+
box-sizing: border-box;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.inner {
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-direction: row;
|
|
27
|
+
height: 100%;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
input {
|
|
31
|
+
display: none;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
og-icon {
|
|
35
|
+
flex: 0 20px;
|
|
36
|
+
text-align: center;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.drop {
|
|
40
|
+
position: absolute;
|
|
41
|
+
line-height: 20px;
|
|
42
|
+
inset: -1px;
|
|
43
|
+
border: 2px dotted var(--og-accent-color);
|
|
44
|
+
padding: 0 5px;
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
text-overflow: ellipsis;
|
|
47
|
+
white-space: nowrap;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.drop.dropping {
|
|
51
|
+
background-color: var(--og-accent-color);
|
|
52
|
+
border-color: var(--og-text-color-2);
|
|
53
|
+
color: var(--og-text-color-2);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.name {
|
|
57
|
+
flex: 1;
|
|
58
|
+
overflow: hidden;
|
|
59
|
+
text-overflow: ellipsis;
|
|
60
|
+
white-space: nowrap;
|
|
61
|
+
padding-right: 5px;
|
|
62
|
+
color: var(--og-text-color-3);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
#cross {
|
|
66
|
+
flex: 0;
|
|
67
|
+
max-width: 14px;
|
|
68
|
+
min-width: 14px;
|
|
69
|
+
border: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
`;
|
|
73
|
+
//# sourceMappingURL=fileInput.style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fileInput.style.js","sourceRoot":"","sources":["../../src/ui/fileInput.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsEvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbackground-color: var(--og-colortype-gray-background-color);\n\t\tborder: 1px solid var(--og-colortype-gray-border-color);\n\t\theight: 20px;\n\t\tline-height: 20px;\n\t\twidth: 100px;\n\t\tcursor: pointer;\n\t\tfont-size: var(--og-font-size);\n\t\tposition: relative;\n\t\tborder-radius: var(--og-base-radius);\n\t}\n\n\t:host([disabled]) {\n\t\tcursor: not-allowed;\n\t}\n\t\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.inner {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\theight: 100%;\n\t}\n\t\n\tinput {\n\t\tdisplay: none;\n\t}\n\n\tog-icon {\n\t\tflex: 0 20px;\n\t\ttext-align: center;\n\t}\n\n\t.drop {\n\t\tposition: absolute;\n\t\tline-height: 20px;\n\t\tinset: -1px;\n\t\tborder: 2px dotted var(--og-accent-color);\n\t\tpadding: 0 5px;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t}\n\n\t.drop.dropping {\n\t\tbackground-color: var(--og-accent-color);\n\t\tborder-color: var(--og-text-color-2);\n\t\tcolor: var(--og-text-color-2);\n\t}\n\n\t.name {\n\t\tflex: 1;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tpadding-right: 5px;\n\t\tcolor: var(--og-text-color-3);\n\t}\n\n\t#cross {\n\t\tflex: 0;\n\t\tmax-width: 14px;\n\t\tmin-width: 14px;\n\t\tborder: none;\n\t}\n\t\n`;\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { OmegaComponent } from "../model";
|
|
2
|
+
export declare class FloatingWindow extends OmegaComponent {
|
|
3
|
+
static styles: import("lit").CSSResult;
|
|
4
|
+
noAutoHide: boolean;
|
|
5
|
+
hideKey: string;
|
|
6
|
+
constructor();
|
|
7
|
+
connectedCallback(): void;
|
|
8
|
+
disconnectedCallback(): void;
|
|
9
|
+
firstUpdated(): void;
|
|
10
|
+
updated(): Promise<void>;
|
|
11
|
+
render: () => import("lit-html").TemplateResult<1>;
|
|
12
|
+
_onDcoumentMouseDown: () => void;
|
|
13
|
+
_onKeyDown: (e: KeyboardEvent) => void;
|
|
14
|
+
registerHideEvents(): void;
|
|
15
|
+
unregisterHideEvents(): void;
|
|
16
|
+
show(dispatchEvent?: boolean): void;
|
|
17
|
+
hide(dispatchEvent?: boolean): void;
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=floatingWindow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"floatingWindow.d.ts","sourceRoot":"","sources":["../../src/ui/floatingWindow.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1C,qBACa,cAAe,SAAQ,cAAc;IAEjD,MAAM,CAAC,MAAM,0BAiBX;IAGF,UAAU,UAAS;IAGnB,OAAO,SAAY;;IAOnB,iBAAiB;IAIjB,oBAAoB;IAIpB,YAAY;IAIN,OAAO;IAIb,MAAM,6CAA4C;IAElD,oBAAoB,aAAyB;IAC7C,UAAU,GAAI,GAAG,aAAa,UAI7B;IAED,kBAAkB;IAOlB,oBAAoB;IAKpB,IAAI,CAAC,aAAa,UAAQ;IAM1B,IAAI,CAAC,aAAa,UAAQ;CAK1B"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import * as dom from "../common/dom";
|
|
8
|
+
import { html, css } from 'lit';
|
|
9
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
10
|
+
import { OmegaComponent } from "../model";
|
|
11
|
+
import constants from "../constants";
|
|
12
|
+
let FloatingWindow = class FloatingWindow extends OmegaComponent {
|
|
13
|
+
constructor() {
|
|
14
|
+
super();
|
|
15
|
+
this.noAutoHide = false;
|
|
16
|
+
this.hideKey = 'Escape';
|
|
17
|
+
this.render = () => html `<slot name="content"></slot>`;
|
|
18
|
+
this._onDcoumentMouseDown = () => this.hide(true);
|
|
19
|
+
this._onKeyDown = (e) => {
|
|
20
|
+
if (e.key === this.hideKey) {
|
|
21
|
+
this.hide(true);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
this.addEventListener('mousedown', (e) => e.stopPropagation());
|
|
25
|
+
}
|
|
26
|
+
connectedCallback() {
|
|
27
|
+
super.connectedCallback();
|
|
28
|
+
}
|
|
29
|
+
disconnectedCallback() {
|
|
30
|
+
super.disconnectedCallback();
|
|
31
|
+
}
|
|
32
|
+
firstUpdated() {
|
|
33
|
+
}
|
|
34
|
+
async updated() {
|
|
35
|
+
}
|
|
36
|
+
registerHideEvents() {
|
|
37
|
+
if (!this.noAutoHide) {
|
|
38
|
+
setTimeout(() => document.addEventListener('mousedown', this._onDcoumentMouseDown, { once: true }), 10);
|
|
39
|
+
}
|
|
40
|
+
this.addEventListener('keydown', this._onKeyDown, { once: true });
|
|
41
|
+
}
|
|
42
|
+
unregisterHideEvents() {
|
|
43
|
+
document.removeEventListener('mousedown', this._onDcoumentMouseDown);
|
|
44
|
+
this.removeEventListener('keydown', this._onKeyDown);
|
|
45
|
+
}
|
|
46
|
+
show(dispatchEvent = false) {
|
|
47
|
+
dom.showElement(this);
|
|
48
|
+
this.registerHideEvents();
|
|
49
|
+
if (dispatchEvent)
|
|
50
|
+
this.dispatchEvent(new CustomEvent('show'));
|
|
51
|
+
}
|
|
52
|
+
hide(dispatchEvent = false) {
|
|
53
|
+
dom.hideElement(this);
|
|
54
|
+
this.unregisterHideEvents();
|
|
55
|
+
if (dispatchEvent)
|
|
56
|
+
this.dispatchEvent(new CustomEvent('hide'));
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
FloatingWindow.styles = css `
|
|
60
|
+
* {
|
|
61
|
+
box-sizing: border-box;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
:host {
|
|
65
|
+
position: absolute;
|
|
66
|
+
display: block;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
box-shadow: inset 0px 4px 3px -2px var(--og-inset-shadow-color);
|
|
69
|
+
max-width: ${constants.FLOATING_WINDOW_MAX_WIDTH}px;
|
|
70
|
+
z-index: 50000;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
slot[name="content"] {
|
|
74
|
+
border: 2px solid red;
|
|
75
|
+
}
|
|
76
|
+
`;
|
|
77
|
+
__decorate([
|
|
78
|
+
property({ type: Boolean })
|
|
79
|
+
], FloatingWindow.prototype, "noAutoHide", void 0);
|
|
80
|
+
__decorate([
|
|
81
|
+
property({ type: String })
|
|
82
|
+
], FloatingWindow.prototype, "hideKey", void 0);
|
|
83
|
+
FloatingWindow = __decorate([
|
|
84
|
+
customElement('og-floating-window')
|
|
85
|
+
], FloatingWindow);
|
|
86
|
+
export { FloatingWindow };
|
|
87
|
+
//# sourceMappingURL=floatingWindow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"floatingWindow.js","sourceRoot":"","sources":["../../src/ui/floatingWindow.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,KAAK,GAAG,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,SAAS,MAAM,cAAc,CAAC;AAG9B,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,cAAc;IA2BjD;QACC,KAAK,EAAE,CAAC;QANT,eAAU,GAAG,KAAK,CAAC;QAGnB,YAAO,GAAG,QAAQ,CAAC;QAuBnB,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA,8BAA8B,CAAC;QAElD,yBAAoB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,eAAU,GAAG,CAAC,CAAgB,EAAE,EAAE;YACjC,IAAI,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;gBAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACjB,CAAC;QACF,CAAC,CAAA;QA1BA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC;IAC5E,CAAC;IAED,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,oBAAoB;QACnB,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,YAAY;IAEZ,CAAC;IAED,KAAK,CAAC,OAAO;IAEb,CAAC;IAWD,kBAAkB;QACjB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACtB,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,oBAAoB,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,EAAE,EAAE,CAAC,CAAC;QACvG,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;IACjE,CAAC;IAED,oBAAoB;QACnB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACrE,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACtD,CAAC;IAED,IAAI,CAAC,aAAa,GAAG,KAAK;QACzB,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACtB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,aAAa;YAAE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;IAChE,CAAC;IAED,IAAI,CAAC,aAAa,GAAG,KAAK;QACzB,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,aAAa;YAAE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;IAChE,CAAC;;AA7EM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;gBAUJ,SAAS,CAAC,yBAAyB;;;;;;;EAOjD,AAjBY,CAiBX;AAGF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;kDACP;AAGnB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;+CACN;AAzBP,cAAc;IAD1B,aAAa,CAAC,oBAAoB,CAAC;GACvB,cAAc,CAgF1B","sourcesContent":["import * as dom from \"../common/dom\";\nimport { html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { OmegaComponent } from \"../model\";\nimport constants from \"../constants\";\n\n@customElement('og-floating-window')\nexport class FloatingWindow extends OmegaComponent {\n\n\tstatic styles = css`\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t:host {\n\t\t\tposition: absolute;\n\t\t\tdisplay: block;\n\t\t\toverflow: hidden;\n\t\t\tbox-shadow: inset 0px 4px 3px -2px var(--og-inset-shadow-color);\n\t\t\tmax-width: ${constants.FLOATING_WINDOW_MAX_WIDTH}px;\n\t\t\tz-index: 50000;\n\t\t}\n\n\t\tslot[name=\"content\"] {\n\t\t\tborder: 2px solid red;\n\t\t}\n\t`;\n\n\t@property({type: Boolean})\n\tnoAutoHide = false;\n\t\n\t@property({type: String})\n\thideKey = 'Escape';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('mousedown', (e: MouseEvent) => e.stopPropagation());\n\t}\n\t\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t}\n\n\tfirstUpdated() {\n\t\t\n\t}\n\n\tasync updated() {\n\t\t\n\t}\n\n\trender = () => html`<slot name=\"content\"></slot>`;\n\n\t_onDcoumentMouseDown = () => this.hide(true);\n\t_onKeyDown = (e: KeyboardEvent) => {\n\t\tif (e.key === this.hideKey) {\n\t\t\tthis.hide(true);\n\t\t}\n\t}\n\n\tregisterHideEvents() {\n\t\tif (!this.noAutoHide) {\n\t\t\tsetTimeout(() => document.addEventListener('mousedown', this._onDcoumentMouseDown, {once: true}), 10);\n\t\t}\n\t\tthis.addEventListener('keydown', this._onKeyDown, {once: true});\n\t}\n\n\tunregisterHideEvents() {\n\t\tdocument.removeEventListener('mousedown', this._onDcoumentMouseDown);\n\t\tthis.removeEventListener('keydown', this._onKeyDown);\n\t}\n\n\tshow(dispatchEvent = false) {\n\t\tdom.showElement(this);\n\t\tthis.registerHideEvents();\n\t\tif (dispatchEvent) this.dispatchEvent(new CustomEvent('show'));\n\t}\n\n\thide(dispatchEvent = false) {\n\t\tdom.hideElement(this);\n\t\tthis.unregisterHideEvents();\n\t\tif (dispatchEvent) this.dispatchEvent(new CustomEvent('hide'));\n\t}\n}"]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { IconPrefix } from '@fortawesome/fontawesome-svg-core';
|
|
3
|
+
export type IconSpec = {
|
|
4
|
+
icon: string | [string, string];
|
|
5
|
+
color?: string;
|
|
6
|
+
statusIcon?: string | [string, string];
|
|
7
|
+
statusColor?: string;
|
|
8
|
+
size?: '' | 'lg' | 'xs' | 'sm' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | null;
|
|
9
|
+
rotation?: number;
|
|
10
|
+
fallback?: string;
|
|
11
|
+
};
|
|
12
|
+
export declare class Icon extends LitElement {
|
|
13
|
+
static defaultIconSet: string;
|
|
14
|
+
static defaultStatusIconSet: string;
|
|
15
|
+
static styles: import("lit").CSSResult[];
|
|
16
|
+
private _icon;
|
|
17
|
+
fixedWidth: boolean;
|
|
18
|
+
spin: boolean;
|
|
19
|
+
reverseSpin: boolean;
|
|
20
|
+
flip: boolean;
|
|
21
|
+
pulse: boolean;
|
|
22
|
+
spinPulse: boolean;
|
|
23
|
+
bounce: boolean;
|
|
24
|
+
shake: boolean;
|
|
25
|
+
beat: boolean;
|
|
26
|
+
fade: boolean;
|
|
27
|
+
beatFade: boolean;
|
|
28
|
+
pullLeft: boolean;
|
|
29
|
+
pullRight: boolean;
|
|
30
|
+
size: string;
|
|
31
|
+
color: string;
|
|
32
|
+
set icon(value: IconSpec | string);
|
|
33
|
+
get icon(): IconSpec | string;
|
|
34
|
+
get iconName(): string;
|
|
35
|
+
get prefix(): IconPrefix;
|
|
36
|
+
get iconSize(): string;
|
|
37
|
+
get iconColor(): string;
|
|
38
|
+
get fallback(): string;
|
|
39
|
+
get statusIconName(): string;
|
|
40
|
+
get statusIconPrefix(): string;
|
|
41
|
+
get statusIconColor(): string;
|
|
42
|
+
createMainIcon(): import("@fortawesome/fontawesome-svg-core").Icon;
|
|
43
|
+
createLayeredIcon(): import("@fortawesome/fontawesome-svg-core").Layer;
|
|
44
|
+
updated(): void;
|
|
45
|
+
}
|
|
46
|
+
//# sourceMappingURL=icon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/ui/icon.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAO,MAAM,KAAK,CAAC;AAGtC,OAAO,EAAiC,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAG9F,MAAM,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM,GAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,GAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,EAAE,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC;IAC7G,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB,CAAC;AAEF,qBACa,IAAK,SAAQ,UAAU;IAEnC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC;IAC9B,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC;IAKpC,MAAM,CAAC,MAAM,4BAuBV;IAEH,OAAO,CAAC,KAAK,CAAW;IAGxB,UAAU,UAAS;IAGnB,IAAI,UAAS;IAGb,WAAW,UAAS;IAGpB,IAAI,UAAS;IAGb,KAAK,UAAS;IAGd,SAAS,UAAS;IAGlB,MAAM,UAAS;IAGf,KAAK,UAAS;IAGd,IAAI,UAAS;IAGb,IAAI,UAAS;IAGb,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,SAAS,UAAS;IAGlB,IAAI,EAAE,MAAM,CAAC;IAGb,KAAK,EAAE,MAAM,CAAC;IAEd,IACI,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAC,MAAM,EAG9B;IACD,IAAI,IAAI,IAAI,QAAQ,GAAC,MAAM,CAAsB;IAEjD,IAAI,QAAQ,WAGX;IAED,IAAI,MAAM,IACsG,UAAU,CACzH;IAED,IAAI,QAAQ,WAEX;IAED,IAAI,SAAS,WAEZ;IAED,IAAI,QAAQ,WAEX;IAED,IAAI,cAAc,WAGjB;IAED,IAAI,gBAAgB,WAGnB;IAED,IAAI,eAAe,WAElB;IAED,cAAc;IAmBd,iBAAiB;IA6BjB,OAAO;CASP"}
|