sveltekit-ui 1.1.17 → 1.1.18

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

@@ -0,0 +1,1436 @@
+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_time_input_manager } from "../../TimeInput/index.svelte.js"
+import { create_color_input_manager } from "../../ColorInput/index.svelte.js"
+import { create_cron_input_manager } from "../../CronInput/index.svelte.js"
+import { create_slider_manager } from "../../Slider/index.svelte.js"
+import { create_checkbox_manager } from "../../Checkbox/index.svelte.js"
+import { create_icon_input_manager } from "../../IconInput/index.svelte.js"
+import { create_location_input_manager } from "../../LocationInput/index.svelte.js"
+import { create_slider_config_manager } from "./CustomConfig/Slider/index.svelte.js"
+import { create_number_config_manager } from "./CustomConfig/Number/index.svelte.js"
+import { create_text_input_config_manager } from "./CustomConfig/TextInput/index.svelte.js"
+import { create_image_config_manager } from "./CustomConfig/Image/index.svelte.js"
+import { create_audio_config_manager } from "./CustomConfig/Audio/index.svelte.js"
+import { create_qr_config_manager } from "./CustomConfig/Qr/index.svelte.js"
+import { create_table_advanced_config_manager } from "./CustomConfig/TableAdvanced/index.svelte.js"
+import { create_dropdown_config_manager } from "./CustomConfig/Dropdown/index.svelte.js"
+import { create_time_input_config_manager } from "./CustomConfig/TimeInput/index.svelte.js"
+import { create_variable_path_input_manager } from "../../VariablePathInput/index.svelte.js"
+import { create_defined_type_input_manager } from "./DefinedTypeInput/index.svelte.js"
+import { node_types } from "../../../client/types/index.js"
+import { create_unique_id, is_deep_equal, set_closurable } from "../../../client/index.js"
+import { time_formats } from "../../TimeInput/index.js"
+
+export function create_attributes_input_manager(config) {
+  const id = create_unique_id(null, 20)
+
+  let popover_manager = $state(null)
+  let content_type = $state(null)
+  let attributes_manager = $state(null)
+  let finish_button_manager = $state(null)
+  let selector_id = $state(null)
+  let val_original = $state(null)
+  let defined_data_type = $state(null)
+
+  let val = $derived(attributes_manager?.val)
+  let has_changed = $derived(!is_deep_equal(val, val_original))
+
+  const align_dropdown_options = [
+    { key: null, name: "Stretch" },
+    { key: "center", name: "Center" },
+    { key: "start", name: "Start" },
+    { key: "end", name: "End" },
+    { key: "space-between", name: "Space Between" },
+    { key: "space-around", name: "Space Around" },
+    { key: "space-evenly", name: "Space Evenly" },
+  ]
+
+  function set_focused_selector_id(input) {
+    if (typeof config?.set_focused_selector_id == "function") {
+      config?.set_focused_selector_id(input)
+    }
+  }
+
+  function init(config) {
+    val_original = set_closurable(config?.val, null)
+    content_type = config?.content_type
+    defined_data_type = config?.defined_data_type
+    popover_manager = create_popover_manager({
+      header: config?.header ?? "Edit Attributes",
+      type: "panel",
+      target_width: 600,
+    })
+    if (content_type && node_types && node_types.hasOwnProperty(content_type)) {
+      if (content_type == "number") {
+        attributes_manager = create_number_config_manager({
+          val: config?.val,
+          get_defined_options: config?.get_defined_options,
+        })
+      } else if (content_type == "qr") {
+        attributes_manager = create_qr_config_manager({
+          val: config?.val,
+          get_defined_options: config?.get_defined_options,
+        })
+      } else if (content_type == "variable_path_input") {
+        attributes_manager = create_variable_path_input_manager({
+          val: config?.val,
+          get_defined_options: config?.get_defined_options,
+          on_finish: () => attributes_manager.close_popover(),
+        })
+      } else if (content_type == "table_advanced") {
+        attributes_manager = create_table_advanced_config_manager({
+          val: config?.val,
+          get_defined_options: config?.get_defined_options,
+        })
+      } else if (content_type == "dropdown") {
+        attributes_manager = create_dropdown_config_manager({
+          val: config?.val,
+          get_defined_options: config?.get_defined_options,
+        })
+      } else if (content_type == "slider") {
+        attributes_manager = create_slider_config_manager({
+          val: config?.val,
+          get_defined_options: config?.get_defined_options,
+        })
+      } else if (content_type == "time_input") {
+        attributes_manager = create_time_input_config_manager({
+          val: config?.val,
+          get_defined_options: config?.get_defined_options,
+        })
+      } else if (content_type == "time") {
+        let val_format_dropdown_manager = $state(null)
+        let val_time_input_manager = $state(
+          create_time_input_manager({
+            format: () => val_format_dropdown_manager?.val,
+            is_popover: true,
+            is_nullable: true,
+            val: config?.val?.val,
+          })
+        )
+        let val_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Val",
+            attribute_root_key: "val",
+            attribute_const_val: () => val_time_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        val_format_dropdown_manager = create_dropdown_manager({
+          label: "Format",
+          is_button_compressed: true,
+          val: config?.val?.format ?? "time_full",
+          options: Object.entries(time_formats).map(([key, val]) => ({ key: key, name: val?.name })),
+        })
+        let display_format_dropdown_manager = $state(
+          create_dropdown_manager({
+            label: "Display Format",
+            is_button_compressed: true,
+            val: config?.val?.display_format ?? "calendar_date",
+            options: [
+              { key: "raw", name: "Raw" },
+              { key: "time_ago", name: "Time Ago" },
+              { key: "calendar_date", name: "Calendar Date" },
+              { key: "default", name: "Default" },
+            ],
+          })
+        )
+        let text_color_color_input_manager = $state(
+          create_color_input_manager({
+            is_nullable: true,
+            val: config?.val?.text_color,
+          })
+        )
+        attributes_manager = {
+          val_time_input_manager: val_time_input_manager,
+          val_defined_type_input_manager: val_defined_type_input_manager,
+          val_format_dropdown_manager: val_format_dropdown_manager,
+          display_format_dropdown_manager: display_format_dropdown_manager,
+          text_color_color_input_manager: text_color_color_input_manager,
+          get val() {
+            return {
+              ...val_defined_type_input_manager?.val,
+              format: val_format_dropdown_manager?.val,
+              display_format: display_format_dropdown_manager?.val,
+              text_color: text_color_color_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "section") {
+        let background_color_color_input_manager = $state(
+          create_color_input_manager({
+            is_nullable: true,
+            val: config?.val?.background_color,
+          })
+        )
+        let background_color_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Background Color",
+            attribute_root_key: "background_color",
+            attribute_const_val: () => background_color_color_input_manager?.val,
+            attributes: config?.val?.background_color,
+          })
+        )
+        let border_color_color_input_manager = $state(
+          create_color_input_manager({
+            is_nullable: true,
+            val: config?.val?.border_color,
+          })
+        )
+        let border_color_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Border Color",
+            attribute_root_key: "border_color",
+            attribute_const_val: () => border_color_color_input_manager?.val,
+            attributes: config?.val?.border_color,
+          })
+        )
+        let border_radius_slider_manager = $state(
+          create_slider_manager({
+            min: 0,
+            max: 5,
+            step: 0.1,
+            val: config?.val?.border_radius ?? 0.5,
+          })
+        )
+        let border_radius_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Border Radius",
+            attribute_root_key: "border_radius",
+            attribute_const_val: () => border_radius_slider_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let padding_slider_manager = $state(
+          create_slider_manager({
+            min: 0,
+            max: 5,
+            step: 0.5,
+            val: config?.val?.padding ?? 0,
+          })
+        )
+        let padding_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Padding",
+            attribute_root_key: "padding",
+            attribute_const_val: () => padding_slider_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          background_color_color_input_manager: background_color_color_input_manager,
+          background_color_defined_type_input_manager: background_color_defined_type_input_manager,
+          border_color_color_input_manager: border_color_color_input_manager,
+          border_color_defined_type_input_manager: border_color_defined_type_input_manager,
+          border_radius_slider_manager: border_radius_slider_manager,
+          border_radius_defined_type_input_manager: border_radius_defined_type_input_manager,
+          padding_slider_manager: padding_slider_manager,
+          padding_defined_type_input_manager: padding_defined_type_input_manager,
+          get val() {
+            return {
+              ...background_color_defined_type_input_manager?.val,
+              ...border_color_defined_type_input_manager?.val,
+              ...border_radius_defined_type_input_manager?.val,
+              ...padding_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "figure") {
+        let caption_text_input_manager = $state(
+          create_text_input_manager({
+            is_nullable: true,
+            val: config?.val?.caption,
+            placeholder: "caption",
+          })
+        )
+        let caption_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Caption",
+            attribute_root_key: "caption",
+            attribute_const_val: () => caption_text_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          caption_text_input_manager: caption_text_input_manager,
+          caption_defined_type_input_manager: caption_defined_type_input_manager,
+          get val() {
+            return {
+              ...caption_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "div") {
+        let background_color_color_input_manager = $state(
+          create_color_input_manager({
+            is_nullable: true,
+            val: config?.val?.background_color,
+          })
+        )
+        let background_color_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Background Color",
+            attribute_root_key: "background_color",
+            attribute_const_val: () => background_color_color_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let border_color_color_input_manager = $state(
+          create_color_input_manager({
+            is_nullable: true,
+            val: config?.val?.border_color,
+          })
+        )
+        let border_color_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Border Color",
+            attribute_root_key: "border_color",
+            attribute_const_val: () => border_color_color_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let border_radius_slider_manager = $state(
+          create_slider_manager({
+            min: 0,
+            max: 5,
+            step: 0.1,
+            val: config?.val?.border_radius ?? 0.5,
+          })
+        )
+        let border_radius_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Border Radius",
+            attribute_root_key: "border_radius",
+            attribute_const_val: () => border_radius_slider_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let padding_slider_manager = $state(
+          create_slider_manager({
+            min: 0,
+            max: 5,
+            step: 0.5,
+            val: config?.val?.padding ?? 0,
+          })
+        )
+        let padding_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Padding",
+            attribute_root_key: "padding",
+            attribute_const_val: () => padding_slider_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let align_content_dropdown_manager = $state(
+          create_dropdown_manager({
+            options: align_dropdown_options,
+            is_button_compressed: true,
+            val: config?.val?.align_content ?? null,
+          })
+        )
+        let align_content_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Align Content",
+            attribute_root_key: "align_content",
+            attribute_const_val: () => align_content_dropdown_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let justify_content_dropdown_manager = $state(
+          create_dropdown_manager({
+            options: align_dropdown_options,
+            is_button_compressed: true,
+            val: config?.val?.justify_content ?? null,
+          })
+        )
+        let justify_content_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Justify Content",
+            attribute_root_key: "justify_content",
+            attribute_const_val: () => justify_content_dropdown_manager?.val,
+            attributes: config?.val,
+          })
+        )
+
+        let gap_slider_manager = $state(
+          create_slider_manager({
+            min: 0,
+            max: 5,
+            step: 0.1,
+            val: config?.val?.gap ?? 0,
+          })
+        )
+        let gap_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Gap",
+            attribute_root_key: "gap",
+            attribute_const_val: () => gap_slider_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          background_color_color_input_manager: background_color_color_input_manager,
+          background_color_defined_type_input_manager: background_color_defined_type_input_manager,
+          border_color_color_input_manager: border_color_color_input_manager,
+          border_color_defined_type_input_manager: border_color_defined_type_input_manager,
+          border_radius_slider_manager: border_radius_slider_manager,
+          border_radius_defined_type_input_manager: border_radius_defined_type_input_manager,
+          padding_slider_manager: padding_slider_manager,
+          padding_defined_type_input_manager: padding_defined_type_input_manager,
+          align_content_dropdown_manager: align_content_dropdown_manager,
+          align_content_defined_type_input_manager: align_content_defined_type_input_manager,
+          justify_content_dropdown_manager: justify_content_dropdown_manager,
+          justify_content_defined_type_input_manager: justify_content_defined_type_input_manager,
+          gap_slider_manager: gap_slider_manager,
+          gap_defined_type_input_manager: gap_defined_type_input_manager,
+          get val() {
+            return {
+              ...background_color_defined_type_input_manager?.val,
+              ...border_color_defined_type_input_manager?.val,
+              ...border_radius_defined_type_input_manager?.val,
+              ...padding_defined_type_input_manager?.val,
+              ...align_content_defined_type_input_manager?.val,
+              ...justify_content_defined_type_input_manager?.val,
+              ...gap_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "text_input") {
+        attributes_manager = create_text_input_config_manager({
+          get_defined_options: config?.get_defined_options,
+          val: config?.val,
+        })
+      } else if (content_type == "color_input") {
+        // attributes_manager = create_color_input_config_manager({
+        //   val: config?.val,
+        // })
+      } else if (content_type == "color") {
+        let val_color_input_manager = $state(
+          create_color_input_manager({
+            is_nullable: true,
+            val: config?.val,
+          })
+        )
+        let val_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Val",
+            attribute_root_key: "val",
+            attribute_const_val: () => val_color_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let is_show_details_checkbox_manager = $state(
+          create_checkbox_manager({
+            type: "toggle",
+            is_nullable: true,
+            val: config?.val?.is_show_details,
+          })
+        )
+        let is_show_details_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Is Show Details",
+            attribute_root_key: "is_show_details",
+            attribute_const_val: () => is_show_details_checkbox_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let size_slider_manager = $state(
+          create_slider_manager({
+            min: 2,
+            max: 30,
+            step: 0.1,
+            val: config?.val?.size ?? 2,
+          })
+        )
+        let size_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Size",
+            attribute_root_key: "size",
+            attribute_const_val: () => size_slider_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let border_radius_slider_manager = $state(
+          create_slider_manager({
+            min: 0,
+            max: 5,
+            step: 0.1,
+            val: config?.val?.border_radius ?? 0.5,
+          })
+        )
+        let border_radius_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Border Radius",
+            attribute_root_key: "border_radius",
+            attribute_const_val: () => border_radius_slider_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          val_color_input_manager: val_color_input_manager,
+          val_defined_type_input_manager: val_defined_type_input_manager,
+          is_show_details_checkbox_manager: is_show_details_checkbox_manager,
+          is_show_details_defined_type_input_manager: is_show_details_defined_type_input_manager,
+          size_slider_manager: size_slider_manager,
+          size_defined_type_input_manager: size_defined_type_input_manager,
+          border_radius_slider_manager: border_radius_slider_manager,
+          border_radius_defined_type_input_manager: border_radius_defined_type_input_manager,
+          get val() {
+            return {
+              ...val_defined_type_input_manager?.val,
+              ...is_show_details_defined_type_input_manager?.val,
+              ...size_defined_type_input_manager?.val,
+              ...border_radius_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "image") {
+        attributes_manager = create_image_config_manager({
+          storage: config?.storage,
+          storage_default_folder_path: config?.storage_default_folder_path,
+          storage_path: config?.storage_path,
+          val: config?.val,
+          get_defined_options: config?.get_defined_options,
+        })
+      } else if (content_type == "audio") {
+        attributes_manager = create_audio_config_manager({
+          storage: config?.storage,
+          storage_default_folder_path: config?.storage_default_folder_path,
+          storage_path: config?.storage_path,
+          val: config?.val,
+          get_defined_options: config?.get_defined_options,
+        })
+      } else if (
+        ["h1", "h2", "h3", "h4", "h5", "base_text", "em", "strong", "strong_em", "pre"].includes(content_type)
+      ) {
+        let content_text_input_manager = $state(
+          create_text_input_manager({
+            type: "text_area",
+            rows: 5,
+            is_nullable: true,
+            val: config?.val?.content,
+            placeholder: "content",
+          })
+        )
+        let content_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Content",
+            attribute_root_key: "content",
+            attribute_const_val: () => content_text_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let text_color_color_input_manager = $state(
+          create_color_input_manager({
+            is_nullable: true,
+            val: config?.val?.text_color,
+          })
+        )
+        let text_color_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Text Color",
+            attribute_root_key: "text_color",
+            attribute_const_val: () => text_color_color_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          content_defined_type_input_manager: content_defined_type_input_manager,
+          content_text_input_manager: content_text_input_manager,
+          text_color_defined_type_input_manager: text_color_defined_type_input_manager,
+          text_color_color_input_manager: text_color_color_input_manager,
+          get val() {
+            return {
+              ...content_defined_type_input_manager?.val,
+              ...text_color_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "code_inline") {
+        let content_text_input_manager = $state(
+          create_text_input_manager({
+            type: "text_area",
+            rows: 5,
+            is_nullable: true,
+            val: config?.val?.content,
+            placeholder: "content",
+          })
+        )
+        let content_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Content",
+            attribute_root_key: "content",
+            attribute_const_val: () => content_text_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let is_show_copy_button_checkbox_manager = $state(
+          create_checkbox_manager({
+            type: "toggle",
+            is_nullable: true,
+            val: config?.val?.is_show_copy_button,
+          })
+        )
+        let is_show_copy_button_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Is Show Copy Button",
+            attribute_root_key: "is_show_copy_button",
+            attribute_const_val: () => is_show_copy_button_checkbox_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let text_color_color_input_manager = $state(
+          create_color_input_manager({
+            is_nullable: true,
+            val: config?.val?.text_color,
+          })
+        )
+        let text_color_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Text Color",
+            attribute_root_key: "text_color",
+            attribute_const_val: () => text_color_color_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          content_defined_type_input_manager: content_defined_type_input_manager,
+          content_text_input_manager: content_text_input_manager,
+          is_show_copy_button_defined_type_input_manager: is_show_copy_button_defined_type_input_manager,
+          is_show_copy_button_checkbox_manager: is_show_copy_button_checkbox_manager,
+          text_color_defined_type_input_manager: text_color_defined_type_input_manager,
+          text_color_color_input_manager: text_color_color_input_manager,
+          get val() {
+            return {
+              ...content_defined_type_input_manager?.val,
+              ...is_show_copy_button_defined_type_input_manager?.val,
+              ...text_color_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "x_post") {
+        let post_id_text_input_manager = $state(
+          create_text_input_manager({
+            is_nullable: true,
+            val: config?.val?.post_id,
+            placeholder: "post id",
+          })
+        )
+        let post_id_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Post ID",
+            attribute_root_key: "post_id",
+            attribute_const_val: () => post_id_text_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let is_dark_theme_checkbox_manager = $state(
+          create_checkbox_manager({
+            type: "toggle",
+            val: config?.val?.is_dark_theme,
+          })
+        )
+        let is_dark_theme_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Is Dark Theme",
+            attribute_root_key: "is_dark_theme",
+            attribute_const_val: () => is_dark_theme_checkbox_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          post_id_text_input_manager: post_id_text_input_manager,
+          post_id_defined_type_input_manager: post_id_defined_type_input_manager,
+          is_dark_theme_checkbox_manager: is_dark_theme_checkbox_manager,
+          is_dark_theme_defined_type_input_manager: is_dark_theme_defined_type_input_manager,
+          get val() {
+            return {
+              ...post_id_defined_type_input_manager?.val,
+              ...is_dark_theme_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "youtube_video") {
+        let video_id_text_input_manager = $state(
+          create_text_input_manager({
+            is_nullable: true,
+            val: config?.val?.video_id,
+            placeholder: "video id",
+          })
+        )
+        let video_id_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Video ID",
+            attribute_root_key: "video_id",
+            attribute_const_val: () => video_id_text_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let is_dark_theme_checkbox_manager = $state(
+          create_checkbox_manager({
+            type: "toggle",
+            val: config?.val?.is_dark_theme,
+          })
+        )
+        let is_dark_theme_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Is Dark Theme",
+            attribute_root_key: "is_dark_theme",
+            attribute_const_val: () => is_dark_theme_checkbox_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          video_id_text_input_manager: video_id_text_input_manager,
+          video_id_defined_type_input_manager: video_id_defined_type_input_manager,
+          is_dark_theme_checkbox_manager: is_dark_theme_checkbox_manager,
+          is_dark_theme_defined_type_input_manager: is_dark_theme_defined_type_input_manager,
+          get val() {
+            return {
+              ...video_id_defined_type_input_manager?.val,
+              ...is_dark_theme_defined_type_input_manager?.val,
+            }
+          },
+        }
+        // } else if (["int_literal", "float_literal", "bigint_literal"].includes(content_type)) {
+        //   let content_text_input_manager = $state(
+        //     create_text_input_manager({
+        //       type: "number",
+        //       val: typeof val?.content == "undefined" ? att_val?.default : val?.content,
+        //       placeholder: "content",
+        //     })
+        //   )
+        //   attributes_manager = {
+        //     content_text_input_manager: content_text_input_manager,
+        //     val: () => val,
+        //   }
+      } else if (content_type == "show_conditions") {
+        let is_run_serverside_checkbox_manager = $state(
+          create_checkbox_manager({
+            type: "toggle",
+            is_nullable: true,
+            val: config?.val?.is_run_serverside,
+          })
+        )
+        let is_run_serverside_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Is Run Serverside",
+            attribute_root_key: "is_run_serverside",
+            attribute_const_val: () => is_run_serverside_checkbox_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          is_run_serverside_defined_type_input_manager: is_run_serverside_defined_type_input_manager,
+          is_run_serverside_checkbox_manager: is_run_serverside_checkbox_manager,
+          get val() {
+            return {
+              ...is_run_serverside_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "show_conditions_item") {
+        let is_show_checkbox_manager = $state(
+          create_checkbox_manager({
+            type: "toggle",
+            is_nullable: true,
+            val: config?.val?.is_show,
+          })
+        )
+        let is_show_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Is Show",
+            attribute_root_key: "is_show",
+            attribute_const_val: () => is_show_checkbox_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          is_show_defined_type_input_manager: is_show_defined_type_input_manager,
+          is_show_checkbox_manager: is_show_checkbox_manager,
+          get val() {
+            return {
+              ...is_show_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "checkbox") {
+        // name, on_val, off_val, is_read_only
+        let val_checkbox_manager = $state(
+          create_checkbox_manager({
+            type: "toggle",
+            is_nullable: true,
+            val: config?.val,
+          })
+        )
+        let val_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Val",
+            attribute_root_key: "val",
+            attribute_const_val: () => val_checkbox_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let type_dropdown_manager = $state(
+          create_dropdown_manager({
+            is_nullable: true,
+            val: config?.val?.type,
+            is_button_compressed: true,
+            options: [
+              { key: "checkbox", name: "Checkbox" },
+              { key: "toggle", name: "Toggle" },
+            ],
+          })
+        )
+        let type_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Type",
+            attribute_root_key: "type",
+            attribute_const_val: () => type_dropdown_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let size_slider_manager = $state(
+          create_slider_manager({
+            is_nullable: true,
+            val: config?.val?.size,
+            min: 0.5,
+            max: 10,
+            step: 0.1,
+          })
+        )
+        let size_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Size",
+            attribute_root_key: "size",
+            attribute_const_val: () => size_slider_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let color_input_manager = $state(
+          create_color_input_manager({
+            is_nullable: true,
+            val: config?.val?.color,
+          })
+        )
+        let color_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Color",
+            attribute_root_key: "color",
+            attribute_const_val: () => color_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          val_defined_type_input_manager: val_defined_type_input_manager,
+          val_checkbox_manager: val_checkbox_manager,
+          type_dropdown_manager: type_dropdown_manager,
+          type_defined_type_input_manager: type_defined_type_input_manager,
+          size_slider_manager: size_slider_manager,
+          size_defined_type_input_manager: size_defined_type_input_manager,
+          color_defined_type_input_manager: color_defined_type_input_manager,
+          color_input_manager: color_input_manager,
+          get val() {
+            return {
+              ...val_defined_type_input_manager?.val,
+              ...type_defined_type_input_manager?.val,
+              ...size_defined_type_input_manager?.val,
+              ...color_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "code") {
+        let content_text_input_manager = $state(
+          create_text_input_manager({
+            type: "text_area",
+            rows: 5,
+            is_nullable: true,
+            val: config?.val?.content,
+            placeholder: "content",
+          })
+        )
+        let content_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Content",
+            attribute_root_key: "content",
+            attribute_const_val: () => content_text_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let language_text_input_manager = $state(
+          create_text_input_manager({
+            is_nullable: true,
+            val: config?.val?.language,
+            placeholder: "e.g. JSON",
+          })
+        )
+        let language_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Language",
+            attribute_root_key: "language",
+            attribute_const_val: () => language_text_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          content_text_input_manager: content_text_input_manager,
+          content_defined_type_input_manager: content_defined_type_input_manager,
+          language_text_input_manager: language_text_input_manager,
+          language_defined_type_input_manager: language_defined_type_input_manager,
+          get val() {
+            return {
+              ...content_defined_type_input_manager?.val,
+              ...language_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "json") {
+        let val_text_input_manager = $state(
+          create_text_input_manager({
+            type: "text_area",
+            rows: 5,
+            is_nullable: true,
+            val: config?.val?.val,
+            placeholder: "val",
+          })
+        )
+        let val_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Val",
+            attribute_root_key: "val",
+            attribute_const_val: () => val_text_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let is_show_buttons_checkbox_manager = $state(
+          create_checkbox_manager({
+            type: "toggle",
+            label: "Is Show Buttons",
+            val: config?.val?.is_show_buttons,
+          })
+        )
+        let is_edit_mode_buttons_checkbox_manager = $state(
+          create_checkbox_manager({
+            type: "toggle",
+            label: "Is Edit Mode",
+            val: config?.val?.is_edit_mode,
+          })
+        )
+        let is_popover_checkbox_manager = $state(
+          create_checkbox_manager({
+            type: "toggle",
+            label: "Is Popover",
+            val: config?.val?.is_popover,
+          })
+        )
+        let is_inline_checkbox_manager = $state(
+          create_checkbox_manager({
+            type: "toggle",
+            label: "Is Inline",
+            val: config?.val?.is_inline,
+          })
+        )
+        attributes_manager = {
+          val_text_input_manager: val_text_input_manager,
+          val_defined_type_input_manager: val_defined_type_input_manager,
+          is_show_buttons_checkbox_manager: is_show_buttons_checkbox_manager,
+          is_edit_mode_buttons_checkbox_manager: is_edit_mode_buttons_checkbox_manager,
+          is_popover_checkbox_manager: is_popover_checkbox_manager,
+          is_inline_checkbox_manager: is_inline_checkbox_manager,
+          get val() {
+            return {
+              ...val_defined_type_input_manager?.val,
+              is_show_buttons: is_show_buttons_checkbox_manager?.val,
+              is_edit_mode: is_edit_mode_buttons_checkbox_manager?.val,
+              is_popover: is_popover_checkbox_manager?.val,
+              is_inline: is_inline_checkbox_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "location") {
+        let val_location_input_manager = $state(
+          create_location_input_manager({
+            val: config?.val?.val,
+            is_popover: false,
+          })
+        )
+        let val_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Val",
+            attribute_root_key: "val",
+            attribute_const_val: () => val_location_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let is_popover_checkbox_manager = $state(
+          create_checkbox_manager({
+            type: "toggle",
+            label: "Is Popover",
+            val: config?.val?.is_popover,
+          })
+        )
+        let is_inline_checkbox_manager = $state(
+          create_checkbox_manager({
+            type: "toggle",
+            label: "Is Inline",
+            val: config?.val?.is_inline,
+          })
+        )
+        attributes_manager = {
+          val_location_input_manager: val_location_input_manager,
+          val_defined_type_input_manager: val_defined_type_input_manager,
+          is_popover_checkbox_manager: is_popover_checkbox_manager,
+          is_inline_checkbox_manager: is_inline_checkbox_manager,
+          get val() {
+            return {
+              ...val_defined_type_input_manager?.val,
+              is_popover: is_popover_checkbox_manager?.val,
+              is_inline: is_inline_checkbox_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "link") {
+        let href_text_input_manager = $state(
+          create_text_input_manager({
+            is_nullable: true,
+            val: config?.val?.href,
+            placeholder: "href",
+          })
+        )
+        let href_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "href",
+            attribute_root_key: "href",
+            attribute_const_val: () => href_text_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let display_text_text_input_manager = $state(
+          create_text_input_manager({
+            is_nullable: true,
+            val: config?.val?.display_text,
+            placeholder: "Some Link Text",
+          })
+        )
+        let display_text_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Dispaly Text",
+            attribute_root_key: "display_text",
+            attribute_const_val: () => display_text_text_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let text_color_color_input_manager = $state(
+          create_color_input_manager({
+            is_nullable: true,
+            val: config?.val?.text_color,
+          })
+        )
+        let text_color_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Text Color",
+            attribute_root_key: "text_color",
+            attribute_const_val: () => text_color_color_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let is_show_preview_checkbox_manager = $state(
+          create_checkbox_manager({
+            type: "toggle",
+            is_nullable: true,
+            val: config?.val?.is_show_preview,
+          })
+        )
+        let is_show_preview_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Is Show Preview",
+            attribute_root_key: "is_show_preview",
+            attribute_const_val: () => display_text_text_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          href_text_input_manager: href_text_input_manager,
+          href_defined_type_input_manager: href_defined_type_input_manager,
+          display_text_text_input_manager: display_text_text_input_manager,
+          display_text_defined_type_input_manager: display_text_defined_type_input_manager,
+          text_color_color_input_manager: text_color_color_input_manager,
+          text_color_defined_type_input_manager: text_color_defined_type_input_manager,
+          is_show_preview_checkbox_manager: is_show_preview_checkbox_manager,
+          is_show_preview_defined_type_input_manager: is_show_preview_defined_type_input_manager,
+          get val() {
+            return {
+              ...href_defined_type_input_manager?.val,
+              ...display_text_defined_type_input_manager?.val,
+              ...text_color_defined_type_input_manager?.val,
+              ...is_show_preview_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "icon_input") {
+        let val_icon_input_manager = $state(null)
+        let is_icon_only_checkbox_manager = $state(
+          create_checkbox_manager({
+            type: "toggle",
+            is_nullable: true,
+            val: config?.val?.is_icon_only,
+            on_change: (input) => val_icon_input_manager.set_is_icon_only(input),
+          })
+        )
+        let is_icon_only_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Is Icon Only",
+            attribute_root_key: "is_icon_only",
+            attribute_const_val: () => is_icon_only_checkbox_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        val_icon_input_manager = create_icon_input_manager({
+          is_icon_only: is_icon_only_checkbox_manager?.val,
+          is_nullable: true,
+          val: config?.val?.val,
+        })
+        let val_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Val",
+            attribute_root_key: "val",
+            attribute_const_val: () => val_icon_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          is_icon_only_checkbox_manager: is_icon_only_checkbox_manager,
+          is_icon_only_defined_type_input_manager: is_icon_only_defined_type_input_manager,
+          val_icon_input_manager: val_icon_input_manager,
+          val_defined_type_input_manager: val_defined_type_input_manager,
+          get val() {
+            return {
+              ...is_icon_only_defined_type_input_manager?.val,
+              ...val_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "icon") {
+        let icon_id_icon_input_manager = $state(
+          create_icon_input_manager({
+            is_icon_only: true,
+            val: config?.val?.icon_id,
+          })
+        )
+        let icon_id_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Icon ID",
+            attribute_root_key: "icon_id",
+            attribute_const_val: () => icon_id_icon_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let icon_size_slider_manager = $state(
+          create_slider_manager({
+            is_nullable: true,
+            min: 1,
+            max: 30,
+            step: 1,
+            val: config?.val?.size,
+          })
+        )
+        let icon_size_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Size",
+            attribute_root_key: "size",
+            attribute_const_val: () => icon_size_slider_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let icon_sw_slider_manager = $state(
+          create_slider_manager({
+            is_nullable: true,
+            min: 1,
+            max: 100,
+            step: 1,
+            val: config?.val?.sw,
+          })
+        )
+        let icon_sw_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Stroke Width",
+            attribute_root_key: "sw",
+            attribute_const_val: () => icon_sw_slider_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let icon_deg_slider_manager = $state(
+          create_slider_manager({
+            is_nullable: true,
+            min: 0,
+            max: 360,
+            step: 1,
+            val: config?.val?.deg,
+          })
+        )
+        let icon_deg_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Degrees Turned",
+            attribute_root_key: "deg",
+            attribute_const_val: () => icon_deg_slider_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        let icon_color_color_input_manager = $state(
+          create_color_input_manager({
+            is_nullable: true,
+            val: config?.val?.color,
+          })
+        )
+        let icon_color_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Icon Color",
+            attribute_root_key: "color",
+            attribute_const_val: () => icon_color_color_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        // color_alt,fill
+        attributes_manager = {
+          icon_id_icon_input_manager: icon_id_icon_input_manager,
+          icon_id_defined_type_input_manager: icon_id_defined_type_input_manager,
+          icon_size_slider_manager: icon_size_slider_manager,
+          icon_size_defined_type_input_manager: icon_size_defined_type_input_manager,
+          icon_sw_slider_manager: icon_sw_slider_manager,
+          icon_sw_defined_type_input_manager: icon_sw_defined_type_input_manager,
+          icon_deg_slider_manager: icon_deg_slider_manager,
+          icon_deg_defined_type_input_manager: icon_deg_defined_type_input_manager,
+          icon_color_color_input_manager: icon_color_color_input_manager,
+          icon_color_defined_type_input_manager: icon_color_defined_type_input_manager,
+          get val() {
+            return {
+              ...icon_id_defined_type_input_manager?.val,
+              ...icon_size_defined_type_input_manager?.val,
+              ...icon_sw_defined_type_input_manager?.val,
+              ...icon_deg_defined_type_input_manager?.val,
+              ...icon_color_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "cron_input") {
+        let val_cron_input_manager = $state(
+          create_cron_input_manager({
+            is_nullable: true,
+            val: config?.val?.val,
+          })
+        )
+        let val_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Val",
+            attribute_root_key: "val",
+            attribute_const_val: () => val_cron_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          val_cron_input_manager: val_cron_input_manager,
+          val_defined_type_input_manager: val_defined_type_input_manager,
+          get val() {
+            return {
+              ...val_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "cron") {
+        let val_cron_input_manager = $state(
+          create_cron_input_manager({
+            is_nullable: true,
+            val: config?.val?.val,
+          })
+        )
+        let val_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Val",
+            attribute_root_key: "val",
+            attribute_const_val: () => val_cron_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          val_cron_input_manager: val_cron_input_manager,
+          val_defined_type_input_manager: val_defined_type_input_manager,
+          get val() {
+            return {
+              ...val_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "loop") {
+        let iter_identifier_text_input_manager = $state(
+          create_text_input_manager({
+            label: "Iter Identifier",
+            val: config?.val?.iter_identifier,
+            placeholder: "some_key",
+          })
+        )
+        let val_input_manager = $state(
+          create_variable_path_input_manager({
+            val: config?.val?.val_from_variable_path,
+            get_defined_options: config?.get_defined_options,
+            on_finish: () => val_input_manager.close_popover(),
+          })
+        )
+        let join_text_text_input_manager = $state(
+          create_text_input_manager({
+            is_nullable: true,
+            val: config?.val?.join_text,
+            placeholder: "Join Text",
+          })
+        )
+        let join_text_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            defined_data_type: {
+              ...defined_data_type,
+              properties: {
+                ...defined_data_type?.properties,
+                [iter_identifier_text_input_manager?.val]: { type: "int_literal" },
+              },
+            },
+            label: "Join Text",
+            attribute_root_key: "join_text",
+            attribute_const_val: () => join_text_text_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          val_input_manager: val_input_manager,
+          iter_identifier_text_input_manager: iter_identifier_text_input_manager,
+          join_text_text_input_manager: join_text_text_input_manager,
+          join_text_defined_type_input_manager: join_text_defined_type_input_manager,
+          get val() {
+            return {
+              iter_identifier: iter_identifier_text_input_manager?.val,
+              val_from_variable_path: val_input_manager?.val,
+              ...join_text_defined_type_input_manager?.val,
+            }
+          },
+        }
+      } else if (content_type == "slot") {
+        let val_text_input_manager = $state(
+          create_text_input_manager({
+            val: config?.val?.val,
+          })
+        )
+        let val_defined_type_input_manager = $state(
+          create_defined_type_input_manager({
+            get_defined_options: config?.get_defined_options,
+            label: "Val",
+            attribute_root_key: "val",
+            attribute_const_val: () => val_text_input_manager?.val,
+            attributes: config?.val,
+          })
+        )
+        attributes_manager = {
+          val_text_input_manager: val_text_input_manager,
+          val_defined_type_input_manager: val_defined_type_input_manager,
+          get val() {
+            return {
+              ...val_defined_type_input_manager?.val,
+            }
+          },
+        }
+      }
+    }
+    finish_button_manager = create_button_manager({
+      text: "Finish",
+      c: 1,
+      l: 2,
+      mt: 1,
+      // is_disabled: () => !has_changed, idk not updating on a change tbd
+      on_click: () => {
+        if (typeof config?.on_finish == "function") {
+          config?.on_finish(attributes_manager?.val)
+        }
+      },
+    })
+    selector_id = config?.selector_id ?? null
+  }
+
+  init(config)
+
+  return {
+    id,
+    get val() {
+      return val
+    },
+    get val_original() {
+      return val_original
+    },
+    get selector_id() {
+      return selector_id
+    },
+    get content_type() {
+      return content_type
+    },
+    get has_changed() {
+      return has_changed
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    get attributes_manager() {
+      return attributes_manager
+    },
+    get finish_button_manager() {
+      return finish_button_manager
+    },
+    init,
+    set_focused_selector_id,
+  }
+}