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.
Files changed (234) hide show
  1. package/dist/animations.js +28 -51
  2. package/dist/animations.js.map +1 -1
  3. package/dist/base-path.js +19 -31
  4. package/dist/base-path.js.map +1 -1
  5. package/dist/custom-elements.json +9053 -9048
  6. package/dist/dark.css +1 -302
  7. package/dist/date.js +16 -36
  8. package/dist/date.js.map +1 -1
  9. package/dist/element-utils.js +20 -81
  10. package/dist/element-utils.js.map +1 -1
  11. package/dist/event.js +49 -165
  12. package/dist/event.js.map +1 -1
  13. package/dist/form-associated-element-BjeJn7j8.js +101 -0
  14. package/dist/{form-associated-element-DEQ4y-jn.js.map → form-associated-element-BjeJn7j8.js.map} +1 -1
  15. package/dist/icon-DmsqtDpL.js +102 -0
  16. package/dist/{icon-CReYMzAK.js.map → icon-DmsqtDpL.js.map} +1 -1
  17. package/dist/light.css +1 -731
  18. package/dist/localize.js +36 -111
  19. package/dist/localize.js.map +1 -1
  20. package/dist/packages/wje-accordion-item/accordion-item.element.d.ts +3 -2
  21. package/dist/packages/wje-img/img.element.d.ts +4 -4
  22. package/dist/permissions.js +14 -41
  23. package/dist/permissions.js.map +1 -1
  24. package/dist/popup.element-CbkhthPP.js +806 -0
  25. package/dist/{popup.element-CwXvVFK7.js.map → popup.element-CbkhthPP.js.map} +1 -1
  26. package/dist/router-links-CNsJ-elb.js +105 -0
  27. package/dist/{router-links-wjqCnncc.js.map → router-links-CNsJ-elb.js.map} +1 -1
  28. package/dist/skeleton.css +1 -197
  29. package/dist/styles.css +1 -866
  30. package/dist/universal-service.js +48 -109
  31. package/dist/universal-service.js.map +1 -1
  32. package/dist/utils.js +11 -18
  33. package/dist/utils.js.map +1 -1
  34. package/dist/web-types.json +698 -698
  35. package/dist/wje-accordion-item.js +33 -106
  36. package/dist/wje-accordion-item.js.map +1 -1
  37. package/dist/wje-accordion.js +19 -84
  38. package/dist/wje-accordion.js.map +1 -1
  39. package/dist/wje-animation.js +37 -4258
  40. package/dist/wje-animation.js.map +1 -1
  41. package/dist/wje-aside.js +9 -34
  42. package/dist/wje-aside.js.map +1 -1
  43. package/dist/wje-avatar.js +36 -126
  44. package/dist/wje-avatar.js.map +1 -1
  45. package/dist/wje-badge.js +10 -52
  46. package/dist/wje-badge.js.map +1 -1
  47. package/dist/wje-breadcrumb.js +205 -668
  48. package/dist/wje-breadcrumb.js.map +1 -1
  49. package/dist/wje-breadcrumbs.js +177 -633
  50. package/dist/wje-breadcrumbs.js.map +1 -1
  51. package/dist/wje-button-group.js +48 -153
  52. package/dist/wje-button-group.js.map +1 -1
  53. package/dist/wje-button.js +92 -413
  54. package/dist/wje-button.js.map +1 -1
  55. package/dist/wje-card-content.js +7 -30
  56. package/dist/wje-card-content.js.map +1 -1
  57. package/dist/wje-card-controls.js +7 -30
  58. package/dist/wje-card-controls.js.map +1 -1
  59. package/dist/wje-card-header.js +7 -30
  60. package/dist/wje-card-header.js.map +1 -1
  61. package/dist/wje-card-subtitle.js +7 -34
  62. package/dist/wje-card-subtitle.js.map +1 -1
  63. package/dist/wje-card-title.js +7 -34
  64. package/dist/wje-card-title.js.map +1 -1
  65. package/dist/wje-card.js +15 -71
  66. package/dist/wje-card.js.map +1 -1
  67. package/dist/wje-carousel-item.js +12 -56
  68. package/dist/wje-carousel-item.js.map +1 -1
  69. package/dist/wje-carousel.js +154 -509
  70. package/dist/wje-carousel.js.map +1 -1
  71. package/dist/wje-checkbox.js +50 -227
  72. package/dist/wje-checkbox.js.map +1 -1
  73. package/dist/wje-chip.js +43 -160
  74. package/dist/wje-chip.js.map +1 -1
  75. package/dist/wje-col.js +7 -20
  76. package/dist/wje-col.js.map +1 -1
  77. package/dist/wje-color-picker.js +445 -1464
  78. package/dist/wje-color-picker.js.map +1 -1
  79. package/dist/wje-container.js +9 -35
  80. package/dist/wje-container.js.map +1 -1
  81. package/dist/wje-copy-button.js +64 -204
  82. package/dist/wje-copy-button.js.map +1 -1
  83. package/dist/wje-dialog.js +85 -553
  84. package/dist/wje-dialog.js.map +1 -1
  85. package/dist/wje-divider.js +7 -34
  86. package/dist/wje-divider.js.map +1 -1
  87. package/dist/wje-dropdown.js +78 -305
  88. package/dist/wje-dropdown.js.map +1 -1
  89. package/dist/wje-element.js +191 -700
  90. package/dist/wje-element.js.map +1 -1
  91. package/dist/wje-file-upload-item.js +51 -156
  92. package/dist/wje-file-upload-item.js.map +1 -1
  93. package/dist/wje-file-upload.js +181 -619
  94. package/dist/wje-file-upload.js.map +1 -1
  95. package/dist/wje-footer.js +7 -31
  96. package/dist/wje-footer.js.map +1 -1
  97. package/dist/wje-form.js +7 -32
  98. package/dist/wje-form.js.map +1 -1
  99. package/dist/wje-format-digital.js +26 -118
  100. package/dist/wje-format-digital.js.map +1 -1
  101. package/dist/wje-grid.js +7 -33
  102. package/dist/wje-grid.js.map +1 -1
  103. package/dist/wje-header.js +9 -35
  104. package/dist/wje-header.js.map +1 -1
  105. package/dist/wje-icon-library.js +12 -18
  106. package/dist/wje-icon-library.js.map +1 -1
  107. package/dist/wje-icon-picker.js +65 -320
  108. package/dist/wje-icon-picker.js.map +1 -1
  109. package/dist/wje-icon.js +1 -1
  110. package/dist/wje-img-comparer.js +37 -114
  111. package/dist/wje-img-comparer.js.map +1 -1
  112. package/dist/wje-img.js +50 -197
  113. package/dist/wje-img.js.map +1 -1
  114. package/dist/wje-infinite-scroll.js +94 -346
  115. package/dist/wje-infinite-scroll.js.map +1 -1
  116. package/dist/wje-input-file.js +23 -84
  117. package/dist/wje-input-file.js.map +1 -1
  118. package/dist/wje-input.js +78 -392
  119. package/dist/wje-input.js.map +1 -1
  120. package/dist/wje-item.js +11 -64
  121. package/dist/wje-item.js.map +1 -1
  122. package/dist/wje-kanban.js +124 -401
  123. package/dist/wje-kanban.js.map +1 -1
  124. package/dist/wje-label.js +9 -32
  125. package/dist/wje-label.js.map +1 -1
  126. package/dist/wje-level-indicator.js +38 -157
  127. package/dist/wje-level-indicator.js.map +1 -1
  128. package/dist/wje-list.js +10 -40
  129. package/dist/wje-list.js.map +1 -1
  130. package/dist/wje-main.js +7 -31
  131. package/dist/wje-main.js.map +1 -1
  132. package/dist/wje-masonry.js +66 -211
  133. package/dist/wje-masonry.js.map +1 -1
  134. package/dist/wje-master.js +45 -161
  135. package/dist/wje-master.js.map +1 -1
  136. package/dist/wje-menu-button.js +10 -38
  137. package/dist/wje-menu-button.js.map +1 -1
  138. package/dist/wje-menu-item.js +127 -577
  139. package/dist/wje-menu-item.js.map +1 -1
  140. package/dist/wje-menu-label.js +9 -35
  141. package/dist/wje-menu-label.js.map +1 -1
  142. package/dist/wje-menu.js +14 -49
  143. package/dist/wje-menu.js.map +1 -1
  144. package/dist/wje-option.js +48 -279
  145. package/dist/wje-option.js.map +1 -1
  146. package/dist/wje-options.js +130 -384
  147. package/dist/wje-options.js.map +1 -1
  148. package/dist/wje-orgchart-group.js +16 -52
  149. package/dist/wje-orgchart-group.js.map +1 -1
  150. package/dist/wje-orgchart-item.js +24 -93
  151. package/dist/wje-orgchart-item.js.map +1 -1
  152. package/dist/wje-orgchart.js +18 -68
  153. package/dist/wje-orgchart.js.map +1 -1
  154. package/dist/wje-pagination.js +113 -397
  155. package/dist/wje-pagination.js.map +1 -1
  156. package/dist/wje-popup.js +3 -3
  157. package/dist/wje-popup.js.map +1 -1
  158. package/dist/wje-progress-bar.js +53 -205
  159. package/dist/wje-progress-bar.js.map +1 -1
  160. package/dist/wje-qr-code.js +398 -2980
  161. package/dist/wje-qr-code.js.map +1 -1
  162. package/dist/wje-radio-group.js +52 -190
  163. package/dist/wje-radio-group.js.map +1 -1
  164. package/dist/wje-radio.js +24 -118
  165. package/dist/wje-radio.js.map +1 -1
  166. package/dist/wje-rate.js +62 -266
  167. package/dist/wje-rate.js.map +1 -1
  168. package/dist/wje-relative-time.js +24 -99
  169. package/dist/wje-relative-time.js.map +1 -1
  170. package/dist/wje-reorder-dropzone.js +9 -31
  171. package/dist/wje-reorder-dropzone.js.map +1 -1
  172. package/dist/wje-reorder-handle.js +67 -204
  173. package/dist/wje-reorder-handle.js.map +1 -1
  174. package/dist/wje-reorder-item.js +14 -44
  175. package/dist/wje-reorder-item.js.map +1 -1
  176. package/dist/wje-reorder.js +61 -246
  177. package/dist/wje-reorder.js.map +1 -1
  178. package/dist/wje-route.js +6 -24
  179. package/dist/wje-route.js.map +1 -1
  180. package/dist/wje-router-link.js +11 -39
  181. package/dist/wje-router-link.js.map +1 -1
  182. package/dist/wje-router-outlet.js +76 -172
  183. package/dist/wje-router-outlet.js.map +1 -1
  184. package/dist/wje-routerx.js +537 -1331
  185. package/dist/wje-routerx.js.map +1 -1
  186. package/dist/wje-row.js +9 -31
  187. package/dist/wje-row.js.map +1 -1
  188. package/dist/wje-select.js +326 -1152
  189. package/dist/wje-select.js.map +1 -1
  190. package/dist/wje-slider.js +44 -225
  191. package/dist/wje-slider.js.map +1 -1
  192. package/dist/wje-sliding-container.js +295 -1319
  193. package/dist/wje-sliding-container.js.map +1 -1
  194. package/dist/wje-split-view.js +35 -121
  195. package/dist/wje-split-view.js.map +1 -1
  196. package/dist/wje-status.js +14 -45
  197. package/dist/wje-status.js.map +1 -1
  198. package/dist/wje-step.js +9 -32
  199. package/dist/wje-step.js.map +1 -1
  200. package/dist/wje-stepper.js +109 -357
  201. package/dist/wje-stepper.js.map +1 -1
  202. package/dist/wje-store.js +67 -360
  203. package/dist/wje-store.js.map +1 -1
  204. package/dist/wje-tab-group.js +85 -314
  205. package/dist/wje-tab-group.js.map +1 -1
  206. package/dist/wje-tab-panel.js +7 -28
  207. package/dist/wje-tab-panel.js.map +1 -1
  208. package/dist/wje-tab.js +21 -198
  209. package/dist/wje-tab.js.map +1 -1
  210. package/dist/wje-textarea.js +64 -264
  211. package/dist/wje-textarea.js.map +1 -1
  212. package/dist/wje-thumbnail.js +10 -51
  213. package/dist/wje-thumbnail.js.map +1 -1
  214. package/dist/wje-toast.js +127 -632
  215. package/dist/wje-toast.js.map +1 -1
  216. package/dist/wje-toggle.js +52 -177
  217. package/dist/wje-toggle.js.map +1 -1
  218. package/dist/wje-toolbar-action.js +128 -456
  219. package/dist/wje-toolbar-action.js.map +1 -1
  220. package/dist/wje-toolbar.js +75 -270
  221. package/dist/wje-toolbar.js.map +1 -1
  222. package/dist/wje-tooltip.js +50 -161
  223. package/dist/wje-tooltip.js.map +1 -1
  224. package/dist/wje-tree-item.js +70 -301
  225. package/dist/wje-tree-item.js.map +1 -1
  226. package/dist/wje-tree.js +145 -489
  227. package/dist/wje-tree.js.map +1 -1
  228. package/dist/wje-visually-hidden.js +7 -34
  229. package/dist/wje-visually-hidden.js.map +1 -1
  230. package/package.json +4 -2
  231. package/dist/form-associated-element-DEQ4y-jn.js +0 -245
  232. package/dist/icon-CReYMzAK.js +0 -245
  233. package/dist/popup.element-CwXvVFK7.js +0 -2133
  234. package/dist/router-links-wjqCnncc.js +0 -156
