@finsweet/webflow-apps-utils 1.0.1

package/dist/ui/components/text/Text.svelte

@@ -0,0 +1,778 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+
+	import { cleanupTooltipMessage } from '../../../utils';
+
+	import { DeleteIcon, ToolTipInfoCircleIcon, UndoIcon } from '../../icons';
+	import Loader from '../Loader.svelte';
+	import { Tooltip } from '../tooltip';
+	import type {
+		TEXT_SIZES,
+		TEXT_WEIGHTS,
+		TextClickEvent,
+		TextPopupActionEvent,
+		TextProps
+	} from './types';
+
+	let {
+		// Basic text properties
+		label = '',
+		class: className = '',
+		raw = false,
+		capitalize = false,
+		disabled = false,
+		title = '',
+		wrap = 'normal',
+		textAlign = 'left',
+		fontSize = 'normal',
+		fontWeight = 'normal',
+		fontColor = 'var(--actionPrimaryText)',
+		height = '',
+		ellipsisOnWidth = '',
+
+		// Tooltip configuration - pass any tooltip props
+		tooltip,
+
+		// Popup configuration - for action popups (reset, delete, etc.)
+		popup,
+
+		// Icon and loading
+		icon = null,
+		loading = false,
+
+		// Link behavior
+		link = false,
+
+		// Event handlers
+		onclick,
+
+		// Snippets
+		children,
+		pill,
+
+		...restProps
+	}: TextProps & {
+		onclick?: (event: MouseEvent) => void;
+	} = $props();
+
+	// Text size and weight mappings
+	let textFontSizes: Record<TEXT_SIZES, string> = {
+		normal: '11.5px',
+		large: '12.5px'
+	};
+
+	let textFontWeights: Record<TEXT_WEIGHTS, string> = {
+		normal: '400',
+		bold: '600'
+	};
+
+	// Derived computed values using $derived
+	let computedFontSize = $derived(() => {
+		const fontSizeKey = fontSize as keyof typeof textFontSizes;
+		return textFontSizes[fontSizeKey] || fontSize;
+	});
+
+	let computedFontWeight = $derived(() => {
+		const fontWeightKey = fontWeight as keyof typeof textFontWeights;
+		return textFontWeights[fontWeightKey] || fontWeight;
+	});
+
+	// State for popup functionality
+	let isPopupHidden = $state(true);
+	let wrapperElement: HTMLElement | undefined = $state();
+	let popupElement: HTMLElement | undefined = $state();
+
+	// Computed popup configuration with defaults
+	let popupConfig = $derived({
+		disabled: popup?.disabled ?? false,
+		title: popup?.title ?? 'Remove',
+		subtitle: popup?.subtitle ?? 'Alt + click',
+		description: popup?.description ?? 'This action will remove the current selection.',
+		icon: popup?.icon ?? DeleteIcon,
+		active: popup?.active ?? false
+	});
+
+	// Dynamic component assignments for Svelte 5
+	let IconComponent = $derived(icon);
+	let PopupIconComponent = $derived(popupConfig.icon);
+
+	// Check if popup should be enabled (only when popup prop has content and is active)
+	let hasPopup = $derived(
+		!!popup && Object.keys(popup).length > 0 && !popup.disabled && popup.active === true
+	);
+
+	/**
+	 * Handles the popup action functionality
+	 */
+	function handlePopupAction(): void {
+		const actionEvent: TextPopupActionEvent = {
+			detail: true
+		};
+
+		// Dispatch action event
+		if (wrapperElement) {
+			wrapperElement.dispatchEvent(new CustomEvent('popupAction', actionEvent));
+		}
+
+		isPopupHidden = true;
+	}
+
+	/**
+	 * Handle keydown events to detect Alt+Enter for popup action
+	 */
+	function handleAltEnter(event: KeyboardEvent): void {
+		if (event.altKey && event.code === 'Enter') {
+			handlePopupAction();
+		}
+	}
+
+	/**
+	 * Handle click events
+	 */
+	function handleClick(event: MouseEvent): void {
+		if (disabled || loading) return;
+
+		const clickEvent: TextClickEvent = {
+			detail: event
+		};
+
+		onclick?.(event);
+
+		// Dispatch custom click event
+		if (wrapperElement) {
+			wrapperElement.dispatchEvent(new CustomEvent('textClick', clickEvent));
+		}
+	}
+
+	/**
+	 * Handle popup toggle
+	 */
+	function handlePopupToggle(event: Event): void {
+		event.stopPropagation();
+		isPopupHidden = false;
+	}
+
+	/**
+	 * Handle click outside the popup
+	 */
+	function handleClickOutside(event: Event): void {
+		if (popupElement && !popupElement.contains(event.target as Node)) {
+			isPopupHidden = true;
+		}
+	}
+
+	/**
+	 * Handle popup click
+	 */
+	function handlePopupClick(event: MouseEvent): void {
+		event.stopPropagation();
+		handlePopupAction();
+	}
+
+	/**
+	 * Handle popup keyboard interaction
+	 */
+	function handlePopupKeydown(event: KeyboardEvent): void {
+		if (event.key === 'Enter') {
+			event.stopPropagation();
+			handlePopupAction();
+		}
+	}
+
+	// Effect for setting up Alt+Enter listener when popup is open
+	$effect(() => {
+		if (!isPopupHidden && wrapperElement) {
+			wrapperElement.addEventListener('keydown', handleAltEnter);
+			wrapperElement.focus();
+
+			return () => {
+				wrapperElement?.removeEventListener('keydown', handleAltEnter);
+			};
+		}
+	});
+
+	// Effect for handling click outside to close popup
+	$effect(() => {
+		if (!isPopupHidden) {
+			document.addEventListener('click', handleClickOutside);
+
+			return () => {
+				document.removeEventListener('click', handleClickOutside);
+			};
+		}
+	});
+
+	// Computed CSS classes
+	let labelClasses = $derived(() => {
+		const classes = ['labels'];
+		if (disabled) classes.push('disabled');
+		if (link) classes.push('link');
+		if (loading) classes.push('is-busy');
+		if (hasPopup && popupConfig.active) classes.push('active');
+		classes.push(className);
+		return classes.join(' ');
+	});
+
+	// Determine if this should be interactive (button-like)
+	let isInteractive = $derived(!!onclick || link || hasPopup || !!tooltip);
+
+	let textClasses = $derived(() => {
+		const classes = ['text'];
+		if (ellipsisOnWidth && !icon && !loading) {
+			classes.push('ellipsis');
+		}
+		return classes.join(' ');
+	});
+
+	let textStyles = $derived(() => {
+		const styles = [
+			`font-weight: ${computedFontWeight()}`,
+			`font-size: ${computedFontSize()}`,
+			`color: ${fontColor}`
+		];
+
+		if (capitalize) styles.push('text-transform: capitalize');
+		if (height) styles.push(`height: ${height}`);
+
+		// Handle ellipsis - different behavior for text-only vs text-with-icons
+		if (ellipsisOnWidth && !(icon || loading)) {
+			// Text-only ellipsis: use block display with text-align for proper ellipsis
+			styles.push(`width: ${ellipsisOnWidth}`);
+			styles.push('white-space: nowrap');
+			styles.push('overflow: hidden');
+			styles.push('text-overflow: ellipsis');
+			styles.push('display: block');
+			styles.push(`text-align: ${textAlign}`);
+		} else if (ellipsisOnWidth && (icon || loading)) {
+			// Text-with-icons ellipsis: just apply ellipsis, width is handled by container
+			styles.push('white-space: nowrap');
+			styles.push('overflow: hidden');
+			styles.push('text-overflow: ellipsis');
+			styles.push('flex: 1');
+			styles.push('min-width: 0');
+		} else {
+			// Normal wrapping behavior
+			styles.push(`white-space: ${wrap}`);
+			styles.push('display: flex');
+			styles.push('align-items: center');
+			styles.push('gap: 4px');
+			styles.push(`text-align: ${textAlign}`);
+			// Add justify-content for alignment
+			if (textAlign === 'center') styles.push('justify-content: center');
+			else if (textAlign === 'right') styles.push('justify-content: flex-end');
+			else styles.push('justify-content: flex-start');
+		}
+
+		return styles.join('; ');
+	});
+
+	let labelStyles = $derived(() => {
+		const styles: string[] = [];
+		// Container styles if needed
+		return styles.length > 0 ? styles.join('; ') : undefined;
+	});
+
+	// Show tooltip logic - hide tooltip when popup is showing (popup takes priority)
+	let shouldShowTooltip = $derived(
+		!!tooltip &&
+			Object.keys(tooltip).length > 0 &&
+			(tooltip.message || tooltip.tooltipContent) &&
+			!disabled &&
+			(isPopupHidden || !hasPopup)
+	);
+</script>
+
+{#if label || tooltip || icon || children}
+	{#if !hasPopup && shouldShowTooltip}
+		<!-- Simple text with tooltip -->
+		<Tooltip {...tooltip}>
+			{#snippet target()}
+				<div
+					class={labelClasses()}
+					data-component="Text"
+					{...isInteractive ? { tabindex: 0 } : {}}
+					role={isInteractive ? 'button' : undefined}
+					onclick={handleClick}
+					{title}
+					style={labelStyles()}
+					{...restProps}
+				>
+					{#if label?.trim() || icon || children}
+						{#if ellipsisOnWidth && (icon || loading)}
+							<!-- handling ellipsis with icons -->
+							<div
+								class="text-with-icon"
+								style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
+								'center'
+									? 'center'
+									: textAlign === 'right'
+										? 'flex-end'
+										: 'flex-start'};"
+							>
+								{#if icon || loading}
+									{#if loading}
+										<div class="loading" style="flex-shrink: 0;">
+											<Loader size={16} />
+										</div>
+									{:else if icon}
+										<IconComponent style="flex-shrink: 0;" />
+									{/if}
+								{/if}
+								<div class={textClasses()} style={textStyles()}>
+									{#if children}
+										{@render children()}
+									{:else if raw}
+										{@html label}
+									{:else}
+										{label}
+									{/if}
+								</div>
+							</div>
+						{:else}
+							<!-- Normal text handling -->
+							<div class={textClasses()} style={textStyles()}>
+								{#if icon || loading}
+									{#if loading}
+										<div class="loading">
+											<Loader size={16} />
+										</div>
+									{:else if icon}
+										<IconComponent />
+									{/if}
+								{/if}
+
+								{#if children}
+									{@render children()}
+								{:else if raw}
+									{@html label}
+								{:else}
+									{label}
+								{/if}
+							</div>
+						{/if}
+					{/if}
+
+					{#if pill}
+						{@render pill()}
+					{/if}
+				</div>
+			{/snippet}
+		</Tooltip>
+	{:else if !hasPopup}
+		<!-- Simple text without tooltip -->
+		<div
+			class={labelClasses()}
+			data-component="Text"
+			{...isInteractive ? { tabindex: 0 } : {}}
+			role={isInteractive ? 'button' : undefined}
+			onclick={handleClick}
+			{title}
+			style={labelStyles()}
+			{...restProps}
+		>
+			{#if label?.trim() || icon || children}
+				{#if ellipsisOnWidth && (icon || loading)}
+					<!-- handling ellipsis with icons -->
+					<div
+						class="text-with-icon"
+						style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
+						'center'
+							? 'center'
+							: textAlign === 'right'
+								? 'flex-end'
+								: 'flex-start'};"
+					>
+						{#if icon || loading}
+							{#if loading}
+								<div class="loading" style="flex-shrink: 0;">
+									<Loader size={16} />
+								</div>
+							{:else if icon}
+								<IconComponent style="flex-shrink: 0;" />
+							{/if}
+						{/if}
+						<div class={textClasses()} style={textStyles()}>
+							{#if children}
+								{@render children()}
+							{:else if raw}
+								{@html label}
+							{:else}
+								{label}
+							{/if}
+						</div>
+					</div>
+				{:else}
+					<!-- Normal text handling -->
+					<div class={textClasses()} style={textStyles()}>
+						{#if icon || loading}
+							{#if loading}
+								<div class="loading">
+									<Loader size={16} />
+								</div>
+							{:else if icon}
+								<IconComponent />
+							{/if}
+						{/if}
+
+						{#if children}
+							{@render children()}
+						{:else if raw}
+							{@html label}
+						{:else}
+							{label}
+						{/if}
+					</div>
+				{/if}
+			{/if}
+
+			{#if pill}
+				{@render pill()}
+			{/if}
+		</div>
+	{:else}
+		<!-- Text with popup functionality -->
+		<div
+			class="label-popup {disabled ? 'disabled' : ''}"
+			onclick={handlePopupToggle}
+			onkeydown={(e) => e.key === 'Enter' && handlePopupToggle(e)}
+			bind:this={wrapperElement}
+			role="button"
+			tabindex="-1"
+		>
+			<Tooltip
+				position="fixed"
+				offsetVal={0}
+				padding="0"
+				width="200px"
+				showArrow={false}
+				bind:hidden={isPopupHidden}
+				listener="click"
+				listenerout="click"
+			>
+				{#snippet target()}
+					<span class="dropdown-label item {popupConfig.active ? 'active' : ''}">
+						{#if shouldShowTooltip}
+							<!-- Text with popup and tooltip -->
+							<Tooltip {...tooltip}>
+								{#snippet target()}
+									<div
+										class={labelClasses()}
+										data-component="Text"
+										{...isInteractive ? { tabindex: 0 } : {}}
+										role={isInteractive ? 'button' : undefined}
+										onclick={handleClick}
+										{title}
+										style={labelStyles()}
+										{...restProps}
+									>
+										{#if label?.trim() || icon || children}
+											{#if ellipsisOnWidth && (icon || loading)}
+												<!-- handling ellipsis with icons -->
+												<div
+													class="text-with-icon"
+													style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
+													'center'
+														? 'center'
+														: textAlign === 'right'
+															? 'flex-end'
+															: 'flex-start'};"
+												>
+													{#if icon || loading}
+														{#if loading}
+															<div class="loading" style="flex-shrink: 0;">
+																<Loader size={16} />
+															</div>
+														{:else if icon}
+															<IconComponent style="flex-shrink: 0;" />
+														{/if}
+													{/if}
+													<div class={textClasses()} style={textStyles()}>
+														{#if children}
+															{@render children()}
+														{:else if raw}
+															{@html label}
+														{:else}
+															{label}
+														{/if}
+													</div>
+												</div>
+											{:else}
+												<!-- Normal text handling -->
+												<div class={textClasses()} style={textStyles()}>
+													{#if icon || loading}
+														{#if loading}
+															<div class="loading">
+																<Loader size={16} />
+															</div>
+														{:else if icon}
+															<IconComponent />
+														{/if}
+													{/if}
+
+													{#if children}
+														{@render children()}
+													{:else if raw}
+														{@html label}
+													{:else}
+														{label}
+													{/if}
+												</div>
+											{/if}
+										{/if}
+
+										{#if pill}
+											{@render pill()}
+										{/if}
+									</div>
+								{/snippet}
+							</Tooltip>
+						{:else}
+							<!-- Text with popup without tooltip -->
+							<div
+								class={labelClasses()}
+								data-component="Text"
+								{...isInteractive ? { tabindex: 0 } : {}}
+								role={isInteractive ? 'button' : undefined}
+								onclick={handleClick}
+								{title}
+								style={labelStyles()}
+								{...restProps}
+							>
+								{#if label?.trim() || icon || children}
+									{#if ellipsisOnWidth && (icon || loading)}
+										<!-- handling ellipsis with icons -->
+										<div
+											class="text-with-icon"
+											style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
+											'center'
+												? 'center'
+												: textAlign === 'right'
+													? 'flex-end'
+													: 'flex-start'};"
+										>
+											{#if icon || loading}
+												{#if loading}
+													<div class="loading" style="flex-shrink: 0;">
+														<Loader size={16} />
+													</div>
+												{:else if icon}
+													<IconComponent style="flex-shrink: 0;" />
+												{/if}
+											{/if}
+											<div class={textClasses()} style={textStyles()}>
+												{#if children}
+													{@render children()}
+												{:else if raw}
+													{@html label}
+												{:else}
+													{label}
+												{/if}
+											</div>
+										</div>
+									{:else}
+										<!-- Normal text handling -->
+										<div class={textClasses()} style={textStyles()}>
+											{#if icon || loading}
+												{#if loading}
+													<div class="loading">
+														<Loader size={16} />
+													</div>
+												{:else if icon}
+													<IconComponent />
+												{/if}
+											{/if}
+
+											{#if children}
+												{@render children()}
+											{:else if raw}
+												{@html label}
+											{:else}
+												{label}
+											{/if}
+										</div>
+									{/if}
+								{/if}
+
+								{#if pill}
+									{@render pill()}
+								{/if}
+							</div>
+						{/if}
+					</span>
+				{/snippet}
+				{#snippet tooltipContent()}
+					<div
+						class="popup-wrapper"
+						style={!popupConfig.active ? 'display:none' : ''}
+						bind:this={popupElement}
+					>
+						<div
+							class="popup-header"
+							role="button"
+							tabindex="0"
+							onclick={handlePopupClick}
+							onkeydown={handlePopupKeydown}
+						>
+							<PopupIconComponent />
+							<span class="popup-title">{popupConfig.title}</span>
+							<span class="popup-subtitle">{popupConfig.subtitle}</span>
+						</div>
+						<div class="popup-description">
+							<span>{popupConfig.description}</span>
+						</div>
+					</div>
+				{/snippet}
+			</Tooltip>
+		</div>
+	{/if}
+{/if}
+
+<style>
+	.text {
+		font-family: inherit;
+	}
+
+	.labels.link {
+		cursor: pointer;
+		padding: 4px;
+		border-radius: 4px;
+	}
+
+	.labels.link:hover:not(.disabled),
+	.labels.link.is-busy {
+		background-color: var(--defaultLightHover);
+		border-radius: 4px;
+	}
+
+	.labels :global(.target .message) {
+		font-weight: 500;
+		font-size: 11px;
+	}
+
+	.labels.disabled,
+	.labels.link.is-busy {
+		opacity: 0.75;
+		cursor: not-allowed;
+	}
+
+	.labels {
+		display: block;
+	}
+
+	.loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	/* Label-specific styles */
+	.label-popup.disabled {
+		opacity: 0.75;
+		cursor: not-allowed;
+	}
+
+	.label-popup :global(.target:has(.item)) {
+		display: flex;
+	}
+
+	.label-popup :global(.tooltip:has(.popup)) {
+		border-radius: none;
+		background: none;
+		box-shadow: none;
+		z-index: 9999999;
+		width: max-content;
+	}
+
+	.dropdown-label {
+		width: 100%;
+	}
+
+	:global(.dropdown-label.active .labels:not(.dropdown-label [role='tooltip'] .labels)) {
+		color: rgb(138, 194, 255);
+		background: rgba(0, 132, 255, 0.18);
+		cursor: pointer;
+		border-radius: 4px;
+		display: grid !important;
+		grid-template-columns: 1fr max-content !important;
+	}
+
+	* {
+		font-family: Inter;
+		font-style: normal;
+		line-height: 16px;
+		letter-spacing: -0.115px;
+		color: var(--actionPrimaryText);
+	}
+
+	/* Popup Wrapper Styles - matching original popup design */
+	.popup-wrapper {
+		display: flex;
+		width: 200px;
+		flex-direction: column;
+		justify-content: center;
+		align-items: flex-start;
+		border-radius: 4px;
+		border: 1px solid var(--border-border-1, #363636);
+		background: #353535;
+		height: max-content;
+		min-height: 80px;
+	}
+
+	.popup-header {
+		display: grid;
+		grid-template-columns: max-content 1fr max-content;
+		padding: 8px;
+		align-items: center;
+		cursor: pointer;
+		gap: 8px;
+		align-self: stretch;
+		border-bottom: 1px solid var(--border1, #363636);
+	}
+
+	.popup-header:hover {
+		background-color: var(--hoverColor);
+	}
+
+	.popup-title {
+		color: var(--text1, #f5f5f5);
+		font-size: 11px;
+		font-style: normal;
+		font-weight: 500;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.popup-subtitle {
+		color: var(--text2, #bdbdbd);
+		font-size: 11px;
+		font-style: normal;
+		font-weight: 500;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.popup-description {
+		display: flex;
+		padding: 8px;
+		align-items: center;
+		gap: 12px;
+		align-self: stretch;
+		height: max-content;
+		min-height: 48px;
+	}
+
+	.popup-description span {
+		color: var(--text2, #bdbdbd);
+		font-family: Inter;
+		font-size: 11px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 16px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		flex: 1 0 0;
+	}
+</style>