wj-elements 0.1.4 → 0.1.6

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.
Files changed (89) hide show
  1. package/package.json +1 -1
  2. package/dist/dark.css +0 -1
  3. package/dist/light.css +0 -1
  4. package/dist/localize-DVuO3S17.js +0 -43
  5. package/dist/popup.element-Dj9j__Dh.js +0 -1068
  6. package/dist/router-links-FtZbFUto.js +0 -146
  7. package/dist/styles.css +0 -1
  8. package/dist/wje-accordion-item.js +0 -88
  9. package/dist/wje-accordion.js +0 -79
  10. package/dist/wje-animation.js +0 -121
  11. package/dist/wje-aside.js +0 -55
  12. package/dist/wje-avatar.js +0 -74
  13. package/dist/wje-badge.js +0 -48
  14. package/dist/wje-breadcrumb.js +0 -148
  15. package/dist/wje-breadcrumbs.js +0 -67
  16. package/dist/wje-button-group.js +0 -78
  17. package/dist/wje-button.js +0 -177
  18. package/dist/wje-card-content.js +0 -48
  19. package/dist/wje-card-controls.js +0 -48
  20. package/dist/wje-card-header.js +0 -47
  21. package/dist/wje-card-subtitle.js +0 -55
  22. package/dist/wje-card-title.js +0 -55
  23. package/dist/wje-card.js +0 -48
  24. package/dist/wje-carousel-item.js +0 -33
  25. package/dist/wje-carousel.js +0 -177
  26. package/dist/wje-checkbox.js +0 -104
  27. package/dist/wje-chip.js +0 -32
  28. package/dist/wje-col.js +0 -27
  29. package/dist/wje-color-picker.js +0 -953
  30. package/dist/wje-container.js +0 -57
  31. package/dist/wje-copy-button.js +0 -164
  32. package/dist/wje-dialog.js +0 -86
  33. package/dist/wje-divider.js +0 -53
  34. package/dist/wje-dropdown.js +0 -68
  35. package/dist/wje-element.js +0 -453
  36. package/dist/wje-fetchAndParseCSS.js +0 -40
  37. package/dist/wje-file-upload-item.js +0 -115
  38. package/dist/wje-file-upload.js +0 -297
  39. package/dist/wje-footer.js +0 -56
  40. package/dist/wje-form.js +0 -28
  41. package/dist/wje-format-digital.js +0 -85
  42. package/dist/wje-grid.js +0 -28
  43. package/dist/wje-header.js +0 -58
  44. package/dist/wje-icon-picker.js +0 -221
  45. package/dist/wje-icon.js +0 -117
  46. package/dist/wje-img-comparer.js +0 -111
  47. package/dist/wje-img.js +0 -58
  48. package/dist/wje-infinite-scroll.js +0 -193
  49. package/dist/wje-inline-edit.js +0 -120
  50. package/dist/wje-input-file.js +0 -85
  51. package/dist/wje-input.js +0 -240
  52. package/dist/wje-item.js +0 -45
  53. package/dist/wje-label.js +0 -67
  54. package/dist/wje-list.js +0 -53
  55. package/dist/wje-main.js +0 -56
  56. package/dist/wje-masonry.js +0 -218
  57. package/dist/wje-master.js +0 -342
  58. package/dist/wje-menu-button.js +0 -65
  59. package/dist/wje-menu-item.js +0 -192
  60. package/dist/wje-menu-label.js +0 -57
  61. package/dist/wje-menu.js +0 -74
  62. package/dist/wje-option.js +0 -99
  63. package/dist/wje-options.js +0 -63
  64. package/dist/wje-popup.js +0 -5
  65. package/dist/wje-progress-bar.js +0 -145
  66. package/dist/wje-radio-group.js +0 -101
  67. package/dist/wje-radio.js +0 -46
  68. package/dist/wje-rate.js +0 -260
  69. package/dist/wje-relative-time.js +0 -85
  70. package/dist/wje-route.js +0 -28
  71. package/dist/wje-router-link.js +0 -64
  72. package/dist/wje-router-outlet.js +0 -127
  73. package/dist/wje-routerx.js +0 -1088
  74. package/dist/wje-row.js +0 -58
  75. package/dist/wje-select.js +0 -240
  76. package/dist/wje-slider.js +0 -177
  77. package/dist/wje-split-view.js +0 -112
  78. package/dist/wje-store.js +0 -192
  79. package/dist/wje-tab-group.js +0 -105
  80. package/dist/wje-tab-panel.js +0 -52
  81. package/dist/wje-tab.js +0 -59
  82. package/dist/wje-textarea.js +0 -116
  83. package/dist/wje-thumbnail.js +0 -64
  84. package/dist/wje-toast.js +0 -76
  85. package/dist/wje-toggle.js +0 -94
  86. package/dist/wje-toolbar-action.js +0 -63
  87. package/dist/wje-toolbar.js +0 -61
  88. package/dist/wje-tooltip.js +0 -105
  89. package/dist/wje-visually-hidden.js +0 -56
