@omegagrid/tabs 0.10.1 → 0.10.2
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/package.json +2 -2
- package/dist/components/index.d.ts +0 -4
- package/dist/components/index.d.ts.map +0 -1
- package/dist/components/index.js +0 -4
- package/dist/components/index.js.map +0 -1
- package/dist/components/tabContainer.d.ts +0 -59
- package/dist/components/tabContainer.d.ts.map +0 -1
- package/dist/components/tabContainer.js +0 -292
- package/dist/components/tabContainer.js.map +0 -1
- package/dist/components/tabContainer.style.d.ts +0 -2
- package/dist/components/tabContainer.style.d.ts.map +0 -1
- package/dist/components/tabContainer.style.js +0 -30
- package/dist/components/tabContainer.style.js.map +0 -1
- package/dist/components/tabSplitContainer.d.ts +0 -43
- package/dist/components/tabSplitContainer.d.ts.map +0 -1
- package/dist/components/tabSplitContainer.js +0 -291
- package/dist/components/tabSplitContainer.js.map +0 -1
- package/dist/components/tabs.d.ts +0 -66
- package/dist/components/tabs.d.ts.map +0 -1
- package/dist/components/tabs.js +0 -360
- package/dist/components/tabs.js.map +0 -1
- package/dist/components/tabs.style.d.ts +0 -2
- package/dist/components/tabs.style.d.ts.map +0 -1
- package/dist/components/tabs.style.js +0 -191
- package/dist/components/tabs.style.js.map +0 -1
- package/dist/constants.d.ts +0 -49
- package/dist/constants.d.ts.map +0 -1
- package/dist/constants.js +0 -7
- package/dist/constants.js.map +0 -1
- package/dist/index.d.ts +0 -4
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js +0 -4
- package/dist/index.js.map +0 -1
- package/dist/model/index.d.ts +0 -26
- package/dist/model/index.d.ts.map +0 -1
- package/dist/model/index.js +0 -122
- package/dist/model/index.js.map +0 -1
- package/dist/types.d.ts +0 -14
- package/dist/types.d.ts.map +0 -1
- package/dist/types.js +0 -2
- package/dist/types.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omegagrid/tabs",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.2",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"description": "Universal tabbed layout component",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"_prepublish": "yarn test && yarn lint"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@omegagrid/core": "^0.10.
|
|
30
|
+
"@omegagrid/core": "^0.10.2",
|
|
31
31
|
"lit": "^3.1.1",
|
|
32
32
|
"lit-html": "^3.1.1",
|
|
33
33
|
"ts-debounce": "^4.0.0"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC"}
|
package/dist/components/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './tabs';\nexport * from './tabContainer';\nexport * from './tabSplitContainer';"]}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
import { ContainerTabItem } from '../types';
|
|
3
|
-
import { ComponentFactory, actions, Layout, ComponentId, DirectionalPosition, VerticalPosition } from "@omegagrid/core";
|
|
4
|
-
import { TabEvent, Tabs, TabSize } from "./tabs";
|
|
5
|
-
export type TabsActionArgs = {
|
|
6
|
-
index: number;
|
|
7
|
-
};
|
|
8
|
-
export declare class TabContainer extends LitElement implements Layout {
|
|
9
|
-
#private;
|
|
10
|
-
static dropPosition: DirectionalPosition;
|
|
11
|
-
static dragParent: TabContainer;
|
|
12
|
-
static dropTarget: TabContainer;
|
|
13
|
-
static styles: import("lit").CSSResult[];
|
|
14
|
-
set inactive(value: boolean);
|
|
15
|
-
get inactive(): boolean;
|
|
16
|
-
topLevelComponent: HTMLElement;
|
|
17
|
-
items: ContainerTabItem[];
|
|
18
|
-
closable: boolean;
|
|
19
|
-
createComponent: ComponentFactory;
|
|
20
|
-
tabs: Tabs;
|
|
21
|
-
actions: actions.Action[];
|
|
22
|
-
addButton: boolean;
|
|
23
|
-
scrollableTabs: boolean;
|
|
24
|
-
draggableTabs: boolean;
|
|
25
|
-
tabSize: TabSize;
|
|
26
|
-
private _selectedIndex;
|
|
27
|
-
get selectedIndex(): number;
|
|
28
|
-
set selectedIndex(value: number);
|
|
29
|
-
get selectedId(): ComponentId;
|
|
30
|
-
tabPosition: VerticalPosition;
|
|
31
|
-
cacheComponents: boolean;
|
|
32
|
-
container: HTMLDivElement;
|
|
33
|
-
overlay: HTMLDivElement;
|
|
34
|
-
readonly components: Map<ComponentId, HTMLElement>;
|
|
35
|
-
private currentComponent;
|
|
36
|
-
get component(): HTMLElement;
|
|
37
|
-
_firstLoad: boolean;
|
|
38
|
-
_itemMap: Map<ComponentId, ContainerTabItem>;
|
|
39
|
-
layout(): void;
|
|
40
|
-
updateTabs(): void;
|
|
41
|
-
getComponent(componentId: ComponentId): Promise<HTMLElement>;
|
|
42
|
-
loadComponent(id: ComponentId): Promise<void>;
|
|
43
|
-
refresh(): void;
|
|
44
|
-
_onSelect: () => void;
|
|
45
|
-
_onRemove: (e: TabEvent) => void;
|
|
46
|
-
open(item: ContainerTabItem, dispatchEvent?: boolean): void;
|
|
47
|
-
willUpdate(props: Map<PropertyKey, unknown>): void;
|
|
48
|
-
firstUpdated(): void;
|
|
49
|
-
positionOverlay(pos: DirectionalPosition): HTMLElement;
|
|
50
|
-
hideOverlay: () => void;
|
|
51
|
-
calculateOverlayPosition(x: number, y: number): DirectionalPosition;
|
|
52
|
-
_onDragover: (e: DragEvent) => void;
|
|
53
|
-
_onDrop: () => void;
|
|
54
|
-
_onDragStart: (_e: DragEvent) => void;
|
|
55
|
-
_onDragStop: () => void;
|
|
56
|
-
_onTabDrop: (e: DragEvent) => void;
|
|
57
|
-
render: () => import("lit-html").TemplateResult<1>;
|
|
58
|
-
}
|
|
59
|
-
//# sourceMappingURL=tabContainer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tabContainer.d.ts","sourceRoot":"","sources":["../../src/components/tabContainer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAO,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC7H,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAA;CACb,CAAA;AAED,qBACa,YAAa,SAAQ,UAAW,YAAW,MAAM;;IAE7D,MAAM,CAAC,YAAY,EAAE,mBAAmB,CAAC;IACzC,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC;IAChC,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC;IAEhC,MAAM,CAAC,MAAM,4BAAW;IAGxB,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAJQ,OAAO,CAIa;IAGxC,iBAAiB,EAAE,WAAW,CAAC;IAG/B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAG1B,QAAQ,UAAS;IAGjB,eAAe,EAAE,gBAAgB,CAAC;IAGlC,IAAI,EAAE,IAAI,CAAC;IAGX,OAAO,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC;IAG1B,SAAS,UAAS;IAGlB,cAAc,UAAS;IAGvB,aAAa,UAAS;IAGtB,OAAO,EAAE,OAAO,CAAU;IAE1B,OAAO,CAAC,cAAc,CAAM;IAC5B,IACI,aAAa,IAAI,MAAM,CAA+B;IAC1D,IAAI,aAAa,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED,IAAI,UAAU,IAAI,WAAW,CAE5B;IAGD,WAAW,EAAE,gBAAgB,CAAS;IAGtC,eAAe,UAAS;IAGxB,SAAS,EAAE,cAAc,CAAC;IAG1B,OAAO,EAAE,cAAc,CAAC;IAGxB,SAAgB,UAAU,gCAAuC;IACjE,OAAO,CAAC,gBAAgB,CAAc;IACtC,IAAI,SAAS,gBAAmC;IAEhD,UAAU,UAAQ;IAClB,QAAQ,qCAA0C;IAElD,MAAM;IAIN,UAAU;IAEJ,YAAY,CAAC,WAAW,EAAE,WAAW;IAarC,aAAa,CAAC,EAAE,EAAE,WAAW;IAqCnC,OAAO;IAMP,SAAS,aAAwB;IAEjC,SAAS,GAAI,GAAG,QAAQ,UAKtB;IAEF,IAAI,CAAC,IAAI,EAAE,gBAAgB,EAAE,aAAa,UAAO;IAYjD,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAY3C,YAAY;IAIZ,eAAe,CAAC,GAAG,EAAE,mBAAmB;IAkBxC,WAAW,aAGV;IAED,wBAAwB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAQ7C,WAAW,GAAI,GAAG,SAAS,UAO1B;IAED,OAAO,aAIN;IAED,YAAY,GAAI,IAAI,SAAS,UAE5B;IAED,WAAW,aAEV;IAED,UAAU,GAAI,GAAG,SAAS,UAGzB;IAED,MAAM,6CAqCJ;CAEF"}
|
|
@@ -1,292 +0,0 @@
|
|
|
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
|
-
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
8
|
-
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
9
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
10
|
-
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");
|
|
11
|
-
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
12
|
-
};
|
|
13
|
-
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
14
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
15
|
-
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");
|
|
16
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
17
|
-
};
|
|
18
|
-
var _TabContainer_inactive;
|
|
19
|
-
var TabContainer_1;
|
|
20
|
-
import { LitElement, html } from "lit";
|
|
21
|
-
import { customElement, property, query } from "lit/decorators.js";
|
|
22
|
-
import { style } from './tabContainer.style';
|
|
23
|
-
import { dom } from "@omegagrid/core";
|
|
24
|
-
import { Tabs } from "./tabs";
|
|
25
|
-
let TabContainer = TabContainer_1 = class TabContainer extends LitElement {
|
|
26
|
-
constructor() {
|
|
27
|
-
super(...arguments);
|
|
28
|
-
_TabContainer_inactive.set(this, false);
|
|
29
|
-
this.closable = false;
|
|
30
|
-
this.addButton = false;
|
|
31
|
-
this.scrollableTabs = false;
|
|
32
|
-
this.draggableTabs = false;
|
|
33
|
-
this.tabSize = 'auto';
|
|
34
|
-
this._selectedIndex = -1;
|
|
35
|
-
this.tabPosition = 'top';
|
|
36
|
-
this.cacheComponents = false;
|
|
37
|
-
this.components = new Map();
|
|
38
|
-
this._firstLoad = true;
|
|
39
|
-
this._itemMap = new Map;
|
|
40
|
-
this._onSelect = () => this.refresh();
|
|
41
|
-
this._onRemove = (e) => {
|
|
42
|
-
this.components.delete(e.tab.id);
|
|
43
|
-
if (this.tabs.items?.length === 0) {
|
|
44
|
-
dom.showElement(this.tabs, 'flex');
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
this.hideOverlay = () => {
|
|
48
|
-
dom.hideElement(this.overlay);
|
|
49
|
-
this.tabs.hideOverlay();
|
|
50
|
-
};
|
|
51
|
-
this._onDragover = (e) => {
|
|
52
|
-
if (!TabContainer_1.dragParent || !Tabs.dragParent)
|
|
53
|
-
return;
|
|
54
|
-
if (TabContainer_1.dragParent.topLevelComponent != this.topLevelComponent && Tabs.dragParent.topLevelComponent != this.topLevelComponent)
|
|
55
|
-
return;
|
|
56
|
-
e.preventDefault();
|
|
57
|
-
e.stopPropagation();
|
|
58
|
-
e.dataTransfer.dropEffect = 'move';
|
|
59
|
-
this.positionOverlay(this.calculateOverlayPosition(e.offsetX, e.offsetY));
|
|
60
|
-
};
|
|
61
|
-
this._onDrop = () => {
|
|
62
|
-
if (TabContainer_1.dragParent?.topLevelComponent != this.topLevelComponent && Tabs.dragParent?.topLevelComponent != this.topLevelComponent)
|
|
63
|
-
return;
|
|
64
|
-
TabContainer_1.dropTarget = this;
|
|
65
|
-
this.hideOverlay();
|
|
66
|
-
};
|
|
67
|
-
this._onDragStart = (_e) => {
|
|
68
|
-
TabContainer_1.dragParent = this;
|
|
69
|
-
};
|
|
70
|
-
this._onDragStop = () => {
|
|
71
|
-
TabContainer_1.dragParent = null;
|
|
72
|
-
};
|
|
73
|
-
this._onTabDrop = (e) => {
|
|
74
|
-
TabContainer_1.dragParent = null;
|
|
75
|
-
e.stopPropagation();
|
|
76
|
-
};
|
|
77
|
-
this.render = () => {
|
|
78
|
-
const tabs = html `
|
|
79
|
-
<og-tabs
|
|
80
|
-
class="${this.inactive ? 'inactive' : ''}"
|
|
81
|
-
style="${this.items?.length ? '' : 'display: none;'}"
|
|
82
|
-
?scrollable="${this.scrollableTabs}"
|
|
83
|
-
?draggable="${this.draggableTabs}"
|
|
84
|
-
.topLevelComponent="${this.topLevelComponent}"
|
|
85
|
-
.items="${this.items}"
|
|
86
|
-
.actions="${this.actions}"
|
|
87
|
-
.selectedIndex="${this.selectedIndex}"
|
|
88
|
-
.position="${this.tabPosition}"
|
|
89
|
-
.tabSize="${this.tabSize}"
|
|
90
|
-
?closable="${this.closable}"
|
|
91
|
-
?addButton="${this.addButton}"
|
|
92
|
-
@tab.select="${this._onSelect}"
|
|
93
|
-
@tab.remove="${this._onRemove}"
|
|
94
|
-
@dragstart="${this._onDragStart}"
|
|
95
|
-
@dragstop="${this._onDragStop}"
|
|
96
|
-
@drop="${this._onTabDrop}">
|
|
97
|
-
</og-tabs>
|
|
98
|
-
`;
|
|
99
|
-
const container = html `
|
|
100
|
-
<div
|
|
101
|
-
id="container"
|
|
102
|
-
@drop="${this._onDrop}"
|
|
103
|
-
@dragover="${this._onDragover}"
|
|
104
|
-
@dragleave="${() => this.hideOverlay()}">
|
|
105
|
-
</div>
|
|
106
|
-
`;
|
|
107
|
-
return html `
|
|
108
|
-
${this.tabPosition == 'top' ? tabs : container}
|
|
109
|
-
${this.tabPosition == 'bottom' ? tabs : container}
|
|
110
|
-
<div id="overlay" style="display: none"></div>
|
|
111
|
-
`;
|
|
112
|
-
};
|
|
113
|
-
}
|
|
114
|
-
set inactive(value) {
|
|
115
|
-
__classPrivateFieldSet(this, _TabContainer_inactive, value, "f");
|
|
116
|
-
if (this.tabs)
|
|
117
|
-
this.tabs.classList.toggle('inactive', value);
|
|
118
|
-
}
|
|
119
|
-
get inactive() { return __classPrivateFieldGet(this, _TabContainer_inactive, "f"); }
|
|
120
|
-
get selectedIndex() { return this._selectedIndex; }
|
|
121
|
-
set selectedIndex(value) {
|
|
122
|
-
if (value != this._selectedIndex) {
|
|
123
|
-
this.requestUpdate('selectedIndex', this._selectedIndex);
|
|
124
|
-
this._selectedIndex = value;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
get selectedId() {
|
|
128
|
-
return this.tabs?.selectedItem?.id;
|
|
129
|
-
}
|
|
130
|
-
get component() { return this.currentComponent; }
|
|
131
|
-
layout() {
|
|
132
|
-
if (this.currentComponent?.layout)
|
|
133
|
-
this.currentComponent.layout();
|
|
134
|
-
}
|
|
135
|
-
updateTabs() { this.tabs.requestUpdate(); }
|
|
136
|
-
async getComponent(componentId) {
|
|
137
|
-
if (!this.createComponent)
|
|
138
|
-
return null;
|
|
139
|
-
const cacheComponent = this.cacheComponents || this._itemMap?.get(componentId)?.preventDisconnect;
|
|
140
|
-
if (!cacheComponent || !this.components.has(componentId)) {
|
|
141
|
-
const component = await this.createComponent(componentId);
|
|
142
|
-
component.dataset.preventDisconnect = this._itemMap?.get(componentId)?.preventDisconnect ? '1' : '0';
|
|
143
|
-
if (!cacheComponent)
|
|
144
|
-
return component;
|
|
145
|
-
this.components.set(componentId, component);
|
|
146
|
-
}
|
|
147
|
-
return this.components.get(componentId);
|
|
148
|
-
}
|
|
149
|
-
async loadComponent(id) {
|
|
150
|
-
if (id != null) {
|
|
151
|
-
const prevComponent = this.currentComponent;
|
|
152
|
-
this.currentComponent = await this.getComponent(id);
|
|
153
|
-
if (prevComponent) {
|
|
154
|
-
const preventDisconnect = prevComponent?.dataset?.preventDisconnect === '1';
|
|
155
|
-
if (preventDisconnect) {
|
|
156
|
-
dom.hideElement(prevComponent);
|
|
157
|
-
}
|
|
158
|
-
else {
|
|
159
|
-
prevComponent.remove();
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
if (this.currentComponent) {
|
|
163
|
-
if (this.currentComponent.parentElement !== this.container) {
|
|
164
|
-
dom.appendElement(this.container, this.currentComponent);
|
|
165
|
-
}
|
|
166
|
-
dom.showElement(this.currentComponent);
|
|
167
|
-
}
|
|
168
|
-
if (this._firstLoad) {
|
|
169
|
-
this._firstLoad = false;
|
|
170
|
-
this.dispatchEvent(new Event('load'));
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
else {
|
|
174
|
-
dom.empty(this.container);
|
|
175
|
-
this.currentComponent = null;
|
|
176
|
-
}
|
|
177
|
-
if (this._firstLoad) {
|
|
178
|
-
this._firstLoad = false;
|
|
179
|
-
this.layout();
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
refresh() {
|
|
183
|
-
const id = this.tabs?.selectedItem?.id;
|
|
184
|
-
this._selectedIndex = this.tabs?.selectedIndex ?? -1;
|
|
185
|
-
if (id != null)
|
|
186
|
-
this.loadComponent(this.tabs.selectedItem?.id);
|
|
187
|
-
}
|
|
188
|
-
open(item, dispatchEvent = true) {
|
|
189
|
-
const tabIndex = this.tabs.getIndexById(item.id);
|
|
190
|
-
if (tabIndex > -1) {
|
|
191
|
-
this.tabs.selectTab(tabIndex, dispatchEvent);
|
|
192
|
-
}
|
|
193
|
-
else {
|
|
194
|
-
this.tabs.addTab(item);
|
|
195
|
-
this.tabs.selectTabById(item.id, dispatchEvent);
|
|
196
|
-
}
|
|
197
|
-
dom.showElement(this.tabs, 'flex');
|
|
198
|
-
}
|
|
199
|
-
willUpdate(props) {
|
|
200
|
-
if (!this.topLevelComponent)
|
|
201
|
-
this.topLevelComponent = this;
|
|
202
|
-
this.selectedIndex = this.items?.length > 0
|
|
203
|
-
? Math.max(0, Math.min(this.selectedIndex ?? -1, this.items.length - 1))
|
|
204
|
-
: -1;
|
|
205
|
-
if (props.has('items')) {
|
|
206
|
-
this._firstLoad = true;
|
|
207
|
-
this._itemMap = new Map(this.items.map(item => [item.id, item]));
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
firstUpdated() {
|
|
211
|
-
if (this.selectedIndex > -1)
|
|
212
|
-
this.open(this.items[this.selectedIndex]);
|
|
213
|
-
}
|
|
214
|
-
positionOverlay(pos) {
|
|
215
|
-
TabContainer_1.dropPosition = pos;
|
|
216
|
-
this.tabs.hideOverlay();
|
|
217
|
-
if (pos == null) {
|
|
218
|
-
this.tabs.positionOverlay(this.tabs.empty);
|
|
219
|
-
return dom.hideElement(this.overlay);
|
|
220
|
-
}
|
|
221
|
-
dom.showElement(this.overlay);
|
|
222
|
-
dom.setPosition(this.overlay, {
|
|
223
|
-
t: (pos == 'bottom' ? this.container.clientHeight / 2 : 0) + this.container.offsetTop,
|
|
224
|
-
l: pos == 'right' ? this.container.clientWidth / 2 : 0,
|
|
225
|
-
b: pos == 'top' ? this.container.clientHeight / 2 : 0,
|
|
226
|
-
r: pos == 'left' ? this.container.clientWidth / 2 : 0,
|
|
227
|
-
});
|
|
228
|
-
}
|
|
229
|
-
calculateOverlayPosition(x, y) {
|
|
230
|
-
const [w, h] = [this.container.clientWidth, this.container.clientHeight];
|
|
231
|
-
const margin = 0.3;
|
|
232
|
-
if (x > w * margin && x < w - (w * margin) && y > h * margin && y < h - (h * margin))
|
|
233
|
-
return null;
|
|
234
|
-
const [q1, q2] = [w / h > x / y, w / h > x / (h - y)];
|
|
235
|
-
return (q1 ? (q2 ? 'left' : 'bottom') : (q2 ? 'top' : 'right'));
|
|
236
|
-
}
|
|
237
|
-
};
|
|
238
|
-
_TabContainer_inactive = new WeakMap();
|
|
239
|
-
TabContainer.styles = [style];
|
|
240
|
-
__decorate([
|
|
241
|
-
property({ type: Boolean, noAccessor: true })
|
|
242
|
-
], TabContainer.prototype, "inactive", null);
|
|
243
|
-
__decorate([
|
|
244
|
-
property({ type: Object })
|
|
245
|
-
], TabContainer.prototype, "topLevelComponent", void 0);
|
|
246
|
-
__decorate([
|
|
247
|
-
property({ type: Array })
|
|
248
|
-
], TabContainer.prototype, "items", void 0);
|
|
249
|
-
__decorate([
|
|
250
|
-
property({ type: Boolean })
|
|
251
|
-
], TabContainer.prototype, "closable", void 0);
|
|
252
|
-
__decorate([
|
|
253
|
-
property({ type: Object })
|
|
254
|
-
], TabContainer.prototype, "createComponent", void 0);
|
|
255
|
-
__decorate([
|
|
256
|
-
query('og-tabs')
|
|
257
|
-
], TabContainer.prototype, "tabs", void 0);
|
|
258
|
-
__decorate([
|
|
259
|
-
property({ type: Array })
|
|
260
|
-
], TabContainer.prototype, "actions", void 0);
|
|
261
|
-
__decorate([
|
|
262
|
-
property({ type: Boolean })
|
|
263
|
-
], TabContainer.prototype, "addButton", void 0);
|
|
264
|
-
__decorate([
|
|
265
|
-
property({ type: Boolean })
|
|
266
|
-
], TabContainer.prototype, "scrollableTabs", void 0);
|
|
267
|
-
__decorate([
|
|
268
|
-
property({ type: Boolean })
|
|
269
|
-
], TabContainer.prototype, "draggableTabs", void 0);
|
|
270
|
-
__decorate([
|
|
271
|
-
property({ type: String })
|
|
272
|
-
], TabContainer.prototype, "tabSize", void 0);
|
|
273
|
-
__decorate([
|
|
274
|
-
property({ type: Number, reflect: true, noAccessor: true })
|
|
275
|
-
], TabContainer.prototype, "selectedIndex", null);
|
|
276
|
-
__decorate([
|
|
277
|
-
property({ type: String, reflect: true })
|
|
278
|
-
], TabContainer.prototype, "tabPosition", void 0);
|
|
279
|
-
__decorate([
|
|
280
|
-
property({ type: Boolean })
|
|
281
|
-
], TabContainer.prototype, "cacheComponents", void 0);
|
|
282
|
-
__decorate([
|
|
283
|
-
query('#container')
|
|
284
|
-
], TabContainer.prototype, "container", void 0);
|
|
285
|
-
__decorate([
|
|
286
|
-
query('#overlay')
|
|
287
|
-
], TabContainer.prototype, "overlay", void 0);
|
|
288
|
-
TabContainer = TabContainer_1 = __decorate([
|
|
289
|
-
customElement('og-tabcontainer')
|
|
290
|
-
], TabContainer);
|
|
291
|
-
export { TabContainer };
|
|
292
|
-
//# sourceMappingURL=tabContainer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tabContainer.js","sourceRoot":"","sources":["../../src/components/tabContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { style } from './tabContainer.style';\nimport { ContainerTabItem } from '../types';\nimport { dom, ComponentFactory, actions, Layout, ComponentId, DirectionalPosition, VerticalPosition } from \"@omegagrid/core\";\nimport { TabEvent, Tabs, TabSize } from \"./tabs\";\n\nexport type TabsActionArgs = {\n\tindex: number\n}\n\n@customElement('og-tabcontainer')\nexport class TabContainer extends LitElement implements Layout {\n\n\tstatic dropPosition: DirectionalPosition;\n\tstatic dragParent: TabContainer;\n\tstatic dropTarget: TabContainer;\n\n\tstatic styles = [style];\n\n\t#inactive = false;\n\t@property({type: Boolean, noAccessor: true})\n\tset inactive(value: boolean) {\n\t\tthis.#inactive = value;\n\t\tif (this.tabs) this.tabs.classList.toggle('inactive', value);\n\t}\n\tget inactive() { return this.#inactive }\n\n\t@property({type: Object})\n\ttopLevelComponent: HTMLElement;\n\n\t@property({type: Array})\n\titems: ContainerTabItem[];\n\n\t@property({type: Boolean})\n\tclosable = false;\n\n\t@property({type: Object})\n\tcreateComponent: ComponentFactory;\n\n\t@query('og-tabs')\n\ttabs: Tabs;\n\n\t@property({type: Array})\n\tactions: actions.Action[];\n\n\t@property({type: Boolean})\n\taddButton = false;\n\n\t@property({type: Boolean})\n\tscrollableTabs = false;\n\n\t@property({type: Boolean})\n\tdraggableTabs = false;\n\n\t@property({type: String})\n\ttabSize: TabSize = 'auto';\n\n\tprivate _selectedIndex = -1;\n\t@property({type: Number, reflect: true, noAccessor: true})\n\tget selectedIndex(): number { return this._selectedIndex }\n\tset selectedIndex(value: number) {\n\t\tif (value != this._selectedIndex) {\n\t\t\tthis.requestUpdate('selectedIndex', this._selectedIndex);\n\t\t\tthis._selectedIndex = value;\n\t\t}\n\t}\n\n\tget selectedId(): ComponentId {\n\t\treturn this.tabs?.selectedItem?.id;\n\t}\n\n\t@property({type: String, reflect: true})\n\ttabPosition: VerticalPosition = 'top';\n\n\t@property({type: Boolean})\n\tcacheComponents = false;\n\n\t@query('#container')\n\tcontainer: HTMLDivElement;\n\n\t@query('#overlay')\n\toverlay: HTMLDivElement;\n\n\n\tpublic readonly components = new Map<ComponentId, HTMLElement>();\n\tprivate currentComponent: HTMLElement;\n\tget component() { return this.currentComponent }\n\n\t_firstLoad = true;\n\t_itemMap = new Map<ComponentId, ContainerTabItem>;\n\n\tlayout() {\n\t\tif ((this.currentComponent as Layout)?.layout) (this.currentComponent as Layout).layout();\n\t}\n\n\tupdateTabs() { this.tabs.requestUpdate() }\n\n\tasync getComponent(componentId: ComponentId) {\n\t\tif (!this.createComponent) return null;\n\n\t\tconst cacheComponent = this.cacheComponents || this._itemMap?.get(componentId)?.preventDisconnect;\n\t\tif (!cacheComponent || !this.components.has(componentId)) {\n\t\t\tconst component = await this.createComponent(componentId);\n\t\t\tcomponent.dataset.preventDisconnect = this._itemMap?.get(componentId)?.preventDisconnect ? '1' : '0';\n\t\t\tif (!cacheComponent) return component;\n\t\t\tthis.components.set(componentId, component);\n\t\t}\n\t\treturn this.components.get(componentId);\n\t}\n\n\tasync loadComponent(id: ComponentId) {\n\t\tif (id != null) {\n\t\t\tconst prevComponent = this.currentComponent;\n\t\t\tthis.currentComponent = await this.getComponent(id);\n\n\t\t\tif (prevComponent) {\n\t\t\t\tconst preventDisconnect = prevComponent?.dataset?.preventDisconnect === '1';\n\n\t\t\t\tif (preventDisconnect) {\n\t\t\t\t\tdom.hideElement(prevComponent);\n\t\t\t\t} else {\n\t\t\t\t\tprevComponent.remove();\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this.currentComponent) {\n\t\t\t\tif (this.currentComponent.parentElement !== this.container) {\n\t\t\t\t\tdom.appendElement(this.container, this.currentComponent);\n\t\t\t\t}\n\t\t\t\tdom.showElement(this.currentComponent);\n\t\t\t}\n\n\t\t\tif (this._firstLoad) {\n\t\t\t\tthis._firstLoad = false;\n\t\t\t\tthis.dispatchEvent(new Event('load'));\n\t\t\t}\n\t\t} else {\n\t\t\tdom.empty(this.container);\n\t\t\tthis.currentComponent = null;\n\t\t}\n\n\t\tif (this._firstLoad) {\n\t\t\tthis._firstLoad = false;\n\t\t\tthis.layout();\n\t\t}\n\t}\n\n\trefresh() {\n\t\tconst id = this.tabs?.selectedItem?.id;\n\t\tthis._selectedIndex = this.tabs?.selectedIndex ?? -1;\n\t\tif (id != null)\tthis.loadComponent(this.tabs.selectedItem?.id);\n\t}\n\n\t_onSelect = () => this.refresh();\n\n\t_onRemove = (e: TabEvent) => {\n\t\tthis.components.delete(e.tab.id);\n\t\tif (this.tabs.items?.length === 0) {\n\t\t\tdom.showElement(this.tabs, 'flex');\n\t\t}\n\t};\n\n\topen(item: ContainerTabItem, dispatchEvent = true) {\n\t\tconst tabIndex = this.tabs.getIndexById(item.id);\n\t\tif (tabIndex > -1) {\n\t\t\tthis.tabs.selectTab(tabIndex, dispatchEvent);\n\t\t} else {\n\t\t\tthis.tabs.addTab(item);\n\t\t\tthis.tabs.selectTabById(item.id, dispatchEvent);\n\t\t}\n\n\t\tdom.showElement(this.tabs, 'flex');\n\t}\n\n\twillUpdate(props: Map<PropertyKey, unknown>) {\n\t\tif (!this.topLevelComponent) this.topLevelComponent = this;\n\t\tthis.selectedIndex = this.items?.length > 0\n\t\t\t? Math.max(0, Math.min(this.selectedIndex ?? -1, this.items.length - 1))\n\t\t\t: -1;\n\n\t\tif (props.has('items')) {\n\t\t\tthis._firstLoad = true;\n\t\t\tthis._itemMap = new Map(this.items.map(item => [item.id, item]));\n\t\t}\n\t}\n\n\tfirstUpdated() {\n\t\tif (this.selectedIndex > -1) this.open(this.items[this.selectedIndex]);\n\t}\n\n\tpositionOverlay(pos: DirectionalPosition) {\n\t\tTabContainer.dropPosition = pos;\n\n\t\tthis.tabs.hideOverlay();\n\t\tif (pos == null) {\n\t\t\tthis.tabs.positionOverlay(this.tabs.empty);\n\t\t\treturn dom.hideElement(this.overlay);\n\t\t}\n\n\t\tdom.showElement(this.overlay);\n\t\tdom.setPosition(this.overlay, {\n\t\t\tt: (pos == 'bottom' ? this.container.clientHeight / 2 : 0) + this.container.offsetTop,\n\t\t\tl: pos == 'right' ? this.container.clientWidth / 2 : 0,\n\t\t\tb: pos == 'top' ? this.container.clientHeight / 2 : 0,\n\t\t\tr: pos == 'left' ? this.container.clientWidth / 2 : 0,\n\t\t});\n\t}\n\n\thideOverlay = () => {\n\t\tdom.hideElement(this.overlay);\n\t\tthis.tabs.hideOverlay();\n\t}\n\n\tcalculateOverlayPosition(x: number, y: number) {\n\t\tconst [w, h] = [this.container.clientWidth, this.container.clientHeight];\n\t\tconst margin = 0.3;\n\t\tif (x > w * margin && x < w - (w * margin) && y > h * margin && y < h - (h * margin)) return null;\n\t\tconst [q1, q2] = [w / h > x / y, w / h > x / (h - y)];\n\t\treturn (q1 ? (q2 ? 'left' : 'bottom') : (q2 ? 'top' : 'right')) as DirectionalPosition;\n\t}\n\n\t_onDragover = (e: DragEvent) => {\n\t\tif (!TabContainer.dragParent || !Tabs.dragParent) return;\n\t\tif (TabContainer.dragParent.topLevelComponent != this.topLevelComponent && Tabs.dragParent.topLevelComponent != this.topLevelComponent) return;\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\te.dataTransfer.dropEffect = 'move';\n\t\tthis.positionOverlay(this.calculateOverlayPosition(e.offsetX, e.offsetY));\n\t}\n\n\t_onDrop = () => {\n\t\tif (TabContainer.dragParent?.topLevelComponent != this.topLevelComponent && Tabs.dragParent?.topLevelComponent != this.topLevelComponent) return;\n\t\tTabContainer.dropTarget = this;\n\t\tthis.hideOverlay();\n\t}\n\n\t_onDragStart = (_e: DragEvent) => {\n\t\tTabContainer.dragParent = this;\n\t}\n\n\t_onDragStop = () => {\n\t\tTabContainer.dragParent = null;\n\t}\n\n\t_onTabDrop = (e: DragEvent) => {\n\t\tTabContainer.dragParent = null;\n\t\te.stopPropagation();\n\t}\n\n\trender = () => {\n\t\tconst tabs = html`\n\t\t\t<og-tabs\n\t\t\t\tclass=\"${this.inactive ? 'inactive' : ''}\"\n\t\t\t\tstyle=\"${this.items?.length ? '' : 'display: none;'}\"\n\t\t\t\t?scrollable=\"${this.scrollableTabs}\"\n\t\t\t\t?draggable=\"${this.draggableTabs}\"\n\t\t\t\t.topLevelComponent=\"${this.topLevelComponent}\"\n\t\t\t\t.items=\"${this.items}\"\n\t\t\t\t.actions=\"${this.actions}\"\n\t\t\t\t.selectedIndex=\"${this.selectedIndex}\"\n\t\t\t\t.position=\"${this.tabPosition}\"\n\t\t\t\t.tabSize=\"${this.tabSize}\"\n\t\t\t\t?closable=\"${this.closable}\"\n\t\t\t\t?addButton=\"${this.addButton}\"\n\t\t\t\t@tab.select=\"${this._onSelect}\"\n\t\t\t\t@tab.remove=\"${this._onRemove}\"\n\t\t\t\t@dragstart=\"${this._onDragStart}\"\n\t\t\t\t@dragstop=\"${this._onDragStop}\"\n\t\t\t\t@drop=\"${this._onTabDrop}\">\n\t\t\t</og-tabs>\n\t\t`;\n\n\t\tconst container = html`\n\t\t\t<div\n\t\t\t\tid=\"container\"\n\t\t\t\t@drop=\"${this._onDrop}\"\n\t\t\t\t@dragover=\"${this._onDragover}\"\n\t\t\t\t@dragleave=\"${() => this.hideOverlay()}\">\n\t\t\t</div>\n\t\t`;\n\n\t\treturn html`\n\t\t\t${this.tabPosition == 'top' ? tabs : container}\n\t\t\t${this.tabPosition == 'bottom' ? tabs : container}\n\t\t\t<div id=\"overlay\" style=\"display: none\"></div>\n\t\t`\n\t};\n\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tabContainer.style.d.ts","sourceRoot":"","sources":["../../src/components/tabContainer.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBA2BjB,CAAC"}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { css } from "lit";
|
|
2
|
-
export const style = css `
|
|
3
|
-
* {
|
|
4
|
-
box-sizing: border-box;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
:host {
|
|
8
|
-
display: flex;
|
|
9
|
-
flex-direction: column;
|
|
10
|
-
position: relative;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
og-tabs {
|
|
14
|
-
flex: 0;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
#container {
|
|
18
|
-
flex: 1;
|
|
19
|
-
position: relative;
|
|
20
|
-
overflow: hidden;
|
|
21
|
-
background: var(--og-background-color-2);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
#overlay {
|
|
25
|
-
background-color: var(--og-accent-color);
|
|
26
|
-
opacity: 0.5;
|
|
27
|
-
pointer-events: none;
|
|
28
|
-
}
|
|
29
|
-
`;
|
|
30
|
-
//# sourceMappingURL=tabContainer.style.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tabContainer.style.js","sourceRoot":"","sources":["../../src/components/tabContainer.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BvB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport const style = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tposition: relative;\n\t}\n\t\n\tog-tabs {\n\t\tflex: 0;\n\t}\n\t\n\t#container {\n\t\tflex: 1;\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tbackground: var(--og-background-color-2);\n\t}\n\n\t#overlay {\n\t\tbackground-color: var(--og-accent-color);\n\t\topacity: 0.5;\n\t\tpointer-events: none;\n\t}\n`;"]}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
import { TabItem } from '../types';
|
|
3
|
-
import { ComponentFactory, SplitContainer, Layout, ComponentId, VerticalPosition } from "@omegagrid/core";
|
|
4
|
-
import { TabContainer } from "./tabContainer";
|
|
5
|
-
import { TabSplitContainerModel } from "../model";
|
|
6
|
-
type TabSplitContainerTabContainer = TabContainer & {
|
|
7
|
-
index: number;
|
|
8
|
-
parentContainer: TabSplitContainer;
|
|
9
|
-
};
|
|
10
|
-
export declare class TabSplitContainer extends LitElement implements Layout {
|
|
11
|
-
static styles: import("lit").CSSResult;
|
|
12
|
-
topLevelComponent: HTMLElement;
|
|
13
|
-
model: TabSplitContainerModel;
|
|
14
|
-
addButton: boolean;
|
|
15
|
-
closable: boolean;
|
|
16
|
-
singleActive: boolean;
|
|
17
|
-
tabPosition: VerticalPosition;
|
|
18
|
-
scrollableTabs: boolean;
|
|
19
|
-
createComponent: ComponentFactory;
|
|
20
|
-
splitContainer: SplitContainer;
|
|
21
|
-
tabContainers: Set<TabSplitContainer | TabSplitContainerTabContainer>;
|
|
22
|
-
private _activeTabContainer;
|
|
23
|
-
get activeTabContainer(): TabContainer;
|
|
24
|
-
private _activeTab;
|
|
25
|
-
get activeTab(): TabItem;
|
|
26
|
-
private loadState;
|
|
27
|
-
walk(cb: (splitContainer: TabSplitContainer, tabContainer: TabSplitContainerTabContainer) => boolean | void): void;
|
|
28
|
-
willUpdate(): void;
|
|
29
|
-
updateTabs(): void;
|
|
30
|
-
updateTab(id: ComponentId, tab: Partial<TabItem>): void;
|
|
31
|
-
removeEmptyContainers(): Promise<void>;
|
|
32
|
-
updateActiveTab(): void;
|
|
33
|
-
_createTabContainer: (containerIndex: number) => TabSplitContainerTabContainer;
|
|
34
|
-
_createSplitContainer: (containerIndex: number) => TabSplitContainer;
|
|
35
|
-
_createSplitContainerComponent: (id: ComponentId) => Promise<TabContainer | TabSplitContainer>;
|
|
36
|
-
_onDrop: (e: DragEvent) => void;
|
|
37
|
-
activate(id: ComponentId): void;
|
|
38
|
-
open(item: TabItem, containerIndex?: number): void;
|
|
39
|
-
render: () => "" | import("lit-html").TemplateResult<1>;
|
|
40
|
-
layout(): void;
|
|
41
|
-
}
|
|
42
|
-
export {};
|
|
43
|
-
//# sourceMappingURL=tabSplitContainer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tabSplitContainer.d.ts","sourceRoot":"","sources":["../../src/components/tabSplitContainer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAO,gBAAgB,EAAE,cAAc,EAAE,MAAM,EAAE,WAAW,EAAe,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC5H,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAElD,KAAK,6BAA6B,GAAG,YAAY,GAAG;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,iBAAiB,CAAA;CAClC,CAAC;AAEF,qBAEa,iBAAkB,SAAQ,UAAW,YAAW,MAAM;IAElE,MAAM,CAAC,MAAM,0BAQX;IAGF,iBAAiB,EAAE,WAAW,CAAC;IAG/B,KAAK,EAAE,sBAAsB,CAAC;IAG9B,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAGjB,YAAY,UAAS;IAGrB,WAAW,EAAE,gBAAgB,CAAS;IAGtC,cAAc,UAAS;IAGvB,eAAe,EAAE,gBAAgB,CAAC;IAGlC,cAAc,EAAE,cAAc,CAAC;IAE/B,aAAa,yDAA8D;IAE3E,OAAO,CAAC,mBAAmB,CAAe;IAC1C,IAAI,kBAAkB,iBAAsC;IAE5D,OAAO,CAAC,UAAU,CAAU;IAC5B,IAAI,SAAS,YAA6B;IAE1C,OAAO,CAAC,SAAS,CAAK;IAEtB,IAAI,CAAC,EAAE,EAAE,CAAC,cAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,6BAA6B,KAAK,OAAO,GAAC,IAAI;IAUzG,UAAU;IAKV,UAAU;IAEV,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,OAAO,CAAC,OAAO,CAAC;IAkB1C,qBAAqB;IAQ3B,eAAe;IAOf,mBAAmB,GAAI,gBAAgB,MAAM,mCAqD3C;IAEF,qBAAqB,GAAI,gBAAgB,MAAM,uBAY7C;IAEF,8BAA8B,GAAI,IAAI,WAAW,+CAgB9C;IAEH,OAAO,GAAI,GAAG,SAAS,UA4DtB;IAED,QAAQ,CAAC,EAAE,EAAE,WAAW;IAIxB,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,cAAc,SAAI;IAwBtC,MAAM,kDAOC;IAEP,MAAM;CAIN"}
|