@finsweet/webflow-apps-utils 1.0.2 → 1.0.3

package/dist/ui/components/CustomModal.svelte

@@ -1,192 +0,0 @@
-<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

@@ -1,45 +0,0 @@
-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

@@ -1,66 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-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

@@ -1,31 +0,0 @@
-<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

@@ -1,31 +0,0 @@
-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

@@ -1,30 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-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

@@ -1,89 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-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;