@urbicon-ui/table 6.1.4

package/dist/features/SmartFilterBar/FilterMenu.svelte

@@ -0,0 +1,367 @@
+<script lang="ts">
+  import { useTableI18n } from '../..';
+  import { getTableContext } from '../../stores/TableStore.svelte';
+  import type { FilterOperator } from '../../types/tableTypes';
+  import { resolveColumnId, resolveColumnLabel, resolveValueById } from '../../utils';
+  import { filterMenuVariants } from '../../variants';
+  import {
+    Badge,
+    Button,
+    Select,
+    Input,
+    Popover,
+    Tooltip,
+    useBlocksI18n,
+    resolveIcon,
+    CheckIcon as CheckIconDefault,
+    FunnelIcon as FunnelIconDefault,
+    CloseIcon as CloseIconDefault
+  } from '@urbicon-ui/blocks';
+
+  const tt = useTableI18n();
+  const bt = useBlocksI18n();
+
+  const CheckIcon = resolveIcon('check', CheckIconDefault);
+  const FunnelIcon = resolveIcon('funnel', FunnelIconDefault);
+  const CloseIcon = resolveIcon('close', CloseIconDefault);
+
+  // Get table context
+  const tableContext = getTableContext();
+  const {
+    state: tableState,
+    addFilter,
+    removeFiltersByColumn,
+    clearAllFilters,
+    hasFilterForColumn
+  } = tableContext;
+
+  // Internal state
+  let isOpen = $state(false);
+  let triggerButtonRef = $state<HTMLButtonElement | undefined>();
+
+  // Reactive data
+  const OPERATORS_BY_TYPE = {
+    number: [
+      { value: 'equals' as const, label: () => tt('filter.operators.equals') },
+      { value: 'greaterThan' as const, label: () => tt('filter.operators.greaterThan') },
+      { value: 'lessThan' as const, label: () => tt('filter.operators.lessThan') }
+    ],
+    date: [
+      { value: 'equals' as const, label: () => tt('filter.operators.onDate') },
+      { value: 'greaterThan' as const, label: () => tt('filter.operators.after') },
+      { value: 'lessThan' as const, label: () => tt('filter.operators.before') }
+    ],
+    text: [
+      { value: 'contains' as const, label: () => tt('filter.operators.contains') },
+      { value: 'equals' as const, label: () => tt('filter.operators.equals') },
+      { value: 'startsWith' as const, label: () => tt('filter.operators.startsWith') },
+      { value: 'endsWith' as const, label: () => tt('filter.operators.endsWith') }
+    ]
+  } as const;
+
+  const getOperatorsForType = (dataType: string) => {
+    const operators =
+      OPERATORS_BY_TYPE[dataType as keyof typeof OPERATORS_BY_TYPE] || OPERATORS_BY_TYPE.text;
+    return operators.map((op) => ({ value: op.value, label: op.label() }));
+  };
+
+  const activeFilters = $derived(tableState.activeFilters);
+  const filterOptions = $derived.by(() => {
+    return tableState.columns
+      .filter((col) => col.accessor !== undefined && col.searchable !== false)
+      .map((col) => {
+        const dataType = 'dataType' in col ? col.dataType || 'text' : 'text';
+        return {
+          key: resolveColumnId(col),
+          label: resolveColumnLabel(col),
+          dataType,
+          operators: getOperatorsForType(dataType)
+        };
+      });
+  });
+
+  let filterStates = $state<
+    Record<
+      string,
+      {
+        selectedOperator: FilterOperator;
+        inputValue: string;
+        quickValueSearch: string;
+        showQuickValues: boolean;
+      }
+    >
+  >({});
+
+  $effect.pre(() => {
+    filterOptions.forEach((option) => {
+      if (!filterStates[option.key]) {
+        filterStates[option.key] = {
+          selectedOperator: 'contains',
+          inputValue: '',
+          quickValueSearch: '',
+          showQuickValues: false
+        };
+      }
+    });
+  });
+
+  function getUniqueValues(columnKey: string): string[] {
+    // Local dedup accumulator — not reactive state.
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const values = new Set<string>();
+    for (const item of tableState.items) {
+      const value = resolveValueById(tableState.columns, item, columnKey);
+      if (value !== undefined && value !== null && value !== '') {
+        values.add(String(value));
+      }
+    }
+    return Array.from(values).sort();
+  }
+
+  // Simple function to get active filters for a column
+  function getActiveFiltersForColumn(columnKey: string) {
+    return activeFilters.filter((filter) => filter.column === columnKey);
+  }
+
+  // Event handlers
+  function handleApplyFilter(optionKey: string, value?: string, shouldClose = false) {
+    const state = filterStates[optionKey];
+    if (!state) return;
+
+    const filterValue = value || state.inputValue;
+
+    // Add new filter if value is not empty
+    if (filterValue.trim()) {
+      addFilter({
+        column: optionKey,
+        operator: state.selectedOperator,
+        value: filterValue.trim()
+      });
+
+      // Clear input after applying
+      state.inputValue = '';
+    }
+
+    if (shouldClose) {
+      isOpen = false;
+    }
+  }
+
+  function handleApplyAllFilters() {
+    // Apply all non-empty manual filter inputs
+    filterOptions.forEach((option) => {
+      const state = filterStates[option.key];
+      if (state?.inputValue.trim()) {
+        handleApplyFilter(option.key);
+      }
+    });
+    isOpen = false;
+  }
+
+  function handleCancel() {
+    isOpen = false;
+  }
+
+  function toggleQuickFilter(optionKey: string, value: string) {
+    const isActive = hasFilterForColumn(optionKey, 'contains', value);
+    if (isActive) {
+      removeFiltersByColumn(optionKey, 'contains', value);
+    } else {
+      handleApplyFilter(optionKey, value);
+    }
+  }
+
+  const handleRemoveSpecificFilter = (column: string, operator: FilterOperator, value: string) => {
+    removeFiltersByColumn(column, operator, value);
+  };
+
+  const menuStyles = $derived(
+    filterMenuVariants({
+      size: 'md'
+    })
+  );
+</script>
+
+{#snippet triggerContent()}
+  <Tooltip label={tt('filter.button.add')}>
+    <Button
+      variant="ghost"
+      intent="neutral"
+      size="sm"
+      active={activeFilters.length > 0}
+      aria-expanded={isOpen}
+      aria-haspopup="true"
+    >
+      <FunnelIcon class="h-4 w-4" />
+      {#if activeFilters.length > 0}
+        <Badge variant="filled" size="xs" counter class="bg-filter text-text-on-primary ml-1">
+          {activeFilters.length}
+        </Badge>
+      {/if}
+    </Button>
+  </Tooltip>
+{/snippet}
+
+<Popover
+  bind:open={isOpen}
+  bind:triggerElement={triggerButtonRef}
+  placement="bottom-start"
+  offsetDistance={8}
+  onClickOutside={() => (isOpen = false)}
+  trigger={triggerContent}
+  role="dialog"
+  class={menuStyles.base()}
+  style="max-height: calc(100vh - 100px); overflow-y: auto;"
+>
+  <!-- Header with tailwind-variants - ALLE Styles bleiben! -->
+  <div class={menuStyles.header()}>
+    <h3 class={menuStyles.title()}>
+      {tt('filter.menu.addFilter')}
+    </h3>
+    <div class="flex items-center gap-2">
+      {#if activeFilters.length > 0}
+        <Button
+          variant="ghost"
+          size="xs"
+          intent="danger"
+          onclick={() => {
+            clearAllFilters();
+            isOpen = false;
+          }}
+        >
+          {tt('filter.button.clearAll')}
+        </Button>
+      {/if}
+      <Button
+        variant="ghost"
+        size="xs"
+        onclick={() => (isOpen = false)}
+        aria-label={tt('button.close')}
+      >
+        <CloseIcon class="h-4 w-4" />
+      </Button>
+    </div>
+  </div>
+
+  <div class="space-y-4">
+    {#each filterOptions as option (option.key)}
+      {@const state = filterStates[option.key]}
+      {@const uniqueValues = getUniqueValues(option.key)}
+
+      <div class={menuStyles.section()}>
+        <!-- Section Header -->
+        <div class="flex items-center justify-between">
+          <h4 class={menuStyles.sectionTitle()}>
+            {option.label}
+          </h4>
+        </div>
+
+        {#if state}
+          {@const columnFilters = getActiveFiltersForColumn(option.key)}
+
+          <div class="space-y-2">
+            <!-- Show existing filters for this column -->
+            {#if columnFilters.length > 0}
+              <div class="space-y-1">
+                {#each columnFilters as filter, i (`${filter.operator}:${filter.value}:${i}`)}
+                  <div class={menuStyles.activeFilter()}>
+                    <span class="text-text-primary flex-1 truncate text-sm">
+                      {tt(`filter.operators.${filter.operator}`)}: {filter.value}
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      intent="danger"
+                      onclick={() =>
+                        handleRemoveSpecificFilter(filter.column, filter.operator, filter.value)}
+                      class="ml-2 flex-shrink-0"
+                      aria-label={tt('filter.button.remove')}
+                    >
+                      <CloseIcon class="h-3 w-3" />
+                    </Button>
+                  </div>
+                {/each}
+              </div>
+            {/if}
+
+            <!-- Operator Select and Input in one row -->
+            <div class={menuStyles.filterRow()}>
+              <div class={menuStyles.operatorSelect()}>
+                <Select
+                  options={option.operators}
+                  bind:value={state.selectedOperator}
+                  usePortal={false}
+                  size="sm"
+                  variant="outlined"
+                  class="w-full"
+                />
+              </div>
+
+              <div class={menuStyles.valueInput()}>
+                <Input
+                  type={option.dataType === 'date' ? 'date' : 'text'}
+                  placeholder={tt('filter.input.enterValue')}
+                  bind:value={state.inputValue}
+                  size="sm"
+                  variant="outlined"
+                  class="w-full"
+                  onkeydown={(e) => {
+                    if (e.key === 'Enter') {
+                      handleApplyFilter(option.key);
+                    }
+                  }}
+                  clearable={true}
+                  onClear={() => (state.inputValue = '')}
+                />
+              </div>
+            </div>
+
+            <!-- Quick Values with TV styling -->
+            {#if option.dataType === 'text' && uniqueValues.length > 0}
+              <div class="space-y-2">
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  onclick={() => (state.showQuickValues = !state.showQuickValues)}
+                >
+                  {tt('filter.quickValues.title')} ({uniqueValues.length})
+                </Button>
+
+                {#if state.showQuickValues}
+                  <div class={menuStyles.quickValues()}>
+                    {#each uniqueValues.slice(0, 20) as value (value)}
+                      {@const isActive = hasFilterForColumn(option.key, 'contains', value)}
+                      <Button
+                        variant={isActive ? 'filled' : 'outlined'}
+                        size="xs"
+                        intent={isActive ? 'primary' : 'neutral'}
+                        onclick={() => toggleQuickFilter(option.key, value)}
+                        class="min-w-0 justify-start truncate text-left"
+                        title={value}
+                      >
+                        {#if isActive}
+                          <CheckIcon class="mr-1 h-3 w-3 flex-shrink-0" />
+                        {/if}
+                        <span class="truncate">{value}</span>
+                      </Button>
+                    {/each}
+                  </div>
+                {/if}
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    {/each}
+  </div>
+
+  <!-- Footer with TV styling -->
+  <div class={menuStyles.footer()}>
+    <Button variant="outlined" size="sm" intent="neutral" onclick={handleCancel}>
+      {bt('button.cancel')}
+    </Button>
+    <Button variant="filled" size="sm" intent="primary" onclick={handleApplyAllFilters}>
+      {bt('button.apply')}
+    </Button>
+  </div>
+</Popover>

package/dist/features/SmartFilterBar/FilterMenu.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const FilterMenu: import("svelte").Component<Record<string, never>, {}, "">;
+type FilterMenu = ReturnType<typeof FilterMenu>;
+export default FilterMenu;

package/dist/features/SmartFilterBar/GroupingMenu.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { getTableContext, useTableI18n } from '../..';
+  import { resolveColumnId, resolveColumnLabel } from '../../utils';
+  import {
+    Button,
+    Select,
+    Tooltip,
+    resolveIcon,
+    LayersIcon as LayersIconDefault,
+    CheckIcon as CheckIconDefault
+  } from '@urbicon-ui/blocks';
+
+  const tt = useTableI18n();
+
+  const LayersIcon = resolveIcon('layers', LayersIconDefault);
+  const CheckIcon = resolveIcon('check', CheckIconDefault);
+
+  const tableContext = getTableContext();
+  const { state: tableState, setGroupByKey } = tableContext;
+
+  const currentValue = $derived(tableState.groupByKey || '');
+  const isActive = $derived(!!currentValue);
+
+  const groupableColumns = $derived.by(() => {
+    return tableState.columns.filter((col) => {
+      // Synthetic columns have no accessor and structurally lack the
+      // derivable flags — exclude before reading them.
+      if (col.accessor === undefined) return false;
+      if (col.groupable !== undefined) return col.groupable === true;
+      const id = resolveColumnId(col);
+      return col.sortable === true && id !== 'actions' && !id.includes('action');
+    });
+  });
+
+  const groupingOptions = $derived.by(() => {
+    const options = [{ label: tt('grouping.none'), value: '' }];
+
+    groupableColumns.forEach((column) => {
+      options.push({
+        label: resolveColumnLabel(column),
+        value: resolveColumnId(column)
+      });
+    });
+
+    return options;
+  });
+
+  let menuOpen = $state(false);
+
+  function handleValueChange(value: string) {
+    setGroupByKey(value === '' ? null : value);
+  }
+</script>
+
+{#snippet customTrigger(_selected: unknown[], _open: boolean, _clear: () => void)}
+  <Tooltip label={tt('grouping.button')}>
+    <Button
+      variant="ghost"
+      intent="neutral"
+      size="sm"
+      active={isActive}
+      aria-expanded={menuOpen}
+      aria-haspopup="listbox"
+      onclick={() => (menuOpen = !menuOpen)}
+    >
+      <LayersIcon class="h-4 w-4" />
+      {#if isActive}
+        <CheckIcon class="h-3 w-3" />
+      {/if}
+    </Button>
+  </Tooltip>
+{/snippet}
+
+<Select
+  options={groupingOptions}
+  value={currentValue}
+  bind:open={menuOpen}
+  onValueChange={(v: string | null) => handleValueChange(v ?? '')}
+  size="sm"
+  syncWidth={false}
+  {customTrigger}
+/>

package/dist/features/SmartFilterBar/GroupingMenu.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const GroupingMenu: import("svelte").Component<Record<string, never>, {}, "">;
+type GroupingMenu = ReturnType<typeof GroupingMenu>;
+export default GroupingMenu;

package/dist/features/SmartFilterBar/SmartFilterBar.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { getTableContext, useTableI18n } from '../..';
+  import { Input, Toolbar, resolveIcon, SearchIcon as SearchIconDefault } from '@urbicon-ui/blocks';
+
+  const SearchIcon = resolveIcon('search', SearchIconDefault);
+  import { smartFilterBarVariants, type SmartFilterBarVariantProps } from '../../variants';
+  import ChipsField from './ChipsField.svelte';
+  import ColumnVisibilityMenu from './ColumnVisibilityMenu.svelte';
+  import FilterMenu from './FilterMenu.svelte';
+  import GroupingMenu from './GroupingMenu.svelte';
+  import SummaryMenu from './SummaryMenu.svelte';
+  import { getTableStyleConfig, resolveSlotClass } from '../../core/table-style-context';
+
+  const tt = useTableI18n();
+
+  // Store-Kontext abrufen
+  const tableContext = getTableContext();
+  const { state: tableState, setSearchTerm } = tableContext;
+  const styleConfig = getTableStyleConfig();
+
+  // Props
+  let {
+    placeholder = tt('search.placeholder'),
+    debounceMs = 300,
+    size = 'md' as SmartFilterBarVariantProps['size'],
+    layout = 'responsive' as SmartFilterBarVariantProps['layout'],
+    responsive = false,
+    class: className = ''
+  } = $props();
+
+  // Local state — decouples UI input from the store so debouncing is not bypassed
+  let localSearch = $state(tableState.searchTerm);
+  let debounceTimer = $state<number | null>(null);
+
+  // Sync store → local (e.g. when the store is changed programmatically)
+  $effect(() => {
+    const storeValue = tableState.searchTerm;
+    if (storeValue !== untrack(() => localSearch)) {
+      localSearch = storeValue;
+    }
+  });
+
+  function handleSearchInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    localSearch = target.value;
+
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      setSearchTerm(localSearch);
+    }, debounceMs) as unknown as number;
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape' && localSearch) {
+      localSearch = '';
+      if (debounceTimer) clearTimeout(debounceTimer);
+      setSearchTerm('');
+    }
+  }
+
+  // Tailwind-Variants Styling
+  const filterBarStyles = $derived(
+    smartFilterBarVariants({
+      size,
+      layout,
+      elevated: responsive,
+      appearance: styleConfig.appearance
+    })
+  );
+</script>
+
+<div
+  class={resolveSlotClass(
+    filterBarStyles.container(),
+    styleConfig.slotClasses.filterBar,
+    styleConfig.unstyled,
+    className
+  )}
+>
+  <Toolbar aria-label={tt('aria.filterBar')} variant="ghost" gap="xs" padding="xs" class="w-full">
+    <div class={filterBarStyles.searchSection()}>
+      {#snippet searchIcon()}
+        <SearchIcon class="h-4 w-4" />
+      {/snippet}
+      <Input
+        type="search"
+        {placeholder}
+        value={localSearch}
+        oninput={handleSearchInput}
+        onkeydown={handleKeydown}
+        leftIcon={searchIcon}
+        class="w-full"
+        aria-label={tt('aria.searchData')}
+      />
+    </div>
+
+    <div class="{filterBarStyles.actionsSection()} ml-auto gap-1">
+      <FilterMenu />
+      <GroupingMenu />
+      <SummaryMenu />
+      <ColumnVisibilityMenu />
+    </div>
+  </Toolbar>
+
+  <div class={filterBarStyles.chipsSection()}>
+    <ChipsField />
+  </div>
+</div>

package/dist/features/SmartFilterBar/SmartFilterBar.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type SmartFilterBarVariantProps } from '../../variants';
+declare const SmartFilterBar: import("svelte").Component<{
+    placeholder?: any;
+    debounceMs?: number;
+    size?: SmartFilterBarVariantProps["size"];
+    layout?: SmartFilterBarVariantProps["layout"];
+    responsive?: boolean;
+    class?: string;
+}, {}, "">;
+type SmartFilterBar = ReturnType<typeof SmartFilterBar>;
+export default SmartFilterBar;

package/dist/features/SmartFilterBar/SummaryMenu.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import { getTableContext, useTableI18n } from '../..';
+  import { resolveColumnId, resolveColumnLabel } from '../../utils';
+  import {
+    Badge,
+    Button,
+    Select,
+    Tooltip,
+    resolveIcon,
+    SquareSigmaIcon as SquareSigmaIconDefault
+  } from '@urbicon-ui/blocks';
+
+  const tt = useTableI18n();
+
+  const SquareSigmaIcon = resolveIcon('squareSigma', SquareSigmaIconDefault);
+
+  interface SummaryConfig {
+    column: string;
+    type: 'sum' | 'avg' | 'count' | 'min' | 'max';
+    formatter?: (value: unknown) => string;
+  }
+
+  const tableContext = getTableContext();
+  const { state: tableState, addSummaryConfig } = tableContext;
+
+  const summaryConfigs = $derived(tableState.summaryConfigs);
+  const isActive = $derived(summaryConfigs.length > 0);
+
+  let selectedValue = $state('');
+  let menuOpen = $state(false);
+
+  const summableColumns = $derived.by(() => {
+    return tableState.columns.filter((col) => {
+      // Synthetic columns cannot be summed.
+      if (col.accessor === undefined) return false;
+      if (col.summable !== undefined) return col.summable === true;
+      return (
+        col.dataType === 'number' ||
+        /^(age|salary|price|amount|count|number|projectsCompleted|rating|score)$/i.test(
+          resolveColumnId(col)
+        )
+      );
+    });
+  });
+
+  const summaryTypes = [
+    { value: 'sum', label: tt('summary.types.sum'), icon: '∑' },
+    { value: 'avg', label: tt('summary.types.average'), icon: '⌀' },
+    { value: 'count', label: tt('summary.types.count'), icon: '#' },
+    { value: 'min', label: tt('summary.types.minimum'), icon: '↓' },
+    { value: 'max', label: tt('summary.types.maximum'), icon: '↑' }
+  ] as const;
+
+  const menuGroups = $derived.by(() => {
+    if (summableColumns.length === 0) return [];
+
+    return summableColumns.map((column) => {
+      const columnId = resolveColumnId(column);
+      return {
+        label: resolveColumnLabel(column),
+        options: summaryTypes.map((type) => ({
+          label: `${type.icon} ${type.label}`,
+          value: `${columnId}:${type.value}`,
+          disabled: summaryConfigs.some(
+            (config) => config.column === columnId && config.type === type.value
+          )
+        }))
+      };
+    });
+  });
+
+  function handleValueChange(value: string) {
+    if (!value) return;
+
+    const [columnKey, type] = value.split(':');
+    if (columnKey && type) {
+      const summaryConfig = {
+        column: columnKey,
+        type: type as SummaryConfig['type']
+      };
+      addSummaryConfig(summaryConfig);
+      selectedValue = '';
+    }
+  }
+</script>
+
+{#snippet customTrigger(_selected: unknown[], _open: boolean, _clear: () => void)}
+  <Tooltip label={tt('summary.button.title')}>
+    <Button
+      variant="ghost"
+      intent="neutral"
+      size="sm"
+      active={isActive}
+      aria-expanded={menuOpen}
+      aria-haspopup="listbox"
+      disabled={summableColumns.length === 0}
+      onclick={() => (menuOpen = !menuOpen)}
+    >
+      <SquareSigmaIcon class="h-4 w-4" />
+      {#if isActive}
+        <Badge variant="filled" size="xs" counter class="bg-summary text-text-on-primary ml-1">
+          {summaryConfigs.length}
+        </Badge>
+      {/if}
+    </Button>
+  </Tooltip>
+{/snippet}
+
+<Select
+  groups={menuGroups}
+  bind:value={selectedValue}
+  bind:open={menuOpen}
+  onValueChange={(v: string | null) => handleValueChange(v ?? '')}
+  disabled={summableColumns.length === 0}
+  size="sm"
+  syncWidth={false}
+  {customTrigger}
+/>