import { B as Block } from './Button-723db480.js';
import { B as BlockTitle } from './BlockTitle-082b4bca.js';
import { S as Static } from './Index-f62c49f9.js';
export { default as BaseExample } from './Example-510d9c7e.js';
import './index-b5b16a51.js';
import './svelte/svelte.js';
import './Info-a7917974.js';

const Colorpicker_svelte_svelte_type_style_lang = '';

/* home/runner/work/gradio/gradio/js/colorpicker/shared/Colorpicker.svelte generated by Svelte v4.2.2 */
const {
	SvelteComponent: SvelteComponent$1,
	append,
	attr,
	bubble,
	create_component: create_component$1,
	destroy_component: destroy_component$1,
	detach: detach$1,
	element,
	init: init$1,
	insert: insert$1,
	listen,
	mount_component: mount_component$1,
	run_all,
	safe_not_equal: safe_not_equal$1,
	set_data,
	set_input_value,
	space: space$1,
	text,
	transition_in: transition_in$1,
	transition_out: transition_out$1
} = window.__gradio__svelte__internal;
const { createEventDispatcher, afterUpdate } = window.__gradio__svelte__internal;
function create_default_slot$1(ctx) {
	let t;

	return {
		c() {
			t = text(/*label*/ ctx[1]);
		},
		m(target, anchor) {
			insert$1(target, t, anchor);
		},
		p(ctx, dirty) {
			if (dirty & /*label*/ 2) set_data(t, /*label*/ ctx[1]);
		},
		d(detaching) {
			if (detaching) {
				detach$1(t);
			}
		}
	};
}

function create_fragment$1(ctx) {
	let label_1;
	let blocktitle;
	let t;
	let input;
	let current;
	let mounted;
	let dispose;

	blocktitle = new BlockTitle({
			props: {
				show_label: /*show_label*/ ctx[4],
				info: /*info*/ ctx[2],
				$$slots: { default: [create_default_slot$1] },
				$$scope: { ctx }
			}
		});

	return {
		c() {
			label_1 = element("label");
			create_component$1(blocktitle.$$.fragment);
			t = space$1();
			input = element("input");
			attr(input, "type", "color");
			input.disabled = /*disabled*/ ctx[3];
			attr(input, "class", "svelte-56zyyb");
			attr(label_1, "class", "block");
		},
		m(target, anchor) {
			insert$1(target, label_1, anchor);
			mount_component$1(blocktitle, label_1, null);
			append(label_1, t);
			append(label_1, input);
			set_input_value(input, /*value*/ ctx[0]);
			current = true;

			if (!mounted) {
				dispose = [
					listen(input, "input", /*input_input_handler*/ ctx[8]),
					listen(input, "focus", /*focus_handler*/ ctx[6]),
					listen(input, "blur", /*blur_handler*/ ctx[7])
				];

				mounted = true;
			}
		},
		p(ctx, [dirty]) {
			const blocktitle_changes = {};
			if (dirty & /*show_label*/ 16) blocktitle_changes.show_label = /*show_label*/ ctx[4];
			if (dirty & /*info*/ 4) blocktitle_changes.info = /*info*/ ctx[2];

			if (dirty & /*$$scope, label*/ 2050) {
				blocktitle_changes.$$scope = { dirty, ctx };
			}

			blocktitle.$set(blocktitle_changes);

			if (!current || dirty & /*disabled*/ 8) {
				input.disabled = /*disabled*/ ctx[3];
			}

			if (dirty & /*value*/ 1) {
				set_input_value(input, /*value*/ ctx[0]);
			}
		},
		i(local) {
			if (current) return;
			transition_in$1(blocktitle.$$.fragment, local);
			current = true;
		},
		o(local) {
			transition_out$1(blocktitle.$$.fragment, local);
			current = false;
		},
		d(detaching) {
			if (detaching) {
				detach$1(label_1);
			}

			destroy_component$1(blocktitle);
			mounted = false;
			run_all(dispose);
		}
	};
}

