@streamscloud/kit 0.2.10 → 0.2.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/dist/styles/_responsive.scss +48 -0
  2. package/dist/ui/button/cmp.button.svelte +2 -2
  3. package/dist/ui/button/cmp.button.svelte.d.ts +2 -2
  4. package/dist/ui/button/cmp.options-button.svelte +2 -2
  5. package/dist/ui/button/resources/button-base.svelte +3 -3
  6. package/dist/ui/button/resources/button-theme.svelte +2 -2
  7. package/dist/ui/dropdown/cmp.dropdown.svelte +8 -3
  8. package/dist/ui/icon-text/cmp.icon-text.svelte +2 -2
  9. package/dist/ui/icon-text/cmp.icon-text.svelte.d.ts +2 -0
  10. package/dist/ui/player/carousel/cmp.carousel.svelte +20 -11
  11. package/dist/ui/player/carousel/cmp.carousel.svelte.d.ts +4 -0
  12. package/dist/ui/seek-bar/cmp.seek-bar.svelte +5 -3
  13. package/dist/ui/table/cmp.table.svelte +419 -0
  14. package/dist/ui/table/cmp.table.svelte.d.ts +74 -0
  15. package/dist/ui/table/index.d.ts +7 -0
  16. package/dist/ui/table/index.js +5 -0
  17. package/dist/ui/table/service.d.ts +7 -0
  18. package/dist/ui/table/service.js +17 -0
  19. package/dist/ui/table/table-cells/index.d.ts +13 -0
  20. package/dist/ui/table/table-cells/index.js +13 -0
  21. package/dist/ui/table/table-cells/table-actions-cell.svelte +53 -0
  22. package/dist/ui/table/table-cells/table-actions-cell.svelte.d.ts +18 -0
  23. package/dist/ui/table/table-cells/table-badge-cell.svelte +15 -0
  24. package/dist/ui/table/table-cells/table-badge-cell.svelte.d.ts +38 -0
  25. package/dist/ui/table/table-cells/table-button-cell.svelte +20 -0
  26. package/dist/ui/table/table-cells/table-button-cell.svelte.d.ts +38 -0
  27. package/dist/ui/table/table-cells/table-by-cell.svelte +105 -0
  28. package/dist/ui/table/table-cells/table-by-cell.svelte.d.ts +38 -0
  29. package/dist/ui/table/table-cells/table-checkbox-cell.svelte +21 -0
  30. package/dist/ui/table/table-cells/table-checkbox-cell.svelte.d.ts +38 -0
  31. package/dist/ui/table/table-cells/table-custom-cell.svelte +5 -0
  32. package/dist/ui/table/table-cells/table-custom-cell.svelte.d.ts +38 -0
  33. package/dist/ui/table/table-cells/table-hideable-cell.svelte +7 -0
  34. package/dist/ui/table/table-cells/table-hideable-cell.svelte.d.ts +39 -0
  35. package/dist/ui/table/table-cells/table-icon-cell.svelte +53 -0
  36. package/dist/ui/table/table-cells/table-icon-cell.svelte.d.ts +48 -0
  37. package/dist/ui/table/table-cells/table-image-cell.svelte +64 -0
  38. package/dist/ui/table/table-cells/table-image-cell.svelte.d.ts +39 -0
  39. package/dist/ui/table/table-cells/table-move-row-cell.svelte +29 -0
  40. package/dist/ui/table/table-cells/table-move-row-cell.svelte.d.ts +9 -0
  41. package/dist/ui/table/table-cells/table-select-cell.svelte +22 -0
  42. package/dist/ui/table/table-cells/table-select-cell.svelte.d.ts +38 -0
  43. package/dist/ui/table/table-cells/table-text-cell.svelte +60 -0
  44. package/dist/ui/table/table-cells/table-text-cell.svelte.d.ts +47 -0
  45. package/dist/ui/table/table-cells/table-text-input-cell.svelte +83 -0
  46. package/dist/ui/table/table-cells/table-text-input-cell.svelte.d.ts +38 -0
  47. package/dist/ui/table/table-column-models.svelte.d.ts +28 -0
  48. package/dist/ui/table/table-column-models.svelte.js +57 -0
  49. package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte +86 -0
  50. package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte.d.ts +46 -0
  51. package/dist/ui/table/table-columns-manager/table-columns-manager-localization.d.ts +4 -0
  52. package/dist/ui/table/table-columns-manager/table-columns-manager-localization.js +19 -0
  53. package/dist/ui/table/table-group-actions/cmp.table-group-actions.svelte +56 -0
  54. package/dist/ui/table/table-group-actions/cmp.table-group-actions.svelte.d.ts +40 -0
  55. package/dist/ui/table/table-group-actions/table-group-actions-localization.d.ts +3 -0
  56. package/dist/ui/table/table-group-actions/table-group-actions-localization.js +12 -0
  57. package/dist/ui/table/table-group-actions/types.svelte.d.ts +8 -0
  58. package/dist/ui/table/table-group-actions/types.svelte.js +1 -0
  59. package/dist/ui/table/table-headers/index.d.ts +3 -0
  60. package/dist/ui/table/table-headers/index.js +3 -0
  61. package/dist/ui/table/table-headers/table-checkbox-header.svelte +18 -0
  62. package/dist/ui/table/table-headers/table-checkbox-header.svelte.d.ts +41 -0
  63. package/dist/ui/table/table-headers/table-header-sortable-localization.d.ts +7 -0
  64. package/dist/ui/table/table-headers/table-header-sortable-localization.js +40 -0
  65. package/dist/ui/table/table-headers/table-header-sortable.svelte +94 -0
  66. package/dist/ui/table/table-headers/table-header-sortable.svelte.d.ts +12 -0
  67. package/dist/ui/table/table-headers/table-header.svelte +18 -0
  68. package/dist/ui/table/table-headers/table-header.svelte.d.ts +10 -0
  69. package/dist/ui/table/table-localization.d.ts +6 -0
  70. package/dist/ui/table/table-localization.js +33 -0
  71. package/dist/ui/table/table-model.svelte.d.ts +42 -0
  72. package/dist/ui/table/table-model.svelte.js +207 -0
  73. package/dist/ui/table/types.d.ts +144 -0
  74. package/dist/ui/table/types.js +1 -0
  75. package/package.json +5 -1
