overview-components 1.0.67 → 1.0.69
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/components/lit-chart.js +392 -0
- package/dist/components/lit-multiselect-item.js +526 -0
- package/dist/components/lit-tabs-overview.js +300 -0
- package/dist/components/react-wrappers/button.d.ts +3 -0
- package/dist/components/react-wrappers/button.d.ts.map +1 -0
- package/dist/components/react-wrappers/button.js +14 -0
- package/dist/components/react-wrappers/chart.js +14 -0
- package/dist/components/react-wrappers/progress-bar.d.ts +1 -1
- package/dist/components/react-wrappers/progress-bar.d.ts.map +1 -1
- package/dist/components/react-wrappers/progress-bar.js +14 -0
- package/dist/components/react-wrappers/tabs-overview.js +14 -0
- package/dist/index.d.ts +16 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +36 -20
- package/dist/shared/lit-button.js +139 -0
- package/dist/shared/lit-progress-bar.js +80 -0
- package/dist/shared/styles/button-shared-styles.js +202 -0
- package/package.json +5 -1
|
@@ -0,0 +1,300 @@
|
|
|
1
|
+
import { customElement as f } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
|
|
2
|
+
import { property as c } from "../node_modules/@lit/reactive-element/decorators/property.js";
|
|
3
|
+
import { state as l } from "../node_modules/@lit/reactive-element/decorators/state.js";
|
|
4
|
+
import { LitElement as v, html as h, css as y } from "lit";
|
|
5
|
+
import { msg as g } from "@lit/localize";
|
|
6
|
+
import C from "sortablejs";
|
|
7
|
+
var S = Object.defineProperty, T = Object.getOwnPropertyDescriptor, n = (t, e, a, o) => {
|
|
8
|
+
for (var s = o > 1 ? void 0 : o ? T(e, a) : e, d = t.length - 1, r; d >= 0; d--)
|
|
9
|
+
(r = t[d]) && (s = (o ? r(e, a, s) : r(s)) || s);
|
|
10
|
+
return o && s && S(e, a, s), s;
|
|
11
|
+
};
|
|
12
|
+
let i = class extends v {
|
|
13
|
+
constructor() {
|
|
14
|
+
super(...arguments), this.tabs = [], this.enableSettings = !1, this.userLang = "cs", this.allowedLang = ["cs"], this.onSettingsChanged = () => {
|
|
15
|
+
}, this.selectedTabId = "", this.editTabId = "", this.deleteTabId = "", this.hasContentForTab = {}, this.isOpenModal = !1, this.isOpenDeleteModal = !1, this.sortableInstances = [], this.isAddMode = !1, this.sortableGroupId = `group-${Math.random().toString(36).substring(2, 9)}`;
|
|
16
|
+
}
|
|
17
|
+
connectedCallback() {
|
|
18
|
+
super.connectedCallback();
|
|
19
|
+
}
|
|
20
|
+
disconnectedCallback() {
|
|
21
|
+
this.destroySortables(), super.disconnectedCallback();
|
|
22
|
+
}
|
|
23
|
+
destroySortables() {
|
|
24
|
+
this.sortableInstances.forEach((t) => t.destroy()), this.sortableInstances = [];
|
|
25
|
+
}
|
|
26
|
+
initSortable() {
|
|
27
|
+
this.updateComplete.then(() => {
|
|
28
|
+
var o;
|
|
29
|
+
const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".tabs-container");
|
|
30
|
+
if (!t) return;
|
|
31
|
+
let e = [];
|
|
32
|
+
const a = C.create(t, {
|
|
33
|
+
group: this.sortableGroupId,
|
|
34
|
+
animation: 150,
|
|
35
|
+
handle: ".drag-handle",
|
|
36
|
+
ghostClass: "sortable-ghost",
|
|
37
|
+
chosenClass: "sortable-chosen",
|
|
38
|
+
dragClass: "sortable-drag",
|
|
39
|
+
sort: !0,
|
|
40
|
+
onStart: (s) => {
|
|
41
|
+
e = Array.from(s.from.childNodes);
|
|
42
|
+
},
|
|
43
|
+
onEnd: (s) => {
|
|
44
|
+
var b;
|
|
45
|
+
s.from.innerHTML = "", e.forEach((u) => s.from.appendChild(u));
|
|
46
|
+
const { oldIndex: d, newIndex: r } = s;
|
|
47
|
+
if (d == null || r == null || d === r) return;
|
|
48
|
+
const p = [...this.tabs], [m] = p.splice(d, 1);
|
|
49
|
+
p.splice(r, 0, m), this.tabs = p, (b = this.onSettingsChanged) == null || b.call(this, p), this.onSettingsChangedEvent(p);
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
this.sortableInstances.push(a);
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
onSettingsChangedEvent(t) {
|
|
56
|
+
this.dispatchEvent(
|
|
57
|
+
new CustomEvent("onSettingsChanged", {
|
|
58
|
+
bubbles: !0,
|
|
59
|
+
composed: !0,
|
|
60
|
+
detail: t
|
|
61
|
+
})
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
selectTab(t) {
|
|
65
|
+
this.selectedTabId = t;
|
|
66
|
+
}
|
|
67
|
+
firstUpdated() {
|
|
68
|
+
this.initialSelectedTabId ? this.selectedTabId = this.initialSelectedTabId : this.tabs.length > 0 && (this.selectedTabId = this.tabs[0].id), this.enableSettings && this.initSortable();
|
|
69
|
+
}
|
|
70
|
+
handleSlotChange(t, e) {
|
|
71
|
+
const s = t.target.assignedNodes({ flatten: !0 }).length > 0;
|
|
72
|
+
this.hasContentForTab = {
|
|
73
|
+
...this.hasContentForTab,
|
|
74
|
+
[e]: s
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
toggleModal(t) {
|
|
78
|
+
t && (this.editTabId = t), this.isOpenModal = !this.isOpenModal;
|
|
79
|
+
}
|
|
80
|
+
onSettingsChangedCallback(t) {
|
|
81
|
+
var e;
|
|
82
|
+
this.isAddMode = !1, this.tabs = t ? [...t] : [], (e = this.onSettingsChanged) == null || e.call(this, this.tabs), this.onSettingsChangedEvent(this.tabs);
|
|
83
|
+
}
|
|
84
|
+
deleteTab(t) {
|
|
85
|
+
var e;
|
|
86
|
+
this.tabs = this.tabs.filter((a) => a.id !== t), (e = this.onSettingsChanged) == null || e.call(this, this.tabs), this.onSettingsChangedEvent(this.tabs), this.isOpenDeleteModal = !1;
|
|
87
|
+
}
|
|
88
|
+
render() {
|
|
89
|
+
return h`
|
|
90
|
+
<div class="tabs-wrapper">
|
|
91
|
+
<div class="tabs-header">
|
|
92
|
+
<div class="tabs-container">
|
|
93
|
+
${this.tabs.map(
|
|
94
|
+
(t) => {
|
|
95
|
+
var e, a, o;
|
|
96
|
+
return h`
|
|
97
|
+
<div class="tab">
|
|
98
|
+
${this.enableSettings ? h`<div class="drag-handle">
|
|
99
|
+
<lit-icon
|
|
100
|
+
style="cursor: pointer"
|
|
101
|
+
icon="${"hamburger"}"
|
|
102
|
+
size="1rem"
|
|
103
|
+
></lit-icon>
|
|
104
|
+
</div>` : null}
|
|
105
|
+
|
|
106
|
+
<lit-button
|
|
107
|
+
variant="text"
|
|
108
|
+
label="${(e = t.label) != null && e[this.userLang] ? (a = t.label) == null ? void 0 : a[this.userLang] : (o = t.label) == null ? void 0 : o.default}"
|
|
109
|
+
.icon="${t.icon}"
|
|
110
|
+
.active="${t.id === this.selectedTabId ? "active" : ""}"
|
|
111
|
+
@click=${() => this.selectTab(t.id)}
|
|
112
|
+
>
|
|
113
|
+
</lit-button>
|
|
114
|
+
${this.enableSettings ? h`<div
|
|
115
|
+
style="display: flex;flex-direction: column;align-items: center"
|
|
116
|
+
>
|
|
117
|
+
<lit-icon
|
|
118
|
+
style="cursor: pointer"
|
|
119
|
+
@click="${() => {
|
|
120
|
+
this.isAddMode = !1, this.toggleModal(t.id);
|
|
121
|
+
}}"
|
|
122
|
+
icon="${"pen"}"
|
|
123
|
+
size="1rem"
|
|
124
|
+
></lit-icon>
|
|
125
|
+
<lit-icon
|
|
126
|
+
style="cursor: pointer"
|
|
127
|
+
@click="${() => {
|
|
128
|
+
this.deleteTabId = t.id, this.isOpenDeleteModal = !0;
|
|
129
|
+
}}"
|
|
130
|
+
icon="${"trash"}"
|
|
131
|
+
size="1rem"
|
|
132
|
+
></lit-icon>
|
|
133
|
+
</div> ` : null}
|
|
134
|
+
</div>
|
|
135
|
+
`;
|
|
136
|
+
}
|
|
137
|
+
)}
|
|
138
|
+
</div>
|
|
139
|
+
${this.enableSettings ? h`
|
|
140
|
+
<lit-icon-button
|
|
141
|
+
variant="dashed"
|
|
142
|
+
size="medium"
|
|
143
|
+
.icon="${"add"}"
|
|
144
|
+
@click="${() => {
|
|
145
|
+
this.isAddMode = !0, this.toggleModal();
|
|
146
|
+
}}"
|
|
147
|
+
></lit-icon-button>
|
|
148
|
+
` : null}
|
|
149
|
+
</div>
|
|
150
|
+
<tabs-overview-settings
|
|
151
|
+
.allowedLang="${this.allowedLang}"
|
|
152
|
+
.onClose="${() => {
|
|
153
|
+
this.isOpenModal = !1, this.editTabId = "";
|
|
154
|
+
}}"
|
|
155
|
+
.isOpenModal="${this.isOpenModal}"
|
|
156
|
+
.tabs="${this.tabs}"
|
|
157
|
+
.selectedTabId="${this.editTabId}"
|
|
158
|
+
.onSettingsChangedModal="${this.onSettingsChangedCallback.bind(this)}"
|
|
159
|
+
.isAddMode="${this.isAddMode}"
|
|
160
|
+
></tabs-overview-settings>
|
|
161
|
+
<lit-delete-modal
|
|
162
|
+
.isOpen="${this.isOpenDeleteModal}"
|
|
163
|
+
.text="${g("Opravdu chcete tab odstranit?")}"
|
|
164
|
+
.onClose="${() => {
|
|
165
|
+
this.isOpenDeleteModal = !1;
|
|
166
|
+
}}"
|
|
167
|
+
.onDelete="${() => {
|
|
168
|
+
this.isOpenDeleteModal = !1, this.deleteTab(this.deleteTabId);
|
|
169
|
+
}}"
|
|
170
|
+
></lit-delete-modal>
|
|
171
|
+
<div class="tabs-content">
|
|
172
|
+
${this.tabs.map(
|
|
173
|
+
(t) => {
|
|
174
|
+
var e, a, o;
|
|
175
|
+
return t.id === this.selectedTabId ? h`
|
|
176
|
+
<div class="tab-panel">
|
|
177
|
+
<slot
|
|
178
|
+
class="tab-slot"
|
|
179
|
+
name="${t.id}"
|
|
180
|
+
@slotchange=${(s) => this.handleSlotChange(s, t.id)}
|
|
181
|
+
></slot>
|
|
182
|
+
|
|
183
|
+
${this.hasContentForTab[t.id] ? null : h`
|
|
184
|
+
<div class="no-content">
|
|
185
|
+
<div
|
|
186
|
+
style="max-height: 7.125rem; max-width: 7.125rem"
|
|
187
|
+
>
|
|
188
|
+
<no-content></no-content>
|
|
189
|
+
</div>
|
|
190
|
+
${g(
|
|
191
|
+
`${(e = t.noContentText) != null && e[this.userLang] ? (a = t.noContentText) == null ? void 0 : a[this.userLang] : ((o = t.noContentText) == null ? void 0 : o.default) || "Pro tento tab není momentálně k dispozici žádný obsah."}`
|
|
192
|
+
)}
|
|
193
|
+
</div>
|
|
194
|
+
`}
|
|
195
|
+
</div>
|
|
196
|
+
` : null;
|
|
197
|
+
}
|
|
198
|
+
)}
|
|
199
|
+
</div>
|
|
200
|
+
</div>
|
|
201
|
+
`;
|
|
202
|
+
}
|
|
203
|
+
};
|
|
204
|
+
i.styles = [
|
|
205
|
+
y`
|
|
206
|
+
:host {
|
|
207
|
+
font-family: 'Inter', sans-serif;
|
|
208
|
+
}
|
|
209
|
+
.tabs-wrapper {
|
|
210
|
+
height: 100%;
|
|
211
|
+
display: block;
|
|
212
|
+
}
|
|
213
|
+
.tabs-content {
|
|
214
|
+
height: calc(100% - 3.4375rem);
|
|
215
|
+
}
|
|
216
|
+
::slotted(*) {
|
|
217
|
+
height: 100%;
|
|
218
|
+
}
|
|
219
|
+
.tab-panel {
|
|
220
|
+
height: 100%;
|
|
221
|
+
}
|
|
222
|
+
.tabs-header {
|
|
223
|
+
display: flex;
|
|
224
|
+
gap: 0.625rem;
|
|
225
|
+
margin: 0 0 0.625rem;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.tabs-container {
|
|
229
|
+
display: flex;
|
|
230
|
+
gap: 0.625rem;
|
|
231
|
+
}
|
|
232
|
+
.tab {
|
|
233
|
+
display: flex;
|
|
234
|
+
gap: 2px;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.no-content {
|
|
238
|
+
height: 100%;
|
|
239
|
+
font-size: 0.875rem;
|
|
240
|
+
text-align: center;
|
|
241
|
+
display: flex;
|
|
242
|
+
align-items: center;
|
|
243
|
+
justify-content: center;
|
|
244
|
+
flex-direction: column;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.drag-handle {
|
|
248
|
+
display: flex;
|
|
249
|
+
align-items: center;
|
|
250
|
+
}
|
|
251
|
+
`
|
|
252
|
+
];
|
|
253
|
+
n([
|
|
254
|
+
c({ type: Array })
|
|
255
|
+
], i.prototype, "tabs", 2);
|
|
256
|
+
n([
|
|
257
|
+
c({ type: String })
|
|
258
|
+
], i.prototype, "initialSelectedTabId", 2);
|
|
259
|
+
n([
|
|
260
|
+
c({ type: Boolean })
|
|
261
|
+
], i.prototype, "enableSettings", 2);
|
|
262
|
+
n([
|
|
263
|
+
c({ type: String })
|
|
264
|
+
], i.prototype, "userLang", 2);
|
|
265
|
+
n([
|
|
266
|
+
c({ type: Array })
|
|
267
|
+
], i.prototype, "allowedLang", 2);
|
|
268
|
+
n([
|
|
269
|
+
c({ attribute: !1 })
|
|
270
|
+
], i.prototype, "onSettingsChanged", 2);
|
|
271
|
+
n([
|
|
272
|
+
l()
|
|
273
|
+
], i.prototype, "selectedTabId", 2);
|
|
274
|
+
n([
|
|
275
|
+
l()
|
|
276
|
+
], i.prototype, "editTabId", 2);
|
|
277
|
+
n([
|
|
278
|
+
l()
|
|
279
|
+
], i.prototype, "deleteTabId", 2);
|
|
280
|
+
n([
|
|
281
|
+
l()
|
|
282
|
+
], i.prototype, "hasContentForTab", 2);
|
|
283
|
+
n([
|
|
284
|
+
l()
|
|
285
|
+
], i.prototype, "isOpenModal", 2);
|
|
286
|
+
n([
|
|
287
|
+
l()
|
|
288
|
+
], i.prototype, "isOpenDeleteModal", 2);
|
|
289
|
+
n([
|
|
290
|
+
l()
|
|
291
|
+
], i.prototype, "sortableInstances", 2);
|
|
292
|
+
n([
|
|
293
|
+
l()
|
|
294
|
+
], i.prototype, "isAddMode", 2);
|
|
295
|
+
i = n([
|
|
296
|
+
f("lit-tabs-overview")
|
|
297
|
+
], i);
|
|
298
|
+
export {
|
|
299
|
+
i as LitTabsOverview
|
|
300
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/react-wrappers/button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD,eAAO,MAAM,MAAM,4DAIjB,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import t from "../../node_modules/react/index.js";
|
|
2
|
+
import { createComponent as o } from "@lit-labs/react";
|
|
3
|
+
import { LitButton as e } from "../../shared/lit-button.js";
|
|
4
|
+
const a = o({
|
|
5
|
+
tagName: "lit-button",
|
|
6
|
+
// Názov custom elementu
|
|
7
|
+
elementClass: e,
|
|
8
|
+
// Trieda Lit komponentu
|
|
9
|
+
react: t
|
|
10
|
+
// React objekt
|
|
11
|
+
});
|
|
12
|
+
export {
|
|
13
|
+
a as Button
|
|
14
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import t from "../../node_modules/react/index.js";
|
|
2
|
+
import { createComponent as r } from "@lit-labs/react";
|
|
3
|
+
import { LitChart as e } from "../lit-chart.js";
|
|
4
|
+
const c = r({
|
|
5
|
+
tagName: "lit-chart",
|
|
6
|
+
// Názov custom elementu
|
|
7
|
+
elementClass: e,
|
|
8
|
+
// Trieda Lit komponentu
|
|
9
|
+
react: t
|
|
10
|
+
// React objekt
|
|
11
|
+
});
|
|
12
|
+
export {
|
|
13
|
+
c as Chart
|
|
14
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { LitProgressBar } from '../../shared/lit-progress-bar.js';
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const ProgressBar: import("@lit-labs/react").ReactWebComponent<LitProgressBar, {}>;
|
|
3
3
|
//# sourceMappingURL=progress-bar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../src/components/react-wrappers/progress-bar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../src/components/react-wrappers/progress-bar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,eAAO,MAAM,WAAW,iEAItB,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import r from "../../node_modules/react/index.js";
|
|
2
|
+
import { createComponent as e } from "@lit-labs/react";
|
|
3
|
+
import { LitProgressBar as o } from "../../shared/lit-progress-bar.js";
|
|
4
|
+
const s = e({
|
|
5
|
+
tagName: "lit-progress-bar",
|
|
6
|
+
// Názov custom elementu
|
|
7
|
+
elementClass: o,
|
|
8
|
+
// Trieda Lit komponentu
|
|
9
|
+
react: r
|
|
10
|
+
// React objekt
|
|
11
|
+
});
|
|
12
|
+
export {
|
|
13
|
+
s as ProgressBar
|
|
14
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import e from "../../node_modules/react/index.js";
|
|
2
|
+
import { createComponent as t } from "@lit-labs/react";
|
|
3
|
+
import { LitTabsOverview as r } from "../lit-tabs-overview.js";
|
|
4
|
+
const i = t({
|
|
5
|
+
tagName: "lit-tabs-overview",
|
|
6
|
+
// Názov custom elementu
|
|
7
|
+
elementClass: r,
|
|
8
|
+
// Trieda Lit komponentu
|
|
9
|
+
react: e
|
|
10
|
+
// React objekt
|
|
11
|
+
});
|
|
12
|
+
export {
|
|
13
|
+
i as TabsOverview
|
|
14
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -10,6 +10,14 @@ export * from './components/lit-badge.js';
|
|
|
10
10
|
export { LitBadge } from './components/lit-badge.js';
|
|
11
11
|
export * from './components/lit-filter-modal.js';
|
|
12
12
|
export { LitFilterModal } from './components/lit-filter-modal.js';
|
|
13
|
+
export * from './components/lit-chart.js';
|
|
14
|
+
export { LitChart } from './components/lit-chart.js';
|
|
15
|
+
export * from './components/lit-tabs-overview.js';
|
|
16
|
+
export { LitTabsOverview } from './components/lit-tabs-overview.js';
|
|
17
|
+
export * from './components/lit-multiselect-item.js';
|
|
18
|
+
export { LitMultiselectItem } from './components/lit-multiselect-item.js';
|
|
19
|
+
export * from './shared/lit-button.js';
|
|
20
|
+
export { LitButton } from './shared/lit-button.js';
|
|
13
21
|
export * from './components/react-wrappers/case-variables-tab.js';
|
|
14
22
|
export { CaseVariablesTab } from './components/react-wrappers/case-variables-tab.js';
|
|
15
23
|
export * from './components/react-wrappers/data-grid-tanstack.js';
|
|
@@ -22,4 +30,12 @@ export * from './components/react-wrappers/badge.js';
|
|
|
22
30
|
export { Badge } from './components/react-wrappers/badge.js';
|
|
23
31
|
export * from './components/react-wrappers/filter-modal.js';
|
|
24
32
|
export { FilterModal } from './components/react-wrappers/filter-modal.js';
|
|
33
|
+
export * from './components/react-wrappers/chart.js';
|
|
34
|
+
export { Chart } from './components/react-wrappers/chart.js';
|
|
35
|
+
export * from './components/react-wrappers/tabs-overview.js';
|
|
36
|
+
export { TabsOverview } from './components/react-wrappers/tabs-overview.js';
|
|
37
|
+
export * from './components/react-wrappers/progress-bar.js';
|
|
38
|
+
export { ProgressBar } from './components/react-wrappers/progress-bar.js';
|
|
39
|
+
export * from './components/react-wrappers/button.js';
|
|
40
|
+
export { Button } from './components/react-wrappers/button.js';
|
|
25
41
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,wCAAwC,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,cAAc,wCAAwC,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,wCAAwC,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,cAAc,wCAAwC,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,cAAc,sCAAsC,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1E,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGnD,cAAc,mDAAmD,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mDAAmD,CAAC;AACrF,cAAc,mDAAmD,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mDAAmD,CAAC;AACrF,cAAc,gDAAgD,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAChF,cAAc,4CAA4C,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,cAAc,sCAAsC,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAC7D,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAC1E,cAAc,sCAAsC,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAC7D,cAAc,8CAA8C,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAC5E,cAAc,6CAA6C,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAC1E,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,26 +1,42 @@
|
|
|
1
1
|
import { LitCaseVariablesTab as o } from "./components/lit-case-variables-tab.js";
|
|
2
|
-
import { LitDataGridTanstack as
|
|
3
|
-
import { LitAttachmentsTab as
|
|
2
|
+
import { LitDataGridTanstack as a } from "./components/lit-data-grid-tanstack.js";
|
|
3
|
+
import { LitAttachmentsTab as i } from "./components/lit-attachments-tab.js";
|
|
4
4
|
import { LitSectionTab as p } from "./components/lit-section-tab.js";
|
|
5
|
-
import { LitBadge as
|
|
6
|
-
import { LitFilterModal as
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
5
|
+
import { LitBadge as s } from "./components/lit-badge.js";
|
|
6
|
+
import { LitFilterModal as L } from "./components/lit-filter-modal.js";
|
|
7
|
+
import { LitChart as l } from "./components/lit-chart.js";
|
|
8
|
+
import { LitTabsOverview as c } from "./components/lit-tabs-overview.js";
|
|
9
|
+
import { LitMultiselectItem as B } from "./components/lit-multiselect-item.js";
|
|
10
|
+
import { LitButton as v } from "./shared/lit-button.js";
|
|
11
|
+
import { CaseVariablesTab as g } from "./components/react-wrappers/case-variables-tab.js";
|
|
12
|
+
import { DataGridTanstack as M } from "./components/react-wrappers/data-grid-tanstack.js";
|
|
13
|
+
import { AttachmentsTab as w } from "./components/react-wrappers/attachments-tab.js";
|
|
14
|
+
import { SectionTab as D } from "./components/react-wrappers/section-tab.js";
|
|
15
|
+
import { Badge as G } from "./components/react-wrappers/badge.js";
|
|
16
|
+
import { FilterModal as S } from "./components/react-wrappers/filter-modal.js";
|
|
17
|
+
import { Chart as I } from "./components/react-wrappers/chart.js";
|
|
18
|
+
import { TabsOverview as j } from "./components/react-wrappers/tabs-overview.js";
|
|
19
|
+
import { ProgressBar as y } from "./components/react-wrappers/progress-bar.js";
|
|
20
|
+
import { Button as E } from "./components/react-wrappers/button.js";
|
|
13
21
|
export {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
22
|
+
w as AttachmentsTab,
|
|
23
|
+
G as Badge,
|
|
24
|
+
E as Button,
|
|
25
|
+
g as CaseVariablesTab,
|
|
26
|
+
I as Chart,
|
|
27
|
+
M as DataGridTanstack,
|
|
28
|
+
S as FilterModal,
|
|
29
|
+
i as LitAttachmentsTab,
|
|
30
|
+
s as LitBadge,
|
|
31
|
+
v as LitButton,
|
|
21
32
|
o as LitCaseVariablesTab,
|
|
22
|
-
|
|
23
|
-
|
|
33
|
+
l as LitChart,
|
|
34
|
+
a as LitDataGridTanstack,
|
|
35
|
+
L as LitFilterModal,
|
|
36
|
+
B as LitMultiselectItem,
|
|
24
37
|
p as LitSectionTab,
|
|
25
|
-
|
|
38
|
+
c as LitTabsOverview,
|
|
39
|
+
y as ProgressBar,
|
|
40
|
+
D as SectionTab,
|
|
41
|
+
j as TabsOverview
|
|
26
42
|
};
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { LitElement as d, html as r, css as u } from "lit";
|
|
2
|
+
import { customElement as m } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
|
|
3
|
+
import { property as e } from "../node_modules/@lit/reactive-element/decorators/property.js";
|
|
4
|
+
import h from "./styles/button-shared-styles.js";
|
|
5
|
+
var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (s, n, a, l) => {
|
|
6
|
+
for (var o = l > 1 ? void 0 : l ? y(n, a) : n, p = s.length - 1, c; p >= 0; p--)
|
|
7
|
+
(c = s[p]) && (o = (l ? c(n, a, o) : c(o)) || o);
|
|
8
|
+
return l && o && b(n, a, o), o;
|
|
9
|
+
};
|
|
10
|
+
let t = class extends d {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments), this.variant = "contained", this.size = "medium", this.label = "Button", this.fullWidth = !1, this.disabled = !1, this.count = void 0, this.active = !1, this.isLoading = !1;
|
|
13
|
+
}
|
|
14
|
+
render() {
|
|
15
|
+
const s = `button--${this.size} button--${this.variant} ${this.fullWidth ? "button--fullWidth" : ""} ${this.active ? "active" : ""}`, n = this.count !== void 0 && this.count !== null && this.count >= 0;
|
|
16
|
+
return r`
|
|
17
|
+
<button ?disabled=${this.disabled} @click=${this.onClick} class=${s}>
|
|
18
|
+
<div class="button--content">
|
|
19
|
+
${this.isLoading ? r` <lit-loader size="small" class="button--loader"></lit-loader> ` : null}
|
|
20
|
+
|
|
21
|
+
<div
|
|
22
|
+
class="button-inner"
|
|
23
|
+
style="visibility: ${this.isLoading ? "hidden" : "visible"};
|
|
24
|
+
"
|
|
25
|
+
>
|
|
26
|
+
<slot name="start-icon">
|
|
27
|
+
${this.icon ? r`<lit-icon
|
|
28
|
+
class="start-icon"
|
|
29
|
+
size="1.25rem"
|
|
30
|
+
icon="${this.icon}"
|
|
31
|
+
></lit-icon>` : ""}
|
|
32
|
+
</slot>
|
|
33
|
+
${this.label}
|
|
34
|
+
${n ? r`<lit-pill count=${this.count}></lit-pill>` : ""}
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</button>
|
|
38
|
+
`;
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
t.styles = [
|
|
42
|
+
// styles,
|
|
43
|
+
h,
|
|
44
|
+
u`
|
|
45
|
+
/* Basic button styles */
|
|
46
|
+
button {
|
|
47
|
+
line-height: 1.5rem;
|
|
48
|
+
flex-direction: row;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Size Variants */
|
|
53
|
+
.button--small {
|
|
54
|
+
-webkit-padding: 0.375rem 1rem;
|
|
55
|
+
padding: 0.1875rem 0.375rem;
|
|
56
|
+
font-size: 11px;
|
|
57
|
+
}
|
|
58
|
+
.button--medium {
|
|
59
|
+
font-size: 0.75rem;
|
|
60
|
+
font-weight: 500;
|
|
61
|
+
-webkit-padding: 0.375rem 0.75rem;
|
|
62
|
+
padding: 0.375rem 0.75rem;
|
|
63
|
+
}
|
|
64
|
+
.button--large {
|
|
65
|
+
font-weight: 700;
|
|
66
|
+
-webkit-padding: 0.75rem 1.5rem;
|
|
67
|
+
padding: 0.75rem 1.5rem;
|
|
68
|
+
font-size: 0.875rem;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* FullWidth style */
|
|
72
|
+
.button--fullWidth {
|
|
73
|
+
width: 100%;
|
|
74
|
+
display: block;
|
|
75
|
+
}
|
|
76
|
+
::slotted([slot='start-icon']),
|
|
77
|
+
.start-icon {
|
|
78
|
+
//margin-right: 8px;
|
|
79
|
+
font-size: 1.25rem !important;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.button--content {
|
|
83
|
+
position: relative;
|
|
84
|
+
display: inline-flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
justify-content: center;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.button--loader {
|
|
90
|
+
position: absolute;
|
|
91
|
+
left: 50%;
|
|
92
|
+
top: 50%;
|
|
93
|
+
transform: translate(-50%, -50%);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.button-inner {
|
|
97
|
+
display: inline-flex;
|
|
98
|
+
align-items: center;
|
|
99
|
+
gap: 0.5rem;
|
|
100
|
+
visibility: visible;
|
|
101
|
+
}
|
|
102
|
+
`
|
|
103
|
+
];
|
|
104
|
+
i([
|
|
105
|
+
e({ type: String })
|
|
106
|
+
], t.prototype, "variant", 2);
|
|
107
|
+
i([
|
|
108
|
+
e({ type: String })
|
|
109
|
+
], t.prototype, "size", 2);
|
|
110
|
+
i([
|
|
111
|
+
e({ type: String })
|
|
112
|
+
], t.prototype, "label", 2);
|
|
113
|
+
i([
|
|
114
|
+
e({ type: String })
|
|
115
|
+
], t.prototype, "icon", 2);
|
|
116
|
+
i([
|
|
117
|
+
e({ type: Boolean })
|
|
118
|
+
], t.prototype, "fullWidth", 2);
|
|
119
|
+
i([
|
|
120
|
+
e({ type: Boolean })
|
|
121
|
+
], t.prototype, "disabled", 2);
|
|
122
|
+
i([
|
|
123
|
+
e({ type: Number })
|
|
124
|
+
], t.prototype, "count", 2);
|
|
125
|
+
i([
|
|
126
|
+
e({ type: Function })
|
|
127
|
+
], t.prototype, "onClick", 2);
|
|
128
|
+
i([
|
|
129
|
+
e({ type: Boolean })
|
|
130
|
+
], t.prototype, "active", 2);
|
|
131
|
+
i([
|
|
132
|
+
e({ type: Boolean })
|
|
133
|
+
], t.prototype, "isLoading", 2);
|
|
134
|
+
t = i([
|
|
135
|
+
m("lit-button")
|
|
136
|
+
], t);
|
|
137
|
+
export {
|
|
138
|
+
t as LitButton
|
|
139
|
+
};
|