sveltekit-ui 1.1.74 → 1.1.76

package/src/lib/Components/Number/index.svelte

@@ -1,47 +0,0 @@
-<script>
-  let { manager } = $props()
-</script>
-
-<div style="display: inline-flex; align-items: center; gap: .5rem;">
-  {#if manager?.val?.is_progress_bar}
-    <div
-      class="progress_container"
-      role="progressbar"
-      aria-valuenow={manager?.val?.val}
-      aria-valuemin={manager?.val?.start_value}
-      aria-valuemax={manager?.val?.end_value}
-      style="--percentage_fill: {manager?.val?.percentage_fill ?? 0}%; --dynamic_color: {manager?.val?.font_color};"
-    ></div>
-  {/if}
-  {#if !manager?.val?.is_hide_number}
-    <p style={`font-weight: ${manager?.val?.font_weight}; color: ${manager?.val?.font_color};`}>
-      {manager?.val?.val_text}{#if manager?.val?.suffix}<span
-          style="margin-left: 0.1rem; font-size: 1.4rem; color: oklch(var(--l12-t) var(--c3) var(--h{manager?.val
-            ?.hue}))">{manager?.val?.suffix}</span
-        >{/if}
-    </p>
-  {/if}
-</div>
-
-<style>
-  .progress_container {
-    overflow: hidden;
-    border-radius: 0.6rem;
-    display: flex;
-    flex: 1;
-    min-width: 10rem;
-    background-color: var(--shadow1-t);
-    border: 1px solid var(--g12-t);
-    position: relative;
-  }
-
-  .progress_container::after {
-    content: "";
-    display: block;
-    height: 2rem;
-    background-color: var(--dynamic_color);
-    width: var(--percentage_fill);
-    transition: width 0.3s ease;
-    border-radius: 0.6rem;
-  }
-</style>

package/src/lib/Components/Number/index.svelte.js