@@ -1,342 +0,0 @@
1
- var g = Object.defineProperty;
2
- var x = (d, e, t) => e in d ? g(d, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[e] = t;
3
- var l = (d, e, t) => (x(d, typeof e != "symbol" ? e + "" : e, t), t);
4
- import f, { WjElementUtils as w } from "./wje-element.js";
5
- import { event as j } from "./wje-element.js";
6
- import { defaultStoreActions as k, store as N } from "./wje-store.js";
7
- import { b as z, w as B } from "./router-links-FtZbFUto.js";
8
- import { fetchAndParseCSS as F } from "./wje-fetchAndParseCSS.js";
9
- import { L as h } from "./localize-DVuO3S17.js";
10
- import { default as q } from "./wje-accordion.js";
11
- import { default as V } from "./wje-accordion-item.js";
12
- import { default as H } from "./wje-animation.js";
13
- import { default as K } from "./wje-aside.js";
14
- import { default as $ } from "./wje-avatar.js";
15
- import { default as Z } from "./wje-badge.js";
16
- import { default as X } from "./wje-breadcrumb.js";
17
- import { default as ee } from "./wje-breadcrumbs.js";
18
- import { default as re } from "./wje-button.js";
19
- import { default as ae } from "./wje-button-group.js";
20
- import { default as ne } from "./wje-card.js";
21
- import { default as ie } from "./wje-card-content.js";
22
- import { default as fe } from "./wje-card-controls.js";
23
- import { default as me } from "./wje-card-header.js";
24
- import { default as ce } from "./wje-card-subtitle.js";
25
- import { default as ge } from "./wje-card-title.js";
26
- import { default as we } from "./wje-carousel.js";
27
- import { default as be } from "./wje-carousel-item.js";
28
- import { default as Ee } from "./wje-checkbox.js";
29
- import { default as ye } from "./wje-chip.js";
30
- import { default as Le } from "./wje-col.js";
31
- import { default as Re } from "./wje-color-picker.js";
32
- import { default as je } from "./wje-container.js";
33
- import { default as ke } from "./wje-copy-button.js";
34
- import { default as Oe } from "./wje-dialog.js";
35
- import { default as Be } from "./wje-divider.js";
36
- import { default as Fe } from "./wje-dropdown.js";
37
- import { default as qe } from "./wje-file-upload.js";
38
- import { default as Ve } from "./wje-file-upload-item.js";
39
- import { default as He } from "./wje-footer.js";
40
- import { default as Ke } from "./wje-format-digital.js";
41
- import { default as $e } from "./wje-grid.js";
42
- import { default as Ze } from "./wje-header.js";
43
- import { default as Xe } from "./wje-icon.js";
44
- import { default as et } from "./wje-icon-picker.js";
45
- import { default as rt } from "./wje-img.js";
46
- import { default as at } from "./wje-img-comparer.js";
47
- import { default as nt } from "./wje-infinite-scroll.js";
48
- import { default as it } from "./wje-inline-edit.js";
49
- import { default as ft } from "./wje-input.js";
50
- import { default as mt } from "./wje-input-file.js";
51
- import { default as ct } from "./wje-item.js";
52
- import { default as gt } from "./wje-label.js";
53
- import { default as wt } from "./wje-list.js";
54
- import { default as bt } from "./wje-main.js";
55
- import { default as Et } from "./wje-masonry.js";
56
- import { default as yt } from "./wje-menu.js";
57
- import { default as Lt } from "./wje-menu-button.js";
58
- import { default as Rt } from "./wje-menu-item.js";
59
- import { default as jt } from "./wje-menu-label.js";
60
- import { default as kt } from "./wje-option.js";
61
- import { default as Ot } from "./wje-options.js";
62
- import "./wje-popup.js";
63
- import { default as Bt } from "./wje-progress-bar.js";
64
- import { default as Ft } from "./wje-radio.js";
65
- import { default as qt } from "./wje-radio-group.js";
66
- import { default as Vt } from "./wje-rate.js";
67
- import { default as Ht } from "./wje-relative-time.js";
68
- import { default as Kt } from "./wje-route.js";
69
- import { default as $t } from "./wje-routerx.js";
70
- import { default as Zt } from "./wje-router-link.js";
71
- import { default as Xt } from "./wje-router-outlet.js";
72
- import { default as er } from "./wje-row.js";
73
- import { default as rr } from "./wje-select.js";
74
- import { default as ar } from "./wje-slider.js";
75
- import { default as nr } from "./wje-split-view.js";
76
- import { default as ir } from "./wje-tab.js";
77
- import { default as fr } from "./wje-tab-group.js";
78
- import { default as mr } from "./wje-tab-panel.js";
79
- import { default as cr } from "./wje-textarea.js";
80
- import { default as gr } from "./wje-thumbnail.js";
81
- import { default as wr } from "./wje-toast.js";
82
- import { default as br } from "./wje-toggle.js";
83
- import { default as Er } from "./wje-toolbar.js";
84
- import { default as yr } from "./wje-toolbar-action.js";
85
- import { default as Lr } from "./wje-tooltip.js";
86
- import { default as Rr } from "./wje-visually-hidden.js";
87
- import { P as jr } from "./popup.element-Dj9j__Dh.js";
88
- const v = {
89
- code: "sk",
90
- name: "Slovak",
91
- dir: "ltr",
92
- welcome: "Vitajte",
93
- "wj.file.upload.button": "Vybrať súbor",
94
- "wj.file.upload.uploaded": "Nahraných: ",
95
- "wj.file.upload.from": "z"
96
- };
97
- h.registerTranslation(v);
98
- const b = {
99
- code: "en",
100
- name: "English",
101
- dir: "ltr",
102
- welcome: "Welcome",
103
- "wj.file.upload.button": "Browse files",
104
- "wj.file.upload.uploaded": "Uploaded: ",
105
- "wj.file.upload.from": "from"
106
- };
107
- h.registerTranslation(b);
108
- const A = ".container{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column}.container-w-dropzones{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:row}";
109
- class m extends f {
110
- constructor() {
111
- super(), this.className = "Reorder", this.dragEl = null, this.items = [], this.originalIndex = null;
112
- }
113
- static get cssStyleSheet() {
114
- return A;
115
- }
116
- setupAttributes() {
117
- this.isShadowRoot = "open";
118
- }
119
- draw(e, t, o) {
120
- const n = document.createDocumentFragment(), a = document.createElement("div");
121
- a.classList.add("container"), a.setAttribute("part", "native");
122
- const r = document.createElement("slot");
123
- return r.classList.add("reorder-items"), a.appendChild(r), n.appendChild(a), this.container = a, n;
124
- }
125
- afterDraw(e, t, o) {
126
- const n = this.querySelectorAll("wje-reorder-item"), a = this.querySelectorAll("wje-reorder-dropzone");
127
- a && a.forEach((r) => {
128
- this.container.classList.remove("container"), this.container.classList.add("container-w-dropzones");
129
- }), n && n.forEach((r) => {
130
- const s = r.querySelectorAll("[slot=handle]");
131
- (s.length > 0 ? s : [r]).forEach((p) => {
132
- p.setAttribute("draggable", "true"), this.attachEventListeners(p);
133
- });
134
- });
135
- }
136
- onDragStart(e) {
137
- if (this.hasAttribute("disabled")) {
138
- e.preventDefault();
139
- return;
140
- }
141
- const t = new Image();
142
- t.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=", e.dataTransfer.setDragImage(t, 0, 0), this.dragEl = e.currentTarget.closest("wje-reorder-item"), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/html", `${this.dragEl.innerHTML}`), this.originalIndex = [...this.dragEl.parentNode.children].indexOf(
143
- this.dragEl
144
- ), this.originalParent = this.dragEl.parentNode;
145
- }
146
- onDragOver(e) {
147
- e.preventDefault();
148
- const t = e.currentTarget.closest("wje-reorder-item"), o = t.parentNode;
149
- this.dragEl !== t ? (this.updateDropStyles(t, this.isMovingDown(e)), this.updateItemsPosition(o, t, this.isMovingDown(e))) : t.shadowRoot.querySelector("div").classList.add("moving");
150
- }
151
- onDragEnter(e) {
152
- }
153
- onDragLeave(e) {
154
- }
155
- onDrop(e) {
156
- e.preventDefault();
157
- const t = e.currentTarget.closest("wje-reorder-item");
158
- if (t.shadowRoot.querySelector("div").classList.remove("moving"), !t.parentNode)
159
- return;
160
- t.parentNode.insertBefore(this.dragEl, t);
161
- }
162
- onDragEnd(e) {
163
- const t = this.dragEl.parentNode, o = Array.from(t.children).indexOf(this.dragEl);
164
- [t, this.originalParent].forEach((a) => {
165
- a.childNodes.forEach((r) => {
166
- if (r.nodeType === 1) {
167
- const s = r.shadowRoot.querySelector("div");
168
- s && ["drag--up", "drag--down", "moving"].forEach(
169
- (i) => s.classList.remove(i)
170
- );
171
- }
172
- });
173
- });
174
- const n = Array.from(t.children).map((a) => {
175
- const r = a.cloneNode(!0), s = r.querySelector(".handle");
176
- return s && s.remove(), r.innerText.trim();
177
- });
178
- this.dispatchChange(this.originalIndex, o, n);
179
- }
180
- attachEventListeners(e) {
181
- e.addEventListener("dragstart", this.onDragStart.bind(this), !1), e.addEventListener("touchstart", this.onDragStart.bind(this), !1), e.addEventListener("dragenter", this.onDragEnter.bind(this), !1), e.addEventListener("dragover", this.onDragOver.bind(this), !1), e.addEventListener("dragleave", this.onDragLeave.bind(this), !1), e.addEventListener("drop", this.onDrop.bind(this), !1), e.addEventListener("dragend", this.onDragEnd.bind(this), !1), e.addEventListener("touchend", this.onDragEnd.bind(this), !1);
182
- }
183
- updateDropStyles(e, t) {
184
- const o = e.shadowRoot.querySelector("div").classList;
185
- o.toggle("drag--down", t), o.toggle("drag--up", !t);
186
- }
187
- updateItemsPosition(e, t, o) {
188
- e.insertBefore(
189
- this.dragEl,
190
- o ? t.nextSibling : t
191
- );
192
- }
193
- isMovingDown(e) {
194
- const t = e.currentTarget.closest("wje-reorder-item").parentNode, o = Array.from(t.children).indexOf(this.dragEl), n = Array.from(t.children).indexOf(
195
- e.currentTarget.closest("wje-reorder-item")
196
- );
197
- return o < n;
198
- }
199
- dispatchChange(e, t, o) {
200
- console.log("FROM:", e), console.log("TO:", t), console.log("ORDER:", o), this.dispatchEvent(
201
- new CustomEvent("wje-reorder:change", {
202
- detail: { from: e, to: t, order: o }
203
- })
204
- );
205
- }
206
- }
207
- m.define("wje-reorder", m);
208
- const E = ":host{--reorder-background-color: var(--wje-color-contrast-lowest);--reorder-item-spacing: .5rem}.item{width:134px;height:19px;display:flex;align-items:center;justify-content:center;position:relative;gap:var(--reorder-item-spacing);padding:var(--reorder-item-spacing);border-radius:var(--wje-border-radius-small);background-color:--reorder-background-color;cursor:grab;transition:transform .3s linear}.item-w-handle{cursor:default}.item:hover:not(.item-w-handle){background-color:#f4f4f5}.item:active:not(.item-w-handle):not(.moving){background-color:--reorder-background-color;cursor:grabbing}.moving{background-color:#d3d3d3}.handle{cursor:grab;gap:10px}.handle:active{cursor:grabbing}.name{width:108px;height:19px;text-align:center;font-size:var(--wje-font-size-medium);font-weight:400;line-height:19.36px;gap:10px}.drag--down{--item-transform: translateY(-10px)}.drag--up{--item-transform: translateY(10px)}.item{transform:var(--item-transform)}";
209
- class u extends f {
210
- constructor() {
211
- super();
212
- l(this, "className", "ReorderItem");
213
- }
214
- static get cssStyleSheet() {
215
- return E;
216
- }
217
- setupAttributes() {
218
- this.isShadowRoot = "open";
219
- }
220
- draw(t, o, n) {
221
- let a = document.createDocumentFragment(), r = document.createElement("div");
222
- r.classList.add("item"), r.setAttribute("part", "native-reorder-item");
223
- let s = document.createElement("slot");
224
- if (s.classList.add("name"), w.hasSlot(this, "handle")) {
225
- const i = document.createElement("slot");
226
- i.classList.add("handle"), i.setAttribute("name", "handle"), i.setAttribute("part", "handle-part"), r.classList.add("item-w-handle"), r.appendChild(i);
227
- } else
228
- s.setAttribute("draggable", "true");
229
- return r.appendChild(s), a.appendChild(r), a;
230
- }
231
- }
232
- u.define("wje-reorder-item", u);
233
- const S = ".dropzone{border:1px dashed lightgrey;border-radius:var(--wje-border-radius-small);margin:.5rem;display:flex;flex-direction:column;align-items:center;overflow:hidden;justify-content:center;min-height:250px}";
234
- class c extends f {
235
- constructor() {
236
- super();
237
- l(this, "className", "ReorderDropzone");
238
- }
239
- static get cssStyleSheet() {
240
- return S;
241
- }
242
- setupAttributes() {
243
- this.isShadowRoot = "open";
244
- }
245
- draw(t, o, n) {
246
- let a = document.createDocumentFragment(), r = document.createElement("div");
247
- r.classList.add("dropzone");
248
- let s = document.createElement("slot");
249
- return r.appendChild(s), a.appendChild(r), a;
250
- }
251
- }
252
- c.define("wje-reorder-dropzone", c);
253
- export {
254
- q as Accordion,
255
- V as AccordionItem,
256
- H as Animation,
257
- K as Aside,
258
- $ as Avatar,
259
- Z as Badge,
260
- X as Breadcrumb,
261
- ee as Breadcrumbs,
262
- re as Button,
263
- ae as ButtonGroup,
264
- ne as Card,
265
- ie as CardContent,
266
- fe as CardControls,
267
- me as CardHeader,
268
- ce as CardSubtitle,
269
- ge as CardTitle,
270
- we as Carousel,
271
- be as CarouselItem,
272
- Ee as Checkbox,
273
- ye as Chip,
274
- Le as Col,
275
- Re as ColorPicker,
276
- je as Container,
277
- ke as CopyButton,
278
- Oe as Dialog,
279
- Be as Divider,
280
- Fe as Dropdown,
281
- qe as FileUpload,
282
- Ve as FileUploadItem,
283
- He as Footer,
284
- Ke as FormatDigital,
285
- $e as Grid,
286
- Ze as Header,
287
- Xe as Icon,
288
- et as IconPicker,
289
- rt as Img,
290
- at as ImgComparer,
291
- nt as InfiniteScroll,
292
- it as InlineEdit,
293
- ft as Input,
294
- mt as InputFile,
295
- ct as Item,
296
- gt as Label,
297
- wt as List,
298
- h as Localizer,
299
- bt as Main,
300
- Et as Masonry,
301
- yt as Menu,
302
- Lt as MenuButton,
303
- Rt as MenuItem,
304
- jt as MenuLabel,
305
- kt as Option,
306
- Ot as Options,
307
- jr as Popup,
308
- Bt as ProgressBar,
309
- Ft as Radio,
310
- qt as RadioGroup,
311
- Vt as Rate,
312
- Ht as RelativeTime,
313
- m as Reorder,
314
- c as ReorderDropzone,
315
- u as ReorderItem,
316
- Kt as Route,
317
- Zt as RouterLink,
318
- Xt as RouterOutlet,
319
- $t as Routerx,
320
- er as Row,
321
- rr as Select,
322
- ar as Slider,
323
- nr as SplitView,
324
- ir as Tab,
325
- fr as TabGroup,
326
- mr as TabPanel,
327
- cr as Textarea,
328
- gr as Thumbnail,
329
- wr as Toast,
330
- br as Toggle,
331
- Er as Toolbar,
332
- yr as ToolbarAction,
333
- Lr as Tooltip,
334
- Rr as VisuallyHidden,
335
- f as WJElement,
336
- z as bindRouterLinks,
337
- k as defaultStoreActions,
338
- j as event,
339
- F as fetchAndParseCSS,
340
- N as store,
341
- B as withRouterLinks
342
- };
@@ -1,65 +0,0 @@
1
- var l = Object.defineProperty;
2
- var i = (n, t, e) => t in n ? l(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
3
- var o = (n, t, e) => (i(n, typeof t != "symbol" ? t + "" : t, e), e);
4
- import u, { event as c } from "./wje-element.js";
5
- const d = ":host{display:inline-flex}@media (min-width: 768px){:host{display:none}}";
6
- class r extends u {
7
- /**
8
- * Creates an instance of MenuButton.
9
- *
10
- * @constructor
11
- */
12
- constructor() {
13
- super();
14
- o(this, "className", "MenuButton");
15
- }
16
- /**
17
- * Returns the CSS styles for the component.
18
- *
19
- * @static
20
- * @returns {CSSStyleSheet}
21
- */
22
- static get cssStyleSheet() {
23
- return d;
24
- }
25
- /**
26
- * Returns the list of attributes to observe for changes.
27
- *
28
- * @static
29
- * @returns {Array<string>}
30
- */
31
- static get observedAttributes() {
32
- return [];
33
- }
34
- /**
35
- * Sets up the attributes for the component.
36
- */
37
- setupAttributes() {
38
- this.isShadowRoot = "open";
39
- }
40
- /**
41
- * Draws the component.
42
- *
43
- * @param {Object} context - The context for drawing.
44
- * @param {Object} store - The store for drawing.
45
- * @param {Object} params - The parameters for drawing.
46
- * @returns {DocumentFragment}
47
- */
48
- draw(e, m, p) {
49
- let s = document.createDocumentFragment(), a = document.createElement("slot");
50
- return s.appendChild(a), s;
51
- }
52
- /**
53
- * Refreshes the component after drawing.
54
- * Adds a click event listener that toggles the "open" class on the content element.
55
- */
56
- afterDraw() {
57
- c.addListener(this, "click", null, (e) => {
58
- document.querySelector(`#${this.contentId}`).classList.toggle("open");
59
- });
60
- }
61
- }
62
- r.define("wje-menu-button", r);
63
- export {
64
- r as default
65
- };
@@ -1,192 +0,0 @@
1
- var x = Object.defineProperty;
2
- var A = (o, a, e) => a in o ? x(o, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[a] = e;
3
- var c = (o, a, e) => (A(o, typeof a != "symbol" ? a + "" : a, e), e);
4
- import k, { WjElementUtils as L, event as l } from "./wje-element.js";
5
- import { b as E } from "./router-links-FtZbFUto.js";
6
- const S = ':host{--wje-menu-item-color: var(--wje-color);--wje-menu-item-background: transparent;--wje-menu-item-color-hover: var(--wje-color-contrast-8);--wje-menu-item-background-hover: var(--wje-border-color);--wje-menu-item-color-focus: var(--wje-color-contrast-8);--wje-menu-item-background-focus: var(--wje-border-color);--wje-menu-item-color-active: var(--wje-color-contrast-8);--wje-menu-item-background-active: var(--wje-border-color);--wje-menu-item-padding-top: .5rem;--wje-menu-item-padding-bottom: .5rem;--wje-menu-item-line-height: 1.8rem;--wje-menu-item-safe-triangle-cursor-x: 0;--wje-menu-item-safe-triangle-cursor-y: 0;--wje-menu-item-safe-triangle-submenu-start-x: 0;--wje-menu-item-safe-triangle-submenu-start-y: 0;--wje-menu-item-safe-triangle-submenu-end-x: 0;--wje-menu-item-safe-triangle-submenu-end-y: 0;--wje-menu-submenu-offset: 0;--wje-menu-item-icon-visibility: hidden;display:block}:host .native-menu-item{background:var(--wje-menu-item-background);position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;color:var(--wje-menu-item-color);padding-top:var(--wje-menu-item-padding-top);padding-bottom:var(--wje-menu-item-padding-bottom);transition:var(--wje-transition-fast) fill;-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;width:100%}:host .native-menu-item:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item:focus{color:var(--wje-menu-item-color-focus);background:var(--wje-menu-item-background-focus)}:host .native-menu-item:active{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item .label{flex:1 1 auto;display:inline-block;text-overflow:ellipsis;overflow:hidden;line-height:normal}:host .native-menu-item .check-icon{flex:0 0 auto;display:var(--wje-menu-item-check-icon-display, flex);align-items:center;justify-content:center;width:var(--wje-menu-check-icon-width, 1.5rem);visibility:hidden}:host .native-menu-item .check-icon.checked{visibility:visible}:host .native-menu-item.expanded-submenu{color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host .native-menu-item.expanded-submenu:hover{color:var(--wje-menu-item-color-hover);background:var(--wje-menu-item-background-hover)}:host .native-menu-item.expanded-submenu:after{content:"";position:fixed;z-index:1;top:0;right:0;bottom:0;left:0;//background: yellow;clip-path:polygon(var(--wje-menu-item-safe-triangle-cursor-x) var(--wje-menu-item-safe-triangle-cursor-y),var(--wje-menu-item-safe-triangle-submenu-start-x) var(--wje-menu-item-safe-triangle-submenu-start-y),var(--wje-menu-item-safe-triangle-submenu-end-x) var(--wje-menu-item-safe-triangle-submenu-end-y))}:host(.collapse) ::slotted([slot="start"]){margin:0;width:auto;display:contents}:host(.collapse) ::slotted([slot="end"]){display:none}:host(.collapse) .label,:host(.collapse) .check-icon,:host(.collapse) .submenu-icon{display:none}.submenu-icon{--wje-icon-size: 14px !important;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:1.5rem;visibility:var(--wje-menu-item-icon-visibility)}.has-submenu .submenu-icon{--wje-menu-item-icon-visibility: visible}.submenu-icon.collapse{flex:none;right:10px;position:relative}:host(:focus-visible){outline:none}::slotted([slot="start"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot="end"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-start:.5rem}:host(.wje-menu-variant-nav) ::slotted([slot="submenu"]){--wje-menu-border-width: 0 !important;--wje-menu-margin-inline: 2rem 0 !important}:host ::slotted([slot="start"]){width:1.5rem}:host(.wje-menu-variant-context){display:block}:host(.active){color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}:host(.open){color:var(--wje-menu-item-color-active);background:var(--wje-menu-item-background-active)}';
7
- class g extends k {
8
- /**
9
- * Constructor for MenuItem class.
10
- * @constructor
11
- */
12
- constructor() {
13
- super();
14
- c(this, "className", "MenuItem");
15
- /**
16
- * Dispatches a mousemove event.
17
- */
18
- c(this, "dispatchMove", (e) => {
19
- this.style.setProperty("--wje-menu-item-safe-triangle-cursor-x", `${e.clientX}px`), this.style.setProperty("--wje-menu-item-safe-triangle-cursor-y", `${e.clientY}px`);
20
- });
21
- /**
22
- * Dispatches a reposition event.
23
- */
24
- c(this, "dispatchReposition", (e) => {
25
- if (this.submenu.assignedNodes().length === 0)
26
- return;
27
- let i = this.submenu.assignedNodes()[0];
28
- const { left: m, top: s, width: t, height: r } = i.getBoundingClientRect();
29
- this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-x", `${m}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-start-y", `${s}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-x", `${m}px`), this.style.setProperty("--wje-menu-item-safe-triangle-submenu-end-y", `${s + r}px`);
30
- });
31
- E(this, { selector: !1 }), this.hasSubmenu = L.hasSlot(this, "submenu"), this._collapsible = !1;
32
- }
33
- /**
34
- * Getter for placement attribute.
35
- * @returns {string} The placement attribute of the menu or "right-start" if it doesn't exist.
36
- */
37
- get placement() {
38
- let e = this.querySelector("wje-menu");
39
- return e != null && e.hasAttribute("placement") ? e.getAttribute("placement") : "right-start";
40
- }
41
- /**
42
- * Getter for offset attribute.
43
- * @returns {string} The offset attribute of the menu or "0" if it doesn't exist.
44
- */
45
- get offset() {
46
- let e = this.querySelector("wje-menu");
47
- return e != null && e.hasAttribute("offset") ? e.getAttribute("offset") : "0";
48
- }
49
- /**
50
- * Getter for variant attribute.
51
- * @returns {string} The variant attribute of the menu or "CONTEXT" if it doesn't exist.
52
- */
53
- get variant() {
54
- let e = this.querySelector("wje-menu");
55
- return e != null && e.hasAttribute("variant") && !this.collapse ? e.getAttribute("variant").toUpperCase() : "CONTEXT";
56
- }
57
- /**
58
- * Getter for collapse attribute.
59
- * @returns {boolean} True if the closest parent has the collapse attribute, false otherwise.
60
- */
61
- get collapse() {
62
- return !!this.closest("[collapse]");
63
- }
64
- /**
65
- * Getter for cssStyleSheet.
66
- * @returns {string} The styles imported from styles.css.
67
- */
68
- static get cssStyleSheet() {
69
- return S;
70
- }
71
- /**
72
- * Getter for observedAttributes.
73
- * @returns {Array} An empty array as no attributes are being observed.
74
- */
75
- static get observedAttributes() {
76
- return [];
77
- }
78
- /**
79
- * Sets up the attributes for the MenuItem element.
80
- */
81
- setupAttributes() {
82
- super.setupAttributes(), this.isShadowRoot = "open", this.setAttribute("active-class", "open");
83
- }
84
- /**
85
- * Removes the active attribute from the menu before drawing the MenuItem.
86
- */
87
- beforeDraw(e, i, m) {
88
- var s;
89
- (s = this.querySelector("wje-menu")) == null || s.removeAttribute("active");
90
- }
91
- /**
92
- * Draws the MenuItem element.
93
- *
94
- * @param {Object} context - The context for drawing.
95
- * @param {Object} store - The store for drawing.
96
- * @param {Object} params - The parameters for drawing.
97
- * @returns {DocumentFragment} The fragment to be appended to the MenuItem.
98
- */
99
- draw(e, i, m) {
100
- var w, f, j;
101
- let s = document.createDocumentFragment();
102
- this.setAttribute("tabindex", "0"), this.classList.forEach((n) => {
103
- n.startsWith("wje-menu-variant-") && this.classList.remove(n);
104
- }), this.classList.remove("collapse"), this.classList.add("wje-menu-variant-" + this.variant.toLowerCase()), this.collapse ? (f = this.parentElement) != null && f.hasAttribute("collapse") && this.classList.add("collapse") : (w = this.querySelector("wje-menu")) == null || w.setAttribute("variant", this.variant.toLowerCase());
105
- let t = document.createElement("div");
106
- t.setAttribute("part", "native"), t.setAttribute("id", "anchor"), t.classList.add("native-menu-item");
107
- let r = document.createElement("span");
108
- r.classList.add("check-icon"), r.innerHTML = '<wje-icon name="check"></wje-icon>', this.hasAttribute("checked") ? r.classList.add("checked") : r.classList.remove("checked");
109
- let d = document.createElement("slot");
110
- d.name = "start";
111
- let p = document.createElement("slot");
112
- p.classList.add("label");
113
- let b = document.createElement("slot");
114
- b.name = "end";
115
- let u = document.createElement("slot");
116
- u.setAttribute("part", "submenu"), u.name = "submenu";
117
- let y = this.collapse ? "collapse" : "expand", h = document.createElement("span");
118
- h.classList.add("submenu-icon", y), h.innerHTML = this.collapse ? '<wje-icon name="chevron-down"></wje-icon>' : '<wje-icon name="chevron-right"></wje-icon>', this.hasSubmenu ? t.classList.add("has-submenu") : t.classList.remove("has-submenu"), t.appendChild(r), t.appendChild(d), t.appendChild(p), t.appendChild(b), t.appendChild(h);
119
- let v = !1;
120
- if (
121
- /*(this.collapse && this.variant === "NAV" && this.hasSubmenu) || */
122
- this.variant === "CONTEXT" && this.hasSubmenu
123
- ) {
124
- t.setAttribute("slot", "anchor");
125
- let n = document.createElement("wje-popup");
126
- n.setAttribute("anchor", "anchor"), n.setAttribute("placement", this.placement), n.setAttribute("offset", this.offset), n.appendChild(t), n.appendChild(u), this.popup = n, s.appendChild(n), v = !0;
127
- }
128
- return (j = this.parentElement) != null && j.hasAttribute("collapse") && !this.hasSubmenu ? s.appendChild(this.collapseItem(t)) : v || s.appendChild(t), (!this.collapse && this.variant === "NAV" || this.variant === "MEGAMENU" && this.hasSubmenu) && s.appendChild(u), this.native = t, this.submenu = u, s;
129
- }
130
- /**
131
- * Adds event listeners after drawing the MenuItem.
132
- */
133
- afterDraw() {
134
- this.addEventListener("mousemove", this.dispatchMove), this.addEventListener("wje-popup:reposition", this.dispatchReposition), l.addListener(this, "mouseover", null, (e) => {
135
- if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
136
- if (this.hasAttribute("manual") || this.variant === "NAV" && this.collapse)
137
- return;
138
- this.submenuActivated(e), e.stopPropagation(), this.showSubmenu(), this.focus();
139
- }
140
- }), l.addListener(this, "focusout", null, (e) => {
141
- if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
142
- if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse)
143
- return;
144
- this.submenuActivated(e), this.hideSubmenu();
145
- }
146
- }), l.addListener(this, "click", null, (e) => {
147
- !this.collapse && this.variant === "NAV" && this.hasSubmenu ? (this.submenuActivated(e), this.hideSubmenu(), e.stopPropagation()) : (l.dispatchCustomEvent(this, "wje-menu-item:click"), l.dispatchCustomEvent(this, this.dialog, {
148
- bubbles: !0
149
- }));
150
- });
151
- }
152
- /**
153
- * Creates a tooltip for the MenuItem when it is collapsed.
154
- * @param {HTMLElement} native - The native MenuItem element.
155
- * @returns {HTMLElement} The tooltip element.
156
- */
157
- collapseItem(e) {
158
- let i = document.createElement("wje-tooltip");
159
- return i.setAttribute("content", this.textContent), i.setAttribute("placement", "right"), i.setAttribute("offset", this.offset || "0"), i.appendChild(e), i;
160
- }
161
- /**
162
- * Shows the submenu of the MenuItem.
163
- */
164
- showSubmenu() {
165
- this.tabIndex = -1, this.hasSubmenu && (this.popup.setAttribute("active", ""), this.classList.add("expanded-submenu"), this.native.classList.add("expanded-submenu"));
166
- }
167
- /**
168
- * Hides the submenu of the MenuItem.
169
- */
170
- hideSubmenu() {
171
- this.tabIndex = 0, this.hasSubmenu && (this.popup.removeAttribute("active"), this.classList.remove("expanded-submenu"), this.native.classList.remove("expanded-submenu"));
172
- }
173
- /**
174
- * Activates or deactivates the submenu of the MenuItem.
175
- */
176
- submenuActivated(e) {
177
- if (this.hasSubmenu) {
178
- let i = this.submenu.assignedElements({ flatten: !0 })[0];
179
- i.hasAttribute("active") ? this === e.target && i.removeAttribute("active") : i.setAttribute("active", "");
180
- }
181
- }
182
- /**
183
- * Clears the innerHTML of the context before disconnecting the MenuItem.
184
- */
185
- beforeDisconnect() {
186
- this.context.innerHTML = "";
187
- }
188
- }
189
- g.define("wje-menu-item", g);
190
- export {
191
- g as default
192
- };
@@ -1,57 +0,0 @@
1
- var o = Object.defineProperty;
2
- var i = (t, e, a) => e in t ? o(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a;
3
- var l = (t, e, a) => (i(t, typeof e != "symbol" ? e + "" : e, a), a);
4
- import d, { WjElementUtils as m } from "./wje-element.js";
5
- const u = ":host{--wje-menu-label-font-size: .75rem;--wje-menu-label-weight: 600;--wje-letter-spacing: .025rem;--wje-menu-label-color: var(--wje-color-contrast-6);--wje-padding-top: 0;--wje-padding-bottom: 0;--wje-padding-start: 1.5rem;--wje-padding-end: 1.5rem}.native-menu-label{font-size:var(--wje-menu-label-font-size);display:inline-block;font-weight:var(--wje-menu-label-weight);letter-spacing:var(--wje-letter-spacing);color:var(--wje-menu-label-color);padding:var(--wje-padding-top) var(--wje-padding-start) var(--wje-padding-bottom) var(--wje-padding-end)}";
6
- class s extends d {
7
- /**
8
- * Creates an instance of MenuLabel.
9
- *
10
- * @constructor
11
- */
12
- constructor() {
13
- super();
14
- l(this, "className", "MenuLabel");
15
- this.hasSubmenu = m.hasSlot(this, "submenu");
16
- }
17
- /**
18
- * Returns the CSS styles for the component.
19
- *
20
- * @static
21
- * @returns {CSSStyleSheet}
22
- */
23
- static get cssStyleSheet() {
24
- return u;
25
- }
26
- /**
27
- * Returns the list of attributes to observe for changes.
28
- *
29
- * @static
30
- * @returns {Array<string>}
31
- */
32
- static get observedAttributes() {
33
- return [];
34
- }
35
- /**
36
- * Sets up the attributes for the component.
37
- */
38
- setupAttributes() {
39
- this.isShadowRoot = "open";
40
- }
41
- /**
42
- * Draws the component.
43
- *
44
- * @param {Object} context - The context for drawing.
45
- * @param {Object} store - The store for drawing.
46
- * @param {Object} params - The parameters for drawing.
47
- * @returns {DocumentFragment}
48
- */
49
- draw(a, c, p) {
50
- let r = document.createDocumentFragment(), n = document.createElement("slot");
51
- return n.setAttribute("part", "native"), n.classList.add("native-menu-label"), r.appendChild(n), r;
52
- }
53
- }
54
- s.define("wje-menu-label", s);
55
- export {
56
- s as default
57
- };