frontend/src/components/widgets/labels/TextLabel.svelte

<script lang="ts">
	let className = "";
	export { className as class };
	export let classes: Record<string, boolean> = {};
	let styleName = "";
	export { styleName as style };
	export let styles: Record<string, string | number | undefined> = {};
	export let disabled = false;
	export let bold = false;
	export let italic = false;
	export let centerAlign = false;
	export let tableAlign = false;
	export let minWidth = 0;
	export let multiline = false;
	export let tooltip: string | undefined = undefined;
	export let checkboxId: bigint | undefined = undefined;

	$: extraClasses = Object.entries(classes)
		.flatMap(([className, stateName]) => (stateName ? [className] : []))
		.join(" ");
	$: extraStyles = Object.entries(styles)
		.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))
		.join(" ");
</script>

<label
	class={`text-label ${className} ${extraClasses}`.trim()}
	class:disabled
	class:bold
	class:italic
	class:multiline
	class:center-align={centerAlign}
	class:table-align={tableAlign}
	style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
	style={`${styleName} ${extraStyles}`.trim() || undefined}
	title={tooltip}
	for={checkboxId !== undefined ? `checkbox-input-${checkboxId}` : undefined}
>
	<slot />
</label>

<style lang="scss" global>
	.text-label {
		line-height: 18px;
		white-space: nowrap;
		// Force Safari to not draw a text cursor, even though this element has `user-select: none`
		cursor: default;

		&.disabled {
			color: var(--color-8-uppergray);
		}

		&.bold {
			font-weight: 700;
		}

		&.italic {
			font-style: italic;
		}

		&.multiline {
			white-space: pre-wrap;
			margin: 4px 0;
		}

		&.center-align {
			text-align: center;
		}

		&.table-align {
			flex: 0 0 30%;
			text-align: right;
		}
	}
</style>