wj-elements 0.3.4 → 0.3.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.
- package/dist/packages/index.d.ts +0 -1
- package/dist/packages/wje-button/button.element.d.ts +1 -12
- package/dist/packages/wje-menu-item/menu-item.element.d.ts +2 -3
- package/dist/packages/wje-router-link/router-link.element.d.ts +1 -2
- package/dist/packages/wje-sliding-container/sliding-container.element.d.ts +2 -2
- package/dist/packages/wje-tab/tab.element.d.ts +1 -2
- package/dist/{router-links-DU0wTw84.js → router-links-wjqCnncc.js} +8 -14
- package/dist/router-links-wjqCnncc.js.map +1 -0
- package/dist/wje-button.js +18 -43
- package/dist/wje-button.js.map +1 -1
- package/dist/wje-dialog.js +7 -4
- package/dist/wje-dialog.js.map +1 -1
- package/dist/wje-master.js +1 -1
- package/dist/wje-menu-item.js +3 -17
- package/dist/wje-menu-item.js.map +1 -1
- package/dist/wje-router-link.js +2 -12
- package/dist/wje-router-link.js.map +1 -1
- package/dist/wje-routerx.js +8 -69
- package/dist/wje-routerx.js.map +1 -1
- package/dist/wje-tab.js +2 -12
- package/dist/wje-tab.js.map +1 -1
- package/package.json +5 -5
- package/dist/packages/utils/router-links.d.ts +0 -8
- package/dist/router-links-DU0wTw84.js.map +0 -1
package/dist/packages/index.d.ts
CHANGED
|
@@ -190,8 +190,7 @@ export default class Button extends WJElement {
|
|
|
190
190
|
* After draw method for the Button element.
|
|
191
191
|
*/
|
|
192
192
|
afterDraw(): void;
|
|
193
|
-
|
|
194
|
-
unbindRouterLinks: () => void;
|
|
193
|
+
unbindRouterLinks: any;
|
|
195
194
|
/**
|
|
196
195
|
* Event dialog open method for the Button element.
|
|
197
196
|
* @param {Event} e The event object
|
|
@@ -201,16 +200,6 @@ export default class Button extends WJElement {
|
|
|
201
200
|
* Toggle states method for the Button element.
|
|
202
201
|
*/
|
|
203
202
|
toggleStates: () => void;
|
|
204
|
-
/**
|
|
205
|
-
* Returns assigned toggle elements.
|
|
206
|
-
* @returns {HTMLElement[]}
|
|
207
|
-
*/
|
|
208
|
-
getToggleNodes(): HTMLElement[];
|
|
209
|
-
/**
|
|
210
|
-
* Sets toggle state and updates slotted toggle visibility.
|
|
211
|
-
* @param {'on'|'off'|string} value
|
|
212
|
-
*/
|
|
213
|
-
setToggleState(value: "on" | "off" | string): void;
|
|
214
203
|
/**
|
|
215
204
|
* Syncs ARIA attributes on the host element.
|
|
216
205
|
*/
|
|
@@ -99,15 +99,14 @@ export default class MenuItem extends WJElement {
|
|
|
99
99
|
* Adds event listeners after drawing the MenuItem.
|
|
100
100
|
*/
|
|
101
101
|
afterDraw(): void;
|
|
102
|
+
unbindRouterLinks: any;
|
|
102
103
|
/**
|
|
103
104
|
* Syncs ARIA attributes based on menu item state.
|
|
104
105
|
*/
|
|
105
106
|
syncAria(): void;
|
|
106
107
|
mouseenterHandler: (e: any) => void;
|
|
107
108
|
rebindRouterLinks: (e: any) => void;
|
|
108
|
-
unbindPortalRouterLinks:
|
|
109
|
-
bindRouterLinks(): void;
|
|
110
|
-
unbindRouterLinks: () => void;
|
|
109
|
+
unbindPortalRouterLinks: any;
|
|
111
110
|
/**
|
|
112
111
|
* Handles the click event on the MenuItem.
|
|
113
112
|
* @param {object} e
|
|
@@ -246,8 +246,8 @@ export default class SlidingContainer extends WJElement {
|
|
|
246
246
|
* @returns {Promise<void>} A promise that resolves when the transition animation is completed.
|
|
247
247
|
*/
|
|
248
248
|
doAnimateTransition(): Promise<void>;
|
|
249
|
-
animation:
|
|
250
|
-
nativeAnimation:
|
|
249
|
+
animation: any;
|
|
250
|
+
nativeAnimation: any;
|
|
251
251
|
/**
|
|
252
252
|
* Opens the sliding container by performing necessary preparatory and transitional operations.
|
|
253
253
|
* @param {Event} e The event that triggered the open operation.
|
|
@@ -63,8 +63,7 @@ export default class Tab extends WJElement {
|
|
|
63
63
|
* // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.
|
|
64
64
|
*/
|
|
65
65
|
afterDraw(): void;
|
|
66
|
-
|
|
67
|
-
unbindRouterLinks: () => void;
|
|
66
|
+
unbindRouterLinks: any;
|
|
68
67
|
/**
|
|
69
68
|
* Sync aria-label on host based on slotted text when not provided.
|
|
70
69
|
*/
|
|
@@ -51,7 +51,6 @@ function mutationHandler(mutations, observer) {
|
|
|
51
51
|
}
|
|
52
52
|
const elementsObserverConfig = { childList: true, subtree: true, attributes: true };
|
|
53
53
|
function getAttributeValues(el, prefix, result) {
|
|
54
|
-
if (!el) return result;
|
|
55
54
|
const attributes = el.attributes;
|
|
56
55
|
for (let i = 0; i < attributes.length; i++) {
|
|
57
56
|
const attr = attributes[i];
|
|
@@ -68,7 +67,6 @@ function getDefaults(rootEl, routeName, propName, routeEl, options) {
|
|
|
68
67
|
return result || {};
|
|
69
68
|
}
|
|
70
69
|
function getRouteProp(rootEl, routeName, routeEl, propName, attrPrefix) {
|
|
71
|
-
if (!rootEl || !routeEl || !rootEl[routerLinksData]) return {};
|
|
72
70
|
const options = rootEl[routerLinksData].options;
|
|
73
71
|
const defaults = getDefaults(rootEl, routeName, propName, routeEl, options);
|
|
74
72
|
getAttributeValues(rootEl, attrPrefix, defaults);
|
|
@@ -82,7 +80,6 @@ function updateActiveClass(el, routeName, params, query) {
|
|
|
82
80
|
}
|
|
83
81
|
}
|
|
84
82
|
function updateLink(el, rootEl) {
|
|
85
|
-
if (!el || !rootEl) return;
|
|
86
83
|
const routeName = el.getAttribute("route");
|
|
87
84
|
if (!routeName) return;
|
|
88
85
|
const params = getRouteProp(rootEl, routeName, el, "params", "param-");
|
|
@@ -99,7 +96,6 @@ function updateLink(el, rootEl) {
|
|
|
99
96
|
}
|
|
100
97
|
}
|
|
101
98
|
function createLinks(rootEl) {
|
|
102
|
-
if (!rootEl) return;
|
|
103
99
|
const routeEls = rootEl.querySelectorAll("[route]");
|
|
104
100
|
routeEls.forEach((el) => {
|
|
105
101
|
updateLink(el, rootEl);
|
|
@@ -109,7 +105,6 @@ function linkClickHandler(e) {
|
|
|
109
105
|
if (e.type === "click" && (e.button !== 0 || isModifiedEvent(e))) return;
|
|
110
106
|
e.preventDefault();
|
|
111
107
|
const el = e.selectorTarget;
|
|
112
|
-
if (!el) return;
|
|
113
108
|
const routeName = el.getAttribute("route");
|
|
114
109
|
if (!routeName) return;
|
|
115
110
|
const params = getRouteProp(this, routeName, el, "params", "param-");
|
|
@@ -118,18 +113,21 @@ function linkClickHandler(e) {
|
|
|
118
113
|
router[method](routeName, params, query);
|
|
119
114
|
}
|
|
120
115
|
function bindRouterLinks(rootEl, options = {}) {
|
|
121
|
-
if (!rootEl) return () => {
|
|
122
|
-
};
|
|
123
116
|
const observer = new MutationObserver(mutationHandler);
|
|
124
117
|
observer.rootEl = rootEl;
|
|
125
118
|
rootEl[routerLinksData] = { options, observer };
|
|
126
|
-
const eventHandler = delegate(
|
|
119
|
+
const eventHandler = delegate(
|
|
120
|
+
rootEl,
|
|
121
|
+
options.event || "click",
|
|
122
|
+
"[route]",
|
|
123
|
+
linkClickHandler,
|
|
124
|
+
rootEl
|
|
125
|
+
);
|
|
127
126
|
createLinks(rootEl);
|
|
128
127
|
observer.observe(rootEl, elementsObserverConfig);
|
|
129
128
|
linkContainers.add(rootEl);
|
|
130
129
|
return function() {
|
|
131
130
|
linkContainers.delete(rootEl);
|
|
132
|
-
observer.disconnect();
|
|
133
131
|
undelegate(rootEl, eventHandler);
|
|
134
132
|
};
|
|
135
133
|
}
|
|
@@ -138,10 +136,6 @@ function create(instance) {
|
|
|
138
136
|
}
|
|
139
137
|
function done() {
|
|
140
138
|
linkContainers.forEach((rootEl) => {
|
|
141
|
-
if (!rootEl || typeof rootEl.querySelectorAll !== "function" || !rootEl[routerLinksData]) {
|
|
142
|
-
linkContainers.delete(rootEl);
|
|
143
|
-
return;
|
|
144
|
-
}
|
|
145
139
|
rootEl.querySelectorAll("[route]").forEach((el) => {
|
|
146
140
|
const routeName = el.getAttribute("route");
|
|
147
141
|
if (!routeName) return;
|
|
@@ -159,4 +153,4 @@ export {
|
|
|
159
153
|
bindRouterLinks as b,
|
|
160
154
|
routerLinks as r
|
|
161
155
|
};
|
|
162
|
-
//# sourceMappingURL=router-links-
|
|
156
|
+
//# sourceMappingURL=router-links-wjqCnncc.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"router-links-wjqCnncc.js","sources":["../node_modules/slick-router/lib/middlewares/router-links.js"],"sourcesContent":["const routerLinksData = Symbol('routerLinksData')\nconst linkContainers = new Set()\nlet router\n\n/**\n * @callback RoutePropCallback\n * @param {string} routeName\n * @param {HTMLElement} routeEl\n * @return {Record<string, any>}\n *\n * @typedef RouterLinksOptions\n * @property {Record<string, any> | RoutePropCallback} [params]\n * @property {Record<string, any> | RoutePropCallback} [query]\n * @property {string} [event='click']\n */\n\n// Make a event delegation handler for the given `eventName` and `selector`\n// and attach it to `el`.\n// If selector is empty, the listener will be bound to `el`. If not, a\n// new handler that will recursively traverse up the event target's DOM\n// hierarchy looking for a node that matches the selector. If one is found,\n// the event's `delegateTarget` property is set to it and the return the\n// result of calling bound `listener` with the parameters given to the\n// handler.\n\n/**\n * @param {HTMLElement} el\n * @param {string} eventName\n * @param {string} selector\n * @param {Function} listener\n * @param {*} context\n * @return {Function}\n */\nconst delegate = function (el, eventName, selector, listener, context) {\n const handler = function (e) {\n let node = e.target\n for (; node && node !== el; node = node.parentNode) {\n if (node.matches && node.matches(selector)) {\n e.selectorTarget = node\n listener.call(context, e)\n }\n }\n }\n\n handler.eventName = eventName\n el.addEventListener(eventName, handler, false)\n return handler\n}\n\nfunction isModifiedEvent(event) {\n return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)\n}\n\nconst undelegate = function (el, handler) {\n const eventName = handler.eventName\n el.removeEventListener(eventName, handler, false)\n}\n\nconst camelize = (str) => {\n if (str.indexOf('-') === -1) return str\n const words = str.split('-')\n let result = ''\n for (let i = 0; i < words.length; i++) {\n const word = words[i]\n result += i ? word.charAt(0).toUpperCase() + word.slice(1) : word\n }\n return result\n}\n\nfunction mutationHandler(mutations, observer) {\n mutations.forEach(function (mutation) {\n if (mutation.type === 'attributes') {\n const attr = mutation.attributeName\n if (attr.indexOf('param-') === 0 || attr.indexOf('query-') === 0) {\n updateLink(mutation.target, observer.rootEl)\n }\n } else {\n mutation.addedNodes.forEach((node) => {\n if (node.nodeType === 1) {\n if (node.getAttribute('route')) updateLink(node, observer.rootEl)\n createLinks(observer.rootEl, node)\n }\n })\n }\n })\n}\n\nconst elementsObserverConfig = { childList: true, subtree: true, attributes: true }\n\nfunction getAttributeValues(el, prefix, result) {\n const attributes = el.attributes\n\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes[i]\n if (attr.name.indexOf(prefix) === 0) {\n const paramName = camelize(attr.name.slice(prefix.length))\n result[paramName] = attr.value\n }\n }\n return result\n}\n\nfunction getDefaults(rootEl, routeName, propName, routeEl, options) {\n let result = options[propName]\n if (typeof result === 'function') result = result.call(rootEl, routeName, routeEl)\n return result || {}\n}\n\nfunction getRouteProp(rootEl, routeName, routeEl, propName, attrPrefix) {\n const options = rootEl[routerLinksData].options\n const defaults = getDefaults(rootEl, routeName, propName, routeEl, options)\n getAttributeValues(rootEl, attrPrefix, defaults)\n return getAttributeValues(routeEl, attrPrefix, defaults)\n}\n\nfunction updateActiveClass(el, routeName, params, query) {\n const activeClass = el.hasAttribute('active-class') ? el.getAttribute('active-class') : 'active'\n if (activeClass) {\n const isActive = router.isActive(routeName, params, query, el.hasAttribute('exact'))\n el.classList.toggle(activeClass, isActive)\n }\n}\n\nfunction updateLink(el, rootEl) {\n const routeName = el.getAttribute('route')\n if (!routeName) return\n const params = getRouteProp(rootEl, routeName, el, 'params', 'param-')\n const query = getRouteProp(rootEl, routeName, el, 'query', 'query-')\n try {\n const href = router.generate(routeName, params, query)\n const anchorEl = el.tagName === 'A' ? el : el.querySelector('a')\n if (anchorEl) anchorEl.setAttribute('href', href)\n if (!router.state.activeTransition) {\n updateActiveClass(el, routeName, params, query)\n }\n } catch (error) {\n console.warn(`Error generating link for \"${routeName}\": ${error}`)\n }\n}\n\n/**\n * @param {HTMLElement} rootEl\n */\nfunction createLinks(rootEl) {\n const routeEls = rootEl.querySelectorAll('[route]')\n\n routeEls.forEach((el) => {\n updateLink(el, rootEl)\n })\n}\n\n/**\n * @param {Event} e\n * @returns\n */\nfunction linkClickHandler(e) {\n if (e.type === 'click' && (e.button !== 0 || isModifiedEvent(e))) return\n e.preventDefault()\n const el = e.selectorTarget\n const routeName = el.getAttribute('route')\n if (!routeName) return\n const params = getRouteProp(this, routeName, el, 'params', 'param-')\n const query = getRouteProp(this, routeName, el, 'query', 'query-')\n const method = el.hasAttribute('replace') ? 'replaceWith' : 'transitionTo'\n router[method](routeName, params, query)\n}\n\n/**\n * @export\n * @param {HTMLElement} rootEl\n * @param {RouterLinksOptions} [options={}]\n * @return {Function}\n */\nexport function bindRouterLinks(rootEl, options = {}) {\n const observer = new MutationObserver(mutationHandler)\n\n observer.rootEl = rootEl\n rootEl[routerLinksData] = { options, observer }\n\n const eventHandler = delegate(\n rootEl,\n options.event || 'click',\n '[route]',\n linkClickHandler,\n rootEl,\n )\n createLinks(rootEl)\n observer.observe(rootEl, elementsObserverConfig)\n\n linkContainers.add(rootEl)\n\n return function () {\n linkContainers.delete(rootEl)\n undelegate(rootEl, eventHandler)\n }\n}\n\nfunction create(instance) {\n router = instance\n}\n\nfunction done() {\n linkContainers.forEach((rootEl) => {\n rootEl.querySelectorAll('[route]').forEach((el) => {\n const routeName = el.getAttribute('route')\n if (!routeName) return\n const params = getRouteProp(rootEl, routeName, el, 'params', 'param-')\n const query = getRouteProp(rootEl, routeName, el, 'query', 'query-')\n updateActiveClass(el, routeName, params, query)\n })\n })\n}\n\nexport const routerLinks = {\n create,\n done,\n}\n"],"names":[],"mappings":"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","x_google_ignoreList":[0]}
|
package/dist/wje-button.js
CHANGED
|
@@ -8,7 +8,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
|
|
|
8
8
|
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
9
9
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
10
10
|
var _Button_instances, populateCustomEvent_fn;
|
|
11
|
-
import { b as bindRouterLinks } from "./router-links-
|
|
11
|
+
import { b as bindRouterLinks } from "./router-links-wjqCnncc.js";
|
|
12
12
|
import { bool } from "./utils.js";
|
|
13
13
|
import WJElement from "./wje-element.js";
|
|
14
14
|
import { I as Icon } from "./icon-DVyMc4Wv.js";
|
|
@@ -46,8 +46,15 @@ class Button extends WJElement {
|
|
|
46
46
|
* Toggle states method for the Button element.
|
|
47
47
|
*/
|
|
48
48
|
__publicField(this, "toggleStates", () => {
|
|
49
|
-
const
|
|
50
|
-
|
|
49
|
+
const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);
|
|
50
|
+
nodes.forEach((node, index) => {
|
|
51
|
+
if (node.classList.contains("show")) {
|
|
52
|
+
node.classList.remove("show");
|
|
53
|
+
} else {
|
|
54
|
+
node.classList.add("show");
|
|
55
|
+
this.setAttribute("value", index === 0 ? "on" : "off");
|
|
56
|
+
}
|
|
57
|
+
});
|
|
51
58
|
this.syncAria();
|
|
52
59
|
});
|
|
53
60
|
}
|
|
@@ -358,14 +365,16 @@ class Button extends WJElement {
|
|
|
358
365
|
*/
|
|
359
366
|
afterDraw() {
|
|
360
367
|
if (this.hasAttribute("route")) {
|
|
361
|
-
this.bindRouterLinks();
|
|
362
|
-
if (!this.unbindRouterLinks) {
|
|
363
|
-
queueMicrotask(() => this.bindRouterLinks());
|
|
364
|
-
}
|
|
368
|
+
this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });
|
|
365
369
|
}
|
|
366
370
|
if (this.hasToggle) {
|
|
367
|
-
|
|
368
|
-
|
|
371
|
+
if (this.toggle === "off") {
|
|
372
|
+
this.slotToggle.assignedNodes()[1].classList.add("show");
|
|
373
|
+
this.setAttribute("value", "off");
|
|
374
|
+
} else {
|
|
375
|
+
this.slotToggle.assignedNodes()[0].classList.add("show");
|
|
376
|
+
this.setAttribute("value", "on");
|
|
377
|
+
}
|
|
369
378
|
}
|
|
370
379
|
if (this.hasAttribute("custom-event")) {
|
|
371
380
|
event.addListener(this, "click", null, __privateMethod(this, _Button_instances, populateCustomEvent_fn));
|
|
@@ -393,13 +402,6 @@ class Button extends WJElement {
|
|
|
393
402
|
}
|
|
394
403
|
this.syncAria();
|
|
395
404
|
}
|
|
396
|
-
bindRouterLinks() {
|
|
397
|
-
var _a;
|
|
398
|
-
const parent = this.parentElement;
|
|
399
|
-
if (!parent) return;
|
|
400
|
-
(_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
|
|
401
|
-
this.unbindRouterLinks = bindRouterLinks(parent, { selector: false });
|
|
402
|
-
}
|
|
403
405
|
/**
|
|
404
406
|
* Before disconnect method for the Button element.
|
|
405
407
|
*/
|
|
@@ -414,33 +416,6 @@ class Button extends WJElement {
|
|
|
414
416
|
this.removeEventListener("click", this.eventDialogOpen);
|
|
415
417
|
(_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
|
|
416
418
|
}
|
|
417
|
-
/**
|
|
418
|
-
* Returns assigned toggle elements.
|
|
419
|
-
* @returns {HTMLElement[]}
|
|
420
|
-
*/
|
|
421
|
-
getToggleNodes() {
|
|
422
|
-
if (!this.slotToggle) return [];
|
|
423
|
-
if (typeof this.slotToggle.assignedElements === "function") {
|
|
424
|
-
return this.slotToggle.assignedElements({ flatten: true });
|
|
425
|
-
}
|
|
426
|
-
return this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);
|
|
427
|
-
}
|
|
428
|
-
/**
|
|
429
|
-
* Sets toggle state and updates slotted toggle visibility.
|
|
430
|
-
* @param {'on'|'off'|string} value
|
|
431
|
-
*/
|
|
432
|
-
setToggleState(value) {
|
|
433
|
-
const nodes = this.getToggleNodes();
|
|
434
|
-
if (!nodes.length) return;
|
|
435
|
-
nodes.forEach((node) => node.classList.remove("show"));
|
|
436
|
-
const expectedState = value === "off" ? "off" : "on";
|
|
437
|
-
const targetNode = expectedState === "off" ? nodes[1] ?? nodes[0] : nodes[0];
|
|
438
|
-
targetNode == null ? void 0 : targetNode.classList.add("show");
|
|
439
|
-
const normalizedValue = expectedState === "off" && nodes[1] ? "off" : "on";
|
|
440
|
-
if (this.getAttribute("value") !== normalizedValue) {
|
|
441
|
-
this.setAttribute("value", normalizedValue);
|
|
442
|
-
}
|
|
443
|
-
}
|
|
444
419
|
/**
|
|
445
420
|
* Syncs ARIA attributes on the host element.
|
|
446
421
|
*/
|
package/dist/wje-button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-button.js","sources":["../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["import { bindRouterLinks } from '../utils/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n */\n\nexport default class Button extends WJElement {\n /**\n * Button constructor method.\n * @class\n */\n constructor() {\n super();\n }\n\n /**\n * Dependencies of the Button element.\n * @type {object}\n */\n dependencies = {\n 'wje-icon': Icon,\n };\n\n /**\n * Properties of the element Button.\n * @param value\n */\n set color(value) {\n this.setAttribute('color', value || 'default');\n }\n\n /**\n * Get color of the Button element.\n * @returns {string|string}\n */\n get color() {\n return this.getAttribute('color') || 'default';\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set caret(value) {\n this.setAttribute('caret', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {boolean}\n */\n get caret() {\n return this.hasAttribute('caret');\n }\n\n /**\n * Sets the 'round' attribute on the element. If the value is true, the attribute is added;\n * otherwise, it is removed from the element.\n * @param {boolean} value A boolean indicating whether to set or remove the 'round' attribute.\n */\n set round(value) {\n if (value) {\n this.setAttribute('round', '');\n } else {\n this.removeAttribute('round');\n }\n }\n\n /**\n * Retrieves the value of the 'round' attribute as a boolean.\n * Checks if the 'round' attribute is present on the element.\n * @returns {boolean} True if the 'round' attribute exists, otherwise false.\n */\n get round() {\n return this.hasAttribute('round');\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set tooltip(value) {\n this.setAttribute('tooltip', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {boolean}\n */\n get tooltip() {\n return this.hasAttribute('tooltip');\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set dialog(value) {\n this.setAttribute('dialog', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {string|object}\n */\n get dialog() {\n return this.getAttribute('dialog');\n }\n\n /**\n * Set active state of the Button element.\n * @param {boolean} value The value to set\n */\n set active(value) {\n this.setAttribute('active', '');\n }\n\n /**\n * Get active state of the Button element.\n * @returns {boolean} active - The active state\n */\n get active() {\n return this.hasAttribute('active');\n }\n\n /**\n * Set disabled state of the Button element.\n * @param {boolean} value The value to set\n */\n set disabled(value) {\n this.removeAttribute('disabled');\n\n if (value) {\n this.setAttribute('disabled', '');\n }\n }\n\n /**\n * Get disabled state of the Button element.\n * @returns {boolean} disabled - The disabled state\n */\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /**\n * Set fill of the Button element.\n * @param {string} value The value to set\n */\n set fill(value) {\n this.setAttribute('fill', value);\n }\n\n /**\n * Get fill of the Button element.\n * @returns {string} fill - The fill value\n */\n get fill() {\n return this.getAttribute('fill') || 'solid';\n }\n\n /**\n * Set outline state of the Button element.\n * @param {boolean} value The value to set\n */\n set outline(value) {\n this.setAttribute('outline', '');\n }\n\n /**\n * Get outline state of the Button element.\n * @returns {boolean} outline - The outline state\n */\n get outline() {\n return this.hasAttribute('outline');\n }\n\n /**\n * Set stop propagation state of the Button element.\n * @param {boolean} value The value to set\n */\n set stopPropagation(value) {\n this.setAttribute('stop-propagation', bool(value));\n }\n\n /**\n * Get stop propagation state of the Button element.\n * @returns {boolean} stopPropagation - The stop propagation state\n */\n get stopPropagation() {\n return bool(this.getAttribute('stop-propagation'));\n }\n\n /**\n * Sets the value of the custom event attribute.\n * @param {string} value The value to be assigned to the custom event attribute.\n */\n set customEvent(value) {\n this.setAttribute('custom-event', value);\n }\n\n /**\n * Retrieves the value of the 'custom-event' attribute from the element.\n * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n */\n get customEvent() {\n return this.getAttribute('custom-event');\n }\n\n /**\n * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n * Attributes considered are those that begin with 'custom-event-'.\n * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n * and the values are the corresponding attribute values.\n * @returns {object} An object containing key-value pairs of custom event parameters.\n */\n get customEventParameters() {\n const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n return attributes.reduce((acc, attr) => {\n const key = attr.name.replace('custom-event-', '');\n acc[key] = attr.value;\n\n return acc;\n }, {});\n }\n\n /**\n * Class name for the Button element\n * @type {string}\n */\n className = 'Button';\n\n /**\n * Get CSS stylesheet for the Button element.\n * @static\n * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Get observed attributes for the Button element.\n * @static\n * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n */\n static get observedAttributes() {\n return ['disabled', 'color', 'value', 'active', 'href'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (['disabled', 'value', 'active', 'href'].includes(name)) {\n this.syncAria?.();\n }\n }\n\n /**\n * @summary A static property that indicates whether the custom element is form-associated or not.\n * Form-associated custom elements are elements that can participate in form submission.\n * @type {boolean}\n */\n static formAssociated = true;\n\n /**\n * @summary Callback function that is called when the custom element is associated with a form.\n * This function sets the internal `_form` property to the associated form.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n */\n formAssociatedCallback(form) {\n this._form = form;\n }\n\n /**\n * @summary Callback function that is called when the form-associated state of the custom element changes.\n * This function updates the 'disabled' attribute of the element based on the new state.\n * @param {boolean} disabled The new form-associated state.\n */\n formDisabledCallback(disabled) {\n if (disabled) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /**\n * Setup attributes for the Button element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /**\n * Draw method for the Button element.\n * @returns {object} fragment - The document fragment containing the drawn element.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n if (this.hasAttribute('href')) {\n native.setAttribute('href', this.getAttribute('href'));\n } else {\n if (this.type === 'submit') {\n native.setAttribute('type', 'submit');\n }\n }\n\n native.classList.add('native-button');\n native.setAttribute('part', 'native');\n\n this.classList.remove('wje-button-disabled');\n\n if (this.disabled) native.classList.add('wje-button-disabled');\n\n if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n if (this.outline) native.classList.add('wje-outline');\n\n if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n if (this.size) native.classList.add('wje-button-' + this.size);\n\n if (\n (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) ||\n this.hasAttribute('only-caret')\n ) {\n let i = document.createElement('wje-icon');\n i.style.setProperty('--wje-icon-size', '14px');\n i.setAttribute('slot', 'caret');\n i.setAttribute('name', 'chevron-down');\n i.setAttribute('part', 'caret');\n\n this.appendChild(i);\n }\n\n if (this.active) {\n this.classList.add('wje-active');\n let i = document.createElement('wje-icon');\n i.setAttribute('name', 'check');\n\n this.appendChild(i);\n }\n\n native.classList.add('wje-color-' + this.color, 'wje-color');\n\n let span = document.createElement('span');\n span.setAttribute('part', 'inner');\n span.classList.add('button-inner');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'icon-only');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'start');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'end');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'caret');\n span.appendChild(slot);\n\n this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n if (this.hasToggle) {\n this.slotToggle = document.createElement('slot');\n this.slotToggle.setAttribute('name', 'toggle');\n\n span.appendChild(this.slotToggle);\n }\n\n native.appendChild(span);\n\n if (this.tooltip) {\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', this.getAttribute('tooltip'));\n tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') || 'top');\n tooltip.appendChild(native);\n\n fragment.appendChild(tooltip);\n } else {\n fragment.appendChild(native);\n }\n\n return fragment;\n }\n\n /**\n * After draw method for the Button element.\n */\n afterDraw() {\n if (this.hasAttribute('route')) {\n this.bindRouterLinks();\n if (!this.unbindRouterLinks) {\n queueMicrotask(() => this.bindRouterLinks());\n }\n }\n\n // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n if (this.hasToggle) {\n const initialToggleValue = this.getAttribute('value') || (this.toggle === 'off' ? 'off' : 'on');\n this.setToggleState(initialToggleValue);\n }\n\n if (this.hasAttribute('custom-event')) {\n event.addListener(this, 'click', null, this.#populateCustomEvent);\n }\n\n if (this.hasAttribute('dialog')) {\n event.addListener(this, 'click', null, this.eventDialogOpen);\n } else {\n event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n }\n\n if (this.hasToggle)\n event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n stopPropagation: this.stopPropagation,\n });\n\n if (this.type === 'submit') {\n event.addListener(this, 'click', 'wje-button:submit', () => {\n event.dispatchCustomEvent(this.internals?.form, 'submit', {});\n });\n }\n\n if (this.type === 'reset') {\n event.addListener(this, 'click', 'wje-button:reset', () => {\n this.internals?.form.reset();\n });\n }\n\n this.syncAria();\n }\n\n bindRouterLinks() {\n const parent = this.parentElement;\n if (!parent) return;\n\n this.unbindRouterLinks?.();\n this.unbindRouterLinks = bindRouterLinks(parent, { selector: false });\n }\n\n /**\n * Before disconnect method for the Button element.\n */\n beforeDisconnect() {\n // remove all events from the button\n event.removeListener(this, 'click', null, this.eventDialogOpen);\n event.removeListener(this, 'click', 'wje-button:click', null);\n event.removeListener(this, 'click', 'wje-button:toggle', this.toggleStates);\n event.removeListener(this, 'click', null, this.#populateCustomEvent);\n event.removeListener(this, 'click', 'wje-button:submit', null);\n event.removeListener(this, 'click', 'wje-button:reset', null);\n\n this.removeEventListener('click', this.eventDialogOpen);\n this.unbindRouterLinks?.();\n }\n\n /**\n * Event dialog open method for the Button element.\n * @param {Event} e The event object\n */\n eventDialogOpen = (e) => {\n event.dispatchCustomEvent(this, this.dialog);\n };\n\n /**\n * Toggle states method for the Button element.\n */\n toggleStates = () => {\n const nextValue = this.getAttribute('value') === 'off' ? 'on' : 'off';\n this.setToggleState(nextValue);\n\n this.syncAria();\n }\n\n /**\n * Returns assigned toggle elements.\n * @returns {HTMLElement[]}\n */\n getToggleNodes() {\n if (!this.slotToggle) return [];\n if (typeof this.slotToggle.assignedElements === 'function') {\n return this.slotToggle.assignedElements({ flatten: true });\n }\n\n return this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n }\n\n /**\n * Sets toggle state and updates slotted toggle visibility.\n * @param {'on'|'off'|string} value\n */\n setToggleState(value) {\n const nodes = this.getToggleNodes();\n if (!nodes.length) return;\n\n nodes.forEach((node) => node.classList.remove('show'));\n\n const expectedState = value === 'off' ? 'off' : 'on';\n const targetNode = expectedState === 'off' ? (nodes[1] ?? nodes[0]) : nodes[0];\n targetNode?.classList.add('show');\n\n const normalizedValue = expectedState === 'off' && nodes[1] ? 'off' : 'on';\n if (this.getAttribute('value') !== normalizedValue) {\n this.setAttribute('value', normalizedValue);\n }\n }\n\n /**\n * Syncs ARIA attributes on the host element.\n */\n syncAria() {\n const isLink = this.hasAttribute('href');\n const isToggle = !!this.hasToggle;\n const pressed = isToggle && !isLink ? this.getAttribute('value') === 'on' : undefined;\n\n this.setAriaState({\n role: isLink ? 'link' : 'button',\n disabled: this.disabled,\n pressed,\n });\n }\n\n /**\n * Dispatches a custom event with specified parameters.\n * This method uses the `customEvent` and `customEventParameters` properties\n * to create and dispatch a `CustomEvent`. The event is configured to be\n * composed and bubbles up through the DOM.\n * @returns {void} This method does not return a value.\n */\n #populateCustomEvent() {\n this.dispatchEvent(\n new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n );\n }\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-button.js","sources":["../packages/wje-button/button.element.js","../packages/wje-button/button.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { bool } from '../utils/utils.js';\nimport { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/button\n * @status stable\n * @augments WJElement\n * @dependency wje-icon\n * @slot - The button main content.\n * @slot icon - The button icon.\n * @slot caret - The button caret.\n * @slot start - The button start slot.\n * @slot end - The button end slot.\n * @slot toggle - The button toggle slot.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-button-background-color=transparent] - Background color of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-4] - Border color of the component;\n * @cssproperty [--wje-button-color=--wje-color-contrast-11] - Color of the component;\n * @cssproperty [--wje-button-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-button-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-button-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-button-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-button-margin-inline=0] - Margin inline of the component;\n */\n\nexport default class Button extends WJElement {\n /**\n * Button constructor method.\n * @class\n */\n constructor() {\n super();\n }\n\n /**\n * Dependencies of the Button element.\n * @type {object}\n */\n dependencies = {\n 'wje-icon': Icon,\n };\n\n /**\n * Properties of the element Button.\n * @param value\n */\n set color(value) {\n this.setAttribute('color', value || 'default');\n }\n\n /**\n * Get color of the Button element.\n * @returns {string|string}\n */\n get color() {\n return this.getAttribute('color') || 'default';\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set caret(value) {\n this.setAttribute('caret', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {boolean}\n */\n get caret() {\n return this.hasAttribute('caret');\n }\n\n /**\n * Sets the 'round' attribute on the element. If the value is true, the attribute is added;\n * otherwise, it is removed from the element.\n * @param {boolean} value A boolean indicating whether to set or remove the 'round' attribute.\n */\n set round(value) {\n if (value) {\n this.setAttribute('round', '');\n } else {\n this.removeAttribute('round');\n }\n }\n\n /**\n * Retrieves the value of the 'round' attribute as a boolean.\n * Checks if the 'round' attribute is present on the element.\n * @returns {boolean} True if the 'round' attribute exists, otherwise false.\n */\n get round() {\n return this.hasAttribute('round');\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set tooltip(value) {\n this.setAttribute('tooltip', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {boolean}\n */\n get tooltip() {\n return this.hasAttribute('tooltip');\n }\n\n /**\n * Set variant of the Button element.\n * @param value\n */\n set dialog(value) {\n this.setAttribute('dialog', value);\n }\n\n /**\n * Get variant of the Button element.\n * @returns {string|object}\n */\n get dialog() {\n return this.getAttribute('dialog');\n }\n\n /**\n * Set active state of the Button element.\n * @param {boolean} value The value to set\n */\n set active(value) {\n this.setAttribute('active', '');\n }\n\n /**\n * Get active state of the Button element.\n * @returns {boolean} active - The active state\n */\n get active() {\n return this.hasAttribute('active');\n }\n\n /**\n * Set disabled state of the Button element.\n * @param {boolean} value The value to set\n */\n set disabled(value) {\n this.removeAttribute('disabled');\n\n if (value) {\n this.setAttribute('disabled', '');\n }\n }\n\n /**\n * Get disabled state of the Button element.\n * @returns {boolean} disabled - The disabled state\n */\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /**\n * Set fill of the Button element.\n * @param {string} value The value to set\n */\n set fill(value) {\n this.setAttribute('fill', value);\n }\n\n /**\n * Get fill of the Button element.\n * @returns {string} fill - The fill value\n */\n get fill() {\n return this.getAttribute('fill') || 'solid';\n }\n\n /**\n * Set outline state of the Button element.\n * @param {boolean} value The value to set\n */\n set outline(value) {\n this.setAttribute('outline', '');\n }\n\n /**\n * Get outline state of the Button element.\n * @returns {boolean} outline - The outline state\n */\n get outline() {\n return this.hasAttribute('outline');\n }\n\n /**\n * Set stop propagation state of the Button element.\n * @param {boolean} value The value to set\n */\n set stopPropagation(value) {\n this.setAttribute('stop-propagation', bool(value));\n }\n\n /**\n * Get stop propagation state of the Button element.\n * @returns {boolean} stopPropagation - The stop propagation state\n */\n get stopPropagation() {\n return bool(this.getAttribute('stop-propagation'));\n }\n\n /**\n * Sets the value of the custom event attribute.\n * @param {string} value The value to be assigned to the custom event attribute.\n */\n set customEvent(value) {\n this.setAttribute('custom-event', value);\n }\n\n /**\n * Retrieves the value of the 'custom-event' attribute from the element.\n * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.\n */\n get customEvent() {\n return this.getAttribute('custom-event');\n }\n\n /**\n * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.\n * Attributes considered are those that begin with 'custom-event-'.\n * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,\n * and the values are the corresponding attribute values.\n * @returns {object} An object containing key-value pairs of custom event parameters.\n */\n get customEventParameters() {\n const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith('custom-event-'));\n\n return attributes.reduce((acc, attr) => {\n const key = attr.name.replace('custom-event-', '');\n acc[key] = attr.value;\n\n return acc;\n }, {});\n }\n\n /**\n * Class name for the Button element\n * @type {string}\n */\n className = 'Button';\n\n /**\n * Get CSS stylesheet for the Button element.\n * @static\n * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Get observed attributes for the Button element.\n * @static\n * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.\n */\n static get observedAttributes() {\n return ['disabled', 'color', 'value', 'active', 'href'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (['disabled', 'value', 'active', 'href'].includes(name)) {\n this.syncAria?.();\n }\n }\n\n /**\n * @summary A static property that indicates whether the custom element is form-associated or not.\n * Form-associated custom elements are elements that can participate in form submission.\n * @type {boolean}\n */\n static formAssociated = true;\n\n /**\n * @summary Callback function that is called when the custom element is associated with a form.\n * This function sets the internal `_form` property to the associated form.\n * @param {HTMLFormElement} form The form the custom element is associated with.\n */\n formAssociatedCallback(form) {\n this._form = form;\n }\n\n /**\n * @summary Callback function that is called when the form-associated state of the custom element changes.\n * This function updates the 'disabled' attribute of the element based on the new state.\n * @param {boolean} disabled The new form-associated state.\n */\n formDisabledCallback(disabled) {\n if (disabled) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /**\n * Setup attributes for the Button element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /**\n * Draw method for the Button element.\n * @returns {object} fragment - The document fragment containing the drawn element.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement(this.hasAttribute('href') ? 'a' : 'button');\n if (this.hasAttribute('href')) {\n native.setAttribute('href', this.getAttribute('href'));\n } else {\n if (this.type === 'submit') {\n native.setAttribute('type', 'submit');\n }\n }\n\n native.classList.add('native-button');\n native.setAttribute('part', 'native');\n\n this.classList.remove('wje-button-disabled');\n\n if (this.disabled) native.classList.add('wje-button-disabled');\n\n if (this.variant) native.classList.add('wje-button-' + this.variant);\n\n if (this.hasAttribute('round')) native.classList.add('wje-button-round');\n\n if (this.hasAttribute('circle')) native.classList.add('wje-button-circle');\n\n if (this.outline) native.classList.add('wje-outline');\n\n if (this.fill) native.classList.add('wje-button-' + this.fill);\n\n if (this.size) native.classList.add('wje-button-' + this.size);\n\n if (\n (this.querySelectorAll('[slot=caret]').length < 1 && this.hasAttribute('caret')) ||\n this.hasAttribute('only-caret')\n ) {\n let i = document.createElement('wje-icon');\n i.style.setProperty('--wje-icon-size', '14px');\n i.setAttribute('slot', 'caret');\n i.setAttribute('name', 'chevron-down');\n i.setAttribute('part', 'caret');\n\n this.appendChild(i);\n }\n\n if (this.active) {\n this.classList.add('wje-active');\n let i = document.createElement('wje-icon');\n i.setAttribute('name', 'check');\n\n this.appendChild(i);\n }\n\n native.classList.add('wje-color-' + this.color, 'wje-color');\n\n let span = document.createElement('span');\n span.setAttribute('part', 'inner');\n span.classList.add('button-inner');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'icon-only');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'start');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'end');\n span.appendChild(slot);\n\n slot = document.createElement('slot');\n slot.setAttribute('name', 'caret');\n span.appendChild(slot);\n\n this.hasToggle = WjElementUtils.hasSlot(this, 'toggle');\n\n if (this.hasToggle) {\n this.slotToggle = document.createElement('slot');\n this.slotToggle.setAttribute('name', 'toggle');\n\n span.appendChild(this.slotToggle);\n }\n\n native.appendChild(span);\n\n if (this.tooltip) {\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', this.getAttribute('tooltip'));\n tooltip.setAttribute('placement', this.getAttribute('tooltip-placement') || 'top');\n tooltip.appendChild(native);\n\n fragment.appendChild(tooltip);\n } else {\n fragment.appendChild(native);\n }\n\n return fragment;\n }\n\n /**\n * After draw method for the Button element.\n */\n afterDraw() {\n if (this.hasAttribute('route')) {\n this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n }\n\n // nastavenie toggle podla atributu, ak nie je nastaveny, tak sa zobrazi vzdy prvy element\n if (this.hasToggle) {\n if (this.toggle === 'off') {\n this.slotToggle.assignedNodes()[1].classList.add('show');\n this.setAttribute('value', 'off');\n } else {\n this.slotToggle.assignedNodes()[0].classList.add('show');\n this.setAttribute('value', 'on');\n }\n }\n\n if (this.hasAttribute('custom-event')) {\n event.addListener(this, 'click', null, this.#populateCustomEvent);\n }\n\n if (this.hasAttribute('dialog')) {\n event.addListener(this, 'click', null, this.eventDialogOpen);\n } else {\n event.addListener(this, 'click', 'wje-button:click', null); // { stopPropagation: this.stopPropagation } - zrusene kvoli dropdown kde som nevedel odchytit event click\n }\n\n if (this.hasToggle)\n event.addListener(this, 'click', 'wje-button:toggle', this.toggleStates, {\n stopPropagation: this.stopPropagation,\n });\n\n if (this.type === 'submit') {\n event.addListener(this, 'click', 'wje-button:submit', () => {\n event.dispatchCustomEvent(this.internals?.form, 'submit', {});\n });\n }\n\n if (this.type === 'reset') {\n event.addListener(this, 'click', 'wje-button:reset', () => {\n this.internals?.form.reset();\n });\n }\n\n this.syncAria();\n }\n\n /**\n * Before disconnect method for the Button element.\n */\n beforeDisconnect() {\n // remove all events from the button\n event.removeListener(this, 'click', null, this.eventDialogOpen);\n event.removeListener(this, 'click', 'wje-button:click', null);\n event.removeListener(this, 'click', 'wje-button:toggle', this.toggleStates);\n event.removeListener(this, 'click', null, this.#populateCustomEvent);\n event.removeListener(this, 'click', 'wje-button:submit', null);\n event.removeListener(this, 'click', 'wje-button:reset', null);\n\n this.removeEventListener('click', this.eventDialogOpen);\n this.unbindRouterLinks?.();\n }\n\n /**\n * Event dialog open method for the Button element.\n * @param {Event} e The event object\n */\n eventDialogOpen = (e) => {\n event.dispatchCustomEvent(this, this.dialog);\n };\n\n /**\n * Toggle states method for the Button element.\n */\n toggleStates = () => {\n const nodes = this.slotToggle.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE);\n\n nodes.forEach((node, index) => {\n if (node.classList.contains('show')) {\n node.classList.remove('show');\n } else {\n node.classList.add('show');\n this.setAttribute('value', index === 0 ? 'on' : 'off');\n }\n });\n\n this.syncAria();\n }\n\n /**\n * Syncs ARIA attributes on the host element.\n */\n syncAria() {\n const isLink = this.hasAttribute('href');\n const isToggle = !!this.hasToggle;\n const pressed = isToggle && !isLink ? this.getAttribute('value') === 'on' : undefined;\n\n this.setAriaState({\n role: isLink ? 'link' : 'button',\n disabled: this.disabled,\n pressed,\n });\n }\n\n /**\n * Dispatches a custom event with specified parameters.\n * This method uses the `customEvent` and `customEventParameters` properties\n * to create and dispatch a `CustomEvent`. The event is configured to be\n * composed and bubbles up through the DOM.\n * @returns {void} This method does not return a value.\n */\n #populateCustomEvent() {\n this.dispatchEvent(\n new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })\n );\n }\n}\n","import Button from './button.element.js';\n\nexport default Button;\n\nButton.define('wje-button', Button);\n"],"names":[],"mappings":"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"}
|
package/dist/wje-dialog.js
CHANGED
|
@@ -296,11 +296,11 @@ const _Dialog = class _Dialog extends WJElement {
|
|
|
296
296
|
* @param e
|
|
297
297
|
*/
|
|
298
298
|
__publicField(this, "onOpen", (e) => {
|
|
299
|
-
if (this.dialog)
|
|
300
|
-
|
|
301
|
-
}
|
|
299
|
+
if (!this.dialog) return;
|
|
300
|
+
this.dialog.innerHTML = "";
|
|
302
301
|
setTimeout(() => {
|
|
303
302
|
Promise.resolve(this.beforeOpen(this, e)).then((res) => {
|
|
303
|
+
if (!this.dialog) return;
|
|
304
304
|
this.htmlDialogBody(this.dialog);
|
|
305
305
|
this.dialog.showModal();
|
|
306
306
|
this.syncHostOpenState();
|
|
@@ -317,7 +317,10 @@ const _Dialog = class _Dialog extends WJElement {
|
|
|
317
317
|
*/
|
|
318
318
|
__publicField(this, "onClose", (e) => {
|
|
319
319
|
Promise.resolve(this.beforeClose(this, e)).then((res) => {
|
|
320
|
-
this.dialog.close
|
|
320
|
+
if (!this.dialog || typeof this.dialog.close !== "function") return;
|
|
321
|
+
if (this.dialog.open) {
|
|
322
|
+
this.dialog.close();
|
|
323
|
+
}
|
|
321
324
|
this.dialog.removeAttribute("aria-modal");
|
|
322
325
|
this.syncHostOpenState();
|
|
323
326
|
if (!this.dialog.open) {
|
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 static _instanceId = 0;\n /**\n * @class\n */\n constructor() {\n super();\n this._instanceId = ++Dialog._instanceId;\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 set hiddenHeader(value) {\n if (value) this.setAttribute('hidden-header', '');\n }\n\n get hiddenHeader() {\n return !!this.hasAttribute('hidden-header');\n }\n\n set hiddenFooter(value) {\n if (value) this.setAttribute('hidden-footer', '');\n }\n\n get hiddenFooter() {\n return !!this.hasAttribute('hidden-footer');\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 dialog.addEventListener('close', this.onNativeDialogClose);\n\n fragment.appendChild(dialog);\n\n this.dialog = dialog;\n this.syncHostOpenState();\n\n return fragment;\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\n /**\n * Creates the dialog body.\n * @param dialog\n */\n htmlDialogBody(dialog) {\n const dialogId = this.id || `wje-dialog-${this._instanceId}`;\n\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.setAttribute('aria-label', 'Close dialog');\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 header.id = `${dialogId}-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 body.id = `${dialogId}-body`;\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 slotFooter.id = 'footerSlot';\n slotFooter.addEventListener('slotchange', () => this.updateHasFooter());\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 if (!this.hiddenHeader) dialog.appendChild(header);\n dialog.appendChild(body);\n if (!this.hiddenFooter) dialog.appendChild(footer);\n\n dialog.setAttribute('role', 'dialog');\n dialog.setAttribute('aria-describedby', body.id);\n if (!this.hiddenHeader) {\n dialog.setAttribute('aria-labelledby', header.id);\n dialog.removeAttribute('aria-label');\n } else {\n dialog.removeAttribute('aria-labelledby');\n if (this.headline) {\n dialog.setAttribute('aria-label', this.headline);\n } else {\n dialog.removeAttribute('aria-label');\n }\n }\n\n Promise.resolve().then(() => this.updateHasFooter());\n }\n\n /**\n * Closes the dialog.\n * @param e\n */\n close(e) {\n this.onClose(e);\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.onNativeDialogClose);\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 this.syncHostOpenState();\n this.dialog.setAttribute('aria-modal', 'true');\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 this.dialog.removeAttribute('aria-modal');\n this.syncHostOpenState();\n\n if (!this.dialog.open) {\n Promise.resolve(this.afterClose(this, e));\n }\n });\n };\n\n onNativeDialogClose = () => {\n this.dialog?.removeAttribute('aria-modal');\n this.removeAttribute('open');\n };\n\n syncHostOpenState = () => {\n this.toggleAttribute('open', !!this.dialog?.open);\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 updateHasFooter() {\n // If footer is intentionally hidden, ensure it doesn't reserve space\n if (this.hiddenFooter) {\n const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n if (footerEl) footerEl.setAttribute('hidden', '');\n this.removeAttribute('has-footer');\n return;\n }\n const slot = this.shadowRoot?.getElementById('footerSlot');\n if (!slot) {\n this.removeAttribute('has-footer');\n return;\n }\n\n const assigned = slot.assignedNodes({ flatten: true });\n const hasContent = assigned.some((n) => {\n if (n.nodeType === Node.ELEMENT_NODE) return true;\n if (n.nodeType === Node.TEXT_NODE) return n.textContent.trim().length > 0;\n return false;\n });\n\n // Prefer toggling the actual footer element so CSS/spacing is always correct\n const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n if (footerEl) footerEl.toggleAttribute('hidden', !hasContent);\n\n // Keep host attribute too (harmless, may be used elsewhere)\n this.toggleAttribute('has-footer', hasContent);\n }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":["footerEl"],"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 static _instanceId = 0;\n /**\n * @class\n */\n constructor() {\n super();\n this._instanceId = ++Dialog._instanceId;\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 set hiddenHeader(value) {\n if (value) this.setAttribute('hidden-header', '');\n }\n\n get hiddenHeader() {\n return !!this.hasAttribute('hidden-header');\n }\n\n set hiddenFooter(value) {\n if (value) this.setAttribute('hidden-footer', '');\n }\n\n get hiddenFooter() {\n return !!this.hasAttribute('hidden-footer');\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 dialog.addEventListener('close', this.onNativeDialogClose);\n\n fragment.appendChild(dialog);\n\n this.dialog = dialog;\n this.syncHostOpenState();\n\n return fragment;\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\n /**\n * Creates the dialog body.\n * @param dialog\n */\n htmlDialogBody(dialog) {\n const dialogId = this.id || `wje-dialog-${this._instanceId}`;\n\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.setAttribute('aria-label', 'Close dialog');\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 header.id = `${dialogId}-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 body.id = `${dialogId}-body`;\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 slotFooter.id = 'footerSlot';\n slotFooter.addEventListener('slotchange', () => this.updateHasFooter());\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 if (!this.hiddenHeader) dialog.appendChild(header);\n dialog.appendChild(body);\n if (!this.hiddenFooter) dialog.appendChild(footer);\n\n dialog.setAttribute('role', 'dialog');\n dialog.setAttribute('aria-describedby', body.id);\n if (!this.hiddenHeader) {\n dialog.setAttribute('aria-labelledby', header.id);\n dialog.removeAttribute('aria-label');\n } else {\n dialog.removeAttribute('aria-labelledby');\n if (this.headline) {\n dialog.setAttribute('aria-label', this.headline);\n } else {\n dialog.removeAttribute('aria-label');\n }\n }\n\n Promise.resolve().then(() => this.updateHasFooter());\n }\n\n /**\n * Closes the dialog.\n * @param e\n */\n close(e) {\n this.onClose(e);\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.onNativeDialogClose);\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) return;\n this.dialog.innerHTML = '';\n\n setTimeout(() => {\n Promise.resolve(this.beforeOpen(this, e)).then((res) => {\n if (!this.dialog) return;\n this.htmlDialogBody(this.dialog);\n\n this.dialog.showModal(); // Now open the dialog\n this.syncHostOpenState();\n this.dialog.setAttribute('aria-modal', 'true');\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 if (!this.dialog || typeof this.dialog.close !== 'function') return;\n\n if (this.dialog.open) {\n this.dialog.close(); // Now close the dialog\n }\n this.dialog.removeAttribute('aria-modal');\n this.syncHostOpenState();\n\n if (!this.dialog.open) {\n Promise.resolve(this.afterClose(this, e));\n }\n });\n };\n\n onNativeDialogClose = () => {\n this.dialog?.removeAttribute('aria-modal');\n this.removeAttribute('open');\n };\n\n syncHostOpenState = () => {\n this.toggleAttribute('open', !!this.dialog?.open);\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 updateHasFooter() {\n // If footer is intentionally hidden, ensure it doesn't reserve space\n if (this.hiddenFooter) {\n const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n if (footerEl) footerEl.setAttribute('hidden', '');\n this.removeAttribute('has-footer');\n return;\n }\n const slot = this.shadowRoot?.getElementById('footerSlot');\n if (!slot) {\n this.removeAttribute('has-footer');\n return;\n }\n\n const assigned = slot.assignedNodes({ flatten: true });\n const hasContent = assigned.some((n) => {\n if (n.nodeType === Node.ELEMENT_NODE) return true;\n if (n.nodeType === Node.TEXT_NODE) return n.textContent.trim().length > 0;\n return false;\n });\n\n // Prefer toggling the actual footer element so CSS/spacing is always correct\n const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n if (footerEl) footerEl.toggleAttribute('hidden', !hasContent);\n\n // Keep host attribute too (harmless, may be used elsewhere)\n this.toggleAttribute('has-footer', hasContent);\n }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":["footerEl"],"mappings":"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"}
|
package/dist/wje-master.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
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
|
-
import { b } from "./router-links-
|
|
4
|
+
import { b } from "./router-links-wjqCnncc.js";
|
|
5
5
|
import { Localizer } from "./localize.js";
|
|
6
6
|
import { Permissions } from "./permissions.js";
|
|
7
7
|
import { UniversalService } from "./universal-service.js";
|
package/dist/wje-menu-item.js
CHANGED
|
@@ -8,7 +8,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
|
|
|
8
8
|
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
9
9
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
10
10
|
var _MenuItem_instances, populateCustomEvent_fn;
|
|
11
|
-
import { b as bindRouterLinks } from "./router-links-
|
|
11
|
+
import { b as bindRouterLinks } from "./router-links-wjqCnncc.js";
|
|
12
12
|
import WJElement from "./wje-element.js";
|
|
13
13
|
import { WjElementUtils } from "./element-utils.js";
|
|
14
14
|
import { event } from "./event.js";
|
|
@@ -209,11 +209,7 @@ class MenuItem extends WJElement {
|
|
|
209
209
|
}
|
|
210
210
|
});
|
|
211
211
|
__publicField(this, "rebindRouterLinks", (e) => {
|
|
212
|
-
|
|
213
|
-
const container = (_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.container;
|
|
214
|
-
if (!container) return;
|
|
215
|
-
(_b = this.unbindPortalRouterLinks) == null ? void 0 : _b.call(this);
|
|
216
|
-
this.unbindPortalRouterLinks = bindRouterLinks(container, { selector: false });
|
|
212
|
+
this.unbindPortalRouterLinks = bindRouterLinks(e.detail.container, { selector: "[route]" });
|
|
217
213
|
});
|
|
218
214
|
/**
|
|
219
215
|
* Handles the click event on the MenuItem.
|
|
@@ -505,10 +501,7 @@ class MenuItem extends WJElement {
|
|
|
505
501
|
* Adds event listeners after drawing the MenuItem.
|
|
506
502
|
*/
|
|
507
503
|
afterDraw() {
|
|
508
|
-
this.bindRouterLinks();
|
|
509
|
-
if (!this.unbindRouterLinks) {
|
|
510
|
-
queueMicrotask(() => this.bindRouterLinks());
|
|
511
|
-
}
|
|
504
|
+
this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: "[route]" });
|
|
512
505
|
document.addEventListener("wje-router:rebind", this.rebindRouterLinks);
|
|
513
506
|
this.addEventListener("mousemove", this.dispatchMove);
|
|
514
507
|
this.addEventListener("wje-popup:reposition", this.dispatchReposition);
|
|
@@ -538,13 +531,6 @@ class MenuItem extends WJElement {
|
|
|
538
531
|
expanded: hasSubmenu ? expanded : void 0
|
|
539
532
|
});
|
|
540
533
|
}
|
|
541
|
-
bindRouterLinks() {
|
|
542
|
-
var _a;
|
|
543
|
-
const parent = this.parentElement;
|
|
544
|
-
if (!parent) return;
|
|
545
|
-
(_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
|
|
546
|
-
this.unbindRouterLinks = bindRouterLinks(parent, { selector: false });
|
|
547
|
-
}
|
|
548
534
|
/**
|
|
549
535
|
* Creates a tooltip for the MenuItem when it is collapsed.
|
|
550
536
|
* @param {HTMLElement} native The native MenuItem element.
|