sveltekit-ui 1.1.17 → 1.1.19

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

@@ -0,0 +1,31 @@
+<script>
+  import StoragePicker from "../../../../StoragePicker/index.svelte"
+  import TextInput from "../../../../TextInput/index.svelte"
+  import Checkbox from "../../../../Checkbox/index.svelte"
+  import Dropdown from "../../../../Dropdown/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<Dropdown manager={manager?.ui_type_dropdown_manager} />
+<StoragePicker manager={manager?.audio_storage_picker_manager} />
+<TextInput manager={manager?.storage_id_text_input_manager} />
+<p style="font-size: 1.2rem;">
+  if only storage_id is provided the src values can be autogenerated at time of page load. Also, if the storage_id is
+  not public signed url can be generated and used for src values on page load
+</p>
+<Checkbox manager={manager?.is_storage_id_public_checkbox_manager} />
+<TextInput manager={manager?.src_text_input_manager} />
+<TextInput manager={manager?.mime_type_text_input_manager} />
+<TextInput manager={manager?.title_text_input_manager} />
+<TextInput manager={manager?.album_text_input_manager} />
+<TextInput manager={manager?.artist_text_input_manager} />
+<StoragePicker manager={manager?.image_storage_picker_manager} />
+<TextInput manager={manager?.image_storage_id_text_input_manager} />
+<Checkbox manager={manager?.image_is_storage_id_public_checkbox_manager} />
+<TextInput manager={manager?.image_src_text_input_manager} />
+<TextInput manager={manager?.image_src_quick_text_input_manager} />
+<TextInput manager={manager?.image_mime_type_text_input_manager} />
+<TextInput manager={manager?.image_width_text_input_manager} />
+<TextInput manager={manager?.image_height_text_input_manager} />
+<TextInput manager={manager?.image_aspect_ratio_text_input_manager} />

package/dist/Components/ContentInput/AttributesInput/CustomConfig/Audio/index.svelte.js

