@finsweet/webflow-apps-utils 1.0.3 → 1.0.5

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

@@ -32,6 +32,7 @@
 
 		// Tooltip configuration - pass any tooltip props
 		tooltip,
+		tooltipTarget = 'icon',
 
 		// Popup configuration - for action popups (reset, delete, etc.)
 		popup,
@@ -87,6 +88,7 @@
 		disabled: popup?.disabled ?? false,
 		title: popup?.title ?? 'Remove',
 		subtitle: popup?.subtitle ?? 'Alt + click',
+		onclick: popup?.onclick ?? null,
 		description: popup?.description ?? 'This action will remove the current selection.',
 		icon: popup?.icon ?? DeleteIcon,
 		active: popup?.active ?? false
@@ -114,6 +116,8 @@
 			wrapperElement.dispatchEvent(new CustomEvent('popupAction', actionEvent));
 		}
 
+		popup?.onclick?.();
+
 		isPopupHidden = true;
 	}
 
@@ -280,11 +284,26 @@
 			!disabled &&
 			(isPopupHidden || !hasPopup)
 	);
+
+	// Validate tooltipTarget - if 'icon' is specified, icon must be present and not loading
+	let isValidTooltipTarget = $derived(
+		tooltipTarget === 'text' || (tooltipTarget === 'icon' && !!icon && !loading)
+	);
+
+	// Determine if tooltip should show on text (default behavior or when explicitly set to 'text')
+	let shouldShowTooltipOnText = $derived(
+		shouldShowTooltip && isValidTooltipTarget && tooltipTarget === 'text'
+	);
+
+	// Determine if tooltip should show on icon (when explicitly set to 'icon' and icon is present)
+	let shouldShowTooltipOnIcon = $derived(
+		shouldShowTooltip && isValidTooltipTarget && tooltipTarget === 'icon' && !!icon && !loading
+	);
 </script>
 
 {#if label || tooltip || icon || children}
-	{#if !hasPopup && shouldShowTooltip}
-		<!-- Simple text with tooltip -->
+	{#if !hasPopup && shouldShowTooltipOnText}
+		<!-- Simple text with tooltip on text -->
 		<Tooltip {...tooltip}>
 			{#snippet target()}
 				<div
@@ -314,8 +333,14 @@
 										<div class="loading" style="flex-shrink: 0;">
 											<Loader size={16} />
 										</div>
-									{:else if icon}
+									{:else if icon && !shouldShowTooltipOnIcon}
 										<IconComponent style="flex-shrink: 0;" />
+									{:else if icon && shouldShowTooltipOnIcon}
+										<Tooltip {...tooltip}>
+											{#snippet target()}
+												<IconComponent style="flex-shrink: 0;" />
+											{/snippet}
+										</Tooltip>
 									{/if}
 								{/if}
 								<div class={textClasses()} style={textStyles()}>
@@ -336,8 +361,14 @@
 										<div class="loading">
 											<Loader size={16} />
 										</div>
-									{:else if icon}
+									{:else if icon && !shouldShowTooltipOnIcon}
 										<IconComponent />
+									{:else if icon && shouldShowTooltipOnIcon}
+										<Tooltip {...tooltip}>
+											{#snippet target()}
+												<IconComponent />
+											{/snippet}
+										</Tooltip>
 									{/if}
 								{/if}
 
@@ -358,6 +389,85 @@
 				</div>
 			{/snippet}
 		</Tooltip>
+	{:else if !hasPopup && shouldShowTooltipOnIcon}
+		<!-- Simple text with tooltip on icon -->
+		<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}
+								<Tooltip {...tooltip}>
+									{#snippet target()}
+										<IconComponent style="flex-shrink: 0;" />
+									{/snippet}
+								</Tooltip>
+							{/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}
+								<Tooltip {...tooltip}>
+									{#snippet target()}
+										<IconComponent />
+									{/snippet}
+								</Tooltip>
+							{/if}
+						{/if}
+
+						{#if children}
+							{@render children()}
+						{:else if raw}
+							{@html label}
+						{:else}
+							{label}
+						{/if}
+					</div>
+				{/if}
+			{/if}
+
+			{#if pill}
+				{@render pill()}
+			{/if}
+		</div>
 	{:else if !hasPopup}
 		<!-- Simple text without tooltip -->
 		<div
@@ -451,8 +561,8 @@
 			>
 				{#snippet target()}
 					<span class="dropdown-label item {popupConfig.active ? 'active' : ''}">
-						{#if shouldShowTooltip}
-							<!-- Text with popup and tooltip -->
+						{#if shouldShowTooltipOnText}
+							<!-- Text with popup and tooltip on text -->
 							<Tooltip {...tooltip}>
 								{#snippet target()}
 									<div
@@ -482,8 +592,14 @@
 															<div class="loading" style="flex-shrink: 0;">
 																<Loader size={16} />
 															</div>
-														{:else if icon}
+														{:else if icon && !shouldShowTooltipOnIcon}
 															<IconComponent style="flex-shrink: 0;" />
+														{:else if icon && shouldShowTooltipOnIcon}
+															<Tooltip {...tooltip}>
+																{#snippet target()}
+																	<IconComponent style="flex-shrink: 0;" />
+																{/snippet}
+															</Tooltip>
 														{/if}
 													{/if}
 													<div class={textClasses()} style={textStyles()}>
@@ -504,8 +620,14 @@
 															<div class="loading">
 																<Loader size={16} />
 															</div>
-														{:else if icon}
+														{:else if icon && !shouldShowTooltipOnIcon}
 															<IconComponent />
+														{:else if icon && shouldShowTooltipOnIcon}
+															<Tooltip {...tooltip}>
+																{#snippet target()}
+																	<IconComponent />
+																{/snippet}
+															</Tooltip>
 														{/if}
 													{/if}
 
@@ -526,6 +648,85 @@
 									</div>
 								{/snippet}
 							</Tooltip>
+						{:else if shouldShowTooltipOnIcon}
+							<!-- Text with popup and tooltip on icon -->
+							<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}
+													<Tooltip {...tooltip}>
+														{#snippet target()}
+															<IconComponent style="flex-shrink: 0;" />
+														{/snippet}
+													</Tooltip>
+												{/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}
+													<Tooltip {...tooltip}>
+														{#snippet target()}
+															<IconComponent />
+														{/snippet}
+													</Tooltip>
+												{/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 without tooltip -->
 							<div

package/dist/ui/components/text/types.d.ts

@@ -21,6 +21,8 @@ export interface PopupConfig {
     icon?: Component | null;
     /** Whether the popup trigger is currently active */
     active?: boolean;
+    /** Event handler for popup action */
+    onclick?: () => void;
 }
 export interface TextProps {
     label?: string;
@@ -37,6 +39,8 @@ export interface TextProps {
     height?: string;
     ellipsisOnWidth?: string;
     tooltip?: Partial<TooltipProps>;
+    /** Specifies whether to show tooltip on the text or icon. Requires icon prop when set to 'icon' */
+    tooltipTarget?: 'text' | 'icon';
     popup?: PopupConfig;
     icon?: Component | null;
     loading?: boolean;

package/dist/ui/index.css

@@ -4,7 +4,7 @@
 	/* custom scrollbar related */
 	--sb-track-color: #1e1e1e;
 	--sb-thumb-color: #373737;
-	--sb-size: 6px;
+	--sb-size: 8px;
 
 	/* Webflow colors */
 	--background1: #292929;
@@ -264,9 +264,13 @@ label {
 .disabled,
 .login-required {
 	cursor: not-allowed !important;
-	opacity: 0.75 !important;
+	opacity: 0.8 !important;
 }
 
+/* Used for disabled sections */
+.not-allowed {
+	cursor: not-allowed !important;
+}
 /* OverlayScrollbars Global Theme */
 :root {
 	/* OverlayScrollbars theme variables using design system colors */

package/dist/utils/animations/factory.d.ts

@@ -0,0 +1,7 @@
+import type { AnimationFunctions, AnimationProps } from './types';
+/**
+ * Creates a new Animation.
+ * @param props The animaiton props.
+ * @returns A new `in` and `out` Animation functions.
+ */
+export declare const createAnimation: ({ initialStyles, keyframes }: AnimationProps) => AnimationFunctions;

package/dist/utils/animations/factory.js

@@ -0,0 +1,101 @@
+import { animate, stagger as staggerDelay } from 'motion';
+/**
+ * Creates a new Animation.
+ * @param props The animaiton props.
+ * @returns A new `in` and `out` Animation functions.
+ */
+export const createAnimation = ({ initialStyles, keyframes }) => {
+    const isBrowser = typeof window !== 'undefined';
+    /**
+     * Prepares the {@link animateIn} elements by setting the initial styles and rendering them to the DOM.
+     * @param elements The elements to prepare.
+     * @param options.target If defined, the element will be appended to the target.
+     * @param options.insertAfter A child of the target. If defined, the element will be appended right after this anchor element.
+     */
+    const prepareIn = (elements, options = {}) => {
+        const { target, insertAfter, display = '' } = options;
+        if (!Array.isArray(elements))
+            elements = [elements];
+        for (const element of elements) {
+            element.style.display = display;
+            Object.assign(element.style, initialStyles);
+            if (target && insertAfter !== undefined) {
+                if (insertAfter)
+                    target.insertBefore(element, insertAfter.nextSibling);
+                else {
+                    if (isBrowser && target instanceof HTMLElement) {
+                        target.insertBefore(element, target.firstChild);
+                    }
+                }
+            }
+            else if (target)
+                target.appendChild(element);
+        }
+    };
+    /**
+     * In animation.
+     * @param elements The elements to animate.
+     * @param options.target If defined, the element will be appended to the target.
+     * @param options.insertAfter A child of the target. If defined, the element will be appended right after this anchor element.
+     * @param options.prepared Defines if the animation has been prepared beforehand, useful to avoid performing double preparation.
+     * @param options.stagger If defined, the animation will be staggered using this time value.
+     * @param options.animationOptions The main options of the animation. Reference: {@link [Motion One](https://motion.dev/dom/animate#options)}.
+     * @returns An awaitable promise.
+     */
+    const animateIn = async (elements, options = {}) => {
+        //TODO: probably display can be used also?
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { prepared, stagger, display, duration, ...animationOptions } = options;
+        const durationInSeconds = duration ? duration / 1000 : undefined;
+        if (!prepared)
+            prepareIn(elements, options);
+        const { finished } = animate(elements, keyframes, {
+            ...animationOptions,
+            delay: stagger ? staggerDelay(stagger / 1000) : undefined,
+            duration: durationInSeconds
+        });
+        return await finished;
+    };
+    /**
+     * Out animation.
+     * @param elements The elements to animate.
+     * @param options.remove If defined, the element will be removed from the DOM after the animation ends.
+     * @param options.stagger If defined, the animation will be staggered using this time value.
+     * @param options.animationOptions The main options of the animation. Reference: {@link [Motion One](https://motion.dev/dom/animate#options)}.
+     * @returns An awaitable promise.
+     */
+    const animateOut = async (elements, options = {}) => {
+        const { remove, stagger, target, insertAfter, display = 'none', duration, ...animationOptions } = options;
+        const durationInSeconds = duration ? duration / 1000 : undefined;
+        if (!Array.isArray(elements))
+            elements = [elements];
+        elements = elements.filter((element) => document.body.contains(element));
+        if (!elements.length)
+            return;
+        const { finished } = animate(elements, keyframes, {
+            ...animationOptions,
+            duration: durationInSeconds,
+            delay: stagger ? staggerDelay(stagger / 1000) : undefined,
+            direction: 'reverse'
+        });
+        await finished;
+        for (const element of elements) {
+            if (target && insertAfter !== undefined) {
+                if (insertAfter)
+                    target.insertBefore(element, insertAfter.nextSibling);
+                else {
+                    if (isBrowser && target instanceof HTMLElement) {
+                        target.insertBefore(element, target.firstChild);
+                    }
+                }
+            }
+            else if (target)
+                target.appendChild(element);
+            if (remove)
+                element.remove();
+            else
+                element.style.display = display;
+        }
+    };
+    return { prepareIn, animateIn, animateOut };
+};

package/dist/utils/animations/index.d.ts

@@ -0,0 +1,7 @@
+import type { AnimationsObject } from './types';
+export * from './types';
+export declare const easings: readonly ["linear", "ease", "ease-in", "ease-out", "ease-in-out"];
+/**
+ * Contains all animation functions.
+ */
+export declare const animations: AnimationsObject;

package/dist/utils/animations/index.js

@@ -0,0 +1,62 @@
+import { createAnimation } from './factory';
+export * from './types';
+// Constants
+export const easings = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'];
+/**
+ * Contains all animation functions.
+ */
+export const animations = {
+    /**
+     * Fade
+     */
+    fade: createAnimation({ keyframes: { opacity: [0, 1] }, initialStyles: { opacity: '0' } }),
+    /**
+     * Slide Up
+     */
+    'slide-up': createAnimation({
+        keyframes: { y: [100, 0], opacity: [0, 1] },
+        initialStyles: { transform: 'translateY(100px)', opacity: '0' }
+    }),
+    /**
+     * Slide Down
+     */
+    'slide-down': createAnimation({
+        keyframes: { y: [-100, 0], opacity: [0, 1] },
+        initialStyles: { transform: 'translateY(-100px)', opacity: '0' }
+    }),
+    /**
+     * Slide Right
+     */
+    'slide-right': createAnimation({
+        keyframes: { x: [-100, 0], opacity: [0, 1] },
+        initialStyles: { transform: 'translateX(-100px)', opacity: '0' }
+    }),
+    /**
+     * Slide Left
+     */
+    'slide-left': createAnimation({
+        keyframes: { x: [100, 0], opacity: [0, 1] },
+        initialStyles: { transform: 'translateX(100px)', opacity: '0' }
+    }),
+    /**
+     * Grow
+     */
+    grow: createAnimation({
+        keyframes: { scale: [0, 1], opacity: [0, 1] },
+        initialStyles: { transform: 'scale(0)', opacity: '0' }
+    }),
+    /**
+     * Shrink
+     */
+    shrink: createAnimation({
+        keyframes: { scale: [1.25, 1], opacity: [0, 1] },
+        initialStyles: { transform: 'scale(1.25)', opacity: '0' }
+    }),
+    /**
+     * Spin
+     */
+    spin: createAnimation({
+        keyframes: { rotate: [900, 0], opacity: [0, 1] },
+        initialStyles: { transform: 'rotate(900deg)', opacity: '0' }
+    })
+};

package/dist/utils/animations/types.d.ts

@@ -0,0 +1,39 @@
+import type { AnimationOptions, MotionKeyframesDefinition } from 'motion';
+import type { easings } from '.';
+export interface AnimationProps {
+    keyframes: MotionKeyframesDefinition;
+    initialStyles: {
+        [key: string]: string;
+    };
+}
+type FilteredAnimationOptions = Pick<AnimationOptions, 'duration' | 'easing'> & {
+    stagger?: number;
+};
+type AnimationPrepare<T> = (element: HTMLElement | HTMLElement[], options?: T) => void;
+type AnimationBase<T> = (element: HTMLElement | HTMLElement[], options?: T & FilteredAnimationOptions) => Promise<void>;
+type PrepareProps = {
+    target?: Element;
+    insertAfter?: Node | null;
+    display?: string;
+};
+type AnimationInProps = PrepareProps & {
+    prepared?: true;
+};
+type AnimationOutProps = PrepareProps & {
+    remove?: boolean;
+};
+type PrepareIn = AnimationPrepare<PrepareProps>;
+type AnimationIn = AnimationBase<AnimationInProps>;
+type AnimationOut = AnimationBase<AnimationOutProps>;
+export type AnimationFunctions = {
+    prepareIn: PrepareIn;
+    animateIn: AnimationIn;
+    animateOut: AnimationOut;
+};
+export type Animation = AnimationFunctions & {
+    options?: FilteredAnimationOptions;
+};
+export type AnimationsObject = Readonly<Record<'fade' | 'slide-up' | 'slide-down' | 'slide-right' | 'slide-left' | 'grow' | 'shrink' | 'spin', AnimationFunctions>>;
+export type Easings = typeof easings;
+export type AnimationOptionsCustom = Readonly<Record<'fade' | 'slide-up' | 'slide-down' | 'slide-right' | 'slide-left' | 'grow' | 'shrink' | 'spin', string>>;
+export {};

package/dist/utils/animations/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/custom-code/configs.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Store for Custom Code stored Component configs
+ */
+export declare const componentConfigsStore: import("svelte/store").Writable<null>;
+export type CustomCodeConfigsStore = {
+    component: string;
+    instance: string[];
+}[];
+/**
+ * Store for Custom Code stored Component configs instances
+ */
+export declare const customCodeConfigsStore: import("svelte/store").Writable<CustomCodeConfigsStore>;
+/**
+ * Get configs from custom code.
+ */
+export declare const getProjectConfigs: () => Promise<any>;
+/**
+ * Fetches configs stored in custom code for a given component.
+ * @param component
+ * @returns
+ */
+export declare const getComponentConfigs: (component: string) => Promise<any>;

package/dist/utils/custom-code/configs.js

@@ -0,0 +1,40 @@
+import { writable } from 'svelte/store';
+import { getLogger } from '../logger';
+import { getCustomCode } from './api';
+const logger = getLogger('utils');
+const DISPLAY_NAME = 'finsweetcomponentsconfig';
+/**
+ * Store for Custom Code stored Component configs
+ */
+export const componentConfigsStore = writable(null);
+/**
+ * Store for Custom Code stored Component configs instances
+ */
+export const customCodeConfigsStore = writable([]);
+/**
+ * Get configs from custom code.
+ */
+export const getProjectConfigs = async () => {
+    const [customCodeBlock] = await getCustomCode(DISPLAY_NAME);
+    if (!customCodeBlock || !customCodeBlock.hostedLocation) {
+        return null;
+    }
+    // activate loading state to block iife scripts
+    window.isLoadingCustomCodeConfigs = true;
+    const configs = await import(/* @vite-ignore */ customCodeBlock.hostedLocation);
+    window.isLoadingCustomCodeConfigs = false;
+    customCodeConfigsStore.set(configs);
+    logger.log({}, 'Project custom code configs', configs);
+    return configs;
+};
+/**
+ * Fetches configs stored in custom code for a given component.
+ * @param component
+ * @returns
+ */
+export const getComponentConfigs = async (component) => {
+    const customCodeBlock = await getProjectConfigs();
+    if (!customCodeBlock || Object.keys(customCodeBlock[component]).length === 0)
+        return null;
+    return customCodeBlock[component];
+};

package/dist/utils/custom-code/index.d.ts

@@ -1 +1,2 @@
 export * from './api';
+export * from './configs';

package/dist/utils/custom-code/index.js

@@ -1 +1,2 @@
 export * from './api';
+export * from './configs';

package/dist/utils/diff-mapper/DiffMapper.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/sveltekit';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Interactive: Story;