sveltekit-ui 1.0.0

package/dist/Components/TableAdvanced/ColumnInput/index.svelte

@@ -0,0 +1,110 @@
+<script>
+  import Button from "../../Button/index.svelte"
+  import Popover from "../../Popover/index.svelte"
+  import Checkbox from "../../Checkbox/index.svelte"
+  import TextInput from "../../TextInput/index.svelte"
+  import Dropdown from "../../Dropdown/index.svelte"
+  import DataTypeInput from "../../DataTypeInput/index.svelte"
+  import VariablePathInput from "../../VariablePathInput/index.svelte"
+  import Color from "../../Color/index.svelte"
+  import ContentInput from "../../ContentInput/index.svelte"
+  import Content from "../../Content/index.svelte"
+  import Slider from "../../Slider/index.svelte"
+  import Spacer from "../../Spacer/index.svelte"
+  import SortByInput from "../SortByInput/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+{#if manager?.column_id_text_input_manager?.val != manager?.column_id && manager?.column_id && manager?.is_column_update}
+  <p class="label">Orginal ID</p>
+  <p>{manager?.column_id}</p>
+{/if}
+<TextInput manager={manager?.column_id_text_input_manager} />
+<p style="font-size: 1.2rem;">IDs should be in snake_case format.</p>
+{#if manager?.column_id_text_warning}
+  <p style="color: var(--warning-t); font-size: 1.2rem;">{manager?.column_id_text_warning}</p>
+{/if}
+<TextInput manager={manager?.column_description_text_input_manager} />
+{#if !manager?.column_input_options?.is_db_column?.is_hidden}
+  <Checkbox manager={manager?.column_is_db_column_checkbox_manager} />
+{/if}
+<div style="display: flex; align-items: center; gap: .2rem;">
+  <p class="label">Database Data Type</p>
+  <Button manager={manager?.column_db_data_type_edit_button_manager} />
+</div>
+{#if manager?.column_db_data_type_input_manager?.type_display_name}
+  <p style="font-size: 1.4rem; color: var(--g8-t);">
+    {manager?.column_db_data_type_input_manager?.type_display_name}
+  </p>
+{:else}
+  <p style="color: var(--warning-t);">None</p>
+{/if}
+<DataTypeInput manager={manager?.column_db_data_type_input_manager} />
+<p class="label">Postgres Type</p>
+{#if manager?.column_data_postgres_type}
+  <p style="font-size: 1.4rem; color: var(--g8-t);">
+    {manager?.column_data_postgres_type}
+  </p>
+{:else}
+  <p style="color: var(--warning-t);">None</p>
+{/if}
+{#if !manager?.column_input_options?.default_value?.is_hidden}
+  <p class="label">Default Value</p>
+  {#if manager?.column_db_data_type_input_manager?.val}
+    <Content manager={manager?.column_default_value_content_manager} />
+  {:else}
+    <p style="color: var(--warning-t);">Select Data Type First</p>
+  {/if}
+{/if}
+<Checkbox manager={manager?.column_is_use_in_short_display_checkbox_manager} />
+{#if !manager?.column_input_options?.is_autogenerated?.is_hidden}
+  <Checkbox manager={manager?.column_is_autogenerated_checkbox_manager} />
+{/if}
+{#if !manager?.column_input_options?.is_updatable?.is_hidden}
+  <Checkbox manager={manager?.column_is_updatable_checkbox_manager} />
+{/if}
+{#if !manager?.column_input_options?.is_primary_key?.is_hidden}
+  <Checkbox manager={manager?.column_is_primary_key_checkbox_manager} />
+  {#if manager?.column_primary_key_text_warning}
+    <p style="color: var(--warning2-t);">{manager?.column_primary_key_text_warning}</p>
+  {/if}
+{/if}
+<Checkbox manager={manager?.column_is_nullable_checkbox_manager} />
+<Checkbox manager={manager?.column_is_force_uniqueness_checkbox_manager} />
+<!-- <Checkbox manager={manager?.column_is_cascade_checkbox_manager} /> -->
+<Slider manager={manager?.column_width_slider_manager} />
+{#if manager?.columns_length > 1}
+  <Slider manager={manager?.column_display_order_slider_manager} />
+{/if}
+<div style="display: flex; gap: .5rem; margin-top: .5rem;">
+  <p class="label">Header Content</p>
+  <Button manager={manager?.guess_header_content_button_manager} />
+</div>
+<ContentInput manager={manager?.header_content_input_manager} />
+<div style="display: flex; gap: .5rem; margin-top: .5rem;">
+  <p class="label">Body Content</p>
+  <Button manager={manager?.guess_body_content_button_manager} />
+</div>
+<ContentInput manager={manager?.body_content_input_manager} />
+{#if !manager?.column_input_options?.is_shown?.is_hidden}
+  <Checkbox manager={manager?.column_is_shown_checkbox_manager} />
+{/if}
+{#if !manager?.column_input_options?.is_fixed?.is_hidden}
+  <Checkbox manager={manager?.column_is_fixed_checkbox_manager} />
+{/if}
+<Dropdown manager={manager?.column_alignment_dropdown_manager} />
+{#if manager?.is_column_update}
+  <Button manager={manager?.delete_column_are_you_sure_popover_toggle_button_manager} />
+  <Popover manager={manager?.delete_column_are_you_sure_popover_manager}>
+    {#snippet content()}
+      <p>This will delete this column.</p>
+    {/snippet}
+    {#snippet footer()}
+      <Button manager={manager?.delete_column_button_manager} />
+      <Button manager={manager?.delete_column_cancel_button_manager} />
+    {/snippet}
+  </Popover>
+{:else}
+  <Button manager={manager?.delete_column_button_manager} />
+{/if}

package/dist/Components/TableAdvanced/ColumnInput/index.svelte.js

@@ -0,0 +1,494 @@
+import { create_popover_manager } from "../../Popover/index.svelte.js"
+import { create_button_manager } from "../../Button/index.svelte.js"
+import { create_text_input_manager } from "../../TextInput/index.svelte.js"
+import { create_slider_manager } from "../../Slider/index.svelte.js"
+import { create_checkbox_manager } from "../../Checkbox/index.svelte.js"
+import { create_dropdown_manager } from "../../Dropdown/index.svelte.js"
+import { create_content_manager } from "../../Content/index.svelte.js"
+import { create_content_input_manager } from "../../ContentInput/index.svelte.js"
+import { create_data_type_input_manager } from "../../DataTypeInput/index.svelte.js"
+import {
+  set_closurable,
+  node_types,
+  deep_copy,
+  variables_data_type_remaining_to_astc,
+  set_content_variables,
+  astc_element,
+} from "../../../client/index.js"
+
+export function create_column_input_manager(config) {
+  let column_id_text_input_manager = $state(null)
+  let column_description_text_input_manager = $state(null)
+  let header_content_input_manager = $state(null)
+  let body_content_input_manager = $state(null)
+  let column_is_shown_checkbox_manager = $state(null)
+  let column_is_fixed_checkbox_manager = $state(null)
+  let column_alignment_dropdown_manager = $state(null)
+  let column_width_slider_manager = $state(null)
+  let column_display_order_slider_manager = $state(null)
+  let column_is_use_in_short_display_checkbox_manager = $state(null)
+  let column_is_autogenerated_checkbox_manager = $state(null)
+  let column_is_updatable_checkbox_manager = $state(null)
+  let column_is_db_column_checkbox_manager = $state(null)
+  let column_db_data_type_edit_button_manager = $state(null)
+  let column_db_data_type_input_manager = $state(null)
+  let column_default_value_content_manager = $state(null)
+  let column_is_primary_key_checkbox_manager = $state(null)
+  let column_is_nullable_checkbox_manager = $state(null)
+  let column_is_force_uniqueness_checkbox_manager = $state(null)
+  let column_foreign_table_id_input_manager = $state(null)
+  let column_is_cascade_checkbox_manager = $state(null)
+  let guess_header_content_button_manager = $state(null)
+  let guess_body_content_button_manager = $state(null)
+
+  let default_value = $state(null)
+
+  let delete_column_are_you_sure_popover_manager = $state(null)
+  let delete_column_are_you_sure_popover_toggle_button_manager = $state(null)
+  let delete_column_button_manager = $state(null)
+  let delete_column_cancel_button_manager = $state(null)
+
+  let rows_data_from_variable_path = $derived(set_closurable(config?.rows_data_from_variable_path, null))
+  let variables = $derived(set_closurable(config?.variables, null))
+  let variables_data_type = $derived(set_closurable(config?.variables_data_type, null))
+  let columns = $derived(set_closurable(config?.columns, null))
+  let columns_length = $derived(Object.keys(columns || {}).length)
+  let row_data_type = $derived(set_closurable(config?.row_data_type, null))
+  let column_id = $derived(set_closurable(config?.column_id, null))
+  let loops = $derived(set_closurable(config?.loops, null))
+  let is_column_update = $derived(set_closurable(config?.is_column_update, true))
+  let column_input_options = $derived(set_closurable(config?.column_input_options, null))
+
+  let column_id_text_warning = $derived(
+    column_id_text_input_manager?.val &&
+      Object.entries(columns || {}).some(
+        ([key, val]) => val?.id == column_id_text_input_manager?.val && column_id != key
+      )
+      ? `${column_id_text_input_manager?.val} is already a column id for a different column`
+      : null
+  )
+
+  let variables_data_type_with_this_col = $derived(get_variables_data_type_with_this_col())
+  function get_variables_data_type_with_this_col() {
+    if (
+      column_id_text_input_manager?.val &&
+      !column_id_text_warning &&
+      column_is_db_column_checkbox_manager?.val &&
+      column_db_data_type_input_manager?.val
+    ) {
+      const path_to_set = [...rows_data_from_variable_path]
+      let variables_data_type_combined_loc = $state(
+        deep_copy({
+          type: "object_literal",
+          properties: {
+            variables: variables_data_type,
+            loops: { type: "loop" },
+          },
+        })
+      )
+      let target = variables_data_type_combined_loc
+      for (let i = 0; i < path_to_set.length; i++) {
+        if (target?.type === "loop") {
+          target = target.items
+        } else if (target?.type === "object_literal") {
+          if (!target.properties) {
+            target.properties = {}
+          }
+          target = target.properties[path_to_set[i]]
+        }
+        if (target === undefined) {
+          break
+        }
+      }
+      if (target?.items?.type === "object_literal" && target?.items?.properties) {
+        target.items.properties[column_id_text_input_manager?.val] = column_db_data_type_input_manager?.val
+      }
+      return variables_data_type_combined_loc?.properties?.variables
+    }
+    return variables_data_type
+  }
+
+  let column_data_postgres_type = $derived(
+    column_db_data_type_input_manager?.val?.type == "array_uniform_literal" &&
+      column_db_data_type_input_manager?.val?.items?.type == "text_literal"
+      ? "text[]"
+      : node_types?.[column_db_data_type_input_manager?.val?.type]?.postgres_type
+  )
+
+  let column_primary_key_text_warning = $derived(
+    column_is_primary_key_checkbox_manager?.val &&
+      Object.entries(columns || {}).some(([key, val]) => val?.is_primary_key && column_id && column_id != key)
+      ? `A different column with id, ${val?.id}, is already a primary_key`
+      : null
+  )
+
+  let val = $derived({
+    id: column_id_text_input_manager?.val,
+    header_content: header_content_input_manager?.val,
+    body_content: body_content_input_manager?.val,
+    description: column_description_text_input_manager?.val,
+    is_shown: column_is_shown_checkbox_manager?.val,
+    is_fixed: column_is_fixed_checkbox_manager?.val,
+    alignment: column_alignment_dropdown_manager?.val,
+    min_width: column_width_slider_manager?.val?.[0],
+    max_width: column_width_slider_manager?.val?.[1],
+    display_order: column_display_order_slider_manager?.val,
+    is_use_in_short_display: column_is_use_in_short_display_checkbox_manager?.val,
+    is_autogenerated: column_is_autogenerated_checkbox_manager?.val,
+    is_updatable: column_is_updatable_checkbox_manager?.val,
+    is_db_column: column_is_db_column_checkbox_manager?.val,
+    db_data_type: column_db_data_type_input_manager?.val,
+    postgres_type: column_data_postgres_type,
+    default_value: default_value,
+    quick_sort_variable_path: null,
+    is_primary_key: column_is_primary_key_checkbox_manager?.val,
+    is_nullable: column_is_nullable_checkbox_manager?.val,
+    is_force_uniqueness: column_is_force_uniqueness_checkbox_manager?.val,
+    foreign_table_id: column_foreign_table_id_input_manager?.val,
+    is_cascade: column_is_cascade_checkbox_manager?.val,
+  })
+
+  function init(config) {
+    console.log("column_input_init", config)
+    column_id_text_input_manager = create_text_input_manager({
+      label: "Column ID",
+      val: config?.column_id ?? config?.val?.id ?? null,
+    })
+    header_content_input_manager = create_content_input_manager({
+      val: config?.val?.header_content ?? null,
+      storage: null,
+      storage_default_folder_path: null,
+      variables_data_type: () => variables_data_type_with_this_col,
+      variables: () => variables,
+      loops: () => loops,
+      on_event: (input) => {
+        console.log("set_content_variables_tbd400", input)
+        // set_content_variables(input)
+      },
+    })
+    body_content_input_manager = create_content_input_manager({
+      val: config?.val?.body_content ?? null,
+      storage: config?.storage,
+      storage_default_folder_path: null,
+      variables_data_type: () => variables_data_type_with_this_col,
+      variables: () => variables,
+      loops: () => [0, ...(Array.isArray(loops) ? loops : [])],
+      on_event: (input) => {
+        console.log("set_content_variables_tbd401")
+        // set_content_variables(input)
+      },
+    })
+    column_description_text_input_manager = create_text_input_manager({
+      type: "text_area",
+      rows: 2,
+      label: "Description",
+      placeholder: "This column is about...",
+    })
+    column_is_shown_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Shown",
+      val: config?.val?.is_shown ?? true,
+    })
+    column_is_fixed_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Fixed",
+      val: config?.val?.is_fixed ?? false,
+    })
+    column_alignment_dropdown_manager = create_dropdown_manager({
+      label: "Alignment",
+      is_button_compressed: true,
+      options: [
+        { key: "left", name: "Left" },
+        { key: "center", name: "Center" },
+        { key: "right", name: "Right" },
+      ],
+      val: config?.val?.alignment ?? "left",
+    })
+    column_width_slider_manager = create_slider_manager({
+      label: "Display Width",
+      min: 2,
+      max: 50,
+      step: 1,
+      val: [config?.val?.min_width ?? 20, config?.val?.max_width ?? 30],
+    })
+    column_display_order_slider_manager = create_slider_manager({
+      label: "Display Order",
+      val: config?.val?.display_order ?? 0,
+      min: 0,
+      max: config?.column_id ? columns_length - 1 : columns_length ?? 0,
+      step: 0.5,
+    })
+    column_is_use_in_short_display_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Use in Short Display",
+      val: config?.val?.is_use_in_short_display ?? false,
+    })
+    column_is_autogenerated_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Autogenerated",
+      val: config?.val?.is_autogenerated ?? false,
+    })
+    column_is_db_column_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Database Column",
+      val: config?.val?.is_db_column ?? column_input_options?.is_db_column?.default_value ?? false,
+    })
+    column_db_data_type_input_manager = create_data_type_input_manager({
+      data_sample: () => variables,
+      table_options: config?.table_options,
+      val: config?.val?.db_data_type ?? row_data_type?.properties?.[column_id_text_input_manager?.val],
+      on_finish: (input) => {
+        let default_content_input_astc = variables_data_type_remaining_to_astc(input, "input", ["variables"])
+        column_default_value_content_manager = create_content_manager({
+          val: default_content_input_astc,
+          table_options: config?.table_options,
+          on_search_table_row_ids: config?.on_search_table_row_ids,
+          variables: () => default_value,
+          on_event: (input) => {
+            const res = set_content_variables(
+              input,
+              { variables: default_value },
+              column_default_value_content_manager?.pass_event_down
+            )
+            default_value = res?.variables
+            return res
+          },
+        })
+      },
+    })
+    column_db_data_type_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_${column_db_data_type_input_manager?.popover_manager?.id}`,
+    })
+    // quick_sort_variable_path tbd
+    // foreign_table_id tbd
+    // is_cascade tbd
+    column_is_primary_key_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Primary Key",
+      val: config?.val?.is_primary_key ?? false,
+    })
+    column_is_updatable_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Updatable",
+      val: config?.val?.is_updatable ?? false,
+    })
+    column_is_nullable_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Nullable",
+      val: config?.val?.is_nullable ?? true,
+    })
+    column_is_force_uniqueness_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Force Uniqueness",
+      val: config?.val?.is_force_uniqueness ?? false,
+    })
+    column_is_cascade_checkbox_manager = create_checkbox_manager({
+      type: "toggle",
+      label: "Is Cascade Delete",
+      val: config?.val?.is_cascade ?? false,
+    })
+    guess_header_content_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Guess",
+      min_height: 0,
+      font_size: 1,
+      border_radius: 0.5,
+      on_click: () => {
+        console.log("guess_header_content_button_manager")
+        if (column_id_text_input_manager?.val) {
+          const header_text = column_id_text_input_manager.val
+            .split("_")
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(" ")
+          const header_astc_element = astc_element("base_text", [], { content: header_text })
+          header_content_input_manager.add_version(header_astc_element)
+        }
+      },
+    })
+    guess_body_content_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Guess",
+      min_height: 0,
+      font_size: 1,
+      border_radius: 0.5,
+      on_click: () => {
+        console.log("guess_body_content_button_manager")
+        if (column_id_text_input_manager.val && column_db_data_type_input_manager?.val) {
+          let guessed_column_display_content = variables_data_type_remaining_to_astc(
+            column_db_data_type_input_manager?.val,
+            "display",
+            ["variables", "rows", ["loops", 0], column_id_text_input_manager.val]
+          )
+          console.log("guessed_column_display_content", guessed_column_display_content)
+          body_content_input_manager.add_version(guessed_column_display_content)
+        } else {
+          body_content_input_manager.add_version(null)
+        }
+      },
+    })
+    let delete_column_is_loading = $state(false)
+    delete_column_are_you_sure_popover_manager = create_popover_manager({
+      type: "center",
+      min_width: 280,
+      target_width: 300,
+      min_height: 280,
+      target_height: 300,
+      header: "Are You Sure?",
+    })
+    delete_column_are_you_sure_popover_toggle_button_manager = create_button_manager({
+      type: "outlined",
+      support_icon: "trashcan",
+      color: "var(--error-t)",
+      is_compressed: true,
+      text: "Delete Column",
+      mt: 5,
+      is_loading: () => delete_column_is_loading,
+      popover_target: `popover_${delete_column_are_you_sure_popover_manager?.id}`,
+    })
+    delete_column_button_manager = create_button_manager({
+      color: "var(--error-t)",
+      text: "Delete Column",
+      is_compressed: () => !is_column_update,
+      mb: 1,
+      is_loading: () => delete_column_is_loading,
+      on_click: async () => {
+        if (typeof config?.on_delete == "function") {
+          delete_column_is_loading = true
+          const res = await config?.on_delete({ column_id })
+          if (res?.is_success) {
+            delete_column_are_you_sure_popover_manager.show_temp_message(res?.message ?? "Successfully Deleted Column")
+          } else {
+            delete_column_are_you_sure_popover_manager.show_temp_message(
+              res?.message ?? "Error Deleting Column",
+              "error"
+            )
+          }
+          delete_column_is_loading = false
+        }
+      },
+    })
+    delete_column_cancel_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Cancel",
+      on_click: () => delete_column_are_you_sure_popover_manager.close(),
+    })
+  }
+
+  init(config)
+
+  return {
+    get column_id() {
+      return column_id
+    },
+    get val() {
+      return val
+    },
+    get header_content_input_manager() {
+      return header_content_input_manager
+    },
+    get body_content_input_manager() {
+      return body_content_input_manager
+    },
+    get column_description_text_input_manager() {
+      return column_description_text_input_manager
+    },
+    get column_is_shown_checkbox_manager() {
+      return column_is_shown_checkbox_manager
+    },
+    get column_is_fixed_checkbox_manager() {
+      return column_is_fixed_checkbox_manager
+    },
+    get column_alignment_dropdown_manager() {
+      return column_alignment_dropdown_manager
+    },
+    get column_width_slider_manager() {
+      return column_width_slider_manager
+    },
+    get column_display_order_slider_manager() {
+      return column_display_order_slider_manager
+    },
+    get column_is_use_in_short_display_checkbox_manager() {
+      return column_is_use_in_short_display_checkbox_manager
+    },
+    get column_is_autogenerated_checkbox_manager() {
+      return column_is_autogenerated_checkbox_manager
+    },
+    get column_is_db_column_checkbox_manager() {
+      return column_is_db_column_checkbox_manager
+    },
+    get column_id_text_warning() {
+      return column_id_text_warning
+    },
+    get column_primary_key_text_warning() {
+      return column_primary_key_text_warning
+    },
+    get column_id_text_input_manager() {
+      return column_id_text_input_manager
+    },
+    get column_db_data_type_edit_button_manager() {
+      return column_db_data_type_edit_button_manager
+    },
+    get column_db_data_type_input_manager() {
+      return column_db_data_type_input_manager
+    },
+    get column_data_postgres_type() {
+      return column_data_postgres_type
+    },
+    get column_default_value_content_manager() {
+      return column_default_value_content_manager
+    },
+    get column_is_primary_key_checkbox_manager() {
+      return column_is_primary_key_checkbox_manager
+    },
+    get column_is_updatable_checkbox_manager() {
+      return column_is_updatable_checkbox_manager
+    },
+    get column_is_nullable_checkbox_manager() {
+      return column_is_nullable_checkbox_manager
+    },
+    get column_is_force_uniqueness_checkbox_manager() {
+      return column_is_force_uniqueness_checkbox_manager
+    },
+    get column_foreign_table_id_input_manager() {
+      return column_foreign_table_id_input_manager
+    },
+    get column_is_cascade_checkbox_manager() {
+      return column_is_cascade_checkbox_manager
+    },
+    get guess_header_content_button_manager() {
+      return guess_header_content_button_manager
+    },
+    get guess_body_content_button_manager() {
+      return guess_body_content_button_manager
+    },
+    get delete_column_are_you_sure_popover_manager() {
+      return delete_column_are_you_sure_popover_manager
+    },
+    get delete_column_are_you_sure_popover_toggle_button_manager() {
+      return delete_column_are_you_sure_popover_toggle_button_manager
+    },
+    get delete_column_button_manager() {
+      return delete_column_button_manager
+    },
+    get delete_column_cancel_button_manager() {
+      return delete_column_cancel_button_manager
+    },
+    get is_column_update() {
+      return is_column_update
+    },
+    get column_input_options() {
+      return column_input_options
+    },
+    get columns_length() {
+      return columns_length
+    },
+  }
+}

package/dist/Components/TableAdvanced/FilterInput/index.svelte

@@ -0,0 +1,54 @@
+<script>
+  import Popover from "../../Popover/index.svelte"
+  import Button from "../../Button/index.svelte"
+  import Checkbox from "../../Checkbox/index.svelte"
+  import Dropdown from "../../Dropdown/index.svelte"
+  import TextInput from "../../TextInput/index.svelte"
+  import VariablePathInput from "../../VariablePathInput/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+filter_tbd
+{#snippet filter_content()}
+  <div class="popover_content_container">
+    <div style="display: flex; flex-direction: column; flex: 1; gap: 1rem;">
+      <Dropdown manager={manager?.operator_dropdown_manager} />
+      {#if Array.isArray(manager?.conditions) && manager?.conditions.length > 0}
+        {#each manager?.conditions as condition, i}
+          qqq:{condition?.input_type}
+          {#if condition?.type == "operator"}
+            condition is operator (tbd)
+            <!-- if want to nest i can extend functionality later -->
+          {:else}
+            <div style="display: flex; gap: 1rem;">
+              <Button manager={condition?.x_button_manager} />
+              <Dropdown manager={condition?.predicate_dropdown_manager} />
+              {#if condition?.input_type == "time"}
+                <TimeInput manager={condition?.input_manager} />
+              {:else if ["number", "text"].includes(condition?.input_type)}
+                <TextInput manager={condition?.input_manager} />
+              {/if}
+            </div>
+          {/if}
+        {/each}
+      {:else}
+        <p>No Conditions</p>
+      {/if}
+      <Button manager={manager?.add_condition_button_manager} />
+    </div>
+  </div>
+{/snippet}
+
+{#if manager?.is_popover}
+<Popover manager={manager?.popover_manager}>
+  {#snippet content()}
+    {@render filter_content()}
+  {/snippet}
+  {#snippet footer()}
+    <Button manager={manager?.apply_sorting_button_manager} />
+  {/snippet}
+</Popover>
+{:else}
+  {@render filter_content()}
+{/if}