@finsweet/webflow-apps-utils 1.0.5 → 1.0.7

package/dist/stores/index.d.ts

@@ -1,6 +1,7 @@
 export * from './breakpoints';
 export * from './forms';
 export * from './componentInjectErrors';
+export * from './isPreviewMode';
 export * from './router';
 export * from './showConfirmActionModal';
 export * from './siteInfo';

package/dist/stores/index.js

@@ -1,6 +1,7 @@
 export * from './breakpoints';
 export * from './forms';
 export * from './componentInjectErrors';
+export * from './isPreviewMode';
 export * from './router';
 export * from './showConfirmActionModal';
 export * from './siteInfo';

package/dist/stores/isPreviewMode.d.ts

@@ -0,0 +1 @@
+export declare const isPreviewMode: import("svelte/store").Writable<boolean>;

package/dist/stores/isPreviewMode.js

@@ -0,0 +1,2 @@
+import { writable } from 'svelte/store';
+export const isPreviewMode = writable(false);

package/dist/types/dom.d.ts

@@ -0,0 +1 @@
+export type FormField = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;

package/dist/types/dom.js

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

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './auth';
+export * from './dom';
 export * from './customCode';
 export * from './license';
 export * from './webflow';

package/dist/types/index.js

@@ -1,4 +1,5 @@
 export * from './auth';
+export * from './dom';
 export * from './customCode';
 export * from './license';
 export * from './webflow';

package/dist/types/webflow.d.ts

@@ -96,7 +96,7 @@ export type XSCPMetadata = {
         }[];
     };
 };