@@ -0,0 +1,38 @@
1
+ import type { ITableSelectColumn } from '../types';
2
+ declare function $$render<T extends {
3
+ id: string;
4
+ }>(): {
5
+ props: {
6
+ item: T;
7
+ column: ITableSelectColumn<T, keyof T>;
8
+ };
9
+ exports: {};
10
+ bindings: "";
11
+ slots: {};
12
+ events: {};
13
+ };
14
+ declare class __sveltets_Render<T extends {
15
+ id: string;
16
+ }> {
17
+ props(): ReturnType<typeof $$render<T>>['props'];
18
+ events(): ReturnType<typeof $$render<T>>['events'];
19
+ slots(): ReturnType<typeof $$render<T>>['slots'];
20
+ bindings(): "";
21
+ exports(): {};
22
+ }
23
+ interface $$IsomorphicComponent {
24
+ new <T extends {
25
+ id: string;
26
+ }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
27
+ $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
28
+ } & ReturnType<__sveltets_Render<T>['exports']>;
29
+ <T extends {
30
+ id: string;
31
+ }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
32
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
33
+ }
34
+ declare const TableSelectCell: $$IsomorphicComponent;
35
+ type TableSelectCell<T extends {
36
+ id: string;
37
+ }> = InstanceType<typeof TableSelectCell<T>>;
38
+ export default TableSelectCell;
@@ -0,0 +1,60 @@
1
+ <script lang="ts" generics="T extends {id: string}">import { HtmlHelper, DateHelper } from '../../../core/utils';
2
+ import { LineClamp } from '../../line-clamp';
3
+ let { item, column, centered } = $props();
4
+ const getValueForColumn = (column, item) => (column.valueFactory ? column.valueFactory(item) : item[column.id])?.toString();
5
+ const value = $derived(getValueForColumn(column, item) ?? '');
6
+ const getDateValueForColumn = (column, item) => {
7
+ return DateHelper.toDate(getValueForColumn(column, item));
8
+ };
9
+ const dateValue = $derived(getDateValueForColumn(column, item) ?? null);
10
+ const fmt = (d, options) => new Intl.DateTimeFormat(undefined, options).format(d);
11
+ </script>
12
+
13
+ <span class="table-text-cell" class:table-text-cell--centered={centered} class:table-text-cell--clickable={!!column.onClick}>
14
+ {#if column.format === 'date'}
15
+ {!dateValue ? '' : fmt(dateValue, { dateStyle: 'medium' })}
16
+ {:else if column.format === 'date-time'}
17
+ {!dateValue ? '' : `${fmt(dateValue, { dateStyle: 'medium' })} ${fmt(dateValue, { timeStyle: 'medium' })}`}
18
+ {:else if column.format === 'html'}
19
+ {#if column.maxLines === 'single-line-no-trim'}
20
+ <span class="table-text-cell__single-line-no-trim">{HtmlHelper.stripHtml(value)}</span>
21
+ {:else}
22
+ <LineClamp maxLines={column.maxLines || 3}>
23
+ {@html HtmlHelper.sanitizeHtml(value)}
24
+ </LineClamp>
25
+ {/if}
26
+ {:else if column.maxLines === 'single-line-no-trim'}
27
+ <span class="table-text-cell__single-line-no-trim">{value}</span>
28
+ {:else}
29
+ <LineClamp maxLines={column.maxLines || 3}>{value}</LineClamp>
30
+ {/if}
31
+ </span>
32
+
33
+ <!--
34
+ @component
35
+ Text cell for table rows. Supports plain text, date, date-time, and HTML formats with optional line clamping.
36
+
37
+ ### CSS Custom Properties
38
+ | Property | Description | Default |
39
+ |---|---|---|
40
+ | `--sc-kit--table-text-cell--clickable--color` | Text color when column has onClick | `light-dark(primary-500, primary-400)` |
41
+ -->
42
+
43
+ <style>.table-text-cell {
44
+ --_table-text-cell--clickable--color: var(
45
+ --sc-kit--table-text-cell--clickable--color,
46
+ light-dark(#144ab0, #5a8dec)
47
+ );
48
+ display: flex;
49
+ align-content: center;
50
+ font-size: var(--_table--cell--font-size);
51
+ }
52
+ .table-text-cell__single-line-no-trim {
53
+ white-space: nowrap;
54
+ }
55
+ .table-text-cell--clickable {
56
+ color: var(--_table-text-cell--clickable--color);
57
+ }
58
+ .table-text-cell--centered {
59
+ justify-content: center;
60
+ }</style>
@@ -0,0 +1,47 @@
1
+ import type { ITableTextColumn } from '../types';
2
+ declare function $$render<T extends {
3
+ id: string;
4
+ }>(): {
5
+ props: {
6
+ item: T;
7
+ column: ITableTextColumn<T>;
8
+ centered: boolean;
9
+ };
10
+ exports: {};
11
+ bindings: "";
12
+ slots: {};
13
+ events: {};
14
+ };
15
+ declare class __sveltets_Render<T extends {
16
+ id: string;
17
+ }> {
18
+ props(): ReturnType<typeof $$render<T>>['props'];
19
+ events(): ReturnType<typeof $$render<T>>['events'];
20
+ slots(): ReturnType<typeof $$render<T>>['slots'];
21
+ bindings(): "";
22
+ exports(): {};
23
+ }
24
+ interface $$IsomorphicComponent {
25
+ new <T extends {
26
+ id: string;
27
+ }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
28
+ $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
29
+ } & ReturnType<__sveltets_Render<T>['exports']>;
30
+ <T extends {
31
+ id: string;
32
+ }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
33
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
34
+ }
35
+ /**
36
+ * Text cell for table rows. Supports plain text, date, date-time, and HTML formats with optional line clamping.
37
+ *
38
+ * ### CSS Custom Properties
39
+ * | Property | Description | Default |
40
+ * |---|---|---|
41
+ * | `--sc-kit--table-text-cell--clickable--color` | Text color when column has onClick | `light-dark(primary-500, primary-400)` |
42
+ */
43
+ declare const TableTextCell: $$IsomorphicComponent;
44
+ type TableTextCell<T extends {
45
+ id: string;
46
+ }> = InstanceType<typeof TableTextCell<T>>;
47
+ export default TableTextCell;
@@ -0,0 +1,83 @@
1
+ <script lang="ts" generics="T extends {id: string}">import { Input, NumeralInput } from '../../inputs';
2
+ import { LineClamp } from '../../line-clamp';
3
+ import { untrack } from 'svelte';
4
+ let { item, column } = $props();
5
+ let errorText = $state('');
6
+ const onInput = async (val) => {
7
+ item[column.id] = String(val);
8
+ await validate();
9
+ if (column.onInput) {
10
+ column.onInput(item, item[column.id]);
11
+ }
12
+ };
13
+ const validate = async () => {
14
+ if (!column.validationSchema) {
15
+ return;
16
+ }
17
+ try {
18
+ await column.validationSchema.validate(item[column.id]);
19
+ errorText = '';
20
+ }
21
+ catch (error) {
22
+ const err = error;
23
+ if (err.name !== 'ValidationError') {
24
+ throw error;
25
+ }
26
+ errorText = err.message;
27
+ return;
28
+ }
29
+ finally {
30
+ if (column.onValidated) {
31
+ column.onValidated(item, errorText);
32
+ }
33
+ }
34
+ };
35
+ $effect(() => {
36
+ untrack(() => void validate());
37
+ });
38
+ </script>
39
+
40
+ <div class="table-text-input-cell" class:table-text-input-cell--errored={!!errorText}>
41
+ {#if column.inputType === 'number'}
42
+ <NumeralInput value={item[column.id]} on={{ input: onInput }} />
43
+ {:else}
44
+ <Input value={item[column.id]} on={{ input: onInput }} />
45
+ {/if}
46
+ {#if errorText}
47
+ <div class="table-text-input-cell__error">
48
+ <LineClamp maxLines={2}>{errorText}</LineClamp>
49
+ </div>
50
+ {/if}
51
+ </div>
52
+
53
+ <style>.table-text-input-cell {
54
+ font-size: var(--_table--cell--font-size);
55
+ --sc-kit--validatable--margin-bottom: 1.5em;
56
+ padding-top: 1.5em;
57
+ --_validatable--error--color: var(--sc-kit--validatable--error--color, #e71d36);
58
+ --_validatable--error--position: var(--sc-kit--validatable--error--position, absolute);
59
+ --_validatable--error--left: var(--sc-kit--validatable--error--left, 0);
60
+ --_validatable--error--right: var(--sc-kit--validatable--error--right, 0);
61
+ --_validatable--margin-bottom: var(--sc-kit--validatable--margin-bottom, 1.1em);
62
+ --_validatable--margin-right: var(--sc-kit--validatable--margin-right, 0);
63
+ --_validatable--display: var(--sc-kit--validatable--display, block);
64
+ --_validatable--width: var(--sc-kit--validatable--width, auto);
65
+ position: relative;
66
+ margin-bottom: var(--_validatable--margin-bottom);
67
+ margin-right: var(--_validatable--margin-right);
68
+ display: var(--_validatable--display);
69
+ width: var(--_validatable--width);
70
+ }
71
+ .table-text-input-cell--errored {
72
+ --_input--explicit-shadow-color: var(--_validatable--error--color);
73
+ }
74
+ .table-text-input-cell__error {
75
+ position: var(--_validatable--error--position);
76
+ top: calc(100% + 0.1em);
77
+ left: var(--_validatable--error--left);
78
+ right: var(--_validatable--error--right);
79
+ display: block;
80
+ color: var(--_validatable--error--color);
81
+ font-size: 0.7rem;
82
+ font-weight: 400;
83
+ }</style>
@@ -0,0 +1,38 @@
1
+ import type { ITableTextInputColumn } from '../types';
2
+ declare function $$render<T extends {
3
+ id: string;
4
+ }>(): {
5
+ props: {
6
+ item: any;
7
+ column: ITableTextInputColumn<T>;
8
+ };
9
+ exports: {};
10
+ bindings: "";
11
+ slots: {};
12
+ events: {};
13
+ };
14
+ declare class __sveltets_Render<T extends {
15
+ id: string;
16
+ }> {
17
+ props(): ReturnType<typeof $$render<T>>['props'];
18
+ events(): ReturnType<typeof $$render<T>>['events'];
19
+ slots(): ReturnType<typeof $$render<T>>['slots'];
20
+ bindings(): "";
21
+ exports(): {};
22
+ }
23
+ interface $$IsomorphicComponent {
24
+ new <T extends {
25
+ id: string;
26
+ }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
27
+ $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
28
+ } & ReturnType<__sveltets_Render<T>['exports']>;
29
+ <T extends {
30
+ id: string;
31
+ }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
32
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
33
+ }
34
+ declare const TableTextInputCell: $$IsomorphicComponent;
35
+ type TableTextInputCell<T extends {
36
+ id: string;
37
+ }> = InstanceType<typeof TableTextInputCell<T>>;
38
+ export default TableTextInputCell;
@@ -0,0 +1,28 @@
1
+ import type { DynamicComponentModel } from '../dynamic-component';
2
+ import type { IOneOfTableColumn, ITableActionsColumn, TableColumnSortDirection, TableColumnType, WithId } from './types';
3
+ export type ColumnDef<T extends WithId> = IOneOfTableColumn<T, keyof T> | ITableActionsColumn;
4
+ export type SortableTableColumn = {
5
+ uniqueId: symbol;
6
+ title: string;
7
+ centered: boolean;
8
+ sortDirection: TableColumnSortDirection;
9
+ type: TableColumnType;
10
+ onSort: ((state: TableColumnSortDirection) => Promise<void>) | null;
11
+ };
12
+ export declare class ResolvedColumn<T extends WithId> {
13
+ readonly def: ColumnDef<T>;
14
+ readonly uniqueId: symbol;
15
+ headerView: DynamicComponentModel;
16
+ editorColumn: ResolvedColumn<T> | null;
17
+ hidden: boolean;
18
+ sortDirection: TableColumnSortDirection;
19
+ constructor(def: ColumnDef<T>);
20
+ get type(): TableColumnType;
21
+ get id(): keyof T;
22
+ get title(): string;
23
+ get centered(): boolean;
24
+ get fixedCssWidth(): string;
25
+ get hideable(): boolean;
26
+ get onSort(): ((state: TableColumnSortDirection) => Promise<void>) | null;
27
+ get onClick(): ((item: T) => Promise<void> | void) | null;
28
+ }
@@ -0,0 +1,57 @@
1
+ export class ResolvedColumn {
2
+ def;
3
+ uniqueId = Symbol();
4
+ headerView = null;
5
+ editorColumn = null;
6
+ hidden = $state(false);
7
+ sortDirection = $state('none');
8
+ constructor(def) {
9
+ this.def = def;
10
+ if ('hidden' in def && def.hidden) {
11
+ this.hidden = def.hidden;
12
+ }
13
+ if ('sortDirection' in def && def.sortDirection) {
14
+ this.sortDirection = def.sortDirection;
15
+ }
16
+ }
17
+ get type() {
18
+ return this.def.type;
19
+ }
20
+ get id() {
21
+ if ('id' in this.def) {
22
+ return this.def.id;
23
+ }
24
+ return 'id';
25
+ }
26
+ get title() {
27
+ if ('title' in this.def) {
28
+ return this.def.title || '';
29
+ }
30
+ return '';
31
+ }
32
+ get centered() {
33
+ return this.def.centered ?? false;
34
+ }
35
+ get fixedCssWidth() {
36
+ return this.def.fixedCssWidth ?? '';
37
+ }
38
+ get hideable() {
39
+ if ('hideable' in this.def) {
40
+ return this.def.hideable ?? true;
41
+ }
42
+ // Structural columns (checkbox, actions, move-row) have no id — not hideable by default
43
+ return 'id' in this.def;
44
+ }
45
+ get onSort() {
46
+ if ('onSort' in this.def) {
47
+ return this.def.onSort ?? null;
48
+ }
49
+ return null;
50
+ }
51
+ get onClick() {
52
+ if ('onClick' in this.def) {
53
+ return this.def.onClick ?? null;
54
+ }
55
+ return null;
56
+ }
57
+ }
@@ -0,0 +1,86 @@
1
+ <script lang="ts" generics="T extends {id: string}">import { Button } from '../../button';
2
+ import { Dropdown } from '../../dropdown';
3
+ import { IconText } from '../../icon-text';
4
+ import { Toggle } from '../../toggle';
5
+ import { TableColumnsManagerLocalization } from './table-columns-manager-localization';
6
+ import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
7
+ import IconColumnTwo from '@fluentui/svg-icons/icons/text_column_two_20_regular.svg?raw';
8
+ let { columns } = $props();
9
+ const localization = new TableColumnsManagerLocalization();
10
+ </script>
11
+
12
+ <Dropdown position="bottom-end" keepDropdownOpen>
13
+ {#snippet trigger()}
14
+ <Button variant="standard" size="small">
15
+ <IconText icon={IconColumnTwo} iconColor="blue" secondaryIcon={IconChevronDown}>{localization.columns}</IconText>
16
+ </Button>
17
+ {/snippet}
18
+ <div class="columns-manager">
19
+ <div class="columns-manager__title">{localization.selectColumns}</div>
20
+ <div class="columns-manager__body">
21
+ {#each columns.filter((c) => c.hideable) as column (column)}
22
+ <div class="columns-manager__item">
23
+ <div class="columns-manager__label">{column.title}</div>
24
+ <Toggle isOn={!column.hidden} on={{ change: (value) => (column.hidden = !value) }} />
25
+ </div>
26
+ {/each}
27
+ </div>
28
+ </div>
29
+ </Dropdown>
30
+
31
+ <!--
32
+ @component
33
+ Column visibility manager for tables. Shows a dropdown with toggles for each hideable column.
34
+
35
+ ### CSS Custom Properties
36
+ | Property | Description | Default |
37
+ |---|---|---|
38
+ | `--sc-kit--table-columns-manager--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
39
+ | `--sc-kit--table-columns-manager--label--color` | Column label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
40
+ -->
41
+
42
+ <style>.columns-manager {
43
+ --_columns-manager--title--color: var(
44
+ --sc-kit--table-columns-manager--title--color,
45
+ var(--sc-color--text-primary, light-dark(#000000, #ffffff))
46
+ );
47
+ --_columns-manager--label--color: var(
48
+ --sc-kit--table-columns-manager--label--color,
49
+ var(--sc-color--text-primary, light-dark(#000000, #ffffff))
50
+ );
51
+ width: 21.875rem;
52
+ padding: 1.5rem;
53
+ }
54
+ .columns-manager__title {
55
+ font-size: 0.875rem;
56
+ font-weight: 600;
57
+ line-height: 1.25rem;
58
+ color: var(--_columns-manager--title--color);
59
+ margin-bottom: 0.5rem;
60
+ }
61
+ .columns-manager__body {
62
+ display: flex;
63
+ flex-direction: column;
64
+ gap: 1rem;
65
+ padding-block: 0.5rem;
66
+ }
67
+ .columns-manager__item {
68
+ display: flex;
69
+ align-items: center;
70
+ justify-content: space-between;
71
+ gap: 0.5rem;
72
+ padding: 0.25rem 0.5rem;
73
+ --sc-kit--toggle--switch--height: 1.125rem;
74
+ --sc-kit--toggle--switch--width: 2.3125rem;
75
+ }
76
+ .columns-manager__label {
77
+ font-size: 0.875rem;
78
+ font-weight: 400;
79
+ line-height: 1.25rem;
80
+ color: var(--_columns-manager--label--color);
81
+ min-width: 0;
82
+ text-overflow: ellipsis;
83
+ max-width: 100%;
84
+ white-space: nowrap;
85
+ overflow: hidden;
86
+ }</style>
@@ -0,0 +1,46 @@
1
+ import type { ResolvedColumn } from '../table-column-models.svelte';
2
+ declare function $$render<T extends {
3
+ id: string;
4
+ }>(): {
5
+ props: {
6
+ columns: Array<ResolvedColumn<T>>;
7
+ };
8
+ exports: {};
9
+ bindings: "";
10
+ slots: {};
11
+ events: {};
12
+ };
13
+ declare class __sveltets_Render<T extends {
14
+ id: string;
15
+ }> {
16
+ props(): ReturnType<typeof $$render<T>>['props'];
17
+ events(): ReturnType<typeof $$render<T>>['events'];
18
+ slots(): ReturnType<typeof $$render<T>>['slots'];
19
+ bindings(): "";
20
+ exports(): {};
21
+ }
22
+ interface $$IsomorphicComponent {
23
+ new <T extends {
24
+ id: string;
25
+ }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
26
+ $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
27
+ } & ReturnType<__sveltets_Render<T>['exports']>;
28
+ <T extends {
29
+ id: string;
30
+ }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
31
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
32
+ }
33
+ /**
34
+ * Column visibility manager for tables. Shows a dropdown with toggles for each hideable column.
35
+ *
36
+ * ### CSS Custom Properties
37
+ * | Property | Description | Default |
38
+ * |---|---|---|
39
+ * | `--sc-kit--table-columns-manager--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
40
+ * | `--sc-kit--table-columns-manager--label--color` | Column label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
41
+ */
42
+ declare const Cmp: $$IsomorphicComponent;
43
+ type Cmp<T extends {
44
+ id: string;
45
+ }> = InstanceType<typeof Cmp<T>>;
46
+ export default Cmp;
@@ -0,0 +1,4 @@
1
+ export declare class TableColumnsManagerLocalization {
2
+ get columns(): string;
3
+ get selectColumns(): string;
4
+ }
@@ -0,0 +1,19 @@
1
+ import { AppLocale } from '../../../core/locale';
2
+ export class TableColumnsManagerLocalization {
3
+ get columns() {
4
+ return loc.columns[AppLocale.current];
5
+ }
6
+ get selectColumns() {
7
+ return loc.selectColumns[AppLocale.current];
8
+ }
9
+ }
10
+ const loc = {
11
+ columns: {
12
+ en: 'Columns',
13
+ no: 'Kolonner'
14
+ },
15
+ selectColumns: {
16
+ en: 'Select Columns',
17
+ no: 'Velg kolonner'
18
+ }
19
+ };
@@ -0,0 +1,56 @@
1
+ <script lang="ts" generics="T extends {id: string}">import { Button } from '../../button';
2
+ import { Dropdown, DropdownItem } from '../../dropdown';
3
+ import { IconText } from '../../icon-text';
4
+ import { TableGroupActionsLocalization } from './table-group-actions-localization';
5
+ import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
6
+ let { groupActions, selection } = $props();
7
+ const localization = new TableGroupActionsLocalization();
8
+ const isActionVisible = (action, items) => {
9
+ return action.visibilityFactory ? action.visibilityFactory(items) : true;
10
+ };
11
+ const availableGroupActions = $derived(groupActions.filter((a) => isActionVisible(a, selection.items)));
12
+ const singleGroupAction = $derived(availableGroupActions[0]);
13
+ </script>
14
+
15
+ {#if selection.items.length && availableGroupActions.length}
16
+ <div class="table-group-actions">
17
+ {#if availableGroupActions.length > 1}
18
+ <Dropdown position="bottom-end">
19
+ {#snippet trigger()}
20
+ <Button variant="standard" size="small">
21
+ <IconText icon={IconChevronDown} iconPosition="right">{localization.actions}</IconText>
22
+ </Button>
23
+ {/snippet}
24
+ {#each groupActions as action (action)}
25
+ {#if isActionVisible(action, selection.items)}
26
+ <DropdownItem on={{ click: () => action.action(selection.items) }}>
27
+ <IconText icon={action.icon} iconColor={action.color}>
28
+ {action.title}
29
+ </IconText>
30
+ </DropdownItem>
31
+ {/if}
32
+ {/each}
33
+ </Dropdown>
34
+ {:else if singleGroupAction}
35
+ <Button variant="standard" size="small" on={{ click: () => singleGroupAction.action(selection.items) }}>
36
+ <IconText icon={singleGroupAction.icon} iconColor={singleGroupAction.color}>
37
+ {singleGroupAction.title}
38
+ </IconText>
39
+ </Button>
40
+ {/if}
41
+ </div>
42
+ {/if}
43
+
44
+ <!--
45
+ @component
46
+ Group actions toolbar for table selections. Shows a single button or dropdown with multiple actions based on the current selection.
47
+ -->
48
+
49
+ <style>.table-group-actions {
50
+ display: contents;
51
+ --sc-kit--dropdown-item--font-size: 0.875rem;
52
+ --sc-kit--dropdown-item--min-width: 11.25rem;
53
+ --sc-kit--dropdown-item--padding: 0.75rem 1.25rem;
54
+ --sc-kit--icon-text--text--font-size: 0.875rem;
55
+ --sc-kit--icon-text--icon--font-size: 1.125rem;
56
+ }</style>
@@ -0,0 +1,40 @@
1
+ import type { Repository } from '../../../core/repository';
2
+ import type { TableGroupAction } from './types.svelte';
3
+ declare function $$render<T extends {
4
+ id: string;
5
+ }>(): {
6
+ props: {
7
+ groupActions: TableGroupAction<T>[];
8
+ selection: Repository<T>;
9
+ };
10
+ exports: {};
11
+ bindings: "";
12
+ slots: {};
13
+ events: {};
14
+ };
15
+ declare class __sveltets_Render<T extends {
16
+ id: string;
17
+ }> {
18
+ props(): ReturnType<typeof $$render<T>>['props'];
19
+ events(): ReturnType<typeof $$render<T>>['events'];
20
+ slots(): ReturnType<typeof $$render<T>>['slots'];
21
+ bindings(): "";
22
+ exports(): {};
23
+ }
24
+ interface $$IsomorphicComponent {
25
+ new <T extends {
26
+ id: string;
27
+ }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
28
+ $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
29
+ } & ReturnType<__sveltets_Render<T>['exports']>;
30
+ <T extends {
31
+ id: string;
32
+ }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
33
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
34
+ }
35
+ /** Group actions toolbar for table selections. Shows a single button or dropdown with multiple actions based on the current selection. */
36
+ declare const Cmp: $$IsomorphicComponent;
37
+ type Cmp<T extends {
38
+ id: string;
39
+ }> = InstanceType<typeof Cmp<T>>;
40
+ export default Cmp;
@@ -0,0 +1,3 @@
1
+ export declare class TableGroupActionsLocalization {
2
+ get actions(): string;
3
+ }
@@ -0,0 +1,12 @@
1
+ import { AppLocale } from '../../../core/locale';
2
+ export class TableGroupActionsLocalization {
3
+ get actions() {
4
+ return loc.actions[AppLocale.current];
5
+ }
6
+ }
7
+ const loc = {
8
+ actions: {
9
+ en: 'Actions',
10
+ no: 'Handlinger'
11
+ }
12
+ };
@@ -0,0 +1,8 @@
1
+ import type { IconColor } from '../../icon';
2
+ export type TableGroupAction<T> = {
3
+ title: string;
4
+ icon?: string;
5
+ color?: IconColor;
6
+ action: (items: T[]) => void;
7
+ visibilityFactory?: (items: T[]) => boolean;
8
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,3 @@
1
+ export { default as TableCheckboxHeader } from './table-checkbox-header.svelte';
2
+ export { default as TableHeader } from './table-header.svelte';
3
+ export { default as TableHeaderSortable } from './table-header-sortable.svelte';
@@ -0,0 +1,3 @@
1
+ export { default as TableCheckboxHeader } from './table-checkbox-header.svelte';
2
+ export { default as TableHeader } from './table-header.svelte';
3
+ export { default as TableHeaderSortable } from './table-header-sortable.svelte';