@onsvisual/svelte-components 0.1.91-component.toolbar → 0.1.91

package/dist/@types/inputs/ButtonGroup/ButtonGroupItem.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  ButtonGroupItemProps */
-/** @typedef {typeof __propDef.events}  ButtonGroupItemEvents */
-/** @typedef {typeof __propDef.slots}  ButtonGroupItemSlots */
-export default class ButtonGroupItem extends SvelteComponentTyped<{
-    label?: string;
-    value?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ButtonGroupItemProps = typeof __propDef.props;
-export type ButtonGroupItemEvents = typeof __propDef.events;
-export type ButtonGroupItemSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        label?: string;
-        value?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/@types/inputs/Toolbar/HelpModal.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        triggerElement?: HTMLElement | null;
-        onClose: () => void;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type HelpModalProps = typeof __propDef.props;
-export type HelpModalEvents = typeof __propDef.events;
-export type HelpModalSlots = typeof __propDef.slots;
-export default class HelpModal extends SvelteComponentTyped<HelpModalProps, HelpModalEvents, HelpModalSlots> {
-}
-export {};

package/dist/@types/inputs/Toolbar/Icon.svelte.d.ts

@@ -1,31 +0,0 @@
-/** @typedef {typeof __propDef.props}  IconProps */
-/** @typedef {typeof __propDef.events}  IconEvents */
-/** @typedef {typeof __propDef.slots}  IconSlots */
-export default class Icon extends SvelteComponentTyped<{
-    selected?: boolean;
-    type?: string;
-    marginLeft?: boolean;
-    marginRight?: boolean;
-    disabled?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type IconProps = typeof __propDef.props;
-export type IconEvents = typeof __propDef.events;
-export type IconSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        selected?: boolean;
-        type?: string;
-        marginLeft?: boolean;
-        marginRight?: boolean;
-        disabled?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/@types/inputs/Toolbar/ToolControl.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  ToolControlProps */
-/** @typedef {typeof __propDef.events}  ToolControlEvents */
-/** @typedef {typeof __propDef.slots}  ToolControlSlots */
-export default class ToolControl extends SvelteComponentTyped<{
-    id?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type ToolControlProps = typeof __propDef.props;
-export type ToolControlEvents = typeof __propDef.events;
-export type ToolControlSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        id?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/dist/@types/inputs/Toolbar/ToolControls.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  ToolControlsProps */
-/** @typedef {typeof __propDef.events}  ToolControlsEvents */
-/** @typedef {typeof __propDef.slots}  ToolControlsSlots */
-export default class ToolControls extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type ToolControlsProps = typeof __propDef.props;
-export type ToolControlsEvents = typeof __propDef.events;
-export type ToolControlsSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/dist/@types/inputs/Toolbar/Toolbar.svelte.d.ts

@@ -1,33 +0,0 @@
-/** @typedef {typeof __propDef.props}  ToolbarProps */
-/** @typedef {typeof __propDef.events}  ToolbarEvents */
-/** @typedef {typeof __propDef.slots}  ToolbarSlots */
-export default class Toolbar extends SvelteComponentTyped<{
-    classes?: string;
-    ariaLabel?: string;
-    orientation?: "horizontal" | "vertical";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    controls: {};
-}> {
-}
-export type ToolbarProps = typeof __propDef.props;
-export type ToolbarEvents = typeof __propDef.events;
-export type ToolbarSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        classes?: string;
-        ariaLabel?: string;
-        orientation?: 'horizontal' | 'vertical';
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        controls: {};
-    };
-};
-export {};

package/dist/@types/inputs/Toolbar/ToolbarButton.svelte.d.ts

@@ -1,31 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        id?: string;
-        icon?: string;
-        label?: string;
-        disabled?: boolean;
-        classes?: string;
-        helpText?: string | null;
-        selected?: boolean;
-        custom?: boolean;
-        hasAriaControls?: boolean;
-        sticky?: boolean;
-        transient?: boolean;
-    };
-    events: {
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        custom: {};
-        default: {};
-    };
-};
-export type ToolbarButtonProps = typeof __propDef.props;
-export type ToolbarButtonEvents = typeof __propDef.events;
-export type ToolbarButtonSlots = typeof __propDef.slots;
-export default class ToolbarButton extends SvelteComponentTyped<ToolbarButtonProps, ToolbarButtonEvents, ToolbarButtonSlots> {
-}
-export {};

