wj-elements 0.7.6 → 0.8.0
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/animations.js +28 -51
- package/dist/animations.js.map +1 -1
- package/dist/base-path.js +19 -31
- package/dist/base-path.js.map +1 -1
- package/dist/custom-elements.json +9053 -9048
- package/dist/dark.css +1 -302
- package/dist/date.js +16 -36
- package/dist/date.js.map +1 -1
- package/dist/element-utils.js +20 -81
- package/dist/element-utils.js.map +1 -1
- package/dist/event.js +49 -165
- package/dist/event.js.map +1 -1
- package/dist/form-associated-element-BjeJn7j8.js +101 -0
- package/dist/{form-associated-element-DEQ4y-jn.js.map → form-associated-element-BjeJn7j8.js.map} +1 -1
- package/dist/icon-DmsqtDpL.js +102 -0
- package/dist/{icon-CReYMzAK.js.map → icon-DmsqtDpL.js.map} +1 -1
- package/dist/light.css +1 -731
- package/dist/localize.js +36 -111
- package/dist/localize.js.map +1 -1
- package/dist/packages/wje-accordion-item/accordion-item.element.d.ts +3 -2
- package/dist/packages/wje-img/img.element.d.ts +4 -4
- package/dist/permissions.js +14 -41
- package/dist/permissions.js.map +1 -1
- package/dist/popup.element-CbkhthPP.js +806 -0
- package/dist/{popup.element-CwXvVFK7.js.map → popup.element-CbkhthPP.js.map} +1 -1
- package/dist/router-links-CNsJ-elb.js +105 -0
- package/dist/{router-links-wjqCnncc.js.map → router-links-CNsJ-elb.js.map} +1 -1
- package/dist/skeleton.css +1 -197
- package/dist/styles.css +1 -866
- package/dist/universal-service.js +48 -109
- package/dist/universal-service.js.map +1 -1
- package/dist/utils.js +11 -18
- package/dist/utils.js.map +1 -1
- package/dist/web-types.json +698 -698
- package/dist/wje-accordion-item.js +33 -106
- package/dist/wje-accordion-item.js.map +1 -1
- package/dist/wje-accordion.js +19 -84
- package/dist/wje-accordion.js.map +1 -1
- package/dist/wje-animation.js +37 -4258
- package/dist/wje-animation.js.map +1 -1
- package/dist/wje-aside.js +9 -34
- package/dist/wje-aside.js.map +1 -1
- package/dist/wje-avatar.js +36 -126
- package/dist/wje-avatar.js.map +1 -1
- package/dist/wje-badge.js +10 -52
- package/dist/wje-badge.js.map +1 -1
- package/dist/wje-breadcrumb.js +205 -668
- package/dist/wje-breadcrumb.js.map +1 -1
- package/dist/wje-breadcrumbs.js +177 -633
- package/dist/wje-breadcrumbs.js.map +1 -1
- package/dist/wje-button-group.js +48 -153
- package/dist/wje-button-group.js.map +1 -1
- package/dist/wje-button.js +92 -413
- package/dist/wje-button.js.map +1 -1
- package/dist/wje-card-content.js +7 -30
- package/dist/wje-card-content.js.map +1 -1
- package/dist/wje-card-controls.js +7 -30
- package/dist/wje-card-controls.js.map +1 -1
- package/dist/wje-card-header.js +7 -30
- package/dist/wje-card-header.js.map +1 -1
- package/dist/wje-card-subtitle.js +7 -34
- package/dist/wje-card-subtitle.js.map +1 -1
- package/dist/wje-card-title.js +7 -34
- package/dist/wje-card-title.js.map +1 -1
- package/dist/wje-card.js +15 -71
- package/dist/wje-card.js.map +1 -1
- package/dist/wje-carousel-item.js +12 -56
- package/dist/wje-carousel-item.js.map +1 -1
- package/dist/wje-carousel.js +154 -509
- package/dist/wje-carousel.js.map +1 -1
- package/dist/wje-checkbox.js +50 -227
- package/dist/wje-checkbox.js.map +1 -1
- package/dist/wje-chip.js +43 -160
- package/dist/wje-chip.js.map +1 -1
- package/dist/wje-col.js +7 -20
- package/dist/wje-col.js.map +1 -1
- package/dist/wje-color-picker.js +445 -1464
- package/dist/wje-color-picker.js.map +1 -1
- package/dist/wje-container.js +9 -35
- package/dist/wje-container.js.map +1 -1
- package/dist/wje-copy-button.js +64 -204
- package/dist/wje-copy-button.js.map +1 -1
- package/dist/wje-dialog.js +85 -553
- package/dist/wje-dialog.js.map +1 -1
- package/dist/wje-divider.js +7 -34
- package/dist/wje-divider.js.map +1 -1
- package/dist/wje-dropdown.js +78 -305
- package/dist/wje-dropdown.js.map +1 -1
- package/dist/wje-element.js +191 -700
- package/dist/wje-element.js.map +1 -1
- package/dist/wje-file-upload-item.js +51 -156
- package/dist/wje-file-upload-item.js.map +1 -1
- package/dist/wje-file-upload.js +181 -619
- package/dist/wje-file-upload.js.map +1 -1
- package/dist/wje-footer.js +7 -31
- package/dist/wje-footer.js.map +1 -1
- package/dist/wje-form.js +7 -32
- package/dist/wje-form.js.map +1 -1
- package/dist/wje-format-digital.js +26 -118
- package/dist/wje-format-digital.js.map +1 -1
- package/dist/wje-grid.js +7 -33
- package/dist/wje-grid.js.map +1 -1
- package/dist/wje-header.js +9 -35
- package/dist/wje-header.js.map +1 -1
- package/dist/wje-icon-library.js +12 -18
- package/dist/wje-icon-library.js.map +1 -1
- package/dist/wje-icon-picker.js +65 -320
- package/dist/wje-icon-picker.js.map +1 -1
- package/dist/wje-icon.js +1 -1
- package/dist/wje-img-comparer.js +37 -114
- package/dist/wje-img-comparer.js.map +1 -1
- package/dist/wje-img.js +50 -197
- package/dist/wje-img.js.map +1 -1
- package/dist/wje-infinite-scroll.js +94 -346
- package/dist/wje-infinite-scroll.js.map +1 -1
- package/dist/wje-input-file.js +23 -84
- package/dist/wje-input-file.js.map +1 -1
- package/dist/wje-input.js +78 -392
- package/dist/wje-input.js.map +1 -1
- package/dist/wje-item.js +11 -64
- package/dist/wje-item.js.map +1 -1
- package/dist/wje-kanban.js +124 -401
- package/dist/wje-kanban.js.map +1 -1
- package/dist/wje-label.js +9 -32
- package/dist/wje-label.js.map +1 -1
- package/dist/wje-level-indicator.js +38 -157
- package/dist/wje-level-indicator.js.map +1 -1
- package/dist/wje-list.js +10 -40
- package/dist/wje-list.js.map +1 -1
- package/dist/wje-main.js +7 -31
- package/dist/wje-main.js.map +1 -1
- package/dist/wje-masonry.js +66 -211
- package/dist/wje-masonry.js.map +1 -1
- package/dist/wje-master.js +45 -161
- package/dist/wje-master.js.map +1 -1
- package/dist/wje-menu-button.js +10 -38
- package/dist/wje-menu-button.js.map +1 -1
- package/dist/wje-menu-item.js +127 -577
- package/dist/wje-menu-item.js.map +1 -1
- package/dist/wje-menu-label.js +9 -35
- package/dist/wje-menu-label.js.map +1 -1
- package/dist/wje-menu.js +14 -49
- package/dist/wje-menu.js.map +1 -1
- package/dist/wje-option.js +48 -279
- package/dist/wje-option.js.map +1 -1
- package/dist/wje-options.js +130 -384
- package/dist/wje-options.js.map +1 -1
- package/dist/wje-orgchart-group.js +16 -52
- package/dist/wje-orgchart-group.js.map +1 -1
- package/dist/wje-orgchart-item.js +24 -93
- package/dist/wje-orgchart-item.js.map +1 -1
- package/dist/wje-orgchart.js +18 -68
- package/dist/wje-orgchart.js.map +1 -1
- package/dist/wje-pagination.js +113 -397
- package/dist/wje-pagination.js.map +1 -1
- package/dist/wje-popup.js +3 -3
- package/dist/wje-popup.js.map +1 -1
- package/dist/wje-progress-bar.js +53 -205
- package/dist/wje-progress-bar.js.map +1 -1
- package/dist/wje-qr-code.js +398 -2980
- package/dist/wje-qr-code.js.map +1 -1
- package/dist/wje-radio-group.js +52 -190
- package/dist/wje-radio-group.js.map +1 -1
- package/dist/wje-radio.js +24 -118
- package/dist/wje-radio.js.map +1 -1
- package/dist/wje-rate.js +62 -266
- package/dist/wje-rate.js.map +1 -1
- package/dist/wje-relative-time.js +24 -99
- package/dist/wje-relative-time.js.map +1 -1
- package/dist/wje-reorder-dropzone.js +9 -31
- package/dist/wje-reorder-dropzone.js.map +1 -1
- package/dist/wje-reorder-handle.js +67 -204
- package/dist/wje-reorder-handle.js.map +1 -1
- package/dist/wje-reorder-item.js +14 -44
- package/dist/wje-reorder-item.js.map +1 -1
- package/dist/wje-reorder.js +61 -246
- package/dist/wje-reorder.js.map +1 -1
- package/dist/wje-route.js +6 -24
- package/dist/wje-route.js.map +1 -1
- package/dist/wje-router-link.js +11 -39
- package/dist/wje-router-link.js.map +1 -1
- package/dist/wje-router-outlet.js +76 -172
- package/dist/wje-router-outlet.js.map +1 -1
- package/dist/wje-routerx.js +537 -1331
- package/dist/wje-routerx.js.map +1 -1
- package/dist/wje-row.js +9 -31
- package/dist/wje-row.js.map +1 -1
- package/dist/wje-select.js +326 -1152
- package/dist/wje-select.js.map +1 -1
- package/dist/wje-slider.js +44 -225
- package/dist/wje-slider.js.map +1 -1
- package/dist/wje-sliding-container.js +295 -1319
- package/dist/wje-sliding-container.js.map +1 -1
- package/dist/wje-split-view.js +35 -121
- package/dist/wje-split-view.js.map +1 -1
- package/dist/wje-status.js +14 -45
- package/dist/wje-status.js.map +1 -1
- package/dist/wje-step.js +9 -32
- package/dist/wje-step.js.map +1 -1
- package/dist/wje-stepper.js +109 -357
- package/dist/wje-stepper.js.map +1 -1
- package/dist/wje-store.js +67 -360
- package/dist/wje-store.js.map +1 -1
- package/dist/wje-tab-group.js +85 -314
- package/dist/wje-tab-group.js.map +1 -1
- package/dist/wje-tab-panel.js +7 -28
- package/dist/wje-tab-panel.js.map +1 -1
- package/dist/wje-tab.js +21 -198
- package/dist/wje-tab.js.map +1 -1
- package/dist/wje-textarea.js +64 -264
- package/dist/wje-textarea.js.map +1 -1
- package/dist/wje-thumbnail.js +10 -51
- package/dist/wje-thumbnail.js.map +1 -1
- package/dist/wje-toast.js +127 -632
- package/dist/wje-toast.js.map +1 -1
- package/dist/wje-toggle.js +52 -177
- package/dist/wje-toggle.js.map +1 -1
- package/dist/wje-toolbar-action.js +128 -456
- package/dist/wje-toolbar-action.js.map +1 -1
- package/dist/wje-toolbar.js +75 -270
- package/dist/wje-toolbar.js.map +1 -1
- package/dist/wje-tooltip.js +50 -161
- package/dist/wje-tooltip.js.map +1 -1
- package/dist/wje-tree-item.js +70 -301
- package/dist/wje-tree-item.js.map +1 -1
- package/dist/wje-tree.js +145 -489
- package/dist/wje-tree.js.map +1 -1
- package/dist/wje-visually-hidden.js +7 -34
- package/dist/wje-visually-hidden.js.map +1 -1
- package/package.json +4 -2
- package/dist/form-associated-element-DEQ4y-jn.js +0 -245
- package/dist/icon-CReYMzAK.js +0 -245
- package/dist/popup.element-CwXvVFK7.js +0 -2133
- package/dist/router-links-wjqCnncc.js +0 -156
package/dist/wje-radio-group.js
CHANGED
|
@@ -7,233 +7,95 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
7
7
|
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
10
|
-
var
|
|
11
|
-
import { F as
|
|
12
|
-
import { event } from "./event.js";
|
|
13
|
-
import
|
|
14
|
-
|
|
15
|
-
class RadioGroup extends FormAssociatedElement {
|
|
16
|
-
/**
|
|
17
|
-
* Creates an instance of RadioGroup.
|
|
18
|
-
* @class
|
|
19
|
-
*/
|
|
10
|
+
var _e;
|
|
11
|
+
import { F as e } from "./form-associated-element-BjeJn7j8.js";
|
|
12
|
+
import { event as t } from "./event.js";
|
|
13
|
+
import i from "./wje-radio.js";
|
|
14
|
+
class a extends e {
|
|
20
15
|
constructor() {
|
|
21
16
|
super();
|
|
22
|
-
__privateAdd(this,
|
|
17
|
+
__privateAdd(this, _e, "");
|
|
23
18
|
__publicField(this, "className", "RadioGroup");
|
|
24
|
-
this.invalid = false;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
* @param {string} value The value to set.
|
|
30
|
-
*/
|
|
31
|
-
set value(value) {
|
|
32
|
-
__privateSet(this, _internalValue, value);
|
|
33
|
-
this.pristine = false;
|
|
34
|
-
this.internals.setFormValue(value);
|
|
35
|
-
this.setAttribute("value", value);
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Getter for the value attribute.
|
|
39
|
-
* @returns {string} The value of the attribute.
|
|
40
|
-
*/
|
|
19
|
+
this.invalid = false, this.pristine = true;
|
|
20
|
+
}
|
|
21
|
+
set value(e2) {
|
|
22
|
+
__privateSet(this, _e, e2), this.pristine = false, this.internals.setFormValue(e2), this.setAttribute("value", e2);
|
|
23
|
+
}
|
|
41
24
|
get value() {
|
|
42
25
|
return this.getAttribute("value");
|
|
43
26
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
* @param {string} value The name to set.
|
|
47
|
-
*/
|
|
48
|
-
set required(value) {
|
|
49
|
-
if (value === null || value === void 0) {
|
|
50
|
-
this.removeAttribute("required");
|
|
51
|
-
} else {
|
|
52
|
-
this.setAttribute("required", "");
|
|
53
|
-
}
|
|
27
|
+
set required(e2) {
|
|
28
|
+
null == e2 ? this.removeAttribute("required") : this.setAttribute("required", "");
|
|
54
29
|
}
|
|
55
|
-
/**
|
|
56
|
-
* Getter for the name attribute.
|
|
57
|
-
* @returns {boolean}
|
|
58
|
-
*/
|
|
59
30
|
get required() {
|
|
60
31
|
return this.hasAttribute("required");
|
|
61
32
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
* @param {string} value The label to set.
|
|
65
|
-
*/
|
|
66
|
-
set label(value) {
|
|
67
|
-
if (value === null || value === void 0) {
|
|
68
|
-
this.removeAttribute("label");
|
|
69
|
-
} else {
|
|
70
|
-
this.setAttribute("label", value);
|
|
71
|
-
}
|
|
33
|
+
set label(e2) {
|
|
34
|
+
null == e2 ? this.removeAttribute("label") : this.setAttribute("label", e2);
|
|
72
35
|
}
|
|
73
|
-
/**
|
|
74
|
-
* Getter for the label attribute.
|
|
75
|
-
* @returns {string|null}
|
|
76
|
-
*/
|
|
77
36
|
get label() {
|
|
78
37
|
return this.getAttribute("label");
|
|
79
38
|
}
|
|
80
|
-
/**
|
|
81
|
-
* Returns the CSS styles for the component.
|
|
82
|
-
* @static
|
|
83
|
-
* @returns {CSSStyleSheet}
|
|
84
|
-
*/
|
|
85
39
|
static get cssStyleSheet() {
|
|
86
|
-
return
|
|
40
|
+
return ":host{position:relative}:host .input-hidden{position:absolute;top:0;left:0;width:0;height:0;padding:0;margin:0;opacity:0;z-index:-1}:host([invalid]){color:var(--wje-input-color-invalid)}slot[name=error]{display:none}:host([invalid]) slot[name=error]{display:block}slot[name=error]{display:none;max-width:100%;min-width:auto;border-radius:50px;top:0;width:max-content;line-height:normal;position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wje-input-color-invalid);font-size:12px}.wje-inline{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}";
|
|
87
41
|
}
|
|
88
42
|
static get observedAttributes() {
|
|
89
43
|
return ["required", "value", "disabled", "invalid", "label"];
|
|
90
44
|
}
|
|
91
|
-
attributeChangedCallback(
|
|
92
|
-
var
|
|
93
|
-
(
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
if (name === "value" && this.pristine) {
|
|
97
|
-
const radio = this.getRadioByValue(this.value);
|
|
98
|
-
if (radio) this.checkRadio(radio);
|
|
45
|
+
attributeChangedCallback(e2, t2, i2) {
|
|
46
|
+
var _a2;
|
|
47
|
+
if ((_a2 = super.attributeChangedCallback) == null ? void 0 : _a2.call(this, e2, t2, i2), t2 !== i2 && (["required", "disabled", "invalid", "label"].includes(e2) && this.syncAria(), "value" === e2 && this.pristine)) {
|
|
48
|
+
const e3 = this.getRadioByValue(this.value);
|
|
49
|
+
e3 && this.checkRadio(e3);
|
|
99
50
|
}
|
|
100
51
|
}
|
|
101
|
-
/**
|
|
102
|
-
* Sets up the attributes for the component.
|
|
103
|
-
*/
|
|
104
52
|
setupAttributes() {
|
|
105
|
-
this.isShadowRoot = "open";
|
|
106
|
-
if (this.pristine) {
|
|
107
|
-
this.pristine = false;
|
|
108
|
-
}
|
|
109
|
-
this.syncAria();
|
|
53
|
+
this.isShadowRoot = "open", this.pristine && (this.pristine = false), this.syncAria();
|
|
110
54
|
}
|
|
111
|
-
/**
|
|
112
|
-
* Draws the component for the radio group.
|
|
113
|
-
* @returns {DocumentFragment}
|
|
114
|
-
*/
|
|
115
55
|
draw() {
|
|
116
|
-
let
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
let label = document.createElement("label");
|
|
128
|
-
label.innerText = this.label;
|
|
129
|
-
if (this.value && !this.hasAttribute("error")) label.classList.add("fade");
|
|
130
|
-
if (this.label) {
|
|
131
|
-
native.append(label);
|
|
132
|
-
}
|
|
133
|
-
let errorSlot = document.createElement("slot");
|
|
134
|
-
errorSlot.setAttribute("name", "error");
|
|
135
|
-
let error = document.createElement("div");
|
|
136
|
-
error.setAttribute("slot", "error");
|
|
137
|
-
native.append(input);
|
|
138
|
-
native.append(slot);
|
|
139
|
-
native.append(errorSlot);
|
|
140
|
-
this.append(error);
|
|
141
|
-
fragment.append(native);
|
|
142
|
-
this.input = input;
|
|
143
|
-
return fragment;
|
|
144
|
-
}
|
|
145
|
-
/**
|
|
146
|
-
* Adds event listeners after the component is drawn. Handles the selection of radio buttons.
|
|
147
|
-
*/
|
|
56
|
+
let e2 = document.createDocumentFragment(), t2 = document.createElement("div");
|
|
57
|
+
t2.classList.add("native-radio-group", this.hasAttribute("inline") ? "wje-inline" : "ddd");
|
|
58
|
+
let i2 = document.createElement("input");
|
|
59
|
+
i2.type = "text", i2.name = this.name, i2.disabled = this.disabled, i2.required = this.required, i2.value = this.value || "", i2.classList.add("input-hidden");
|
|
60
|
+
let a2 = document.createElement("slot"), s = document.createElement("label");
|
|
61
|
+
s.innerText = this.label, this.value && !this.hasAttribute("error") && s.classList.add("fade"), this.label && t2.append(s);
|
|
62
|
+
let r = document.createElement("slot");
|
|
63
|
+
r.setAttribute("name", "error");
|
|
64
|
+
let n = document.createElement("div");
|
|
65
|
+
return n.setAttribute("slot", "error"), t2.append(i2), t2.append(a2), t2.append(r), this.append(n), e2.append(t2), this.input = i2, e2;
|
|
66
|
+
}
|
|
148
67
|
afterDraw() {
|
|
149
|
-
|
|
150
|
-
this.checkRadio(this.
|
|
151
|
-
this.
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
this.addEventListener("wje-radio:change", (e) => {
|
|
156
|
-
this.checkRadio(e.target);
|
|
157
|
-
this.validate();
|
|
158
|
-
this.pristine = false;
|
|
159
|
-
this.propagateValidation();
|
|
160
|
-
if (this.invalid) {
|
|
161
|
-
this.invalid = false;
|
|
162
|
-
this.internals.setValidity({}, "");
|
|
163
|
-
}
|
|
164
|
-
this.syncAria();
|
|
165
|
-
});
|
|
166
|
-
this.input.addEventListener("input", (e) => {
|
|
167
|
-
this.validate();
|
|
168
|
-
this.pristine = false;
|
|
169
|
-
this.propagateValidation();
|
|
170
|
-
event.dispatchCustomEvent(this, "wje-radio-group:change");
|
|
171
|
-
});
|
|
172
|
-
this.addEventListener("invalid", (e) => {
|
|
173
|
-
this.invalid = true;
|
|
174
|
-
this.pristine = false;
|
|
175
|
-
this.showInvalidMessage();
|
|
68
|
+
this.value && this.checkRadio(this.getRadioByValue(this.value)), this.validate(), this.invalid && this.showInvalidMessage(), this.addEventListener("wje-radio:change", (e2) => {
|
|
69
|
+
this.checkRadio(e2.target), this.validate(), this.pristine = false, this.propagateValidation(), this.invalid && (this.invalid = false, this.internals.setValidity({}, "")), this.syncAria();
|
|
70
|
+
}), this.input.addEventListener("input", (e2) => {
|
|
71
|
+
this.validate(), this.pristine = false, this.propagateValidation(), t.dispatchCustomEvent(this, "wje-radio-group:change");
|
|
72
|
+
}), this.addEventListener("invalid", (e2) => {
|
|
73
|
+
this.invalid = true, this.pristine = false, this.showInvalidMessage();
|
|
176
74
|
});
|
|
177
75
|
}
|
|
178
|
-
/**
|
|
179
|
-
* Syncs ARIA attributes on the host element.
|
|
180
|
-
*/
|
|
181
76
|
syncAria() {
|
|
182
|
-
var
|
|
183
|
-
const
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
required: this.required,
|
|
189
|
-
invalid,
|
|
190
|
-
disabled: this.disabled,
|
|
191
|
-
...label ? { label } : {}
|
|
192
|
-
});
|
|
77
|
+
var _a2;
|
|
78
|
+
const e2 = (_a2 = this.label) == null ? void 0 : _a2.trim(), t2 = this.required && !this.value, i2 = this.invalid || t2;
|
|
79
|
+
this.setAriaState({ role: "radiogroup", required: this.required, invalid: i2, disabled: this.disabled, ...e2 ? { label: e2 } : {} });
|
|
80
|
+
}
|
|
81
|
+
getRadioByValue(e2) {
|
|
82
|
+
return this.getAllElements().find((t2) => t2 instanceof i && t2.value === e2);
|
|
193
83
|
}
|
|
194
|
-
/**
|
|
195
|
-
* Returns the radio button with the given value.
|
|
196
|
-
* @param {string} value The value of the radio button.
|
|
197
|
-
* @returns {Radio} The radio button.
|
|
198
|
-
*/
|
|
199
|
-
getRadioByValue(value) {
|
|
200
|
-
return this.getAllElements().find((el) => el instanceof Radio && el.value === value);
|
|
201
|
-
}
|
|
202
|
-
/**
|
|
203
|
-
* Removes the check from all radio buttons.
|
|
204
|
-
*/
|
|
205
84
|
removeCheck() {
|
|
206
|
-
this.getAllElements().forEach((
|
|
207
|
-
|
|
85
|
+
this.getAllElements().forEach((e2) => {
|
|
86
|
+
e2 instanceof i && (e2.checked = false);
|
|
208
87
|
});
|
|
209
88
|
}
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
*/
|
|
213
|
-
checkRadio(radio) {
|
|
214
|
-
this.removeCheck();
|
|
215
|
-
if (radio) {
|
|
216
|
-
radio.checked = true;
|
|
217
|
-
this.value = radio.value;
|
|
218
|
-
this.input.value = radio.value;
|
|
219
|
-
this.input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
|
|
220
|
-
this.syncAria();
|
|
221
|
-
return true;
|
|
222
|
-
}
|
|
223
|
-
console.error(`Radio with value ${radio.value} not found`);
|
|
224
|
-
return false;
|
|
89
|
+
checkRadio(e2) {
|
|
90
|
+
return this.removeCheck(), e2 ? (e2.checked = true, this.value = e2.value, this.input.value = e2.value, this.input.dispatchEvent(new Event("input", { bubbles: true, composed: true })), this.syncAria(), true) : (console.error(`Radio with value ${e2.value} not found`), false);
|
|
225
91
|
}
|
|
226
|
-
/**
|
|
227
|
-
* Retrieves all direct child elements of the current element.
|
|
228
|
-
* @returns {HTMLElement[]} An array of child elements.
|
|
229
|
-
*/
|
|
230
92
|
getAllElements() {
|
|
231
93
|
return Array.from(this.children);
|
|
232
94
|
}
|
|
233
95
|
}
|
|
234
|
-
|
|
235
|
-
|
|
96
|
+
_e = new WeakMap();
|
|
97
|
+
a.define("wje-radio-group", a);
|
|
236
98
|
export {
|
|
237
|
-
|
|
99
|
+
a as default
|
|
238
100
|
};
|
|
239
101
|
//# sourceMappingURL=wje-radio-group.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-radio-group.js","sources":["../packages/wje-radio-group/radio-group.element.js","../packages/wje-radio-group/radio-group.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport Radio from '../wje-radio/radio.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RadioGroup` is a custom web component that represents a group of radio buttons.\n * @summary This element represents a group of radio buttons.\n * @documentation https://elements.webjet.sk/components/radio-group\n * @status stable\n * @augments {FormAssociatedElement}\n * @slot - The default slot for the radio group.\n * @tag wje-radio-group\n */\n\nexport default class RadioGroup extends FormAssociatedElement {\n #internalValue = '';\n\n /**\n * Creates an instance of RadioGroup.\n * @class\n */\n constructor() {\n super();\n\n this.invalid = false;\n this.pristine = true;\n }\n\n /**\n * Setter for the value attribute.\n * @param {string} value The value to set.\n */\n set value(value) {\n this.#internalValue = value;\n this.pristine = false;\n this.internals.setFormValue(value);\n this.setAttribute('value', value);\n }\n\n /**\n * Getter for the value attribute.\n * @returns {string} The value of the attribute.\n */\n get value() {\n return this.getAttribute('value');\n }\n /**\n * Setter for the name attribute.\n * @param {string} value The name to set.\n */\n set required(value) {\n if (value === null || value === undefined) {\n this.removeAttribute('required');\n } else {\n this.setAttribute('required', '');\n }\n }\n\n /**\n * Getter for the name attribute.\n * @returns {boolean}\n */\n get required() {\n return this.hasAttribute('required');\n }\n\n /**\n * Setter for the label attribute.\n * @param {string} value The label to set.\n */\n set label(value) {\n if (value === null || value === undefined) {\n this.removeAttribute('label');\n } else {\n this.setAttribute('label', value);\n }\n }\n\n /**\n * Getter for the label attribute.\n * @returns {string|null}\n */\n get label() {\n return this.getAttribute('label');\n }\n\n className = 'RadioGroup';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n static get observedAttributes() {\n return ['required', 'value', 'disabled', 'invalid', 'label'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (oldValue === newValue) return;\n if (['required', 'disabled', 'invalid', 'label'].includes(name)) this.syncAria();\n if (name === 'value' && this.pristine) {\n const radio = this.getRadioByValue(this.value);\n if (radio) this.checkRadio(radio);\n }\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n if (this.pristine) {\n this.pristine = false;\n }\n this.syncAria();\n }\n\n /**\n * Draws the component for the radio group.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-radio-group', this.hasAttribute('inline') ? 'wje-inline' : 'ddd');\n\n let input = document.createElement('input');\n input.type = 'text';\n input.name = this.name;\n input.disabled = this.disabled;\n input.required = this.required;\n input.value = this.value || '';\n input.classList.add('input-hidden');\n\n let slot = document.createElement('slot');\n\n let label = document.createElement('label');\n label.innerText = this.label;\n if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n if (this.label) {\n native.append(label);\n }\n\n // Error\n let errorSlot = document.createElement('slot');\n errorSlot.setAttribute('name', 'error');\n\n let error = document.createElement('div');\n error.setAttribute('slot', 'error');\n\n native.append(input);\n native.append(slot);\n native.append(errorSlot);\n\n this.append(error);\n\n fragment.append(native);\n\n this.input = input;\n\n return fragment;\n }\n\n /**\n * Adds event listeners after the component is drawn. Handles the selection of radio buttons.\n */\n afterDraw() {\n if(this.value)\n this.checkRadio(this.getRadioByValue(this.value));\n\n // this.addEventListener('wje-radio:input', (e) => {\n // this.value = e.detail.context.value;\n // });\n\n this.validate();\n\n if (this.invalid) {\n this.showInvalidMessage();\n }\n\n this.addEventListener('wje-radio:change', (e) => {\n this.checkRadio(e.target);\n\n this.validate();\n\n this.pristine = false;\n this.propagateValidation();\n\n if (this.invalid) {\n this.invalid = false;\n // this.errorMessage.textContent = '';\n this.internals.setValidity({}, '');\n }\n this.syncAria();\n });\n\n this.input.addEventListener('input', (e) => {\n this.validate();\n\n this.pristine = false;\n this.propagateValidation();\n\n event.dispatchCustomEvent(this, 'wje-radio-group:change');\n });\n\n this.addEventListener('invalid', (e) => {\n this.invalid = true;\n this.pristine = false;\n\n this.showInvalidMessage();\n });\n\n }\n\n /**\n * Syncs ARIA attributes on the host element.\n */\n syncAria() {\n const label = this.label?.trim();\n const requiredInvalid = this.required && !this.value;\n const invalid = this.invalid || requiredInvalid;\n\n this.setAriaState({\n role: 'radiogroup',\n required: this.required,\n invalid,\n disabled: this.disabled,\n ...(label ? { label } : {}),\n });\n }\n\n /**\n * Returns the radio button with the given value.\n * @param {string} value The value of the radio button.\n * @returns {Radio} The radio button.\n */\n getRadioByValue(value) {\n return this.getAllElements().find((el) => el instanceof Radio && el.value === value);\n }\n\n /**\n * Removes the check from all radio buttons.\n */\n removeCheck() {\n this.getAllElements().forEach((el) => {\n if (el instanceof Radio) el.checked = false;\n });\n }\n\n /**\n * Sets the given radio button to checked.\n */\n checkRadio(radio) {\n this.removeCheck();\n\n if (radio) {\n // debugger\n radio.checked = true;\n this.value = radio.value;\n this.input.value = radio.value;\n this.input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.syncAria();\n return true;\n }\n\n console.error(`Radio with value ${radio.value} not found`);\n return false;\n }\n\n /**\n * Retrieves all direct child elements of the current element.\n * @returns {HTMLElement[]} An array of child elements.\n */\n getAllElements() {\n return Array.from(this.children);\n }\n}\n","import RadioGroup from './radio-group.element.js';\n\nexport default RadioGroup;\n\nRadioGroup.define('wje-radio-group', RadioGroup);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"wje-radio-group.js","sources":["../packages/wje-radio-group/radio-group.element.js","../packages/wje-radio-group/radio-group.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport Radio from '../wje-radio/radio.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RadioGroup` is a custom web component that represents a group of radio buttons.\n * @summary This element represents a group of radio buttons.\n * @documentation https://elements.webjet.sk/components/radio-group\n * @status stable\n * @augments {FormAssociatedElement}\n * @slot - The default slot for the radio group.\n * @tag wje-radio-group\n */\n\nexport default class RadioGroup extends FormAssociatedElement {\n #internalValue = '';\n\n /**\n * Creates an instance of RadioGroup.\n * @class\n */\n constructor() {\n super();\n\n this.invalid = false;\n this.pristine = true;\n }\n\n /**\n * Setter for the value attribute.\n * @param {string} value The value to set.\n */\n set value(value) {\n this.#internalValue = value;\n this.pristine = false;\n this.internals.setFormValue(value);\n this.setAttribute('value', value);\n }\n\n /**\n * Getter for the value attribute.\n * @returns {string} The value of the attribute.\n */\n get value() {\n return this.getAttribute('value');\n }\n /**\n * Setter for the name attribute.\n * @param {string} value The name to set.\n */\n set required(value) {\n if (value === null || value === undefined) {\n this.removeAttribute('required');\n } else {\n this.setAttribute('required', '');\n }\n }\n\n /**\n * Getter for the name attribute.\n * @returns {boolean}\n */\n get required() {\n return this.hasAttribute('required');\n }\n\n /**\n * Setter for the label attribute.\n * @param {string} value The label to set.\n */\n set label(value) {\n if (value === null || value === undefined) {\n this.removeAttribute('label');\n } else {\n this.setAttribute('label', value);\n }\n }\n\n /**\n * Getter for the label attribute.\n * @returns {string|null}\n */\n get label() {\n return this.getAttribute('label');\n }\n\n className = 'RadioGroup';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n static get observedAttributes() {\n return ['required', 'value', 'disabled', 'invalid', 'label'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (oldValue === newValue) return;\n if (['required', 'disabled', 'invalid', 'label'].includes(name)) this.syncAria();\n if (name === 'value' && this.pristine) {\n const radio = this.getRadioByValue(this.value);\n if (radio) this.checkRadio(radio);\n }\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n if (this.pristine) {\n this.pristine = false;\n }\n this.syncAria();\n }\n\n /**\n * Draws the component for the radio group.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-radio-group', this.hasAttribute('inline') ? 'wje-inline' : 'ddd');\n\n let input = document.createElement('input');\n input.type = 'text';\n input.name = this.name;\n input.disabled = this.disabled;\n input.required = this.required;\n input.value = this.value || '';\n input.classList.add('input-hidden');\n\n let slot = document.createElement('slot');\n\n let label = document.createElement('label');\n label.innerText = this.label;\n if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n if (this.label) {\n native.append(label);\n }\n\n // Error\n let errorSlot = document.createElement('slot');\n errorSlot.setAttribute('name', 'error');\n\n let error = document.createElement('div');\n error.setAttribute('slot', 'error');\n\n native.append(input);\n native.append(slot);\n native.append(errorSlot);\n\n this.append(error);\n\n fragment.append(native);\n\n this.input = input;\n\n return fragment;\n }\n\n /**\n * Adds event listeners after the component is drawn. Handles the selection of radio buttons.\n */\n afterDraw() {\n if(this.value)\n this.checkRadio(this.getRadioByValue(this.value));\n\n // this.addEventListener('wje-radio:input', (e) => {\n // this.value = e.detail.context.value;\n // });\n\n this.validate();\n\n if (this.invalid) {\n this.showInvalidMessage();\n }\n\n this.addEventListener('wje-radio:change', (e) => {\n this.checkRadio(e.target);\n\n this.validate();\n\n this.pristine = false;\n this.propagateValidation();\n\n if (this.invalid) {\n this.invalid = false;\n // this.errorMessage.textContent = '';\n this.internals.setValidity({}, '');\n }\n this.syncAria();\n });\n\n this.input.addEventListener('input', (e) => {\n this.validate();\n\n this.pristine = false;\n this.propagateValidation();\n\n event.dispatchCustomEvent(this, 'wje-radio-group:change');\n });\n\n this.addEventListener('invalid', (e) => {\n this.invalid = true;\n this.pristine = false;\n\n this.showInvalidMessage();\n });\n\n }\n\n /**\n * Syncs ARIA attributes on the host element.\n */\n syncAria() {\n const label = this.label?.trim();\n const requiredInvalid = this.required && !this.value;\n const invalid = this.invalid || requiredInvalid;\n\n this.setAriaState({\n role: 'radiogroup',\n required: this.required,\n invalid,\n disabled: this.disabled,\n ...(label ? { label } : {}),\n });\n }\n\n /**\n * Returns the radio button with the given value.\n * @param {string} value The value of the radio button.\n * @returns {Radio} The radio button.\n */\n getRadioByValue(value) {\n return this.getAllElements().find((el) => el instanceof Radio && el.value === value);\n }\n\n /**\n * Removes the check from all radio buttons.\n */\n removeCheck() {\n this.getAllElements().forEach((el) => {\n if (el instanceof Radio) el.checked = false;\n });\n }\n\n /**\n * Sets the given radio button to checked.\n */\n checkRadio(radio) {\n this.removeCheck();\n\n if (radio) {\n // debugger\n radio.checked = true;\n this.value = radio.value;\n this.input.value = radio.value;\n this.input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.syncAria();\n return true;\n }\n\n console.error(`Radio with value ${radio.value} not found`);\n return false;\n }\n\n /**\n * Retrieves all direct child elements of the current element.\n * @returns {HTMLElement[]} An array of child elements.\n */\n getAllElements() {\n return Array.from(this.children);\n }\n}\n","import RadioGroup from './radio-group.element.js';\n\nexport default RadioGroup;\n\nRadioGroup.define('wje-radio-group', RadioGroup);\n"],"names":["RadioGroup","FormAssociatedElement","constructor","super","internalValue","className","this","invalid","pristine","value","internals","setFormValue","setAttribute","getAttribute","removeAttribute","required","hasAttribute","label","cssStyleSheet","observedAttributes","name","oldValue","newValue","attributeChangedCallback","includes","syncAria","radio","getRadioByValue","checkRadio","setupAttributes","isShadowRoot","fragment","document","createDocumentFragment","native","createElement","classList","add","input","type","disabled","slot","innerText","append","errorSlot","error","validate","showInvalidMessage","addEventListener","e","target","propagateValidation","setValidity","event","dispatchCustomEvent","trim","requiredInvalid","setAriaState","role","getAllElements","find","el","Radio","removeCheck","forEach","checked","dispatchEvent","Event","bubbles","composed","console","Array","from","children","define"],"mappings":"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"}
|
package/dist/wje-radio.js
CHANGED
|
@@ -1,159 +1,65 @@
|
|
|
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
|
|
5
|
-
import { event } from "./event.js";
|
|
6
|
-
|
|
7
|
-
class Radio extends WJElement {
|
|
8
|
-
/**
|
|
9
|
-
* Creates an instance of Radio.
|
|
10
|
-
*/
|
|
4
|
+
import e from "./wje-element.js";
|
|
5
|
+
import { event as t } from "./event.js";
|
|
6
|
+
class i extends e {
|
|
11
7
|
constructor() {
|
|
12
8
|
super();
|
|
13
|
-
/**
|
|
14
|
-
* Sets the color of the radio button.
|
|
15
|
-
* @type {string}
|
|
16
|
-
*/
|
|
17
9
|
__publicField(this, "className", "Radio");
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
* @param {object} e
|
|
21
|
-
*/
|
|
22
|
-
__publicField(this, "inputEvent", (e) => {
|
|
23
|
-
e.preventDefault();
|
|
24
|
-
e.stopPropagation();
|
|
25
|
-
this.checked = e.target.checked;
|
|
10
|
+
__publicField(this, "inputEvent", (e2) => {
|
|
11
|
+
e2.preventDefault(), e2.stopPropagation(), this.checked = e2.target.checked;
|
|
26
12
|
});
|
|
27
13
|
}
|
|
28
|
-
set value(
|
|
29
|
-
this.setAttribute("value",
|
|
14
|
+
set value(e2) {
|
|
15
|
+
this.setAttribute("value", e2);
|
|
30
16
|
}
|
|
31
17
|
get value() {
|
|
32
18
|
return this.getAttribute("value");
|
|
33
19
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
* @param value
|
|
37
|
-
*/
|
|
38
|
-
set checked(value) {
|
|
39
|
-
if (value) {
|
|
40
|
-
this.setAttribute("checked", "");
|
|
41
|
-
} else {
|
|
42
|
-
this.removeAttribute("checked");
|
|
43
|
-
}
|
|
20
|
+
set checked(e2) {
|
|
21
|
+
e2 ? this.setAttribute("checked", "") : this.removeAttribute("checked");
|
|
44
22
|
}
|
|
45
|
-
/**
|
|
46
|
-
* Gets the checked property of the radio button.
|
|
47
|
-
* @returns {boolean}
|
|
48
|
-
*/
|
|
49
23
|
get checked() {
|
|
50
24
|
return this.hasAttribute("checked");
|
|
51
25
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
* @param {boolean} value true if the toggle is checked, false otherwise
|
|
55
|
-
*/
|
|
56
|
-
set disabled(value) {
|
|
57
|
-
if (value) {
|
|
58
|
-
this.setAttribute("disabled", "");
|
|
59
|
-
} else {
|
|
60
|
-
this.removeAttribute("disabled");
|
|
61
|
-
}
|
|
26
|
+
set disabled(e2) {
|
|
27
|
+
e2 ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
62
28
|
}
|
|
63
|
-
/**
|
|
64
|
-
* Get disabled attribute value.
|
|
65
|
-
* @returns {boolean} true if the toggle is disabled, false otherwise
|
|
66
|
-
*/
|
|
67
29
|
get disabled() {
|
|
68
30
|
return this.hasAttribute("disabled");
|
|
69
31
|
}
|
|
70
|
-
/**
|
|
71
|
-
* Returns the CSS styles for the component.
|
|
72
|
-
* @returns {CSSStyleSheet}
|
|
73
|
-
*/
|
|
74
32
|
static get cssStyleSheet() {
|
|
75
|
-
return
|
|
33
|
+
return ':host{display:block;margin-top:var(--wje-radio-margin-top);margin-bottom:var(--wje-radio-margin-bottom);margin-inline:var(--wje-radio-margin-inline);line-height:100%;padding-left:0;position:relative}:host label{display:flex;cursor:pointer;position:relative;padding-left:1.5rem;min-width:16px;min-height:16px;margin-bottom:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center}:host label:before{content:"";position:absolute;width:16px;height:16px;left:0;box-sizing:border-box;background-color:var(--wje-color-contrast-1);border:1px solid var(--wje-color-contrast-4)}.native-radio input[type=radio]+label:before{border-radius:var(--wje-border-radius-circle);transition:border .3s 0s cubic-bezier(.455,.03,.215,1.33)}.native-radio input[type=radio]:checked+label:before{border-color:var(--wje-color-contrast-6);border-width:5px}.native-radio input[type=radio]:focus+label{color:var(--wje-color)}.native-radio input[type=radio]:focus+label:before{outline:none!important;box-shadow:0 0 #78c8fe}.native-radio input[type=radio]{opacity:0;position:absolute;top:3px;width:16px;height:16px}.native-radio input[type=radio][disabled]+label{cursor:not-allowed!important;color:var(--wje-color-contrast-9);opacity:.5}.native-radio input[type=radio][disabled]+label:before{cursor:not-allowed!important}:host([placement="end"]) label{padding-left:0;padding-right:26px}:host([placement="end"]) label:before{right:0;left:auto}:host([placement="end"]) input[type=checkbox]:checked+label{position:relative}:host([placement="end"]) input[type=checkbox]:checked+label:after{position:absolute;right:0;left:auto}:host([color="primary"]) input[type=radio]:checked+label:before{border-color:var(--wje-color-primary-9)}:host([color="complete"]) input[type=radio]:checked+label:before{border-color:var(--wje-color-complete-9)}:host([color="success"]) input[type=radio]:checked+label:before{border-color:var(--wje-color-success-9)}:host([color="warning"]) input[type=radio]:checked+label:before{border-color:var(--wje-color-warning-9)}:host([color="danger"]) input[type=radio]:checked+label:before{border-color:var(--wje-color-danger-9)}:host([color="info"]) input[type=radio]:checked+label:before{border-color:var(--wje-color-info-9)}';
|
|
76
34
|
}
|
|
77
|
-
/**
|
|
78
|
-
* Returns the list of attributes to observe for changes.
|
|
79
|
-
* @static
|
|
80
|
-
* @returns {Array<string>}
|
|
81
|
-
*/
|
|
82
35
|
static get observedAttributes() {
|
|
83
36
|
return ["checked", "disabled", "value"];
|
|
84
37
|
}
|
|
85
|
-
attributeChangedCallback(
|
|
38
|
+
attributeChangedCallback(e2, t2, i2) {
|
|
86
39
|
var _a;
|
|
87
|
-
(_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name,
|
|
88
|
-
if (oldValue === newValue) return;
|
|
89
|
-
if (this.input) {
|
|
90
|
-
if (name === "checked") this.input.checked = this.checked;
|
|
91
|
-
if (name === "disabled") this.input.disabled = this.disabled;
|
|
92
|
-
if (name === "value") {
|
|
93
|
-
this.input.id = this.value + "-radio";
|
|
94
|
-
this.input.name = this.value + "-radio";
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
if (["checked", "disabled"].includes(name)) this.syncAria();
|
|
40
|
+
(_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, e2, t2, i2), t2 !== i2 && (this.input && ("checked" === e2 && (this.input.checked = this.checked), "disabled" === e2 && (this.input.disabled = this.disabled), "value" === e2 && (this.input.id = this.value + "-radio", this.input.name = this.value + "-radio")), ["checked", "disabled"].includes(e2) && this.syncAria());
|
|
98
41
|
}
|
|
99
|
-
/**
|
|
100
|
-
* Sets up the attributes for the component.
|
|
101
|
-
*/
|
|
102
42
|
setupAttributes() {
|
|
103
|
-
this.isShadowRoot = "open";
|
|
104
|
-
this.syncAria();
|
|
43
|
+
this.isShadowRoot = "open", this.syncAria();
|
|
105
44
|
}
|
|
106
|
-
/**
|
|
107
|
-
* Draws the radio button.
|
|
108
|
-
* @returns {DocumentFragment}
|
|
109
|
-
*/
|
|
110
45
|
draw() {
|
|
111
|
-
let
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
this.input = document.createElement("input");
|
|
116
|
-
this.input.type = "radio";
|
|
117
|
-
this.input.id = this.value + "-radio";
|
|
118
|
-
this.input.name = this.value + "-radio";
|
|
119
|
-
this.input.checked = this.checked;
|
|
120
|
-
this.input.disabled = this.disabled;
|
|
121
|
-
let label = document.createElement("label");
|
|
122
|
-
label.htmlFor = this.value + "-radio";
|
|
123
|
-
label.innerHTML = "<slot></slot>";
|
|
124
|
-
native.appendChild(this.input);
|
|
125
|
-
native.appendChild(label);
|
|
126
|
-
fragment.appendChild(native);
|
|
127
|
-
return fragment;
|
|
46
|
+
let e2 = document.createDocumentFragment(), t2 = document.createElement("div");
|
|
47
|
+
t2.classList.add("native-radio"), this.color && t2.classList.add(this.color), this.input = document.createElement("input"), this.input.type = "radio", this.input.id = this.value + "-radio", this.input.name = this.value + "-radio", this.input.checked = this.checked, this.input.disabled = this.disabled;
|
|
48
|
+
let i2 = document.createElement("label");
|
|
49
|
+
return i2.htmlFor = this.value + "-radio", i2.innerHTML = "<slot></slot>", t2.appendChild(this.input), t2.appendChild(i2), e2.appendChild(t2), e2;
|
|
128
50
|
}
|
|
129
|
-
/**
|
|
130
|
-
* Sets up the event listeners for the component.
|
|
131
|
-
*/
|
|
132
51
|
afterDraw() {
|
|
133
|
-
|
|
134
|
-
event.addListener(this.input, "input", "wje-radio:change");
|
|
135
|
-
}
|
|
136
|
-
this.syncAria();
|
|
52
|
+
this.hasAttribute("disabled") || t.addListener(this.input, "input", "wje-radio:change"), this.syncAria();
|
|
137
53
|
}
|
|
138
|
-
/**
|
|
139
|
-
* Syncs ARIA attributes on the host element.
|
|
140
|
-
*/
|
|
141
54
|
syncAria() {
|
|
142
|
-
this.setAriaState({
|
|
143
|
-
role: "radio",
|
|
144
|
-
checked: this.checked,
|
|
145
|
-
disabled: this.disabled
|
|
146
|
-
});
|
|
55
|
+
this.setAriaState({ role: "radio", checked: this.checked, disabled: this.disabled });
|
|
147
56
|
}
|
|
148
|
-
/**
|
|
149
|
-
* Toggles the radio button.
|
|
150
|
-
*/
|
|
151
57
|
beforeDisconnect() {
|
|
152
|
-
|
|
58
|
+
t.removeElement(this);
|
|
153
59
|
}
|
|
154
60
|
}
|
|
155
|
-
|
|
61
|
+
i.define("wje-radio", i);
|
|
156
62
|
export {
|
|
157
|
-
|
|
63
|
+
i as default
|
|
158
64
|
};
|
|
159
65
|
//# sourceMappingURL=wje-radio.js.map
|
package/dist/wje-radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wje-radio.js","sources":["../packages/wje-radio/radio.element.js","../packages/wje-radio/radio.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Radio button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/radio\n * @status stable\n * @augments WJElement\n * @slot - Default slot for the radio button label content.\n * @csspart native-radio - The native wrapper for the radio button.\n * @cssproperty [--wje-radio-margin-inline=0] - Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`) to control spacing on both sides of the component.\n * @cssproperty [--wje-radio-margin-top=0] - Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component.\n * @cssproperty [--wje-radio-margin-bottom=0] - Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component.\n * // @fires wje-radio:change - Dispatched when the radio button's state changes.\n * // @fires wje-radio:input - Dispatched when the radio button is interacted with.\n */\n\nexport default class Radio extends WJElement {\n /**\n * Creates an instance of Radio.\n */\n constructor() {\n super();\n\n }\n\n set value(value) {\n this.setAttribute('value', value);\n }\n\n get value() {\n return this.getAttribute('value');\n }\n\n /**\n * Sets the name of the radio button.\n * @param value\n */\n set checked(value) {\n if (value) {\n this.setAttribute('checked', '');\n } else {\n this.removeAttribute('checked');\n }\n }\n\n /**\n * Gets the checked property of the radio button.\n * @returns {boolean}\n */\n get checked() {\n return this.hasAttribute('checked');\n }\n\n /**\n * Set checked attribute.\n * @param {boolean} value true if the toggle is checked, false otherwise\n */\n set disabled(value) {\n if (value) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /**\n * Get disabled attribute value.\n * @returns {boolean} true if the toggle is disabled, false otherwise\n */\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /**\n * Sets the color of the radio button.\n * @type {string}\n */\n className = 'Radio';\n\n /**\n * Returns the CSS styles for the component.\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return ['checked', 'disabled', 'value'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (oldValue === newValue) return;\n if (this.input) {\n if (name === 'checked') this.input.checked = this.checked;\n if (name === 'disabled') this.input.disabled = this.disabled;\n if (name === 'value') {\n this.input.id = this.value + '-radio';\n this.input.name = this.value + '-radio';\n }\n }\n if (['checked', 'disabled'].includes(name)) this.syncAria();\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /**\n * Draws the radio button.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-radio');\n\n if (this.color) native.classList.add(this.color);\n\n this.input = document.createElement('input');\n this.input.type = 'radio';\n this.input.id = this.value + '-radio';\n this.input.name = this.value + '-radio';\n this.input.checked = this.checked;\n this.input.disabled = this.disabled;\n\n let label = document.createElement('label');\n label.htmlFor = this.value + '-radio';\n label.innerHTML = '<slot></slot>';\n\n native.appendChild(this.input);\n native.appendChild(label);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /**\n * Sets up the event listeners for the component.\n */\n afterDraw() {\n if (!this.hasAttribute('disabled')) {\n event.addListener(this.input, 'input', 'wje-radio:change');\n // event.addListener(this, 'click', 'wje-radio:input');\n }\n this.syncAria();\n }\n\n /**\n * Syncs ARIA attributes on the host element.\n */\n syncAria() {\n this.setAriaState({\n role: 'radio',\n checked: this.checked,\n disabled: this.disabled,\n });\n }\n\n /**\n * Called when an attribute changes.\n * @param {object} e\n */\n inputEvent = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.checked = e.target.checked;\n };\n\n /**\n * Toggles the radio button.\n */\n beforeDisconnect() {\n event.removeElement(this);\n }\n}\n","import Radio from './radio.element.js';\n\nexport default Radio;\n\nRadio.define('wje-radio', Radio);\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"wje-radio.js","sources":["../packages/wje-radio/radio.element.js","../packages/wje-radio/radio.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Radio button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/radio\n * @status stable\n * @augments WJElement\n * @slot - Default slot for the radio button label content.\n * @csspart native-radio - The native wrapper for the radio button.\n * @cssproperty [--wje-radio-margin-inline=0] - Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`) to control spacing on both sides of the component.\n * @cssproperty [--wje-radio-margin-top=0] - Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component.\n * @cssproperty [--wje-radio-margin-bottom=0] - Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component.\n * // @fires wje-radio:change - Dispatched when the radio button's state changes.\n * // @fires wje-radio:input - Dispatched when the radio button is interacted with.\n */\n\nexport default class Radio extends WJElement {\n /**\n * Creates an instance of Radio.\n */\n constructor() {\n super();\n\n }\n\n set value(value) {\n this.setAttribute('value', value);\n }\n\n get value() {\n return this.getAttribute('value');\n }\n\n /**\n * Sets the name of the radio button.\n * @param value\n */\n set checked(value) {\n if (value) {\n this.setAttribute('checked', '');\n } else {\n this.removeAttribute('checked');\n }\n }\n\n /**\n * Gets the checked property of the radio button.\n * @returns {boolean}\n */\n get checked() {\n return this.hasAttribute('checked');\n }\n\n /**\n * Set checked attribute.\n * @param {boolean} value true if the toggle is checked, false otherwise\n */\n set disabled(value) {\n if (value) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n /**\n * Get disabled attribute value.\n * @returns {boolean} true if the toggle is disabled, false otherwise\n */\n get disabled() {\n return this.hasAttribute('disabled');\n }\n\n /**\n * Sets the color of the radio button.\n * @type {string}\n */\n className = 'Radio';\n\n /**\n * Returns the CSS styles for the component.\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n */\n static get observedAttributes() {\n return ['checked', 'disabled', 'value'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n super.attributeChangedCallback?.(name, oldValue, newValue);\n if (oldValue === newValue) return;\n if (this.input) {\n if (name === 'checked') this.input.checked = this.checked;\n if (name === 'disabled') this.input.disabled = this.disabled;\n if (name === 'value') {\n this.input.id = this.value + '-radio';\n this.input.name = this.value + '-radio';\n }\n }\n if (['checked', 'disabled'].includes(name)) this.syncAria();\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /**\n * Draws the radio button.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.classList.add('native-radio');\n\n if (this.color) native.classList.add(this.color);\n\n this.input = document.createElement('input');\n this.input.type = 'radio';\n this.input.id = this.value + '-radio';\n this.input.name = this.value + '-radio';\n this.input.checked = this.checked;\n this.input.disabled = this.disabled;\n\n let label = document.createElement('label');\n label.htmlFor = this.value + '-radio';\n label.innerHTML = '<slot></slot>';\n\n native.appendChild(this.input);\n native.appendChild(label);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /**\n * Sets up the event listeners for the component.\n */\n afterDraw() {\n if (!this.hasAttribute('disabled')) {\n event.addListener(this.input, 'input', 'wje-radio:change');\n // event.addListener(this, 'click', 'wje-radio:input');\n }\n this.syncAria();\n }\n\n /**\n * Syncs ARIA attributes on the host element.\n */\n syncAria() {\n this.setAriaState({\n role: 'radio',\n checked: this.checked,\n disabled: this.disabled,\n });\n }\n\n /**\n * Called when an attribute changes.\n * @param {object} e\n */\n inputEvent = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.checked = e.target.checked;\n };\n\n /**\n * Toggles the radio button.\n */\n beforeDisconnect() {\n event.removeElement(this);\n }\n}\n","import Radio from './radio.element.js';\n\nexport default Radio;\n\nRadio.define('wje-radio', Radio);\n"],"names":["Radio","WJElement","constructor","super","className","inputEvent","e","preventDefault","stopPropagation","this","checked","target","value","setAttribute","getAttribute","removeAttribute","hasAttribute","disabled","cssStyleSheet","observedAttributes","name","oldValue","newValue","attributeChangedCallback","input","id","includes","syncAria","setupAttributes","isShadowRoot","draw","fragment","document","createDocumentFragment","native","createElement","classList","add","color","type","label","htmlFor","innerHTML","appendChild","afterDraw","event","addListener","setAriaState","role","beforeDisconnect","removeElement","define"],"mappings":"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"}
|