@@ -1,151 +0,0 @@
-import { deep_copy, set_closurable } from "$lib/client/index.js"
-
-export function create_number_manager(config) {
-  let val = $state(null)
-
-  function round_value(value, options) {
-    switch (options.round) {
-      case "nearest":
-        return Math.round(value / options.round_by) * options.round_by
-      case "floor":
-        return Math.floor(value / options.round_by) * options.round_by
-      case "ceil":
-        return Math.ceil(value / options.round_by) * options.round_by
-      case "precision":
-        return Number(value).toPrecision(options.precision)
-      default:
-        return value
-    }
-  }
-
-  function apply_shorthand(value, shorthand) {
-    let divider = 1
-    let suffix = ""
-    switch (shorthand) {
-      case "thousands":
-        divider = 1e3
-        suffix = "K"
-        break
-      case "millions":
-        divider = 1e6
-        suffix = "M"
-        break
-      case "billions":
-        divider = 1e9
-        suffix = "B"
-        break
-      case "trillions":
-        divider = 1e12
-        suffix = "T"
-        break
-      case "quadrillions":
-        divider = 1e15
-        suffix = "Qd"
-        break
-      default:
-        return { value, suffix }
-    }
-    return { value: (value / divider).toFixed(), suffix }
-  }
-
-  function format_separators(value, options) {
-    switch (options.separators) {
-      case "thousands_commas_period":
-        return parseFloat(value).toLocaleString("en-US")
-      case "thousands_periods_comma":
-        return parseFloat(value).toLocaleString("de-DE")
-      default:
-        return value
-    }
-  }
-
-  function init(config) {
-    let val_loc = set_closurable(config?.val)
-    let val_text_loc = null
-    let suffix_loc = ""
-    let hue_loc = 10
-    let chroma_loc = 10
-    let font_weight_loc = "400"
-    let font_color_loc = `oklch(var(--l9-t) var(--c${config?.base_color?.c}) var(--h${config?.base_color?.h}))`
-    if (config?.round) {
-      val_loc = round_value(val_loc, config)
-    }
-    if (config?.shorthand) {
-      const shorthand_val_loc = apply_shorthand(val_loc, config?.shorthand)
-      val_text_loc = shorthand_val_loc.value
-      suffix_loc = shorthand_val_loc.suffix
-    } else {
-      val_text_loc = String(val_loc)
-    }
-    if (config?.separators) {
-      val_text_loc = format_separators(val_text_loc, config)
-    }
-    if (config?.is_percentage) {
-      suffix_loc += "%"
-    }
-    font_color_loc = `oklch(var(--l9-t) var(--c${config?.base_color?.c}) var(--h${config?.base_color?.h}))`
-    hue_loc = config?.base_color?.h
-    chroma_loc = config?.base_color?.c
-    if (config?.is_dynamic_color) {
-      const progress = (val_loc - config?.start_value) / (config?.end_value - config?.start_value)
-      let start_h = config?.start_color.h
-      let end_h = config?.end_color.h
-      let delta_h
-      if (Math.abs(end_h - start_h) <= 12) {
-        delta_h = end_h - start_h
-      } else {
-        if (end_h > start_h) {
-          delta_h = end_h - 24 - start_h
-        } else {
-          delta_h = end_h + 24 - start_h
-        }
-      }
-      const h_at_progress_unrounded = (start_h + delta_h * progress) % 24
-      const h_at_progress = Math.round(h_at_progress_unrounded)
-      hue_loc = h_at_progress === 24 ? 0 : h_at_progress
-      let start_c = config?.start_color.c
-      let end_c = config?.end_color.c
-      let delta_c
-      if (Math.abs(end_c - start_c) <= 12) {
-        delta_c = end_c - start_c
-      } else {
-        if (end_c > start_c) {
-          delta_c = end_c - 24 - start_c
-        } else {
-          delta_c = end_c + 24 - start_c
-        }
-      }
-      const c_at_progress_unrounded = (start_c + delta_c * progress) % 24
-      const c_at_progress = Math.round(c_at_progress_unrounded)
-      chroma_loc = c_at_progress === 24 ? 0 : c_at_progress
-      font_color_loc = `oklch(var(--l9-t) var(--c${chroma_loc}) var(--h${hue_loc}))`
-    }
-    let percentage_fill_loc = 0
-    if (
-      typeof start_value === "number" &&
-      typeof config?.end_value === "number" &&
-      config?.end_value !== config?.start_value
-    ) {
-      percentage_fill_loc = ((val - config?.start_value) / (config?.end_value - config?.start_value)) * 100
-      percentage_fill_loc = Math.max(0, Math.min(percentage_fill_loc, 100))
-    }
-    val = {
-      val: val_loc,
-      val_text: val_text_loc,
-      suffix: suffix_loc,
-      font_weight: font_weight_loc,
-      font_color: font_color_loc,
-      hue: hue_loc,
-      chroma: chroma_loc,
-      percentage_fill: percentage_fill_loc,
-    }
-  }
-
-  init(config)
-
-  return {
-    get val() {
-      return val
-    },
-  }
-}

package/src/lib/Components/PhoneCountryCode/index.svelte

@@ -1,7 +0,0 @@
-<script>
-  import Dropdown from "$lib/Components/Dropdown/index.svelte.js"
-</script>
-
-<div style="min-width: 8rem;">
-  <Dropdown manager={manager?.dropdown_manager} />
-</div>

package/src/lib/Components/PhoneNumber/index.svelte

@@ -1,22 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<div class="container">
-  {#if manager?.phone_number_to_use}
-    <p>{manager?.phone_number_to_use}</p>
-    <Button manager={manager?.button_manager} />
-  {:else}
-    <p>-</p>
-  {/if}
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex: 0;
-    gap: 0.5rem;
-  }
-</style>

package/src/lib/Components/PhoneNumber/index.svelte.js

