sveltekit-ui 1.1.74 → 1.1.76

package/dist/Components/PhoneNumber/manager.svelte.js

@@ -0,0 +1,51 @@
+import { create_button_manager } from "../Button/manager.svelte.js"
+import { normalize_link_href, set_closurable } from "../../client/index.js"
+
+export function create_phone_number_manager(config) {
+  let val = $derived(set_closurable(config?.val, null))
+  let main_number = $derived(set_closurable(config?.main_number, null))
+  let country_code = $derived(set_closurable(config?.country_code, null))
+
+  let phone_number_to_use = $derived(get_phone_number())
+  let phone_href = $derived(phone_number_to_use ? normalize_link_href(`tel:${phone_number_to_use}`) : null)
+
+  function get_phone_number() {
+    if (val != null) {
+      if (typeof val === "object" && !Array.isArray(val)) {
+        const combined_value = `${val?.country_code ?? ""}${val?.main_number ?? ""}`.trim()
+        return combined_value || null
+      }
+      const normalized_value = String(val).trim()
+      return normalized_value || null
+    }
+    const combined_value = `${country_code ?? ""}${main_number ?? ""}`.trim()
+    return combined_value || null
+  }
+
+  let button_manager = $state(
+    create_button_manager({
+      type: "soft",
+      pl: 0.2,
+      pr: 0.2,
+      support_icon: "link",
+      icon_size: 1.5,
+      aria_label: () => `Call ${phone_number_to_use ?? "phone number"}`,
+      href: () => phone_href,
+      is_disabled: () => !phone_href,
+    })
+  )
+
+  function call_number() {
+    if (typeof window !== "undefined" && phone_href) window.location.assign(phone_href)
+  }
+  return {
+    get phone_number_to_use() {
+      return phone_number_to_use
+    },
+    get phone_href() {
+      return phone_href
+    },
+    button_manager,
+    call_number,
+  }
+}

package/dist/Components/Popover/index.svelte

@@ -1,17 +1,46 @@
 <script>
   import Button from "../Button/index.svelte"
   import LoadingSuccessDiv from "../LoadingSuccessDiv/index.svelte"
+  import { tick } from "svelte"
   // import { onDestroy } from 'svelte';
 
   let { manager, content, content_alt, header, footer } = $props()
 
   let scroll_top = $state(null)
   let scroll_bottom = $state(null)
+  let popover_el = $state(null)
+  let previously_focused_el = $state(null)
   function handle_content_scroll(e) {
     scroll_top = e?.target?.scrollTop
     scroll_bottom = e?.target?.scrollHeight - (e?.target.scrollTop + e?.target.clientHeight)
   }
 
+  function handle_before_toggle(e) {
+    if (e?.newState === "open" && document.activeElement instanceof HTMLElement) {
+      previously_focused_el = document.activeElement
+    }
+    manager?.handle_before_toggle(e)
+  }
+
+  async function handle_toggle(e) {
+    await tick()
+    if (e?.newState === "open") {
+      const first_focusable = popover_el?.querySelector(
+        'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [contenteditable="true"], [tabindex]:not([tabindex="-1"])',
+      )
+      ;(first_focusable ?? popover_el)?.focus({ preventScroll: true })
+    } else if (e?.newState === "closed") {
+      const active_el = document.activeElement
+      if (
+        previously_focused_el?.isConnected &&
+        (active_el === document.body || popover_el?.contains(active_el))
+      ) {
+        previously_focused_el.focus({ preventScroll: true })
+      }
+      previously_focused_el = null
+    }
+  }
+
   // onDestroy(() => { look into this later
   //   console.log('onDestroyPopover')
   //   manager?.close()
@@ -22,8 +51,17 @@
 
 <div
   id={`popover_${manager?.id}`}
+  bind:this={popover_el}
   popover={manager?.popover_type}
