1import { p as prop, i as if_block, b as set_class, d as bind_this, a as set_attribute, f as set_style, t as remove_input_defaults } from './i18n-dpAHICcw.js'; 2import { R as push, y as user_effect, x as set, aj as user_pre_effect, w as get, S as first_child, t as template_effect, a as append, T as pop, u as state, N as tick, X as sibling, a5 as user_derived, W as from_html, ak as delegate, V as child, a0 as set_text, a6 as comment, a8 as next, Y as reset, al as remove_textarea_child, am as autofocus, A as effect, Z as event, a7 as text } from './index-CDZuCcOm.js'; 3import { a as action } from './actions-BTh6ZJJ8.js'; 4import { b as bind_value } from './input-UUW65DyE.js'; 5import { I as IconButton } from './ScrollFade.svelte_svelte_type_style_lang-DUvCSfRk.js'; 6import { B as BlockTitle } from './BlockTitle-Xgz-MKYS.js'; 7import './MarkdownCode.svelte_svelte_type_style_lang-GeNUGzep.js'; 8import { C as Check } from './Check-4kogBHUX.js'; 9import { C as Copy } from './Copy-C8W4pNlO.js'; 10import { S as Send } from './Send-DHvsoBjG.js'; 11import { S as Square } from './Square-Bg2evxzG.js'; 12import { I as IconButtonWrapper } from './IconButtonWrapper-KjCt2Pl8.js'; 13 14var root_5 = from_html(`<div class="validation-error svelte-1hguek3"> </div>`); 15var root_4 = from_html(` <!>`, 1); 16var root_7 = from_html(`<input data-testid="textbox" type="text"/>`); 17var root_9 = from_html(`<input data-testid="password" type="password" autocomplete=""/>`); 18var root_11 = from_html(`<input data-testid="textbox" type="email" autocomplete="email"/>`); 19var root_12 = from_html(`<textarea data-testid="textbox"></textarea>`); 20var root_13 = from_html(`<button data-testid="submit-button"><!></button>`); 21var root_16 = from_html(`<button data-testid="stop-button"><!></button>`); 22var root = from_html(`<label><!> <!> <div class="input-container svelte-1hguek3"><!> <!> <!></div></label>`); 23 24function Textbox($$anchor, $$props) { 25 push($$props, true); 26 27 let value = prop($$props, 'value', 15, ""), 28 value_is_output = prop($$props, 'value_is_output', 15, false), 29 lines = prop($$props, 'lines', 3, 1), 30 placeholder = prop($$props, 'placeholder', 3, ""), 31 info = prop($$props, 'info', 3, undefined), 32 disabled = prop($$props, 'disabled', 3, false), 33 show_label = prop($$props, 'show_label', 3, true), 34 container = prop($$props, 'container', 3, true), 35 max_lines = prop($$props, 'max_lines', 3, undefined), 36 type = prop($$props, 'type', 3, "text"), 37 buttons = prop($$props, 'buttons', 3, null), 38 oncustombuttonclick = prop($$props, 'oncustombuttonclick', 3, null), 39 submit_btn = prop($$props, 'submit_btn', 3, null), 40 stop_btn = prop($$props, 'stop_btn', 3, null), 41 rtl = prop($$props, 'rtl', 3, false), 42 autofocus$1 = prop($$props, 'autofocus', 3, false), 43 text_align = prop($$props, 'text_align', 3, undefined), 44 autoscroll = prop($$props, 'autoscroll', 3, true), 45 max_length = prop($$props, 'max_length', 3, undefined), 46 html_attributes = prop($$props, 'html_attributes', 3, null), 47 validation_error = prop($$props, 'validation_error', 3, undefined); 48 49 // svelte-ignore non_reactive_update 50 let el; 51 52 let copied = state(false); 53 let timer; 54 let can_scroll = state(false); 55 let previous_scroll_top = state(0); 56 let user_has_scrolled_up = state(false); 57 let _max_lines = state(1); 58 59 // svelte-ignore state_referenced_locally 60 const show_textbox_border = !submit_btn(); 61 62 user_effect(() => { 63 if (max_lines() === undefined || max_lines() === null) { 64 if (type() === "text") { 65 set(_max_lines, Math.max(lines(), 20), true); 66 } else { 67 set(_max_lines, 1); 68 } 69 } else { 70 set(_max_lines, Math.max(max_lines(), lines()), true); 71 } 72 }); 73 74 user_effect(() => { 75 value(); 76 validation_error(); 77 78 if (el && lines() !== get(_max_lines) && get(_max_lines) > 1) { 79 resize({ target: el }); 80 } 81 }); 82 83 user_effect(() => { 84 if (value() === null) value(""); 85 }); 86 87 user_pre_effect(() => { 88 if (!get(user_has_scrolled_up) && el && el.offsetHeight + el.scrollTop > el.scrollHeight - 100) { 89 set(can_scroll, true); 90 } 91 }); 92 93 const scroll = () => { 94 if (get(can_scroll) && autoscroll() && !get(user_has_scrolled_up)) { 95 el.scrollTo(0, el.scrollHeight); 96 } 97 }; 98 99 async function handle_change() { 100 await tick(); 101 $$props.onchange?.(value()); 102 } 103 104 user_effect(() => { 105 if (autofocus$1() && el) { 106 el.focus(); 107 } 108 109 if (get(can_scroll) && autoscroll()) { 110 scroll(); 111 } 112 113 value_is_output(false); 114 }); 115 116 user_effect(() => { 117 value(); 118 handle_change(); 119 }); 120 121 async function handle_copy() { 122 if ("clipboard" in navigator) { 123 try { 124 await navigator.clipboard.writeText(value()); 125 $$props.oncopy?.({ value: value() }); 126 } catch(e) { 127 console.error("COPYING CLIPBOARD FAILED", e); 128 } 129 130 copy_feedback(); 131 } 132 } 133 134 function copy_feedback() { 135 set(copied, true); 136 137 if (timer) clearTimeout(timer); 138 139 timer = setTimeout( 140 () => { 141 set(copied, false); 142 }, 143 1000 144 ); 145 } 146 147 function handle_select(event) { 148 const target = event.target; 149 const text = target.value; 150 const index = [target.selectionStart, target.selectionEnd]; 151 152 $$props.onselect?.({ value: text.substring(...index), index }); 153 } 154 155 async function handle_keypress(e) { 156 if (e.key === "Enter" && e.shiftKey && lines() > 1) { 157 e.preventDefault(); 158 await tick(); 159 $$props.onsubmit?.(); 160 } else if (e.key === "Enter" && !e.shiftKey && lines() === 1 && get(_max_lines) >= 1) { 161 e.preventDefault(); 162 await tick(); 163 $$props.onsubmit?.(); 164 } 165 166 await tick(); 167 $$props.oninput?.(value()); 168 } 169 170 function handle_scroll(event) { 171 const target = event.target; 172 const current_scroll_top = target.scrollTop; 173 174 if (current_scroll_top < get(previous_scroll_top)) { 175 set(user_has_scrolled_up, true); 176 } 177 178 set(previous_scroll_top, current_scroll_top, true); 179 180 const max_scroll_top = target.scrollHeight - target.clientHeight; 181 const user_has_scrolled_to_bottom = current_scroll_top >= max_scroll_top; 182 183 if (user_has_scrolled_to_bottom) { 184 set(user_has_scrolled_up, false); 185 } 186 } 187 188 function handle_stop() { 189 $$props.onstop?.(); 190 } 191 192 function handle_submit() { 193 $$props.onsubmit?.(); 194 } 195 196 async function resize(event) { 197 await tick(); 198 199 if (lines() === get(_max_lines)) return; 200 201 const target = event.target; 202 const computed_styles = window.getComputedStyle(target);
203 const padding_top = parseFloat(computed_styles.paddingTop); 204 const padding_bottom = parseFloat(computed_styles.paddingBottom); 205 const line_height = parseFloat(computed_styles.lineHeight); 206 207 let max = get(_max_lines) === undefined 208 ? false 209 : padding_top + padding_bottom + line_height * get(_max_lines); 210 211 let min = padding_top + padding_bottom + lines() * line_height; 212 213 target.style.height = "1px"; 214 215 let scroll_height; 216 217 if (max && target.scrollHeight > max) { 218 scroll_height = max; 219 } else if (target.scrollHeight < min) { 220 scroll_height = min; 221 } else { 222 scroll_height = target.scrollHeight; 223 } 224 225 target.style.height = `${scroll_height}px`; 226 update_scrollbar_visibility(target); 227 } 228 229 function update_scrollbar_visibility(textarea) { 230 // Using "auto" scroll does not work, as the scrollbar is visible even 231 // when the content is about the same height as the textarea height. So 232 // here, we add the scrollbar if the content is longer than a threshold 233 // of 1 line height beyond the textarea height. 234 const content_height = textarea.scrollHeight; 235 236 const visible_height = textarea.clientHeight; 237 const line_height = parseFloat(window.getComputedStyle(textarea).lineHeight); 238 239 if (content_height > visible_height + line_height) { 240 textarea.style.overflowY = "scroll"; 241 } else { 242 textarea.style.overflowY = "hidden"; 243 } 244 } 245 246 function text_area_resize(_el, _value) { 247 if (lines() === get(_max_lines) || lines() === 1 && get(_max_lines) === 1) return; 248 249 _el.addEventListener("input", resize); 250 251 if (_value.trim()) { 252 _el.style.overflowY = "scroll"; 253 resize({ target: _el }); 254 } 255 256 return { destroy: () => _el.removeEventListener("input", resize) }; 257 } 258 259 var label_1 = root(); 260 let classes; 261 var node = child(label_1); 262 263 { 264 var consequent_1 = ($$anchor) => { 265 IconButtonWrapper($$anchor, { 266 get buttons() { 267 return buttons(); 268 }, 269 270 get on_custom_button_click() { 271 return oncustombuttonclick(); 272 }, 273 274 children: ($$anchor, $$slotProps) => { 275 var fragment_1 = comment();
276 var node_1 = first_child(fragment_1); 277 278 { 279 var consequent = ($$anchor) => { 280 { 281 let $0 = user_derived(() => get(copied) ? Check : Copy); 282 let $1 = user_derived(() => get(copied) ? "Copied" : "Copy"); 283 284 IconButton($$anchor, { 285 get Icon() { 286 return get($0); 287 }, 288 onclick: handle_copy, 289 get label() { 290 return get($1); 291 } 292 }); 293 } 294 }; 295 296 if_block(node_1, ($$render) => { 297 if (buttons().some((btn) => typeof btn === "string" && btn === "copy")) $$render(consequent); 298 }); 299 } 300 301 append($$anchor, fragment_1); 302 }, 303 $$slots: { default: true } 304 }); 305 }; 306 307 if_block(node, ($$render) => { 308 if (show_label() && buttons() && buttons().length > 0) $$render(consequent_1); 309 }); 310 } 311 312 var node_2 = sibling(node, 2); 313 314 { 315 let $0 = user_derived(() => validation_error() ? true : show_label()); 316 317 BlockTitle(node_2, { 318 get show_label() { 319 return get($0); 320 }, 321 322 get info() { 323 return info(); 324 }, 325 326 children: ($$anchor, $$slotProps) => { 327 next(); 328 329 var fragment_3 = root_4(); 330 var text_1 = first_child(fragment_3); 331 var node_3 = sibling(text_1); 332 333 { 334 var consequent_2 = ($$anchor) => { 335 var div = root_5(); 336 var text_2 = child(div, true); 337 338 reset(div); 339 template_effect(() => set_text(text_2, validation_error())); 340 append($$anchor, div); 341 }; 342 343 if_block(node_3, ($$render) => { 344 if (validation_error()) $$render(consequent_2); 345 }); 346 } 347 348 template_effect(() => set_text(text_1, `${$$props.label ?? ''} `)); 349 append($$anchor, fragment_3); 350 }, 351 $$slots: { default: true } 352 }); 353 } 354 355 var div_1 = sibling(node_2, 2); 356 var node_4 = child(div_1); 357 358 { 359 var consequent_6 = ($$anchor) => { 360 var fragment_4 = comment(); 361 var node_5 = first_child(fragment_4); 362 363 { 364 var consequent_3 = ($$anchor) => { 365 var input = root_7(); 366 367 remove_input_defaults(input); 368 369 let classes_1; 370 371 autofocus(input, autofocus$1()); 372 bind_this(input, ($$value) => el = $$value, () => el); 373 374 template_effect(() => { 375 classes_1 = set_class(input, 1, 'scroll-hide svelte-1hguek3', null, classes_1, { 'validation-error': validation_error() }); 376 set_attribute(input, 'dir', rtl() ? "rtl" : "ltr"); 377 set_attribute(input, 'placeholder', placeholder()); 378 input.disabled = disabled(); 379 set_attribute(input, 'maxlength', max_length()); 380 set_style(input, text_align() ? "text-align: " + text_align() : ""); 381 set_attribute(input, 'autocapitalize', html_attributes()?.autocapitalize); 382 set_attribute(input, 'autocorrect', html_attributes()?.autocorrect); 383 set_attribute(input, 'spellcheck', html_attributes()?.spellcheck); 384 set_attribute(input, 'autocomplete', html_attributes()?.autocomplete); 385 set_attribute(input, 'tabindex', html_attributes()?.tabindex); 386 set_attribute(input, 'enterkeyhint', html_attributes()?.enterkeyhint); 387 set_attribute(input, 'lang', html_attributes()?.lang); 388 input.dir = input.dir; 389 }); 390 391 event('keypress', input, handle_keypress); 392 event('blur', input, () => $$props.onblur?.()); 393 event('select', input, handle_select); 394 event('focus', input, () => $$props.onfocus?.()); 395 bind_value(input, value); 396 append($$anchor, input); 397 }; 398 399 var alternate_1 = ($$anchor) => { 400 var fragment_5 = comment(); 401 var node_6 = first_child(fragment_5); 402 403 { 404 var consequent_4 = ($$anchor) => { 405 var input_1 = root_9(); 406 407 remove_input_defaults(input_1); 408 409 let classes_2; 410 411 autofocus(input_1, autofocus$1()); 412 bind_this(input_1, ($$value) => el = $$value, () => el); 413 414 template_effect(() => { 415 classes_2 = set_class(input_1, 1, 'scroll-hide svelte-1hguek3', null, classes_2, { 'validation-error': validation_error() }); 416 set_attribute(input_1, 'placeholder', placeholder()); 417 input_1.disabled = disabled(); 418 set_attribute(input_1, 'maxlength', max_length()); 419 set_attribute(input_1, 'autocapitalize', html_attributes()?.autocapitalize); 420 set_attribute(input_1, 'autocorrect', html_attributes()?.autocorrect); 421 set_attribute(input_1, 'spellcheck', html_attributes()?.spellcheck); 422 set_attribute(input_1, 'tabindex', html_attributes()?.tabindex); 423 set_attribute(input_1, 'enterkeyhint', html_attributes()?.enterkeyhint); 424 set_attribute(input_1, 'lang', html_attributes()?.lang); 425 }); 426 427 event('keypress', input_1, handle_keypress); 428 event('blur', input_1, () => $$props.onblur?.()); 429 event('select', input_1, handle_select); 430 event('focus', input_1, () => $$props.onfocus?.()); 431 bind_value(input_1, value); 432 append($$anchor, input_1); 433 }; 434 435 var alternate = ($$anchor) => { 436 var fragment_6 = comment(); 437 var node_7 = first_child(fragment_6); 438 439 { 440 var consequent_5 = ($$anchor) => { 441 var input_2 = root_11(); 442 443 remove_input_defaults(input_2); 444
445 let classes_3; 446 447 autofocus(input_2, autofocus$1()); 448 bind_this(input_2, ($$value) => el = $$value, () => el); 449 450 template_effect(() => { 451 classes_3 = set_class(input_2, 1, 'scroll-hide svelte-1hguek3', null, classes_3, { 'validation-error': validation_error() }); 452 set_attribute(input_2, 'placeholder', placeholder()); 453 input_2.disabled = disabled(); 454 set_attribute(input_2, 'maxlength', max_length()); 455 set_attribute(input_2, 'autocapitalize', html_attributes()?.autocapitalize); 456 set_attribute(input_2, 'autocorrect', html_attributes()?.autocorrect); 457 set_attribute(input_2, 'spellcheck', html_attributes()?.spellcheck); 458 set_attribute(input_2, 'tabindex', html_attributes()?.tabindex); 459 set_attribute(input_2, 'enterkeyhint', html_attributes()?.enterkeyhint); 460 set_attribute(input_2, 'lang', html_attributes()?.lang); 461 }); 462 463 event('keypress', input_2, handle_keypress); 464 event('blur', input_2, () => $$props.onblur?.()); 465 event('select', input_2, handle_select); 466 event('focus', input_2, () => $$props.onfocus?.()); 467 bind_value(input_2, value); 468 append($$anchor, input_2); 469 }; 470 471 if_block( 472 node_7, 473 ($$render) => { 474 if (type() === "email") $$render(consequent_5); 475 }, 476 true 477 ); 478 } 479 480 append($$anchor, fragment_6); 481 }; 482 483 if_block( 484 node_6, 485 ($$render) => { 486 if (type() === "password") $$render(consequent_4); else $$render(alternate, false); 487 }, 488 true 489 ); 490 } 491 492 append($$anchor, fragment_5); 493 }; 494 495 if_block(node_5, ($$render) => { 496 if (type() === "text") $$render(consequent_3); else $$render(alternate_1, false); 497 }); 498 } 499 500 append($$anchor, fragment_4); 501 }; 502 503 var alternate_2 = ($$anchor) => { 504 var textarea_1 = root_12(); 505 506 remove_textarea_child(textarea_1); 507 autofocus(textarea_1, autofocus$1()); 508 509 let classes_4; 510 511 action(textarea_1, ($$node, $$action_arg) => text_area_resize?.($$node, $$action_arg), value); 512 effect(() => bind_value(textarea_1, value)); 513 bind_this(textarea_1, ($$value) => el = $$value, () => el); 514 515 template_effect(() => { 516 set_attribute(textarea_1, 'dir', rtl() ? "rtl" : "ltr"); 517 set_attribute(textarea_1, 'placeholder', placeholder()); 518 set_attribute(textarea_1, 'rows', lines()); 519 textarea_1.disabled = disabled(); 520 set_attribute(textarea_1, 'maxlength', max_length()); 521 set_style(textarea_1, text_align() ? "text-align: " + text_align() : ""); 522 set_attribute(textarea_1, 'autocapitalize', html_attributes()?.autocapitalize); 523 set_attribute(textarea_1, 'autocorrect', html_attributes()?.autocorrect); 524 set_attribute(textarea_1, 'spellcheck', html_attributes()?.spellcheck); 525 set_attribute(textarea_1, 'autocomplete', html_attributes()?.autocomplete); 526 set_attribute(textarea_1, 'tabindex', html_attributes()?.tabindex); 527 set_attribute(textarea_1, 'enterkeyhint', html_attributes()?.enterkeyhint); 528 set_attribute(textarea_1, 'lang', html_attributes()?.lang); 529 530 classes_4 = set_class(textarea_1, 1, 'svelte-1hguek3', null, classes_4, { 531 'no-label': !show_label() && (submit_btn() || stop_btn()), 532 'validation-error': validation_error() 533 }); 534 535 textarea_1.dir = textarea_1.dir; 536 }); 537 538 event('keypress', textarea_1, handle_keypress); 539 event('blur', textarea_1, () => $$props.onblur?.()); 540 event('select', textarea_1, handle_select); 541 event('focus', textarea_1, () => $$props.onfocus?.()); 542 event('scroll', textarea_1, handle_scroll); 543 append($$anchor, textarea_1); 544 }; 545 546 if_block(node_4, ($$render) => { 547 if (lines() === 1 && get(_max_lines) === 1) $$render(consequent_6); else $$render(alternate_2, false); 548 }); 549 } 550 551 var node_8 = sibling(node_4, 2); 552 553 { 554 var consequent_8 = ($$anchor) => { 555 var button = root_13(); 556 let classes_5; 557 558 button.__click = handle_submit; 559 560 var node_9 = child(button); 561 562 { 563 var consequent_7 = ($$anchor) => { 564 Send($$anchor); 565 }; 566 567 var alternate_3 = ($$anchor) => { 568 var text_3 = text(); 569 570 template_effect(() => set_text(text_3, submit_btn())); 571 append($$anchor, text_3); 572 }; 573 574 if_block(node_9, ($$render) => { 575 if (submit_btn() === true) $$render(consequent_7); else $$render(alternate_3, false); 576 }); 577 } 578 579 reset(button); 580 template_effect(() => classes_5 = set_class(button, 1, 'submit-button svelte-1hguek3', null, classes_5, { 'padded-button': submit_btn() !== true })); 581 append($$anchor, button); 582 }; 583 584 if_block(node_8, ($$render) => { 585 if (submit_btn()) $$render(consequent_8); 586 }); 587 } 588
589 var node_10 = sibling(node_8, 2); 590 591 { 592 var consequent_10 = ($$anchor) => { 593 var button_1 = root_16(); 594 let classes_6; 595 596 button_1.__click = handle_stop; 597 598 var node_11 = child(button_1); 599 600 { 601 var consequent_9 = ($$anchor) => { 602 Square($$anchor, { fill: 'none', stroke_width: 2.5 }); 603 }; 604 605 var alternate_4 = ($$anchor) => { 606 var text_4 = text(); 607 608 template_effect(() => set_text(text_4, stop_btn())); 609 append($$anchor, text_4); 610 }; 611 612 if_block(node_11, ($$render) => { 613 if (stop_btn() === true) $$render(consequent_9); else $$render(alternate_4, false); 614 }); 615 } 616 617 reset(button_1); 618 template_effect(() => classes_6 = set_class(button_1, 1, 'stop-button svelte-1hguek3', null, classes_6, { 'padded-button': stop_btn() !== true })); 619 append($$anchor, button_1); 620 }; 621 622 if_block(node_10, ($$render) => { 623 if (stop_btn()) $$render(consequent_10); 624 }); 625 } 626 627 reset(div_1); 628 reset(label_1); 629 template_effect(() => classes = set_class(label_1, 1, 'svelte-1hguek3', null, classes, { container: container(), show_textbox_border })); 630 append($$anchor, label_1); 631 pop(); 632} 633 634delegate(['click']); 635 636export { Textbox as T }; 637//# sourceMappingURL=Textbox-D1wbJ-Bi.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.