sveltekit-ui 1.0.0

package/src/lib/Components/ContentInput/AttributesInput/CustomConfig/TableAdvanced/index.svelte

@@ -0,0 +1,60 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import Checkbox from "$lib/Components/Checkbox/index.svelte"
+  import Dropdown from "$lib/Components/Dropdown/index.svelte"
+  import DataTypeInput from "$lib/Components/DataTypeInput/index.svelte"
+  import VariablePathInput from "$lib/Components/VariablePathInput/index.svelte"
+  import ContentInput from "$lib/Components/ContentInput/index.svelte"
+  import Slider from "$lib/Components/Slider/index.svelte"
+  import Spacer from "$lib/Components/Spacer/index.svelte"
+  import SortByInput from "$lib/Components/TableAdvanced/SortByInput/index.svelte"
+  import ColumnInput from "$lib/Components/TableAdvanced/ColumnInput/index.svelte"
+  // import FilterInput from "$lib/Components/TableAdvanced/FilterInput/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<div>
+  <div>
+    <Button manager={manager?.guess_all_button_manager} />
+    <div style="display: flex; align-items: center; gap: .2rem;">
+      <p class="label">Variables Data Type</p>
+      <Button manager={manager?.data_type_input_edit_button_manager} />
+    </div>
+    {#if manager?.variables_data_type}
+      <p style="font-size: 1.4rem; color: var(--g8-t);">{manager?.data_type_input_manager?.type_display_name}</p>
+    {:else}
+      <p style="color: var(--warning-t);">None</p>
+    {/if}
+    <DataTypeInput manager={manager?.data_type_input_manager} />
+  </div>
+  <p class="label">Rows Loop</p>
+  <VariablePathInput manager={manager?.rows_data_from_variable_path_input_manager} />
+  <Dropdown manager={manager?.nav_items_dropdown_manager} />
+  <Dropdown manager={manager?.rows_per_page_dropdown_manager} />
+  <Checkbox manager={manager?.is_data_editable_checkbox_manager} />
+  <Checkbox manager={manager?.is_paginate_checkbox_manager} />
+  <p class="label">Initial Sort By</p>
+  <SortByInput manager={manager?.initial_sort_by_input_manager} />
+  <p class="label">Initial Filter</p>
+  filter_tbd
+  <!-- <FilterInput manager={manager?.initial_filter_input_manager} /> -->
+  <Slider manager={manager?.table_header_max_height_slider_manager} />
+  <Slider manager={manager?.table_row_max_height_slider_manager} />
+  <h4 class="label" style="margin-top: 0.5rem;">Row Searchable Input</h4>
+  <ContentInput manager={manager?.row_searchable_content_input_manager} />
+  <h4 class="label" style="margin-top: 0.5rem;">Row Input</h4>
+  <Button manager={manager?.guess_row_input_button_manager} />
+  <ContentInput manager={manager?.row_input_content_input_manager} />
+  {#if Array.isArray(manager?.column_ids_display_order) && manager?.column_ids_display_order.length > 0}
+    <Spacer mt={1} />
+    {#each manager?.column_ids_display_order as column_id}
+      <ColumnInput manager={manager?.columns_prepped[column_id]?.column_input_manager} />
+      <Spacer mt={1} />
+    {/each}
+  {/if}
+  <div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem;">
+    <Button manager={manager?.add_column_button_manager} />
+    <Button manager={manager?.guess_columns_button_manager} />
+  </div>
+</div>

package/src/lib/Components/ContentInput/AttributesInput/CustomConfig/TableAdvanced/index.svelte.js

@@ -0,0 +1,546 @@
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_checkbox_manager } from "$lib/Components/Checkbox/index.svelte.js"
+import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
+import { create_slider_manager } from "$lib/Components/Slider/index.svelte.js"
+import { create_content_input_manager } from "$lib/Components/ContentInput/index.svelte.js"
+import { create_data_type_input_manager } from "$lib/Components/DataTypeInput/index.svelte.js"
+import { create_sort_by_input_manager } from "$lib/Components/TableAdvanced/SortByInput/index.svelte.js"
+import { create_filter_input_manager } from "$lib/Components/TableAdvanced/FilterInput/index.svelte.js"
+import { create_variable_path_input_manager } from "$lib/Components/VariablePathInput/index.svelte.js"
+import { create_column_input_manager } from "$lib/Components/TableAdvanced/ColumnInput/index.svelte.js"
+import {
+  deep_copy,
+  create_unique_id,
+  set_closurable,
+  variables_data_type_remaining_to_astc,
+  node_types,
+} from "$lib/client/index.js"
+
+export function create_table_advanced_config_manager(config) {
+  let variables = $derived(set_closurable(config?.variables, null))
+  let loops = $derived(set_closurable(config?.loops, null))
+
+  let variables_data_type = $state(null)
+  let data_type_input_manager = $state(null)
+  let data_type_input_edit_button_manager = $state(null)
+  let rows_data_from_variable_path_input_manager = $state(null)
+  let nav_items_dropdown_manager = $state(null)
+  let is_data_editable_checkbox_manager = $state(null)
+  let is_paginate_checkbox_manager = $state(null)
+  let rows_per_page_dropdown_manager = $state(null)
+  let guess_columns_button_manager = $state(null)
+  let add_column_button_manager = $state(null)
+  let initial_sort_by_input_manager = $state(null)
+  let initial_filter_input_manager = $state(null)
+  let guess_row_input_button_manager = $state(null)
+  let row_input_content_input_manager = $state(null)
+  let row_searchable_content_input_manager = $state(null)
+  let row_default_data = $state(null)
+  let columns_prepped = $state(null)
+  let guess_all_button_manager = $state(null)
+  let table_header_max_height_slider_manager = $state(null)
+  let table_row_max_height_slider_manager = $state(null)
+
+  let column_ids_display_order = $derived(
+    Object.entries(columns_prepped || {})
+      .sort((a, b) => a[1]?.display_order - b[1]?.display_order)
+      .map((entry) => entry[0])
+  )
+
+  let row_data_type = $derived(rows_data_from_variable_path_input_manager?.data_type_at_path?.items)
+
+  const column_base = {
+    id: null,
+    header_content: null,
+    body_content: null,
+    description: null,
+    is_shown: true,
+    is_fixed: false,
+    display_order: 0,
+    min_width: 2,
+    max_width: 50,
+    alignment: "left",
+    is_use_in_short_display: false,
+    is_autogenerated: false,
+    is_updatable: false,
+    is_db_column: false,
+    db_data_type: null,
+    postgres_type: null,
+    is_primary_key: false,
+    is_nullable: false,
+    is_force_uniqueness: true,
+    default_value: null,
+    foreign_table_id: null,
+    is_cascade: false,
+  }
+
+  let val = $derived({
+    columns: get_cleaned_columns(),
+    rows_data_from_variable_path: rows_data_from_variable_path_input_manager?.val,
+    is_data_editable: is_data_editable_checkbox_manager?.val,
+    is_paginate: is_paginate_checkbox_manager?.val,
+    nav_items: nav_items_dropdown_manager?.val,
+    sort_by: initial_sort_by_input_manager?.val,
+    filter: initial_filter_input_manager?.val,
+    row_searchable_content: row_searchable_content_input_manager?.val,
+    row_input_content: row_input_content_input_manager?.val,
+    table_header_max_height: table_header_max_height_slider_manager?.val,
+    table_row_max_height: table_row_max_height_slider_manager?.val,
+  })
+
+  function get_cleaned_columns() {
+    let cleaned_columns = {}
+    for (let column_id of Object.keys(columns_prepped || {})) {
+      let new_column_id = columns_prepped[column_id]?.column_input_manager?.val?.id
+      cleaned_columns[new_column_id] = {
+        id: new_column_id,
+        description: columns_prepped[column_id]?.column_input_manager?.val?.description,
+        header_content: columns_prepped[column_id]?.column_input_manager?.val?.header_content,
+        body_content: columns_prepped[column_id]?.column_input_manager?.val?.body_content,
+        is_shown: columns_prepped[column_id]?.column_input_manager?.val?.is_shown,
+        is_fixed: columns_prepped[column_id]?.column_input_manager?.val?.is_fixed,
+        alignment: columns_prepped[column_id]?.column_input_manager?.val?.alignment,
+        min_width: columns_prepped[column_id]?.column_input_manager?.val?.min_width,
+        max_width: columns_prepped[column_id]?.column_input_manager?.val?.max_width,
+        display_order: columns_prepped[column_id]?.column_input_manager?.val?.display_order,
+        is_use_in_short_display: columns_prepped[column_id]?.column_input_manager?.val?.is_use_in_short_display,
+        is_autogenerated: columns_prepped[column_id]?.column_input_manager?.val?.is_autogenerated,
+        is_updatable: columns_prepped[column_id]?.column_input_manager?.val?.is_updatable,
+        is_db_column: columns_prepped[column_id]?.column_input_manager?.val?.is_db_column,
+        db_data_type: columns_prepped[column_id]?.column_input_manager?.val?.db_data_type,
+        postgres_type: columns_prepped[column_id]?.column_input_manager?.val?.postgres_type,
+        default_value: columns_prepped[column_id]?.column_input_manager?.val?.default_value,
+        quick_sort_variable_path: columns_prepped[column_id]?.column_input_manager?.val?.quick_sort_variable_path,
+        is_primary_key: columns_prepped[column_id]?.column_input_manager?.val?.is_primary_key,
+        is_nullable: columns_prepped[column_id]?.column_input_manager?.val?.is_nullable,
+        is_force_uniqueness: columns_prepped[column_id]?.column_input_manager?.val?.is_force_uniqueness,
+        foreign_table_id: columns_prepped[column_id]?.column_input_manager?.val?.foreign_table_id,
+        is_cascade: columns_prepped[column_id]?.column_input_manager?.val?.is_cascade,
+      }
+    }
+    return cleaned_columns
+  }
+
+  function add_column(column_to_add_input = null) {
+    let column_id = create_unique_id(null, 8)
+    let column_to_add = column_to_add_input ?? deep_copy(column_base)
+    let columns_loc = get_cleaned_columns()
+    column_to_add.display_order = Object.keys(columns_loc || {}).length - 1
+    if (!columns_loc) {
+      columns_loc = {
+        [column_id]: column_to_add,
+      }
+    } else {
+      columns_loc[column_id] = column_to_add
+    }
+    set_columns_prepped(columns_loc)
+  }
+
+  function guess_row_input_content(row_data_type) {
+    let guessed_row_input_content = {
+      type_id: "div",
+      selector_id: `div_${create_unique_id(null, 8)}`,
+      children: [],
+      attributes: {},
+    }
+    let children = []
+    if (row_data_type?.type == "object_literal" && Object.keys(row_data_type?.properties || {}).length > 0) {
+      for (let [key, val] of Object.entries(row_data_type?.properties || {})) {
+        let guessed_column_input_content = variables_data_type_remaining_to_astc(
+          row_data_type?.properties?.[key],
+          "input",
+          [
+            ...(Array.isArray(rows_data_from_variable_path_input_manager?.val)
+              ? rows_data_from_variable_path_input_manager?.val
+              : []),
+            ["loops", 0],
+            ...(key ? [key] : []),
+          ]
+        )
+        if (guessed_column_input_content?.hasOwnProperty("attributes")) {
+          if (!guessed_column_input_content?.attributes) {
+            guessed_column_input_content.attributes = {}
+          }
+          guessed_column_input_content.attributes.label = key
+        }
+        children.push(guessed_column_input_content)
+      }
+    } else if (row_data_type?.type) {
+      const guessed_column_input_content = variables_data_type_remaining_to_astc(row_data_type, "input", [
+        ...(Array.isArray(rows_data_from_variable_path_input_manager?.val)
+          ? rows_data_from_variable_path_input_manager?.val
+          : []),
+        ["loops", 0],
+      ])
+      children.push(guessed_column_input_content)
+    }
+    guessed_row_input_content.children = children
+    return guessed_row_input_content
+  }
+
+  function guess_columns() {
+    let row_data_type = deep_copy({
+      type: "object_literal",
+      properties: {
+        variables: variables_data_type,
+        loops: { type: "loop" },
+      },
+    })
+    if (Array.isArray(rows_data_from_variable_path_input_manager?.val)) {
+      for (let path_item of rows_data_from_variable_path_input_manager?.val) {
+        if (row_data_type?.type == "loop") {
+          row_data_type = row_data_type.items
+        } else if (row_data_type?.type == "object_literal") {
+          row_data_type = row_data_type?.properties[path_item]
+        }
+      }
+    }
+    row_data_type = row_data_type?.items
+    let cleaned_columns = {}
+    if (row_data_type?.type == "object_literal") {
+      let display_order = 0
+      for (let [key, val] of Object.entries(row_data_type?.properties || {})) {
+        const guessed_column = guess_column(val, key, display_order)
+        cleaned_columns[guessed_column?.id] = guessed_column
+        display_order++
+      }
+    } else if (row_data_type?.type) {
+      const guessed_column = guess_column(row_data_type)
+      cleaned_columns[guessed_column?.id] = guessed_column
+    }
+    set_columns_prepped(cleaned_columns)
+  }
+
+  function guess_column(variables_data_type, key, display_order) {
+    let body_content = variables_data_type_remaining_to_astc(variables_data_type, "display", [
+      ...(Array.isArray(rows_data_from_variable_path_input_manager?.val)
+        ? rows_data_from_variable_path_input_manager?.val
+        : []),
+      ["loops", 0],
+      ...(key ? [key] : []),
+    ])
+    const derived_column_name = key
+      ? key
+          .replace(/_/g, " ")
+          .split(" ")
+          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+          .join(" ")
+      : node_types?.[variables_data_type?.type]?.name ?? "tbd"
+    return {
+      id: key ?? create_unique_id(null, 8),
+      header_content: {
+        type_id: "base_text",
+        selector_id: `base_text_${create_unique_id(null, 8)}`,
+        children: [],
+        attributes: {
+          content: derived_column_name,
+        },
+      },
+      body_content: body_content,
+      is_shown: true,
+      is_fixed: false,
+      alignment: "left",
+      min_width: 5,
+      max_width: 50,
+      display_order: display_order ?? 0,
+    }
+  }
+
+  function set_columns_prepped(columns) {
+    let columns_prepped_loc = {}
+    if (Object.keys(columns || {}).length) {
+      for (let column_id of Object.keys(columns || {})) {
+        console.log("variables_data_type88888", variables_data_type)
+        let column_input_manager = $state(
+          create_column_input_manager({
+            is_column_update: false,
+            column_id: column_id,
+            val: {
+              description: columns?.[column_id]?.description ?? null,
+              header_content: columns?.[column_id]?.header_content ?? null,
+              body_content: columns?.[column_id]?.body_content ?? null,
+              is_shown: columns?.[column_id]?.is_shown ?? true,
+              is_fixed: columns?.[column_id]?.is_fixed ?? false,
+              is_autogenerated: columns?.[column_id]?.is_autogenerated ?? false,
+              alignment: columns?.[column_id]?.alignment ?? "left",
+              min_width: columns?.[column_id]?.min_width ?? 3,
+              max_width: columns?.[column_id]?.max_width ?? 20,
+              display_order: columns?.[column_id]?.display_order ?? 0,
+              is_db_column: columns?.[column_id]?.is_db_column ?? false,
+              db_data_type: columns?.[column_id]?.db_data_type ?? null,
+              postgres_type: columns?.[column_id]?.postgres_type ?? null,
+              default_value: columns?.[column_id]?.default_value ?? null,
+              quick_sort_variable_path: columns?.[column_id]?.quick_sort_variable_path ?? null,
+              is_primary_key: columns?.[column_id]?.is_primary_key ?? false,
+              is_nullable: columns?.[column_id]?.is_nullable ?? true,
+              is_force_uniqueness: columns?.[column_id]?.is_force_uniqueness ?? false,
+              foreign_table_id: columns?.[column_id]?.foreign_table_id ?? null,
+              is_cascade: columns?.[column_id]?.is_cascade ?? false,
+            },
+            variables_data_type: () => variables_data_type,
+            variables: () => variables,
+            loops: () => loops,
+            columns: () => columns,
+            row_data_type: () => row_data_type,
+            on_delete: () => {
+              delete columns_prepped[column_id]
+              const columns_len = Object.keys(columns_prepped || {}).length ?? 0
+              if (columns_len > 0) {
+                for (let key of Object.keys(columns_prepped)) {
+                  if (columns_prepped[key]?.column_display_order_slider_manager?.val >= columns_len) {
+                    columns_prepped[key].column_input_manager.column_display_order_slider_manager.set_val(
+                      columns_len - 1
+                    )
+                  }
+                  if (column_id != key) {
+                    columns_prepped[key].column_input_manager.column_display_order_slider_manager.set_max(
+                      columns_len - 1
+                    )
+                  }
+                }
+              }
+            },
+          })
+        )
+        columns_prepped_loc[column_id] = {
+          column_input_manager: column_input_manager,
+        }
+      }
+    }
+    columns_prepped = columns_prepped_loc
+  }
+
+  function guess_rows_data_from_variable_path() {
+    let rows_data_from_variable_path_val = null
+    if (variables_data_type?.type == "loop") {
+      rows_data_from_variable_path_val = ["variables"]
+    } else if (variables_data_type?.type == "object_literal") {
+      for (let [key, val] of Object.entries(variables_data_type?.properties || {})) {
+        if (val?.type == "loop") {
+          rows_data_from_variable_path_val = ["variables", key]
+        } else if (val?.type == "object_literal") {
+          for (let [sub_key, sub_val] of Object.entries(variables_data_type?.properties?.[key]?.properties || {})) {
+            if (sub_val?.type == "loop") {
+              rows_data_from_variable_path_val = ["variables", key, sub_key]
+            }
+          }
+        }
+      }
+    }
+    rows_data_from_variable_path_input_manager.set_val(rows_data_from_variable_path_val)
+  }
+
+  function guess_all() {
+    if (!variables_data_type) {
+      data_type_input_manager.guess_from_variables()
+      variables_data_type = data_type_input_manager?.val
+    }
+    guess_rows_data_from_variable_path()
+    guess_columns()
+    const guessed_row_input_content = guess_row_input_content(row_data_type)
+    row_input_content_input_manager.add_version(guessed_row_input_content)
+  }
+
+  function init(config) {
+    variables_data_type = set_closurable(config?.variables_data_type, null)
+    guess_all_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Guess All",
+      is_compressed: true,
+      on_click: () => guess_all(),
+    })
+    rows_data_from_variable_path_input_manager = create_variable_path_input_manager({
+      is_popover: false,
+      variables_data_type: () => variables_data_type,
+      val: config?.val?.rows_data_from_variable_path ?? null,
+    })
+    rows_per_page_dropdown_manager = create_dropdown_manager({
+      label: "Rows Per Page",
+      is_button_compressed: true,
+      val: 100,
+      options: [10, 25, 50, 100, 250, 500, 1000, 2500, 5000],
+    })
+    is_data_editable_checkbox_manager = create_checkbox_manager({
+      label: "Is Data Editable",
+      type: "toggle",
+      val: config?.val?.is_data_editable,
+    })
+    is_paginate_checkbox_manager = create_checkbox_manager({
+      label: "Is Paginate",
+      type: "toggle",
+      val: config?.val?.is_paginate ?? true,
+    })
+    nav_items_dropdown_manager = create_dropdown_manager({
+      label: "Navigation Items",
+      is_button_compressed: true,
+      is_multiselect: true,
+      is_set_null_button: true,
+      options: [
+        { key: "settings", name: "Settings" },
+        { key: "search", name: "Search" },
+        { key: "insert", name: "Insert" },
+        { key: "file", name: "File" },
+        { key: "bulk_select", name: "Bulk Select" },
+        { key: "sort_by", name: "Sort By" },
+        { key: "pagination", name: "Pagination" },
+        { key: "rows_per_page", name: "Rows Per Page" },
+        { key: "load_more", name: "Load More" },
+      ],
+      val: config?.val?.nav_items ?? null,
+    })
+    guess_columns_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Guess All Columns",
+      is_compressed: true,
+      on_click: () => guess_columns(),
+    })
+    add_column_button_manager = create_button_manager({
+      is_compressed: true,
+      text: "Add Column",
+      on_click: () => add_column(),
+    })
+    initial_sort_by_input_manager = create_sort_by_input_manager({
+      val: config?.val?.sort_by,
+      row_data_type: rows_data_from_variable_path_input_manager?.data_type_at_path?.items,
+    })
+    initial_filter_input_manager = create_filter_input_manager({
+      val: config?.val?.filter,
+      row_data_type: rows_data_from_variable_path_input_manager?.data_type_at_path?.items,
+    })
+    row_input_content_input_manager = create_content_input_manager({
+      val: config?.val?.row_input_content ?? null,
+      storage: null,
+      storage_default_folder_path: null,
+      variables_data_type: () => variables_data_type,
+      variables: () => variables,
+      loops: () => [0, ...(Array.isArray(loops) ? loops : [])],
+    })
+    guess_row_input_button_manager = create_button_manager({
+      text: "Guess Row Input Content",
+      type: "outlined",
+      is_compressed: true,
+      on_click: () => {
+        const guessed_row_input_content = guess_row_input_content(row_data_type)
+        row_input_content_input_manager.add_version(guessed_row_input_content)
+      },
+    })
+    row_searchable_content_input_manager = create_content_input_manager({
+      val: config?.val?.row_searchable_content_input ?? null,
+      storage: null,
+      storage_default_folder_path: null,
+      variables_data_type: () => variables_data_type,
+      variables: () => variables,
+      loops: () => [0, ...(Array.isArray(loops) ? loops : [])],
+    })
+    data_type_input_manager = create_data_type_input_manager({
+      data_sample: () => variables,
+      val: variables_data_type,
+      on_finish: (input) => {
+        variables_data_type = input
+        if (!rows_data_from_variable_path_input_manager?.val) {
+          guess_rows_data_from_variable_path()
+        }
+      },
+    })
+    data_type_input_edit_button_manager = create_button_manager({
+      type: "plain",
+      is_uniform: true,
+      support_icon: "edit",
+      icon_sw: 40,
+      icon_size: 1.6,
+      font_size: 1.2,
+      min_height: 2,
+      border_radius: 0.5,
+      popover_target: () => `popover_${data_type_input_manager?.popover_manager?.id}`,
+    })
+    table_header_max_height_slider_manager = create_slider_manager({
+      label: "Table Header Max Height",
+      val: config?.val?.table_header_max_height ?? null,
+      is_nullable: true,
+      min: 2,
+      max: 20,
+      step: 1,
+    })
+    table_row_max_height_slider_manager = create_slider_manager({
+      label: "Table Row Max Height",
+      val: config?.val?.table_row_max_height ?? null,
+      is_nullable: true,
+      min: 2,
+      max: 20,
+      step: 1,
+    })
+    set_columns_prepped(config?.val?.columns)
+  }
+
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+    get guess_all_button_manager() {
+      return guess_all_button_manager
+    },
+    get rows_data_from_variable_path_input_manager() {
+      return rows_data_from_variable_path_input_manager
+    },
+    get rows_per_page_dropdown_manager() {
+      return rows_per_page_dropdown_manager
+    },
+    get is_data_editable_checkbox_manager() {
+      return is_data_editable_checkbox_manager
+    },
+    get nav_items_dropdown_manager() {
+      return nav_items_dropdown_manager
+    },
+    get is_paginate_checkbox_manager() {
+      return is_paginate_checkbox_manager
+    },
+    get column_ids_display_order() {
+      return column_ids_display_order
+    },
+    get columns_prepped() {
+      return columns_prepped
+    },
+    get guess_columns_button_manager() {
+      return guess_columns_button_manager
+    },
+    get add_column_button_manager() {
+      return add_column_button_manager
+    },
+    get row_input_content_input_manager() {
+      return row_input_content_input_manager
+    },
+    get guess_row_input_button_manager() {
+      return guess_row_input_button_manager
+    },
+    get row_searchable_content_input_manager() {
+      return row_searchable_content_input_manager
+    },
+    get variables_data_type() {
+      return variables_data_type
+    },
+    get initial_sort_by_input_manager() {
+      return initial_sort_by_input_manager
+    },
+    get initial_filter_input_manager() {
+      return initial_filter_input_manager
+    },
+    get data_type_input_manager() {
+      return data_type_input_manager
+    },
+    get data_type_input_edit_button_manager() {
+      return data_type_input_edit_button_manager
+    },
+    get table_header_max_height_slider_manager() {
+      return table_header_max_height_slider_manager
+    },
+    get table_row_max_height_slider_manager() {
+      return table_row_max_height_slider_manager
+    },
+    init,
+    guess_all,
+    guess_columns,
+    guess_row_input_content,
+  }
+}