@@ -0,0 +1,258 @@
+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 { set_closurable, get_image_dimensions_from_src } from "../../../../../client/index.js"
+
+export function create_audio_config_manager(config) {
+  let ui_type_dropdown_manager = $state(null)
+  let audio_storage_picker_manager = $state(null)
+  let storage_id_text_input_manager = $state(null)
+  let is_storage_id_public_checkbox_manager = $state(null)
+  let src_text_input_manager = $state(null)
+  let mime_type_text_input_manager = $state(null)
+  let title_text_input_manager = $state(null)
+  let album_text_input_manager = $state(null)
+  let artist_text_input_manager = $state(null)
+  let image_storage_picker_manager = $state(null)
+  let image_storage_id_text_input_manager = $state(null)
+  let image_is_storage_id_public_checkbox_manager = $state(null)
+  let image_src_text_input_manager = $state(null)
+  let image_src_quick_text_input_manager = $state(null)
+  let image_mime_type_text_input_manager = $state(null)
+  let image_width_text_input_manager = $state(null)
+  let image_height_text_input_manager = $state(null)
+  let image_aspect_ratio_text_input_manager = $state(null)
+
+  let storage_src = $derived(
+    set_closurable(config?.storage_src, "https://www.contibase.com/api/v1/storage/{storage_id}")
+  )
+
+  let val = $derived({
+    ui_type: ui_type_dropdown_manager?.val,
+    storage_id: storage_id_text_input_manager?.val,
+    is_storage_id_public: is_storage_id_public_checkbox_manager?.val,
+    src: src_text_input_manager?.val,
+    mime_type: mime_type_text_input_manager?.val,
+    title: title_text_input_manager?.val,
+    album: album_text_input_manager?.val,
+    artist: artist_text_input_manager?.val,
+    image_storage_id: image_storage_id_text_input_manager?.val,
+    image_is_storage_id_public: image_is_storage_id_public_checkbox_manager?.val,
+    image_src: image_src_text_input_manager?.val,
+    image_src_quick: image_src_quick_text_input_manager?.val,
+    image_mime_type: image_mime_type_text_input_manager?.val,
+    image_width: image_width_text_input_manager?.val,
+    image_height: image_height_text_input_manager?.val,
+    image_aspect_ratio: image_aspect_ratio_text_input_manager?.val,
+  })
+
+  function set_val(input) {
+    ui_type_dropdown_manager.set_val(input?.ui_type ?? null)
+    storage_id_text_input_manager.set_val(input?.storage_id ?? null)
+    is_storage_id_public_checkbox_manager.set_val(input?.is_storage_id_public ?? null)
+    src_text_input_manager.set_val(input?.src ?? null)
+    mime_type_text_input_manager.set_val(input?.mime_type ?? null)
+    title_text_input_manager.set_val(input?.title ?? null)
+    album_text_input_manager.set_val(input?.album ?? null)
+    artist_text_input_manager.set_val(input?.artist ?? null)
+    image_storage_id_text_input_manager.set_val(input?.image_storage_id ?? null)
+    image_is_storage_id_public_checkbox_manager.set_val(input?.image_storage_id_is_public ?? null)
+    image_src_text_input_manager.set_val(input?.image_src ?? null)
+    image_src_quick_text_input_manager.set_val(input?.image_src_quick ?? null)
+    image_mime_type_text_input_manager.set_val(input?.image_mime_type ?? null)
+    image_width_text_input_manager.set_val(input?.image_width ?? null)
+    image_height_text_input_manager.set_val(input?.image_height ?? null)
+    image_aspect_ratio_text_input_manager.set_val(input?.image_aspect_ratio ?? null)
+  }
+
+  function init(config) {
+    console.log("init_image_conf", config)
+    ui_type_dropdown_manager = create_dropdown_manager({
+      label: "UI Type",
+      is_button_compressed: true,
+      options: [
+        { key: "standard", name: "Standard" },
+        { key: "short", name: "Short" },
+        { key: "square", name: "Square" },
+      ],
+      val: config?.val?.ui_type,
+    })
+    audio_storage_picker_manager = create_storage_picker_manager({
+      storage: config?.storage,
+      default_folder_path: config?.storage_default_folder_path,
+      storage_path: config?.storage_path,
+      storage_origins: ["storage"],
+      is_drop_zone: false,
+      accept: ["audio/mpeg"],
+      is_multiselect: false,
+      on_finish: async (input) => {
+        const src = storage_src.replace("{storage_id}", input?.id)
+        storage_id_text_input_manager.set_val(input?.id ?? null)
+        is_storage_id_public_checkbox_manager.set_val(input?.is_public ?? null)
+        src_text_input_manager.set_val(null)
+        mime_type_text_input_manager.set_val(input?.mime_type ?? null)
+      },
+    })
+    title_text_input_manager = create_text_input_manager({
+      label: "Title",
+      placeholder: "title",
+      val: config?.val?.title,
+    })
+    album_text_input_manager = create_text_input_manager({
+      label: "Album",
+      placeholder: "album",
+      val: config?.val?.album,
+    })
+    artist_text_input_manager = create_text_input_manager({
+      label: "Artist",
+      placeholder: "artist",
+      val: config?.val?.artist,
+    })
+    storage_id_text_input_manager = create_text_input_manager({
+      label: "Storage ID",
+      placeholder: "storage_id",
+      val: config?.val?.storage_id,
+    })
+    is_storage_id_public_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Public",
+      val: config?.val?.is_storage_id_public,
+    })
+    src_text_input_manager = create_text_input_manager({
+      label: "src",
+      placeholder: "src",
+      val: config?.val?.src,
+    })
+    mime_type_text_input_manager = create_text_input_manager({
+      label: "Mime Type",
+      placeholder: "mime_type",
+      val: config?.val?.mime_type,
+    })
+    image_storage_picker_manager = create_storage_picker_manager({
+      storage: config?.storage,
+      default_folder_path: config?.storage_default_folder_path,
+      storage_path: config?.storage_path,
+      storage_origins: ["storage"],
+      is_drop_zone: false,
+      accept: ["image/png", "image/jpeg", "image/webp", "image/gif"],
+      is_multiselect: false,
+      on_finish: async (input) => {
+        const src = storage_src.replace("{storage_id}", input?.id)
+        const dimensions = await get_image_dimensions_from_src(src)
+        image_storage_id_text_input_manager.set_val(input?.id ?? null)
+        image_mime_type_text_input_manager.set_val(input?.mime_type ?? null)
+        image_is_storage_id_public_checkbox_manager.set_val(input?.is_public ?? null)
+        image_width_text_input_manager.set_val(dimensions?.width ?? null)
+        image_height_text_input_manager.set_val(dimensions?.height ?? null)
+        image_aspect_ratio_text_input_manager.set_val(dimensions?.aspect_ratio ?? null)
+      },
+    })
+    image_storage_id_text_input_manager = create_text_input_manager({
+      label: "Image Storage ID",
+      placeholder: "image_storage_id",
+      val: config?.val?.image_storage_id,
+    })
+    image_mime_type_text_input_manager = create_text_input_manager({
+      label: "Image Mime Type",
+      placeholder: "image_mime_type",
+      val: config?.val?.mime_type,
+    })
+    image_is_storage_id_public_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Image Public",
+      val: config?.val?.image_is_storage_id_public,
+    })
+    image_src_text_input_manager = create_text_input_manager({
+      label: "Image src",
+      placeholder: "image_src",
+      val: config?.val?.image_src,
+    })
+    image_src_quick_text_input_manager = create_text_input_manager({
+      label: "image src quick (low quality placeholder image)",
+      placeholder: "src_quick",
+      val: config?.val?.image_src_quick,
+    })
+    image_width_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "Width",
+      placeholder: "width",
+      val: config?.val?.image_width,
+    })
+    image_height_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "Height",
+      placeholder: "height",
+      val: config?.val?.image_height,
+    })
+    image_aspect_ratio_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "Aspect Ratio",
+      placeholder: "aspect ratio",
+      val: config?.val?.image_aspect_ratio,
+    })
+  }
+
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    get ui_type_dropdown_manager() {
+      return ui_type_dropdown_manager
+    },
+    get audio_storage_picker_manager() {
+      return audio_storage_picker_manager
+    },
+    get storage_id_text_input_manager() {
+      return storage_id_text_input_manager
+    },
+    get is_storage_id_public_checkbox_manager() {
+      return is_storage_id_public_checkbox_manager
+    },
+    get src_text_input_manager() {
+      return src_text_input_manager
+    },
+    get mime_type_text_input_manager() {
+      return mime_type_text_input_manager
+    },
+    get title_text_input_manager() {
+      return title_text_input_manager
+    },
+    get album_text_input_manager() {
+      return album_text_input_manager
+    },
+    get artist_text_input_manager() {
+      return artist_text_input_manager
+    },
+    get image_storage_picker_manager() {
+      return image_storage_picker_manager
+    },
+    get image_storage_id_text_input_manager() {
+      return image_storage_id_text_input_manager
+    },
+    get image_is_storage_id_public_checkbox_manager() {
+      return image_is_storage_id_public_checkbox_manager
+    },
+    get image_src_text_input_manager() {
+      return image_src_text_input_manager
+    },
+    get image_src_quick_text_input_manager() {
+      return image_src_quick_text_input_manager
+    },
+    get image_mime_type_text_input_manager() {
+      return image_mime_type_text_input_manager
+    },
+    get image_width_text_input_manager() {
+      return image_width_text_input_manager
+    },
+    get image_height_text_input_manager() {
+      return image_height_text_input_manager
+    },
+    get image_aspect_ratio_text_input_manager() {
+      return image_aspect_ratio_text_input_manager
+    },
+    set_val,
+  }
+}

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

