gradio/js/html/Index.svelte

<script lang="ts">
	import type { Gradio } from "@gradio/utils";
	import HTML from "./shared/HTML.svelte";
	import { StatusTracker } from "@gradio/statustracker";
	import type { LoadingStatus } from "@gradio/statustracker";
	import { Block, BlockLabel } from "@gradio/atoms";
	import { Code as CodeIcon } from "@gradio/icons";
	import { css_units } from "@gradio/utils";

	export let label: string;
	export let elem_id = "";
	export let elem_classes: string[] = [];
	export let visible = true;
	export let value = "";
	export let loading_status: LoadingStatus;
	export let gradio: Gradio<{
		change: never;
		clear_status: LoadingStatus;
	}>;
	export let show_label = false;
	export let min_height: number | undefined = undefined;
	export let max_height: number | undefined = undefined;

	$: label, gradio.dispatch("change");
</script>

<Block {visible} {elem_id} {elem_classes} container={false}>
	{#if show_label}
		<span class="label-container">
			<BlockLabel Icon={CodeIcon} {show_label} {label} float={true} />
		</span>
	{/if}

	<StatusTracker
		autoscroll={gradio.autoscroll}
		i18n={gradio.i18n}
		{...loading_status}
		variant="center"
		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
	/>
	<div
		class:pending={loading_status?.status === "pending"}
		style:min-height={min_height && loading_status?.status !== "pending"
			? css_units(min_height)
			: undefined}
		style:max-height={max_height ? css_units(max_height) : undefined}
	>
		<HTML
			{value}
			{elem_classes}
			{visible}
			on:change={() => gradio.dispatch("change")}
		/>
	</div>
</Block>

<style>
	div {
		transition: 150ms;
	}

	.pending {
		opacity: 0.2;
	}

	.label-container :global(label) {
		top: -8px !important;
		position: relative !important;
		left: -8px !important;
		background: var(--block-background-fill) !important;
		border-top: var(--block-label-border-width) solid
			var(--border-color-primary) !important;
		border-left: var(--block-label-border-width) solid
			var(--border-color-primary) !important;
	}
</style>