@cas-smartdesign/radio-button-group 4.0.3 → 4.1.1

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 (9) hide show
  1. package/dist/docs/5_segmented_button.js +1 -1
  2. package/dist/docs/doc.css +1 -1
  3. package/dist/docs/doc.mjs +62 -62
  4. package/dist/radio-button-group-with-externals.js +10 -28
  5. package/dist/radio-button-group-with-externals.js.map +4 -4
  6. package/dist/radio-button-group.mjs +81 -84
  7. package/dist/radio-button-group.mjs.map +1 -1
  8. package/npm-third-party-licenses.json +84 -79
  9. package/package.json +7 -7
package/dist/radio-button-group.mjs CHANGED
@@ -1,20 +1,20 @@
1
- import { LitElement as b, css as g, unsafeCSS as v, html as f } from "lit";
2
- import { property as n } from "lit/decorators/property.js";
3
- import { ifDefined as x } from "lit/directives/if-defined.js";
4
- import { ValidationLevel as k } from "@cas-smartdesign/field-validation-message";
1
+ import { LitElement as b, unsafeCSS as v, css as g, html as f } from "lit";
2
+ import { property as r } from "lit/decorators/property.js";
3
+ import { ifDefined as k } from "lit/directives/if-defined.js";
4
+ import { ValidationLevel as x } from "@cas-smartdesign/field-validation-message";
5
5
  const y = ":host{display:block}:host,.label,.checkbox{outline:none}:host([disabled]){pointer-events:none}:host([disabled]) .root{opacity:.6;cursor:default;filter:grayscale(100%)}:host(:not([disabled])[focused]) .highlight{display:block!important}:host([checked]) circle.inner{display:block!important}:host([checked]) circle.outer{stroke:var(--sd-radio-button-checked-color, #1467ba)!important}:host([oneline]) .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.root{display:inline-flex;align-items:center;vertical-align:middle;width:100%;padding-top:6px;padding-bottom:6px}.root .radio-button-container{position:relative;display:inline-block;width:28px;height:28px;box-sizing:border-box;cursor:pointer;margin-right:5px;flex-shrink:0}.root .radio-button-container input{position:absolute;top:0;left:0;opacity:0}.root .radio-button-container circle.highlight{stroke:var(--sd-radio-button-highlight-color, rgba(20, 103, 186, .3))}.root .radio-button-container circle.inner{fill:var(--sd-radio-button-checked-color, #1467ba)}.root .radio-button-container circle.outer{stroke:var(--sd-radio-button-unchecked-color, #767676)}.root .label{font-family:Segoe UI,Lucida Sans,Arial,sans-serif;text-overflow:ellipsis;overflow-x:hidden;-webkit-user-select:none;user-select:none;cursor:pointer;padding-top:2px;padding-bottom:2px}";
