1import { p as prop, i as if_block, f as set_style, d as bind_this, t as remove_input_defaults, k as each, b as set_class, u as index, g as spread_props, r as rest_props } from './i18n-CMo5lpzy.js'; 2import { R as push, aa as onMount, y as user_effect, Z as event, S as first_child, a7 as text, t as template_effect, a as append, x as set, w as get, T as pop, u as state, M as tick, aw as $window, X as sibling, W as from_html, aj as delegate, a0 as set_text, a8 as next, V as child, Y as reset, a5 as user_derived, at as to_array, v as proxy } from './index-BvBk1Iap.js'; 3import { G as Gradio } from './utils.svelte-CYLB_jIA.js'; 4import { a as action } from './actions-Cit_UA5S.js'; 5import { b as bind_value } from './input-C317uaXR.js'; 6import { t as tinycolor, E as Eyedropper } from './tinycolor-NLEY4io3.js'; 7import './ScrollFade.svelte_svelte_type_style_lang-Xm-PLg9E.js'; 8import { B as BlockTitle } from './BlockTitle-7XQ-8ENg.js'; 9import { B as Block } from './Block-Bx3BikCN.js'; 10import { S as Static } from './index-Lz7fsHFt.js'; 11import './StreamingBar.svelte_svelte_type_style_lang-CdFIGsJa.js'; 12export { default as BaseExample } from './Example-CCEyD4GV.js'; 13import './clone-DaB-S2nH.js'; 14import './snippet-Bl5YVoCg.js'; 15import './Info-BrkJhX6_.js'; 16import './html-CdUEtR5E.js'; 17import './Clear-Dgs5UhTO.js'; 18import './index-C7e-J7CF.js'; 19 20function click_outside(node, callback) { 21 const handle_click = (event) => { 22 if (node && !node.contains(event.target) && !event.defaultPrevented) { 23 callback(event); 24 } 25 }; 26 document.addEventListener("mousedown", handle_click, true); 27 return { 28 destroy() { 29 document.removeEventListener("mousedown", handle_click, true); 30 } 31 }; 32} 33 34function hsva_to_rgba(hsva) { 35 const saturation = hsva.s; 36 const value = hsva.v; 37 let chroma = saturation * value; 38 const hue_by_60 = hsva.h / 60; 39 let x = chroma * (1 - Math.abs(hue_by_60 % 2 - 1)); 40 const m = value - chroma; 41 chroma = chroma + m; 42 x = x + m; 43 const index = Math.floor(hue_by_60) % 6; 44 const red = [chroma, x, m, m, x, chroma][index]; 45 const green = [x, chroma, chroma, x, m, m][index]; 46 const blue = [m, m, x, chroma, chroma, x][index]; 47 return tinycolor({ 48 r: red * 255, 49 g: green * 255, 50 b: blue * 255, 51 a: hsva.a 52 }).toHexString(); 53} 54function normalize_color(color) { 55 const tc = tinycolor(color); 56 if (tc.isValid()) { 57 return tc.toHexString(); 58 } 59 return color; 60} 61function format_color(color, mode) { 62 if (mode === "hex") { 63 return tinycolor(color).toHexString(); 64 } else if (mode === "rgb") { 65 return tinycolor(color).toRgbString(); 66 } 67 return tinycolor(color).toHslString(); 68} 69 70var root_4 = from_html(`<button> </button>`); 71var root_2 = from_html(`<div class="color-picker svelte-nbn1m9"><div class="color-gradient svelte-nbn1m9"><div class="marker svelte-nbn1m9"></div></div> <div class="hue-slider svelte-nbn1m9"><div class="marker svelte-nbn1m9"></div></div> <div class="input svelte-nbn1m9"><button class="swatch svelte-nbn1m9"></button> <div><div class="input-wrap svelte-nbn1m9"><input type="text" class="svelte-nbn1m9"/> <button class="eyedropper svelte-nbn1m9"><!></button></div> <div class="buttons svelte-nbn1m9"></div></div></div></div>`); 72var root = from_html(`<!> <button class="dialog-button svelte-nbn1m9"></button> <!>`, 1); 73 74function Colorpicker($$anchor, $$props) { 75 push($$props, true); 76 77 let value = prop($$props, 'value', 15), 78 on_input = prop($$props, 'on_input', 3, () => {}), 79 on_submit = prop($$props, 'on_submit', 3, () => {}), 80 on_blur = prop($$props, 'on_blur', 3, () => {}), 81 on_focus = prop($$props, 'on_focus', 3, () => {}); 82 83 let dialog_open = state(false); 84 let current_mode = state("hex"); 85 let eyedropper_supported = false; 86 let sl_wrap; 87 let hue_wrap; 88 let sl_marker_pos = [0, 0]; 89 let sl_rect = null; 90 let sl_moving = false; 91 let sl = [0, 0]; 92 let hue = 0; 93 let hue_marker_pos = 0; 94 let hue_rect = null; 95 let hue_moving = false; 96 97 function handle_hue_down(event) { 98 hue_rect = event.currentTarget.getBoundingClientRect(); 99 hue_moving = true; 100 update_hue_from_mouse(event.clientX); 101 } 102 103 function update_hue_from_mouse(x) { 104 if (!hue_rect) return; 105 106 const _x = Math.max(0, Math.min(x - hue_rect.left, hue_rect.width)); // Get the x-coordinate relative to the box 107 108 hue_marker_pos = _x; 109 110 const _hue = _x / hue_rect.width * 360; // Scale the x position to a hue value (0-360) 111 112 hue = _hue; 113 value(hsva_to_rgba({ h: _hue, s: sl[0], v: sl[1], a: 1 })); 114 on_input()(); 115 } 116 117 function update_color_from_mouse(x, y) { 118 if (!sl_rect) return; 119 120 const _x = Math.max(0, Math.min(x - sl_rect.left, sl_rect.width)); 121 const _y = Math.max(0, Math.min(y - sl_rect.top, sl_rect.height)); 122 123 sl_marker_pos = [_x, _y]; 124 125 const _hsva = { 126 h: hue * 1, 127 s: _x / sl_rect.width, 128 v: 1 - _y / sl_rect.height, 129 a: 1 130 }; 131 132 sl = [_hsva.s, _hsva.v]; 133 value(hsva_to_rgba(_hsva)); 134 on_input()(); 135 } 136 137 function handle_sl_down(event) { 138 sl_moving = true; 139 sl_rect = event.currentTarget.getBoundingClientRect(); 140 update_color_from_mouse(event.clientX, event.clientY); 141 } 142 143 function handle_move(event) { 144 if (sl_moving) update_color_from_mouse(event.clientX, event.clientY); 145 if (hue_moving) update_hue_from_mouse(event.clientX); 146 } 147 148 function handle_end() { 149 sl_moving = false;
150 hue_moving = false; 151 } 152 153 async function update_mouse_from_color(color) { 154 if (sl_moving || hue_moving) return; 155 156 await tick(); 157 158 if (!color) return; 159 160 if (!sl_rect && sl_wrap) { 161 sl_rect = sl_wrap.getBoundingClientRect(); 162 } 163 164 if (!hue_rect && hue_wrap) { 165 hue_rect = hue_wrap.getBoundingClientRect(); 166 } 167 168 // Exit if we still don't have valid rectangles 169 if (!sl_rect || !hue_rect) return; 170 171 const hsva = tinycolor(color).toHsv(); 172 const _x = hsva.s * sl_rect.width; 173 const _y = (1 - hsva.v) * sl_rect.height; 174 175 sl_marker_pos = [_x, _y]; 176 sl = [hsva.s, hsva.v]; 177 hue = hsva.h; 178 hue_marker_pos = hsva.h / 360 * hue_rect.width; 179 } 180 181 function request_eyedropper() { 182 // @ts-ignore 183 const eyeDropper = new EyeDropper(); 184 185 eyeDropper.open().then((result) => { 186 value(result.sRGBHex); 187 }); 188 189 on_input()(); 190 } 191 192 const modes = [["Hex", "hex"], ["RGB", "rgb"], ["HSL", "hsl"]]; 193 let color_string = user_derived(() => format_color(value(), get(current_mode))); 194 195 onMount(async () => { 196 // @ts-ignore 197 eyedropper_supported = window !== undefined && !!window.EyeDropper; 198 }); 199 200 function handle_click_outside() { 201 set(dialog_open, false); 202 } 203 204 user_effect(() => { 205 update_mouse_from_color(value()); 206 }); 207 208 var fragment = root(); 209 210 event('mousemove', $window, handle_move); 211 event('mouseup', $window, handle_end); 212 213 var node = first_child(fragment); 214 215 BlockTitle(node, { 216 get show_label() { 217 return $$props.show_label; 218 }, 219 220 get info() { 221 return $$props.info; 222 }, 223 224 children: ($$anchor, $$slotProps) => { 225 next(); 226 227 var text$1 = text(); 228 229 template_effect(() => set_text(text$1, $$props.label)); 230 append($$anchor, text$1); 231 }, 232 $$slots: { default: true } 233 }); 234 235 var button = sibling(node, 2); 236 237 button.__click = () => { 238 update_mouse_from_color(value()); 239 set(dialog_open, !get(dialog_open)); 240 }; 241 242 let styles; 243 var node_1 = sibling(button, 2); 244 245 { 246 var consequent_1 = ($$anchor) => { 247 var div = root_2(); 248 var div_1 = child(div); 249 250 div_1.__mousedown = handle_sl_down; 251 252 var div_2 = child(div_1); 253 let styles_1; 254 255 reset(div_1); 256 bind_this(div_1, ($$value) => sl_wrap = $$value, () => sl_wrap); 257 258 var div_3 = sibling(div_1, 2); 259 260 div_3.__mousedown = handle_hue_down; 261 262 var div_4 = child(div_3); 263 let styles_2; 264 265 reset(div_3); 266 bind_this(div_3, ($$value) => hue_wrap = $$value, () => hue_wrap); 267 268 var div_5 = sibling(div_3, 2); 269 var button_1 = child(div_5); 270 let styles_3; 271 var div_6 = sibling(button_1, 2); 272 var div_7 = child(div_6); 273 var input = child(div_7); 274 275 remove_input_defaults(input); 276 277 input.__change = (e) => { 278 value(normalize_color(e.currentTarget.value)); 279 }; 280 281 input.__keydown = (e) => { 282 if (e.key === "Enter") { 283 on_submit()(); 284 } 285 }; 286 287 var button_2 = sibling(input, 2); 288 289 button_2.__click = request_eyedropper; 290 291 var node_2 = child(button_2); 292 293 { 294 var consequent = ($$anchor) => { 295 Eyedropper($$anchor); 296 }; 297 298 if_block(node_2, ($$render) => { 299 if (eyedropper_supported) $$render(consequent); 300 }); 301 } 302 303 reset(button_2); 304 reset(div_7); 305 306 var div_8 = sibling(div_7, 2); 307 308 each(div_8, 21, () => modes, index, ($$anchor, $$item, $$index, $$array) => { 309 var $$array_1 = user_derived(() => to_array(get($$item), 2)); 310 let label = () => get($$array_1)[0]; 311 let value = () => get($$array_1)[1]; 312 var button_3 = root_4(); 313 let classes; 314 315 button_3.__click = () => { 316 set(current_mode, value(), true); 317 }; 318 319 var text_1 = child(button_3, true); 320 321 reset(button_3); 322 323 template_effect(() => { 324 classes = set_class(button_3, 1, 'button svelte-nbn1m9', null, classes, { active: get(current_mode) === value() }); 325 set_text(text_1, label()); 326 }); 327 328 append($$anchor, button_3); 329 }); 330 331 reset(div_8); 332 reset(div_6); 333 reset(div_5); 334 reset(div); 335 action(div, ($$node, $$action_arg) => click_outside?.($$node, $$action_arg), () => handle_click_outside); 336 337 template_effect(() => { 338 set_style(div_1, `--hue:${hue ?? ''}`); 339 340 styles_1 = set_style(div_2, '', styles_1, { 341 transform: `translate(${sl_marker_pos[0] ?? ''}px,${sl_marker_pos[1] ?? ''}px)`, 342 background: value() 343 }); 344 345 styles_2 = set_style(div_4, '', styles_2, { 346 background: "hsl(" + hue + ", 100%, 50%)", 347 transform: `translateX(${hue_marker_pos ?? ''}px)` 348 }); 349 350 styles_3 = set_style(button_1, '', styles_3, { background: value() }); 351 }); 352 353 bind_value(input, () => get(color_string), ($$value) => set(color_string, $$value)); 354 append($$anchor, div); 355 }; 356 357 if_block(node_1, ($$render) => { 358 if (get(dialog_open)) $$render(consequent_1); 359 }); 360 } 361 362 template_effect(() => { 363 button.disabled = $$props.disabled; 364 styles = set_style(button, '', styles, { background: value() }); 365 }); 366 367 event('focus', button, function (...$$args) { 368 on_focus()?.apply(this, $$args); 369 }); 370 371 event('blur', button, function (...$$args) { 372 on_blur()?.apply(this, $$args); 373 }); 374 375 append($$anchor, fragment); 376 pop(); 377} 378 379delegate(['click', 'mousedown', 'change', 'keydown']); 380 381var root_1 = from_html(`<!> <!>`, 1); 382 383function Index($$anchor, $$props) { 384 push($$props, true); 385 386 let props = rest_props($$props, ['$$slots', '$$events', '$$legacy']); 387 const gradio = new Gradio(props, { value: "#000000" }); 388 let old_value = state(proxy(gradio.props.value)); 389 let label = user_derived(() => gradio.shared.label || gradio.i18n("color_picker.color_picker")); 390 391 user_effect(() => { 392 if (get(old_value) !== gradio.props.value) { 393 set(old_value, gradio.props.value, true); 394 gradio.dispatch("change"); 395 } 396 }); 397 398 Block($$anchor, { 399 get visible() { 400 return gradio.shared.visible; 401 }, 402 403 get elem_id() { 404 return gradio.shared.elem_id; 405 }, 406 407 get elem_classes() { 408 return gradio.shared.elem_classes; 409 }, 410 411 get container() { 412 return gradio.shared.container; 413 }, 414 415 get scale() { 416 return gradio.shared.scale; 417 }, 418 419 get min_width() { 420 return gradio.shared.min_width; 421 }, 422 423 children: ($$anchor, $$slotProps) => { 424 var fragment_1 = root_1(); 425 var node = first_child(fragment_1); 426 427 Static(node, spread_props( 428 { 429 get autoscroll() { 430 return gradio.shared.autoscroll; 431 }, 432 433 get i18n() { 434 return gradio.i18n; 435 } 436 }, 437 () => gradio.shared.loading_status, 438 { 439 on_clear_status: () => gradio.dispatch("clear_status", gradio.shared.loading_status) 440 } 441 )); 442
443 var node_1 = sibling(node, 2); 444 445 { 446 let $0 = user_derived(() => !gradio.shared.interactive); 447 448 Colorpicker(node_1, { 449 get label() { 450 return get(label); 451 }, 452 453 get info() { 454 return gradio.props.info; 455 }, 456 457 get show_label() { 458 return gradio.shared.show_label; 459 }, 460 461 get disabled() { 462 return get($0); 463 }, 464 on_input: () => gradio.dispatch("input"), 465 on_submit: () => gradio.dispatch("submit"), 466 on_blur: () => gradio.dispatch("blur"), 467 on_focus: () => gradio.dispatch("focus"), 468 get value() { 469 return gradio.props.value; 470 }, 471 472 set value($$value) { 473 gradio.props.value = $$value; 474 } 475 }); 476 } 477 478 append($$anchor, fragment_1); 479 }, 480 $$slots: { default: true } 481 }); 482 483 pop(); 484} 485 486export { Colorpicker as BaseColorPicker, Index as default }; 487//# sourceMappingURL=Index-Dt4t8F3U.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.