package/dist/@types/inputs/Toolbar/ToolbarDivider.svelte.d.ts

@@ -1,16 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        classes?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ToolbarDividerProps = typeof __propDef.props;
-export type ToolbarDividerEvents = typeof __propDef.events;
-export type ToolbarDividerSlots = typeof __propDef.slots;
-export default class ToolbarDivider extends SvelteComponentTyped<ToolbarDividerProps, ToolbarDividerEvents, ToolbarDividerSlots> {
-}
-export {};

package/dist/@types/inputs/Toolbar/ToolbarsContainer.svelte.d.ts

@@ -1,16 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ToolbarsContainerProps = typeof __propDef.props;
-export type ToolbarsContainerEvents = typeof __propDef.events;
-export type ToolbarsContainerSlots = typeof __propDef.slots;
-export default class ToolbarsContainer extends SvelteComponentTyped<ToolbarsContainerProps, ToolbarsContainerEvents, ToolbarsContainerSlots> {
-}
-export {};

package/dist/inputs/ButtonGroup/ButtonGroup.svelte

@@ -1,55 +0,0 @@
-<script>
-  import { setContext } from "svelte";
-  import { writable } from "svelte/store";
-
-  export let name = "";
-  export let legend = "";
-  export let value;
-  export let visuallyHideLegend = false;
-
-  // create the store
-  const selectedValue = writable(value);
-
-  // Sync the store with the prop on mount and when the prop changes
-  $: selectedValue.set(value);
-
-  //  When store changes and update prop
-
-  $: if ($selectedValue !== value) {
-    value = $selectedValue;
-  }
-
-  // Create a context to share with child Button components
-  setContext("buttonGroup", {
-    groupName: name,
-    selectedValue,
-  });
-</script>
-
-<fieldset class="button-group">
-  {#if legend}
-    <legend class:ons-u-vh="{visuallyHideLegend}">{legend}</legend>
-  {/if}
-  <div class="buttons">
-    <slot />
-  </div>
-</fieldset>
-
-<style>
-  .button-group {
-    display: inline-block;
-  }
-
-  legend {
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-  }
-
-  .buttons {
-    display: flex;
-    gap: 8px;
-    background: #f5f5f6;
-    padding: 4px;
-    border-radius: 8px;
-    justify-content: space-between;
-  }</style>

package/dist/inputs/ButtonGroup/ButtonGroupItem.svelte

@@ -1,103 +0,0 @@
-<script>
-  import { getContext } from "svelte";
-
-  export let value = "";
-  export let label = "";
-
-  // Get the parent ButtonGroup context
-  const buttonGroup = getContext("buttonGroup");
-  const { selectedValue } = buttonGroup;
-
-  // Reactive variable to track selection
-  let selected = false;
-
-  // Subscribe to selectedValue store
-  $: selectedValue.subscribe(($selectedValue) => {
-    selected = $selectedValue === value;
-  });
-
-  function handleClick() {
-    selectedValue.set(value); // Update the store
-  }
-
-  let buttonRef;
-
-  function handleKeydown(event) {
-    const buttons = Array.from(document.querySelectorAll(`[name="${buttonGroup.groupName}"]`));
-    const currentIndex = buttons.indexOf(buttonRef);
-
-    let newIndex = -1;
-
-    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-      newIndex = (currentIndex + 1) % buttons.length;
-    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-      newIndex = (currentIndex - 1 + buttons.length) % buttons.length;
-    } else if (event.key === "Enter" || event.key === " ") {
-      handleClick();
-      return;
-    }
-
-    if (newIndex !== -1) {
-      buttons[newIndex].focus();
-    }
-  }
-</script>
-
-<div class="button-container">
-  <input
-    type="radio"
-    id="{value}"
-    name="{buttonGroup.groupName}"
-    value="{value}"
-    checked="{selected}"
-    class="radio-input"
-    on:click="{handleClick}"
-    on:keydown="{handleKeydown}"
-    aria-checked="{selected}"
-    tabindex="0"
-    bind:this="{buttonRef}"
-  />
-  <label for="{value}" class="button" class:selected="{selected}" on:click="{handleClick}">
-    {label || value}
-  </label>
-</div>
-
-<style>
-  .button-container {
-    display: flex;
-  }
-
-  .radio-input {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .button {
-    flex-grow: 0;
-    padding: 4px 8px;
-    border: none;
-    background: transparent;
-    font-size: 14px;
-    cursor: pointer;
-    border-radius: 6px;
-    transition: background 0.2s ease, color 0.2s ease;
-    color: #707071;
-    text-align: center;
-  }
-
-  .button:hover {
-    background-color: #e8e8e8;
-  }
-
-  .button:focus {
-    box-shadow: orange 0 0 0 2px;
-  }
-
-  .button.selected {
-    background: white;
-    font-weight: bold;
-    color: #206095;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
-  }</style>

package/dist/inputs/Toolbar/HelpModal.svelte

@@ -1,220 +0,0 @@
-<script>import { getContext } from "svelte";
-import { get } from "svelte/store";
-import { fly } from "svelte/transition";
-import Checkbox from "../Checkbox/Checkbox.svelte";
-import Button from "../Button/Button.svelte";
-export let triggerElement = null;
-export let onClose;
-// Retrieve the stores from context
-const activeModalId = getContext("activeModalId");
-// Access button IDs from context
-const { buttonIds } = getContext("buttonIds");
-const showHelpModals = getContext("showHelpModals");
-let modalPosition = { top: 0, left: 0 };
-let notchPosition = { left: 0 };
-let dontShowMeAgain = false;
-$: if (triggerElement) {
-    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;
-    // Default to position below the trigger element
-    modalPosition = {
-        // top: rect.bottom + window.scrollY + 10,
-        top: window.scrollY + 55,
-        left: window.scrollX - 10,
-    };
-    // Align notch with the center of the trigger element
-    notchPosition = {
-        left: window.scrollX - modalPosition.left + rect.width / 2 - 10,
-        right: "auto",
-    };
-    // If there's not enough space below, position above
-    if (spaceBelow < 200 && spaceAbove > 200) {
-        modalPosition.top = rect.top + window.scrollY - 10;
-    }
-    // Adjust if close to the right edge
-    if (spaceRight < 300) {
-        modalPosition.left = window.scrollX - 300; // Adjust for modal width
-        notchPosition = {
-            left: "auto",
-            right: -340,
-        };
-    }
-}
-// Update localStorage if "Don't show me again" is checked
-function disableHelpModalsPermanently() {
-    localStorage.setItem("showHelpModals", "false");
-    sessionStorage.setItem("showHelpModals", "false");
-    $showHelpModals = false;
-}
-// Hide modals until refresh
-function hideHelpModalsUntilRefresh() {
-    sessionStorage.setItem("showHelpModals", "false");
-    $showHelpModals = false;
-}
-// Navigate to the next modal
-function nextModal() {
-    const ids = get(buttonIds);
-    const currentIndex = ids.indexOf($activeModalId);
-    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 ids = get(buttonIds);
-    const currentIndex = ids.indexOf($activeModalId);
-    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) {
-    if (event.key === "Escape")
-        onClose();
-}
-</script>
-
-<svelte:window on:keydown="{handleKeydown}" />
-{#if $showHelpModals}
-  <div
-    class="help-modal-wrapper"
-    style="top: {modalPosition.top}px; left: {modalPosition.left}px;"
-    transition:fly="{{ duration: 200, y: 10 }}"
-  >
-    <!-- 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--between ons-grid--vertical-center">
-        <button class="btn-link" on:click="{handleSkip}" aria-label="Skip instructions">Skip</button
-        >
-        {#if $buttonIds.indexOf($activeModalId) > 0}
-          <span style="margin-left:auto; margin-right:10px">
-            <Button variant="secondary" on:click="{previousModal}">Back</Button>
-          </span>
-        {/if}
-
-        {#if $buttonIds.indexOf($activeModalId) != $buttonIds.length - 1}
-          <Button on:click="{nextModal}">Next</Button>
-        {/if}
-        {#if $buttonIds.indexOf($activeModalId) == $buttonIds.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>