@@ -0,0 +1,31 @@
+<script>
+  import StoragePicker from "../../../../StoragePicker/index.svelte"
+  import TextInput from "../../../../TextInput/index.svelte"
+  import Checkbox from "../../../../Checkbox/index.svelte"
+  import Dropdown from "../../../../Dropdown/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<Dropdown manager={manager?.ui_type_dropdown_manager} />
+<StoragePicker manager={manager?.audio_storage_picker_manager} />
+<TextInput manager={manager?.storage_id_text_input_manager} />
+<p style="font-size: 1.2rem;">
+  if only storage_id is provided the src values can be autogenerated at time of page load. Also, if the storage_id is
+  not public signed url can be generated and used for src values on page load
+</p>
+<Checkbox manager={manager?.is_storage_id_public_checkbox_manager} />
+<TextInput manager={manager?.src_text_input_manager} />
+<TextInput manager={manager?.mime_type_text_input_manager} />
+<TextInput manager={manager?.title_text_input_manager} />
+<TextInput manager={manager?.album_text_input_manager} />
+<TextInput manager={manager?.artist_text_input_manager} />
+<StoragePicker manager={manager?.image_storage_picker_manager} />
+<TextInput manager={manager?.image_storage_id_text_input_manager} />
+<Checkbox manager={manager?.image_is_storage_id_public_checkbox_manager} />
+<TextInput manager={manager?.image_src_text_input_manager} />
+<TextInput manager={manager?.image_src_quick_text_input_manager} />
+<TextInput manager={manager?.image_mime_type_text_input_manager} />
+<TextInput manager={manager?.image_width_text_input_manager} />
+<TextInput manager={manager?.image_height_text_input_manager} />
+<TextInput manager={manager?.image_aspect_ratio_text_input_manager} />

