1 | import {
|
2 | input_styles_default
|
3 | } from "./chunk.SAY7IFEN.js";
|
4 | import {
|
5 | l as l2
|
6 | } from "./chunk.R5Z37LZL.js";
|
7 | import {
|
8 | defaultValue
|
9 | } from "./chunk.XM2NSF2I.js";
|
10 | import {
|
11 | FormSubmitController
|
12 | } from "./chunk.67FQMIF5.js";
|
13 | import {
|
14 | LocalizeController
|
15 | } from "./chunk.6WMYSCDC.js";
|
16 | import {
|
17 | HasSlotController
|
18 | } from "./chunk.3IYPB6RR.js";
|
19 | import {
|
20 | o
|
21 | } from "./chunk.IAELDRGJ.js";
|
22 | import {
|
23 | l
|
24 | } from "./chunk.7MO772SN.js";
|
25 | import {
|
26 | watch
|
27 | } from "./chunk.W6MGCO4G.js";
|
28 | import {
|
29 | emit
|
30 | } from "./chunk.UY5AQKHP.js";
|
31 | import {
|
32 | e,
|
33 | i,
|
34 | n,
|
35 | t
|
36 | } from "./chunk.VKNZYXSO.js";
|
37 | import {
|
38 | $,
|
39 | s
|
40 | } from "./chunk.WWAD5WF4.js";
|
41 | import {
|
42 | __decorateClass
|
43 | } from "./chunk.K2NRSETB.js";
|
44 |
|
45 |
|
46 | var SlInput = class extends s {
|
47 | constructor() {
|
48 | super(...arguments);
|
49 | this.formSubmitController = new FormSubmitController(this);
|
50 | this.hasSlotController = new HasSlotController(this, "help-text", "label");
|
51 | this.localize = new LocalizeController(this);
|
52 | this.hasFocus = false;
|
53 | this.isPasswordVisible = false;
|
54 | this.type = "text";
|
55 | this.size = "medium";
|
56 | this.value = "";
|
57 | this.defaultValue = "";
|
58 | this.filled = false;
|
59 | this.pill = false;
|
60 | this.label = "";
|
61 | this.helpText = "";
|
62 | this.clearable = false;
|
63 | this.togglePassword = false;
|
64 | this.noSpinButtons = false;
|
65 | this.disabled = false;
|
66 | this.readonly = false;
|
67 | this.required = false;
|
68 | this.invalid = false;
|
69 | }
|
70 | get valueAsDate() {
|
71 | var _a, _b;
|
72 | return (_b = (_a = this.input) == null ? void 0 : _a.valueAsDate) != null ? _b : null;
|
73 | }
|
74 | set valueAsDate(newValue) {
|
75 | const input = document.createElement("input");
|
76 | input.type = "date";
|
77 | input.valueAsDate = newValue;
|
78 | this.value = input.value;
|
79 | }
|
80 | get valueAsNumber() {
|
81 | var _a, _b;
|
82 | return (_b = (_a = this.input) == null ? void 0 : _a.valueAsNumber) != null ? _b : parseFloat(this.value);
|
83 | }
|
84 | set valueAsNumber(newValue) {
|
85 | const input = document.createElement("input");
|
86 | input.type = "number";
|
87 | input.valueAsNumber = newValue;
|
88 | this.value = input.value;
|
89 | }
|
90 | firstUpdated() {
|
91 | this.invalid = !this.input.checkValidity();
|
92 | }
|
93 | focus(options) {
|
94 | this.input.focus(options);
|
95 | }
|
96 | blur() {
|
97 | this.input.blur();
|
98 | }
|
99 | select() {
|
100 | this.input.select();
|
101 | }
|
102 | setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
|
103 | this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
|
104 | }
|
105 | setRangeText(replacement, start, end, selectMode = "preserve") {
|
106 | this.input.setRangeText(replacement, start, end, selectMode);
|
107 | if (this.value !== this.input.value) {
|
108 | this.value = this.input.value;
|
109 | emit(this, "sl-input");
|
110 | emit(this, "sl-change");
|
111 | }
|
112 | }
|
113 | reportValidity() {
|
114 | return this.input.reportValidity();
|
115 | }
|
116 | setCustomValidity(message) {
|
117 | this.input.setCustomValidity(message);
|
118 | this.invalid = !this.input.checkValidity();
|
119 | }
|
120 | handleBlur() {
|
121 | this.hasFocus = false;
|
122 | emit(this, "sl-blur");
|
123 | }
|
124 | handleChange() {
|
125 | this.value = this.input.value;
|
126 | emit(this, "sl-change");
|
127 | }
|
128 | handleClearClick(event) {
|
129 | this.value = "";
|
130 | emit(this, "sl-clear");
|
131 | emit(this, "sl-input");
|
132 | emit(this, "sl-change");
|
133 | this.input.focus();
|
134 | event.stopPropagation();
|
135 | }
|
136 | handleDisabledChange() {
|
137 | this.input.disabled = this.disabled;
|
138 | this.invalid = !this.input.checkValidity();
|
139 | }
|
140 | handleFocus() {
|
141 | this.hasFocus = true;
|
142 | emit(this, "sl-focus");
|
143 | }
|
144 | handleInput() {
|
145 | this.value = this.input.value;
|
146 | emit(this, "sl-input");
|
147 | }
|
148 | handleInvalid() {
|
149 | this.invalid = true;
|
150 | }
|
151 | handleKeyDown(event) {
|
152 | const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
|
153 | if (event.key === "Enter" && !hasModifier) {
|
154 | setTimeout(() => {
|
155 | if (!event.defaultPrevented) {
|
156 | this.formSubmitController.submit();
|
157 | }
|
158 | });
|
159 | }
|
160 | }
|
161 | handlePasswordToggle() {
|
162 | this.isPasswordVisible = !this.isPasswordVisible;
|
163 | }
|
164 | handleValueChange() {
|
165 | this.invalid = !this.input.checkValidity();
|
166 | }
|
167 | render() {
|
168 | const hasLabelSlot = this.hasSlotController.test("label");
|
169 | const hasHelpTextSlot = this.hasSlotController.test("help-text");
|
170 | const hasLabel = this.label ? true : !!hasLabelSlot;
|
171 | const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
|
172 | const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
|
173 | return $`
|
174 | <div
|
175 | part="form-control"
|
176 | class=${o({
|
177 | "form-control": true,
|
178 | "form-control--small": this.size === "small",
|
179 | "form-control--medium": this.size === "medium",
|
180 | "form-control--large": this.size === "large",
|
181 | "form-control--has-label": hasLabel,
|
182 | "form-control--has-help-text": hasHelpText
|
183 | })}
|
184 | >
|
185 | <label
|
186 | part="form-control-label"
|
187 | class="form-control__label"
|
188 | for="input"
|
189 | aria-hidden=${hasLabel ? "false" : "true"}
|
190 | >
|
191 | <slot name="label">${this.label}</slot>
|
192 | </label>
|
193 |
|
194 | <div part="form-control-input" class="form-control-input">
|
195 | <div
|
196 | part="base"
|
197 | class=${o({
|
198 | input: true,
|
199 | "input--small": this.size === "small",
|
200 | "input--medium": this.size === "medium",
|
201 | "input--large": this.size === "large",
|
202 | "input--pill": this.pill,
|
203 | "input--standard": !this.filled,
|
204 | "input--filled": this.filled,
|
205 | "input--disabled": this.disabled,
|
206 | "input--focused": this.hasFocus,
|
207 | "input--empty": !this.value,
|
208 | "input--invalid": this.invalid,
|
209 | "input--no-spin-buttons": this.noSpinButtons,
|
210 | "input--is-firefox": navigator.userAgent.includes("Firefox")
|
211 | })}
|
212 | >
|
213 | <span part="prefix" class="input__prefix">
|
214 | <slot name="prefix"></slot>
|
215 | </span>
|
216 |
|
217 | <input
|
218 | part="input"
|
219 | id="input"
|
220 | class="input__control"
|
221 | type=${this.type === "password" && this.isPasswordVisible ? "text" : this.type}
|
222 | name=${l(this.name)}
|
223 | ?disabled=${this.disabled}
|
224 | ?readonly=${this.readonly}
|
225 | ?required=${this.required}
|
226 | placeholder=${l(this.placeholder)}
|
227 | minlength=${l(this.minlength)}
|
228 | maxlength=${l(this.maxlength)}
|
229 | min=${l(this.min)}
|
230 | max=${l(this.max)}
|
231 | step=${l(this.step)}
|
232 | .value=${l2(this.value)}
|
233 | autocapitalize=${l(this.type === "password" ? "off" : this.autocapitalize)}
|
234 | autocomplete=${l(this.type === "password" ? "off" : this.autocomplete)}
|
235 | autocorrect=${l(this.type === "password" ? "off" : this.autocorrect)}
|
236 | ?autofocus=${this.autofocus}
|
237 | spellcheck=${l(this.spellcheck)}
|
238 | pattern=${l(this.pattern)}
|
239 | enterkeyhint=${l(this.enterkeyhint)}
|
240 | inputmode=${l(this.inputmode)}
|
241 | aria-describedby="help-text"
|
242 | aria-invalid=${this.invalid ? "true" : "false"}
|
243 | @change=${this.handleChange}
|
244 | @input=${this.handleInput}
|
245 | @invalid=${this.handleInvalid}
|
246 | @keydown=${this.handleKeyDown}
|
247 | @focus=${this.handleFocus}
|
248 | @blur=${this.handleBlur}
|
249 | />
|
250 |
|
251 | ${hasClearIcon ? $`
|
252 | <button
|
253 | part="clear-button"
|
254 | class="input__clear"
|
255 | type="button"
|
256 | aria-label=${this.localize.term("clearEntry")}
|
257 | @click=${this.handleClearClick}
|
258 | tabindex="-1"
|
259 | >
|
260 | <slot name="clear-icon">
|
261 | <sl-icon name="x-circle-fill" library="system"></sl-icon>
|
262 | </slot>
|
263 | </button>
|
264 | ` : ""}
|
265 | ${this.togglePassword && !this.disabled ? $`
|
266 | <button
|
267 | part="password-toggle-button"
|
268 | class="input__password-toggle"
|
269 | type="button"
|
270 | aria-label=${this.localize.term(this.isPasswordVisible ? "hidePassword" : "showPassword")}
|
271 | @click=${this.handlePasswordToggle}
|
272 | tabindex="-1"
|
273 | >
|
274 | ${this.isPasswordVisible ? $`
|
275 | <slot name="show-password-icon">
|
276 | <sl-icon name="eye-slash" library="system"></sl-icon>
|
277 | </slot>
|
278 | ` : $`
|
279 | <slot name="hide-password-icon">
|
280 | <sl-icon name="eye" library="system"></sl-icon>
|
281 | </slot>
|
282 | `}
|
283 | </button>
|
284 | ` : ""}
|
285 |
|
286 | <span part="suffix" class="input__suffix">
|
287 | <slot name="suffix"></slot>
|
288 | </span>
|
289 | </div>
|
290 | </div>
|
291 |
|
292 | <div
|
293 | part="form-control-help-text"
|
294 | id="help-text"
|
295 | class="form-control__help-text"
|
296 | aria-hidden=${hasHelpText ? "false" : "true"}
|
297 | >
|
298 | <slot name="help-text">${this.helpText}</slot>
|
299 | </div>
|
300 | </div>
|
301 | `;
|
302 | }
|
303 | };
|
304 | SlInput.styles = input_styles_default;
|
305 | __decorateClass([
|
306 | i(".input__control")
|
307 | ], SlInput.prototype, "input", 2);
|
308 | __decorateClass([
|
309 | t()
|
310 | ], SlInput.prototype, "hasFocus", 2);
|
311 | __decorateClass([
|
312 | t()
|
313 | ], SlInput.prototype, "isPasswordVisible", 2);
|
314 | __decorateClass([
|
315 | e({ reflect: true })
|
316 | ], SlInput.prototype, "type", 2);
|
317 | __decorateClass([
|
318 | e({ reflect: true })
|
319 | ], SlInput.prototype, "size", 2);
|
320 | __decorateClass([
|
321 | e()
|
322 | ], SlInput.prototype, "name", 2);
|
323 | __decorateClass([
|
324 | e()
|
325 | ], SlInput.prototype, "value", 2);
|
326 | __decorateClass([
|
327 | defaultValue()
|
328 | ], SlInput.prototype, "defaultValue", 2);
|
329 | __decorateClass([
|
330 | e({ type: Boolean, reflect: true })
|
331 | ], SlInput.prototype, "filled", 2);
|
332 | __decorateClass([
|
333 | e({ type: Boolean, reflect: true })
|
334 | ], SlInput.prototype, "pill", 2);
|
335 | __decorateClass([
|
336 | e()
|
337 | ], SlInput.prototype, "label", 2);
|
338 | __decorateClass([
|
339 | e({ attribute: "help-text" })
|
340 | ], SlInput.prototype, "helpText", 2);
|
341 | __decorateClass([
|
342 | e({ type: Boolean })
|
343 | ], SlInput.prototype, "clearable", 2);
|
344 | __decorateClass([
|
345 | e({ attribute: "toggle-password", type: Boolean })
|
346 | ], SlInput.prototype, "togglePassword", 2);
|
347 | __decorateClass([
|
348 | e({ attribute: "no-spin-buttons", type: Boolean })
|
349 | ], SlInput.prototype, "noSpinButtons", 2);
|
350 | __decorateClass([
|
351 | e()
|
352 | ], SlInput.prototype, "placeholder", 2);
|
353 | __decorateClass([
|
354 | e({ type: Boolean, reflect: true })
|
355 | ], SlInput.prototype, "disabled", 2);
|
356 | __decorateClass([
|
357 | e({ type: Boolean, reflect: true })
|
358 | ], SlInput.prototype, "readonly", 2);
|
359 | __decorateClass([
|
360 | e({ type: Number })
|
361 | ], SlInput.prototype, "minlength", 2);
|
362 | __decorateClass([
|
363 | e({ type: Number })
|
364 | ], SlInput.prototype, "maxlength", 2);
|
365 | __decorateClass([
|
366 | e()
|
367 | ], SlInput.prototype, "min", 2);
|
368 | __decorateClass([
|
369 | e()
|
370 | ], SlInput.prototype, "max", 2);
|
371 | __decorateClass([
|
372 | e({ type: Number })
|
373 | ], SlInput.prototype, "step", 2);
|
374 | __decorateClass([
|
375 | e()
|
376 | ], SlInput.prototype, "pattern", 2);
|
377 | __decorateClass([
|
378 | e({ type: Boolean, reflect: true })
|
379 | ], SlInput.prototype, "required", 2);
|
380 | __decorateClass([
|
381 | e({ type: Boolean, reflect: true })
|
382 | ], SlInput.prototype, "invalid", 2);
|
383 | __decorateClass([
|
384 | e()
|
385 | ], SlInput.prototype, "autocapitalize", 2);
|
386 | __decorateClass([
|
387 | e()
|
388 | ], SlInput.prototype, "autocorrect", 2);
|
389 | __decorateClass([
|
390 | e()
|
391 | ], SlInput.prototype, "autocomplete", 2);
|
392 | __decorateClass([
|
393 | e({ type: Boolean })
|
394 | ], SlInput.prototype, "autofocus", 2);
|
395 | __decorateClass([
|
396 | e()
|
397 | ], SlInput.prototype, "enterkeyhint", 2);
|
398 | __decorateClass([
|
399 | e({ type: Boolean })
|
400 | ], SlInput.prototype, "spellcheck", 2);
|
401 | __decorateClass([
|
402 | e()
|
403 | ], SlInput.prototype, "inputmode", 2);
|
404 | __decorateClass([
|
405 | watch("disabled", { waitUntilFirstUpdate: true })
|
406 | ], SlInput.prototype, "handleDisabledChange", 1);
|
407 | __decorateClass([
|
408 | watch("value", { waitUntilFirstUpdate: true })
|
409 | ], SlInput.prototype, "handleValueChange", 1);
|
410 | SlInput = __decorateClass([
|
411 | n("sl-input")
|
412 | ], SlInput);
|
413 |
|
414 | export {
|
415 | SlInput
|
416 | };
|