sveltekit-ui 1.1.74 → 1.1.76

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

@@ -0,0 +1,26 @@
+export function create_text_array_input_manager(config: any): {
+    id: string;
+    readonly val: null;
+    readonly name: any;
+    readonly label: any;
+    readonly error_message: any;
+    readonly placeholder: any;
+    readonly is_no_spaces: any;
+    readonly max_length: any;
+    readonly is_disabled: any;
+    readonly border_radius: any;
+    readonly ml: any;
+    readonly mr: any;
+    readonly mt: any;
+    readonly mb: any;
+    readonly input_text_manager: null;
+    readonly add_button_manager: null;
+    readonly val_prepped: null;
+    readonly is_popover: any;
+    readonly popover_manager: null;
+    readonly finish_button_manager: null;
+    add_item: () => void;
+    delete_item: (index: any) => void;
+    shift_item: (index: any, shift_by: any) => void;
+    set_val: (input: any) => void;
+};

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

@@ -1,7 +1,7 @@
 import { create_unique_id, set_closurable } from "../../client/index.js"
-import { create_text_input_manager } from "../TextInput/index.svelte.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_text_input_manager } from "../TextInput/manager.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_popover_manager } from "../Popover/manager.svelte.js"
 
 export function create_text_array_input_manager(config) {
   let id = create_unique_id(null, 20)
@@ -20,6 +20,7 @@ export function create_text_array_input_manager(config) {
   let max_length = $derived(set_closurable(config?.max_length, 255))
   let is_disabled = $derived(set_closurable(config?.is_disabled, null))
   let label = $derived(set_closurable(config?.label, null))
+  let error_message = $derived(set_closurable(config?.error_message, null))
   let placeholder = $derived(set_closurable(config?.placeholder, null))
   let header = $derived(set_closurable(config?.header, "Text Array Input"))
   let is_popover = $derived(set_closurable(config?.is_popover, false))
@@ -142,8 +143,11 @@ export function create_text_array_input_manager(config) {
   function init(config) {
     val = config?.val ?? null
     input_text_manager = create_text_input_manager({
+      name: () => name,
       placeholder: () => placeholder,
       is_no_spaces: () => is_no_spaces,
+      max_length: () => max_length,
+      is_disabled: () => is_disabled,
     })
     add_button_manager = create_button_manager({
       type: "outlined",
@@ -186,6 +190,9 @@ export function create_text_array_input_manager(config) {
     get label() {
       return label
     },
+    get error_message() {
+      return error_message
+    },
     get placeholder() {
       return placeholder
     },

package/dist/Components/TextInput/PasswordTooltip/index.svelte.d.ts

@@ -0,0 +1,21 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    password_min_length?: any;
+    is_password_requires_lowercase?: boolean;
+    is_password_requires_uppercase?: boolean;
+    is_password_requires_number?: boolean;
+    is_password_requires_special_char?: boolean;
+    val?: any;
+}, {}, "">;
+type $$ComponentProps = {
+    password_min_length?: any;
+    is_password_requires_lowercase?: boolean;
+    is_password_requires_uppercase?: boolean;
+    is_password_requires_number?: boolean;
+    is_password_requires_special_char?: boolean;
+    val?: any;
+};

package/dist/Components/TextInput/index.svelte

@@ -13,7 +13,7 @@
       {#if manager?.label || manager?.error_message}
         <div style="display: inline-flex;">
           {#if manager?.label}
-            <label for={manager?.id}>{manager?.label}:</label>
+            <label for={`input_${manager?.id}`}>{manager?.label}:</label>
           {/if}
           {#if manager?.error_message}
             <p class="error_text">{manager?.error_message}</p>
@@ -45,7 +45,7 @@
               max={manager?.max}
               value={manager?.val}
               rows={manager?.rows}
-              onblur={() => manager?.handle_blur()}
+              onblur={(e) => manager?.handle_blur(e)}
               oninput={(e) => manager?.set_val(e?.target?.value, true)}
             ></textarea>
             {#if manager?.val && manager?.is_show_limit}
@@ -70,7 +70,7 @@
               min={manager?.min}
               max={manager?.max}
               value={manager?.val_closurable}
-              onblur={() => manager?.handle_blur()}
+              onblur={(e) => manager?.handle_blur(e)}
               oninput={(e) => manager?.set_val(e?.target?.value, true)}
             />
           {/if}

package/dist/Components/TextInput/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/TextInput/manager.svelte.d.ts

@@ -0,0 +1,56 @@
+export function create_text_input_manager(config: any): {
+    id: string;
+    readonly val: any;
+    readonly val_closurable: any;
+    readonly type: any;
+    readonly input_type: any;
+    readonly name: any;
+    readonly label: any;
+    readonly autocomplete: any;
+    readonly placeholder: any;
+    readonly is_required: any;
+    readonly is_read_only: any;
+    readonly error_message: any;
+    readonly replace_spaces_with: any;
+    readonly is_numbers_only: any;
+    readonly is_text_hidable: any;
+    readonly is_text_hidden: any;
+    readonly max_length: any;
+    readonly is_disabled: any;
+    readonly is_loading: any;
+    readonly password_min_length: any;
+    readonly is_password_requires_lowercase: any;
+    readonly is_password_requires_uppercase: any;
+    readonly is_password_requires_number: any;
+    readonly is_password_requires_special_char: any;
+    readonly is_password_tooltip_used: any;
+    readonly is_preview_img: any;
+    readonly preview_img_size: any;
+    readonly min: any;
+    readonly max: any;
+    readonly border_radius: any;
+    readonly ml: any;
+    readonly mr: any;
+    readonly mt: any;
+    readonly mb: any;
+    readonly is_resizable: any;
+    readonly is_show_limit: any;
+    readonly rows: any;
+    readonly max_height: any;
+    readonly is_valid: boolean;
+    readonly is_image_url: boolean;
+    readonly popover_manager: null;
+    readonly popover_edit_button_manager: null;
+    readonly finish_button_manager: null;
+    readonly is_popover: any;
+    readonly set_null_button_manager: null;
+    readonly is_nullable: any;
+    readonly rerender_input_trigger: number;
+    readonly is_popover_edit_content: any;
+    init: (config: any) => void;
+    handle_blur: (e: any) => any;
+    set_val: (val_input: any, is_iternal?: boolean) => void;
+    set_focus: () => void;
+    set_type: (input: any) => void;
+    set_is_text_hidden: (input: any) => void;
+};

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

@@ -1,6 +1,6 @@
 import { create_unique_id, set_closurable } from "../../client/index.js"
-import { create_popover_manager } from "../Popover/index.svelte.js"
-import { create_button_manager } from "../Button/index.svelte.js"
+import { create_popover_manager } from "../Popover/manager.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
 import { browser } from "$app/environment"
 
 export function create_text_input_manager(config) {
@@ -74,14 +74,17 @@ export function create_text_input_manager(config) {
   let popover_edit_button_manager = $state(null)
   let finish_button_manager = $state(null)
   let rerender_input_trigger = $state(0)
+  let image_validation_request_id = 0
 
   let input_type = $derived(is_text_hidden ? "password" : type == "password" ? "text" : type)
   let val_closurable = $derived(set_closurable(val, null))
   let is_popover = $derived(set_closurable(config?.is_popover, false))
+  let is_loading = $derived(set_closurable(config?.is_loading, false))
   let popover_header = $derived(set_closurable(config?.popover_header, null))
   let label = $derived(set_closurable(config?.label, null))
-  let name = $derived(set_closurable(config?.name, "checkbox"))
+  let name = $derived(set_closurable(config?.name, defaults?.[type]?.name ?? "text"))
   let is_required = $derived(set_closurable(config?.is_required, false))
+  let is_read_only = $derived(set_closurable(config?.is_read_only, false))
   let is_nullable = $derived(set_closurable(config?.is_nullable, false))
   let replace_spaces_with = $derived(set_closurable(config?.replace_spaces_with, null))
   let is_numbers_only = $derived(set_closurable(config?.is_numbers_only, null))
@@ -115,16 +118,15 @@ export function create_text_input_manager(config) {
   let set_null_button_manager = $state(null)
 
   function handle_blur(e) {
-    if (e?.type == "input") {
-      if (config?.on_blur) {
-        config?.on_blur(val)
-      }
+    if (typeof config?.on_blur == "function") {
+      return config.on_blur(val, e)
     }
   }
 
   function set_val(val_input, is_iternal = false) {
     error_message = null
     is_valid = false
+    let should_validate_image_url = false
     if (val_input) {
       if (replace_spaces_with !== null) {
         val_input = val_input.replace(/\s+/g, replace_spaces_with)
@@ -140,8 +142,8 @@ export function create_text_input_manager(config) {
         is_valid = is_valid_url
         if (!is_valid_url) {
           error_message = "Not Valid URL"
-        } else if (is_preview_img && is_valid_web_url(val_input)) {
-          is_image_url = type == "url" && check_image_url(val_input)
+        } else if (is_preview_img) {
+          should_validate_image_url = true
         }
       } else if (type == "password") {
         const is_password_standard_met = is_password_valid(val_input)
@@ -164,6 +166,12 @@ export function create_text_input_manager(config) {
       val_input = val_input == null ? null : Number(val_input)
     }
     val = val_input
+    if (should_validate_image_url) {
+      void update_image_url_state(val_input)
+    } else {
+      image_validation_request_id++
+      is_image_url = false
+    }
     if (!is_iternal) {
       rerender_input_trigger++
     }
@@ -173,14 +181,24 @@ export function create_text_input_manager(config) {
   }
 
   async function check_image_url(val) {
-    if (is_preview_img && is_valid_web_url(val)) {
-      const res = await fetch(url)
-      const buff = await res.blob()
-      const is_valid = buff.type.startsWith("image/")
-      return is_valid
-    } else {
+    if (!browser || !is_preview_img || !is_valid_web_url(val)) {
       return false
     }
+    return new Promise((resolve) => {
+      const image = new Image()
+      image.onload = () => resolve(true)
+      image.onerror = () => resolve(false)
+      image.src = val
+    })
+  }
+
+  async function update_image_url_state(val_input) {
+    const request_id = ++image_validation_request_id
+    is_image_url = false
+    const is_valid_image = await check_image_url(val_input)
+    if (request_id == image_validation_request_id && type == "url" && is_preview_img && val == val_input) {
+      is_image_url = is_valid_image
+    }
   }
 
   function is_password_valid(val) {
@@ -188,7 +206,7 @@ export function create_text_input_manager(config) {
     const contains_uppercase_letter = val ? val.toLowerCase() != val : false
     const contains_number = val ? /[0-9]/.test(val) : false
     const contains_special_char = val ? /[!-\/:-@[-`{-~]/.test(val) : false
-    const is_password_long_enough = val ? val.length > password_min_length : false
+    const is_password_long_enough = val ? val.length >= password_min_length : false
     const is_password_standard_met =
       (!is_password_requires_lowercase || (is_password_requires_lowercase && contains_lowercase_letter)) &&
       (!is_password_requires_uppercase || (is_password_requires_uppercase && contains_uppercase_letter)) &&
@@ -199,16 +217,19 @@ export function create_text_input_manager(config) {
   }
 
   function is_valid_web_url(url) {
-    let reg_ex =
-      /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/gm
-    return reg_ex.test(url)
+    try {
+      const parsed_url = new URL(url)
+      return ["http:", "https:"].includes(parsed_url.protocol) && !!parsed_url.hostname
+    } catch {
+      return false
+    }
   }
 
   function set_focus() {
     if (!is_disabled) {
       if (browser) {
         let input_el = document?.querySelector(`#input_${id}`)
-        input_el.focus()
+        input_el?.focus()
       }
     }
   }
@@ -267,10 +288,11 @@ export function create_text_input_manager(config) {
       text: "Set Null",
       is_compressed: true,
       is_disabled: () => val == null,
-      on_click: () => (val = null),
+      on_click: () => set_val(null),
     })
     finish_button_manager = create_button_manager({
       text: update_button_text ?? "Finish",
+      is_loading: () => is_loading,
       on_click: () => finish(),
     })
   }
@@ -306,6 +328,9 @@ export function create_text_input_manager(config) {
     get is_required() {
       return is_required
     },
+    get is_read_only() {
+      return is_read_only
+    },
     get error_message() {
       return error_message
     },
@@ -327,6 +352,9 @@ export function create_text_input_manager(config) {
     get is_disabled() {
       return is_disabled
     },
+    get is_loading() {
+      return is_loading
+    },
     get password_min_length() {
       return password_min_length
     },

package/dist/Components/Time/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/Time/manager.svelte.d.ts

@@ -0,0 +1,31 @@
+export function create_time_manager(config: any): {
+    readonly text_color: any;
+    readonly datetime: any;
+    readonly content: any;
+    readonly time_full: {
+        days: any;
+        hours: any;
+        minutes: any;
+        seconds: any;
+        iso_8601: null;
+        total_seconds: null;
+        content: null;
+    } | {
+        epoch: null;
+        granularity: any;
+        year: null;
+        month: null;
+        day_of_month: null;
+        day_of_week: null;
+        day_of_year: null;
+        week_of_year: null;
+        hour: null;
+        minute: null;
+        second: null;
+        timezone: string;
+        datetime: null;
+        datetime_zoned: null;
+        datetime_utc: null;
+        content: null;
+    } | undefined;
+};

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

@@ -0,0 +1,44 @@
+import { get_time_object_from_val } from "../TimeInput/index.js"
+import { set_closurable_color, set_closurable } from "../../client/index.js"
+
+export function create_time_manager(config) {
+  let val = $derived(set_closurable(config?.val, null))
+  let format = $derived(set_closurable(config?.format, null))
+  let granularity = $derived(set_closurable(config?.granularity, null))
+  let timezone = $derived(set_closurable(config?.timezone, null))
+  let display_format = $derived(set_closurable(config?.display_format, null))
+  let text_color = $derived(set_closurable_color(config?.text_color, null))
+  let time_full = $derived(get_time_object_from_val(val, format, granularity, timezone))
+  let datetime = $derived(
+    format === "datetime_utc"
+      ? time_full?.datetime_utc
+      : format === "datetime_zoned"
+        ? time_full?.datetime_zoned
+        : time_full?.datetime ?? time_full?.iso_8601 ?? null,
+  )
+  let content = $derived(get_content(time_full, val, display_format))
+
+  function get_content(next_time_full, raw_val, next_display_format) {
+    if (next_display_format === "calendar_date" && next_time_full?.year) {
+      return `${next_time_full.year}-${String(next_time_full?.month).padStart(2, "0")}-${String(
+        next_time_full?.day_of_month,
+      ).padStart(2, "0")}`
+    }
+    return next_time_full?.content ?? raw_val
+  }
+
+  return {
+    get text_color() {
+      return text_color
+    },
+    get datetime() {
+      return datetime
+    },
+    get content() {
+      return content
+    },
+    get time_full() {
+      return time_full
+    },
+  }
+}

package/dist/Components/TimeInput/NumberToggler/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/TimeInput/NumberToggler/manager.svelte.d.ts

@@ -0,0 +1,8 @@
+export function create_number_toggler(config: any): {
+    readonly val: any;
+    readonly label: null;
+    readonly number_plus_one_button_manager: null;
+    readonly number_minus_one_button_manager: null;
+    readonly number_text_input_manager: null;
+    set_val: (input: any) => void;
+};

package/{src/lib/Components/TimeInput/NumberToggler/index.svelte.js → dist/Components/TimeInput/NumberToggler/manager.svelte.js}

@@ -1,5 +1,5 @@
-import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_text_input_manager } from "../../TextInput/manager.svelte.js"
+import { create_button_manager } from "../../Button/manager.svelte.js"
 
 export function create_number_toggler(config) {
   let number_plus_one_button_manager = $state(null)
@@ -29,6 +29,7 @@ export function create_number_toggler(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: () => `Increase ${label ?? "value"}`,
       on_click: () =>
         number_text_input_manager.set_val(
           Number.isInteger(number_text_input_manager?.val) ? number_text_input_manager?.val + 1 : 0
@@ -43,6 +44,7 @@ export function create_number_toggler(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: () => `Decrease ${label ?? "value"}`,
       on_click: () =>
         number_text_input_manager.set_val(
           Number.isInteger(number_text_input_manager?.val) ? number_text_input_manager?.val - 1 : 0

package/dist/Components/TimeInput/index.d.ts

@@ -0,0 +1,193 @@
+export function period_iso_8601_to_period_full(input: any): {
+    days: null;
+    hours: null;
+    minutes: null;
+    seconds: null;
+};
+export function total_seconds_to_period_full(input: any): {
+    days: null;
+    hours: null;
+    minutes: null;
+    seconds: null;
+};
+export function period_full_parts_to_full(input: any, from_period_iso_8601: any, from_total_seconds: any): {
+    days: any;
+    hours: any;
+    minutes: any;
+    seconds: any;
+    iso_8601: null;
+    total_seconds: null;
+    content: null;
+};
+export function get_time_full_from_object(val_loc: any): {
+    days: any;
+    hours: any;
+    minutes: any;
+    seconds: any;
+    iso_8601: null;
+    total_seconds: null;
+    content: null;
+} | {
+    epoch: null;
+    granularity: any;
+    year: null;
+    month: null;
+    day_of_month: null;
+    day_of_week: null;
+    day_of_year: null;
+    week_of_year: null;
+    hour: null;
+    minute: null;
+    second: null;
+    timezone: string;
+    datetime: null;
+    datetime_zoned: null;
+    datetime_utc: null;
+    content: null;
+};
+export function get_time_object_from_val(input: any, format: any, granularity: any, timezone: any): {
+    days: any;
+    hours: any;
+    minutes: any;
+    seconds: any;
+    iso_8601: null;
+    total_seconds: null;
+    content: null;
+} | {
+    epoch: null;
+    granularity: any;
+    year: null;
+    month: null;
+    day_of_month: null;
+    day_of_week: null;
+    day_of_year: null;
+    week_of_year: null;
+    hour: null;
+    minute: null;
+    second: null;
+    timezone: string;
+    datetime: null;
+    datetime_zoned: null;
+    datetime_utc: null;
+    content: null;
+} | undefined;
+export function get_val_from_time_object(input: any): any;
+export namespace time_formats {
+    export namespace time_full {
+        let name: string;
+        namespace example {
+            let year: number;
+            let month: number;
+            let day: number;
+            let hour: number;
+            let minute: number;
+            let second: number;
+            let datetime: null;
+            let datetime_utc: null;
+            let datetime_zoned: null;
+        }
+    }
+    export namespace epoch {
+        let name_1: string;
+        export { name_1 as name };
+        let example_1: string;
+        export { example_1 as example };
+        export let needs_granularity: boolean;
+    }
+    export namespace datetime_1 {
+        let name_2: string;
+        export { name_2 as name };
+        let example_2: string;
+        export { example_2 as example };
+        let needs_granularity_1: boolean;
+        export { needs_granularity_1 as needs_granularity };
+    }
+    export { datetime_1 as datetime };
+    export namespace datetime_utc_1 {
+        let name_3: string;
+        export { name_3 as name };
+        let example_3: string;
+        export { example_3 as example };
+        let needs_granularity_2: boolean;
+        export { needs_granularity_2 as needs_granularity };
+    }
+    export { datetime_utc_1 as datetime_utc };
+    export namespace datetime_zoned_1 {
+        let name_4: string;
+        export { name_4 as name };
+        let example_4: string;
+        export { example_4 as example };
+        let needs_granularity_3: boolean;
+        export { needs_granularity_3 as needs_granularity };
+    }
+    export { datetime_zoned_1 as datetime_zoned };
+    export namespace calendar_date {
+        let name_5: string;
+        export { name_5 as name };
+        let example_5: string;
+        export { example_5 as example };
+    }
+    export namespace year_1 {
+        let name_6: string;
+        export { name_6 as name };
+        let example_6: string;
+        export { example_6 as example };
+    }
+    export { year_1 as year };
+    export namespace year_month {
+        let name_7: string;
+        export { name_7 as name };
+        let example_7: string;
+        export { example_7 as example };
+    }
+    export namespace year_week {
+        let name_8: string;
+        export { name_8 as name };
+        let example_8: string;
+        export { example_8 as example };
+    }
+    export namespace hour_minute {
+        let name_9: string;
+        export { name_9 as name };
+        let example_9: string;
+        export { example_9 as example };
+    }
+    export namespace hour_minute_second {
+        let name_10: string;
+        export { name_10 as name };
+        let example_10: string;
+        export { example_10 as example };
+    }
+    export namespace period_full {
+        let name_11: string;
+        export { name_11 as name };
+        export namespace example_11 {
+            let years: number;
+            let months: number;
+            let days: number;
+            let hours: number;
+            let minutes: number;
+            let seconds: number;
+        }
+        export { example_11 as example };
+    }
+    export namespace period_iso_8601 {
+        let name_12: string;
+        export { name_12 as name };
+        let example_12: string;
+        export { example_12 as example };
+    }
+    export namespace period_total_seconds {
+        let name_13: string;
+        export { name_13 as name };
+        let example_13: string;
+        export { example_13 as example };
+    }
+}
+export const granularities: string[];
+export const month_names: string[];
+export const days_of_week_names: string[];
+export const common_timezones: {
+    text: string;
+    offset: string;
+}[];