-type PastedNodes = {
+export type PastedNodes = {
     children: string[];
     classes: string[];
     tag: string;

package/dist/ui/components/input/Input.svelte

@@ -474,28 +474,24 @@
 	</div>
 {/snippet}
 
-{#if hasAlert}
-	<Tooltip
-		message={alert?.message || ''}
-		placement="top"
-		listener="hover"
-		listenerout="hover"
-		showArrow={true}
-		disabled={false}
-		hidden={false}
-		fontColor="var(--actionPrimaryText)"
-		width="max-content"
-		padding="6px"
-		bgColor={getTooltipColor(alert?.type || 'info')}
-		class="input-tooltip"
-	>
-		{#snippet target()}
-			{@render inputWrapper()}
-		{/snippet}
-	</Tooltip>
-{:else}
-	{@render inputWrapper()}
-{/if}
+<Tooltip
+	message={hasAlert ? alert?.message || '' : ''}
+	placement="top"
+	listener="hover"
+	listenerout="hover"
+	showArrow={true}
+	hidden={!hasAlert}
+	disabled={!hasAlert || !alert?.message}
+	fontColor="var(--actionPrimaryText)"
+	width="max-content"
+	padding="6px"
+	bgColor={getTooltipColor(alert?.type || 'info')}
+	class="input-tooltip"
+>
+	{#snippet target()}
+		{@render inputWrapper()}
+	{/snippet}
+</Tooltip>
 
 <style>
 	:global(.input-tooltip) {

package/dist/ui/components/layout/Layout.svelte

@@ -41,6 +41,8 @@
 		containerMode?: boolean;
 		/** Size variant for the footer */
 		footerSize?: 'normal' | 'large';
+		/** Padding for the main content container (CSS value) */
+		mainContentPadding?: string;
 		/** Array of notification objects for tab status indicators */
 		notifications?: Array<{
 			/** Tab path this notification applies to */
@@ -76,6 +78,7 @@
 		sidebarWidth = '274px',
 		containerMode = false,
 		footerSize = 'normal',
+		mainContentPadding = 'var(--Spacing-24, 24px)',
 		notifications = [],
 		sidebar,
 		main,
@@ -240,7 +243,7 @@
 	<!-- Main Content -->
 	<div class="main-content" data-area="main">
 		{#if main}
-			<div class="main-content-container">
+			<div class="main-content-container" style="padding: {mainContentPadding}">
 				{#if showEditModeMessage}
 					<EditModeMessage />
 				{/if}
@@ -462,7 +465,6 @@
 		flex-direction: column;
 		align-items: flex-start;
 		align-self: stretch;
-		padding: var(--Spacing-24, 24px);
 		gap: var(--Spacing-16, 16px);
 	}
 

package/dist/ui/components/layout/Layout.svelte.d.ts

@@ -28,6 +28,8 @@ interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
     containerMode?: boolean;
     /** Size variant for the footer */
     footerSize?: 'normal' | 'large';
+    /** Padding for the main content container (CSS value) */
+    mainContentPadding?: string;
     /** Array of notification objects for tab status indicators */
     notifications?: Array<{
         /** Tab path this notification applies to */

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

@@ -43,6 +43,7 @@
 
 		// Link behavior
 		link = false,
+		linkHover = true,
 
 		// Event handlers
 		onclick,
@@ -211,6 +212,7 @@
 		const classes = ['labels'];
 		if (disabled) classes.push('disabled');
 		if (link) classes.push('link');
+		if (link && linkHover) classes.push('link-hover');
 		if (loading) classes.push('is-busy');
 		if (hasPopup && popupConfig.active) classes.push('active');
 		classes.push(className);
@@ -839,8 +841,8 @@
 		border-radius: 4px;
 	}
 
-	.labels.link:hover:not(.disabled),
-	.labels.link.is-busy {
+	.labels.link-hover:hover:not(.disabled),
+	.labels.link-hover.is-busy {
 		background-color: var(--defaultLightHover);
 		border-radius: 4px;
 	}

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

@@ -25,26 +25,48 @@ export interface PopupConfig {
     onclick?: () => void;
 }
 export interface TextProps {
+    /** The text content to display */
     label?: string;
+    /** Additional CSS classes to apply to the component */
     class?: string;
+    /** Whether to render the label as HTML instead of plain text */
     raw?: boolean;
+    /** Whether to capitalize the first letter of the text */
     capitalize?: boolean;
+    /** Whether the component is disabled and non-interactive */
     disabled?: boolean;
+    /** HTML title attribute for accessibility and hover tooltip */
     title?: string;
+    /** Text wrapping behavior - 'nowrap' prevents wrapping, 'normal' allows wrapping */
     wrap?: 'nowrap' | 'normal';
+    /** Horizontal alignment of the text content */
     textAlign?: 'left' | 'center' | 'right';
+    /** Font size - use predefined sizes or custom CSS value */
     fontSize?: TEXT_SIZES | string;
+    /** Font weight - use predefined weights or custom CSS value */
     fontWeight?: TEXT_WEIGHTS | string;
+    /** Text color as any valid CSS color value */
     fontColor?: string;
+    /** Fixed height for the component container */
     height?: string;
+    /** Width at which text will be truncated with ellipsis */
     ellipsisOnWidth?: string;
+    /** Tooltip configuration object with all tooltip-related settings */
     tooltip?: Partial<TooltipProps>;
     /** Specifies whether to show tooltip on the text or icon. Requires icon prop when set to 'icon' */
     tooltipTarget?: 'text' | 'icon';
+    /** Configuration for action popup functionality (delete, reset, etc.) */
     popup?: PopupConfig;
+    /** Icon component to display alongside the text */
     icon?: Component | null;
+    /** Whether to show loading spinner instead of icon */
     loading?: boolean;
+    /** Whether to style the text as a clickable link with pointer cursor */
     link?: boolean;
+    /** Whether to show hover background effect when link is true (default: true) */
+    linkHover?: boolean;
+    /** Custom content snippet to render instead of the label text */
     children?: Snippet;
+    /** Additional pill/badge content snippet to display */
     pill?: Snippet;
 }

package/dist/ui/icons/ChevronIcon.svelte

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"

package/dist/utils/constants.d.ts

@@ -59,3 +59,8 @@ export declare const BRAND: {
  */
 export declare const FINSWEET_COMPONENTS_WEBFLOW_APP_ORIGINS: string[];
 export declare const ACCEPTED_WEBFLOW_ELEMENTS_FOR_INSERTION: string[];
+/**
+ * List of domains that are considered staging.
+ */
+export declare const STAGING_DOMAINS: string[];
+export declare const FINSWEET_LOGO_URL = "https://cdn.prod.website-files.com/61819aaca0e7ac73f85a2d54/6865d68f194e84da9c6452e5_Components%20White%20Logo.svg";

package/dist/utils/constants.js

@@ -71,3 +71,14 @@ export const ACCEPTED_WEBFLOW_ELEMENTS_FOR_INSERTION = [
     'Container',
     'BlockContainer'
 ];
+/**
+ * List of domains that are considered staging.
+ */
+export const STAGING_DOMAINS = [
+    'webflow.io',
+    'webflow-ext.com',
+    'localhost',
+    'canvas.webflow.com',
+    'server.wized.com'
+];
+export const FINSWEET_LOGO_URL = 'https://cdn.prod.website-files.com/61819aaca0e7ac73f85a2d54/6865d68f194e84da9c6452e5_Components%20White%20Logo.svg';

package/dist/utils/helpers/dom.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Check if an element is scrollable
+ * @param element
+ * @returns True or false
+ */
+export declare const isScrollable: (element: Element) => boolean;
+/**
+ * Finds the first child text node of an element
+ * @param element The element to search into.
+ */
+export declare const findTextNode: (element: HTMLElement) => ChildNode | undefined;
+/**
+ * Function to fetch the Document of a specified URL.
+ *
+ * @param url - The URL of the page.
+ * @param slug - [optional] The slug of the page.
+ * @returns
+ */
+export declare const fetchDocument: (url: string, slug?: string) => Promise<Document>;
+/**
+ * Function to fetch the Elements of a specified URL.
+ *
+ * @param url - The URL of the page.
+ * @param tagName - The tag name of the elements to fetch. If not provided, returns the whole page as a string.
+ * @param asElement - [optional] If true, returns the element as an object.
+ * @returns
+ */
+export declare const fetchElements: (url: URL, tagName?: string, asElement?: boolean) => Promise<string[] | HTMLElement[]>;
+/**
+ * Fetch elements by attribute
+ */
+export declare const fetchElementsByAttribute: (url: URL, attribute: string) => Promise<string[]>;
+/**
+ * Checks if an element is visible
+ * @param element
+ */
+export declare const isVisible: (element: HTMLElement) => boolean;

package/dist/utils/helpers/dom.js

@@ -0,0 +1,104 @@
+import { load } from 'cheerio';
+import { FINSWEET_REVERSE_PROXY_URL } from '../constants';
+import { isHTMLElement } from './guards';
+/**
+ * Check if an element is scrollable
+ * @param element
+ * @returns True or false
+ */
+export const isScrollable = (element) => {
+    const { overflow } = getComputedStyle(element);
+    return overflow === 'auto' || overflow === 'scroll';
+};
+/**
+ * Finds the first child text node of an element
+ * @param element The element to search into.
+ */
+export const findTextNode = (element) => {
+    let textNode;
+    for (const node of Array.from(element.childNodes)) {
+        if (isHTMLElement(node) && node.childNodes.length)
+            textNode = findTextNode(node);
+        else if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())
+            textNode = node;
+        if (textNode)
+            break;
+    }
+    return textNode;
+};
+/**
+ * Function to fetch the Document of a specified URL.
+ *
+ * @param url - The URL of the page.
+ * @param slug - [optional] The slug of the page.
+ * @returns
+ */
+export const fetchDocument = async (url, slug) => {
+    const pageUrl = new URL(url);
+    if (slug)
+        pageUrl.pathname = slug;
+    const target = `${FINSWEET_REVERSE_PROXY_URL}${pageUrl}`;
+    const response = await fetch(target);
+    const pageContent = await response.text();
+    const parser = new DOMParser();
+    return parser.parseFromString(pageContent, 'text/html');
+};
+/**
+ * Function to fetch the Elements of a specified URL.
+ *
+ * @param url - The URL of the page.
+ * @param tagName - The tag name of the elements to fetch. If not provided, returns the whole page as a string.
+ * @param asElement - [optional] If true, returns the element as an object.
+ * @returns
+ */
+export const fetchElements = async (url, tagName, asElement) => {
+    const target = `${FINSWEET_REVERSE_PROXY_URL}${url.href}`;
+    const response = await fetch(target);
+    const html = await response.text();
+    const $ = load(html);
+    // return the whole page if no tag name is provided
+    if (!tagName)
+        return [$.html()];
+    // crawl page and get elements
+    if (asElement && tagName) {
+        const elements = $(tagName)
+            .map((_, el) => {
+            const outerHTML = $.html(el); // Get the outer HTML of each element
+            const parser = new DOMParser();
+            const parsedDoc = parser.parseFromString(outerHTML, 'text/html');
+            const element = parsedDoc.querySelector(tagName);
+            return element;
+        })
+            .get();
+        return elements;
+    }
+    // crawl page and get elements as strings
+    const elements = $(tagName)
+        .map((_, el) => {
+        const outerHTML = $.html(el);
+        return outerHTML;
+    })
+        .get();
+    return elements;
+};
+/**
+ * Fetch elements by attribute
+ */
+export const fetchElementsByAttribute = async (url, attribute) => {
+    const target = `${FINSWEET_REVERSE_PROXY_URL}${url.href}`;
+    const response = await fetch(target);
+    const html = await response.text();
+    const $ = load(html);
+    const elements = $(attribute)
+        .map((_, el) => {
+        const outerHTML = $.html(el);
+        return outerHTML;
+    })
+        .get();
+    return elements;
+};
+/**
+ * Checks if an element is visible
+ * @param element
+ */
+export const isVisible = (element) => !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);

package/dist/utils/helpers/encodeDecodeConfigs.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Converts a configuration object to a base64-encoded string.
+ * @param {object} configs
+ * @returns
+ */
+export declare const encodeComponentConfigs: (configs: object) => string;
+/**
+ * Decodes a base64-encoded configuration string to a configuration object.
+ * @param configsString
+ * @param component
+ * @returns
+ */
+export declare const decodeComponentConfigs: <T>(configsString: string) => T;

package/dist/utils/helpers/encodeDecodeConfigs.js

@@ -0,0 +1,20 @@
+/**
+ * Converts a configuration object to a base64-encoded string.
+ * @param {object} configs
+ * @returns
+ */
+export const encodeComponentConfigs = (configs) => {
+    const previewModeConfigs = btoa(JSON.stringify(configs));
+    return previewModeConfigs;
+};
+/**
+ * Decodes a base64-encoded configuration string to a configuration object.
+ * @param configsString
+ * @param component
+ * @returns
+ */
+export const decodeComponentConfigs = (configsString) => {
+    const jsonString = atob(configsString);
+    const configParsed = JSON.parse(jsonString);
+    return configParsed;
+};

package/dist/utils/helpers/events.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Adds an event listener to an element.
+ * @returns A callback to remove the event listener from the element.
+ *
+ * @param target
+ * @param type
+ * @param listener
+ * @param options
+ */
+export declare function addListener<TargetInterface extends EventTarget, Type extends TargetInterface extends Window ? keyof WindowEventMap | string : TargetInterface extends Document ? keyof DocumentEventMap | string : TargetInterface extends HTMLElement ? keyof HTMLElementEventMap | string : keyof ElementEventMap | string, Listener extends Type extends keyof WindowEventMap ? (this: Document, ev: WindowEventMap[Type]) => unknown : Type extends keyof DocumentEventMap ? (this: Document, ev: DocumentEventMap[Type]) => unknown : Type extends keyof HTMLElementEventMap ? (this: HTMLElement, ev: HTMLElementEventMap[Type]) => unknown : Type extends keyof ElementEventMap ? (this: Element, ev: ElementEventMap[Type]) => unknown : EventListenerOrEventListenerObject>(target: TargetInterface | null | undefined, type: Type, listener: Listener, options?: boolean | AddEventListenerOptions): () => void;
+type AllowedEvent = keyof DocumentEventMap | 'w-close';
+/**
+ * Dispatches a custom event that bubbles from the target.
+ * @param target The element where the event will originate.
+ * @param events The event name or an array of event names.
+ * @returns True if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.
+ */
+export declare const simulateEvent: (target: EventTarget, events: AllowedEvent | Array<AllowedEvent>) => boolean;
+export {};

package/dist/utils/helpers/events.js

@@ -0,0 +1,28 @@
+import { noop } from './noop';
+/**
+ * Adds an event listener to an element.
+ * @returns A callback to remove the event listener from the element.
+ *
+ * @param target
+ * @param type
+ * @param listener
+ * @param options
+ */
+export function addListener(target, type, listener, options) {
+    if (!target)
+        return noop;
+    target.addEventListener(type, listener, options);
+    return () => target.removeEventListener(type, listener, options);
+}
+/**
+ * Dispatches a custom event that bubbles from the target.
+ * @param target The element where the event will originate.
+ * @param events The event name or an array of event names.
+ * @returns True if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.
+ */
+export const simulateEvent = (target, events) => {
+    if (!Array.isArray(events))
+        events = [events];
+    const eventsSuccess = events.map((event) => target.dispatchEvent(new Event(event, { bubbles: true })));
+    return eventsSuccess.every((success) => success);
+};

package/dist/utils/helpers/forms.d.ts

@@ -0,0 +1,22 @@
+import type { FormField } from '../../types';
+import { simulateEvent } from './events';
+/**
+ * Clears the form field's value and emits an input and changed event.
+ * If the field is a checkbox or a radio, it will unselect it.
+ * @param field The `FormField` to clear.
+ * @param omitEvents By default, events are dispatched from the `FormField`. In some cases, these events might collide with other logic of the system.
+ * You can omit certain events from being dispatched by passing them in an array.
+ */
+export declare const clearFormField: (field: FormField, omitEvents?: Parameters<typeof simulateEvent>["1"]) => void;
+/**
+ * Gets the value of a given input element.
+ * @param {FormField} input
+ */
+export declare const getFormFieldValue: (input: FormField) => string;
+/**
+ * Sets a value to a FormField element and emits `click`, `input` and `change` Events.
+ *
+ * @param element The FormField to update.
+ * @param value `boolean` for Checkboxes and Radios, `string` for the rest.
+ */
+export declare const setFormFieldValue: (element: FormField, value: string | boolean) => void;

package/dist/utils/helpers/forms.js

@@ -0,0 +1,82 @@
+import { FORM_CSS_CLASSES } from '../webflow';
+import { simulateEvent } from './events';
+import { isHTMLInputElement } from './guards';
+/**
+ * Clears the form field's value and emits an input and changed event.
+ * If the field is a checkbox or a radio, it will unselect it.
+ * @param field The `FormField` to clear.
+ * @param omitEvents By default, events are dispatched from the `FormField`. In some cases, these events might collide with other logic of the system.
+ * You can omit certain events from being dispatched by passing them in an array.
+ */
+export const clearFormField = (field, omitEvents = []) => {
+    const { type } = field;
+    if (isHTMLInputElement(field) && ['checkbox', 'radio'].includes(type)) {
+        if (!field.checked)
+            return;
+        // Reset the field's value
+        field.checked = false;
+        // Emit DOM events
+        simulateEvent(field, ['click', 'input', 'change'].filter((event) => !omitEvents.includes(event)));
+        if (type === 'checkbox')
+            return;
+        // Clear custom radio button classes
+        const { parentElement } = field;
+        if (!parentElement)
+            return;
+        const radioInput = parentElement.querySelector(`.${FORM_CSS_CLASSES.radioInput}`);
+        if (!radioInput)
+            return;
+        radioInput.classList.remove(FORM_CSS_CLASSES.checkboxOrRadioFocus, FORM_CSS_CLASSES.checkboxOrRadioChecked);
+        return;
+    }
+    // Reset the field's value
+    field.value = '';
+    // Emit DOM events
+    simulateEvent(field, ['input', 'change'].filter((eventKey) => !omitEvents.includes(eventKey)));
+};
+/**
+ * Gets the value of a given input element.
+ * @param {FormField} input
+ */
+export const getFormFieldValue = (input) => {
+    let { value } = input;
+    // Perform actions depending on input type
+    if (input.type === 'checkbox')
+        value = input.checked.toString();
+    if (input.type === 'radio') {
+        // Get the checked radio
+        const checkedOption = input
+            .closest('form')
+            ?.querySelector(`input[name="${input.name}"]:checked`);
+        // If exists, set its value
+        value = isHTMLInputElement(checkedOption) ? checkedOption.value : '';
+    }
+    return value.toString();
+};
+/**
+ * Sets a value to a FormField element and emits `click`, `input` and `change` Events.
+ *
+ * @param element The FormField to update.
+ * @param value `boolean` for Checkboxes and Radios, `string` for the rest.
+ */
+export const setFormFieldValue = (element, value) => {
+    const { type } = element;
+    const isRadio = type === 'radio';
+    const isCheckbox = type === 'checkbox';
+    if (isRadio || isCheckbox) {
+        if (!isHTMLInputElement(element) ||
+            typeof value !== 'boolean' ||
+            value === element.checked ||
+            (isRadio && value === false)) {
+            return;
+        }
+        element.checked = value;
+    }
+    else {
+        if (element.value === value)
+            return;
+        element.value = value.toString();
+    }
+    // Emit DOM events
+    simulateEvent(element, ['click', 'input', 'change']);
+};