-  onbeforetoggle={(e) => manager?.handle_before_toggle(e)}
+  onbeforetoggle={handle_before_toggle}
+  ontoggle={handle_toggle}
+  role="dialog"
+  aria-modal={["center", "full", "panel"].includes(manager?.positioning?.type_to_use ?? manager?.type)
+    ? "true"
+    : undefined}
+  aria-labelledby={manager?.header || header ? `popover_title_${manager?.id}` : undefined}
+  aria-label={manager?.header || header ? undefined : manager?.aria_label}
+  tabindex="-1"
   class:type_dropdown={manager?.positioning?.type_to_use === "dropdown"}
   class:type_full={manager?.positioning?.type_to_use === "full"}
   class:type_right_panel={manager?.positioning?.type_to_use === "panel" && manager?.panel_side != "left"}
@@ -69,16 +107,18 @@
   >
     {#if manager?.temp_message}
       <LoadingSuccessDiv show_screen={manager?.temp_message?.icon} message={manager?.temp_message?.message} />
-    {:else if manager?.is_show_alt_content && content_alt}
+    {:else if manager?.is_alt_content_shown && content_alt}
       {@render content_alt()}
     {:else}
       <div class="header_and_content">
         {#if manager?.header}
           <div class="header">
-            <h3 style="font-size: {manager?.header_font_size}rem;">{manager?.header}</h3>
+            <h3 id={`popover_title_${manager?.id}`} style="font-size: {manager?.header_font_size}rem;">
+              {manager?.header}
+            </h3>
           </div>
         {:else if header}
-          <div class="header">
+          <div id={`popover_title_${manager?.id}`} class="header">
             {@render header()}
           </div>
         {/if}
@@ -89,13 +129,13 @@
             : manager?.pt}rem {manager?.pr}rem {manager?.pb}rem {manager?.pl}rem;"
         >
           {#if content}
-            {@render content(manager?.toggle_modal)}
+            {@render content(manager?.toggle)}
           {/if}
         </div>
       </div>
       {#if footer}
         <div class="footer">
-          {@render footer(manager?.toggle_modal)}
+          {@render footer(manager?.toggle)}
         </div>
       {/if}
     {/if}

package/dist/Components/Popover/index.svelte.d.ts

@@ -0,0 +1,19 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+    content: any;
+    content_alt: any;
+    header: any;
+    footer: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+    content: any;
+    content_alt: any;
+    header: any;
+    footer: any;
+};

package/dist/Components/Popover/manager.svelte.d.ts

@@ -0,0 +1,115 @@
+export function create_popover_manager(config: any): {
+    id: string;
+    readonly type: any;
+    readonly popover_type: any;
+    readonly anchor_id: any;
+    readonly pt: any;
+    readonly pb: any;
+    readonly pl: any;
+    readonly pr: any;
+    readonly positioning: null;
+    readonly is_disabled: any;
+    readonly is_show_x: any;
+    readonly border_radius: any;
+    readonly background_color: any;
+    readonly border_color: any;
+    readonly contrast_color: any;
+    readonly drop_color: any;
+    readonly header: any;
+    readonly aria_label: any;
+    readonly header_font_size: any;
+    readonly is_alt_content_shown: any;
+    readonly corner: any;
+    readonly panel_side: any;
+    readonly can_swipe_close: any;
+    readonly is_non_closable: any;
+    readonly target_width: any;
+    readonly target_height: any;
+    readonly x_button_manager: {
+        id: string;
+        readonly type: any;
+        readonly ml: any;
+        readonly mr: any;
+        readonly mt: any;
+        readonly mb: any;
+        readonly pl: any;
+        readonly pr: any;
+        readonly pt: any;
+        readonly pb: any;
+        readonly border_radius: any;
+        readonly is_loading: any;
+        readonly is_pointer_down: boolean;
+        readonly is_prevent_default: any;
+        readonly is_stop_propagation: any;
+        readonly tabindex: any;
+        readonly is_disabled: any;
+        readonly is_action_disabled: any;
+        readonly is_native_disabled: any;
+        readonly selected_type: any;
+        readonly is_hovered: boolean;
+        readonly min_height: any;
+        readonly fixed_width: any;
+        readonly min_width: any;
+        readonly is_compressed: any;
+        readonly is_pill: any;
+        readonly is_uniform: any;
+        readonly cursor: any;
+        readonly text_align: any;
+        readonly text: any;
+        readonly is_success_animation: any;
+        readonly font_size: any;
+        readonly line_height: any;
+        readonly font_weight: any;
+        readonly color: any;
+        readonly gradient_to_color: any;
+        readonly gradient_turn: any;
+        readonly contrast_color: any;
+        readonly border_color: any;
+        readonly hover_shadow_color: any;
+        readonly hover_shadow_size: any;
+        readonly support_icon: any;
+        readonly is_icon_bg_tint: any;
+        readonly icon_deg: any;
+        readonly icon_sw: any;
+        readonly icon_size: any;
+        readonly icon_ml: any;
+        readonly icon_mr: any;
+        readonly icon_pos: any;
+        readonly is_icon_shimmyable: any;
+        readonly icon_movement_stiffness: any;
+        readonly icon_movement_damping: any;
+        readonly aria_label: any;
+        readonly popover_target: any;
+        readonly href: string | null;
+        readonly target: any;
+        readonly rel: any;
+        readonly download: any;
+        readonly html_type: any;
+        readonly is_link: boolean;
+        readonly element_tag: string;
+        readonly is_no_wrap: any;
+        readonly is_word_break_all: any;
+        readonly is_simulated_active: any;
+        readonly is_success: boolean;
+        readonly is_error: boolean;
+        readonly icon_manager: null;
+        success_trigger: () => void;
+        error_trigger: () => void;
+        icon_shimmy_trigger: () => void;
+        handle_click: (e: any) => Promise<any>;
+        pointer_down: () => void;
+        pointer_up: () => void;
+        pointer_enter: () => void;
+        pointer_leave: () => void;
+        simulate_click: () => void;
+        focus: () => void;
+    };
+    readonly temp_message: null;
+    readonly is_show: boolean;
+    handle_screen_change: () => void;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    handle_before_toggle: (e: any) => void;
+    show_temp_message: (message: any, icon: string | undefined, ms: number | undefined, is_close_on_end: boolean | undefined, on_finish: any) => void;
+};

package/dist/Components/Popover/{index.svelte.js → manager.svelte.js}

@@ -1,5 +1,5 @@
 import { create_unique_id, set_closurable, set_closurable_color } from "../../client/index.js"
-import { create_button_manager } from "../Button/index.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
 
 export function create_popover_manager(config) {
   const id = create_unique_id(null, 20)
@@ -24,6 +24,7 @@ export function create_popover_manager(config) {
   let contrast_color = $derived(set_closurable_color(config?.contrast_color, "var(--g14-t)"))
   let drop_color = $derived(set_closurable_color(config?.drop_color, "var(--shadow8)"))
   let header = $derived(set_closurable(config?.header, null))
+  let aria_label = $derived(set_closurable(config?.aria_label, "Popover"))
   let header_font_size = $derived(set_closurable(config?.header_font_size, 2))
   let is_alt_content_shown = $derived(set_closurable(config?.is_alt_content_shown, false))
   let corner = $derived(set_closurable(config?.corner, null))
@@ -44,6 +45,7 @@ export function create_popover_manager(config) {
     icon_sw: 50,
     is_uniform: true,
     border_radius: () => border_radius * 0.6,
+    aria_label: "Close popover",
     on_click: () => close(),
   })
 
@@ -80,13 +82,12 @@ export function create_popover_manager(config) {
   }
 
   function open() {
-    if (typeof window === "undefined" || typeof document === "undefined") {
+    if (typeof window === "undefined" || typeof document === "undefined" || is_disabled) {
       return
     }
     const popover_el = document?.querySelector(`#popover_${id}`)
-    if (popover_el) {
+    if (popover_el && !popover_el.matches(":popover-open")) {
       popover_el.showPopover()
-      is_show = true
     }
   }
 
@@ -95,14 +96,18 @@ export function create_popover_manager(config) {
       return
     }
     const popover_el = document?.querySelector(`#popover_${id}`)
-    if (popover_el) {
+    if (popover_el?.matches(":popover-open")) {
       popover_el.hidePopover()
-      is_show = false
     }
   }
 
   function toggle() {
-    if (typeof window === "undefined" || typeof document === "undefined" || (is_non_closable && is_show)) {
+    if (
+      typeof window === "undefined" ||
+      typeof document === "undefined" ||
+      (is_disabled && !is_show) ||
+      (is_non_closable && is_show)
+    ) {
       return
     }
     const popover_el = document?.querySelector(`#popover_${id}`)
@@ -112,18 +117,23 @@ export function create_popover_manager(config) {
   }
 
   function handle_before_toggle(e) {
-    if (is_show && is_non_closable) {
+    if (e?.newState === "open" && is_disabled) {
+      e.preventDefault()
+      return
+    }
+    if (e?.newState === "closed" && is_show && is_non_closable) {
       e.preventDefault()
+      return
     }
     is_show = e?.newState === "open"
     if (e?.newState === "open") {
       positioning = calc_positions()
-      if (config?.on_open) {
-        config?.on_open()
+      if (typeof config?.on_open === "function") {
+        config.on_open()
       }
-    } else {
-      if (config?.on_close) {
-        config?.on_close()
+    } else if (e?.newState === "closed") {
+      if (typeof config?.on_close === "function") {
+        config.on_close()
       }
     }
   }
@@ -276,6 +286,9 @@ export function create_popover_manager(config) {
     get header() {
       return header
     },
+    get aria_label() {
+      return aria_label
+    },
     get header_font_size() {
       return header_font_size
     },

package/dist/Components/Qr/index.svelte

@@ -4,14 +4,15 @@
   import Dropdown from "../Dropdown/index.svelte"
   import LoadingWheel from "../LoadingWheel/index.svelte"
   import InfoBox from "../InfoBox/index.svelte"
-  import { onMount } from "svelte"
 
   let { manager } = $props()
 
-  onMount(() => {
-    if (typeof manager?.on_mount == "function") {
-      manager?.on_mount()
+  $effect(() => {
+    const current_manager = manager
+    if (typeof current_manager?.on_mount == "function") {
+      current_manager.on_mount()
     }
+    return () => current_manager?.destroy?.()
   })
 </script>
 
@@ -23,6 +24,8 @@
     <div class="qr_fit">
       <div
         class="qr_container"
+        role="img"
+        aria-label={manager?.aria_label}
         style="
         width: var(--base);
         height: var(--base);

package/dist/Components/Qr/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

package/dist/Components/Qr/manager.svelte.d.ts

@@ -0,0 +1,34 @@
+export function create_qr_manager(config: any): {
+    id: string;
+    readonly margin: null;
+    readonly size: null;
+    readonly display_size: number;
+    readonly image_size: null;
+    readonly type_number: null;
+    readonly error_correction_level: null;
+    readonly color: null;
+    readonly corner_color: null;
+    readonly background_color: null;
+    readonly border_radius: null;
+    readonly border_width: null;
+    readonly border_color: null;
+    readonly data: null;
+    readonly image: null;
+    readonly extension: null;
+    readonly name: string;
+    readonly quality: null;
+    readonly is_show_copy: boolean;
+    readonly is_show_download: boolean;
+    readonly copy_button_manager: null;
+    readonly download_button_manager: null;
+    readonly extention_dropdown_manager: null;
+    readonly is_loaded: boolean;
+    readonly error_message: null;
+    readonly scale: number;
+    readonly aria_label: string;
+    init: (input: any) => void;
+    on_mount: () => Promise<void>;
+    download: () => Promise<void>;
+    update: (input?: null) => Promise<void>;
+    destroy: () => void;
+};