UNPKG

5.01 kBJavaScriptView Raw
1import {
2 radio_button_styles_default
3} from "./chunk.2HI5ZYWQ.js";
4import {
5 defaultValue
6} from "./chunk.XM2NSF2I.js";
7import {
8 FormSubmitController
9} from "./chunk.67FQMIF5.js";
10import {
11 n as n2
12} from "./chunk.6G3UULFW.js";
13import {
14 HasSlotController
15} from "./chunk.3IYPB6RR.js";
16import {
17 o
18} from "./chunk.IAELDRGJ.js";
19import {
20 l
21} from "./chunk.7MO772SN.js";
22import {
23 watch
24} from "./chunk.W6MGCO4G.js";
25import {
26 emit
27} from "./chunk.UY5AQKHP.js";
28import {
29 e,
30 i,
31 n,
32 t
33} from "./chunk.VKNZYXSO.js";
34import {
35 s
36} from "./chunk.WWAD5WF4.js";
37import {
38 __decorateClass
39} from "./chunk.K2NRSETB.js";
40
41// src/components/radio-button/radio-button.ts
42var 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};
147SlRadioButton.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);
187SlRadioButton = __decorateClass([
188 n("sl-radio-button")
189], SlRadioButton);
190
191export {
192 SlRadioButton
193};