wj-elements 0.1.201 → 0.1.203
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/wje-dialog.js +286 -12
- package/dist/wje-dialog.js.map +1 -1
- package/dist/wje-tree-item.js +1 -1
- package/package.json +1 -1
package/dist/wje-dialog.js
CHANGED
|
@@ -3,7 +3,278 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
|
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
4
|
import WJElement from "./wje-element.js";
|
|
5
5
|
import { event } from "./event.js";
|
|
6
|
-
const styles =
|
|
6
|
+
const styles = `/*
|
|
7
|
+
[ WJ Dialog ]
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
:host {
|
|
11
|
+
--wje-dialog-header-actions-gap: 0.5rem;
|
|
12
|
+
|
|
13
|
+
.close {
|
|
14
|
+
margin-left: auto;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.header-actions {
|
|
18
|
+
margin-left: auto;
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
gap: var(--wje-dialog-header-actions-gap);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.modal-content {
|
|
25
|
+
border-radius: 3px;
|
|
26
|
+
box-shadow: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.dialog-header {
|
|
30
|
+
position: relative;
|
|
31
|
+
border-bottom: 0;
|
|
32
|
+
padding-inline: var(--wje-dialog-padding);
|
|
33
|
+
padding-top: var(--wje-dialog-padding);
|
|
34
|
+
padding-bottom: var(--wje-dialog-padding);
|
|
35
|
+
/*display: flex;*/
|
|
36
|
+
/*align-items: center;*/
|
|
37
|
+
display: grid;
|
|
38
|
+
grid-template-columns: 1fr auto; /* headline vľavo, button vpravo */
|
|
39
|
+
grid-template-rows: auto auto; /* horný riadok, potom header-actions */
|
|
40
|
+
align-items: center;
|
|
41
|
+
gap: 0.5rem;
|
|
42
|
+
> span[part="headline"] {
|
|
43
|
+
font-family: var(--wje-font-family-secondary);
|
|
44
|
+
font-size: var(--wje-dialog-headline-font-size);
|
|
45
|
+
text-transform: var(--wje-dialog-headline-text-transform);
|
|
46
|
+
display: inline-block;
|
|
47
|
+
letter-spacing: var(--wje-dialog-headline-letter-spacing);
|
|
48
|
+
font-weight: var(--wje-dialog-headline-font-weight);
|
|
49
|
+
margin: 0;
|
|
50
|
+
padding: 0;
|
|
51
|
+
line-height: normal;
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
text-overflow: ellipsis;
|
|
54
|
+
filter: alpha(opacity=40);
|
|
55
|
+
|
|
56
|
+
grid-column: 1;
|
|
57
|
+
grid-row: 1;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
> wje-button[part="close"] {
|
|
61
|
+
grid-column: 2;
|
|
62
|
+
grid-row: 1;
|
|
63
|
+
justify-self: end;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
> .header-actions {
|
|
67
|
+
grid-column: 1 / span 2;
|
|
68
|
+
grid-row: 2;
|
|
69
|
+
width: 100%;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.dialog-content {
|
|
74
|
+
box-shadow: none;
|
|
75
|
+
padding-inline: var(--wje-dialog-padding);
|
|
76
|
+
white-space: normal;
|
|
77
|
+
z-index: 1;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.dialog-footer {
|
|
81
|
+
display: flex;
|
|
82
|
+
justify-content: end;
|
|
83
|
+
border-top: none;
|
|
84
|
+
box-shadow: none;
|
|
85
|
+
margin-top: 0;
|
|
86
|
+
padding-inline: var(--wje-dialog-padding-inline);
|
|
87
|
+
padding-top: var(--wje-dialog-padding-top);
|
|
88
|
+
padding-bottom: var(--wje-dialog-padding-bottom);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/*Blocking element styles*/
|
|
93
|
+
.blocking-element {
|
|
94
|
+
position: absolute;
|
|
95
|
+
top: 0;
|
|
96
|
+
left: 0;
|
|
97
|
+
right: 0;
|
|
98
|
+
bottom: 0;
|
|
99
|
+
background-color: var(--wje-color-contrast-0);
|
|
100
|
+
opacity: 0.75;
|
|
101
|
+
z-index: 1;
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
height: 100%;
|
|
106
|
+
|
|
107
|
+
wje-icon {
|
|
108
|
+
animation: loader 1s linear infinite;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
@keyframes loader {
|
|
113
|
+
0% {
|
|
114
|
+
transform: rotate(0deg);
|
|
115
|
+
}
|
|
116
|
+
100% {
|
|
117
|
+
transform: rotate(360deg);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
dialog::backdrop {
|
|
122
|
+
opacity: var(--wje-backdrop-opacity);
|
|
123
|
+
background-color: var(--wje-backdrop);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
dialog:focus-visible {
|
|
127
|
+
outline: none;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
:host(.separator) .dialog-header:after {
|
|
131
|
+
content: '';
|
|
132
|
+
height: 1px;
|
|
133
|
+
background: rgba(0, 0, 0, 0.08);
|
|
134
|
+
left: var(--wje-dialog-padding);
|
|
135
|
+
right: var(--wje-dialog-padding);
|
|
136
|
+
position: absolute;
|
|
137
|
+
bottom: 0;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
:host {
|
|
141
|
+
dialog {
|
|
142
|
+
box-sizing: border-box;
|
|
143
|
+
transition: all 0.2s !important;
|
|
144
|
+
width: var(--wje-dialog-width);
|
|
145
|
+
height: var(--wje-dialog-height);
|
|
146
|
+
box-shadow: var(--wje-shadow-large);
|
|
147
|
+
|
|
148
|
+
border-radius: var(--wje-dialog-border-radius);
|
|
149
|
+
border-width: var(--wje-dialog-border-width);
|
|
150
|
+
border-style: var(--wje-dialog-border-style);
|
|
151
|
+
border-color: var(--wje-dialog-border-color);
|
|
152
|
+
|
|
153
|
+
margin-top: var(--wje-dialog-margin-top);
|
|
154
|
+
|
|
155
|
+
margin-bottom: var(--wje-dialog-margin-bottom);
|
|
156
|
+
margin-inline: var(--wje-dialog-margin-start) var(--wje-dialog-margin-end);
|
|
157
|
+
|
|
158
|
+
padding: 0;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
/*Top*/
|
|
164
|
+
:host(.stick-up) {
|
|
165
|
+
--wje-dialog-width: 300px;
|
|
166
|
+
--wje-dialog-height: fit-content;
|
|
167
|
+
--wje-dialog-border-radius: 0 0 var(--wje-border-radius-large) var(--wje-border-radius-large);
|
|
168
|
+
--wje-dialog-border-width: 0 1px 1px 1px;
|
|
169
|
+
--wje-dialog-margin-top: 0;
|
|
170
|
+
--wje-dialog-translate-from: translateY(-110%);
|
|
171
|
+
--wje-dialog-template-to: translateX(0);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/*Cenetered*/
|
|
175
|
+
:host(.slide-up) {
|
|
176
|
+
--wje-dialog-width: 300px;
|
|
177
|
+
--wje-dialog-height: fit-content;
|
|
178
|
+
--wje-dialog-border-radius: var(--wje-border-radius-large);
|
|
179
|
+
--wje-dialog-border-width: 1px;
|
|
180
|
+
--wje-dialog-opacity-from: 0;
|
|
181
|
+
--wje-dialog-translate-from: scale(0.9);
|
|
182
|
+
--wje-dialog-translate-to: scale(1);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
/*Fullscreen*/
|
|
186
|
+
:host(.fill-in) {
|
|
187
|
+
--wje-dialog-width: 100%;
|
|
188
|
+
--wje-dialog-height: 100%;
|
|
189
|
+
--wje-dialog-border-radius: 0 0 0 0 !important;
|
|
190
|
+
--wje-dialog-border-width: 0;
|
|
191
|
+
--wje-dialog-margin-top: 0;
|
|
192
|
+
--wje-dialog-margin-start: 0;
|
|
193
|
+
--wje-dialog-margin-end: 0;
|
|
194
|
+
--wje-dialog-margin-bottom: 0;
|
|
195
|
+
--wje-dialog-translate-from: scale(0.95);
|
|
196
|
+
--wje-dialog-translate-to: scale(1);
|
|
197
|
+
dialog {
|
|
198
|
+
min-width: var(--wje-dialog-width);
|
|
199
|
+
min-height: var(--wje-dialog-height);
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/*Slide Left*/
|
|
204
|
+
:host(.slide-left) {
|
|
205
|
+
--wje-dialog-width: 300px;
|
|
206
|
+
--wje-dialog-height: 100%;
|
|
207
|
+
--wje-dialog-border-radius: 0;
|
|
208
|
+
--wje-dialog-border-width: 0 1px 0 0;
|
|
209
|
+
--wje-dialog-margin-top: 0;
|
|
210
|
+
--wje-dialog-margin-start: 0;
|
|
211
|
+
--wje-dialog-margin-end: auto;
|
|
212
|
+
--wje-dialog-margin-bottom: 0;
|
|
213
|
+
dialog {
|
|
214
|
+
min-height: var(--wje-dialog-height);
|
|
215
|
+
--wje-dialog-translate-from: translateX(-110%);
|
|
216
|
+
--wje-dialog-template-to: translateX(0);
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
/*Slide Right*/
|
|
221
|
+
:host(.slide-right) {
|
|
222
|
+
--wje-dialog-width: 300px !important;
|
|
223
|
+
--wje-dialog-height: 100% !important;
|
|
224
|
+
--wje-dialog-border-radius: 0;
|
|
225
|
+
--wje-dialog-border-width: 0 0 0 1px;
|
|
226
|
+
--wje-dialog-margin-top: 0;
|
|
227
|
+
--wje-dialog-margin-start: auto;
|
|
228
|
+
--wje-dialog-margin-end: 0;
|
|
229
|
+
--wje-dialog-margin-bottom: 0;
|
|
230
|
+
dialog {
|
|
231
|
+
min-height: var(--wje-dialog-height);
|
|
232
|
+
--wje-dialog-translate-from: translateX(110%);
|
|
233
|
+
--wje-dialog-template-to: translateX(0);
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
:host(.small) {
|
|
238
|
+
--wje-dialog-width: 300px !important;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
:host(.medium) {
|
|
242
|
+
--wje-dialog-width: 500px !important;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
:host(.large) {
|
|
246
|
+
--wje-dialog-width: 600px !important;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
:host(.ex-large) {
|
|
250
|
+
--wje-dialog-width: 900px !important;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
dialog[open] {
|
|
254
|
+
animation: show 0.5s ease normal;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
@keyframes show {
|
|
258
|
+
from {
|
|
259
|
+
opacity: var(--wje-dialog-opacity-from, 1);
|
|
260
|
+
transform: var(--wje-dialog-translate-from);
|
|
261
|
+
}
|
|
262
|
+
to {
|
|
263
|
+
opacity: 1;
|
|
264
|
+
transform: var(--wje-dialog-translate-to);
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
:host(.scroll-body) {
|
|
269
|
+
dialog[open] {
|
|
270
|
+
display: flex;
|
|
271
|
+
flex-direction: column;
|
|
272
|
+
}
|
|
273
|
+
.dialog-content {
|
|
274
|
+
overflow: auto;
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
`;
|
|
7
278
|
class Dialog extends WJElement {
|
|
8
279
|
/**
|
|
9
280
|
* @class
|
|
@@ -23,13 +294,15 @@ class Dialog extends WJElement {
|
|
|
23
294
|
if (this.dialog) {
|
|
24
295
|
this.dialog.innerHTML = "";
|
|
25
296
|
}
|
|
26
|
-
|
|
27
|
-
this.
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
297
|
+
setTimeout(() => {
|
|
298
|
+
Promise.resolve(this.beforeOpen(this, e)).then((res) => {
|
|
299
|
+
this.htmlDialogBody(this.dialog);
|
|
300
|
+
this.dialog.showModal();
|
|
301
|
+
if (this.dialog.open) {
|
|
302
|
+
Promise.resolve(this.afterOpen(this, e));
|
|
303
|
+
}
|
|
304
|
+
});
|
|
305
|
+
}, 0);
|
|
33
306
|
});
|
|
34
307
|
/**
|
|
35
308
|
* Closes the dialog.
|
|
@@ -132,6 +405,7 @@ class Dialog extends WJElement {
|
|
|
132
405
|
let fragment = document.createDocumentFragment();
|
|
133
406
|
this.classList.add("fade", this.placement, params.size);
|
|
134
407
|
let dialog = document.createElement("dialog");
|
|
408
|
+
dialog.setAttribute("part", "dialog");
|
|
135
409
|
dialog.classList.add("modal-dialog");
|
|
136
410
|
fragment.appendChild(dialog);
|
|
137
411
|
this.dialog = dialog;
|
|
@@ -152,7 +426,6 @@ class Dialog extends WJElement {
|
|
|
152
426
|
close.addEventListener("click", (e) => {
|
|
153
427
|
this.close(e);
|
|
154
428
|
});
|
|
155
|
-
close.appendChild(icon);
|
|
156
429
|
let header = document.createElement("div");
|
|
157
430
|
header.setAttribute("part", "header");
|
|
158
431
|
header.classList.add("dialog-header");
|
|
@@ -164,19 +437,20 @@ class Dialog extends WJElement {
|
|
|
164
437
|
headerActions.classList.add("header-actions");
|
|
165
438
|
headerActions.setAttribute("part", "header-actions");
|
|
166
439
|
headerActions.appendChild(slotHeader);
|
|
167
|
-
header.appendChild(headerActions);
|
|
168
|
-
if (!this.closeHidden) header.appendChild(close);
|
|
169
440
|
let contentSlot = document.createElement("slot");
|
|
170
441
|
let body = document.createElement("div");
|
|
171
442
|
body.setAttribute("part", "body");
|
|
172
443
|
body.classList.add("dialog-content");
|
|
173
|
-
body.appendChild(contentSlot);
|
|
174
444
|
let footer = document.createElement("div");
|
|
175
445
|
footer.setAttribute("part", "footer");
|
|
176
446
|
footer.classList.add("dialog-footer");
|
|
177
447
|
footer.innerHTML = "";
|
|
178
448
|
let slotFooter = document.createElement("slot");
|
|
179
449
|
slotFooter.setAttribute("name", "footer");
|
|
450
|
+
close.appendChild(icon);
|
|
451
|
+
if (!this.closeHidden) header.appendChild(close);
|
|
452
|
+
header.appendChild(headerActions);
|
|
453
|
+
body.appendChild(contentSlot);
|
|
180
454
|
footer.appendChild(slotFooter);
|
|
181
455
|
dialog.appendChild(header);
|
|
182
456
|
dialog.appendChild(body);
|
package/dist/wje-dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-dialog.js","sources":["../packages/wje-dialog/dialog.element.js","../packages/wje-dialog/dialog.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport '../wje-button/button.element.js';\nimport '../wje-icon/icon.element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Dialog` is a custom web component that represents a dialog.\n * @summary This element represents a dialog.\n * @documentation https://elements.webjet.sk/components/dialog\n * @status stable\n * @augments {WJElement}\n * @slot header - Slot for the header content.\n * @slot body - Slot for the body content.\n * @slot footer - Slot for the footer content.\n * @csspart dialog - The dialog wrapper.\n * @csspart header - The header of the dialog.\n * @csspart body - The body of the dialog.\n * @csspart footer - The footer of the dialog.\n * @csspart close - The close button of the dialog.\n * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.\n * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.\n * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.\n * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.\n * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.\n * @tag wje-dialog\n */\n\nexport default class Dialog extends WJElement {\n /**\n * @class\n */\n constructor() {\n super();\n }\n\n /**\n * Sets the value of the 'headline' attribute.\n * @param {string} value The new value for the 'headline' attribute.\n */\n set headline(value) {\n this.setAttribute('headline', value);\n }\n\n /**\n * Retrieves the value of the \"headline\" attribute from the element.\n * If the \"headline\" attribute is not present, returns an empty string.\n * @returns {string} The headline attribute value or an empty string if not set.\n */\n get headline() {\n return this.getAttribute('headline') || '';\n }\n\n /**\n * Sets the headline of the dialog.\n * @param value\n */\n set placement(value) {\n this.setAttribute('placement', value);\n }\n\n /**\n * Gets the headline of the dialog.\n * @returns {string|string}\n */\n get placement() {\n return this.getAttribute('placement') || 'slide-up';\n }\n\n /**\n * Sets the headline of the dialog.\n * @param value\n */\n set async(value) {\n this.setAttribute('async', '');\n }\n\n /**\n * Gets the headline of the dialog.\n * @returns {boolean}\n */\n get async() {\n return this.hasAttribute('async');\n }\n\n /**\n * Sets the headline of the dialog.\n * @param value\n */\n set closeHidden(value) {\n if (value) this.setAttribute('close-hidden', '');\n }\n\n /**\n * Gets the headline of the dialog.\n * @returns {boolean}\n */\n get closeHidden() {\n return !!this.hasAttribute('close-hidden');\n }\n\n /**\n * Sets the headline of the dialog.\n * @type {string}\n */\n className = 'Dialog';\n\n /**\n * Returns the CSS styles for the component.\n * @returns {*}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @returns {*[]}\n */\n static get observedAttributes() {\n return [];\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draws the component.\n * @param {object} context The context for drawing.\n * @param {object} store The store for drawing.\n * @param {object} params The parameters for drawing.\n * @returns {DocumentFragment}\n */\n draw(context, store, params) {\n let fragment = document.createDocumentFragment();\n\n this.classList.add('fade', this.placement, params.size);\n\n let dialog = document.createElement('dialog');\n dialog.classList.add('modal-dialog');\n\n fragment.appendChild(dialog);\n\n this.dialog = dialog;\n return fragment;\n }\n\n /**\n * Creates the dialog body.\n * @param dialog\n */\n htmlDialogBody(dialog) {\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'x');\n icon.setAttribute('slot', 'icon-only');\n\n let close = document.createElement('wje-button');\n close.setAttribute('fill', 'link');\n close.setAttribute('size', 'small');\n close.setAttribute('part', 'close');\n close.addEventListener('click', (e) => {\n this.close(e);\n });\n close.appendChild(icon);\n\n let header = document.createElement('div');\n header.setAttribute('part', 'header');\n header.classList.add('dialog-header');\n if (this.hasAttribute('headline'))\n header.innerHTML = `<span part=\"headline\">${this.headline}</span>`;\n\n let slotHeader = document.createElement('slot');\n slotHeader.setAttribute('name', 'header');\n\n const headerActions = document.createElement('div');\n headerActions.classList.add('header-actions');\n headerActions.setAttribute('part', 'header-actions');\n headerActions.appendChild(slotHeader);\n\n header.appendChild(headerActions);\n if (!this.closeHidden) header.appendChild(close);\n\n let contentSlot = document.createElement('slot');\n\n let body = document.createElement('div');\n body.setAttribute('part', 'body');\n body.classList.add('dialog-content');\n body.appendChild(contentSlot);\n\n let footer = document.createElement('div');\n footer.setAttribute('part', 'footer');\n footer.classList.add('dialog-footer');\n footer.innerHTML = '';\n\n let slotFooter = document.createElement('slot');\n slotFooter.setAttribute('name', 'footer');\n\n footer.appendChild(slotFooter);\n\n dialog.appendChild(header);\n dialog.appendChild(body);\n dialog.appendChild(footer);\n }\n\n /**\n * Closes the dialog.\n * @param e\n */\n close(e) {\n this.onClose(e);\n }\n\n /**\n * Draws the component after it has been drawn.\n * @param {object} context The context for drawing.\n * @param {object} store The store for drawing.\n * @param {object} params The parameters for drawing.\n */\n afterDraw(context, store, params) {\n if (params.trigger) {\n event.addListener(document, params.trigger, null, this.onOpen);\n }\n\n //this.dialog.addEventListener('close', this.onClose);\n }\n\n /**\n * Before the component is disconnected.\n */\n beforeDisconnect() {\n if (this.params?.trigger) {\n event.removeListener(document, this.params?.trigger, null, this.onOpen);\n }\n\n //this.dialog.removeEventListener('close', this.onClose);\n }\n\n /**\n * Before the dialog opens.\n */\n beforeOpen(dialog, trigger) {\n // Hook for extending behavior before the dialog opens\n }\n\n /**\n * After the dialog opens.\n */\n afterOpen(dialog, trigger) {\n // Hook for extending behavior after the dialog opens\n }\n\n /**\n * Before the dialog closes.\n */\n beforeClose(dialog, trigger) {\n // Hook for extending behavior before the dialog closes\n }\n\n /**\n * After the dialog closes.\n */\n afterClose(dialog, trigger) {\n // Hook for extending behavior after the dialog closes\n }\n\n /**\n * Opens the dialog.\n * @param e\n */\n onOpen = (e) => {\n if (this.dialog) {\n this.dialog.innerHTML = '';\n }\n\n Promise.resolve(this.beforeOpen(this, e)).then((res) => {\n this.htmlDialogBody(this.dialog);\n\n this.dialog.showModal(); // Now open the dialog\n\n if (this.dialog.open) {\n Promise.resolve(this.afterOpen(this, e));\n }\n });\n }\n\n /**\n * Closes the dialog.\n * @param {object} e\n */\n onClose = (e) => {\n Promise.resolve(this.beforeClose(this, e)).then((res) => {\n this.dialog.close(); // Now close the dialog\n\n if (!this.dialog.open) {\n Promise.resolve(this.afterClose(this, e));\n }\n });\n };\n\n /**\n * Registers an event listener on the provided button that triggers a blocking UI element\n * and executes a given promise when the button is clicked.\n * @param {HTMLElement} button The button element to attach the event listener to.\n * @param {Function} promise A function that returns a promise to be executed when the button is clicked.\n */\n registerBlockingEvent(button, promise) {\n button.addEventListener('wje-button:click', async (e) => {\n let blockingElement = document.createElement('div');\n blockingElement.classList.add('blocking-element');\n\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'loader-2');\n icon.setAttribute('size', '2x-large');\n\n blockingElement.appendChild(icon);\n\n let scrollOffset = this.dialog.scrollTop;\n blockingElement.style.top = `${scrollOffset}px`;\n blockingElement.style.bottom = `-${scrollOffset}px`;\n\n this.dialog.appendChild(blockingElement);\n\n await promise()\n .then((res) => {\n this.close();\n blockingElement.remove();\n })\n .catch((err) => {\n console.error(err);\n blockingElement.remove();\n });\n });\n }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-dialog.js","sources":["../packages/wje-dialog/dialog.element.js","../packages/wje-dialog/dialog.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport '../wje-button/button.element.js';\nimport '../wje-icon/icon.element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Dialog` is a custom web component that represents a dialog.\n * @summary This element represents a dialog.\n * @documentation https://elements.webjet.sk/components/dialog\n * @status stable\n * @augments {WJElement}\n * @slot header - Slot for the header content.\n * @slot body - Slot for the body content.\n * @slot footer - Slot for the footer content.\n * @csspart dialog - The dialog wrapper.\n * @csspart header - The header of the dialog.\n * @csspart body - The body of the dialog.\n * @csspart footer - The footer of the dialog.\n * @csspart close - The close button of the dialog.\n * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.\n * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.\n * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.\n * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.\n * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.\n * @tag wje-dialog\n */\n\nexport default class Dialog extends WJElement {\n /**\n * @class\n */\n constructor() {\n super();\n }\n\n /**\n * Sets the value of the 'headline' attribute.\n * @param {string} value The new value for the 'headline' attribute.\n */\n set headline(value) {\n this.setAttribute('headline', value);\n }\n\n /**\n * Retrieves the value of the \"headline\" attribute from the element.\n * If the \"headline\" attribute is not present, returns an empty string.\n * @returns {string} The headline attribute value or an empty string if not set.\n */\n get headline() {\n return this.getAttribute('headline') || '';\n }\n\n /**\n * Sets the headline of the dialog.\n * @param value\n */\n set placement(value) {\n this.setAttribute('placement', value);\n }\n\n /**\n * Gets the headline of the dialog.\n * @returns {string|string}\n */\n get placement() {\n return this.getAttribute('placement') || 'slide-up';\n }\n\n /**\n * Sets the headline of the dialog.\n * @param value\n */\n set async(value) {\n this.setAttribute('async', '');\n }\n\n /**\n * Gets the headline of the dialog.\n * @returns {boolean}\n */\n get async() {\n return this.hasAttribute('async');\n }\n\n /**\n * Sets the headline of the dialog.\n * @param value\n */\n set closeHidden(value) {\n if (value) this.setAttribute('close-hidden', '');\n }\n\n /**\n * Gets the headline of the dialog.\n * @returns {boolean}\n */\n get closeHidden() {\n return !!this.hasAttribute('close-hidden');\n }\n\n /**\n * Sets the headline of the dialog.\n * @type {string}\n */\n className = 'Dialog';\n\n /**\n * Returns the CSS styles for the component.\n * @returns {*}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @returns {*[]}\n */\n static get observedAttributes() {\n return [];\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /**\n * Draws the component.\n * @param {object} context The context for drawing.\n * @param {object} store The store for drawing.\n * @param {object} params The parameters for drawing.\n * @returns {DocumentFragment}\n */\n draw(context, store, params) {\n let fragment = document.createDocumentFragment();\n\n this.classList.add('fade', this.placement, params.size);\n\n let dialog = document.createElement('dialog');\n dialog.setAttribute('part', 'dialog');\n dialog.classList.add('modal-dialog');\n\n fragment.appendChild(dialog);\n\n this.dialog = dialog;\n\n return fragment;\n }\n\n /**\n * Creates the dialog body.\n * @param dialog\n */\n htmlDialogBody(dialog) {\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'x');\n icon.setAttribute('slot', 'icon-only');\n\n let close = document.createElement('wje-button');\n close.setAttribute('fill', 'link');\n close.setAttribute('size', 'small');\n close.setAttribute('part', 'close');\n close.addEventListener('click', (e) => {\n this.close(e);\n });\n\n let header = document.createElement('div');\n header.setAttribute('part', 'header');\n header.classList.add('dialog-header');\n if (this.hasAttribute('headline'))\n header.innerHTML = `<span part=\"headline\">${this.headline}</span>`;\n\n let slotHeader = document.createElement('slot');\n slotHeader.setAttribute('name', 'header');\n\n const headerActions = document.createElement('div');\n headerActions.classList.add('header-actions');\n headerActions.setAttribute('part', 'header-actions');\n headerActions.appendChild(slotHeader);\n\n let contentSlot = document.createElement('slot');\n\n let body = document.createElement('div');\n body.setAttribute('part', 'body');\n body.classList.add('dialog-content');\n\n let footer = document.createElement('div');\n footer.setAttribute('part', 'footer');\n footer.classList.add('dialog-footer');\n footer.innerHTML = '';\n\n let slotFooter = document.createElement('slot');\n slotFooter.setAttribute('name', 'footer');\n\n close.appendChild(icon);\n\n if (!this.closeHidden) header.appendChild(close);\n\n header.appendChild(headerActions);\n body.appendChild(contentSlot);\n footer.appendChild(slotFooter);\n\n dialog.appendChild(header);\n dialog.appendChild(body);\n dialog.appendChild(footer);\n }\n\n /**\n * Closes the dialog.\n * @param e\n */\n close(e) {\n this.onClose(e);\n }\n\n /**\n * Draws the component after it has been drawn.\n * @param {object} context The context for drawing.\n * @param {object} store The store for drawing.\n * @param {object} params The parameters for drawing.\n */\n afterDraw(context, store, params) {\n if (params.trigger) {\n event.addListener(document, params.trigger, null, this.onOpen);\n }\n\n //this.dialog.addEventListener('close', this.onClose);\n }\n\n /**\n * Before the component is disconnected.\n */\n beforeDisconnect() {\n if (this.params?.trigger) {\n event.removeListener(document, this.params?.trigger, null, this.onOpen);\n }\n\n //this.dialog.removeEventListener('close', this.onClose);\n }\n\n /**\n * Before the dialog opens.\n */\n beforeOpen(dialog, trigger) {\n // Hook for extending behavior before the dialog opens\n }\n\n /**\n * After the dialog opens.\n */\n afterOpen(dialog, trigger) {\n // Hook for extending behavior after the dialog opens\n }\n\n /**\n * Before the dialog closes.\n */\n beforeClose(dialog, trigger) {\n // Hook for extending behavior before the dialog closes\n }\n\n /**\n * After the dialog closes.\n */\n afterClose(dialog, trigger) {\n // Hook for extending behavior after the dialog closes\n }\n\n /**\n * Opens the dialog.\n * @param e\n */\n onOpen = (e) => {\n if (this.dialog) {\n this.dialog.innerHTML = '';\n }\n\n setTimeout(() => {\n Promise.resolve(this.beforeOpen(this, e)).then((res) => {\n this.htmlDialogBody(this.dialog);\n\n this.dialog.showModal(); // Now open the dialog\n\n if (this.dialog.open) {\n Promise.resolve(this.afterOpen(this, e));\n }\n });\n }, 0);\n }\n\n /**\n * Closes the dialog.\n * @param {object} e\n */\n onClose = (e) => {\n Promise.resolve(this.beforeClose(this, e)).then((res) => {\n this.dialog.close(); // Now close the dialog\n\n if (!this.dialog.open) {\n Promise.resolve(this.afterClose(this, e));\n }\n });\n };\n\n /**\n * Registers an event listener on the provided button that triggers a blocking UI element\n * and executes a given promise when the button is clicked.\n * @param {HTMLElement} button The button element to attach the event listener to.\n * @param {Function} promise A function that returns a promise to be executed when the button is clicked.\n */\n registerBlockingEvent(button, promise) {\n button.addEventListener('wje-button:click', async (e) => {\n let blockingElement = document.createElement('div');\n blockingElement.classList.add('blocking-element');\n\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'loader-2');\n icon.setAttribute('size', '2x-large');\n\n blockingElement.appendChild(icon);\n\n let scrollOffset = this.dialog.scrollTop;\n blockingElement.style.top = `${scrollOffset}px`;\n blockingElement.style.bottom = `-${scrollOffset}px`;\n\n this.dialog.appendChild(blockingElement);\n\n await promise()\n .then((res) => {\n this.close();\n blockingElement.remove();\n })\n .catch((err) => {\n console.error(err);\n blockingElement.remove();\n });\n });\n }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":[],"mappings":"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"}
|
package/dist/wje-tree-item.js
CHANGED
|
@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
4
|
import WJElement from "./wje-element.js";
|
|
5
|
-
const styles = "/*\n[ WJ Tree Item ]\n*/\n\n:host {\n .native-tree-item {\n position: relative;\n display: flex;\n align-items: stretch;\n flex-direction: column;\n &.multiple {\n .item {\n border-radius: 0 !important;\n }\n }\n .item {\n display: flex;\n align-items: center;\n padding-inline: var(--wje-tree-item-padding-inline);\n padding-block: var(--wje-tree-item-padding-block);\n border-radius: var(--wje-tree-item-border-radius);\n background-color: var(--wje-tree-item-background);\n color: var(--wje-tree-item-color);\n &:hover {\n background-color: var(--wje-tree-item-background-hover);\n color: var(--wje-tree-item-color-hover);\n }\n .indent {\n display: block;\n width: 1em;\n }\n .toggle {\n font-size: var(--wje-font-size-medium);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: content-box;\n width: var(--wje-tree-item-indent);\n height: var(--wje-tree-item-indent);\n flex-shrink: 0;\n }\n wje-checkbox {\n font-size: var(--wje-font-size-medium);\n margin: 0;\n }\n .content {\n font-size: var(--wje-font-size-medium);\n }\n slot {\n display: flex;\n align-items: center;\n }\n slot:not([name])::slotted(wje-icon) {\n margin-right: var(--wje-spacing-2x-small);\n }\n slot[name='end'] {\n margin-inline-start: auto;\n }\n }\n .children {\n font-size: calc(
|
|
5
|
+
const styles = "/*\n[ WJ Tree Item ]\n*/\n\n:host {\n .native-tree-item {\n position: relative;\n display: flex;\n align-items: stretch;\n flex-direction: column;\n &.multiple {\n .item {\n border-radius: 0 !important;\n }\n }\n .item {\n display: flex;\n align-items: center;\n padding-inline: var(--wje-tree-item-padding-inline);\n padding-block: var(--wje-tree-item-padding-block);\n border-radius: var(--wje-tree-item-border-radius);\n background-color: var(--wje-tree-item-background);\n color: var(--wje-tree-item-color);\n &:hover {\n background-color: var(--wje-tree-item-background-hover);\n color: var(--wje-tree-item-color-hover);\n }\n .indent {\n display: block;\n width: 1em;\n }\n .toggle {\n font-size: var(--wje-font-size-medium);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: content-box;\n width: var(--wje-tree-item-indent);\n height: var(--wje-tree-item-indent);\n flex-shrink: 0;\n }\n wje-checkbox {\n font-size: var(--wje-font-size-medium);\n margin: 0;\n }\n .content {\n font-size: var(--wje-font-size-medium);\n }\n slot {\n display: flex;\n align-items: center;\n }\n slot:not([name])::slotted(wje-icon) {\n margin-right: var(--wje-spacing-2x-small);\n }\n slot[name='end'] {\n margin-inline-start: auto;\n }\n }\n .children {\n font-size: calc(1rem + var(--wje-tree-item-indent, var(--wje-spacing-medium)));\n display: none;\n &.open {\n font-size: var(--wje-font-size-medium);\n display: block;\n\n ::before {\n content: '';\n position: absolute;\n top: var(--wje-tree-item-indent);\n bottom: 5px;\n left: calc(1em - (var(--wje-spacing-3x-small) * 2) - (var(--wje-tree-item-indent-guid-width) / 2));\n border-inline-end: var(--wje-tree-item-indent-guid-width) solid var(--wje-border-color);\n z-index: 1;\n }\n }\n }\n }\n\n .native-tree-item.expanded .item slot[name='expand'],\n .native-tree-item:not(.expanded) slot[name='collapse'] {\n display: none;\n }\n}\n\n:host([selected]) {\n .item {\n background-color: var(--wje-tree-item-background-selected);\n color: var(--wje-tree-item-color-selected);\n }\n}\n:host([slot-hover-visible]) {\n .item {\n &:hover {\n slot[name='start'], slot[name='end'] {\n visibility: visible;\n }\n }\n slot[name='start'], slot[name='end'] {\n visibility: hidden;\n }\n }\n}\n";
|
|
6
6
|
class TreeItem extends WJElement {
|
|
7
7
|
/**
|
|
8
8
|
* Creates an instance of Toast.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wj-elements",
|
|
3
3
|
"description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.203",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|