sveltekit-ui 1.1.74 → 1.1.76

package/dist/Components/Content/index.svelte

@@ -33,17 +33,60 @@
   import { format_date, set_closurable_color, set_closurable, cron_to_english } from "../../client/index.js"
 
   let { manager } = $props()
+  let is_editable = $derived(manager?.focused_selector_id !== undefined)
+  const paragraph_leaf_types = new Set(["base_text", "br", "cron", "em", "q", "ref", "strong", "strong_em", "variable"])
+  const paragraph_container_types = new Set(["mark", "s", "span", "sub", "sup"])
+
+  function is_phrasing_content(child_manager) {
+    const type_id = child_manager?.val_prepped?.type_id
+    if (paragraph_leaf_types.has(type_id)) return true
+    if (!paragraph_container_types.has(type_id)) return false
+    const child_nodes = child_manager?.val_prepped?.children
+    return !Array.isArray(child_nodes) || child_nodes.every(is_phrasing_content)
+  }
+
+  let is_native_paragraph = $derived(
+    !Array.isArray(manager?.val_prepped?.children) || manager.val_prepped.children.every(is_phrasing_content)
+  )
+
+  function normalize_anchor_href(value) {
+    const href = set_closurable(value)
+    if (typeof href !== "string") return null
+    const trimmed_href = href.trim()
+    if (!/^#[^\u0000-\u001f\u007f]+$/.test(trimmed_href)) return null
+    return trimmed_href
+  }
 
   function handle_anchor_click(event) {
     event.preventDefault()
-    const link = event.currentTarget
-    const anchor_id = new URL(link.href).hash
-    const anchor = document?.querySelector(anchor_id)
+    const href = normalize_anchor_href(event.currentTarget?.getAttribute("href"))
+    if (!href) return
+
+    let anchor_id
+    try {
+      anchor_id = decodeURIComponent(href.slice(1))
+    } catch {
+      return
+    }
+
+    const anchor = document.getElementById(anchor_id)
+    if (!anchor) return
     window.scrollTo({
       top: anchor.offsetTop - 100,
       behavior: "smooth",
     })
   }
+
+  function open_base_text_editor() {
+    manager?.open_edit_element_attributes_popover(manager?.val_prepped?.selector_id)
+  }
+
+  function handle_base_text_keydown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault()
+      open_base_text_editor()
+    }
+  }
 </script>
 
 {#snippet children()}
@@ -192,9 +235,15 @@
     {/if}
   </figure>
 {:else if manager?.val_prepped?.type_id == "p"}
-  <p id={manager?.val_prepped?.selector_id}>
-    {@render children()}
-  </p>
+  {#if is_native_paragraph}
+    <p id={manager?.val_prepped?.selector_id}>
+      {@render children()}
+    </p>
+  {:else}
+    <div class="paragraph" role="paragraph" id={manager?.val_prepped?.selector_id}>
+      {@render children()}
+    </div>
+  {/if}
 {:else if manager?.val_prepped?.type_id == "nav"}
   <nav id={manager?.val_prepped?.selector_id}>
     {@render children()}
@@ -362,7 +411,7 @@
     <a
       id={manager?.val_prepped?.selector_id}
       onclick={handle_anchor_click}
-      href={set_closurable(manager?.val_prepped?.attributes?.href)}
+      href={normalize_anchor_href(manager?.val_prepped?.attributes?.href) ?? undefined}
       >{set_closurable(manager?.val_prepped?.attributes?.content)}</a
     ></sup
   >
@@ -439,22 +488,35 @@
     {set_closurable(manager?.val_prepped?.attributes?.val)}
   </abbr>
 {:else if manager?.val_prepped?.type_id === "base_text"}
-  <span
-    role="button"
-    tabindex="0"
-    style="{manager?.val_prepped?.attributes?.text_color
-      ? `color: ${set_closurable_color(manager?.val_prepped?.attributes?.text_color)};`
-      : ''} {manager?.val_prepped?.attributes?.font_size
-      ? `font-size: ${manager?.val_prepped?.attributes?.font_size}rem`
-      : ''}"
-    onclick={() => manager?.open_edit_element_attributes_popover(manager?.val_prepped?.selector_id)}
-    onkeydown={() => manager?.open_edit_element_attributes_popover(manager?.val_prepped?.selector_id)}
-    onpointerenter={() => manager?.set_focused_selector_id(manager?.val_prepped?.selector_id)}
-    onpointercancel={() => manager?.set_focused_selector_id(null)}
-    onpointerleave={() => manager?.set_focused_selector_id(null)}
-  >
-    {set_closurable(manager?.val_prepped?.attributes?.content)}
-  </span>
+  {#if is_editable}
+    <span
+      role="button"
+      tabindex="0"
+      aria-label="Edit text"
+      style="{manager?.val_prepped?.attributes?.text_color
+        ? `color: ${set_closurable_color(manager?.val_prepped?.attributes?.text_color)};`
+        : ''} {manager?.val_prepped?.attributes?.font_size
+        ? `font-size: ${manager?.val_prepped?.attributes?.font_size}rem`
+        : ''}"
+      onclick={open_base_text_editor}
+      onkeydown={handle_base_text_keydown}
+      onpointerenter={() => manager?.set_focused_selector_id(manager?.val_prepped?.selector_id)}
+      onpointercancel={() => manager?.set_focused_selector_id(null)}
+      onpointerleave={() => manager?.set_focused_selector_id(null)}
+    >
+      {set_closurable(manager?.val_prepped?.attributes?.content)}
+    </span>
+  {:else}
+    <span
+      style="{manager?.val_prepped?.attributes?.text_color
+        ? `color: ${set_closurable_color(manager?.val_prepped?.attributes?.text_color)};`
+        : ''} {manager?.val_prepped?.attributes?.font_size
+        ? `font-size: ${manager?.val_prepped?.attributes?.font_size}rem`
+        : ''}"
+    >
+      {set_closurable(manager?.val_prepped?.attributes?.content)}
+    </span>
+  {/if}
 {:else if manager?.val_prepped?.type_id === "br"}
   <br />
 {:else if manager?.val_prepped?.type_id === "spacer"}