function instance$1($$self, $$props, $$invalidate) {
	let { value = "#000000" } = $$props;
	let { value_is_output = false } = $$props;
	let { label } = $$props;
	let { info = undefined } = $$props;
	let { disabled = false } = $$props;
	let { show_label = true } = $$props;
	const dispatch = createEventDispatcher();

	function handle_change() {
		dispatch("change", value);

		if (!value_is_output) {
			dispatch("input");
		}
	}

	afterUpdate(() => {
		$$invalidate(5, value_is_output = false);
	});

	function focus_handler(event) {
		bubble.call(this, $$self, event);
	}

	function blur_handler(event) {
		bubble.call(this, $$self, event);
	}

	function input_input_handler() {
		value = this.value;
		$$invalidate(0, value);
	}

	$$self.$$set = $$props => {
		if ('value' in $$props) $$invalidate(0, value = $$props.value);
		if ('value_is_output' in $$props) $$invalidate(5, value_is_output = $$props.value_is_output);
		if ('label' in $$props) $$invalidate(1, label = $$props.label);
		if ('info' in $$props) $$invalidate(2, info = $$props.info);
		if ('disabled' in $$props) $$invalidate(3, disabled = $$props.disabled);
		if ('show_label' in $$props) $$invalidate(4, show_label = $$props.show_label);
	};

	$$self.$$.update = () => {
		if ($$self.$$.dirty & /*value*/ 1) {
			(handle_change());
		}
	};

	return [
		value,
		label,
		info,
		disabled,
		show_label,
		value_is_output,
		focus_handler,
		blur_handler,
		input_input_handler
	];
}

class Colorpicker extends SvelteComponent$1 {
	constructor(options) {
		super();

		init$1(this, options, instance$1, create_fragment$1, safe_not_equal$1, {
			value: 0,
			value_is_output: 5,
			label: 1,
			info: 2,
			disabled: 3,
			show_label: 4
		});
	}
}

const Colorpicker$1 = Colorpicker;

/* home/runner/work/gradio/gradio/js/colorpicker/Index.svelte generated by Svelte v4.2.2 */
const {
	SvelteComponent,
	add_flush_callback,
	assign,
	bind,
	binding_callbacks,
	create_component,
	destroy_component,
	detach,
	flush,
	get_spread_object,
	get_spread_update,
	init,
	insert,
	mount_component,
	safe_not_equal,
	space,
	transition_in,
	transition_out
} = window.__gradio__svelte__internal;
function create_default_slot(ctx) {
	let statustracker;
	let t;
	let colorpicker;
	let updating_value;
	let updating_value_is_output;
	let current;

	const statustracker_spread_levels = [
		{
			autoscroll: /*gradio*/ ctx[12].autoscroll
		},
		{ i18n: /*gradio*/ ctx[12].i18n },
		/*loading_status*/ ctx[11]
	];

	let statustracker_props = {};

	for (let i = 0; i < statustracker_spread_levels.length; i += 1) {
		statustracker_props = assign(statustracker_props, statustracker_spread_levels[i]);
	}

	statustracker = new Static({ props: statustracker_props });

	function colorpicker_value_binding(value) {
		/*colorpicker_value_binding*/ ctx[14](value);
	}

	function colorpicker_value_is_output_binding(value) {
		/*colorpicker_value_is_output_binding*/ ctx[15](value);
	}

	let colorpicker_props = {
		label: /*label*/ ctx[2],
		info: /*info*/ ctx[3],
		show_label: /*show_label*/ ctx[7],
		disabled: !/*interactive*/ ctx[13]
	};

	if (/*value*/ ctx[0] !== void 0) {
		colorpicker_props.value = /*value*/ ctx[0];
	}

	if (/*value_is_output*/ ctx[1] !== void 0) {
		colorpicker_props.value_is_output = /*value_is_output*/ ctx[1];
	}

	colorpicker = new Colorpicker$1({ props: colorpicker_props });
	binding_callbacks.push(() => bind(colorpicker, 'value', colorpicker_value_binding));
	binding_callbacks.push(() => bind(colorpicker, 'value_is_output', colorpicker_value_is_output_binding));
	colorpicker.$on("change", /*change_handler*/ ctx[16]);
	colorpicker.$on("input", /*input_handler*/ ctx[17]);
	colorpicker.$on("submit", /*submit_handler*/ ctx[18]);
	colorpicker.$on("blur", /*blur_handler*/ ctx[19]);
	colorpicker.$on("focus", /*focus_handler*/ ctx[20]);

	return {
		c() {
			create_component(statustracker.$$.fragment);
			t = space();
			create_component(colorpicker.$$.fragment);
		},
		m(target, anchor) {
			mount_component(statustracker, target, anchor);
			insert(target, t, anchor);
			mount_component(colorpicker, target, anchor);
			current = true;
		},
		p(ctx, dirty) {
			const statustracker_changes = (dirty & /*gradio, loading_status*/ 6144)
			? get_spread_update(statustracker_spread_levels, [
					dirty & /*gradio*/ 4096 && {
						autoscroll: /*gradio*/ ctx[12].autoscroll
					},
					dirty & /*gradio*/ 4096 && { i18n: /*gradio*/ ctx[12].i18n },
					dirty & /*loading_status*/ 2048 && get_spread_object(/*loading_status*/ ctx[11])
				])
			: {};

			statustracker.$set(statustracker_changes);
			const colorpicker_changes = {};
			if (dirty & /*label*/ 4) colorpicker_changes.label = /*label*/ ctx[2];
			if (dirty & /*info*/ 8) colorpicker_changes.info = /*info*/ ctx[3];
			if (dirty & /*show_label*/ 128) colorpicker_changes.show_label = /*show_label*/ ctx[7];
			if (dirty & /*interactive*/ 8192) colorpicker_changes.disabled = !/*interactive*/ ctx[13];

			if (!updating_value && dirty & /*value*/ 1) {
				updating_value = true;
				colorpicker_changes.value = /*value*/ ctx[0];
				add_flush_callback(() => updating_value = false);
			}

			if (!updating_value_is_output && dirty & /*value_is_output*/ 2) {
				updating_value_is_output = true;
				colorpicker_changes.value_is_output = /*value_is_output*/ ctx[1];
				add_flush_callback(() => updating_value_is_output = false);
			}

			colorpicker.$set(colorpicker_changes);
		},
		i(local) {
			if (current) return;
			transition_in(statustracker.$$.fragment, local);
			transition_in(colorpicker.$$.fragment, local);
			current = true;
		},
		o(local) {
			transition_out(statustracker.$$.fragment, local);
			transition_out(colorpicker.$$.fragment, local);
			current = false;
		},
		d(detaching) {
			if (detaching) {
				detach(t);
			}

			destroy_component(statustracker, detaching);
			destroy_component(colorpicker, detaching);
		}
	};
}

