@streamscloud/kit 0.2.11 → 0.2.13

package/dist/ui/table/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Table } from './cmp.table.svelte';
 export { default as TableColumnsManager } from './table-columns-manager/cmp.table-columns-manager.svelte';
 export { default as TableGroupActions } from './table-group-actions/cmp.table-group-actions.svelte';
-export type { TableColumnSortDirection, TableColumnType, TableImageColumnFormat, TableItemAction, TableTextColumnFormat, TableOrderByState, PageQuery, IAnyTableColumn } from './types';
+export type { ColumnsConfig, TableColumnSortDirection, TableColumnType, TableImageColumnFormat, TableItemAction, TableTextColumnFormat, TableOrderByState, PageQuery, IAnyTableColumn } from './types';
 export type { TableGroupAction } from './table-group-actions/types.svelte';
 export { TableModel } from './table-model.svelte';
 export { pickDirectionFromOrderByState, generatePagination } from './service';

package/dist/ui/table/table-cells/table-text-cell.svelte

@@ -19,14 +19,14 @@ const fmt = (d, options) => new Intl.DateTimeFormat(undefined, options).format(d
     {#if column.maxLines === 'single-line-no-trim'}
       <span class="table-text-cell__single-line-no-trim">{HtmlHelper.stripHtml(value)}</span>
     {:else}
-      <LineClamp maxLines={column.maxLines || 3}>
+      <LineClamp maxLines={column.maxLines || 1}>
         {@html HtmlHelper.sanitizeHtml(value)}
       </LineClamp>
     {/if}
   {:else if column.maxLines === 'single-line-no-trim'}
     <span class="table-text-cell__single-line-no-trim">{value}</span>
   {:else}
-    <LineClamp maxLines={column.maxLines || 3}>{value}</LineClamp>
+    <LineClamp maxLines={column.maxLines || 1}>{value}</LineClamp>
   {/if}
 </span>
 

package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte

@@ -1,40 +1,103 @@
-<script lang="ts" generics="T extends {id: string}">import { Button } from '../../button';
+<script lang="ts" generics="T extends {id: string}">import { LocalStorageItem } from '../../../core/local-storage';
+import { Button } from '../../button';
 import { Dropdown } from '../../dropdown';
 import { IconText } from '../../icon-text';
-import { Toggle } from '../../toggle';
+import { ReorderableToggleList } from '../../page-toolbar';
+import { TableColumnsManagerLocalization } from './table-columns-manager-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconColumnTwo from '@fluentui/svg-icons/icons/text_column_two_20_regular.svg?raw';
-let { columns } = $props();
+import { untrack } from 'svelte';
+let { model, localStorageKey, on } = $props();
+const localization = new TableColumnsManagerLocalization();
+const storage = $derived(localStorageKey ? LocalStorageItem.of(localStorageKey) : null);
+const hideableColumns = $derived(model.columns.filter((c) => c.hideable));
+const items = $derived(hideableColumns.map((col) => ({
+    id: String(col.id),
+    label: col.title,
+    enabled: !col.hidden
+})));
+// Load from localStorage once columns are available
+let initialized = false;
+$effect(() => {
+    const columns = hideableColumns;
+    if (!storage || columns.length === 0 || initialized) {
+        return;
+    }
+    initialized = true;
+    const saved = storage.get();
+    if (!saved || !Array.isArray(saved)) {
+        return;
+    }
+    untrack(() => {
+        applyConfig(saved);
+    });
+});
+/** Apply a columns config. Updates column visibility and order on the model, persists to localStorage. */
+export const applyConfig = (config) => {
+    const configMap = new Map(config.map((c) => [c.id, c]));
+    for (const col of model.columns) {
+        if (col.hideable) {
+            const cfg = configMap.get(String(col.id));
+            if (cfg) {
+                col.hidden = cfg.hidden;
+            }
+        }
+    }
+    reorderHideableColumns(config.map((c) => c.id));
+    if (storage) {
+        storage.set(config);
+    }
+};
+const reorderHideableColumns = (orderedIds) => {
+    const columns = model.columns;
+    const hideable = columns.filter((c) => c.hideable);
+    const hideableMap = new Map(hideable.map((c) => [String(c.id), c]));
+    const orderedSet = new Set(orderedIds);
+    const reordered = [];
+    for (const id of orderedIds) {
+        const col = hideableMap.get(id);
+        if (col) {
+            reordered.push(col);
+        }
+    }
+    for (const col of hideable) {
+        if (!orderedSet.has(String(col.id))) {
+            reordered.push(col);
+        }
+    }
+    let idx = 0;
+    model.setResolvedColumns(columns.map((col) => (col.hideable ? reordered[idx++] : col)));
+};
+const handleChange = (updatedItems) => {
+    const config = updatedItems.map((i) => ({ id: i.id, hidden: !i.enabled }));
+    applyConfig(config);
+    on?.change?.(config);
+};
 </script>
 
-<Dropdown position="bottom-end" keepDropdownOpen>
+<Dropdown position="bottom-start" keepDropdownOpen>
   {#snippet trigger()}
     <Button variant="standard" size="small">
-      <IconText icon={IconColumnTwo} iconColor="blue" secondaryIcon={IconChevronDown}>Columns</IconText>
+      <IconText icon={IconColumnTwo} iconColor="blue" secondaryIcon={IconChevronDown}>{localization.columns}</IconText>
     </Button>
   {/snippet}
   <div class="columns-manager">
-    <div class="columns-manager__title">Select Columns</div>
+    <div class="columns-manager__title">{localization.selectColumns}</div>
     <div class="columns-manager__body">
-      {#each columns.filter((c) => c.hideable) as column (column)}
-        <div class="columns-manager__item">
-          <div class="columns-manager__label">{column.title}</div>
-          <Toggle isOn={!column.hidden} on={{ change: (value) => (column.hidden = !value) }} />
-        </div>
-      {/each}
+      <ReorderableToggleList items={items} on={{ change: handleChange }} />
     </div>
   </div>
 </Dropdown>
 
 <!--
 @component
-Column visibility manager for tables. Shows a dropdown with toggles for each hideable column.
+Column visibility and order manager for tables. Shows a dropdown with a reorderable toggle list for each hideable column.
+Supports optional localStorage persistence of column order and visibility.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--table-columns-manager--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
-| `--sc-kit--table-columns-manager--label--color` | Column label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
 -->
 
 <style>.columns-manager {
@@ -42,10 +105,6 @@ Column visibility manager for tables. Shows a dropdown with toggles for each hid
     --sc-kit--table-columns-manager--title--color,
     var(--sc-color--text-primary, light-dark(#000000, #ffffff))
   );
-  --_columns-manager--label--color: var(
-    --sc-kit--table-columns-manager--label--color,
-    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
-  );
   width: 21.875rem;
   padding: 1.5rem;
 }
@@ -61,24 +120,4 @@ Column visibility manager for tables. Shows a dropdown with toggles for each hid
   flex-direction: column;
   gap: 1rem;
   padding-block: 0.5rem;
-}
-.columns-manager__item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.25rem 0.5rem;
-  --sc-kit--toggle--switch--height: 1.125rem;
-  --sc-kit--toggle--switch--width: 2.3125rem;
-}
-.columns-manager__label {
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.25rem;
-  color: var(--_columns-manager--label--color);
-  min-width: 0;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
 }</style>

package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte.d.ts

@@ -1,11 +1,19 @@
-import type { ResolvedColumn } from '../table-column-models.svelte';
+import type { TableModel } from '..';
+import type { ColumnsConfig } from '../types';
 declare function $$render<T extends {
     id: string;
 }>(): {
     props: {
-        columns: Array<ResolvedColumn<T>>;
+        model: TableModel<T>;
+        /** localStorage key for persisting column order and visibility */
+        localStorageKey?: string;
+        on?: {
+            change?: (config: ColumnsConfig) => void;
+        };
+    };
+    exports: {
+        /** Apply a columns config. Updates column visibility and order on the model, persists to localStorage. */ applyConfig: (config: ColumnsConfig) => void;
     };
-    exports: {};
     bindings: "";
     slots: {};
     events: {};
@@ -17,7 +25,9 @@ declare class __sveltets_Render<T extends {
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        /** Apply a columns config. Updates column visibility and order on the model, persists to localStorage. */ applyConfig: (config: ColumnsConfig) => void;
+    };
 }
 interface $$IsomorphicComponent {
     new <T extends {
@@ -31,13 +41,13 @@ interface $$IsomorphicComponent {
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
- * Column visibility manager for tables. Shows a dropdown with toggles for each hideable column.
+ * Column visibility and order manager for tables. Shows a dropdown with a reorderable toggle list for each hideable column.
+ * Supports optional localStorage persistence of column order and visibility.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--table-columns-manager--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
- * | `--sc-kit--table-columns-manager--label--color` | Column label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends {

package/dist/ui/table/table-columns-manager/table-columns-manager-localization.d.ts

@@ -0,0 +1,4 @@
+export declare class TableColumnsManagerLocalization {
+    get columns(): string;
+    get selectColumns(): string;
+}

package/dist/ui/table/table-columns-manager/table-columns-manager-localization.js

@@ -0,0 +1,19 @@
+import { AppLocale } from '../../../core/locale';
+export class TableColumnsManagerLocalization {
+    get columns() {
+        return loc.columns[AppLocale.current];
+    }
+    get selectColumns() {
+        return loc.selectColumns[AppLocale.current];
+    }
+}
+const loc = {
+    columns: {
+        en: 'Columns',
+        no: 'Kolonner'
+    },
+    selectColumns: {
+        en: 'Select Columns',
+        no: 'Velg kolonner'
+    }
+};

package/dist/ui/table/table-group-actions/cmp.table-group-actions.svelte

@@ -1,8 +1,10 @@
 <script lang="ts" generics="T extends {id: string}">import { Button } from '../../button';
 import { Dropdown, DropdownItem } from '../../dropdown';
 import { IconText } from '../../icon-text';
+import { TableGroupActionsLocalization } from './table-group-actions-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 let { groupActions, selection } = $props();
+const localization = new TableGroupActionsLocalization();
 const isActionVisible = (action, items) => {
     return action.visibilityFactory ? action.visibilityFactory(items) : true;
 };
@@ -16,7 +18,7 @@ const singleGroupAction = $derived(availableGroupActions[0]);
       <Dropdown position="bottom-end">
         {#snippet trigger()}
           <Button variant="standard" size="small">
-            <IconText icon={IconChevronDown} iconPosition="right">Actions</IconText>
+            <IconText icon={IconChevronDown} iconPosition="right">{localization.actions}</IconText>
           </Button>
         {/snippet}
         {#each groupActions as action (action)}

package/dist/ui/table/table-group-actions/table-group-actions-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class TableGroupActionsLocalization {
+    get actions(): string;
+}

package/dist/ui/table/table-group-actions/table-group-actions-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../../core/locale';
+export class TableGroupActionsLocalization {
+    get actions() {
+        return loc.actions[AppLocale.current];
+    }
+}
+const loc = {
+    actions: {
+        en: 'Actions',
+        no: 'Handlinger'
+    }
+};

package/dist/ui/table/table-headers/table-header-sortable-localization.d.ts

@@ -0,0 +1,7 @@
+export declare class TableHeaderSortableLocalization {
+    get orderBy(): string;
+    get newestFirst(): string;
+    get oldestFirst(): string;
+    get ascending(): string;
+    get descending(): string;
+}

package/dist/ui/table/table-headers/table-header-sortable-localization.js

@@ -0,0 +1,40 @@
+import { AppLocale } from '../../../core/locale';
+export class TableHeaderSortableLocalization {
+    get orderBy() {
+        return loc.orderBy[AppLocale.current];
+    }
+    get newestFirst() {
+        return loc.newestFirst[AppLocale.current];
+    }
+    get oldestFirst() {
+        return loc.oldestFirst[AppLocale.current];
+    }
+    get ascending() {
+        return loc.ascending[AppLocale.current];
+    }
+    get descending() {
+        return loc.descending[AppLocale.current];
+    }
+}
+const loc = {
+    orderBy: {
+        en: 'Order by:',
+        no: 'Sorter etter:'
+    },
+    newestFirst: {
+        en: 'Newest first',
+        no: 'Nyeste først'
+    },
+    oldestFirst: {
+        en: 'Oldest first',
+        no: 'Eldste først'
+    },
+    ascending: {
+        en: 'A → Z',
+        no: 'A → Å'
+    },
+    descending: {
+        en: 'Z → A',
+        no: 'Å → A'
+    }
+};

package/dist/ui/table/table-headers/table-header-sortable.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">import { Checkbox } from '../../checkbox';
 import { Dropdown } from '../../dropdown';
 import { Icon } from '../../icon';
+import { TableHeaderSortableLocalization } from './table-header-sortable-localization';
 import TableHeader from './table-header.svelte';
 import IconCaretDownFilled from '@fluentui/svg-icons/icons/caret_down_16_filled.svg?raw';
 import {} from 'svelte';
 let { column, on, children } = $props();
+const localization = new TableHeaderSortableLocalization();
 const changeSort = (direction) => {
     if (column.sortDirection === direction) {
         direction = 'none';
@@ -30,23 +32,23 @@ const changeSort = (direction) => {
       {/snippet}
 
       <div class="th-sortable__dropdown">
-        <div class="th-sortable__dropdown-title">Order by:</div>
+        <div class="th-sortable__dropdown-title">{localization.orderBy}</div>
         {#if column.type === 'by'}
           <div class="th-sortable__dropdown-option">
-            Newest first
+            {localization.newestFirst}
             <Checkbox checked={column.sortDirection === 'desc'} on={{ change: () => changeSort('desc') }} />
           </div>
           <div class="th-sortable__dropdown-option">
-            Oldest first
+            {localization.oldestFirst}
             <Checkbox checked={column.sortDirection === 'asc'} on={{ change: () => changeSort('asc') }} />
           </div>
         {:else}
           <div class="th-sortable__dropdown-option">
-            A → Z
+            {localization.ascending}
             <Checkbox checked={column.sortDirection === 'asc'} on={{ change: () => changeSort('asc') }} />
           </div>
           <div class="th-sortable__dropdown-option">
-            Z → A
+            {localization.descending}
             <Checkbox checked={column.sortDirection === 'desc'} on={{ change: () => changeSort('desc') }} />
           </div>
         {/if}

package/dist/ui/table/table-localization.d.ts

@@ -0,0 +1,6 @@
+export declare class TableLocalization {
+    get noItemsFoundTitle(): string;
+    get noItemsFoundBody(): string;
+    get save(): string;
+    get cancel(): string;
+}

package/dist/ui/table/table-localization.js

@@ -0,0 +1,33 @@
+import { AppLocale } from '../../core/locale';
+export class TableLocalization {
+    get noItemsFoundTitle() {
+        return loc.noItemsFoundTitle[AppLocale.current];
+    }
+    get noItemsFoundBody() {
+        return loc.noItemsFoundBody[AppLocale.current];
+    }
+    get save() {
+        return loc.save[AppLocale.current];
+    }
+    get cancel() {
+        return loc.cancel[AppLocale.current];
+    }
+}
+const loc = {
+    noItemsFoundTitle: {
+        en: 'No Items <span>Found</span>',
+        no: 'Ingen elementer <span>funnet</span>'
+    },
+    noItemsFoundBody: {
+        en: 'No data found. Create one to get started',
+        no: 'Ingen data funnet. Opprett en for å komme i gang'
+    },
+    save: {
+        en: 'Save',
+        no: 'Lagre'
+    },
+    cancel: {
+        en: 'Cancel',
+        no: 'Avbryt'
+    }
+};

package/dist/ui/table/table-model.svelte.d.ts

@@ -36,6 +36,7 @@ export declare class TableModel<T extends WithId> {
     set columns(value: IAnyTableColumn<T>[]);
     set editingItem(value: T | null);
     set highlightedItemIds(value: string[]);
+    setResolvedColumns: (columns: ResolvedColumn<T>[]) => void;
     private reconcileColumns;
     private mapColumn;
 }

package/dist/ui/table/table-model.svelte.js

@@ -97,6 +97,9 @@ export class TableModel {
     set highlightedItemIds(value) {
         this._highlightedItemIds = value;
     }
+    setResolvedColumns = (columns) => {
+        this._columns = columns;
+    };
     reconcileColumns = (newDefs) => {
         // Save state from current columns
         const stateMap = new Map();

package/dist/ui/table/types.d.ts

@@ -101,6 +101,7 @@ export interface ITableSelectColumn<T, K extends keyof T> extends ITableColumn<T
 export interface ITableTextColumn<T> extends ITableColumn<T> {
     type: 'text';
     format?: TableTextColumnFormat | null;
+    /** @default 1 */
     maxLines?: number | 'single-line-no-trim' | null;
     valueFactory?: ((item: T) => string) | null;
     editorColumn?: IEditorColumn<T> | null;
@@ -141,4 +142,8 @@ export type SelectionSettings<T extends WithId> = {
     repository?: Repository<T>;
 };
 export type TableColumnSortDirection = 'none' | 'asc' | 'desc';
+export type ColumnsConfig = Array<{
+    id: string;
+    hidden: boolean;
+}>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -53,6 +53,10 @@
       "types": "./dist/core/i18n/index.d.ts",
       "svelte": "./dist/core/i18n/index.js"
     },
+    "./core/local-storage": {
+      "types": "./dist/core/local-storage/index.d.ts",
+      "svelte": "./dist/core/local-storage/index.js"
+    },
     "./core/locale": {
       "types": "./dist/core/locale/index.d.ts",
       "svelte": "./dist/core/locale/index.js"
@@ -181,6 +185,10 @@
       "types": "./dist/ui/media-viewer-dialog/index.d.ts",
       "svelte": "./dist/ui/media-viewer-dialog/index.js"
     },
+    "./ui/page-toolbar": {
+      "types": "./dist/ui/page-toolbar/index.d.ts",
+      "svelte": "./dist/ui/page-toolbar/index.js"
+    },
     "./ui/player/buttons": {
       "types": "./dist/ui/player/buttons/index.d.ts",
       "svelte": "./dist/ui/player/buttons/index.js"
@@ -213,6 +221,10 @@
       "types": "./dist/ui/seek-bar/index.d.ts",
       "svelte": "./dist/ui/seek-bar/index.js"
     },
+    "./ui/segmented-control": {
+      "types": "./dist/ui/segmented-control/index.d.ts",
+      "svelte": "./dist/ui/segmented-control/index.js"
+    },
     "./ui/selects": {
       "types": "./dist/ui/selects/index.d.ts",
       "svelte": "./dist/ui/selects/index.js"