@finsweet/webflow-apps-utils 1.0.1

package/dist/ui/components/CustomModal.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount, tick } from 'svelte';
+
+	const dispatch = createEventDispatcher<{
+		closemodal: boolean;
+	}>();
+
+	import { LoadingScreen } from '../components';
+	import { CloseIcon } from '../icons';
+
+	export let showModal: boolean;
+	export let disableClose: boolean = false;
+	export let showHeader: boolean = true;
+	export let padding: string = 'var(--padding-regular)';
+	export let width: string = '42em';
+	export let height: string = '100%';
+	export let preventOverlayClose: boolean = false;
+	export let closeIcon: boolean = true;
+	export let loading: boolean = false;
+	export let className: string = '';
+	let modalElement: HTMLElement;
+	let closeButton: HTMLButtonElement;
+
+	onMount(async () => {
+		await tick(); // Ensure DOM is updated
+		if (showModal) {
+			closeButton?.focus();
+		}
+	});
+
+	$: {
+		if (modalElement) {
+			if (showModal) {
+				document.body.style.overflow = 'hidden'; // Prevent scrolling
+			} else {
+				document.body.style.overflow = '';
+			}
+		}
+	}
+
+	/**
+	 * Close the modal
+	 */
+	const handleClose = () => {
+		if (disableClose) return;
+
+		showModal = false;
+		dispatch('closemodal', true);
+	};
+
+	/**
+	 * Handle keydown event
+	 * @param e
+	 */
+	const handleKeyDown = (e: KeyboardEvent) => {
+		if (e.key === 'Escape') {
+			if (!preventOverlayClose) {
+				handleClose();
+			}
+		}
+	};
+</script>
+
+{#if showModal}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		class="modal-overlay {preventOverlayClose ? 'prevent-overlay-close' : ''} {className}"
+		on:click={() => {
+			if (!preventOverlayClose) {
+				handleClose();
+			}
+		}}
+		on:keydown={handleKeyDown}
+		tabindex="-1"
+	>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			class="modal-content"
+			bind:this={modalElement}
+			on:click|stopPropagation
+			style="padding: {padding}; width: {width}; height: {height};"
+		>
+			{#if loading}
+				<LoadingScreen message="Please wait..." active spinnerSize={20} position="absolute" />
+			{/if}
+			{#if showHeader}
+				<div class="header-bar">
+					<slot name="header" />
+					{#if closeIcon}
+						<button
+							on:click={() => {
+								handleClose();
+								dispatch('closemodal', true);
+							}}
+							bind:this={closeButton}><CloseIcon /></button
+						>
+					{/if}
+				</div>
+			{/if}
+
+			{#if $$slots?.customModalContent}
+				{#if loading}
+					<LoadingScreen message="Please wait..." spinnerSize={20} position="absolute" />
+				{/if}
+				<slot name="customModalContent" />
+			{:else}
+				<slot />
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.modal-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgba(0, 0, 0, 0.4);
+		z-index: 99999999997;
+	}
+
+	.modal-content {
+		border-radius: var(--border-radius);
+		background: var(--background1);
+		color: var(--text1);
+		animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+		position: relative;
+	}
+
+	@keyframes zoom {
+		from {
+			transform: scale(0.95);
+		}
+		to {
+			transform: scale(1);
+		}
+	}
+
+	@keyframes fade {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	button {
+		border: none;
+		user-select: none;
+		width: 24px;
+		padding: 0px 4px;
+		font-family: inherit;
+		font-size: inherit;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 24px;
+		border-radius: 4px;
+		color: rgb(171, 171, 171);
+		background: transparent;
+		box-sizing: border-box;
+		box-shadow: none;
+		align-self: center;
+		cursor: pointer;
+	}
+
+	button:hover {
+		filter: brightness(1.1);
+	}
+
+	.header-bar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding-bottom: var(--padding-small);
+		border-bottom: 1px solid var(--border1);
+		gap: 4px;
+		width: 100%;
+		margin-bottom: var(--padding-regular);
+	}
+
+	.prevent-overlay-close {
+		cursor: progress;
+	}
+</style>

package/dist/ui/components/CustomModal.svelte.d.ts

@@ -0,0 +1,45 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const CustomModal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    showModal: boolean;
+    disableClose?: boolean;
+    showHeader?: boolean;
+    padding?: string;
+    width?: string;
+    height?: string;
+    preventOverlayClose?: boolean;
+    closeIcon?: boolean;
+    loading?: boolean;
+    className?: string;
+}, {
+    header: {};
+    customModalContent: {};
+    default: {};
+}>, {
+    click: MouseEvent;
+    closemodal: CustomEvent<boolean>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    customModalContent: {};
+    default: {};
+}, {}, string>;
+type CustomModal = InstanceType<typeof CustomModal>;
+export default CustomModal;

package/dist/ui/components/DisableInEditMode.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { BRAND } from '../../utils';
+
+	import { Tooltip, WarningCircleOutlineIcon } from '..';
+	/**
+	 * Disable the component in edit mode
+	 */
+	export let disabled = false;
+	export let width = '249px';
+	export let disabledMessage = `This option is disabled in edit mode. If you want to change it, please generate a new ${BRAND.COMPONENT}.`;
+</script>
+
+<div class="wrap">
+	{#if disabled}
+		<Tooltip
+			tooltipIcon={WarningCircleOutlineIcon}
+			tooltipIconColor="var(--yellowText)"
+			message={disabledMessage}
+			{width}
+		>
+			{#snippet target()}
+				<div class="categories-disabled wrapper">
+					<slot />
+				</div>
+			{/snippet}
+		</Tooltip>
+	{:else}
+		<slot />
+	{/if}
+</div>
+
+<style>
+	.wrap :global(.dropdown-list) {
+		max-height: 300px !important;
+	}
+
+	.categories-disabled :global(.label-popup .labels span) {
+		opacity: 1;
+		pointer-events: none;
+	}
+	.wrap :global(.dropdown-wrapper) {
+		width: max-content;
+	}
+
+	.wrap > :global(.target:first-child) {
+		width: 100%;
+	}
+
+	.wrap {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		align-self: stretch;
+		justify-content: space-between;
+		width: 100%;
+	}
+
+	.wrap :global([slot='target']:has(.wrapper)) {
+		display: flex;
+		width: 100%;
+		align-items: center;
+		gap: 4px;
+		align-self: stretch;
+		justify-content: space-between;
+	}
+</style>

package/dist/ui/components/DisableInEditMode.svelte.d.ts

@@ -0,0 +1,33 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const DisableInEditMode: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    /**
+         * Disable the component in edit mode
+         */ disabled?: boolean;
+    width?: string;
+    disabledMessage?: string;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type DisableInEditMode = InstanceType<typeof DisableInEditMode>;
+export default DisableInEditMode;

package/dist/ui/components/Divider.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	/**
+	 * Height of the divider
+	 */
+	export let height: string = '1px';
+	/**
+	 * Width of the divider
+	 */
+	export let width: string = '100%';
+	/**
+	 * Background color of the divider
+	 */
+	export let background: string = 'var(--border1)';
+	/**
+	 * Orientation of the divider
+	 */
+	export let rotate = false;
+</script>
+
+<div
+	class="divider"
+	style="height:{height}; width:{width}; 
+  background: {background};
+  {rotate ? 'transform: rotate(0deg)' : ''}"
+></div>
+
+<style>
+	.divider {
+		align-self: stretch;
+	}
+</style>

package/dist/ui/components/Divider.svelte.d.ts

@@ -0,0 +1,31 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Divider: $$__sveltets_2_IsomorphicComponent<{
+    /**
+         * Height of the divider
+         */ height?: string;
+    /**
+         * Width of the divider
+         */ width?: string;
+    /**
+         * Background color of the divider
+         */ background?: string;
+    /**
+         * Orientation of the divider
+         */ rotate?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Divider = InstanceType<typeof Divider>;
+export default Divider;

package/dist/ui/components/Header.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { TriangleDownIcon } from '../icons';
+	export let title = 'Header';
+</script>
+
+<div class="header">
+	<TriangleDownIcon />
+	<span class="title">
+		{title}
+	</span>
+</div>
+
+<style>
+	.header {
+		display: flex;
+		padding: 6px 10px;
+		align-items: center;
+		gap: 8px;
+		border-bottom: 1px solid var(--border1, rgba(255, 255, 255, 0.13));
+		background: var(--background1, #1e1e1e);
+	}
+	.title {
+		color: var(--text-text-1, #d9d9d9);
+		font-family: Inter;
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 16px;
+	}
+</style>

package/dist/ui/components/Header.svelte.d.ts

@@ -0,0 +1,20 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Header: $$__sveltets_2_IsomorphicComponent<{
+    title?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Header = InstanceType<typeof Header>;
+export default Header;

package/dist/ui/components/Iframe.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { FINSWEET_REVERSE_PROXY_URL } from '../../utils';
+
+	/**
+	 * The URL of the iframe
+	 */
+	export let src: string;
+
+	/**
+	 * The ID of the iframe
+	 */
+	export let id: string;
+
+	/**
+	 * The width of the iframe
+	 */
+	export let width: string = '100%';
+
+	/**
+	 * The height of the iframe
+	 */
+	export let height: string = '100%';
+
+	/**
+	 * The title of the iframe
+	 */
+	export let title: string = 'Iframe';
+
+	/**
+	 * Event handler for successful iframe load
+	 */
+	export let onLoadSuccess: () => void = () => {};
+
+	/**
+	 * Event handler for failed iframe load
+	 */
+	export let onLoadError: () => void = () => {};
+
+	let iframeElement: HTMLIFrameElement;
+
+	/**
+	 * Handle the iframe load event
+	 */
+	const handleIframeLoad = () => {
+		const iframe = iframeElement;
+
+		if (iframe?.contentDocument) {
+			const iframeTitle = iframe.contentDocument.title;
+			const { body } = iframe.contentDocument;
+
+			if (
+				body.childNodes.length === 0 ||
+				iframeTitle.indexOf('404') >= 0 ||
+				body.outerHTML.includes('<span>404</span>')
+			) {
+				// Notify parent of the error
+				onLoadError();
+				return;
+			}
+
+			// Notify parent of successful load
+			onLoadSuccess();
+
+			return;
+		}
+
+		// Notify parent of the error
+		onLoadError();
+	};
+</script>
+
+<iframe
+	{id}
+	bind:this={iframeElement}
+	{title}
+	src={`${FINSWEET_REVERSE_PROXY_URL}${src}`}
+	on:load={handleIframeLoad}
+	class="iframe"
+	{width}
+	{height}
+></iframe>
+
+<style>
+	.iframe {
+		border: none;
+		border-radius: 4px;
+		background: var(--text2);
+	}
+</style>

package/dist/ui/components/Iframe.svelte.d.ts

@@ -0,0 +1,40 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Iframe: $$__sveltets_2_IsomorphicComponent<{
+    /**
+         * The URL of the iframe
+         */ src: string;
+    /**
+         * The ID of the iframe
+         */ id: string;
+    /**
+         * The width of the iframe
+         */ width?: string;
+    /**
+         * The height of the iframe
+         */ height?: string;
+    /**
+         * The title of the iframe
+         */ title?: string;
+    /**
+         * Event handler for successful iframe load
+         */ onLoadSuccess?: () => void;
+    /**
+         * Event handler for failed iframe load
+         */ onLoadError?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Iframe = InstanceType<typeof Iframe>;
+export default Iframe;