@@ -485,8 +547,15 @@
   p:not(:first-child) {
     margin-top: 1rem;
   }
+  .paragraph {
+    margin-block: 1em;
+  }
+  .paragraph:not(:first-child) {
+    margin-top: 1rem;
+  }
   a,
   p,
+  .paragraph,
   li,
   td,
   th,

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

@@ -0,0 +1,7 @@
+export function create_content_manager(config: any): {
+    readonly val_prepped: null;
+    readonly focused_selector_id: any;
+    pass_event_down: (input: any) => void;
+    set_focused_selector_id: (input: any) => void;
+    open_edit_element_attributes_popover: (input: any) => void;
+};

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

@@ -1,31 +1,31 @@
-import { create_audio_manager } from "../Audio/index.svelte.js"
-import { create_image_manager } from "../Image/index.svelte.js"
-import { create_color_manager } from "../Color/index.svelte.js"
-import { create_code_manager } from "../Code/index.svelte.js"
-import { create_email_address_manager } from "../EmailAddress/index.svelte.js"
-import { create_number_manager } from "../Number/index.svelte.js"
-import { create_phone_number_manager } from "../PhoneNumber/index.svelte.js"
-import { create_table_advanced_manager } from "../TableAdvanced/index.svelte.js"
-import { create_icon_input_manager } from "../IconInput/index.svelte.js"
-import { create_icon_manager } from "../Icon/index.svelte.js"
-import { create_json_manager } from "../Json/index.svelte.js"
-// import { create_tag_manager } from "../Tag/index.svelte.js" // might figure some function builder for conditions but tbd how to best handle
-import { create_link_manager } from "../Link/index.svelte.js"
-import { create_x_post_manager } from "../XPost/index.svelte.js"
-import { create_youtube_video_manager } from "../YoutubeVideo/index.svelte.js"
-import { create_slider_manager } from "../Slider/index.svelte.js"
-import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
-import { create_text_input_manager } from "../TextInput/index.svelte.js"
-import { create_color_input_manager } from "../ColorInput/index.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
-import { create_time_input_manager } from "../TimeInput/index.svelte.js"
-import { create_time_manager } from "../Time/index.svelte.js"
-import { create_location_input_manager } from "../LocationInput/index.svelte.js"
-import { create_location_manager } from "../Location/index.svelte.js"
-import { create_qr_manager } from "../Qr/index.svelte.js"
-import { create_file_input_manager } from "../FileInput/index.svelte.js"
-import { create_cron_input_manager } from "../CronInput/index.svelte.js"
-import { create_button_manager } from "../Button/index.svelte.js"
+import { create_audio_manager } from "../Audio/manager.svelte.js"
+import { create_image_manager } from "../Image/manager.svelte.js"
+import { create_color_manager } from "../Color/manager.svelte.js"
+import { create_code_manager } from "../Code/manager.svelte.js"
+import { create_email_address_manager } from "../EmailAddress/manager.svelte.js"
+import { create_number_manager } from "../Number/manager.svelte.js"
+import { create_phone_number_manager } from "../PhoneNumber/manager.svelte.js"
+import { create_table_advanced_manager } from "../TableAdvanced/manager.svelte.js"
+import { create_icon_input_manager } from "../IconInput/manager.svelte.js"
+import { create_icon_manager } from "../Icon/manager.svelte.js"
+import { create_json_manager } from "../Json/manager.svelte.js"
+// import { create_tag_manager } from "../Tag/manager.svelte.js" // might figure some function builder for conditions but tbd how to best handle
+import { create_link_manager } from "../Link/manager.svelte.js"
+import { create_x_post_manager } from "../XPost/manager.svelte.js"
+import { create_youtube_video_manager } from "../YoutubeVideo/manager.svelte.js"
+import { create_slider_manager } from "../Slider/manager.svelte.js"
+import { create_checkbox_manager } from "../Checkbox/manager.svelte.js"
+import { create_text_input_manager } from "../TextInput/manager.svelte.js"
+import { create_color_input_manager } from "../ColorInput/manager.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/manager.svelte.js"
+import { create_time_input_manager } from "../TimeInput/manager.svelte.js"
+import { create_time_manager } from "../Time/manager.svelte.js"
+import { create_location_input_manager } from "../LocationInput/manager.svelte.js"
+import { create_location_manager } from "../Location/manager.svelte.js"
+import { create_qr_manager } from "../Qr/manager.svelte.js"
+import { create_file_input_manager } from "../FileInput/manager.svelte.js"
+import { create_cron_input_manager } from "../CronInput/manager.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
 import {
   node_types,
   deep_copy,
@@ -58,7 +58,6 @@ export function create_content_manager(config) {
   }
 
   function pass_event_down(input) {
-    console.log("pass_event_down", input)
     if (input?.set_from_content_id == id) {
       return
     }
@@ -289,6 +288,7 @@ export function create_content_manager(config) {
         copy_button_manager: create_button_manager({
           type: "soft",
           support_icon: "clipboard",
+          aria_label: "Copy inline code",
           is_uniform: true,
           min_height: 2.4,
           icon_size: 1.6,
@@ -553,16 +553,12 @@ export function create_content_manager(config) {
         manager: create_file_input_manager({
           ...val_loc?.attributes,
           // height: "100%",
-          on_get_file: (input) => {
-            console.log("on_get_file_tbd", input)
-            set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input)
-          },
+          on_get_file: (input) => set_variable_at_path(val_loc?.attributes?.val_from_variable_path, input),
         }),
         is_children: false,
         children: [],
       }
     } else if (val_loc?.type_id == "slot") {
-      console.log("slot666", val_loc)
       return {
         type_id: val_loc?.type_id,
         selector_id: val_loc?.selector_id,

package/dist/Components/ContentInput/AttributesInput/CustomConfig/Audio/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/ContentInput/AttributesInput/CustomConfig/Audio/manager.svelte.d.ts

@@ -0,0 +1,39 @@
+export function create_audio_config_manager(config: any): {
+    readonly val: {
+        ui_type: any;
+        storage_id: any;
+        is_storage_id_public: any;
+        src: any;
+        mime_type: any;
+        title: any;
+        album: any;
+        artist: any;
+        image_storage_id: any;
+        image_is_storage_id_public: any;
+        image_src: any;
+        image_src_quick: any;
+        image_mime_type: any;
+        image_width: any;
+        image_height: any;
+        image_aspect_ratio: any;
+    };
+    readonly ui_type_dropdown_manager: null;
+    readonly audio_storage_picker_manager: null;
+    readonly storage_id_text_input_manager: null;
+    readonly is_storage_id_public_checkbox_manager: null;
+    readonly src_text_input_manager: null;
+    readonly mime_type_text_input_manager: null;
+    readonly title_text_input_manager: null;
+    readonly album_text_input_manager: null;
+    readonly artist_text_input_manager: null;
+    readonly image_storage_picker_manager: null;
+    readonly image_storage_id_text_input_manager: null;
+    readonly image_is_storage_id_public_checkbox_manager: null;
+    readonly image_src_text_input_manager: null;
+    readonly image_src_quick_text_input_manager: null;
+    readonly image_mime_type_text_input_manager: null;
+    readonly image_width_text_input_manager: null;
+    readonly image_height_text_input_manager: null;
+    readonly image_aspect_ratio_text_input_manager: null;
+    set_val: (input: any) => void;
+};

package/dist/Components/ContentInput/AttributesInput/CustomConfig/Audio/{index.svelte.js → manager.svelte.js}

@@ -1,7 +1,7 @@
-import { create_storage_picker_manager } from "../../../../StoragePicker/index.svelte.js"
-import { create_text_input_manager } from "../../../../TextInput/index.svelte.js"
-import { create_checkbox_manager } from "../../../../Checkbox/index.svelte.js"
-import { create_dropdown_manager } from "../../../../Dropdown/index.svelte.js"
+import { create_storage_picker_manager } from "../../../../StoragePicker/manager.svelte.js"
+import { create_text_input_manager } from "../../../../TextInput/manager.svelte.js"
+import { create_checkbox_manager } from "../../../../Checkbox/manager.svelte.js"
+import { create_dropdown_manager } from "../../../../Dropdown/manager.svelte.js"
 import { set_closurable, get_image_dimensions_from_src } from "../../../../../client/index.js"
 
 export function create_audio_config_manager(config) {
@@ -67,7 +67,6 @@ export function create_audio_config_manager(config) {
   }
 
   function init(config) {
-    console.log("init_image_conf", config)
     ui_type_dropdown_manager = create_dropdown_manager({
       label: "UI Type",
       is_button_compressed: true,

package/dist/Components/ContentInput/AttributesInput/CustomConfig/AudioAdvanced/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/ContentInput/AttributesInput/CustomConfig/AudioAdvanced/manager.svelte.d.ts

@@ -0,0 +1,39 @@
+export function create_audio_advanced_config_manager(config: any): {
+    readonly val: {
+        ui_type: any;
+        storage_id: any;
+        is_storage_id_public: any;
+        src: any;
+        mime_type: any;
+        title: any;
+        album: any;
+        artist: any;
+        image_storage_id: any;
+        image_is_storage_id_public: any;
+        image_src: any;
+        image_src_quick: any;
+        image_mime_type: any;
+        image_width: any;
+        image_height: any;
+        image_aspect_ratio: any;
+    };
+    readonly ui_type_dropdown_manager: null;
+    readonly audio_storage_picker_manager: null;
+    readonly storage_id_text_input_manager: null;
+    readonly is_storage_id_public_checkbox_manager: null;
+    readonly src_text_input_manager: null;
+    readonly mime_type_text_input_manager: null;
+    readonly title_text_input_manager: null;
+    readonly album_text_input_manager: null;
+    readonly artist_text_input_manager: null;
+    readonly image_storage_picker_manager: null;
+    readonly image_storage_id_text_input_manager: null;
+    readonly image_is_storage_id_public_checkbox_manager: null;
+    readonly image_src_text_input_manager: null;
+    readonly image_src_quick_text_input_manager: null;
+    readonly image_mime_type_text_input_manager: null;
+    readonly image_width_text_input_manager: null;
+    readonly image_height_text_input_manager: null;
+    readonly image_aspect_ratio_text_input_manager: null;
+    set_val: (input: any) => void;
+};

package/dist/Components/ContentInput/AttributesInput/CustomConfig/AudioAdvanced/{index.svelte.js → manager.svelte.js}

@@ -1,7 +1,7 @@
-import { create_storage_picker_manager } from "../../../../StoragePicker/index.svelte.js"
-import { create_text_input_manager } from "../../../../TextInput/index.svelte.js"
-import { create_checkbox_manager } from "../../../../Checkbox/index.svelte.js"
-import { create_dropdown_manager } from "../../../../Dropdown/index.svelte.js"
+import { create_storage_picker_manager } from "../../../../StoragePicker/manager.svelte.js"
+import { create_text_input_manager } from "../../../../TextInput/manager.svelte.js"
+import { create_checkbox_manager } from "../../../../Checkbox/manager.svelte.js"
+import { create_dropdown_manager } from "../../../../Dropdown/manager.svelte.js"
 import { set_closurable, get_image_dimensions_from_src } from "../../../../../client/index.js"
 
 export function create_audio_advanced_config_manager(config) {
@@ -67,7 +67,6 @@ export function create_audio_advanced_config_manager(config) {
   }
 
   function init(config) {
-    console.log("init_image_conf", config)
     ui_type_dropdown_manager = create_dropdown_manager({
       label: "UI Type",
       is_button_compressed: true,

package/dist/Components/ContentInput/AttributesInput/CustomConfig/Dropdown/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/ContentInput/AttributesInput/CustomConfig/Dropdown/manager.svelte.d.ts

@@ -0,0 +1,19 @@
+export function create_dropdown_config_manager(config: any): {
+    readonly val: any;
+    readonly val_text_input_manager: null;
+    readonly val_defined_type_input_manager: null;
+    readonly options: any[];
+    readonly header_text_input_manager: null;
+    readonly placeholder_text_input_manager: null;
+    readonly is_multiselect_checkbox_manager: null;
+    readonly is_set_null_button_checkbox_manager: null;
+    readonly is_show_arrow_checkbox_manager: null;
+    readonly is_button_compressed_checkbox_manager: null;
+    readonly is_searchable_checkbox_manager: null;
+    readonly target_width_slider_manager: null;
+    readonly target_height_slider_manager: null;
+    readonly key_to_add_text_input_manager: null;
+    readonly name_to_add_text_input_manager: null;
+    readonly add_option_button_manager: null;
+    readonly options_prepped: any[];
+};

package/dist/Components/ContentInput/AttributesInput/CustomConfig/Dropdown/{index.svelte.js → manager.svelte.js}

@@ -1,8 +1,8 @@
-import { create_button_manager } from "../../../../Button/index.svelte.js"
-import { create_checkbox_manager } from "../../../../Checkbox/index.svelte.js"
-import { create_slider_manager } from "../../../../Slider/index.svelte.js"
-import { create_text_input_manager } from "../../../../TextInput/index.svelte.js"
-import { create_defined_type_input_manager } from "../../DefinedTypeInput/index.svelte.js"
+import { create_button_manager } from "../../../../Button/manager.svelte.js"
+import { create_checkbox_manager } from "../../../../Checkbox/manager.svelte.js"
+import { create_slider_manager } from "../../../../Slider/manager.svelte.js"
+import { create_text_input_manager } from "../../../../TextInput/manager.svelte.js"
+import { create_defined_type_input_manager } from "../../DefinedTypeInput/manager.svelte.js"
 import { deep_copy, set_closurable } from "../../../../../client/index.js"
 
 export function create_dropdown_config_manager(config) {

package/dist/Components/ContentInput/AttributesInput/CustomConfig/Image/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/ContentInput/AttributesInput/CustomConfig/Image/manager.svelte.d.ts

@@ -0,0 +1,34 @@
+export function create_image_config_manager(config: any): {
+    readonly val: {
+        storage_id: any;
+        alt: any;
+        image_width: any;
+        image_height: any;
+        image_aspect_ratio: any;
+        mime_type: any;
+        is_storage_id_public: any;
+        src: any;
+        src_quick: any;
+        display_max_height: any;
+        display_max_width: any;
+        border_radius: any;
+        bg_img_blur: any;
+        bg_img_opacity: any;
+    };
+    readonly storage_picker_manager: null;
+    readonly storage_id_text_input_manager: null;
+    readonly alt_text_input_manager: null;
+    readonly image_width_text_input_manager: null;
+    readonly image_height_text_input_manager: null;
+    readonly image_aspect_ratio_text_input_manager: null;
+    readonly mime_type_text_input_manager: null;
+    readonly is_storage_id_public_checkbox_manager: null;
+    readonly src_text_input_manager: null;
+    readonly src_quick_text_input_manager: null;
+    readonly display_max_height_slider_manager: null;
+    readonly display_max_width_slider_manager: null;
+    readonly border_radius_slider_manager: null;
+    readonly bg_img_blur_slider_manager: null;
+    readonly bg_img_opacity_slider_manager: null;
+    set_val: (input: any) => void;
+};

package/dist/Components/ContentInput/AttributesInput/CustomConfig/Image/{index.svelte.js → manager.svelte.js}

@@ -1,7 +1,7 @@
-import { create_storage_picker_manager } from "../../../../StoragePicker/index.svelte.js"
-import { create_text_input_manager } from "../../../../TextInput/index.svelte.js"
-import { create_checkbox_manager } from "../../../../Checkbox/index.svelte.js"
-import { create_slider_manager } from "../../../../Slider/index.svelte.js"
+import { create_storage_picker_manager } from "../../../../StoragePicker/manager.svelte.js"
+import { create_text_input_manager } from "../../../../TextInput/manager.svelte.js"
+import { create_checkbox_manager } from "../../../../Checkbox/manager.svelte.js"
+import { create_slider_manager } from "../../../../Slider/manager.svelte.js"
 import { set_closurable, get_image_dimensions_from_src } from "../../../../../client/index.js"
 
 export function create_image_config_manager(config) {
@@ -60,7 +60,6 @@ export function create_image_config_manager(config) {
   }
 
   function init(config) {
-    console.log("init_image_conf", config)
     storage_picker_manager = create_storage_picker_manager({
       storage: config?.storage,
       default_folder_path: config?.storage_default_folder_path,

package/dist/Components/ContentInput/AttributesInput/CustomConfig/Number/index.svelte

@@ -1,17 +1,13 @@
 <script>
-  import Button from "../../../../Button/index.svelte"
   import Checkbox from "../../../../Checkbox/index.svelte"
   import TextInput from "../../../../TextInput/index.svelte"
   import ColorInput from "../../../../ColorInput/index.svelte"
   import Dropdown from "../../../../Dropdown/index.svelte"
-  import VariablePathInput from "../../../../VariablePathInput/index.svelte"
-  import Color from "../../../../Color/index.svelte"
   import DefinedTypeInput from "../../DefinedTypeInput/index.svelte"
 
   let { manager } = $props()
 </script>
 
-<VariablePathInput manager={manager?.val_from_variable_path_input_manager} />
 <DefinedTypeInput manager={manager?.val_defined_type_input_manager} >
   {#snippet content()}
     <TextInput manager={manager?.val_text_input_manager} />
@@ -41,4 +37,4 @@
   <TextInput manager={manager?.progress_bar_end_text_input_manager} />
 {/if}
 <Dropdown manager={manager?.separators_dropdown_manager} />
-<Checkbox manager={manager?.is_tooltip_checkbox_manager} />
+<Checkbox manager={manager?.is_tooltip_checkbox_manager} />

package/dist/Components/ContentInput/AttributesInput/CustomConfig/Number/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/ContentInput/AttributesInput/CustomConfig/Number/manager.svelte.d.ts

@@ -0,0 +1,23 @@
+export function create_number_config_manager(config: any): {
+    readonly val: any;
+    readonly data_type: string;
+    readonly popover_manager: null;
+    readonly popover_toggle_button_manager: null;
+    readonly finish_button_manager: null;
+    readonly val_text_input_manager: null;
+    readonly val_defined_type_input_manager: null;
+    readonly round_dropdown_manager: null;
+    readonly shorthand_dropdown_manager: null;
+    readonly separators_dropdown_manager: null;
+    readonly base_color_manager: null;
+    readonly start_color_manager: null;
+    readonly end_color_manager: null;
+    readonly is_percentage_checkbox_manager: null;
+    readonly is_progress_bar_checkbox_manager: null;
+    readonly is_hide_number_checkbox_manager: null;
+    readonly is_tooltip_checkbox_manager: null;
+    readonly is_dynamic_color_checkbox_manager: null;
+    readonly round_text_input_manager: null;
+    readonly progress_bar_start_text_input_manager: null;
+    readonly progress_bar_end_text_input_manager: null;
+};

package/dist/Components/ContentInput/AttributesInput/CustomConfig/Number/{index.svelte.js → manager.svelte.js}

@@ -1,10 +1,10 @@
-import { create_popover_manager } from "../../../../Popover/index.svelte.js"
-import { create_button_manager } from "../../../../Button/index.svelte.js"
-import { create_dropdown_manager } from "../../../../Dropdown/index.svelte.js"
-import { create_text_input_manager } from "../../../../TextInput/index.svelte.js"
-import { create_color_input_manager } from "../../../../ColorInput/index.svelte.js"
-import { create_checkbox_manager } from "../../../../Checkbox/index.svelte.js"
-import { create_defined_type_input_manager } from "../../DefinedTypeInput/index.svelte.js"
+import { create_popover_manager } from "../../../../Popover/manager.svelte.js"
+import { create_button_manager } from "../../../../Button/manager.svelte.js"
+import { create_dropdown_manager } from "../../../../Dropdown/manager.svelte.js"
+import { create_text_input_manager } from "../../../../TextInput/manager.svelte.js"
+import { create_color_input_manager } from "../../../../ColorInput/manager.svelte.js"
+import { create_checkbox_manager } from "../../../../Checkbox/manager.svelte.js"
+import { create_defined_type_input_manager } from "../../DefinedTypeInput/manager.svelte.js"
 import { set_closurable } from "../../../../../client/index.js"
 
 export function create_number_config_manager(config) {
@@ -88,6 +88,13 @@ export function create_number_config_manager(config) {
     { key: "thousands_periods_comma", name: "Periods/Comma" },
   ]
 
+  function finish() {
+    if (typeof config?.on_finish == "function") {
+      config.on_finish(val)
+    }
+    popover_manager?.close()
+  }
+
   function init(config) {
     let val_loc = {}
     for (let [key, value] of Object.entries(number_base)) {

package/dist/Components/ContentInput/AttributesInput/CustomConfig/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;
+};