@@ -1,41 +0,0 @@
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { set_closurable } from "$lib/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(
-    val
-      ? typeof val == "object"
-        ? `${val?.country_code}${val?.main_number}`
-        : val
-      : country_code || main_number
-      ? `${country_code}${main_number}`
-      : null
-  )
-
-  let button_manager = $state(
-    create_button_manager({
-      type: "soft",
-      pl: 0.2,
-      pr: 0.2,
-      support_icon: "link",
-      icon_size: 1.5,
-      on_click: () => call_number(),
-    })
-  )
-
-  function call_number() {
-    Object.assign(document.createElement("a"), {
-      href: "tel:" + phone_number_to_use,
-    }).click()
-  }
-  return {
-    get phone_number_to_use() {
-      return phone_number_to_use
-    },
-    button_manager,
-  }
-}

package/src/lib/Components/Popover/index.svelte

@@ -1,396 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import LoadingSuccessDiv from "$lib/Components/LoadingSuccessDiv/index.svelte"
-  // import { onDestroy } from 'svelte';
-
-  let { manager, content, content_alt, header, footer } = $props()
-
-  let scroll_top = $state(null)
-  let scroll_bottom = $state(null)
-  function handle_content_scroll(e) {
-    scroll_top = e?.target?.scrollTop
-    scroll_bottom = e?.target?.scrollHeight - (e?.target.scrollTop + e?.target.clientHeight)
-  }
-
-  // onDestroy(() => { look into this later
-  //   console.log('onDestroyPopover')
-  //   manager?.close()
-  // })
-</script>
-
-<svelte:window onscroll={() => manager?.handle_screen_change()} onresize={() => manager?.handle_screen_change()} />
-
-<div
-  id={`popover_${manager?.id}`}
-  popover={manager?.popover_type}
-  onbeforetoggle={(e) => manager?.handle_before_toggle(e)}
-  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"}
-  class:type_left_panel={manager?.positioning?.type_to_use === "panel" && manager?.panel_side == "left"}
-  class:type_center={manager?.positioning?.type_to_use === "center"}
-  class:type_center_lftb={manager?.positioning?.type_to_use === "center" && !manager?.corner}
-  class:panel_backdrop={["full", "panel"].includes(manager?.positioning?.type_to_use)}
-  class:corner_tl={manager?.positioning?.type_to_use === "center" && manager?.corner == "tl"}
-  class:corner_tr={manager?.positioning?.type_to_use === "center" && manager?.corner == "tr"}
-  class:corner_bl={manager?.positioning?.type_to_use === "center" && manager?.corner == "bl"}
-  class:corner_br={manager?.positioning?.type_to_use === "center" && manager?.corner == "br"}
-  style="
-    --popover_top_pos: {manager?.positioning?.popover_top_pos}px; 
-    --popover_left_pos: {manager?.positioning?.popover_left_pos}px;
-    --min_width: {manager?.positioning?.min_width}px;
-    --target_width: {manager?.positioning?.target_width}px;
-    --max_width: calc(100dvw - (2 * {manager?.positioning?.edge_forgiveness}px));
-    --min_height: {manager?.positioning?.min_height}px;
-    --target_height: {manager?.target_height ? `${manager?.positioning?.target_height}px` : 'fit-content'};
-    --max_height: {manager?.positioning?.max_height
-    ? `${manager?.positioning?.max_height ?? manager?.screen_height - 20}px`
-    : `calc(100% - (2 * ${manager?.edge_forgiveness ?? 20}px))`};
-    --pt: {manager?.pt}rem; 
-    --pl: {manager?.pl}rem; 
-    --pr: {manager?.pr}rem;
-    --pb: {manager?.pb}rem;
-    --br: {manager?.border_radius}rem; 
-    --background_color: {manager?.background_color}; 
-    --border_color: {manager?.border_color};
-    --drop_color: {manager?.drop_color};
-    --edge_forgiveness: {manager?.positioning?.edge_forgiveness ?? 20}px;
-  "
->
-  <div
-    onscroll={(e) => handle_content_scroll(e)}
-    class="content_container"
-    style="
-    --header_bg_color: oklch(from var(--background_color) l c h / {scroll_top ? 0.9 : 0});
-    --header_border_color: {scroll_top ? 'var(--border_color)' : 'transparent'};
-    --footer_bg_color:  oklch(from var(--background_color) l c h / {scroll_bottom ? 0.9 : 0});
-    --footer_border_color: {scroll_bottom ? 'var(--border_color)' : 'transparent'};
-    "
-  >
-    {#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}
-      {@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>
-          </div>
-        {:else if header}
-          <div class="header">
-            {@render header()}
-          </div>
-        {/if}
-        <div
-          class="content"
-          style="padding: {manager?.header || header
-            ? 0
-            : manager?.pt}rem {manager?.pr}rem {manager?.pb}rem {manager?.pl}rem;"
-        >
-          {#if content}
-            {@render content(manager?.toggle_modal)}
-          {/if}
-        </div>
-      </div>
-      {#if footer}
-        <div class="footer">
-          {@render footer(manager?.toggle_modal)}
-        </div>
-      {/if}
-    {/if}
-  </div>
-  {#if manager?.is_show_x && !manager?.is_non_closable}
-    <div class="x_box" style="--br_offset: .2rem;">
-      <Button manager={manager?.x_button_manager} />
-    </div>
-  {/if}
-</div>
-
-<style>
-  [popover] {
-    margin: 0;
-    padding: 0;
-    width: fit-content;
-    height: fit-content;
-    background-color: var(--background_color);
-  }
-  [popover]:popover-open {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    justify-content: space-between;
-    align-items: center;
-    opacity: 1;
-  }
-  .type_dropdown {
-    position: fixed;
-    top: var(--popover_top_pos);
-    left: var(--popover_left_pos);
-    bottom: auto;
-    right: auto;
-    min-width: var(--min_width);
-    width: var(--target_width);
-    max-width: var(--max_width);
-    min-height: var(--min_height);
-    height: var(--target_height);
-    max-height: var(--max_height);
-    box-shadow: 0 0 1rem var(--drop_color);
-    border-radius: var(--br);
-    border: 1px solid var(--border_color);
-    opacity: 0;
-    transition:
-      opacity 0.3s,
-      overlay 0.3s allow-discrete,
-      display 0.3s allow-discrete;
-  }
-  .type_dropdown:popover-open {
-    opacity: 1;
-  }
-  @starting-style {
-    .type_dropdown:popover-open {
-      opacity: 0;
-    }
-  }
-  .corner_bl {
-    left: var(--edge_forgiveness);
-    right: auto;
-    top: auto;
-    bottom: var(--edge_forgiveness);
-  }
-  .corner_br {
-    left: auto;
-    right: var(--edge_forgiveness);
-    top: auto;
-    bottom: var(--edge_forgiveness);
-  }
-  .corner_tl {
-    left: var(--edge_forgiveness);
-    right: auto;
-    top: var(--edge_forgiveness);
-    bottom: auto;
-  }
-  .corner_tr {
-    left: auto;
-    right: var(--edge_forgiveness);
-    top: var(--edge_forgiveness);
-    bottom: auto;
-  }
-  .type_center_lftb {
-    top: var(--popover_top_pos);
-    left: 50%;
-    bottom: auto;
-    right: auto;
-    transform: translateX(-50%);
-  }
-  .type_center {
-    position: fixed;
-    border-radius: var(--br);
-    border: 1px solid var(--border_color);
-    min-width: var(--min_width);
-    width: var(--target_width);
-    max-width: var(--max_width);
-    min-height: var(--min_height);
-    height: var(--target_height);
-    max-height: var(--max_height);
-    box-shadow: 0 1rem 5rem var(--drop_color);
-    opacity: 0;
-    transition:
-      opacity 0.5s,
-      overlay 0.5s allow-discrete,
-      display 0.5s allow-discrete;
-  }
-  .type_center:popover-open {
-    opacity: 1;
-  }
-  .type_center::backdrop {
-    background-color: transparent;
-    transition:
-      display 0s allow-discrete,
-      overlay 0s allow-discrete,
-      background-color 0.5s;
-  }
-  .type_center:popover-open::backdrop {
-    background-color: var(--shadow3-t);
-  }
-  @starting-style {
-    .type_center:popover-open {
-      opacity: 0;
-    }
-    .type_center:popover-open::backdrop {
-      background-color: transparent;
-    }
-  }
-  .type_full {
-    position: fixed;
-    top: auto;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border: 1px solid var(--border_color);
-    border-top-left-radius: var(--br);
-    border-top-right-radius: var(--br);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    border-bottom-width: 0;
-    box-shadow: 0 1rem 5rem var(--drop_color);
-    width: 100vw;
-    min-height: var(--min_height) !important;
-    height: var(--target_height);
-    max-height: 90dvh;
-    transform: translateY(100%);
-    transition:
-      transform 0.7s,
-      overlay 0.5s allow-discrete,
-      display 0.5s allow-discrete;
-  }
-  .type_full:popover-open {
-    transform: translateY(0);
-  }
-  @starting-style {
-    .type_full:popover-open {
-      transform: translateY(100%);
-    }
-  }
-
-  .type_right_panel {
-    position: fixed;
-    left: auto;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    border-left: 1px solid var(--border_color);
-    border-top-width: 0;
-    border-bottom-width: 0;
-    border-right-width: 0;
-    border-radius: 0;
-    box-shadow: 0 0 5rem var(--drop_color);
-    height: 100dvh;
-    min-width: var(--min_width) !important;
-    width: var(--target_width);
-    max-width: 90dvw;
-    transform: translateX(100%);
-    transition:
-      transform 0.7s,
-      overlay 0.5s allow-discrete,
-      display 0.5s allow-discrete;
-  }
-  .type_right_panel:popover-open {
-    transform: translateX(0);
-  }
-  @starting-style {
-    .type_right_panel:popover-open {
-      transform: translateX(100%);
-    }
-  }
-
-  .type_left_panel {
-    position: fixed;
-    right: auto;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    border-right: 1px solid var(--border_color);
-    border-top-width: 0;
-    border-bottom-width: 0;
-    border-left-width: 0;
-    border-radius: 0;
-    box-shadow: 0 0 5rem var(--drop_color);
-    height: 100dvh;
-    min-width: var(--min_width);
-    width: var(--target_width);
-    max-width: 90dvw;
-    transform: translateX(-100%);
-    transition:
-      transform 0.7s,
-      overlay 0.5s allow-discrete,
-      display 0.5s allow-discrete;
-  }
-  .type_left_panel:popover-open {
-    transform: translateX(0);
-  }
-  @starting-style {
-    .type_left_panel:popover-open {
-      transform: translateX(-100%);
-    }
-  }
-
-  .panel_backdrop::backdrop {
-    background-color: transparent;
-    transition:
-      display 0s allow-discrete,
-      overlay 0s allow-discrete,
-      background-color 0.5s ease 0.3s;
-  }
-  .panel_backdrop:popover-open::backdrop {
-    background-color: var(--shadow3-t);
-    transition:
-      display 0s allow-discrete,
-      overlay 0s allow-discrete,
-      background-color 0.5s;
-  }
-  @starting-style {
-    .panel_backdrop:popover-open::backdrop {
-      background-color: transparent;
-    }
-  }
-
-  .content_container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    flex: 1;
-    width: 100%;
-    overflow: scroll;
-  }
-  .header_and_content {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
-  .header {
-    position: sticky;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1;
-    text-align: center;
-    margin: 0;
-    border-radius: 0;
-    padding: var(--pt) var(--pr) 0 var(--pl);
-    border: none;
-    transition:
-      background-color 0.7s,
-      border-bottom 0.7s;
-    background-color: var(--header_bg_color);
-    border-bottom: 1px solid var(--header_border_color);
-  }
-  .content {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
-  .footer {
-    position: sticky;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1;
-    border: none;
-    border-radius: 0;
-    text-align: center;
-    margin-top: 0.5rem;
-    padding: 1rem var(--pr) var(--pb) var(--pl);
-    transition:
-      background-color 0.7s,
-      border-top 0.7s;
-    background-color: var(--footer_bg_color);
-    border-top: 1px solid var(--footer_border_color);
-  }
-  .x_box {
-    position: absolute;
-    top: var(--br_offset);
-    right: var(--br_offset);
-    z-index: 2;
-  }
-</style>