@@ -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 _internalValue;
11
- import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
12
- import { event } from "./event.js";
13
- import Radio from "./wje-radio.js";
14
- const styles = "/*\n[ WJ Radio Group ]\n*/\n:host {\n position: relative;\n .input-hidden {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 0;\n padding: 0;\n margin: 0;\n opacity: 0;\n z-index: -1;\n }\n}\n\n:host([invalid]) {\n color: var(--wje-input-color-invalid);\n}\n\nslot[name='error'] {\n display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n display: block;\n}\n\nslot[name='error'] {\n display: none;\n max-width: 100%;\n min-width: auto;\n border-radius: 50px;\n top: 0;\n width: max-content;\n line-height: normal;\n position: static;\n background: transparent;\n padding: 0.25rem 0;\n left: auto;\n transform: none;\n color: var(--wje-input-color-invalid);\n font-size: 12px;\n}\n\n.wje-inline {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n";
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, _internalValue, "");
17
+ __privateAdd(this, _e, "");
23
18
  __publicField(this, "className", "RadioGroup");
24
- this.invalid = false;
25
- this.pristine = true;
26
- }
27
- /**
28
- * Setter for the value attribute.
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
- * Setter for the name attribute.
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
- * Setter for the label attribute.
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 styles;
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(name, oldValue, newValue) {
92
- var _a;
93
- (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
94
- if (oldValue === newValue) return;
95
- if (["required", "disabled", "invalid", "label"].includes(name)) this.syncAria();
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 fragment = document.createDocumentFragment();
117
- let native = document.createElement("div");
118
- native.classList.add("native-radio-group", this.hasAttribute("inline") ? "wje-inline" : "ddd");
119
- let input = document.createElement("input");
120
- input.type = "text";
121
- input.name = this.name;
122
- input.disabled = this.disabled;
123
- input.required = this.required;
124
- input.value = this.value || "";
125
- input.classList.add("input-hidden");
126
- let slot = document.createElement("slot");
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
- if (this.value)
150
- this.checkRadio(this.getRadioByValue(this.value));
151
- this.validate();
152
- if (this.invalid) {
153
- this.showInvalidMessage();
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 _a;
183
- const label = (_a = this.label) == null ? void 0 : _a.trim();
184
- const requiredInvalid = this.required && !this.value;
185
- const invalid = this.invalid || requiredInvalid;
186
- this.setAriaState({
187
- role: "radiogroup",
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((el) => {
207
- if (el instanceof Radio) el.checked = false;
85
+ this.getAllElements().forEach((e2) => {
86
+ e2 instanceof i && (e2.checked = false);
208
87
  });
209
88
  }
210
- /**
211
- * Sets the given radio button to checked.
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
- _internalValue = new WeakMap();
235
- RadioGroup.define("wje-radio-group", RadioGroup);
96
+ _e = new WeakMap();
97
+ a.define("wje-radio-group", a);
236
98
  export {
237
- RadioGroup as default
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 WJElement from "./wje-element.js";
5
- import { event } from "./event.js";
6
- const styles = "/*\n[ WJ Radio ]\n*/\n\n:host {\n display: block;\n margin-top: var(--wje-radio-margin-top);\n margin-bottom: var(--wje-radio-margin-bottom);\n margin-inline: var(--wje-radio-margin-inline);\n line-height: 100%;\n padding-left: 0;\n position: relative;\n\n label {\n display: flex;\n cursor: pointer;\n position: relative;\n padding-left: 1.5rem;\n min-width: 16px;\n min-height: 16px;\n margin-bottom: 0;\n -webkit-touch-callout: none; /* iOS Safari */\n -webkit-user-select: none; /* Safari */\n -moz-user-select: none; /* Old versions of Firefox */\n -ms-user-select: none; /* Internet Explorer/Edge */\n user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */\n align-items: center;\n &:before {\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n left: 0;\n box-sizing: border-box;\n background-color: var(--wje-color-contrast-1);\n border: 1px solid var(--wje-color-contrast-4);\n }\n }\n}\n\n.native-radio {\n input[type='radio'] + label {\n &:before {\n border-radius: var(--wje-border-radius-circle);\n transition: border 0.3s 0s cubic-bezier(0.455, 0.03, 0.215, 1.33);\n }\n }\n input[type='radio']:checked {\n & + label {\n &:before {\n border-color: var(--wje-color-contrast-6);\n border-width: 5px;\n }\n }\n }\n input[type='radio']:focus {\n & + label {\n color: var(--wje-color);\n &:before {\n outline: none !important;\n box-shadow: 0 0 0 0 #78c8fe;\n }\n }\n }\n\n input[type='radio'] {\n opacity: 0;\n position: absolute;\n top: 3px;\n width: 16px;\n height: 16px;\n }\n\n input[type='radio'][disabled] {\n & + label {\n cursor: not-allowed !important;\n color: var(--wje-color-contrast-9);\n opacity: 0.5;\n &:before {\n cursor: not-allowed !important;\n }\n }\n }\n}\n\n:host([placement='end']) {\n label {\n padding-left: 0;\n padding-right: 26px;\n\n &:before {\n right: 0;\n left: auto;\n }\n }\n\n input[type='checkbox']:checked {\n & + label {\n position: relative;\n\n &::after {\n position: absolute;\n right: 0;\n left: auto;\n }\n }\n }\n}\n\n/* Colors */\n\n:host([color='primary']) input[type='radio']:checked + label:before {\n border-color: var(--wje-color-primary-9);\n}\n\n:host([color='complete']) input[type='radio']:checked + label:before {\n border-color: var(--wje-color-complete-9);\n}\n\n:host([color='success']) input[type='radio']:checked + label:before {\n border-color: var(--wje-color-success-9);\n}\n\n:host([color='warning']) input[type='radio']:checked + label:before {\n border-color: var(--wje-color-warning-9);\n}\n\n:host([color='danger']) input[type='radio']:checked + label:before {\n border-color: var(--wje-color-danger-9);\n}\n\n:host([color='info']) input[type='radio']:checked + label:before {\n border-color: var(--wje-color-info-9);\n}\n";
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
- * Called when an attribute changes.
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(value) {
29
- this.setAttribute("value", 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
- * Sets the name of the radio button.
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
- * Set checked attribute.
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 styles;
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(name, oldValue, newValue) {
38
+ attributeChangedCallback(e2, t2, i2) {
86
39
  var _a;
87
- (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
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 fragment = document.createDocumentFragment();
112
- let native = document.createElement("div");
113
- native.classList.add("native-radio");
114
- if (this.color) native.classList.add(this.color);
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
- if (!this.hasAttribute("disabled")) {
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
- event.removeElement(this);
58
+ t.removeElement(this);
153
59
  }
154
60
  }
155
- Radio.define("wje-radio", Radio);
61
+ i.define("wje-radio", i);
156
62
  export {
157
- Radio as default
63
+ i as default
158
64
  };
159
65
  //# sourceMappingURL=wje-radio.js.map
@@ -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":";;;;;;AAiBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAIzC,cAAc;AACV,UAAK;AAwDT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAkGZ;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;AAChB,QAAE,eAAc;AAChB,QAAE,gBAAe;AACjB,WAAK,UAAU,EAAE,OAAO;AAAA,IAC5B;AAAA,EA5JA;AAAA,EAEA,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACpC;AAAA,EAEA,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ,OAAO;AACf,QAAI,OAAO;AACP,WAAK,aAAa,WAAW,EAAE;AAAA,IACnC,OAAO;AACH,WAAK,gBAAgB,SAAS;AAAA,IAClC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS,OAAO;AAChB,QAAI,OAAO;AACP,WAAK,aAAa,YAAY,EAAE;AAAA,IACpC,OAAO;AACH,WAAK,gBAAgB,UAAU;AAAA,IACnC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAC,WAAW,YAAY,OAAO;AAAA,EAC1C;AAAA,EAEA,yBAAyB,MAAM,UAAU,UAAU;;AAC/C,gBAAM,6BAAN,8BAAiC,MAAM,UAAU;AACjD,QAAI,aAAa,SAAU;AAC3B,QAAI,KAAK,OAAO;AACZ,UAAI,SAAS,UAAW,MAAK,MAAM,UAAU,KAAK;AAClD,UAAI,SAAS,WAAY,MAAK,MAAM,WAAW,KAAK;AACpD,UAAI,SAAS,SAAS;AAClB,aAAK,MAAM,KAAK,KAAK,QAAQ;AAC7B,aAAK,MAAM,OAAO,KAAK,QAAQ;AAAA,MACnC;AAAA,IACJ;AACA,QAAI,CAAC,WAAW,UAAU,EAAE,SAAS,IAAI,EAAG,MAAK,SAAQ;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,cAAc;AAEnC,QAAI,KAAK,MAAO,QAAO,UAAU,IAAI,KAAK,KAAK;AAE/C,SAAK,QAAQ,SAAS,cAAc,OAAO;AAC3C,SAAK,MAAM,OAAO;AAClB,SAAK,MAAM,KAAK,KAAK,QAAQ;AAC7B,SAAK,MAAM,OAAO,KAAK,QAAQ;AAC/B,SAAK,MAAM,UAAU,KAAK;AAC1B,SAAK,MAAM,WAAW,KAAK;AAE3B,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,UAAU,KAAK,QAAQ;AAC7B,UAAM,YAAY;AAElB,WAAO,YAAY,KAAK,KAAK;AAC7B,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAChC,YAAM,YAAY,KAAK,OAAO,SAAS,kBAAkB;AAAA,IAE7D;AACA,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACP,SAAK,aAAa;AAAA,MACd,MAAM;AAAA,MACN,SAAS,KAAK;AAAA,MACd,UAAU,KAAK;AAAA,IAC3B,CAAS;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAeA,mBAAmB;AACf,UAAM,cAAc,IAAI;AAAA,EAC5B;AACJ;ACxLA,MAAM,OAAO,aAAa,KAAK;"}
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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"}