package/dist/Components/ContentInput/AttributesInput/CustomConfig/AudioAdvanced/index.svelte.js

@@ -0,0 +1,258 @@
+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 { set_closurable, get_image_dimensions_from_src } from "../../../../../client/index.js"
+
+export function create_audio_advanced_config_manager(config) {
+  let ui_type_dropdown_manager = $state(null)
+  let audio_storage_picker_manager = $state(null)
+  let storage_id_text_input_manager = $state(null)
+  let is_storage_id_public_checkbox_manager = $state(null)
+  let src_text_input_manager = $state(null)
+  let mime_type_text_input_manager = $state(null)
+  let title_text_input_manager = $state(null)
+  let album_text_input_manager = $state(null)
+  let artist_text_input_manager = $state(null)
+  let image_storage_picker_manager = $state(null)
+  let image_storage_id_text_input_manager = $state(null)
+  let image_is_storage_id_public_checkbox_manager = $state(null)
+  let image_src_text_input_manager = $state(null)
+  let image_src_quick_text_input_manager = $state(null)
+  let image_mime_type_text_input_manager = $state(null)
+  let image_width_text_input_manager = $state(null)
+  let image_height_text_input_manager = $state(null)
+  let image_aspect_ratio_text_input_manager = $state(null)
+
+  let storage_src = $derived(
+    set_closurable(config?.storage_src, "https://www.contibase.com/api/v1/storage/{storage_id}")
+  )
+
+  let val = $derived({
+    ui_type: ui_type_dropdown_manager?.val,
+    storage_id: storage_id_text_input_manager?.val,
+    is_storage_id_public: is_storage_id_public_checkbox_manager?.val,
+    src: src_text_input_manager?.val,
+    mime_type: mime_type_text_input_manager?.val,
+    title: title_text_input_manager?.val,
+    album: album_text_input_manager?.val,
+    artist: artist_text_input_manager?.val,
+    image_storage_id: image_storage_id_text_input_manager?.val,
+    image_is_storage_id_public: image_is_storage_id_public_checkbox_manager?.val,
+    image_src: image_src_text_input_manager?.val,
+    image_src_quick: image_src_quick_text_input_manager?.val,
+    image_mime_type: image_mime_type_text_input_manager?.val,
+    image_width: image_width_text_input_manager?.val,
+    image_height: image_height_text_input_manager?.val,
+    image_aspect_ratio: image_aspect_ratio_text_input_manager?.val,
+  })
+
+  function set_val(input) {
+    ui_type_dropdown_manager.set_val(input?.ui_type ?? null)
+    storage_id_text_input_manager.set_val(input?.storage_id ?? null)
+    is_storage_id_public_checkbox_manager.set_val(input?.is_storage_id_public ?? null)
+    src_text_input_manager.set_val(input?.src ?? null)
+    mime_type_text_input_manager.set_val(input?.mime_type ?? null)
+    title_text_input_manager.set_val(input?.title ?? null)
+    album_text_input_manager.set_val(input?.album ?? null)
+    artist_text_input_manager.set_val(input?.artist ?? null)
+    image_storage_id_text_input_manager.set_val(input?.image_storage_id ?? null)
+    image_is_storage_id_public_checkbox_manager.set_val(input?.image_storage_id_is_public ?? null)
+    image_src_text_input_manager.set_val(input?.image_src ?? null)
+    image_src_quick_text_input_manager.set_val(input?.image_src_quick ?? null)
+    image_mime_type_text_input_manager.set_val(input?.image_mime_type ?? null)
+    image_width_text_input_manager.set_val(input?.image_width ?? null)
+    image_height_text_input_manager.set_val(input?.image_height ?? null)
+    image_aspect_ratio_text_input_manager.set_val(input?.image_aspect_ratio ?? null)
+  }
+
+  function init(config) {
+    console.log("init_image_conf", config)
+    ui_type_dropdown_manager = create_dropdown_manager({
+      label: "UI Type",
+      is_button_compressed: true,
+      options: [
+        { key: "standard", name: "Standard" },
+        { key: "short", name: "Short" },
+        { key: "square", name: "Square" },
+      ],
+      val: config?.val?.ui_type,
+    })
+    audio_storage_picker_manager = create_storage_picker_manager({
+      storage: config?.storage,
+      default_folder_path: config?.storage_default_folder_path,
+      storage_path: config?.storage_path,
+      storage_origins: ["storage"],
+      is_drop_zone: false,
+      accept: ["audio/mpeg"],
+      is_multiselect: false,
+      on_finish: async (input) => {
+        const src = storage_src.replace("{storage_id}", input?.id)
+        storage_id_text_input_manager.set_val(input?.id ?? null)
+        is_storage_id_public_checkbox_manager.set_val(input?.is_public ?? null)
+        src_text_input_manager.set_val(null)
+        mime_type_text_input_manager.set_val(input?.mime_type ?? null)
+      },
+    })
+    title_text_input_manager = create_text_input_manager({
+      label: "Title",
+      placeholder: "title",
+      val: config?.val?.title,
+    })
+    album_text_input_manager = create_text_input_manager({
+      label: "Album",
+      placeholder: "album",
+      val: config?.val?.album,
+    })
+    artist_text_input_manager = create_text_input_manager({
+      label: "Artist",
+      placeholder: "artist",
+      val: config?.val?.artist,
+    })
+    storage_id_text_input_manager = create_text_input_manager({
+      label: "Storage ID",
+      placeholder: "storage_id",
+      val: config?.val?.storage_id,
+    })
+    is_storage_id_public_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Public",
+      val: config?.val?.is_storage_id_public,
+    })
+    src_text_input_manager = create_text_input_manager({
+      label: "src",
+      placeholder: "src",
+      val: config?.val?.src,
+    })
+    mime_type_text_input_manager = create_text_input_manager({
+      label: "Mime Type",
+      placeholder: "mime_type",
+      val: config?.val?.mime_type,
+    })
+    image_storage_picker_manager = create_storage_picker_manager({
+      storage: config?.storage,
+      default_folder_path: config?.storage_default_folder_path,
+      storage_path: config?.storage_path,
+      storage_origins: ["storage"],
+      is_drop_zone: false,
+      accept: ["image/png", "image/jpeg", "image/webp", "image/gif"],
+      is_multiselect: false,
+      on_finish: async (input) => {
+        const src = storage_src.replace("{storage_id}", input?.id)
+        const dimensions = await get_image_dimensions_from_src(src)
+        image_storage_id_text_input_manager.set_val(input?.id ?? null)
+        image_mime_type_text_input_manager.set_val(input?.mime_type ?? null)
+        image_is_storage_id_public_checkbox_manager.set_val(input?.is_public ?? null)
+        image_width_text_input_manager.set_val(dimensions?.width ?? null)
+        image_height_text_input_manager.set_val(dimensions?.height ?? null)
+        image_aspect_ratio_text_input_manager.set_val(dimensions?.aspect_ratio ?? null)
+      },
+    })
+    image_storage_id_text_input_manager = create_text_input_manager({
+      label: "Image Storage ID",
+      placeholder: "image_storage_id",
+      val: config?.val?.image_storage_id,
+    })
+    image_mime_type_text_input_manager = create_text_input_manager({
+      label: "Image Mime Type",
+      placeholder: "image_mime_type",
+      val: config?.val?.mime_type,
+    })
+    image_is_storage_id_public_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Image Public",
+      val: config?.val?.image_is_storage_id_public,
+    })
+    image_src_text_input_manager = create_text_input_manager({
+      label: "Image src",
+      placeholder: "image_src",
+      val: config?.val?.image_src,
+    })
+    image_src_quick_text_input_manager = create_text_input_manager({
+      label: "image src quick (low quality placeholder image)",
+      placeholder: "src_quick",
+      val: config?.val?.image_src_quick,
+    })
+    image_width_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "Width",
+      placeholder: "width",
+      val: config?.val?.image_width,
+    })
+    image_height_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "Height",
+      placeholder: "height",
+      val: config?.val?.image_height,
+    })
+    image_aspect_ratio_text_input_manager = create_text_input_manager({
+      type: "number",
+      label: "Aspect Ratio",
+      placeholder: "aspect ratio",
+      val: config?.val?.image_aspect_ratio,
+    })
+  }
+
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    get ui_type_dropdown_manager() {
+      return ui_type_dropdown_manager
+    },
+    get audio_storage_picker_manager() {
+      return audio_storage_picker_manager
+    },
+    get storage_id_text_input_manager() {
+      return storage_id_text_input_manager
+    },
+    get is_storage_id_public_checkbox_manager() {
+      return is_storage_id_public_checkbox_manager
+    },
+    get src_text_input_manager() {
+      return src_text_input_manager
+    },
+    get mime_type_text_input_manager() {
+      return mime_type_text_input_manager
+    },
+    get title_text_input_manager() {
+      return title_text_input_manager
+    },
+    get album_text_input_manager() {
+      return album_text_input_manager
+    },
+    get artist_text_input_manager() {
+      return artist_text_input_manager
+    },
+    get image_storage_picker_manager() {
+      return image_storage_picker_manager
+    },
+    get image_storage_id_text_input_manager() {
+      return image_storage_id_text_input_manager
+    },
+    get image_is_storage_id_public_checkbox_manager() {
+      return image_is_storage_id_public_checkbox_manager
+    },
+    get image_src_text_input_manager() {
+      return image_src_text_input_manager
+    },
+    get image_src_quick_text_input_manager() {
+      return image_src_quick_text_input_manager
+    },
+    get image_mime_type_text_input_manager() {
+      return image_mime_type_text_input_manager
+    },
+    get image_width_text_input_manager() {
+      return image_width_text_input_manager
+    },
+    get image_height_text_input_manager() {
+      return image_height_text_input_manager
+    },
+    get image_aspect_ratio_text_input_manager() {
+      return image_aspect_ratio_text_input_manager
+    },
+    set_val,
+  }
+}

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

