@cas-smartdesign/radio-button-group 4.4.0 → 5.0.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.
@@ -1,5 +1,5 @@
1
- import { LitElement, TemplateResult, PropertyValues } from "lit";
2
1
  import { ValidationLevel } from "@cas-smartdesign/field-validation-message";
2
+ import { LitElement, type TemplateResult, type PropertyValues } from "lit";
3
3
  import type { LayoutType, IValueChangeEvent } from "./types";
4
4
  export { RadioButton } from "./radio-button";
5
5
  export type * from "./types";
@@ -7,27 +7,20 @@ declare global {
7
7
  interface HTMLElementTagNameMap {
8
8
  [RadioButtonGroup.ID]: RadioButtonGroup;
9
9
  }
10
- }
11
- export interface CustomEventMap extends HTMLElementEventMap {
12
- "value-change": CustomEvent<IValueChangeEvent>;
13
- }
14
- export interface RadioButtonGroup {
15
- addEventListener<K extends keyof CustomEventMap>(event: K, listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null, options?: AddEventListenerOptions | boolean): void;
16
- addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
17
- removeEventListener<K extends keyof CustomEventMap>(type: K, listener: (this: this, ev: CustomEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
18
- removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
19
- dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;
10
+ interface HTMLElementEventMap {
11
+ "sd-radio-button-group-value-change": CustomEvent<IValueChangeEvent>;
12
+ }
20
13
  }
21
14
  export declare class RadioButtonGroup extends LitElement {
22
15
  static readonly ID = "sd-radio-button-group";
23
16
  static ensureDefined: () => void;
24
17
  layout: LayoutType;
25
- value: string;
18
+ value: string | undefined;
26
19
  uncheckAllowed: boolean;
27
20
  disabled: boolean;
28
- validationMessage: string;
29
- validationIconSrc: string;
30
- validationLevel: ValidationLevel;
21
+ validationMessage: string | undefined;
22
+ validationIconSrc: string | undefined;
23
+ validationLevel: ValidationLevel | undefined;
31
24
  private _buttonsSlot;
32
25
  private _buttons;
33
26
  private _focusIndex;
@@ -61,3 +54,4 @@ export declare class RadioButtonGroup extends LitElement {
61
54
  private get buttonsSlot();
62
55
  private get selectedIndex();
63
56
  }
57
+ //# sourceMappingURL=radio-button-group.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radio-button-group.d.ts","sourceRoot":"","sources":["../radio-button-group.ts"],"names":[],"mappings":"AAAA,OAAiC,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACtG,OAAO,EACH,UAAU,EACV,KAAK,cAAc,EAEnB,KAAK,cAAc,EAItB,MAAM,KAAK,CAAC;AAIb,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAI7D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,mBAAmB,SAAS,CAAC;AAI7B,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,gBAAgB,CAAC,EAAE,CAAC,EAAE,gBAAgB,CAAC;KAC3C;IACD,UAAU,mBAAmB;QACzB,oCAAoC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;KACxE;CACJ;AAED,qBAAa,gBAAiB,SAAQ,UAAU;IAC5C,gBAAuB,EAAE,2BAA2B;IACpD,OAAc,aAAa,QAAO,IAAI,CAKpC;IAEK,MAAM,EAAE,UAAU,CAAgB;IAElC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAM;IAE/B,cAAc,UAAS;IAEvB,QAAQ,UAAS;IAEjB,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAC;IAEtC,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAC;IAYtC,eAAe,EAAE,eAAe,GAAG,SAAS,CAAC;IAEpD,OAAO,CAAC,YAAY,CAA8B;IAClD,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,cAAc,CAAsC;IAE5D,IAAW,UAAU,IAAI,MAAM,CAE9B;IAED,IAAW,UAAU,CAAC,KAAK,EAAE,MAAM,EAUlC;cAEkB,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;cAQrD,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAWnE,WAAoB,MAAM,8BAMzB;IACe,MAAM,IAAI,cAAc;IAqBxC,OAAO,CAAC,gBAAgB,CAWtB;IAEF,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,cAAc,CAEpB;IAEF,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,iBAAiB,CASvB;IAEF,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,aAAa,CA6BnB;IAEF,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAIrB,OAAO,KAAK,WAAW,GAKtB;IAED,OAAO,KAAK,aAAa,GAKxB;CACJ"}
@@ -1,30 +1,45 @@
1
- import { LitElement as b, unsafeCSS as v, css as g, html as p } 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
- 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:var(--sd-radio-button-padding, 6px 0px)}.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:var(--sd-radio-button-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, f = (o, t, e, i) => {
7
- for (var s = void 0, c = o.length - 1, u; c >= 0; c--)
8
- (u = o[c]) && (s = u(t, e, s) || s);
9
- return s && I(t, e, s), s;
10
- };
11
- let m = 0;
12
- var n;
13
- const h = (n = class extends b {
14
- constructor() {
15
- super(), this.checked = !1, this.value = "", this.disabled = !1, this.label = "", this.handleClick = (t) => {
16
- t.preventDefault();
17
- }, this.a11yID = n.ID + "_" + m++;
18
- }
19
- static get styles() {
20
- return [
21
- g`
22
- ${v(y)}
23
- `
24
- ];
25
- }
26
- render() {
27
- return p`
1
+ import e from "@cas-smartdesign/field-validation-message";
2
+ import { LitElement as t, css as n, html as r, unsafeCSS as i } from "lit";
3
+ import { property as a } from "lit/decorators/property.js";
4
+ import { ifDefined as o } from "lit/directives/if-defined.js";
5
+ //#region scss/button.scss?inline
6
+ var s = ":host{display:block}:host,.label,.checkbox{outline:none}:host([disabled]){pointer-events:none}:host([disabled]) .root{opacity:.6;cursor:default;filter:grayscale()}:host(:not([disabled])[focused]) .highlight,: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;text-overflow:ellipsis;overflow:hidden}.root{vertical-align:middle;width:100%;padding:var(--sd-radio-button-padding,6px 0px);align-items:center;display:inline-flex}.root .radio-button-container{box-sizing:border-box;cursor:pointer;flex-shrink:0;width:28px;height:28px;margin-right:5px;display:inline-block;position:relative}.root .radio-button-container input{opacity:0;position:absolute;top:0;left:0}.root .radio-button-container circle.highlight{stroke:var(--sd-radio-button-highlight-color,#1467ba4d)}.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:var(--sd-radio-button-font-family,\"Segoe UI\", \"Lucida Sans\", Arial, sans-serif);text-overflow:ellipsis;-webkit-user-select:none;user-select:none;cursor:pointer;padding-top:2px;padding-bottom:2px;overflow-x:hidden}";
7
+ //#endregion
8
+ //#region \0@oxc-project+runtime@0.122.0/helpers/decorateMetadata.js
9
+ function c(e, t) {
10
+ if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
11
+ }
12
+ //#endregion
13
+ //#region \0@oxc-project+runtime@0.122.0/helpers/decorate.js
14
+ function l(e, t, n, r) {
15
+ var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
16
+ if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
17
+ else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
18
+ return i > 3 && a && Object.defineProperty(t, n, a), a;
19
+ }
20
+ //#endregion
21
+ //#region radio-button.ts
22
+ var u = 0, d = class e extends t {
23
+ static {
24
+ this.ID = "sd-radio-button";
25
+ }
26
+ static {
27
+ this.ensureDefined = () => {
28
+ customElements.get(e.ID) || customElements.define(e.ID, e);
29
+ };
30
+ }
31
+ constructor() {
32
+ super(), this.checked = !1, this.value = "", this.disabled = !1, this.label = "", this.handleClick = (e) => {
33
+ e.preventDefault();
34
+ }, this.a11yID = e.ID + "_" + u++;
35
+ }
36
+ static get styles() {
37
+ return [n`
38
+ ${i(s)}
39
+ `];
40
+ }
41
+ render() {
42
+ return r`
28
43
  <div class="root">
29
44
  <div class="radio-button-container">
30
45
  <input
@@ -50,105 +65,105 @@ const h = (n = class extends b {
50
65
  <label class="label" for="${this.a11yID}" @click="${this.handleClick}">${this.label}</label>
51
66
  </div>
52
67
  `;
53
- }
54
- }, n.ID = "sd-radio-button", n.ensureDefined = () => {
55
- customElements.get(n.ID) || customElements.define(n.ID, n);
56
- }, n);
57
- f([
58
- r({ type: Boolean, reflect: !0, attribute: !0 })
59
- ], h.prototype, "checked");
60
- f([
61
- r({ type: String, reflect: !0, attribute: !0 })
62
- ], h.prototype, "value");
63
- f([
64
- r({ type: Boolean, reflect: !0, attribute: !0 })
65
- ], h.prototype, "disabled");
66
- f([
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;gap:var(--sd-radio-button-group-gap, 0)}.buttons-container.vertical{flex-direction:column}.validation-message{margin-left:5px}";
71
- var C = Object.defineProperty, d = (o, t, e, i) => {
72
- for (var s = void 0, c = o.length - 1, u; c >= 0; c--)
73
- (u = o[c]) && (s = u(t, e, s) || s);
74
- return s && C(t, e, s), s;
75
- }, a;
76
- const l = (a = class extends b {
77
- constructor() {
78
- super(...arguments), this.layout = "horizontal", this.value = "", this.uncheckAllowed = !1, this.disabled = !1, this._focusIndex = -1, this._checkedButton = null, this.handleSlotChange = () => {
79
- this._buttons = this.buttonsSlot.assignedElements(), this._buttons.forEach((t) => {
80
- !t.hasAttribute("disabled") && this.disabled && t.setAttribute("disabled", ""), t.setAttribute("tabIndex", "-1"), this.updateCheckedButton(t);
81
- });
82
- }, this.handleFocusIn = (t) => {
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
- }, this.handleFocusOut = () => {
86
- this.updateFocused(this._buttons[this.focusIndex]);
87
- }, this.handleButtonClick = (t) => {
88
- this.focus();
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
- }, this.handleKeyDown = (t) => {
92
- let e = !0;
93
- switch (t.key) {
94
- case "Down":
95
- case "ArrowDown":
96
- case "Right":
97
- case "ArrowRight": {
98
- this.focusNext();
99
- break;
100
- }
101
- case "Up":
102
- case "ArrowUp":
103
- case "Left":
104
- case "ArrowLeft": {
105
- this.focusPrevious();
106
- break;
107
- }
108
- case "Enter": {
109
- this.updateChecked();
110
- break;
111
- }
112
- default:
113
- e = !1;
114
- }
115
- e && (t.preventDefault(), t.stopPropagation());
116
- };
117
- }
118
- get focusIndex() {
119
- return this._focusIndex;
120
- }
121
- set focusIndex(t) {
122
- if (t >= -1 && t < this.childElementCount) {
123
- const e = this._focusIndex;
124
- if (this._focusIndex = t, e !== t) {
125
- const i = this._buttons[e], s = this._buttons[this.focusIndex];
126
- this.updateFocused(i, s);
127
- }
128
- }
129
- }
130
- firstUpdated(t) {
131
- super.firstUpdated(t), this.buttonsSlot.addEventListener("slotchange", this.handleSlotChange), this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut), this.addEventListener("keydown", this.handleKeyDown);
132
- }
133
- updated(t) {
134
- super.updated(t), t.has("disabled") && (this.disabled ? this.disableButtons() : this.enableButtons());
135
- }
136
- static get styles() {
137
- return [
138
- g`
139
- ${v(B)}
140
- `
141
- ];
142
- }
143
- render() {
144
- return p`
68
+ }
69
+ };
70
+ l([a({
71
+ type: Boolean,
72
+ reflect: !0,
73
+ attribute: !0
74
+ }), c("design:type", Object)], d.prototype, "checked", void 0), l([a({
75
+ type: String,
76
+ reflect: !0,
77
+ attribute: !0
78
+ }), c("design:type", Object)], d.prototype, "value", void 0), l([a({
79
+ type: Boolean,
80
+ reflect: !0,
81
+ attribute: !0
82
+ }), c("design:type", Object)], d.prototype, "disabled", void 0), l([a({
83
+ type: String,
84
+ reflect: !0,
85
+ attribute: !0
86
+ }), c("design:type", Object)], d.prototype, "label", void 0);
87
+ //#endregion
88
+ //#region scss/group.scss?inline
89
+ var f = ":host(:focus){outline:none}.buttons-container{gap:var(--sd-radio-button-group-gap,0);display:flex}.buttons-container.vertical{flex-direction:column}.validation-message{margin-left:5px}", p = class e extends t {
90
+ constructor(...e) {
91
+ super(...e), this.layout = "horizontal", this.value = "", this.uncheckAllowed = !1, this.disabled = !1, this._buttons = [], this._focusIndex = -1, this._checkedButton = void 0, this.handleSlotChange = () => {
92
+ this._buttons = this.buttonsSlot.assignedElements(), this._buttons.forEach((e) => {
93
+ !e.hasAttribute("disabled") && this.disabled && e.setAttribute("disabled", ""), e.setAttribute("tabIndex", "-1"), this.updateCheckedButton(e);
94
+ });
95
+ }, this.handleFocusIn = (e) => {
96
+ let t = e.target, n = this._buttons.findIndex((e) => e == t);
97
+ this.focusIndex = this.focusIndex >= 0 ? this.focusIndex : this.getNextFocusIndex(n === -1 ? 0 : n), this.updateFocused(void 0, this._buttons[this.focusIndex]);
98
+ }, this.handleFocusOut = () => {
99
+ this.updateFocused(this._buttons[this.focusIndex]);
100
+ }, this.handleButtonClick = (e) => {
101
+ this.focus();
102
+ let t = this._buttons.find((t) => t.contains(e.target)), n = this._buttons.findIndex((e) => e == t);
103
+ n >= 0 && (this.focusIndex = n, this.updateChecked());
104
+ }, this.handleKeyDown = (e) => {
105
+ let t = !0;
106
+ switch (e.key) {
107
+ case "Down":
108
+ case "ArrowDown":
109
+ case "Right":
110
+ case "ArrowRight":
111
+ this.focusNext();
112
+ break;
113
+ case "Up":
114
+ case "ArrowUp":
115
+ case "Left":
116
+ case "ArrowLeft":
117
+ this.focusPrevious();
118
+ break;
119
+ case "Enter":
120
+ this.updateChecked();
121
+ break;
122
+ default: t = !1;
123
+ }
124
+ t && (e.preventDefault(), e.stopPropagation());
125
+ };
126
+ }
127
+ static {
128
+ this.ID = "sd-radio-button-group";
129
+ }
130
+ static {
131
+ this.ensureDefined = () => {
132
+ d.ensureDefined(), customElements.get(e.ID) || customElements.define(e.ID, e);
133
+ };
134
+ }
135
+ get focusIndex() {
136
+ return this._focusIndex;
137
+ }
138
+ set focusIndex(e) {
139
+ if (e >= -1 && e < this.childElementCount) {
140
+ let t = this._focusIndex;
141
+ if (this._focusIndex = e, t !== e) {
142
+ let e = this._buttons[t], n = this._buttons[this.focusIndex];
143
+ this.updateFocused(e, n);
144
+ }
145
+ }
146
+ }
147
+ firstUpdated(e) {
148
+ super.firstUpdated(e), this.buttonsSlot.addEventListener("slotchange", this.handleSlotChange), this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut), this.addEventListener("keydown", this.handleKeyDown);
149
+ }
150
+ updated(e) {
151
+ super.updated(e), e.has("disabled") && (this.disabled ? this.disableButtons() : this.enableButtons());
152
+ }
153
+ static get styles() {
154
+ return [n`
155
+ ${i(f)}
156
+ `];
157
+ }
158
+ render() {
159
+ return r`
145
160
  <div
146
161
  class="buttons-container ${this.layout === "vertical" ? "vertical" : "horizontal"}"
147
- @click="${k(this.disabled ? void 0 : this.handleButtonClick)}"
162
+ @click="${o(this.disabled ? void 0 : this.handleButtonClick)}"
148
163
  >
149
164
  <slot></slot>
150
165
  </div>
151
- ${this.validationMessage && p`
166
+ ${this.validationMessage && r`
152
167
  <sd-field-validation-message
153
168
  class="validation-message"
154
169
  .message=${this.validationMessage}
@@ -158,126 +173,106 @@ const l = (a = class extends b {
158
173
  </sd-field-validation-message>
159
174
  `}
160
175
  `;
161
- }
162
- updateCheckedButton(t) {
163
- if (this._checkedButton && this._checkedButton !== t)
164
- this.uncheckButton(t);
165
- else if (t.hasAttribute("checked")) {
166
- this._checkedButton = t;
167
- const e = t.getAttribute("value");
168
- this.updateValue(e);
169
- }
170
- }
171
- disableButtons() {
172
- this._buttons?.forEach((t) => {
173
- t.setAttribute("disabled", "");
174
- });
175
- }
176
- enableButtons() {
177
- this._buttons?.forEach((t) => {
178
- t.removeAttribute("disabled");
179
- });
180
- }
181
- fireValueChangeEvent() {
182
- this.dispatchEvent(
183
- new CustomEvent("value-change", {
184
- detail: {
185
- value: this.value,
186
- selectedIndex: this.selectedIndex
187
- }
188
- })
189
- );
190
- }
191
- focusNext() {
192
- const t = this.getNextFocusIndex(this.focusIndex + 1);
193
- this.focusIndex = t !== -1 ? t : this.getNextFocusIndex(0), this.uncheckAllowed || this.updateChecked();
194
- }
195
- focusPrevious() {
196
- const t = this.getPreviousFocusIndex(this.focusIndex - 1);
197
- this.focusIndex = t !== -1 ? t : this.getPreviousFocusIndex(this.childElementCount - 1), this.uncheckAllowed || this.updateChecked();
198
- }
199
- getNextFocusIndex(t) {
200
- for (let e = t; e < this.childElementCount; e++) {
201
- const i = this._buttons[e];
202
- if (this.isFocusable(i))
203
- return e;
204
- }
205
- return -1;
206
- }
207
- getPreviousFocusIndex(t) {
208
- for (let e = t; e >= 0; e--) {
209
- const i = this._buttons[e];
210
- if (this.isFocusable(i))
211
- return e;
212
- }
213
- return -1;
214
- }
215
- isFocusable(t) {
216
- return !t.hasAttribute("disabled");
217
- }
218
- updateChecked() {
219
- const t = this._checkedButton, e = this._buttons[this.focusIndex];
220
- this._checkedButton = e, t && t !== e && this.uncheckButton(t), e && this.toggleButton(e);
221
- }
222
- toggleButton(t) {
223
- t.hasAttribute("checked") ? this.uncheckAllowed && (this.uncheckButton(t), this._checkedButton = null, this.updateValue("")) : (this.checkButton(t), this.updateValue(t.getAttribute("value")));
224
- }
225
- updateValue(t) {
226
- this.value = t, this.fireValueChangeEvent();
227
- }
228
- updateFocused(t, e) {
229
- t?.removeAttribute?.("focused"), e?.setAttribute?.("focused", "");
230
- }
231
- checkButton(t) {
232
- t.setAttribute("checked", "");
233
- }
234
- uncheckButton(t) {
235
- t.removeAttribute("checked");
236
- }
237
- get buttonsSlot() {
238
- return this.shadowRoot && !this._buttonsSlot && (this._buttonsSlot = this.shadowRoot.querySelector("slot")), this._buttonsSlot;
239
- }
240
- get selectedIndex() {
241
- return this._buttons.indexOf(this._checkedButton);
242
- }
243
- }, a.ID = "sd-radio-button-group", a.ensureDefined = () => {
244
- w.ensureDefined(), customElements.get(a.ID) || customElements.define(a.ID, a);
245
- }, a);
246
- d([
247
- r({ type: String, reflect: !0, attribute: !0 })
248
- ], l.prototype, "layout");
249
- d([
250
- r({ type: String })
251
- ], l.prototype, "value");
252
- d([
253
- r({ type: Boolean, reflect: !0, attribute: "uncheck-allowed" })
254
- ], l.prototype, "uncheckAllowed");
255
- d([
256
- r({ type: Boolean, reflect: !0, attribute: !0 })
257
- ], l.prototype, "disabled");
258
- d([
259
- r({ type: String })
260
- ], l.prototype, "validationMessage");
261
- d([
262
- r({ type: String })
263
- ], l.prototype, "validationIconSrc");
264
- d([
265
- r({
266
- type: {
267
- fromAttribute(o) {
268
- return o && x[o.toLowerCase()];
269
- },
270
- toAttribute(o) {
271
- return o && o.toLowerCase();
272
- }
273
- },
274
- reflect: !0
275
- })
276
- ], l.prototype, "validationLevel");
277
- let _ = l;
278
- _.ensureDefined();
279
- export {
280
- w as RadioButton,
281
- _ as RadioButtonGroup
176
+ }
177
+ updateCheckedButton(e) {
178
+ if (this._checkedButton && this._checkedButton !== e) this.uncheckButton(e);
179
+ else if (e.hasAttribute("checked")) {
180
+ this._checkedButton = e;
181
+ let t = e.getAttribute("value");
182
+ this.updateValue(t);
183
+ }
184
+ }
185
+ disableButtons() {
186
+ this._buttons?.forEach((e) => {
187
+ e.setAttribute("disabled", "");
188
+ });
189
+ }
190
+ enableButtons() {
191
+ this._buttons?.forEach((e) => {
192
+ e.removeAttribute("disabled");
193
+ });
194
+ }
195
+ fireValueChangeEvent() {
196
+ this.dispatchEvent(new CustomEvent("sd-radio-button-group-value-change", { detail: {
197
+ value: this.value,
198
+ selectedIndex: this.selectedIndex
199
+ } }));
200
+ }
201
+ focusNext() {
202
+ let e = this.getNextFocusIndex(this.focusIndex + 1);
203
+ this.focusIndex = e === -1 ? this.getNextFocusIndex(0) : e, this.uncheckAllowed || this.updateChecked();
204
+ }
205
+ focusPrevious() {
206
+ let e = this.getPreviousFocusIndex(this.focusIndex - 1);
207
+ this.focusIndex = e === -1 ? this.getPreviousFocusIndex(this.childElementCount - 1) : e, this.uncheckAllowed || this.updateChecked();
208
+ }
209
+ getNextFocusIndex(e) {
210
+ for (let t = e; t < this.childElementCount; t++) {
211
+ let e = this._buttons[t];
212
+ if (e != null && this.isFocusable(e)) return t;
213
+ }
214
+ return -1;
215
+ }
216
+ getPreviousFocusIndex(e) {
217
+ for (let t = e; t >= 0; t--) {
218
+ let e = this._buttons[t];
219
+ if (e != null && this.isFocusable(e)) return t;
220
+ }
221
+ return -1;
222
+ }
223
+ isFocusable(e) {
224
+ return !e.hasAttribute("disabled");
225
+ }
226
+ updateChecked() {
227
+ let e = this._checkedButton, t = this._buttons[this.focusIndex];
228
+ this._checkedButton = t, e && e !== t && this.uncheckButton(e), t && this.toggleButton(t);
229
+ }
230
+ toggleButton(e) {
231
+ e.hasAttribute("checked") ? this.uncheckAllowed && (this.uncheckButton(e), this._checkedButton = void 0, this.updateValue("")) : (this.checkButton(e), this.updateValue(e.getAttribute("value")));
232
+ }
233
+ updateValue(e) {
234
+ this.value = e ?? void 0, this.fireValueChangeEvent();
235
+ }
236
+ updateFocused(e, t) {
237
+ e?.removeAttribute?.("focused"), t?.setAttribute?.("focused", "");
238
+ }
239
+ checkButton(e) {
240
+ e.setAttribute("checked", "");
241
+ }
242
+ uncheckButton(e) {
243
+ e.removeAttribute("checked");
244
+ }
245
+ get buttonsSlot() {
246
+ return this.shadowRoot && !this._buttonsSlot && (this._buttonsSlot = this.shadowRoot.querySelector("slot") ?? void 0), this._buttonsSlot;
247
+ }
248
+ get selectedIndex() {
249
+ return this._buttons == null || this._checkedButton == null ? -1 : this._buttons.indexOf(this._checkedButton);
250
+ }
282
251
  };
283
- //# sourceMappingURL=radio-button-group.mjs.map
252
+ l([a({
253
+ type: String,
254
+ reflect: !0,
255
+ attribute: !0
256
+ }), c("design:type", Object)], p.prototype, "layout", void 0), l([a({ type: String }), c("design:type", Object)], p.prototype, "value", void 0), l([a({
257
+ type: Boolean,
258
+ reflect: !0,
259
+ attribute: "uncheck-allowed"
260
+ }), c("design:type", Object)], p.prototype, "uncheckAllowed", void 0), l([a({
261
+ type: Boolean,
262
+ reflect: !0,
263
+ attribute: !0
264
+ }), c("design:type", Object)], p.prototype, "disabled", void 0), l([a({ type: String }), c("design:type", Object)], p.prototype, "validationMessage", void 0), l([a({ type: String }), c("design:type", Object)], p.prototype, "validationIconSrc", void 0), l([a({
265
+ type: {
266
+ fromAttribute(t) {
267
+ return e.parseLevel(t);
268
+ },
269
+ toAttribute(e) {
270
+ return e?.toLowerCase();
271
+ }
272
+ },
273
+ reflect: !0
274
+ }), c("design:type", Object)], p.prototype, "validationLevel", void 0), p.ensureDefined();
275
+ //#endregion
276
+ export { d as RadioButton, p as RadioButtonGroup };
277
+
278
+ //# sourceMappingURL=radio-button-group.mjs.map