1 | import {
|
2 | radio_button_styles_default
|
3 | } from "./chunk.2HI5ZYWQ.js";
|
4 | import {
|
5 | defaultValue
|
6 | } from "./chunk.XM2NSF2I.js";
|
7 | import {
|
8 | FormSubmitController
|
9 | } from "./chunk.67FQMIF5.js";
|
10 | import {
|
11 | n as n2
|
12 | } from "./chunk.6G3UULFW.js";
|
13 | import {
|
14 | HasSlotController
|
15 | } from "./chunk.3IYPB6RR.js";
|
16 | import {
|
17 | o
|
18 | } from "./chunk.IAELDRGJ.js";
|
19 | import {
|
20 | l
|
21 | } from "./chunk.7MO772SN.js";
|
22 | import {
|
23 | watch
|
24 | } from "./chunk.W6MGCO4G.js";
|
25 | import {
|
26 | emit
|
27 | } from "./chunk.UY5AQKHP.js";
|
28 | import {
|
29 | e,
|
30 | i,
|
31 | n,
|
32 | t
|
33 | } from "./chunk.VKNZYXSO.js";
|
34 | import {
|
35 | s
|
36 | } from "./chunk.WWAD5WF4.js";
|
37 | import {
|
38 | __decorateClass
|
39 | } from "./chunk.K2NRSETB.js";
|
40 |
|
41 |
|
42 | var SlRadioButton = class extends s {
|
43 | constructor() {
|
44 | super(...arguments);
|
45 | this.formSubmitController = new FormSubmitController(this, {
|
46 | value: (control) => control.checked ? control.value : void 0,
|
47 | defaultValue: (control) => control.defaultChecked,
|
48 | setValue: (control, checked) => control.checked = checked
|
49 | });
|
50 | this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix");
|
51 | this.hasFocus = false;
|
52 | this.disabled = false;
|
53 | this.checked = false;
|
54 | this.invalid = false;
|
55 | this.defaultChecked = false;
|
56 | this.size = "medium";
|
57 | this.pill = false;
|
58 | }
|
59 | connectedCallback() {
|
60 | super.connectedCallback();
|
61 | this.setAttribute("role", "radio");
|
62 | }
|
63 | click() {
|
64 | this.input.click();
|
65 | }
|
66 | focus(options) {
|
67 | this.input.focus(options);
|
68 | }
|
69 | blur() {
|
70 | this.input.blur();
|
71 | }
|
72 | reportValidity() {
|
73 | return this.hiddenInput.reportValidity();
|
74 | }
|
75 | setCustomValidity(message) {
|
76 | this.hiddenInput.setCustomValidity(message);
|
77 | }
|
78 | handleBlur() {
|
79 | this.hasFocus = false;
|
80 | emit(this, "sl-blur");
|
81 | }
|
82 | handleClick() {
|
83 | if (!this.disabled) {
|
84 | this.checked = true;
|
85 | }
|
86 | }
|
87 | handleFocus() {
|
88 | this.hasFocus = true;
|
89 | emit(this, "sl-focus");
|
90 | }
|
91 | handleCheckedChange() {
|
92 | this.setAttribute("aria-checked", this.checked ? "true" : "false");
|
93 | if (this.hasUpdated) {
|
94 | emit(this, "sl-change");
|
95 | }
|
96 | }
|
97 | handleDisabledChange() {
|
98 | this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
|
99 | if (this.hasUpdated) {
|
100 | this.input.disabled = this.disabled;
|
101 | this.invalid = !this.input.checkValidity();
|
102 | }
|
103 | }
|
104 | render() {
|
105 | return n2`
|
106 | <div part="base">
|
107 | <input class="hidden-input" type="radio" aria-hidden="true" tabindex="-1" />
|
108 | <button
|
109 | part="button"
|
110 | class=${o({
|
111 | button: true,
|
112 | "button--default": true,
|
113 | "button--small": this.size === "small",
|
114 | "button--medium": this.size === "medium",
|
115 | "button--large": this.size === "large",
|
116 | "button--checked": this.checked,
|
117 | "button--disabled": this.disabled,
|
118 | "button--focused": this.hasFocus,
|
119 | "button--outline": true,
|
120 | "button--pill": this.pill,
|
121 | "button--has-label": this.hasSlotController.test("[default]"),
|
122 | "button--has-prefix": this.hasSlotController.test("prefix"),
|
123 | "button--has-suffix": this.hasSlotController.test("suffix")
|
124 | })}
|
125 | ?disabled=${this.disabled}
|
126 | type="button"
|
127 | name=${l(this.name)}
|
128 | value=${l(this.value)}
|
129 | @blur=${this.handleBlur}
|
130 | @focus=${this.handleFocus}
|
131 | @click=${this.handleClick}
|
132 | >
|
133 | <span part="prefix" class="button__prefix">
|
134 | <slot name="prefix"></slot>
|
135 | </span>
|
136 | <span part="label" class="button__label">
|
137 | <slot></slot>
|
138 | </span>
|
139 | <span part="suffix" class="button__suffix">
|
140 | <slot name="suffix"></slot>
|
141 | </span>
|
142 | </button>
|
143 | </div>
|
144 | `;
|
145 | }
|
146 | };
|
147 | SlRadioButton.styles = radio_button_styles_default;
|
148 | __decorateClass([
|
149 | i(".button")
|
150 | ], SlRadioButton.prototype, "input", 2);
|
151 | __decorateClass([
|
152 | i(".hidden-input")
|
153 | ], SlRadioButton.prototype, "hiddenInput", 2);
|
154 | __decorateClass([
|
155 | t()
|
156 | ], SlRadioButton.prototype, "hasFocus", 2);
|
157 | __decorateClass([
|
158 | e()
|
159 | ], SlRadioButton.prototype, "name", 2);
|
160 | __decorateClass([
|
161 | e()
|
162 | ], SlRadioButton.prototype, "value", 2);
|
163 | __decorateClass([
|
164 | e({ type: Boolean, reflect: true })
|
165 | ], SlRadioButton.prototype, "disabled", 2);
|
166 | __decorateClass([
|
167 | e({ type: Boolean, reflect: true })
|
168 | ], SlRadioButton.prototype, "checked", 2);
|
169 | __decorateClass([
|
170 | e({ type: Boolean, reflect: true })
|
171 | ], SlRadioButton.prototype, "invalid", 2);
|
172 | __decorateClass([
|
173 | defaultValue("checked")
|
174 | ], SlRadioButton.prototype, "defaultChecked", 2);
|
175 | __decorateClass([
|
176 | watch("checked")
|
177 | ], SlRadioButton.prototype, "handleCheckedChange", 1);
|
178 | __decorateClass([
|
179 | watch("disabled", { waitUntilFirstUpdate: true })
|
180 | ], SlRadioButton.prototype, "handleDisabledChange", 1);
|
181 | __decorateClass([
|
182 | e({ reflect: true })
|
183 | ], SlRadioButton.prototype, "size", 2);
|
184 | __decorateClass([
|
185 | e({ type: Boolean, reflect: true })
|
186 | ], SlRadioButton.prototype, "pill", 2);
|
187 | SlRadioButton = __decorateClass([
|
188 | n("sl-radio-button")
|
189 | ], SlRadioButton);
|
190 |
|
191 | export {
|
192 | SlRadioButton
|
193 | };
|