@onsvisual/svelte-components 1.0.37 → 1.0.38

package/dist/inputs/Toolbar/HelpModal.svelte

@@ -1,234 +1,234 @@
-<script lang="ts">
-	import { getContext } from "svelte";
-	// import { get, set } from "svelte/store";
-	import { fly } from "svelte/transition";
-	import Checkbox from "../Checkbox/Checkbox.svelte";
-	import Button from "../Button/Button.svelte";
-
-	let {
-		triggerElement = null,
-		onClose = () => {}
-	}: {
-		triggerElement?: HTMLElement | null;
-		onClose?: () => void;
-	} = $props();
-
-	// --- Context ---
-	const activeModalId = getContext("activeModalId");
-	const showHelpModals = getContext("showHelpModals");
-	const { buttonIds } = getContext("buttonIds");
-
-	// --- Derived state from stores ---
-	const ids = $derived(buttonIds);
-	const currentActiveId = $derived(activeModalId);
-	const showHelp = $derived(showHelpModals);
-
-	// --- Local state ---
-	let modalPosition = $state({ top: 50, left: -5 });
-	let notchPosition = $state({ left: 17, right: "auto" });
-	let dontShowMeAgain = $state(false);
-
-	$effect(() => {
-		if (!triggerElement) return;
-
-		const rect = triggerElement.getBoundingClientRect();
-
-		// Calculate the modal's position
-		// const spaceBelow = window.innerHeight - rect.bottom;
-		// const spaceAbove = rect.top;
-		const spaceRight = window.innerWidth - rect.right;
-
-		let newLeft = window.scrollX - 10;
-		let newNotchLeft: number | "auto" = 17;
-		let newNotchRight: number | "auto" = "auto";
-
-		// if (spaceBelow < 200 && spaceAbove > 200) {
-		// 	newTop = rect.top + window.scrollY - 10;
-		// }
-
-		if (spaceRight < 300) {
-			newLeft = window.scrollX - 325;
-			newNotchLeft = "auto";
-			newNotchRight = -350;
-		}
-
-		// modalPosition.top = newTop;
-		modalPosition.left = newLeft;
-		notchPosition.left = newNotchLeft;
-		notchPosition.right = newNotchRight;
-	});
-
-	// Update localStorage if "Don't show me again" is checked
-	function disableHelpModalsPermanently() {
-		localStorage.setItem("showHelpModals", "false");
-		sessionStorage.setItem("showHelpModals", "false");
-		showHelpModals.set(false);
-	}
-
-	// Hide modals until refresh
-	function hideHelpModalsUntilRefresh() {
-		sessionStorage.setItem("showHelpModals", "false");
-		showHelpModals.set(false);
-	}
-
-	// Navigate to the next modal
-	function nextModal() {
-		const currentIndex = $ids.indexOf($currentActiveId);
-		if (currentIndex !== -1 && currentIndex < $ids.length - 1) {
-			activeModalId.set($ids[currentIndex + 1]);
-			// console.log("Navigating to next modal:", ids[currentIndex + 1]);
-		}
-		if (dontShowMeAgain) {
-			disableHelpModalsPermanently(); // Disable help modals permanently
-		}
-	}
-
-	function handleSkip() {
-		if (dontShowMeAgain) {
-			disableHelpModalsPermanently(); // Disable help modals permanently
-		} else {
-			hideHelpModalsUntilRefresh();
-		}
-	}
-
-	// Navigate to the previous modal
-	function previousModal() {
-		const currentIndex = $ids.indexOf($currentActiveId);
-		if (currentIndex > 0) {
-			activeModalId.set($ids[currentIndex - 1]);
-			// console.log("Navigating to previous modal:", ids[currentIndex - 1]);
-		}
-		if (dontShowMeAgain) {
-			disableHelpModalsPermanently(); // Disable help modals permanently
-		}
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === "Escape") onClose();
-	}
-</script>
-
-<svelte:window on:keydown={handleKeydown} />
-{#if $showHelp}
-	<div class="help-modal-wrapper" style="top: {modalPosition.top}px; left: {modalPosition.left}px;">
-		<!-- Notch -->
-		<div
-			class="help-modal-notch"
-			style="left: {notchPosition.left}px;right: {notchPosition.right}px;"
-		></div>
-
-		<!-- Modal Content -->
-		<div class="help-modal" role="dialog" aria-modal="true">
-			<slot />
-			<!-- <button class="close-button" on:click="{onClose}" aria-label="Close help">×</button> -->
-
-			<div class="ons-padding-4">
-				<Checkbox
-					id="dontShowMeAgain"
-					label="Don't show me again"
-					bind:checked={dontShowMeAgain}
-					compact
-				/>
-			</div>
-			<div class="ons-grid-flex ons-grid-flex--between ons-grid-flex-vertical-center">
-				<button class="btn-link" on:click={handleSkip} aria-label="Skip instructions">Skip</button>
-				{#if $ids.indexOf($currentActiveId) > 0}
-					<span style="margin-left:auto; margin-right:10px">
-						<Button variant="secondary" on:click={previousModal}>Back</Button>
-					</span>
-				{/if}
-
-				{#if $ids.indexOf($currentActiveId) != $ids.length - 1}
-					<Button on:click={nextModal}>Next</Button>
-				{/if}
-				{#if $ids.indexOf($currentActiveId) == $ids.length - 1}
-					<Button on:click={hideHelpModalsUntilRefresh}>Get started</Button>
-				{/if}
-			</div>
-		</div>
-	</div>
-{/if}
-
-<style>
-	.help-modal-wrapper {
-		position: absolute;
-		z-index: 10;
-	}
-
-	.help-modal-notch {
-		position: absolute;
-		top: -10px;
-		width: 0;
-		height: 0;
-		border-left: 10px solid transparent;
-		border-right: 10px solid transparent;
-		border-bottom: 10px solid white;
-		z-index: 1;
-	}
-
-	.help-modal {
-		position: absolute;
-		flex-direction: column;
-		justify-content: center;
-		align-items: flex-start;
-		padding: 16px;
-		isolation: isolate;
-
-		width: 360px;
-
-		background: #ffffff;
-		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-		border-radius: 16px;
-
-		/* Inside auto layout */
-		flex: none;
-		order: 2;
-		flex-grow: 0;
-	}
-
-	.close-button {
-		position: absolute;
-		top: 0.5rem;
-		right: 0.5rem;
-		background: none;
-		border: none;
-		font-size: 1.25rem;
-		color: #666;
-		cursor: pointer;
-	}
-
-	.close-button:hover {
-		color: #333;
-	}
-
-	.ons-padding-4 {
-		padding-top: var(--4-units, 16px);
-		padding-bottom: var(--4-units, 16px);
-	}
-
-	button.btn-link {
-		line-height: 1.3;
-		color: var(--link, #206095);
-		background: none;
-		margin: 0;
-		padding: 0;
-		border: none;
-		text-decoration: underline;
-		text-decoration-thickness: 1px;
-		text-underline-position: under;
-	}
-	button.btn-link:hover {
-		color: var(--link-hover, #003c57) !important;
-		text-decoration-thickness: 2px;
-	}
-	button.btn-link:focus {
-		background-color: #fbc900 !important;
-		box-shadow:
-			0 -2px #fbc900,
-			0 4px #222;
-		color: #222 !important;
-		outline: 3px solid transparent;
-		outline-offset: 1px;
-		text-decoration: none;
-	}
-</style>
+<script lang="ts">
+	import { getContext } from "svelte";
+	// import { get, set } from "svelte/store";
+	import { fly } from "svelte/transition";
+	import Checkbox from "../Checkbox/Checkbox.svelte";
+	import Button from "../Button/Button.svelte";
+
+	let {
+		triggerElement = null,
+		onClose = () => {}
+	}: {
+		triggerElement?: HTMLElement | null;
+		onClose?: () => void;
+	} = $props();
+
+	// --- Context ---
+	const activeModalId = getContext("activeModalId");
+	const showHelpModals = getContext("showHelpModals");
+	const { buttonIds } = getContext("buttonIds");
+
+	// --- Derived state from stores ---
+	const ids = $derived(buttonIds);
+	const currentActiveId = $derived(activeModalId);
+	const showHelp = $derived(showHelpModals);
+
+	// --- Local state ---
+	let modalPosition = $state({ top: 50, left: -5 });
+	let notchPosition = $state({ left: 17, right: "auto" });
+	let dontShowMeAgain = $state(false);
+
+	$effect(() => {
+		if (!triggerElement) return;
+
+		const rect = triggerElement.getBoundingClientRect();
+
+		// Calculate the modal's position
+		// const spaceBelow = window.innerHeight - rect.bottom;
+		// const spaceAbove = rect.top;
+		const spaceRight = window.innerWidth - rect.right;
+
+		let newLeft = window.scrollX - 10;
+		let newNotchLeft: number | "auto" = 17;
+		let newNotchRight: number | "auto" = "auto";
+
+		// if (spaceBelow < 200 && spaceAbove > 200) {
+		// 	newTop = rect.top + window.scrollY - 10;
+		// }
+
+		if (spaceRight < 300) {
+			newLeft = window.scrollX - 325;
+			newNotchLeft = "auto";
+			newNotchRight = -350;
+		}
+
+		// modalPosition.top = newTop;
+		modalPosition.left = newLeft;
+		notchPosition.left = newNotchLeft;
+		notchPosition.right = newNotchRight;
+	});
+
+	// Update localStorage if "Don't show me again" is checked
+	function disableHelpModalsPermanently() {
+		localStorage.setItem("showHelpModals", "false");
+		sessionStorage.setItem("showHelpModals", "false");
+		showHelpModals.set(false);
+	}
+
+	// Hide modals until refresh
+	function hideHelpModalsUntilRefresh() {
+		sessionStorage.setItem("showHelpModals", "false");
+		showHelpModals.set(false);
+	}
+
+	// Navigate to the next modal
+	function nextModal() {
+		const currentIndex = $ids.indexOf($currentActiveId);
+		if (currentIndex !== -1 && currentIndex < $ids.length - 1) {
+			activeModalId.set($ids[currentIndex + 1]);
+			// console.log("Navigating to next modal:", ids[currentIndex + 1]);
+		}
+		if (dontShowMeAgain) {
+			disableHelpModalsPermanently(); // Disable help modals permanently
+		}
+	}
+
+	function handleSkip() {
+		if (dontShowMeAgain) {
+			disableHelpModalsPermanently(); // Disable help modals permanently
+		} else {
+			hideHelpModalsUntilRefresh();
+		}
+	}
+
+	// Navigate to the previous modal
+	function previousModal() {
+		const currentIndex = $ids.indexOf($currentActiveId);
+		if (currentIndex > 0) {
+			activeModalId.set($ids[currentIndex - 1]);
+			// console.log("Navigating to previous modal:", ids[currentIndex - 1]);
+		}
+		if (dontShowMeAgain) {
+			disableHelpModalsPermanently(); // Disable help modals permanently
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === "Escape") onClose();
+	}
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+{#if $showHelp}
+	<div class="help-modal-wrapper" style="top: {modalPosition.top}px; left: {modalPosition.left}px;">
+		<!-- Notch -->
+		<div
+			class="help-modal-notch"
+			style="left: {notchPosition.left}px;right: {notchPosition.right}px;"
+		></div>
+
+		<!-- Modal Content -->
+		<div class="help-modal" role="dialog" aria-modal="true">
+			<slot />
+			<!-- <button class="close-button" on:click="{onClose}" aria-label="Close help">×</button> -->
+
+			<div class="ons-padding-4">
+				<Checkbox
+					id="dontShowMeAgain"
+					label="Don't show me again"
+					bind:checked={dontShowMeAgain}
+					compact
+				/>
+			</div>
+			<div class="ons-grid-flex ons-grid-flex--between ons-grid-flex-vertical-center">
+				<button class="btn-link" on:click={handleSkip} aria-label="Skip instructions">Skip</button>
+				{#if $ids.indexOf($currentActiveId) > 0}
+					<span style="margin-left:auto; margin-right:10px">
+						<Button variant="secondary" on:click={previousModal}>Back</Button>
+					</span>
+				{/if}
+
+				{#if $ids.indexOf($currentActiveId) != $ids.length - 1}
+					<Button on:click={nextModal}>Next</Button>
+				{/if}
+				{#if $ids.indexOf($currentActiveId) == $ids.length - 1}
+					<Button on:click={hideHelpModalsUntilRefresh}>Get started</Button>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.help-modal-wrapper {
+		position: absolute;
+		z-index: 10;
+	}
+
+	.help-modal-notch {
+		position: absolute;
+		top: -10px;
+		width: 0;
+		height: 0;
+		border-left: 10px solid transparent;
+		border-right: 10px solid transparent;
+		border-bottom: 10px solid white;
+		z-index: 1;
+	}
+
+	.help-modal {
+		position: absolute;
+		flex-direction: column;
+		justify-content: center;
+		align-items: flex-start;
+		padding: 16px;
+		isolation: isolate;
+
+		width: 360px;
+
+		background: #ffffff;
+		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
+		border-radius: 16px;
+
+		/* Inside auto layout */
+		flex: none;
+		order: 2;
+		flex-grow: 0;
+	}
+
+	.close-button {
+		position: absolute;
+		top: 0.5rem;
+		right: 0.5rem;
+		background: none;
+		border: none;
+		font-size: 1.25rem;
+		color: #666;
+		cursor: pointer;
+	}
+
+	.close-button:hover {
+		color: #333;
+	}
+
+	.ons-padding-4 {
+		padding-top: var(--4-units, 16px);
+		padding-bottom: var(--4-units, 16px);
+	}
+
+	button.btn-link {
+		line-height: 1.3;
+		color: var(--link, #206095);
+		background: none;
+		margin: 0;
+		padding: 0;
+		border: none;
+		text-decoration: underline;
+		text-decoration-thickness: 1px;
+		text-underline-position: under;
+	}
+	button.btn-link:hover {
+		color: var(--link-hover, #003c57) !important;
+		text-decoration-thickness: 2px;
+	}
+	button.btn-link:focus {
+		background-color: #fbc900 !important;
+		box-shadow:
+			0 -2px #fbc900,
+			0 4px #222;
+		color: #222 !important;
+		outline: 3px solid transparent;
+		outline-offset: 1px;
+		text-decoration: none;
+	}
+</style>

package/dist/inputs/Toolbar/ToolControl.svelte

@@ -1,23 +1,23 @@
-<script>
-	import { getContext } from "svelte";
-	const activeModalId = getContext("activeModalId");
-	const showHelpModals = getContext("showHelpModals");
-
-	const currentModalId = $derived(activeModalId);
-	const showHelp = $derived(showHelpModals);
-
-	let { id = "" } = $props();
-</script>
-
-{#if currentModalId === id && !showHelp}
-	<div class="tool-control" role="tabpanel" aria-labelledby={`button-${id}`} id={`panel-${id}`}>
-		<slot />
-	</div>
-{/if}
-
-<style>
-	.tool-control {
-		max-width: 371px;
-		padding: 8px;
-	}
-</style>
+<script>
+	import { getContext } from "svelte";
+	const activeModalId = getContext("activeModalId");
+	const showHelpModals = getContext("showHelpModals");
+
+	const currentModalId = $derived(activeModalId);
+	const showHelp = $derived(showHelpModals);
+
+	let { id = "" } = $props();
+</script>
+
+{#if currentModalId === id && !showHelp}
+	<div class="tool-control" role="tabpanel" aria-labelledby={`button-${id}`} id={`panel-${id}`}>
+		<slot />
+	</div>
+{/if}
+
+<style>
+	.tool-control {
+		max-width: 371px;
+		padding: 8px;
+	}
+</style>

package/dist/inputs/Toolbar/ToolControls.svelte

@@ -1,9 +1,9 @@
-<script>
-	import { getContext } from "svelte";
-	const activeModalId = getContext("activeModalId");
-	const id = $derived(activeModalId);
-</script>
-
-{#if id}
-	<slot />
-{/if}
+<script>
+	import { getContext } from "svelte";
+	const activeModalId = getContext("activeModalId");
+	const id = $derived(activeModalId);
+</script>
+
+{#if id}
+	<slot />
+{/if}