6
- var I = Object.defineProperty, m = Object.getOwnPropertyDescriptor, p = (o, t, e, s) => {
7
- for (var i = s > 1 ? void 0 : s ? m(t, e) : t, c = o.length - 1, d; c >= 0; c--)
8
- (d = o[c]) && (i = (s ? d(t, e, i) : d(i)) || i);
9
- return s && i && I(t, e, i), i;
6
+ var I = Object.defineProperty, p = (o, t, e, i) => {
7
+ for (var s = void 0, d = o.length - 1, u; d >= 0; d--)
8
+ (u = o[d]) && (s = u(t, e, s) || s);
9
+ return s && I(t, e, s), s;
10
10
  };
11
- let w = 0;
12
- var l;
13
- const u = (l = class extends b {
11
+ let m = 0;
12
+ var n;
13
+ const h = (n = class extends b {
14
14
  constructor() {
15
15
  super(), this.checked = !1, this.value = "", this.disabled = !1, this.label = "", this.handleClick = (t) => {
16
16
  t.preventDefault();
17
- }, this.a11yID = l.ID + "_" + w++;
17
+ }, this.a11yID = n.ID + "_" + m++;
18
18
  }
19
19
  static get styles() {
20
20
  return [
@@ -51,56 +51,56 @@ const u = (l = class extends b {
51
51
  </div>
52
52
  `;
53
53
  }
54
- }, l.ID = "sd-radio-button", l.ensureDefined = () => {
55
- customElements.get(l.ID) || customElements.define(l.ID, l);
56
- }, l);
54
+ }, n.ID = "sd-radio-button", n.ensureDefined = () => {
55
+ customElements.get(n.ID) || customElements.define(n.ID, n);
56
+ }, n);
57
57
  p([
58
- n({ type: Boolean, reflect: !0, attribute: !0 })
59
- ], u.prototype, "checked", 2);
58
+ r({ type: Boolean, reflect: !0, attribute: !0 })
59
+ ], h.prototype, "checked");
60
60
  p([
61
- n({ type: String, reflect: !0, attribute: !0 })
62
- ], u.prototype, "value", 2);
61
+ r({ type: String, reflect: !0, attribute: !0 })
62
+ ], h.prototype, "value");
63
63
  p([
64
- n({ type: Boolean, reflect: !0, attribute: !0 })
65
- ], u.prototype, "disabled", 2);
64
+ r({ type: Boolean, reflect: !0, attribute: !0 })
65
+ ], h.prototype, "disabled");
66
66
  p([
67
- n({ type: String, reflect: !0, attribute: !0 })
68
- ], u.prototype, "label", 2);
69
- let B = u;
70
- const _ = ":host(:focus){outline:none}.buttons-container{display:flex}.buttons-container.vertical{flex-direction:column}.validation-message{margin-left:5px}";
71
- var C = Object.defineProperty, D = Object.getOwnPropertyDescriptor, h = (o, t, e, s) => {
72
- for (var i = s > 1 ? void 0 : s ? D(t, e) : t, c = o.length - 1, d; c >= 0; c--)
73
- (d = o[c]) && (i = (s ? d(t, e, i) : d(i)) || i);
74
- return s && i && C(t, e, i), i;
75
- }, a;
76
- const r = (a = class extends b {
67
+ r({ type: String, reflect: !0, attribute: !0 })
68
+ ], h.prototype, "label");
69
+ let w = h;
70
+ const B = ":host(:focus){outline:none}.buttons-container{display:flex}.buttons-container.vertical{flex-direction:column}.validation-message{margin-left:5px}";
71
+ var C = Object.defineProperty, c = (o, t, e, i) => {
72
+ for (var s = void 0, d = o.length - 1, u; d >= 0; d--)
73
+ (u = o[d]) && (s = u(t, e, s) || s);
74
+ return s && C(t, e, s), s;
75
+ }, l;
76
+ const a = (l = class extends b {
77
77
  constructor() {
78
78
  super(...arguments), this.layout = "horizontal", this.value = "", this.uncheckAllowed = !1, this.disabled = !1, this._focusIndex = -1, this._checkedButton = null, this.handleSlotChange = () => {
79
79
  this._buttons = this.buttonsSlot.assignedElements(), this._buttons.forEach((t) => {
80
80
  !t.hasAttribute("disabled") && this.disabled && t.setAttribute("disabled", ""), t.setAttribute("tabIndex", "-1"), this.updateCheckedButton(t);
81
81
  });
82
82
  }, this.handleFocusIn = (t) => {
83
- const e = t.target, s = this._buttons.findIndex((i) => i == e);
84
- this.focusIndex = this.focusIndex >= 0 ? this.focusIndex : this.getNextFocusIndex(s !== -1 ? s : 0), this.updateFocused(null, this._buttons[this.focusIndex]);
83
+ const e = t.target, i = this._buttons.findIndex((s) => s == e);
84
+ this.focusIndex = this.focusIndex >= 0 ? this.focusIndex : this.getNextFocusIndex(i !== -1 ? i : 0), this.updateFocused(null, this._buttons[this.focusIndex]);
85
85
  }, this.handleFocusOut = () => {
86
86
  this.updateFocused(this._buttons[this.focusIndex]);
87
87
  }, this.handleButtonClick = (t) => {
88
88
  this.focus();
89
- const e = this._buttons.find((i) => i.contains(t.target)), s = this._buttons.findIndex((i) => i == e);
90
- s >= 0 && (this.focusIndex = s, this.updateChecked());
89
+ const e = this._buttons.find((s) => s.contains(t.target)), i = this._buttons.findIndex((s) => s == e);
90
+ i >= 0 && (this.focusIndex = i, this.updateChecked());
91
91
  }, this.handleKeyDown = (t) => {
92
92
  let e = !0;
93
93
  switch (t.key) {
94
94
  case "Down":
95
95
  case "ArrowDown": {
96
- const s = this.getNextFocusIndex(this.focusIndex + 1);
97
- this.focusIndex = s !== -1 ? s : this.getNextFocusIndex(0), this.uncheckAllowed || this.updateChecked();
96
+ const i = this.getNextFocusIndex(this.focusIndex + 1);
97
+ this.focusIndex = i !== -1 ? i : this.getNextFocusIndex(0), this.uncheckAllowed || this.updateChecked();
98
98
  break;
99
99
  }
100
100
  case "Up":
101
101
  case "ArrowUp": {
102
- const s = this.getPreviousFocusIndex(this.focusIndex - 1);
103
- this.focusIndex = s !== -1 ? s : this.getPreviousFocusIndex(this.childElementCount - 1), this.uncheckAllowed || this.updateChecked();
102
+ const i = this.getPreviousFocusIndex(this.focusIndex - 1);
103
+ this.focusIndex = i !== -1 ? i : this.getPreviousFocusIndex(this.childElementCount - 1), this.uncheckAllowed || this.updateChecked();
104
104
  break;
105
105
  }
106
106
  case "Enter": {
@@ -120,8 +120,8 @@ const r = (a = class extends b {
120
120
  if (t >= -1 && t < this.childElementCount) {
121
121
  const e = this._focusIndex;
122
122
  if (this._focusIndex = t, e !== t) {
123
- const s = this._buttons[e], i = this._buttons[this.focusIndex];
124
- this.updateFocused(s, i);
123
+ const i = this._buttons[e], s = this._buttons[this.focusIndex];
124
+ this.updateFocused(i, s);
125
125
  }
126
126
  }
127
127
  }
@@ -134,7 +134,7 @@ const r = (a = class extends b {
134
134
  static get styles() {
135
135
  return [
136
136
  g`
137
- ${v(_)}
137
+ ${v(B)}
138
138
  `
139
139
  ];
140
140
  }
@@ -142,7 +142,7 @@ const r = (a = class extends b {
142
142
  return f`
143
143
  <div
144
144
  class="buttons-container ${this.layout === "vertical" ? "vertical" : "horizontal"}"
145
- @click="${x(this.disabled ? void 0 : this.handleButtonClick)}"
145
+ @click="${k(this.disabled ? void 0 : this.handleButtonClick)}"
146
146
  >
147
147
  <slot></slot>
148
148
  </div>
@@ -167,15 +167,13 @@ const r = (a = class extends b {
167
167
  }
168
168
  }
169
169
  disableButtons() {
170
- var t;
171
- (t = this._buttons) == null || t.forEach((e) => {
172
- e.setAttribute("disabled", "");
170
+ this._buttons?.forEach((t) => {
171
+ t.setAttribute("disabled", "");
173
172
  });
174
173
  }
175
174
  enableButtons() {
176
- var t;
177
- (t = this._buttons) == null || t.forEach((e) => {
178
- e.removeAttribute("disabled");
175
+ this._buttons?.forEach((t) => {
176
+ t.removeAttribute("disabled");
179
177
  });
180
178
  }
181
179
  fireValueChangeEvent() {
@@ -190,16 +188,16 @@ const r = (a = class extends b {
190
188
  }
191
189
  getNextFocusIndex(t) {
192
190
  for (let e = t; e < this.childElementCount; e++) {
193
- const s = this._buttons[e];
194
- if (this.isFocusable(s))
191
+ const i = this._buttons[e];
192
+ if (this.isFocusable(i))
195
193
  return e;
196
194
  }
197
195
  return -1;
198
196
  }
199
197
  getPreviousFocusIndex(t) {
200
198
  for (let e = t; e >= 0; e--) {
201
- const s = this._buttons[e];
202
- if (this.isFocusable(s))
199
+ const i = this._buttons[e];
200
+ if (this.isFocusable(i))
203
201
  return e;
204
202
  }
205
203
  return -1;
@@ -218,8 +216,7 @@ const r = (a = class extends b {
218
216
  this.value = t, this.fireValueChangeEvent();
219
217
  }
220
218
  updateFocused(t, e) {
221
- var s, i;
222
- (s = t == null ? void 0 : t.removeAttribute) == null || s.call(t, "focused"), (i = e == null ? void 0 : e.setAttribute) == null || i.call(e, "focused", "");
219
+ t?.removeAttribute?.("focused"), e?.setAttribute?.("focused", "");
223
220
  }
224
221
  checkButton(t) {
225
222
  t.setAttribute("checked", "");
@@ -233,32 +230,32 @@ const r = (a = class extends b {
233
230
  get selectedIndex() {
234
231
  return this._buttons.indexOf(this._checkedButton);
235
232
  }
236
- }, a.ID = "sd-radio-button-group", a.ensureDefined = () => {
237
- B.ensureDefined(), customElements.get(a.ID) || customElements.define(a.ID, a);
238
- }, a);
239
- h([
240
- n({ type: String, reflect: !0, attribute: !0 })
241
- ], r.prototype, "layout", 2);
242
- h([
243
- n({ type: String })
244
- ], r.prototype, "value", 2);
245
- h([
246
- n({ type: Boolean, reflect: !0, attribute: "uncheck-allowed" })
247
- ], r.prototype, "uncheckAllowed", 2);
248
- h([
249
- n({ type: Boolean, reflect: !0, attribute: !0 })
250
- ], r.prototype, "disabled", 2);
251
- h([
252
- n({ type: String })
253
- ], r.prototype, "validationMessage", 2);
254
- h([
255
- n({ type: String })
256
- ], r.prototype, "validationIconSrc", 2);
257
- h([
258
- n({
233
+ }, l.ID = "sd-radio-button-group", l.ensureDefined = () => {
234
+ w.ensureDefined(), customElements.get(l.ID) || customElements.define(l.ID, l);
235
+ }, l);
236
+ c([
237
+ r({ type: String, reflect: !0, attribute: !0 })
238
+ ], a.prototype, "layout");
239
+ c([
240
+ r({ type: String })
241
+ ], a.prototype, "value");
242
+ c([
243
+ r({ type: Boolean, reflect: !0, attribute: "uncheck-allowed" })
244
+ ], a.prototype, "uncheckAllowed");
245
+ c([
246
+ r({ type: Boolean, reflect: !0, attribute: !0 })
247
+ ], a.prototype, "disabled");
248
+ c([
249
+ r({ type: String })
250
+ ], a.prototype, "validationMessage");
251
+ c([
252
+ r({ type: String })
253
+ ], a.prototype, "validationIconSrc");
254
+ c([
255
+ r({
259
256
  type: {
260
257
  fromAttribute(o) {
261
- return o && k[o.toLowerCase()];
258
+ return o && x[o.toLowerCase()];
262
259
  },
263
260
  toAttribute(o) {
264
261
  return o && o.toLowerCase();
@@ -266,11 +263,11 @@ h([
266
263
  },
267
264
  reflect: !0
268
265
  })
269
- ], r.prototype, "validationLevel", 2);
270
- let A = r;
271
- A.ensureDefined();
266
+ ], a.prototype, "validationLevel");
267
+ let _ = a;
268
+ _.ensureDefined();
272
269
  export {
273
- B as RadioButton,
274
- A as RadioButtonGroup
270
+ w as RadioButton,
271
+ _ as RadioButtonGroup
275
272
  };
276
273
  //# sourceMappingURL=radio-button-group.mjs.map
package/dist/radio-button-group.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"radio-button-group.mjs","sources":["../radio-button.ts","../radio-button-group.ts"],"sourcesContent":["import { LitElement, TemplateResult, html, unsafeCSS, css, nothing } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [RadioButton.ID]: RadioButton;\n }\n}\n\nimport style from \"./scss/button.scss?inline\";\nlet idCounter = 0;\n\nexport class RadioButton extends LitElement {\n public static readonly ID = \"sd-radio-button\";\n public static ensureDefined = (): void => {\n if (!customElements.get(RadioButton.ID)) {\n customElements.define(RadioButton.ID, RadioButton);\n }\n };\n @property({ type: Boolean, reflect: true, attribute: true })\n public checked = false;\n @property({ type: String, reflect: true, attribute: true })\n public value = \"\";\n @property({ type: Boolean, reflect: true, attribute: true })\n public disabled = false;\n @property({ type: String, reflect: true, attribute: true })\n public label = \"\";\n\n private a11yID;\n\n constructor() {\n super();\n this.a11yID = RadioButton.ID + \"_\" + idCounter++;\n }\n\n static get styles() {\n return [\n css`\n ${unsafeCSS(style)}\n `,\n ];\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"root\">\n <div class=\"radio-button-container\">\n <input\n type=\"radio\"\n id=\"${this.a11yID}\"\n .checked=\"${this.checked}\"\n ?disabled=\"${this.disabled}\"\n @click=\"${this.handleClick}\"\n class=\"radio-button\"\n />\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-14 -14 28 28\">\n <circle\n class=\"highlight\"\n style=\"display:none\"\n r=\"11px\"\n fill=\"transparent\"\n stroke-width=\"6px\"\n ></circle>\n <circle class=\"inner\" r=\"6px\" style=\"display:none\" stroke=\"none\"></circle>\n <circle class=\"outer\" r=\"9px\" fill=\"transparent\" stroke-width=\"2px\"></circle>\n </svg>\n </div>\n <label class=\"label\" for=\"${this.a11yID}\" @click=\"${this.handleClick}\">${this.label}</label>\n </div>\n `;\n }\n\n private handleClick = (event: MouseEvent): void => {\n event.preventDefault();\n };\n}\n","import { LitElement, TemplateResult, html, PropertyValues, ComplexAttributeConverter, unsafeCSS, css } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { RadioButton } from \"./radio-button\";\nimport { ValidationLevel } from \"@cas-smartdesign/field-validation-message\";\nimport type { LayoutType, IValueChangeEvent } from \"./types\";\n\nexport { RadioButton } from \"./radio-button\";\nexport type * from \"./types\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [RadioButtonGroup.ID]: RadioButtonGroup;\n }\n}\nimport style from \"./scss/group.scss?inline\";\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n \"value-change\": CustomEvent<IValueChangeEvent>;\n}\n\nexport interface RadioButtonGroup {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport class RadioButtonGroup extends LitElement {\n public static readonly ID = \"sd-radio-button-group\";\n public static ensureDefined = (): void => {\n RadioButton.ensureDefined();\n if (!customElements.get(RadioButtonGroup.ID)) {\n customElements.define(RadioButtonGroup.ID, RadioButtonGroup);\n }\n };\n @property({ type: String, reflect: true, attribute: true })\n public layout: LayoutType = \"horizontal\";\n @property({ type: String })\n public value = \"\";\n @property({ type: Boolean, reflect: true, attribute: \"uncheck-allowed\" })\n public uncheckAllowed = false;\n @property({ type: Boolean, reflect: true, attribute: true })\n public disabled = false;\n @property({ type: String })\n public validationMessage: string;\n @property({ type: String })\n public validationIconSrc: string;\n @property({\n type: {\n fromAttribute(value: string): ValidationLevel {\n return value && ValidationLevel[value.toLowerCase()];\n },\n toAttribute(value: ValidationLevel): string {\n return value && value.toLowerCase();\n },\n } as ComplexAttributeConverter,\n reflect: true,\n })\n public validationLevel: ValidationLevel;\n\n private _buttonsSlot: HTMLSlotElement;\n private _buttons: HTMLElement[];\n private _focusIndex = -1;\n private _checkedButton: HTMLElement = null;\n\n public get focusIndex(): number {\n return this._focusIndex;\n }\n\n public set focusIndex(index: number) {\n if (index >= -1 && index < this.childElementCount) {\n const oldValue = this._focusIndex;\n this._focusIndex = index;\n if (oldValue !== index) {\n const previousButton = this._buttons[oldValue];\n const currentButton = this._buttons[this.focusIndex];\n this.updateFocused(previousButton, currentButton);\n }\n }\n }\n\n protected firstUpdated(changedProperties: PropertyValues): void {\n super.firstUpdated(changedProperties);\n this.buttonsSlot.addEventListener(\"slotchange\", this.handleSlotChange);\n this.addEventListener(\"focusin\", this.handleFocusIn);\n this.addEventListener(\"focusout\", this.handleFocusOut);\n this.addEventListener(\"keydown\", this.handleKeyDown);\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has(\"disabled\")) {\n this.disabled ? this.disableButtons() : this.enableButtons();\n }\n }\n\n static get styles() {\n return [\n css`\n ${unsafeCSS(style)}\n `,\n ];\n }\n public render(): TemplateResult {\n return html`\n <div\n class=\"buttons-container ${this.layout === \"vertical\" ? \"vertical\" : \"horizontal\"}\"\n @click=\"${ifDefined(this.disabled ? undefined : this.handleButtonClick)}\"\n >\n <slot></slot>\n </div>\n ${this.validationMessage &&\n html`\n <sd-field-validation-message\n class=\"validation-message\"\n .message=${this.validationMessage}\n .icon=${this.validationIconSrc}\n .level=${this.validationLevel}\n >\n </sd-field-validation-message>\n `}\n `;\n }\n\n private handleSlotChange = (): void => {\n this._buttons = this.buttonsSlot.assignedElements() as HTMLElement[];\n this._buttons.forEach((button) => {\n if (!button.hasAttribute(\"disabled\") && this.disabled) {\n button.setAttribute(\"disabled\", \"\");\n }\n // prevent radio buttons to be able to get focus by tabbing\n // as focus is handled by this element\n button.setAttribute(\"tabIndex\", \"-1\");\n this.updateCheckedButton(button);\n });\n };\n\n private updateCheckedButton(button: HTMLElement): void {\n if (this._checkedButton && this._checkedButton !== button) {\n this.uncheckButton(button);\n } else if (button.hasAttribute(\"checked\")) {\n this._checkedButton = button;\n const value = button.getAttribute(\"value\");\n this.updateValue(value);\n }\n }\n\n private handleFocusIn = (event: FocusEvent): void => {\n const target = event.target as HTMLElement;\n const ind = this._buttons.findIndex((button) => button == target);\n this.focusIndex = this.focusIndex >= 0 ? this.focusIndex : this.getNextFocusIndex(ind !== -1 ? ind : 0);\n this.updateFocused(null, this._buttons[this.focusIndex]);\n };\n\n private handleFocusOut = (): void => {\n this.updateFocused(this._buttons[this.focusIndex]);\n };\n\n private disableButtons(): void {\n this._buttons?.forEach((button) => {\n button.setAttribute(\"disabled\", \"\");\n });\n }\n\n private enableButtons(): void {\n this._buttons?.forEach((button) => {\n button.removeAttribute(\"disabled\");\n });\n }\n\n private handleButtonClick = (event: MouseEvent): void => {\n // the individual buttons are not focusable\n this.focus();\n const target = this._buttons.find((button) => button.contains(event.target as Node));\n const targetIndex = this._buttons.findIndex((button) => button == target);\n if (targetIndex >= 0) {\n this.focusIndex = targetIndex;\n this.updateChecked();\n }\n };\n\n private fireValueChangeEvent(): void {\n this.dispatchEvent(\n new CustomEvent<IValueChangeEvent>(\"value-change\", {\n detail: {\n value: this.value,\n selectedIndex: this.selectedIndex,\n },\n }),\n );\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n let shouldPrevent = true;\n switch (event.key) {\n case \"Down\":\n case \"ArrowDown\": {\n const newIndex = this.getNextFocusIndex(this.focusIndex + 1);\n this.focusIndex = newIndex !== -1 ? newIndex : this.getNextFocusIndex(0);\n if (!this.uncheckAllowed) {\n this.updateChecked();\n }\n break;\n }\n case \"Up\":\n case \"ArrowUp\": {\n const newIndex = this.getPreviousFocusIndex(this.focusIndex - 1);\n this.focusIndex = newIndex !== -1 ? newIndex : this.getPreviousFocusIndex(this.childElementCount - 1);\n if (!this.uncheckAllowed) {\n this.updateChecked();\n }\n break;\n }\n case \"Enter\": {\n this.updateChecked();\n break;\n }\n default: {\n shouldPrevent = false;\n }\n }\n if (shouldPrevent) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n private getNextFocusIndex(index: number): number {\n for (let i = index; i < this.childElementCount; i++) {\n const button = this._buttons[i];\n if (this.isFocusable(button)) {\n return i;\n }\n }\n\n return -1;\n }\n\n private getPreviousFocusIndex(index: number): number {\n for (let i = index; i >= 0; i--) {\n const button = this._buttons[i];\n if (this.isFocusable(button)) {\n return i;\n }\n }\n\n return -1;\n }\n\n private isFocusable(button: HTMLElement): boolean {\n return !button.hasAttribute(\"disabled\");\n }\n\n private updateChecked(): void {\n const previousChecked = this._checkedButton;\n const currentChecked = this._buttons[this.focusIndex];\n this._checkedButton = currentChecked;\n if (previousChecked && previousChecked !== currentChecked) {\n this.uncheckButton(previousChecked);\n }\n if (currentChecked) {\n this.toggleButton(currentChecked);\n }\n }\n\n private toggleButton(button: HTMLElement): void {\n const checked = button.hasAttribute(\"checked\");\n if (checked) {\n if (this.uncheckAllowed) {\n this.uncheckButton(button);\n this._checkedButton = null;\n this.updateValue(\"\");\n }\n } else {\n this.checkButton(button);\n this.updateValue(button.getAttribute(\"value\"));\n }\n }\n\n private updateValue(newValue: string): void {\n this.value = newValue;\n this.fireValueChangeEvent();\n }\n\n private updateFocused(previousFocused?: HTMLElement, currentFocused?: HTMLElement): void {\n previousFocused?.removeAttribute?.(\"focused\");\n currentFocused?.setAttribute?.(\"focused\", \"\");\n }\n\n private checkButton(button: HTMLElement): void {\n button.setAttribute(\"checked\", \"\");\n }\n\n private uncheckButton(button: HTMLElement): void {\n button.removeAttribute(\"checked\");\n }\n\n private get buttonsSlot(): HTMLSlotElement {\n if (this.shadowRoot && !this._buttonsSlot) {\n this._buttonsSlot = this.shadowRoot.querySelector(\"slot\");\n }\n return this._buttonsSlot;\n }\n\n private get selectedIndex(): number {\n return this._buttons.indexOf(this._checkedButton);\n }\n}\n\nRadioButtonGroup.ensureDefined();\n"],"names":["idCounter","_RadioButton","_a","LitElement","event","css","unsafeCSS","style","html","__decorateClass","property","RadioButton","_RadioButtonGroup","button","target","ind","targetIndex","shouldPrevent","newIndex","index","oldValue","previousButton","currentButton","changedProperties","ifDefined","value","i","previousChecked","currentChecked","newValue","previousFocused","currentFocused","_b","ValidationLevel","RadioButtonGroup"],"mappings":"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"}
1
+ {"version":3,"file":"radio-button-group.mjs","sources":["../radio-button.ts","../radio-button-group.ts"],"sourcesContent":["import { LitElement, TemplateResult, html, unsafeCSS, css, nothing } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [RadioButton.ID]: RadioButton;\n }\n}\n\nimport style from \"./scss/button.scss?inline\";\nlet idCounter = 0;\n\nexport class RadioButton extends LitElement {\n public static readonly ID = \"sd-radio-button\";\n public static ensureDefined = (): void => {\n if (!customElements.get(RadioButton.ID)) {\n customElements.define(RadioButton.ID, RadioButton);\n }\n };\n @property({ type: Boolean, reflect: true, attribute: true })\n public checked = false;\n @property({ type: String, reflect: true, attribute: true })\n public value = \"\";\n @property({ type: Boolean, reflect: true, attribute: true })\n public disabled = false;\n @property({ type: String, reflect: true, attribute: true })\n public label = \"\";\n\n private a11yID;\n\n constructor() {\n super();\n this.a11yID = RadioButton.ID + \"_\" + idCounter++;\n }\n\n static get styles() {\n return [\n css`\n ${unsafeCSS(style)}\n `,\n ];\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"root\">\n <div class=\"radio-button-container\">\n <input\n type=\"radio\"\n id=\"${this.a11yID}\"\n .checked=\"${this.checked}\"\n ?disabled=\"${this.disabled}\"\n @click=\"${this.handleClick}\"\n class=\"radio-button\"\n />\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-14 -14 28 28\">\n <circle\n class=\"highlight\"\n style=\"display:none\"\n r=\"11px\"\n fill=\"transparent\"\n stroke-width=\"6px\"\n ></circle>\n <circle class=\"inner\" r=\"6px\" style=\"display:none\" stroke=\"none\"></circle>\n <circle class=\"outer\" r=\"9px\" fill=\"transparent\" stroke-width=\"2px\"></circle>\n </svg>\n </div>\n <label class=\"label\" for=\"${this.a11yID}\" @click=\"${this.handleClick}\">${this.label}</label>\n </div>\n `;\n }\n\n private handleClick = (event: MouseEvent): void => {\n event.preventDefault();\n };\n}\n","import { LitElement, TemplateResult, html, PropertyValues, ComplexAttributeConverter, unsafeCSS, css } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { RadioButton } from \"./radio-button\";\nimport { ValidationLevel } from \"@cas-smartdesign/field-validation-message\";\nimport type { LayoutType, IValueChangeEvent } from \"./types\";\n\nexport { RadioButton } from \"./radio-button\";\nexport type * from \"./types\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [RadioButtonGroup.ID]: RadioButtonGroup;\n }\n}\nimport style from \"./scss/group.scss?inline\";\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n \"value-change\": CustomEvent<IValueChangeEvent>;\n}\n\nexport interface RadioButtonGroup {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport class RadioButtonGroup extends LitElement {\n public static readonly ID = \"sd-radio-button-group\";\n public static ensureDefined = (): void => {\n RadioButton.ensureDefined();\n if (!customElements.get(RadioButtonGroup.ID)) {\n customElements.define(RadioButtonGroup.ID, RadioButtonGroup);\n }\n };\n @property({ type: String, reflect: true, attribute: true })\n public layout: LayoutType = \"horizontal\";\n @property({ type: String })\n public value = \"\";\n @property({ type: Boolean, reflect: true, attribute: \"uncheck-allowed\" })\n public uncheckAllowed = false;\n @property({ type: Boolean, reflect: true, attribute: true })\n public disabled = false;\n @property({ type: String })\n public validationMessage: string;\n @property({ type: String })\n public validationIconSrc: string;\n @property({\n type: {\n fromAttribute(value: string): ValidationLevel {\n return value && ValidationLevel[value.toLowerCase()];\n },\n toAttribute(value: ValidationLevel): string {\n return value && value.toLowerCase();\n },\n } as ComplexAttributeConverter,\n reflect: true,\n })\n public validationLevel: ValidationLevel;\n\n private _buttonsSlot: HTMLSlotElement;\n private _buttons: HTMLElement[];\n private _focusIndex = -1;\n private _checkedButton: HTMLElement = null;\n\n public get focusIndex(): number {\n return this._focusIndex;\n }\n\n public set focusIndex(index: number) {\n if (index >= -1 && index < this.childElementCount) {\n const oldValue = this._focusIndex;\n this._focusIndex = index;\n if (oldValue !== index) {\n const previousButton = this._buttons[oldValue];\n const currentButton = this._buttons[this.focusIndex];\n this.updateFocused(previousButton, currentButton);\n }\n }\n }\n\n protected firstUpdated(changedProperties: PropertyValues): void {\n super.firstUpdated(changedProperties);\n this.buttonsSlot.addEventListener(\"slotchange\", this.handleSlotChange);\n this.addEventListener(\"focusin\", this.handleFocusIn);\n this.addEventListener(\"focusout\", this.handleFocusOut);\n this.addEventListener(\"keydown\", this.handleKeyDown);\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has(\"disabled\")) {\n if (this.disabled) {\n this.disableButtons();\n } else {\n this.enableButtons();\n }\n }\n }\n\n static get styles() {\n return [\n css`\n ${unsafeCSS(style)}\n `,\n ];\n }\n public render(): TemplateResult {\n return html`\n <div\n class=\"buttons-container ${this.layout === \"vertical\" ? \"vertical\" : \"horizontal\"}\"\n @click=\"${ifDefined(this.disabled ? undefined : this.handleButtonClick)}\"\n >\n <slot></slot>\n </div>\n ${this.validationMessage &&\n html`\n <sd-field-validation-message\n class=\"validation-message\"\n .message=${this.validationMessage}\n .icon=${this.validationIconSrc}\n .level=${this.validationLevel}\n >\n </sd-field-validation-message>\n `}\n `;\n }\n\n private handleSlotChange = (): void => {\n this._buttons = this.buttonsSlot.assignedElements() as HTMLElement[];\n this._buttons.forEach((button) => {\n if (!button.hasAttribute(\"disabled\") && this.disabled) {\n button.setAttribute(\"disabled\", \"\");\n }\n // prevent radio buttons to be able to get focus by tabbing\n // as focus is handled by this element\n button.setAttribute(\"tabIndex\", \"-1\");\n this.updateCheckedButton(button);\n });\n };\n\n private updateCheckedButton(button: HTMLElement): void {\n if (this._checkedButton && this._checkedButton !== button) {\n this.uncheckButton(button);\n } else if (button.hasAttribute(\"checked\")) {\n this._checkedButton = button;\n const value = button.getAttribute(\"value\");\n this.updateValue(value);\n }\n }\n\n private handleFocusIn = (event: FocusEvent): void => {\n const target = event.target as HTMLElement;\n const ind = this._buttons.findIndex((button) => button == target);\n this.focusIndex = this.focusIndex >= 0 ? this.focusIndex : this.getNextFocusIndex(ind !== -1 ? ind : 0);\n this.updateFocused(null, this._buttons[this.focusIndex]);\n };\n\n private handleFocusOut = (): void => {\n this.updateFocused(this._buttons[this.focusIndex]);\n };\n\n private disableButtons(): void {\n this._buttons?.forEach((button) => {\n button.setAttribute(\"disabled\", \"\");\n });\n }\n\n private enableButtons(): void {\n this._buttons?.forEach((button) => {\n button.removeAttribute(\"disabled\");\n });\n }\n\n private handleButtonClick = (event: MouseEvent): void => {\n // the individual buttons are not focusable\n this.focus();\n const target = this._buttons.find((button) => button.contains(event.target as Node));\n const targetIndex = this._buttons.findIndex((button) => button == target);\n if (targetIndex >= 0) {\n this.focusIndex = targetIndex;\n this.updateChecked();\n }\n };\n\n private fireValueChangeEvent(): void {\n this.dispatchEvent(\n new CustomEvent<IValueChangeEvent>(\"value-change\", {\n detail: {\n value: this.value,\n selectedIndex: this.selectedIndex,\n },\n }),\n );\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n let shouldPrevent = true;\n switch (event.key) {\n case \"Down\":\n case \"ArrowDown\": {\n const newIndex = this.getNextFocusIndex(this.focusIndex + 1);\n this.focusIndex = newIndex !== -1 ? newIndex : this.getNextFocusIndex(0);\n if (!this.uncheckAllowed) {\n this.updateChecked();\n }\n break;\n }\n case \"Up\":\n case \"ArrowUp\": {\n const newIndex = this.getPreviousFocusIndex(this.focusIndex - 1);\n this.focusIndex = newIndex !== -1 ? newIndex : this.getPreviousFocusIndex(this.childElementCount - 1);\n if (!this.uncheckAllowed) {\n this.updateChecked();\n }\n break;\n }\n case \"Enter\": {\n this.updateChecked();\n break;\n }\n default: {\n shouldPrevent = false;\n }\n }\n if (shouldPrevent) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n private getNextFocusIndex(index: number): number {\n for (let i = index; i < this.childElementCount; i++) {\n const button = this._buttons[i];\n if (this.isFocusable(button)) {\n return i;\n }\n }\n\n return -1;\n }\n\n private getPreviousFocusIndex(index: number): number {\n for (let i = index; i >= 0; i--) {\n const button = this._buttons[i];\n if (this.isFocusable(button)) {\n return i;\n }\n }\n\n return -1;\n }\n\n private isFocusable(button: HTMLElement): boolean {\n return !button.hasAttribute(\"disabled\");\n }\n\n private updateChecked(): void {\n const previousChecked = this._checkedButton;\n const currentChecked = this._buttons[this.focusIndex];\n this._checkedButton = currentChecked;\n if (previousChecked && previousChecked !== currentChecked) {\n this.uncheckButton(previousChecked);\n }\n if (currentChecked) {\n this.toggleButton(currentChecked);\n }\n }\n\n private toggleButton(button: HTMLElement): void {\n const checked = button.hasAttribute(\"checked\");\n if (checked) {\n if (this.uncheckAllowed) {\n this.uncheckButton(button);\n this._checkedButton = null;\n this.updateValue(\"\");\n }\n } else {\n this.checkButton(button);\n this.updateValue(button.getAttribute(\"value\"));\n }\n }\n\n private updateValue(newValue: string): void {\n this.value = newValue;\n this.fireValueChangeEvent();\n }\n\n private updateFocused(previousFocused?: HTMLElement, currentFocused?: HTMLElement): void {\n previousFocused?.removeAttribute?.(\"focused\");\n currentFocused?.setAttribute?.(\"focused\", \"\");\n }\n\n private checkButton(button: HTMLElement): void {\n button.setAttribute(\"checked\", \"\");\n }\n\n private uncheckButton(button: HTMLElement): void {\n button.removeAttribute(\"checked\");\n }\n\n private get buttonsSlot(): HTMLSlotElement {\n if (this.shadowRoot && !this._buttonsSlot) {\n this._buttonsSlot = this.shadowRoot.querySelector(\"slot\");\n }\n return this._buttonsSlot;\n }\n\n private get selectedIndex(): number {\n return this._buttons.indexOf(this._checkedButton);\n }\n}\n\nRadioButtonGroup.ensureDefined();\n"],"names":["idCounter","_RadioButton","_a","LitElement","event","css","unsafeCSS","style","html","__decorateClass","property","RadioButton","_RadioButtonGroup","button","target","ind","targetIndex","shouldPrevent","newIndex","index","oldValue","previousButton","currentButton","changedProperties","ifDefined","value","i","previousChecked","currentChecked","newValue","previousFocused","currentFocused","ValidationLevel","RadioButtonGroup"],"mappings":"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"}