function create_fragment(ctx) {
	let block;
	let current;

	block = new Block({
			props: {
				visible: /*visible*/ ctx[6],
				elem_id: /*elem_id*/ ctx[4],
				elem_classes: /*elem_classes*/ ctx[5],
				container: /*container*/ ctx[8],
				scale: /*scale*/ ctx[9],
				min_width: /*min_width*/ ctx[10],
				$$slots: { default: [create_default_slot] },
				$$scope: { ctx }
			}
		});

	return {
		c() {
			create_component(block.$$.fragment);
		},
		m(target, anchor) {
			mount_component(block, target, anchor);
			current = true;
		},
		p(ctx, [dirty]) {
			const block_changes = {};
			if (dirty & /*visible*/ 64) block_changes.visible = /*visible*/ ctx[6];
			if (dirty & /*elem_id*/ 16) block_changes.elem_id = /*elem_id*/ ctx[4];
			if (dirty & /*elem_classes*/ 32) block_changes.elem_classes = /*elem_classes*/ ctx[5];
			if (dirty & /*container*/ 256) block_changes.container = /*container*/ ctx[8];
			if (dirty & /*scale*/ 512) block_changes.scale = /*scale*/ ctx[9];
			if (dirty & /*min_width*/ 1024) block_changes.min_width = /*min_width*/ ctx[10];

			if (dirty & /*$$scope, label, info, show_label, interactive, value, value_is_output, gradio, loading_status*/ 2111631) {
				block_changes.$$scope = { dirty, ctx };
			}

			block.$set(block_changes);
		},
		i(local) {
			if (current) return;
			transition_in(block.$$.fragment, local);
			current = true;
		},
		o(local) {
			transition_out(block.$$.fragment, local);
			current = false;
		},
		d(detaching) {
			destroy_component(block, detaching);
		}
	};
}