package/src/lib/Components/ContentInput/AttributesInput/CustomConfig/Tag/index.svelte

@@ -0,0 +1,47 @@
+<script>
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import Button from "$lib/Components/Button/index.svelte"
+  import Icon from "$lib/Components/Icon/index.svelte"
+  import TextInput from "$lib/Components/TextInput/index.svelte"
+  import ColorInput from "$lib/Components/ColorInput/index.svelte"
+  import IconInput from "$lib/Components/IconInput/index.svelte"
+  import Tag from "$lib/Components/Tag/index.svelte"
+
+  let { manager } = $props()
+
+</script>
+
+<div>
+  <Button manager={manager?.tag_option_to_add_popover_toggle_button_manager} />
+  <Popover manager={manager?.tag_option_to_add_popover_manager} >
+    {#snippet content()}
+    <div class="popover_content_container">
+      <p class="label">Tag Preview</p>
+      <!-- <Tag manager={manager?.tag_option_to_add_manager} /> -->
+      <p class="label">Color</p>
+      <ColorInput manager={manager?.tag_option_to_add_color_input_manager} />
+      <TextInput manager={manager?.tag_option_to_add_text_text_input_manager} />
+      <p class="label">Icon</p>
+      <IconInput manager={manager?.tag_option_to_add_icon_input_manager} />
+      <p class="label">Conditions</p>
+      conditions_tbd
+    </div>
+    {/snippet}
+    {#snippet footer()}
+      <Button manager={manager?.tag_option_to_add_finish_button_manager} />
+    {/snippet}
+  </Popover>
+  {#if Array.isArray(manager?.derived_tag_options) && manager?.derived_tag_options.length > 0}
+    <div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem;">
+      {#each manager?.derived_tag_options as tag_item, i}
+        <div style="display: flex; gap: 1rem">
+          <Button manager={tag_item?.remove_button_manager} />
+          <Button manager={tag_item?.edit_button_manager} />
+          <Tag manager={tag_item?.tag_manager} />
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <p>No Tag Options</p>
+  {/if}
+</div>