@omegagrid/core 0.9.37 → 0.9.38
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/dom.d.ts +0 -3
- package/dist/common/dom.d.ts.map +1 -1
- package/dist/common/dom.js +0 -12
- package/dist/common/dom.js.map +1 -1
- package/dist/common/logger.d.ts +3 -5
- package/dist/common/logger.d.ts.map +1 -1
- package/dist/common/logger.js +10 -14
- package/dist/common/logger.js.map +1 -1
- package/dist/themes/definitions/tmDark.d.ts.map +1 -1
- package/dist/themes/definitions/tmDark.js +10 -11
- package/dist/themes/definitions/tmDark.js.map +1 -1
- package/dist/themes/definitions/tmLight.d.ts.map +1 -1
- package/dist/themes/definitions/tmLight.js +15 -16
- package/dist/themes/definitions/tmLight.js.map +1 -1
- package/dist/themes/helpers.d.ts.map +1 -1
- package/dist/themes/helpers.js +1 -3
- package/dist/themes/helpers.js.map +1 -1
- package/dist/themes/transformations.d.ts +1 -3
- package/dist/themes/transformations.d.ts.map +1 -1
- package/dist/themes/transformations.js +20 -36
- package/dist/themes/transformations.js.map +1 -1
- package/dist/types.d.ts +1 -11
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js.map +1 -1
- package/dist/ui/dropdown.d.ts +0 -5
- package/dist/ui/dropdown.d.ts.map +1 -1
- package/dist/ui/dropdown.js +10 -48
- package/dist/ui/dropdown.js.map +1 -1
- package/dist/ui/dropdownMenu.d.ts +1 -1
- package/dist/ui/dropdownMenu.d.ts.map +1 -1
- package/dist/ui/dropdownMenu.js +32 -26
- package/dist/ui/dropdownMenu.js.map +1 -1
- package/dist/ui/floatingWindow.d.ts +0 -3
- package/dist/ui/floatingWindow.d.ts.map +1 -1
- package/dist/ui/floatingWindow.js +7 -14
- package/dist/ui/floatingWindow.js.map +1 -1
- package/dist/ui/icon.d.ts +0 -2
- package/dist/ui/icon.d.ts.map +1 -1
- package/dist/ui/icon.js +1 -4
- package/dist/ui/icon.js.map +1 -1
- package/dist/ui/index.d.ts +0 -1
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +0 -1
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/list.d.ts +0 -1
- package/dist/ui/list.d.ts.map +1 -1
- package/dist/ui/list.js +16 -20
- package/dist/ui/list.js.map +1 -1
- package/dist/ui/menu.d.ts.map +1 -1
- package/dist/ui/menu.js +0 -1
- package/dist/ui/menu.js.map +1 -1
- package/dist/ui/slider.style.d.ts.map +1 -1
- package/dist/ui/slider.style.js +2 -5
- package/dist/ui/slider.style.js.map +1 -1
- package/dist/ui/splitContainer.d.ts +0 -1
- package/dist/ui/splitContainer.d.ts.map +1 -1
- package/dist/ui/splitContainer.js +4 -21
- package/dist/ui/splitContainer.js.map +1 -1
- package/dist/ui/splitContainer.style.d.ts.map +1 -1
- package/dist/ui/splitContainer.style.js +4 -11
- package/dist/ui/splitContainer.style.js.map +1 -1
- package/dist/ui/tooltip.d.ts +1 -1
- package/dist/ui/tooltip.d.ts.map +1 -1
- package/dist/ui/tooltip.js +1 -1
- package/dist/ui/tooltip.js.map +1 -1
- package/package.json +2 -2
- package/dist/ui/close.d.ts +0 -6
- package/dist/ui/close.d.ts.map +0 -1
- package/dist/ui/close.js +0 -33
- package/dist/ui/close.js.map +0 -1
package/dist/types.d.ts
CHANGED
|
@@ -10,12 +10,8 @@ export type Theme = {
|
|
|
10
10
|
accentColor?: string;
|
|
11
11
|
};
|
|
12
12
|
export type LocaleId = string;
|
|
13
|
-
export type LayoutOptions<TParent extends HTMLElement = HTMLElement> = {
|
|
14
|
-
parent?: TParent;
|
|
15
|
-
elements?: Map<string, HTMLElement>;
|
|
16
|
-
};
|
|
17
13
|
export interface Layout extends HTMLElement {
|
|
18
|
-
layout(
|
|
14
|
+
layout(): void;
|
|
19
15
|
}
|
|
20
16
|
export type ComponentState = {
|
|
21
17
|
name?: string;
|
|
@@ -64,12 +60,6 @@ export type Location = {
|
|
|
64
60
|
x: number;
|
|
65
61
|
y: number;
|
|
66
62
|
};
|
|
67
|
-
export type Position = {
|
|
68
|
-
r?: number;
|
|
69
|
-
b?: number;
|
|
70
|
-
l?: number;
|
|
71
|
-
t?: number;
|
|
72
|
-
};
|
|
73
63
|
export type Rect = {
|
|
74
64
|
x: number;
|
|
75
65
|
y: number;
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAEhC,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEjD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAC,MAAM,CAAC;AAEvC,MAAM,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,EAAE,eAAe,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B,MAAM,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
|
package/dist/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,uDAAuD;
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,uDAAuD;AAmDvD,MAAM,CAAN,IAAY,UAQX;AARD,WAAY,UAAU;IACrB,+BAAiB,CAAA;IACjB,yBAAW,CAAA;IACX,+BAAiB,CAAA;IACjB,6BAAe,CAAA;IACf,2BAAa,CAAA;IACb,2BAAa,CAAA;IACb,yCAA2B,CAAA;AAC5B,CAAC,EARW,UAAU,KAAV,UAAU,QAQrB","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport { TemplateResult } from \"lit-html\";\nimport { IconSpec } from \"./ui\";\n\nexport type ThemeDefinition = Record<string, string>;\nexport type ThemeVariables = Map<string, string>;\n\nexport type ThemeType = 'light'|'dark';\n\nexport type Theme = {\n\tname: string,\n\ttype: ThemeType,\n\tdefinition: ThemeDefinition,\n\taccentColor?: string,\n};\n\nexport type LocaleId = string;\n\nexport interface Layout extends HTMLElement {\n\tlayout() : void;\n}\n\nexport type ComponentState = {\n\tname?: string;\n\t[key: string]: unknown;\n}\n\nexport interface Statefull {\n\tget state(): ComponentState;\n\tset state(value: ComponentState);\n\tgetState(): ComponentState;\n\tsetState(state: ComponentState): void;\n}\n\n/**\n * General = 'g',\n * Text = 't',\n * Number = 'n',\n * Date = 'd',\n * DateTime = 'dt',\n * Time = 'tm',\n * Checkbox = 'b',\n * Select = 's',\n * MultiSelect = 'm',\n */\nexport type UIValueType = 'g'|'t'|'n'|'d'|'dt'|'tm'|'b'|'s'|'m';\n\nexport type UIValueFormat = string;\n\n\nexport enum ColorTypes {\n\tAccent = 'accent',\n\tRed = 'red',\n\tYellow = 'yellow',\n\tGreen = 'green',\n\tBlue = 'blue',\n\tGray = 'gray',\n\tTransparent = 'transparent',\n}\n\nexport type DecimalSeparator = '.'|',';\nexport type Orientation = 'vertical'|'horizontal';\nexport type Direction = 'up'|'right'|'down'|'left';\nexport type DiagonalDirection = 'ne'|'nw'|'se'|'sw';\nexport type VerticalPosition = 'top'|'bottom'|'center';\nexport type HorizontalPosition = 'left'|'right'|'center';\nexport type DirectionalPosition = VerticalPosition | HorizontalPosition;\nexport type Size = {w: number, h: number};\nexport type Location = {x: number, y: number};\nexport type Rect = {x: number, y: number, w: number, h: number};\n\nexport type AcordionItem = SplitContainerItem & {\n\ttitle?: string|HTMLElement|TemplateResult<1>,\n\ticon?: string|IconSpec\n}\n\nexport type SplitContainerItem = {\n\tid?: ComponentId,\n\tsize?: number|null, // width or height\n\tcollapsed?: boolean\n}\n\nexport type ComponentId = string|number;\n\nexport type ComponentFactory<T = HTMLElement> = (id?: ComponentId) => T|Promise<T>;\n\nexport interface ComponentContainer<T = HTMLElement> {\n\tcreateComponent: ComponentFactory<T>;\n}\n\nexport type Matrix<T = unknown> = T[][];\n\nexport type Scalar<T = unknown> = T;\n\nexport type DeepPartial<T> = {\n\t[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];\n};\n\nexport interface Populatable {\n\tpopulate(source: Record<PropertyKey, unknown>): void;\n\tgetSourceData(): Record<PropertyKey, unknown>;\n}\n\nexport interface IPrototype<T> { prototype: T }\n\nexport type ValueFormatter<T = unknown> = (value: T) => string;\n\nexport type CustomProperties = Record<string, unknown>;\n\nexport type User = {\n\tid: string,\n\tname?: string\n};\n\nexport type AnyFunction<A = any> = (...input: any[]) => A\nexport type AnyConstructor<A = object> = new (...input: any[]) => A\nexport type Mixin<T extends AnyFunction> = InstanceType<ReturnType<T>>\n\nexport interface Model<TSource = unknown> {\n\t\n\tpopulate(source: TSource): void;\n\tgetSourceData(): TSource;\n\n}\n\nexport type KeyValue = {\n\tkey: string,\n\tvalue?: string\n}\n"]}
|
package/dist/ui/dropdown.d.ts
CHANGED
|
@@ -6,7 +6,6 @@ export declare class DropdownEvent extends Event {
|
|
|
6
6
|
}
|
|
7
7
|
export declare class DropdownContainer extends LitElement {
|
|
8
8
|
static styles: import("lit").CSSResult;
|
|
9
|
-
color: ColorTypes;
|
|
10
9
|
constructor();
|
|
11
10
|
render: () => TemplateResult<1>;
|
|
12
11
|
}
|
|
@@ -15,7 +14,6 @@ export declare class Dropdown extends LitElement implements Layout {
|
|
|
15
14
|
alignment: 'left' | 'right';
|
|
16
15
|
positionOffset: number;
|
|
17
16
|
dropdownParent: HTMLElement;
|
|
18
|
-
animation: number;
|
|
19
17
|
label: string | HTMLElement | TemplateResult;
|
|
20
18
|
icon: IconSpec | string;
|
|
21
19
|
width: number;
|
|
@@ -28,7 +26,6 @@ export declare class Dropdown extends LitElement implements Layout {
|
|
|
28
26
|
get isOpen(): boolean;
|
|
29
27
|
connectedCallback(): void;
|
|
30
28
|
_onDocumentMouseDown: (e: MouseEvent) => void;
|
|
31
|
-
animateDropdown(seconds: number): void;
|
|
32
29
|
open(): Promise<void>;
|
|
33
30
|
close(): void;
|
|
34
31
|
toggle(): void;
|
|
@@ -38,9 +35,7 @@ export declare class Dropdown extends LitElement implements Layout {
|
|
|
38
35
|
renderLabel: () => import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html").UnsafeHTMLDirective>;
|
|
39
36
|
get hasLabelSlot(): boolean;
|
|
40
37
|
get hasLabel(): boolean;
|
|
41
|
-
updated(props: Map<string, unknown>): void;
|
|
42
38
|
render: () => TemplateResult<1>;
|
|
43
|
-
get useRadiusFix(): boolean;
|
|
44
39
|
layout(): void;
|
|
45
40
|
}
|
|
46
41
|
//# sourceMappingURL=dropdown.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/ui/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAK9C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAKlC,qBAAa,aAAc,SAAQ,KAAK;gBAE3B,KAAK,EAAE,MAAM;CAGzB;AAED,
|
|
1
|
+
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/ui/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAK9C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAKlC,qBAAa,aAAc,SAAQ,KAAK;gBAE3B,KAAK,EAAE,MAAM;CAGzB;AAED,qBACa,iBAAkB,SAAQ,UAAU;IAEhD,MAAM,CAAC,MAAM,0BAkBX;;IAOF,MAAM,0BAA6D;CACnE;AAED,qBAEa,QAAS,SAAQ,UAAW,YAAW,MAAM;IAEzD,MAAM,CAAC,MAAM,4BAmCV;IAGH,SAAS,EAAE,MAAM,GAAC,OAAO,CAAW;IAGpC,cAAc,SAAK;IAGnB,cAAc,EAAE,WAAW,CAAiB;IAG5C,KAAK,EAAE,MAAM,GAAC,WAAW,GAAC,cAAc,CAAC;IAGzC,IAAI,EAAE,QAAQ,GAAC,MAAM,CAAC;IAGtB,KAAK,EAAE,MAAM,CAAC;IAGd,KAAK,aAAqB;IAG1B,OAAO,UAAS;IAGhB,QAAQ,EAAE,cAAc,CAAC;IAEzB,OAAO,CAAC,WAAW,CAAc;IAEjC,SAAS,CAAC,WAAW,8DAAkC;IACvD,IAAI,QAAQ,sBAAqC;IAEjD,IAAI,MAAM,YAA2D;IAErE,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,GAAI,GAAG,UAAU,UAKpC;IAEK,IAAI;IAyBV,KAAK;IAML,MAAM;IAKN,YAAY,sBAA6B;IAEzC,oBAAoB;IAKpB,cAAc,0BAIZ;IAEF,WAAW,2HAMT;IAEF,IAAI,YAAY,YAEf;IAED,IAAI,QAAQ,YAEX;IAED,MAAM,0BAeJ;IAEF,MAAM;CAiBN"}
|
package/dist/ui/dropdown.js
CHANGED
|
@@ -22,13 +22,13 @@ export class DropdownEvent extends Event {
|
|
|
22
22
|
let DropdownContainer = class DropdownContainer extends LitElement {
|
|
23
23
|
constructor() {
|
|
24
24
|
super();
|
|
25
|
-
this.color = ColorTypes.Accent;
|
|
26
25
|
this.render = () => html `<div><slot name="inner-content"></slot></div>`;
|
|
27
26
|
this.addEventListener('mousedown', (e) => e.stopPropagation());
|
|
28
27
|
}
|
|
29
28
|
};
|
|
30
29
|
DropdownContainer.styles = css `
|
|
31
30
|
:host {
|
|
31
|
+
border: 1px solid var(--og-accent-color);
|
|
32
32
|
background-color: var(--og-background-color);
|
|
33
33
|
position: absolute;
|
|
34
34
|
overflow: hidden;
|
|
@@ -38,7 +38,6 @@ DropdownContainer.styles = css `
|
|
|
38
38
|
font-size: var(--og-font-size);
|
|
39
39
|
font-family: var(--og-font-family);
|
|
40
40
|
border-radius: var(--og-base-radius);
|
|
41
|
-
box-shadow: var(--og-base-shadow);
|
|
42
41
|
}
|
|
43
42
|
|
|
44
43
|
:host(.radiusfix) {
|
|
@@ -46,12 +45,8 @@ DropdownContainer.styles = css `
|
|
|
46
45
|
border-top-right-radius: 0;
|
|
47
46
|
}
|
|
48
47
|
`;
|
|
49
|
-
__decorate([
|
|
50
|
-
property({ type: String, reflect: true })
|
|
51
|
-
], DropdownContainer.prototype, "color", void 0);
|
|
52
48
|
DropdownContainer = __decorate([
|
|
53
|
-
customElement('og-dropdown-container')
|
|
54
|
-
colorable({ props: ['border'] })
|
|
49
|
+
customElement('og-dropdown-container')
|
|
55
50
|
], DropdownContainer);
|
|
56
51
|
export { DropdownContainer };
|
|
57
52
|
let Dropdown = class Dropdown extends LitElement {
|
|
@@ -60,7 +55,6 @@ let Dropdown = class Dropdown extends LitElement {
|
|
|
60
55
|
this.alignment = 'right';
|
|
61
56
|
this.positionOffset = 0;
|
|
62
57
|
this.dropdownParent = document.body;
|
|
63
|
-
this.animation = 0.1;
|
|
64
58
|
this.color = ColorTypes.Accent;
|
|
65
59
|
this.noCaret = false;
|
|
66
60
|
this.dropdownRef = createRef();
|
|
@@ -108,16 +102,6 @@ let Dropdown = class Dropdown extends LitElement {
|
|
|
108
102
|
super.connectedCallback();
|
|
109
103
|
this.tabIndex = 0;
|
|
110
104
|
}
|
|
111
|
-
animateDropdown(seconds) {
|
|
112
|
-
const height = this.dropdown.offsetHeight;
|
|
113
|
-
dom.setSize(this.dropdown, { h: 0 });
|
|
114
|
-
this.dropdown.style.transition = `height ${seconds}s ease-in-out`;
|
|
115
|
-
setTimeout(() => dom.setSize(this.dropdown, { h: height }), 0);
|
|
116
|
-
setTimeout(() => {
|
|
117
|
-
this.dropdown.style.height = 'auto';
|
|
118
|
-
this.dropdown.style.transition = '';
|
|
119
|
-
}, seconds * 1000);
|
|
120
|
-
}
|
|
121
105
|
async open() {
|
|
122
106
|
this.dispatchEvent(new DropdownEvent('beforeOpen'));
|
|
123
107
|
await this.updateComplete;
|
|
@@ -138,8 +122,6 @@ let Dropdown = class Dropdown extends LitElement {
|
|
|
138
122
|
await this.dropdown.updateComplete;
|
|
139
123
|
this.dispatchEvent(new DropdownEvent('open'));
|
|
140
124
|
this.layout();
|
|
141
|
-
if (this.animation > 0)
|
|
142
|
-
this.animateDropdown(this.animation);
|
|
143
125
|
document.body.addEventListener('mousedown', this._onDocumentMouseDown);
|
|
144
126
|
}
|
|
145
127
|
close() {
|
|
@@ -164,38 +146,21 @@ let Dropdown = class Dropdown extends LitElement {
|
|
|
164
146
|
get hasLabel() {
|
|
165
147
|
return this.label !== '' && this.label != null;
|
|
166
148
|
}
|
|
167
|
-
updated(props) {
|
|
168
|
-
super.updated(props);
|
|
169
|
-
if (this.dropdown)
|
|
170
|
-
this.dropdown.color = this.color == ColorTypes.Transparent ? ColorTypes.Accent : this.color;
|
|
171
|
-
}
|
|
172
|
-
get useRadiusFix() {
|
|
173
|
-
return this.isOpen && this.color != ColorTypes.Transparent;
|
|
174
|
-
}
|
|
175
149
|
layout() {
|
|
176
|
-
this.classList.toggle('radiusfix', this.
|
|
150
|
+
this.classList.toggle('radiusfix', this.isOpen);
|
|
177
151
|
if (!this.dropdown)
|
|
178
152
|
return;
|
|
179
|
-
this.dropdown.classList.toggle('radiusfix', this.
|
|
153
|
+
this.dropdown.classList.toggle('radiusfix', this.isOpen);
|
|
180
154
|
if (!this.isOpen)
|
|
181
155
|
return;
|
|
182
156
|
const offset = dom.getElementOffset(this, this.dropdownParent);
|
|
183
157
|
dom.setSize(this.dropdown, { w: this.offsetWidth }, true);
|
|
184
|
-
|
|
185
|
-
this.
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
dom.fixElementPosition(this.dropdown);
|
|
191
|
-
}
|
|
192
|
-
else {
|
|
193
|
-
this.dropdown.style.left = 'auto';
|
|
194
|
-
dom.setPosition(this.dropdown, {
|
|
195
|
-
t: offset.top + this.offsetHeight - 1,
|
|
196
|
-
r: this.dropdownParent.clientWidth - this.positionOffset - offset.left - this.offsetWidth
|
|
197
|
-
});
|
|
198
|
-
}
|
|
158
|
+
dom.setPosition(this.dropdown, {
|
|
159
|
+
t: offset.top + this.offsetHeight - 1,
|
|
160
|
+
l: this.positionOffset + (this.alignment == 'left'
|
|
161
|
+
? offset.left : (offset.left + this.offsetWidth - this.dropdown.offsetWidth))
|
|
162
|
+
});
|
|
163
|
+
dom.fixElementPosition(this.dropdown);
|
|
199
164
|
}
|
|
200
165
|
};
|
|
201
166
|
Dropdown.styles = [css `
|
|
@@ -243,9 +208,6 @@ __decorate([
|
|
|
243
208
|
__decorate([
|
|
244
209
|
property({ type: Object })
|
|
245
210
|
], Dropdown.prototype, "dropdownParent", void 0);
|
|
246
|
-
__decorate([
|
|
247
|
-
property({ type: Number })
|
|
248
|
-
], Dropdown.prototype, "animation", void 0);
|
|
249
211
|
__decorate([
|
|
250
212
|
property()
|
|
251
213
|
], Dropdown.prototype, "label", void 0);
|
package/dist/ui/dropdown.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/ui/dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ColorTypes, Layout } from '../types';\nimport * as dom from '../common/dom';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { createRef, ref } from 'lit-html/directives/ref.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { IconSpec } from './icon';\nimport { utils } from '../common';\nimport { colorable } from '../themes';\nimport constants from '../constants';\n\nexport class DropdownEvent extends Event {\n\n\tconstructor(event: string) {\n\t\tsuper(`dropdown.${event}`);\n\t}\n}\n\n@customElement('og-dropdown-container')\n@colorable({props: ['border']})\nexport class DropdownContainer extends LitElement {\n\n\tstatic styles = css`\n\t\t:host {\n\t\t\tbackground-color: var(--og-background-color);\n\t\t\tposition: absolute;\n\t\t\toverflow: hidden;\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--og-text-color);\n\t\t\tz-index: 60000;\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tfont-family: var(--og-font-family);\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t\tbox-shadow: var(--og-base-shadow);\n\t\t}\n\n\t\t:host(.radiusfix) {\n\t\t\tborder-top-left-radius: 0;\n\t\t\tborder-top-right-radius: 0;\n\t\t}\n\t`;\n\n\t@property({type: String, reflect: true})\n\tcolor = ColorTypes.Accent;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('mousedown', (e: MouseEvent) => e.stopPropagation());\n\t}\n\n\trender = () => html`<div><slot name=\"inner-content\"></slot></div>`;\n}\n\n@customElement('og-dropdown')\n@colorable({props: ['border']})\nexport class Dropdown extends LitElement implements Layout {\n\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tbox-sizing: border-box;\n\t\t\tdisplay: flex;\n\t\t\talign-items: stretch;\n\t\t\tflex-direction: row;\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tfont-family: var(--og-font-family);\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n\t\t\toutline: none;\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t\theight: ${constants.BUTTON_HEIGHT}px;\n\t\t}\n\n\t\t:host(.radiusfix) {\n\t\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t}\n\n\t\tdiv.text {\n\t\t\tflex: 1;\n\t\t\tcolor: var(--og-text-color-1);\n\t\t\tpadding-left: 2px;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\tog-button {\n\t\t\tflex: 1;\n\t\t\tborder-radius: 0;\n\t\t\tborder: none;\n\t\t\theight: 100%;\n\t\t}\n\t`];\n\n\t@property({type: String})\n\talignment: 'left'|'right' = 'right';\n\n\t@property({type: Number})\n\tpositionOffset = 0;\n\n\t@property({type: Object})\n\tdropdownParent: HTMLElement = document.body;\n\n\t@property({type: Number})\n\tanimation = 0.1;\n\n\t@property()\n\tlabel: string|HTMLElement|TemplateResult;\n\n\t@property()\n\ticon: IconSpec|string;\n\n\t@property({type: Number})\n\twidth: number;\n\n\t@property({type: String, reflect: true})\n\tcolor = ColorTypes.Accent;\n\n\t@property({type: Boolean})\n\tnoCaret = false;\n\n\t@query('.label')\n\tlabelElm: HTMLDivElement;\n\n\tprivate _contentElm: HTMLElement;\n\n\tprotected dropdownRef = createRef<DropdownContainer>();\n\tget dropdown() { return this.dropdownRef?.value }\n\n\tget isOpen() { return this.dropdown && !dom.isHidden(this.dropdown) }\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis.tabIndex = 0;\n\t}\n\n\t_onDocumentMouseDown = (e: MouseEvent) => {\n\t\tfor (const elm of e.composedPath()) {\n\t\t\tif (elm == this.dropdown || elm == this) return;\n\t\t}\n\t\tthis.close();\n\t}\n\n\tanimateDropdown(seconds: number) {\n\t\tconst height = this.dropdown.offsetHeight;\n\t\tdom.setSize(this.dropdown, {h: 0});\n\t\tthis.dropdown.style.transition = `height ${seconds}s ease-in-out`;\n\t\tsetTimeout(() => dom.setSize(this.dropdown, {h: height}), 0);\n\t\tsetTimeout(() => {\n\t\t\tthis.dropdown.style.height = 'auto';\n\t\t\tthis.dropdown.style.transition = '';\n\t\t}, seconds * 1000);\n\t}\n\n\tasync open() {\n\t\tthis.dispatchEvent(new DropdownEvent('beforeOpen'));\n\t\tawait this.updateComplete;\n\t\t\n\t\tif (this.dropdown.parentElement !== this.dropdownParent) {\n\t\t\tthis.dropdownParent.appendChild(this.dropdown);\n\t\t}\n\n\t\tif (this.children.length > 0 && !this._contentElm) {\n\t\t\tthis._contentElm = [...this.children].find(elm => elm.slot == 'content') as HTMLElement;\n\t\t\tif (this._contentElm) {\n\t\t\t\tthis._contentElm.slot = 'inner-content';\n\t\t\t\tthis.dropdown.appendChild(this._contentElm);\n\t\t\t}\n\t\t}\n\n\t\tif (this.width > 0) dom.setSize(this.dropdown, {w: this.width});\n\t\tdom.showElement(this.dropdown);\n\t\tthis.requestUpdate();\n\t\tawait this.dropdown.updateComplete;\n\t\tthis.dispatchEvent(new DropdownEvent('open'));\n\t\tthis.layout();\n\n\t\tif (this.animation > 0) this.animateDropdown(this.animation);\n\n\t\tdocument.body.addEventListener('mousedown', this._onDocumentMouseDown);\n\t}\n\n\tclose() {\n\t\tif (this.dropdown) dom.hideElement(this.dropdown);\n\t\tthis.layout();\n\t\tdocument.body.removeEventListener('mousedown', this._onDocumentMouseDown);\n\t}\n\n\ttoggle() {\n\t\tif (this.isOpen) this.close();\n\t\telse this.open();\n\t}\n\n\t_onMousedown = async () => this.toggle();\n\n\tdisconnectedCallback() {\n\t\tthis.dropdown?.remove();\n\t\tsuper.disconnectedCallback();\n\t}\n\n\trenderDropdown = () => html`\n\t\t<og-dropdown-container ${ref(this.dropdownRef)}\n\t\t\tstyle=\"display: none\">\n\t\t</og-dropdown-container>\n\t`;\n\n\trenderLabel = () => {\n\t\tif (utils.isString(this.label)) {\n\t\t\treturn this.label === '' ? unsafeHTML(' ') : html`<div class=\"text\">${this.label}</div>`;\n\t\t} else {\n\t\t\treturn this.label;\n\t\t}\n\t};\n\n\tget hasLabelSlot() {\n\t\treturn this.querySelector('[slot=\"label\"]') != null;\n\t}\n\n\tget hasLabel() {\n\t\treturn this.label !== '' && this.label != null;\n\t}\n\n\tupdated(props: Map<string, unknown>) {\n\t\tsuper.updated(props);\n\t\tif (this.dropdown) this.dropdown.color = this.color == ColorTypes.Transparent ? ColorTypes.Accent : this.color;\n\t}\n\n\trender = () => html`\n\t\t<og-button\n\t\t\t@mousedown=\"${this._onMousedown}\"\n\t\t\tclass=\"main\"\n\t\t\tcolor=\"${this.color}\"\n\t\t\t.icon=\"${this.icon}\"\n\t\t\t?caret=\"${!this.noCaret}\">\n\t\t\t${this.hasLabelSlot ? html`\n\t\t\t\t<div class=\"label\" slot=\"content\"><slot name=\"label\"></slot></div>\n\t\t\t` : guard([this.label], () => (this.hasLabel ? html`\n\t\t\t\t<div class=\"label\" slot=\"content\">${this.renderLabel()}</div>\n\t\t\t` : ''))}\n\t\t</og-button>\n\n\t\t${this.renderDropdown()}\n\t`;\n\n\tget useRadiusFix() {\n\t\treturn this.isOpen && this.color != ColorTypes.Transparent;\n\t}\n\n\tlayout() {\n\t\tthis.classList.toggle('radiusfix', this.useRadiusFix);\n\t\tif (!this.dropdown) return;\n\t\tthis.dropdown.classList.toggle('radiusfix', this.useRadiusFix);\n\t\tif (!this.isOpen) return;\n\n\t\tconst offset = dom.getElementOffset(this, this.dropdownParent);\n\t\tdom.setSize(this.dropdown, {w: this.offsetWidth}, true);\n\n\t\tif (this.alignment == 'left') {\n\t\t\tthis.dropdown.style.right = 'auto';\n\t\t\tdom.setPosition(this.dropdown, {\n\t\t\t\tt: offset.top + this.offsetHeight - 1, \n\t\t\t\tl: this.positionOffset + offset.left\n\t\t\t});\n\t\t\tdom.fixElementPosition(this.dropdown);\n\t\t} else {\n\t\t\tthis.dropdown.style.left = 'auto';\n\t\t\tdom.setPosition(this.dropdown, {\n\t\t\t\tt: offset.top + this.offsetHeight - 1, \n\t\t\t\tr: this.dropdownParent.clientWidth - this.positionOffset - offset.left - this.offsetWidth\n\t\t\t});\n\t\t}\n\n\t}\n\n}"]}
|
|
1
|
+
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/ui/dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ColorTypes, Layout } from '../types';\nimport * as dom from '../common/dom';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { createRef, ref } from 'lit-html/directives/ref.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { IconSpec } from './icon';\nimport { utils } from '../common';\nimport { colorable } from '../themes';\nimport constants from '../constants';\n\nexport class DropdownEvent extends Event {\n\n\tconstructor(event: string) {\n\t\tsuper(`dropdown.${event}`);\n\t}\n}\n\n@customElement('og-dropdown-container')\nexport class DropdownContainer extends LitElement {\n\n\tstatic styles = css`\n\t\t:host {\n\t\t\tborder: 1px solid var(--og-accent-color);\n\t\t\tbackground-color: var(--og-background-color);\n\t\t\tposition: absolute;\n\t\t\toverflow: hidden;\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--og-text-color);\n\t\t\tz-index: 60000;\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tfont-family: var(--og-font-family);\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t}\n\n\t\t:host(.radiusfix) {\n\t\t\tborder-top-left-radius: 0;\n\t\t\tborder-top-right-radius: 0;\n\t\t}\n\t`;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('mousedown', (e: MouseEvent) => e.stopPropagation());\n\t}\n\n\trender = () => html`<div><slot name=\"inner-content\"></slot></div>`;\n}\n\n@customElement('og-dropdown')\n@colorable({props: ['border']})\nexport class Dropdown extends LitElement implements Layout {\n\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tbox-sizing: border-box;\n\t\t\tdisplay: flex;\n\t\t\talign-items: stretch;\n\t\t\tflex-direction: row;\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tfont-family: var(--og-font-family);\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n\t\t\toutline: none;\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t\theight: ${constants.BUTTON_HEIGHT}px;\n\t\t}\n\n\t\t:host(.radiusfix) {\n\t\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t}\n\n\t\tdiv.text {\n\t\t\tflex: 1;\n\t\t\tcolor: var(--og-text-color-1);\n\t\t\tpadding-left: 2px;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\tog-button {\n\t\t\tflex: 1;\n\t\t\tborder-radius: 0;\n\t\t\tborder: none;\n\t\t\theight: 100%;\n\t\t}\n\t`];\n\n\t@property({type: String})\n\talignment: 'left'|'right' = 'right';\n\n\t@property({type: Number})\n\tpositionOffset = 0;\n\n\t@property({type: Object})\n\tdropdownParent: HTMLElement = document.body;\n\n\t@property()\n\tlabel: string|HTMLElement|TemplateResult;\n\n\t@property()\n\ticon: IconSpec|string;\n\n\t@property({type: Number})\n\twidth: number;\n\n\t@property({type: String, reflect: true})\n\tcolor = ColorTypes.Accent;\n\n\t@property({type: Boolean})\n\tnoCaret = false;\n\n\t@query('.label')\n\tlabelElm: HTMLDivElement;\n\n\tprivate _contentElm: HTMLElement;\n\n\tprotected dropdownRef = createRef<DropdownContainer>();\n\tget dropdown() { return this.dropdownRef?.value }\n\n\tget isOpen() { return this.dropdown && !dom.isHidden(this.dropdown) }\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis.tabIndex = 0;\n\t}\n\n\t_onDocumentMouseDown = (e: MouseEvent) => {\n\t\tfor (const elm of e.composedPath()) {\n\t\t\tif (elm == this.dropdown || elm == this) return;\n\t\t}\n\t\tthis.close();\n\t}\n\n\tasync open() {\n\t\tthis.dispatchEvent(new DropdownEvent('beforeOpen'));\n\t\tawait this.updateComplete;\n\t\t\n\t\tif (this.dropdown.parentElement !== this.dropdownParent) {\n\t\t\tthis.dropdownParent.appendChild(this.dropdown);\n\t\t}\n\n\t\tif (this.children.length > 0 && !this._contentElm) {\n\t\t\tthis._contentElm = [...this.children].find(elm => elm.slot == 'content') as HTMLElement;\n\t\t\tif (this._contentElm) {\n\t\t\t\tthis._contentElm.slot = 'inner-content';\n\t\t\t\tthis.dropdown.appendChild(this._contentElm);\n\t\t\t}\n\t\t}\n\n\t\tif (this.width > 0) dom.setSize(this.dropdown, {w: this.width});\n\t\tdom.showElement(this.dropdown);\n\t\tthis.requestUpdate();\n\t\tawait this.dropdown.updateComplete;\n\t\tthis.dispatchEvent(new DropdownEvent('open'));\n\t\tthis.layout();\n\t\tdocument.body.addEventListener('mousedown', this._onDocumentMouseDown);\n\t}\n\n\tclose() {\n\t\tif (this.dropdown) dom.hideElement(this.dropdown);\n\t\tthis.layout();\n\t\tdocument.body.removeEventListener('mousedown', this._onDocumentMouseDown);\n\t}\n\n\ttoggle() {\n\t\tif (this.isOpen) this.close();\n\t\telse this.open();\n\t}\n\n\t_onMousedown = async () => this.toggle();\n\n\tdisconnectedCallback() {\n\t\tthis.dropdown?.remove();\n\t\tsuper.disconnectedCallback();\n\t}\n\n\trenderDropdown = () => html`\n\t\t<og-dropdown-container ${ref(this.dropdownRef)}\n\t\t\tstyle=\"display: none\">\n\t\t</og-dropdown-container>\n\t`;\n\n\trenderLabel = () => {\n\t\tif (utils.isString(this.label)) {\n\t\t\treturn this.label === '' ? unsafeHTML(' ') : html`<div class=\"text\">${this.label}</div>`;\n\t\t} else {\n\t\t\treturn this.label;\n\t\t}\n\t};\n\n\tget hasLabelSlot() {\n\t\treturn this.querySelector('[slot=\"label\"]') != null;\n\t}\n\n\tget hasLabel() {\n\t\treturn this.label !== '' && this.label != null;\n\t}\n\n\trender = () => html`\n\t\t<og-button\n\t\t\t@mousedown=\"${this._onMousedown}\"\n\t\t\tclass=\"main\"\n\t\t\tcolor=\"${this.color}\"\n\t\t\t.icon=\"${this.icon}\"\n\t\t\t?caret=\"${!this.noCaret}\">\n\t\t\t${this.hasLabelSlot ? html`\n\t\t\t\t<div class=\"label\" slot=\"content\"><slot name=\"label\"></slot></div>\n\t\t\t` : guard([this.label], () => (this.hasLabel ? html`\n\t\t\t\t<div class=\"label\" slot=\"content\">${this.renderLabel()}</div>\n\t\t\t` : ''))}\n\t\t</og-button>\n\n\t\t${this.renderDropdown()}\n\t`;\n\n\tlayout() {\n\t\tthis.classList.toggle('radiusfix', this.isOpen);\n\t\tif (!this.dropdown) return;\n\t\tthis.dropdown.classList.toggle('radiusfix', this.isOpen);\n\t\tif (!this.isOpen) return;\n\n\t\tconst offset = dom.getElementOffset(this, this.dropdownParent);\n\t\tdom.setSize(this.dropdown, {w: this.offsetWidth}, true);\n\t\tdom.setPosition(this.dropdown, {\n\t\t\tt: offset.top + this.offsetHeight - 1, \n\t\t\tl: this.positionOffset + (this.alignment == 'left' \n\t\t\t\t? offset.left : (offset.left + this.offsetWidth - this.dropdown.offsetWidth ))\n\t\t});\n\n\t\tdom.fixElementPosition(this.dropdown);\n\t}\n\n}"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { Dropdown } from './dropdown';
|
|
2
2
|
import { Menu, MenuItem } from './menu';
|
|
3
3
|
export declare class DropdownMenu extends Dropdown {
|
|
4
|
+
#private;
|
|
4
5
|
items: MenuItem[];
|
|
5
6
|
dynamicWidth: boolean;
|
|
6
|
-
private _menu;
|
|
7
7
|
get menu(): Menu;
|
|
8
8
|
constructor();
|
|
9
9
|
updated(props: Map<string, unknown>): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdownMenu.d.ts","sourceRoot":"","sources":["../../src/ui/dropdownMenu.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAa,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,qBACa,YAAa,SAAQ,QAAQ
|
|
1
|
+
{"version":3,"file":"dropdownMenu.d.ts","sourceRoot":"","sources":["../../src/ui/dropdownMenu.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAa,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,qBACa,YAAa,SAAQ,QAAQ;;IAGzC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAGlB,YAAY,UAAS;IAIrB,IAAI,IAAI,SAeP;;IAQD,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;CAQnC"}
|
package/dist/ui/dropdownMenu.js
CHANGED
|
@@ -4,50 +4,56 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
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
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
+
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
9
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
10
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
|
+
};
|
|
12
|
+
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
13
|
+
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
14
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
15
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
16
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
17
|
+
};
|
|
18
|
+
var _DropdownMenu_menu;
|
|
7
19
|
import { dom } from '../common';
|
|
8
20
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
21
|
import { Dropdown } from './dropdown';
|
|
10
22
|
import { MenuEvent } from './menu';
|
|
11
23
|
let DropdownMenu = class DropdownMenu extends Dropdown {
|
|
12
24
|
get menu() {
|
|
13
|
-
if (this
|
|
14
|
-
return this
|
|
15
|
-
this
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
['render', () => this.layout()],
|
|
25
|
-
['menu.select', (e) => {
|
|
26
|
-
this.close();
|
|
27
|
-
this.dispatchEvent(new MenuEvent('select', e.item));
|
|
28
|
-
}]
|
|
29
|
-
]
|
|
25
|
+
if (__classPrivateFieldGet(this, _DropdownMenu_menu, "f"))
|
|
26
|
+
return __classPrivateFieldGet(this, _DropdownMenu_menu, "f");
|
|
27
|
+
__classPrivateFieldSet(this, _DropdownMenu_menu, dom.createElement('og-menu'), "f");
|
|
28
|
+
__classPrivateFieldGet(this, _DropdownMenu_menu, "f").slot = 'inner-content';
|
|
29
|
+
__classPrivateFieldGet(this, _DropdownMenu_menu, "f").style.border = 'none';
|
|
30
|
+
__classPrivateFieldGet(this, _DropdownMenu_menu, "f").style.minWidth = '100%';
|
|
31
|
+
__classPrivateFieldGet(this, _DropdownMenu_menu, "f").dynamicWidth = this.dynamicWidth;
|
|
32
|
+
__classPrivateFieldGet(this, _DropdownMenu_menu, "f").items = this.items;
|
|
33
|
+
__classPrivateFieldGet(this, _DropdownMenu_menu, "f").addEventListener('menu.select', (e) => {
|
|
34
|
+
this.close();
|
|
35
|
+
this.dispatchEvent(new MenuEvent('select', e.item));
|
|
30
36
|
});
|
|
31
|
-
this.
|
|
32
|
-
|
|
37
|
+
__classPrivateFieldGet(this, _DropdownMenu_menu, "f").addEventListener('render', () => this.layout());
|
|
38
|
+
this.dropdown.appendChild(__classPrivateFieldGet(this, _DropdownMenu_menu, "f"));
|
|
39
|
+
return __classPrivateFieldGet(this, _DropdownMenu_menu, "f");
|
|
33
40
|
}
|
|
34
41
|
constructor() {
|
|
35
42
|
super();
|
|
36
43
|
this.dynamicWidth = false;
|
|
44
|
+
_DropdownMenu_menu.set(this, void 0);
|
|
37
45
|
this.addEventListener('dropdown.beforeOpen', () => this.menu);
|
|
38
|
-
this.addEventListener('dropdown.open', () =>
|
|
39
|
-
this.menu.focus();
|
|
40
|
-
setTimeout(() => this.layout(), 0);
|
|
41
|
-
});
|
|
46
|
+
this.addEventListener('dropdown.open', () => this.menu.focus());
|
|
42
47
|
}
|
|
43
48
|
updated(props) {
|
|
44
49
|
super.updated(props);
|
|
45
|
-
if (this
|
|
46
|
-
this.
|
|
47
|
-
this.
|
|
50
|
+
if (__classPrivateFieldGet(this, _DropdownMenu_menu, "f")) {
|
|
51
|
+
__classPrivateFieldGet(this, _DropdownMenu_menu, "f").dynamicWidth = this.dynamicWidth;
|
|
52
|
+
__classPrivateFieldGet(this, _DropdownMenu_menu, "f").items = this.items;
|
|
48
53
|
}
|
|
49
54
|
}
|
|
50
55
|
};
|
|
56
|
+
_DropdownMenu_menu = new WeakMap();
|
|
51
57
|
__decorate([
|
|
52
58
|
property({ type: Array })
|
|
53
59
|
], DropdownMenu.prototype, "items", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdownMenu.js","sourceRoot":"","sources":["../../src/ui/dropdownMenu.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dropdownMenu.js","sourceRoot":"","sources":["../../src/ui/dropdownMenu.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAQ,SAAS,EAAY,MAAM,QAAQ,CAAC;AAG5C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,QAAQ;IAUzC,IAAI,IAAI;QACP,IAAI,uBAAA,IAAI,0BAAM;YAAE,OAAO,uBAAA,IAAI,0BAAM,CAAC;QAClC,uBAAA,IAAI,sBAAS,GAAG,CAAC,aAAa,CAAO,SAAS,CAAC,MAAA,CAAC;QAChD,uBAAA,IAAI,0BAAM,CAAC,IAAI,GAAG,eAAe,CAAC;QAClC,uBAAA,IAAI,0BAAM,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QACjC,uBAAA,IAAI,0BAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;QACnC,uBAAA,IAAI,0BAAM,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QAC5C,uBAAA,IAAI,0BAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAC9B,uBAAA,IAAI,0BAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,CAAC,CAAY,EAAE,EAAE;YAC3D,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,IAAI,CAAC,aAAa,CAAC,IAAI,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;QACH,uBAAA,IAAI,0BAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC3D,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,uBAAA,IAAI,0BAAM,CAAC,CAAC;QACtC,OAAO,uBAAA,IAAI,0BAAM,CAAC;IACnB,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QAtBT,iBAAY,GAAG,KAAK,CAAC;QAErB,qCAAY;QAqBX,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAE,CAAC;QAC/D,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACjE,CAAC;IAED,OAAO,CAAC,KAA2B;QAClC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,uBAAA,IAAI,0BAAM,EAAE,CAAC;YAChB,uBAAA,IAAI,0BAAM,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;YAC5C,uBAAA,IAAI,0BAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/B,CAAC;IACF,CAAC;CAED,CAAA;;AAtCA;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;2CACN;AAGlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;kDACL;AANT,YAAY;IADxB,aAAa,CAAC,kBAAkB,CAAC;GACrB,YAAY,CAyCxB","sourcesContent":["import { dom } from '../common';\nimport { customElement, property } from 'lit/decorators.js';\nimport { Dropdown } from './dropdown';\nimport { Menu, MenuEvent, MenuItem } from './menu';\n\n@customElement(`og-dropdown-menu`)\nexport class DropdownMenu extends Dropdown {\n\n\t@property({type: Array})\n\titems: MenuItem[];\n\n\t@property({type: Boolean})\n\tdynamicWidth = false;\n\n\t#menu: Menu;\n\n\tget menu() {\n\t\tif (this.#menu) return this.#menu;\n\t\tthis.#menu = dom.createElement<Menu>('og-menu');\n\t\tthis.#menu.slot = 'inner-content';\n\t\tthis.#menu.style.border = 'none';\n\t\tthis.#menu.style.minWidth = '100%';\n\t\tthis.#menu.dynamicWidth = this.dynamicWidth;\n\t\tthis.#menu.items = this.items;\n\t\tthis.#menu.addEventListener('menu.select', (e: MenuEvent) => {\n\t\t\tthis.close();\n\t\t\tthis.dispatchEvent(new MenuEvent('select', e.item));\n\t\t});\n\t\tthis.#menu.addEventListener('render', () => this.layout());\n\t\tthis.dropdown.appendChild(this.#menu);\n\t\treturn this.#menu;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('dropdown.beforeOpen', () => this.menu );\n\t\tthis.addEventListener('dropdown.open', () => this.menu.focus());\n\t}\n\n\tupdated(props: Map<string, unknown>) {\n\t\tsuper.updated(props);\n\t\tif (this.#menu) {\n\t\t\tthis.#menu.dynamicWidth = this.dynamicWidth;\n\t\t\tthis.#menu.items = this.items;\n\t\t}\n\t}\n\t\n}"]}
|
|
@@ -9,10 +9,7 @@ export declare class FloatingWindow extends OmegaComponent {
|
|
|
9
9
|
firstUpdated(): void;
|
|
10
10
|
updated(): Promise<void>;
|
|
11
11
|
render: () => import("lit-html").TemplateResult<1>;
|
|
12
|
-
_onDcoumentMouseDown: () => void;
|
|
13
|
-
_onKeyDown: (e: KeyboardEvent) => void;
|
|
14
12
|
registerHideEvents(): void;
|
|
15
|
-
unregisterHideEvents(): void;
|
|
16
13
|
show(dispatchEvent?: boolean): void;
|
|
17
14
|
hide(dispatchEvent?: boolean): void;
|
|
18
15
|
}
|
|
@@ -1 +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,
|
|
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,kBAAkB;IAWlB,IAAI,CAAC,aAAa,UAAQ;IAM1B,IAAI,CAAC,aAAa,UAAQ;CAI1B"}
|
|
@@ -15,12 +15,6 @@ let FloatingWindow = class FloatingWindow extends OmegaComponent {
|
|
|
15
15
|
this.noAutoHide = false;
|
|
16
16
|
this.hideKey = 'Escape';
|
|
17
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
18
|
this.addEventListener('mousedown', (e) => e.stopPropagation());
|
|
25
19
|
}
|
|
26
20
|
connectedCallback() {
|
|
@@ -35,13 +29,13 @@ let FloatingWindow = class FloatingWindow extends OmegaComponent {
|
|
|
35
29
|
}
|
|
36
30
|
registerHideEvents() {
|
|
37
31
|
if (!this.noAutoHide) {
|
|
38
|
-
|
|
32
|
+
document.addEventListener('mousedown', () => this.hide(true), { once: true });
|
|
39
33
|
}
|
|
40
|
-
this.addEventListener('keydown',
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
34
|
+
this.addEventListener('keydown', (e) => {
|
|
35
|
+
if (e.key === this.hideKey) {
|
|
36
|
+
this.hide(true);
|
|
37
|
+
}
|
|
38
|
+
}, { once: true });
|
|
45
39
|
}
|
|
46
40
|
show(dispatchEvent = false) {
|
|
47
41
|
dom.showElement(this);
|
|
@@ -51,7 +45,6 @@ let FloatingWindow = class FloatingWindow extends OmegaComponent {
|
|
|
51
45
|
}
|
|
52
46
|
hide(dispatchEvent = false) {
|
|
53
47
|
dom.hideElement(this);
|
|
54
|
-
this.unregisterHideEvents();
|
|
55
48
|
if (dispatchEvent)
|
|
56
49
|
this.dispatchEvent(new CustomEvent('hide'));
|
|
57
50
|
}
|
|
@@ -67,7 +60,7 @@ FloatingWindow.styles = css `
|
|
|
67
60
|
overflow: hidden;
|
|
68
61
|
box-shadow: inset 0px 4px 3px -2px var(--og-inset-shadow-color);
|
|
69
62
|
max-width: ${constants.FLOATING_WINDOW_MAX_WIDTH}px;
|
|
70
|
-
z-index:
|
|
63
|
+
z-index: 100000;
|
|
71
64
|
}
|
|
72
65
|
|
|
73
66
|
slot[name="content"] {
|
|
@@ -1 +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;
|
|
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;QAnBjD,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;IAID,kBAAkB;QACjB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACtB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;QAC7E,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;YACrD,IAAI,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;gBAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACjB,CAAC;QACF,CAAC,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;IAClB,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,aAAa;YAAE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;IAChE,CAAC;;AApEM,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,CAuE1B","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: 100000;\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\tregisterHideEvents() {\n\t\tif (!this.noAutoHide) {\n\t\t\tdocument.addEventListener('mousedown', () => this.hide(true), {once: true});\n\t\t}\n\t\tthis.addEventListener('keydown', (e: KeyboardEvent) => {\n\t\t\tif (e.key === this.hideKey) {\n\t\t\t\tthis.hide(true);\n\t\t\t}\n\t\t}, {once: true});\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\tif (dispatchEvent) this.dispatchEvent(new CustomEvent('hide'));\n\t}\n}"]}
|
package/dist/ui/icon.d.ts
CHANGED
|
@@ -7,7 +7,6 @@ export type IconSpec = {
|
|
|
7
7
|
statusColor?: string;
|
|
8
8
|
size?: '' | 'lg' | 'xs' | 'sm' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | null;
|
|
9
9
|
rotation?: number;
|
|
10
|
-
fallback?: string;
|
|
11
10
|
};
|
|
12
11
|
export declare class Icon extends LitElement {
|
|
13
12
|
static defaultIconSet: string;
|
|
@@ -35,7 +34,6 @@ export declare class Icon extends LitElement {
|
|
|
35
34
|
get prefix(): IconPrefix;
|
|
36
35
|
get iconSize(): string;
|
|
37
36
|
get iconColor(): string;
|
|
38
|
-
get fallback(): string;
|
|
39
37
|
get statusIconName(): string;
|
|
40
38
|
get statusIconPrefix(): string;
|
|
41
39
|
get statusIconColor(): string;
|
package/dist/ui/icon.d.ts.map
CHANGED
|
@@ -1 +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;
|
|
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;CAClB,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,cAAc,WAGjB;IAED,IAAI,gBAAgB,WAGnB;IAED,IAAI,eAAe,WAElB;IAED,cAAc;IAmBd,iBAAiB;IA6BjB,OAAO;CASP"}
|
package/dist/ui/icon.js
CHANGED
|
@@ -47,9 +47,6 @@ let Icon = Icon_1 = class Icon extends LitElement {
|
|
|
47
47
|
get iconColor() {
|
|
48
48
|
return this.color || this._icon.color;
|
|
49
49
|
}
|
|
50
|
-
get fallback() {
|
|
51
|
-
return this._icon?.fallback || '?';
|
|
52
|
-
}
|
|
53
50
|
get statusIconName() {
|
|
54
51
|
if (!this._icon?.statusIcon)
|
|
55
52
|
return null;
|
|
@@ -105,7 +102,7 @@ let Icon = Icon_1 = class Icon extends LitElement {
|
|
|
105
102
|
this.style.color = this.iconColor;
|
|
106
103
|
}
|
|
107
104
|
const html = (this.statusIconName ? this.createLayeredIcon() : this.createMainIcon())?.html;
|
|
108
|
-
this.shadowRoot.innerHTML = html?.length ? html[0] :
|
|
105
|
+
this.shadowRoot.innerHTML = html?.length ? html[0] : '?';
|
|
109
106
|
}
|
|
110
107
|
};
|
|
111
108
|
// get iconSet(): string { return Icon.defaultIconSet || config.styleDefault }
|