function instance($$self, $$props, $$invalidate) {
	let { label = "ColorPicker" } = $$props;
	let { info = undefined } = $$props;
	let { elem_id = "" } = $$props;
	let { elem_classes = [] } = $$props;
	let { visible = true } = $$props;
	let { value } = $$props;
	let { value_is_output = false } = $$props;
	let { show_label } = $$props;
	let { container = true } = $$props;
	let { scale = null } = $$props;
	let { min_width = undefined } = $$props;
	let { loading_status } = $$props;
	let { gradio } = $$props;
	let { interactive } = $$props;

	function colorpicker_value_binding(value$1) {
		value = value$1;
		$$invalidate(0, value);
	}

	function colorpicker_value_is_output_binding(value) {
		value_is_output = value;
		$$invalidate(1, value_is_output);
	}

	const change_handler = () => gradio.dispatch("change");
	const input_handler = () => gradio.dispatch("input");
	const submit_handler = () => gradio.dispatch("submit");
	const blur_handler = () => gradio.dispatch("blur");
	const focus_handler = () => gradio.dispatch("focus");

	$$self.$$set = $$props => {
		if ('label' in $$props) $$invalidate(2, label = $$props.label);
		if ('info' in $$props) $$invalidate(3, info = $$props.info);
		if ('elem_id' in $$props) $$invalidate(4, elem_id = $$props.elem_id);
		if ('elem_classes' in $$props) $$invalidate(5, elem_classes = $$props.elem_classes);
		if ('visible' in $$props) $$invalidate(6, visible = $$props.visible);
		if ('value' in $$props) $$invalidate(0, value = $$props.value);
		if ('value_is_output' in $$props) $$invalidate(1, value_is_output = $$props.value_is_output);
		if ('show_label' in $$props) $$invalidate(7, show_label = $$props.show_label);
		if ('container' in $$props) $$invalidate(8, container = $$props.container);
		if ('scale' in $$props) $$invalidate(9, scale = $$props.scale);
		if ('min_width' in $$props) $$invalidate(10, min_width = $$props.min_width);
		if ('loading_status' in $$props) $$invalidate(11, loading_status = $$props.loading_status);
		if ('gradio' in $$props) $$invalidate(12, gradio = $$props.gradio);
		if ('interactive' in $$props) $$invalidate(13, interactive = $$props.interactive);
	};

	return [
		value,
		value_is_output,
		label,
		info,
		elem_id,
		elem_classes,
		visible,
		show_label,
		container,
		scale,
		min_width,
		loading_status,
		gradio,
		interactive,
		colorpicker_value_binding,
		colorpicker_value_is_output_binding,
		change_handler,
		input_handler,
		submit_handler,
		blur_handler,
		focus_handler
	];
}

class Index extends SvelteComponent {
	constructor(options) {
		super();

		init(this, options, instance, create_fragment, safe_not_equal, {
			label: 2,
			info: 3,
			elem_id: 4,
			elem_classes: 5,
			visible: 6,
			value: 0,
			value_is_output: 1,
			show_label: 7,
			container: 8,
			scale: 9,
			min_width: 10,
			loading_status: 11,
			gradio: 12,
			interactive: 13
		});
	}

	get label() {
		return this.$$.ctx[2];
	}

	set label(label) {
		this.$$set({ label });
		flush();
	}

	get info() {
		return this.$$.ctx[3];
	}

	set info(info) {
		this.$$set({ info });
		flush();
	}

	get elem_id() {
		return this.$$.ctx[4];
	}

	set elem_id(elem_id) {
		this.$$set({ elem_id });
		flush();
	}

	get elem_classes() {
		return this.$$.ctx[5];
	}

	set elem_classes(elem_classes) {
		this.$$set({ elem_classes });
		flush();
	}

	get visible() {
		return this.$$.ctx[6];
	}

	set visible(visible) {
		this.$$set({ visible });
		flush();
	}

	get value() {
		return this.$$.ctx[0];
	}

	set value(value) {
		this.$$set({ value });
		flush();
	}

	get value_is_output() {
		return this.$$.ctx[1];
	}

	set value_is_output(value_is_output) {
		this.$$set({ value_is_output });
		flush();
	}

	get show_label() {
		return this.$$.ctx[7];
	}

	set show_label(show_label) {
		this.$$set({ show_label });
		flush();
	}

	get container() {
		return this.$$.ctx[8];
	}

	set container(container) {
		this.$$set({ container });
		flush();
	}

	get scale() {
		return this.$$.ctx[9];
	}

	set scale(scale) {
		this.$$set({ scale });
		flush();
	}

	get min_width() {
		return this.$$.ctx[10];
	}

	set min_width(min_width) {
		this.$$set({ min_width });
		flush();
	}

	get loading_status() {
		return this.$$.ctx[11];
	}

	set loading_status(loading_status) {
		this.$$set({ loading_status });
		flush();
	}

	get gradio() {
		return this.$$.ctx[12];
	}

	set gradio(gradio) {
		this.$$set({ gradio });
		flush();
	}

	get interactive() {
		return this.$$.ctx[13];
	}

	set interactive(interactive) {
		this.$$set({ interactive });
		flush();
	}
}

export { Colorpicker$1 as BaseColorPicker, Index as default };
//# sourceMappingURL=Index-819a9586.js.map