@@ -0,0 +1,58 @@
+<script>
+  import Button from "../../../../Button/index.svelte"
+  import Checkbox from "../../../../Checkbox/index.svelte"
+  import Slider from "../../../../Slider/index.svelte"
+  import TextInput from "../../../../TextInput/index.svelte"
+  import VariablePathInput from "../../../../VariablePathInput/index.svelte"
+  import DefinedTypeInput from "../../DefinedTypeInput/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<DefinedTypeInput manager={manager?.val_defined_type_input_manager} >
+  {#snippet content()}
+    <TextInput manager={manager?.val_text_input_manager} />
+  {/snippet}
+</DefinedTypeInput>
+<TextInput manager={manager?.header_text_input_manager} />
+<TextInput manager={manager?.placeholder_text_input_manager} />
+<Checkbox manager={manager?.is_multiselect_checkbox_manager} />
+<Checkbox manager={manager?.is_set_null_button_checkbox_manager} />
+<Checkbox manager={manager?.is_show_arrow_checkbox_manager} />
+<Checkbox manager={manager?.is_button_compressed_checkbox_manager} />
+<Checkbox manager={manager?.is_searchable_checkbox_manager} />
+<Slider manager={manager?.target_width_slider_manager} />
+<Slider manager={manager?.target_height_slider_manager} />
+<h3>Options</h3>
+<div class="table_container">
+  <table style="margin: 0;">
+    <thead>
+      <tr>
+        <th>Key</th>
+        <th>Name</th>
+        <th>Delete</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#if Array.isArray(manager?.options_prepped) && manager?.options_prepped.length > 0}
+        {#each manager?.options_prepped as option_prepped}
+          <tr>
+            <td>{option_prepped?.option?.key}</td>
+            <td>{option_prepped?.option?.name}</td>
+            <td><Button manager={option_prepped?.delete_button_manager} /></td>
+          </tr>
+        {/each}
+      {:else}
+        <tr>
+          <td colspan="3">No options found</td>
+        </tr>
+      {/if}
+    </tbody>
+  </table>
+</div>
+<div class="cardns" style="margin-top: 1rem; padding: 1rem;">
+  <h5>Add Option</h5>
+  <TextInput manager={manager?.key_to_add_text_input_manager} />
+  <TextInput manager={manager?.name_to_add_text_input_manager} />
+  <Button manager={manager?.add_option_button_manager} />
+</div>