@juspay/svelte-ui-components 4.0.0 → 4.1.1
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.
- package/dist/Checkbox/Checkbox.svelte +12 -1
- package/dist/Checkbox/properties.d.ts +10 -0
- package/dist/Table/Table.svelte +69 -123
- package/dist-wc/index.js +170 -139
- package/package.json +3 -2
|
@@ -14,13 +14,23 @@
|
|
|
14
14
|
onclick,
|
|
15
15
|
classes,
|
|
16
16
|
ariaControls,
|
|
17
|
-
ariaLabel
|
|
17
|
+
ariaLabel,
|
|
18
|
+
controlled = false,
|
|
19
|
+
attributes
|
|
18
20
|
}: CheckboxProperties = $props();
|
|
19
21
|
|
|
20
22
|
function handleClick(): void {
|
|
21
23
|
if (disabled) {
|
|
22
24
|
return;
|
|
23
25
|
}
|
|
26
|
+
// Controlled: the parent owns the state and is told what the click asked
|
|
27
|
+
// for. Nothing is flipped locally, so a parent that declines the change
|
|
28
|
+
// (a controlled table selection that rejects a row) keeps the box, the
|
|
29
|
+
// native input and aria-checked all agreeing with the value it passed.
|
|
30
|
+
if (controlled) {
|
|
31
|
+
onclick?.(!checked);
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
24
34
|
checked = !checked;
|
|
25
35
|
if (indeterminate) {
|
|
26
36
|
indeterminate = false;
|
|
@@ -76,6 +86,7 @@
|
|
|
76
86
|
onkeydown={handleKeyDown}
|
|
77
87
|
data-pw={typeof testId === 'string' ? `${testId}-box` : null}
|
|
78
88
|
testID={typeof testId === 'string' ? `${testId}-box` : null}
|
|
89
|
+
{...attributes}
|
|
79
90
|
>
|
|
80
91
|
{#if checked && !indeterminate}
|
|
81
92
|
{#if typeof checkedIcon === 'function'}
|
|
@@ -17,6 +17,16 @@ export type OptionalCheckboxProperties = {
|
|
|
17
17
|
* since name-from-content cannot reach it. Ignored when `text` is non-empty:
|
|
18
18
|
* a visible label must stay part of the accessible name (WCAG 2.5.3). */
|
|
19
19
|
ariaLabel?: string;
|
|
20
|
+
/** Controlled mode: a click reports the requested value through `onclick`
|
|
21
|
+
* and changes nothing locally, so the parent's `checked` / `indeterminate`
|
|
22
|
+
* stay the single source of truth. Needed wherever the parent may decline
|
|
23
|
+
* the change (a table selection driven from a consumer-owned set). */
|
|
24
|
+
controlled?: boolean;
|
|
25
|
+
/** Extra DOM attributes spread onto the checkbox element itself (the
|
|
26
|
+
* `role="checkbox"` box, not the wrapping label) — an `id` for
|
|
27
|
+
* `aria-controls` to point at, or a consumer's own test attribute. Spread
|
|
28
|
+
* last, so a value here wins over the component's own `data-pw`. */
|
|
29
|
+
attributes?: Record<string, string>;
|
|
20
30
|
};
|
|
21
31
|
export type CheckboxEventProperties = {
|
|
22
32
|
onclick?: (checked: boolean) => void;
|
package/dist/Table/Table.svelte
CHANGED
|
@@ -10,12 +10,11 @@
|
|
|
10
10
|
import Tooltip from '../Tooltip/Tooltip.svelte';
|
|
11
11
|
import Pagination from '../Pagination/Pagination.svelte';
|
|
12
12
|
import Select from '../Select/Select.svelte';
|
|
13
|
+
import Checkbox from '../Checkbox/Checkbox.svelte';
|
|
13
14
|
import chevronDownSmSvg from '../assets/chevron-down-sm.svg?raw';
|
|
14
15
|
import sortDefaultSvg from '../assets/sort-default.svg?raw';
|
|
15
16
|
import searchSvg from '../assets/search.svg?raw';
|
|
16
17
|
import closeSvg from '../assets/close.svg?raw';
|
|
17
|
-
import checkmarkSvg from '../assets/checkmark.svg?raw';
|
|
18
|
-
import minusSvg from '../assets/minus.svg?raw';
|
|
19
18
|
|
|
20
19
|
let {
|
|
21
20
|
tableTitle = '',
|
|
@@ -596,11 +595,22 @@
|
|
|
596
595
|
checkboxSelection.onSelectionChange?.(new Set(internalSelectedIds));
|
|
597
596
|
};
|
|
598
597
|
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
598
|
+
/**
|
|
599
|
+
* Attributes for one row checkbox (`rowIndex` -1 is the header). The row id
|
|
600
|
+
* doubles as the element id the header's `aria-controls` points at; the
|
|
601
|
+
* consumer's `getRowAttributes` is spread last so its own test attribute wins.
|
|
602
|
+
*/
|
|
603
|
+
const checkboxAttributes = (rowId: string, rowIndex: number): Record<string, string> => {
|
|
604
|
+
const suffix = rowIndex === -1 ? 'select-all' : `row-checkbox-${rowId}`;
|
|
605
|
+
const own: Record<string, string> = rowIndex === -1 ? {} : { id: `row-checkbox-${rowId}` };
|
|
606
|
+
if (typeof testId === 'string') {
|
|
607
|
+
own['data-pw'] = `${testId}-${suffix}`;
|
|
608
|
+
own.testID = `${testId}-${suffix}`;
|
|
603
609
|
}
|
|
610
|
+
const consumer = checkboxSelection?.getRowAttributes
|
|
611
|
+
? checkboxSelection.getRowAttributes(rowId, rowIndex)
|
|
612
|
+
: {};
|
|
613
|
+
return { ...own, ...consumer };
|
|
604
614
|
};
|
|
605
615
|
|
|
606
616
|
let isCheckboxMode = $derived(!!checkboxSelection && checkboxSelection.enabled !== false);
|
|
@@ -674,37 +684,20 @@
|
|
|
674
684
|
class="table-header table-checkbox-col"
|
|
675
685
|
class:table-header-sticky={isStickyHeader}
|
|
676
686
|
>
|
|
677
|
-
<!-- Header tri-state checkbox
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
: headerCheckboxState === 'all'}
|
|
687
|
-
aria-label="Select all rows"
|
|
688
|
-
data-pw={typeof testId === 'string' ? `${testId}-select-all` : null}
|
|
689
|
-
testID={typeof testId === 'string' ? `${testId}-select-all` : null}
|
|
690
|
-
{...checkboxSelection?.getRowAttributes
|
|
691
|
-
? checkboxSelection.getRowAttributes('__header__', -1)
|
|
692
|
-
: {}}
|
|
693
|
-
aria-controls={selectableRowIds
|
|
687
|
+
<!-- Header tri-state checkbox: the library Checkbox in controlled mode,
|
|
688
|
+
so the tri-state is computed here and never flipped locally. -->
|
|
689
|
+
<Checkbox
|
|
690
|
+
text=""
|
|
691
|
+
ariaLabel="Select all rows"
|
|
692
|
+
controlled
|
|
693
|
+
checked={headerCheckboxState === 'all'}
|
|
694
|
+
indeterminate={headerCheckboxState === 'some'}
|
|
695
|
+
ariaControls={selectableRowIds
|
|
694
696
|
.map((rowId) => `row-checkbox-${rowId}`)
|
|
695
697
|
.join(' ')}
|
|
698
|
+
attributes={checkboxAttributes('__header__', -1)}
|
|
696
699
|
onclick={toggleAllSelection}
|
|
697
|
-
|
|
698
|
-
handleCheckboxKeydown(keyboardEvent, toggleAllSelection)}
|
|
699
|
-
>
|
|
700
|
-
{#if headerCheckboxState === 'all'}
|
|
701
|
-
<!-- eslint-disable svelte/no-at-html-tags -->
|
|
702
|
-
<span class="table-checkbox-icon">{@html checkmarkSvg}</span>
|
|
703
|
-
{:else if headerCheckboxState === 'some'}
|
|
704
|
-
<!-- eslint-disable svelte/no-at-html-tags -->
|
|
705
|
-
<span class="table-checkbox-icon">{@html minusSvg}</span>
|
|
706
|
-
{/if}
|
|
707
|
-
</span>
|
|
700
|
+
/>
|
|
708
701
|
</th>
|
|
709
702
|
{:else if isCheckboxMode && isSingleSelect}
|
|
710
703
|
<!-- In single-select mode the header cell is an empty spacer -->
|
|
@@ -917,40 +910,22 @@
|
|
|
917
910
|
tabindex={isRowClickable ? 0 : null}
|
|
918
911
|
>
|
|
919
912
|
{#if isCheckboxMode}
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
: null}
|
|
937
|
-
{...checkboxSelection?.getRowAttributes
|
|
938
|
-
? checkboxSelection.getRowAttributes(rowId, rowIndex)
|
|
939
|
-
: {}}
|
|
940
|
-
onclick={(mouseEvent) => {
|
|
941
|
-
mouseEvent.stopPropagation();
|
|
942
|
-
toggleRowSelection(rowId);
|
|
943
|
-
}}
|
|
944
|
-
onkeydown={(keyboardEvent) => {
|
|
945
|
-
keyboardEvent.stopPropagation();
|
|
946
|
-
handleCheckboxKeydown(keyboardEvent, () => toggleRowSelection(rowId));
|
|
947
|
-
}}
|
|
948
|
-
>
|
|
949
|
-
{#if rowSelected}
|
|
950
|
-
<!-- eslint-disable svelte/no-at-html-tags -->
|
|
951
|
-
<span class="table-checkbox-icon">{@html checkmarkSvg}</span>
|
|
952
|
-
{/if}
|
|
953
|
-
</span>
|
|
913
|
+
<!-- The cell swallows the click and the key so a clickable row does not
|
|
914
|
+
also fire its own handler when the checkbox is toggled. -->
|
|
915
|
+
<td
|
|
916
|
+
class="table-content table-checkbox-col"
|
|
917
|
+
onclick={(mouseEvent) => mouseEvent.stopPropagation()}
|
|
918
|
+
onkeydown={(keyboardEvent) => keyboardEvent.stopPropagation()}
|
|
919
|
+
>
|
|
920
|
+
<Checkbox
|
|
921
|
+
text=""
|
|
922
|
+
ariaLabel={`Select row ${rowId || 'non-selectable'}`}
|
|
923
|
+
controlled
|
|
924
|
+
checked={rowSelected}
|
|
925
|
+
disabled={rowDisabled}
|
|
926
|
+
attributes={checkboxAttributes(rowId, rowIndex)}
|
|
927
|
+
onclick={() => toggleRowSelection(rowId)}
|
|
928
|
+
/>
|
|
954
929
|
</td>
|
|
955
930
|
{/if}
|
|
956
931
|
{#if rowNumberColumn}
|
|
@@ -1444,64 +1419,35 @@
|
|
|
1444
1419
|
}
|
|
1445
1420
|
|
|
1446
1421
|
/* ── C2-1 Checkbox column ───────────────────────────────────────────────── */
|
|
1422
|
+
/* The column renders the library Checkbox. The table's own --table-checkbox-*
|
|
1423
|
+
tokens stay the public API and are bridged onto Checkbox's --checkbox-*
|
|
1424
|
+
variables here, so a consumer theming the table keeps working and a
|
|
1425
|
+
consumer theming Checkbox app-wide is overridden only inside the table. */
|
|
1447
1426
|
.table-checkbox-col {
|
|
1448
1427
|
width: var(--table-checkbox-col-width, 44px);
|
|
1449
1428
|
padding: var(--table-checkbox-col-padding, 12px 12px);
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
}
|
|
1473
|
-
|
|
1474
|
-
.table-checkbox-box:not(.disabled):hover {
|
|
1475
|
-
border-color: var(--table-checkbox-hover-border-color, #6b7280);
|
|
1476
|
-
}
|
|
1477
|
-
|
|
1478
|
-
.table-checkbox-box.checked {
|
|
1479
|
-
background-color: var(--table-checkbox-checked-background, #2563eb);
|
|
1480
|
-
border-color: var(--table-checkbox-checked-border-color, #2563eb);
|
|
1481
|
-
}
|
|
1482
|
-
|
|
1483
|
-
.table-checkbox-box.indeterminate {
|
|
1484
|
-
background-color: var(--table-checkbox-indeterminate-background, #2563eb);
|
|
1485
|
-
border-color: var(--table-checkbox-indeterminate-border-color, #2563eb);
|
|
1486
|
-
}
|
|
1487
|
-
|
|
1488
|
-
.table-checkbox-box.disabled {
|
|
1489
|
-
opacity: var(--table-checkbox-disabled-opacity, 0.4);
|
|
1490
|
-
cursor: not-allowed;
|
|
1491
|
-
}
|
|
1492
|
-
|
|
1493
|
-
.table-checkbox-icon {
|
|
1494
|
-
display: inline-flex;
|
|
1495
|
-
align-items: center;
|
|
1496
|
-
justify-content: center;
|
|
1497
|
-
width: var(--table-checkbox-icon-size, 12px);
|
|
1498
|
-
height: var(--table-checkbox-icon-size, 12px);
|
|
1499
|
-
color: var(--table-checkbox-icon-color, #ffffff);
|
|
1500
|
-
}
|
|
1501
|
-
|
|
1502
|
-
.table-checkbox-icon :global(svg) {
|
|
1503
|
-
width: 100%;
|
|
1504
|
-
height: 100%;
|
|
1429
|
+
--checkbox-container-gap: 0;
|
|
1430
|
+
--checkbox-size: var(--table-checkbox-size, 18px);
|
|
1431
|
+
--checkbox-border: var(--table-checkbox-border, 2px solid #9ca3af);
|
|
1432
|
+
--checkbox-border-radius: var(--table-checkbox-border-radius, var(--radius, 4px));
|
|
1433
|
+
--checkbox-background: var(--table-checkbox-background, transparent);
|
|
1434
|
+
--checkbox-hover-border-color: var(--table-checkbox-hover-border-color, #6b7280);
|
|
1435
|
+
--checkbox-checked-background: var(--table-checkbox-checked-background, #2563eb);
|
|
1436
|
+
--checkbox-checked-border: var(
|
|
1437
|
+
--table-checkbox-checked-border,
|
|
1438
|
+
2px solid var(--table-checkbox-checked-border-color, #2563eb)
|
|
1439
|
+
);
|
|
1440
|
+
--checkbox-indeterminate-background: var(--table-checkbox-indeterminate-background, #2563eb);
|
|
1441
|
+
--checkbox-indeterminate-border: var(
|
|
1442
|
+
--table-checkbox-indeterminate-border,
|
|
1443
|
+
2px solid var(--table-checkbox-indeterminate-border-color, #2563eb)
|
|
1444
|
+
);
|
|
1445
|
+
--checkbox-disabled-opacity: var(--table-checkbox-disabled-opacity, 0.4);
|
|
1446
|
+
--checkbox-focus-ring: var(--table-checkbox-focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.3));
|
|
1447
|
+
--checkbox-icon-size: var(--table-checkbox-icon-size, 12px);
|
|
1448
|
+
--checkbox-checkmark-color: var(--table-checkbox-icon-color, #ffffff);
|
|
1449
|
+
--checkbox-dash-color: var(--table-checkbox-icon-color, #ffffff);
|
|
1450
|
+
--checkbox-transition: 0.15s;
|
|
1505
1451
|
}
|
|
1506
1452
|
|
|
1507
1453
|
/* ── Sort button ────────────────────────────────────────────────────────── */
|
package/dist-wc/index.js
CHANGED
|
@@ -5739,20 +5739,26 @@ customElements.define("sui-carousel", create_custom_element(Carousel_wc, {
|
|
|
5739
5739
|
}, [], [], { mode: "open" }));
|
|
5740
5740
|
//#endregion
|
|
5741
5741
|
//#region src/lib/assets/checkmark.svg?raw
|
|
5742
|
-
var checkmark_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n</svg>\n", minus_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n</svg>\n", root$79 = /* @__PURE__ */ from_html("<span class=\"icon svelte-f1in4m\"></span>"), root_1$66 = /* @__PURE__ */ from_html("<span class=\"icon dash svelte-f1in4m\"></span>"), root_2$50 = /* @__PURE__ */ from_html("<label><input type=\"checkbox\" class=\"native-checkbox svelte-f1in4m\" aria-hidden=\"true\"/> <span
|
|
5742
|
+
var checkmark_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n</svg>\n", minus_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n</svg>\n", root$79 = /* @__PURE__ */ from_html("<span class=\"icon svelte-f1in4m\"></span>"), root_1$66 = /* @__PURE__ */ from_html("<span class=\"icon dash svelte-f1in4m\"></span>"), root_2$50 = /* @__PURE__ */ from_html("<label><input type=\"checkbox\" class=\"native-checkbox svelte-f1in4m\" aria-hidden=\"true\"/> <span><!> <!></span> <span class=\"label svelte-f1in4m\"> </span></label>"), $$css$77 = {
|
|
5743
5743
|
hash: "svelte-f1in4m",
|
|
5744
5744
|
code: ".container.svelte-f1in4m {display:var(--checkbox-container-display, inline-flex);align-items:var(--checkbox-container-align-items, center);gap:var(--checkbox-container-gap, 8px);cursor:var(--checkbox-container-cursor, pointer);}.container.disabled.svelte-f1in4m {opacity:var(--checkbox-disabled-opacity, 0.4);cursor:var(--checkbox-disabled-cursor, not-allowed);}.native-checkbox.svelte-f1in4m {position:absolute;opacity:0;width:0;height:0;pointer-events:none;}.box.svelte-f1in4m {display:inline-flex;align-items:center;justify-content:center;width:var(--checkbox-size, 20px);height:var(--checkbox-size, 20px);border:var(--checkbox-border, 2px solid #757575);border-radius:var(--checkbox-border-radius, var(--radius, 4px));background-color:var(--checkbox-background, transparent);transition:background-color var(--checkbox-transition, 0.2s),\n border var(--checkbox-transition, 0.2s);flex-shrink:0;}.box.svelte-f1in4m:focus-visible {outline:none;box-shadow:var(--checkbox-focus-ring, 0 0 0 3px rgba(33, 150, 243, 0.3));}.container.svelte-f1in4m:not(.disabled) .box:where(.svelte-f1in4m):hover {border-color:var(--checkbox-hover-border-color, #212121);}.box.checked.svelte-f1in4m {background-color:var(--checkbox-checked-background, #2196f3);border:var(--checkbox-checked-border, 2px solid #2196f3);}.box.indeterminate.svelte-f1in4m {background-color:var(--checkbox-indeterminate-background, #2196f3);border:var(--checkbox-indeterminate-border, 2px solid #2196f3);}.icon.svelte-f1in4m {display:inline-flex;align-items:center;justify-content:center;width:var(--checkbox-icon-size, 14px);height:var(--checkbox-icon-size, 14px);color:var(--checkbox-checkmark-color, white);}.icon.svelte-f1in4m svg {width:100%;height:100%;}.icon.dash.svelte-f1in4m {color:var(--checkbox-dash-color, white);}.label.svelte-f1in4m {font-size:var(--checkbox-label-font-size, 14px);font-weight:var(--checkbox-label-font-weight, 400);color:var(--checkbox-label-color, #212121);}"
|
|
5745
5745
|
};
|
|
5746
5746
|
function Checkbox(e, t) {
|
|
5747
5747
|
push(t, !0), append_styles$1(e, $$css$77);
|
|
5748
|
-
let n = prop(t, "text", 7), i = prop(t, "checked", 15, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "indeterminate", 15, !1), s = prop(t, "testId", 7), c = prop(t, "checkedIcon", 7), l = prop(t, "indeterminateIcon", 7), u = prop(t, "onclick", 7), f = prop(t, "classes", 7), p = prop(t, "ariaControls", 7), h = prop(t, "ariaLabel", 7);
|
|
5749
|
-
function
|
|
5750
|
-
|
|
5748
|
+
let n = prop(t, "text", 7), i = prop(t, "checked", 15, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "indeterminate", 15, !1), s = prop(t, "testId", 7), c = prop(t, "checkedIcon", 7), l = prop(t, "indeterminateIcon", 7), u = prop(t, "onclick", 7), f = prop(t, "classes", 7), p = prop(t, "ariaControls", 7), h = prop(t, "ariaLabel", 7), S = prop(t, "controlled", 7, !1), C = prop(t, "attributes", 7);
|
|
5749
|
+
function k() {
|
|
5750
|
+
if (!a()) {
|
|
5751
|
+
if (S()) {
|
|
5752
|
+
u()?.(!i());
|
|
5753
|
+
return;
|
|
5754
|
+
}
|
|
5755
|
+
i(!i()), o() && o(!1), u()?.(i());
|
|
5756
|
+
}
|
|
5751
5757
|
}
|
|
5752
|
-
function
|
|
5753
|
-
(e.key === " " || e.key === "Enter") && (e.preventDefault(),
|
|
5758
|
+
function R(e) {
|
|
5759
|
+
(e.key === " " || e.key === "Enter") && (e.preventDefault(), k());
|
|
5754
5760
|
}
|
|
5755
|
-
var
|
|
5761
|
+
var te = {
|
|
5756
5762
|
get text() {
|
|
5757
5763
|
return n();
|
|
5758
5764
|
},
|
|
@@ -5818,14 +5824,42 @@ function Checkbox(e, t) {
|
|
|
5818
5824
|
},
|
|
5819
5825
|
set ariaLabel(e) {
|
|
5820
5826
|
h(e), flushSync();
|
|
5827
|
+
},
|
|
5828
|
+
get controlled() {
|
|
5829
|
+
return S();
|
|
5830
|
+
},
|
|
5831
|
+
set controlled(e = !1) {
|
|
5832
|
+
S(e), flushSync();
|
|
5833
|
+
},
|
|
5834
|
+
get attributes() {
|
|
5835
|
+
return C();
|
|
5836
|
+
},
|
|
5837
|
+
set attributes(e) {
|
|
5838
|
+
C(e), flushSync();
|
|
5821
5839
|
}
|
|
5822
|
-
},
|
|
5823
|
-
let
|
|
5824
|
-
var
|
|
5825
|
-
remove_input_defaults(
|
|
5826
|
-
var
|
|
5827
|
-
|
|
5828
|
-
|
|
5840
|
+
}, ne = root_2$50();
|
|
5841
|
+
let re;
|
|
5842
|
+
var G = child(ne);
|
|
5843
|
+
remove_input_defaults(G), set_attribute(G, "tabindex", -1);
|
|
5844
|
+
var be = sibling(G, 2);
|
|
5845
|
+
attribute_effect(be, () => ({
|
|
5846
|
+
class: "box",
|
|
5847
|
+
role: "checkbox",
|
|
5848
|
+
tabindex: a() ? -1 : 0,
|
|
5849
|
+
"aria-checked": o() ? "mixed" : i(),
|
|
5850
|
+
"aria-disabled": a(),
|
|
5851
|
+
"aria-controls": p() ?? null,
|
|
5852
|
+
"aria-label": n().length === 0 ? h() ?? null : null,
|
|
5853
|
+
onkeydown: R,
|
|
5854
|
+
"data-pw": typeof s() == "string" ? `${s()}-box` : null,
|
|
5855
|
+
testID: typeof s() == "string" ? `${s()}-box` : null,
|
|
5856
|
+
...C(),
|
|
5857
|
+
[CLASS]: {
|
|
5858
|
+
checked: i(),
|
|
5859
|
+
indeterminate: o()
|
|
5860
|
+
}
|
|
5861
|
+
}), void 0, void 0, void 0, "svelte-f1in4m");
|
|
5862
|
+
var Me = child(be), Re = (e) => {
|
|
5829
5863
|
var t = comment(), n = first_child(t), i = (e) => {
|
|
5830
5864
|
var t = comment();
|
|
5831
5865
|
snippet(first_child(t), c), append(e, t);
|
|
@@ -5837,10 +5871,10 @@ function Checkbox(e, t) {
|
|
|
5837
5871
|
typeof c() == "function" ? e(i) : e(a, -1);
|
|
5838
5872
|
}), append(e, t);
|
|
5839
5873
|
};
|
|
5840
|
-
if_block(
|
|
5841
|
-
i() && !o() && e(
|
|
5874
|
+
if_block(Me, (e) => {
|
|
5875
|
+
i() && !o() && e(Re);
|
|
5842
5876
|
});
|
|
5843
|
-
var
|
|
5877
|
+
var Ue = sibling(Me, 2), it = (e) => {
|
|
5844
5878
|
var t = comment(), n = first_child(t), i = (e) => {
|
|
5845
5879
|
var t = comment();
|
|
5846
5880
|
snippet(first_child(t), l), append(e, t);
|
|
@@ -5852,20 +5886,17 @@ function Checkbox(e, t) {
|
|
|
5852
5886
|
typeof l() == "function" ? e(i) : e(a, -1);
|
|
5853
5887
|
}), append(e, t);
|
|
5854
5888
|
};
|
|
5855
|
-
if_block(
|
|
5856
|
-
o() && e(
|
|
5857
|
-
}), reset(
|
|
5858
|
-
var
|
|
5859
|
-
return reset(
|
|
5860
|
-
|
|
5861
|
-
|
|
5862
|
-
|
|
5863
|
-
|
|
5864
|
-
|
|
5865
|
-
|
|
5866
|
-
}), delegated("click", ne, (e) => e.stopPropagation()), delegated("keydown", re, C), append(e, R), pop(k);
|
|
5867
|
-
}
|
|
5868
|
-
delegate(["click", "keydown"]), create_custom_element(Checkbox, {
|
|
5889
|
+
if_block(Ue, (e) => {
|
|
5890
|
+
o() && e(it);
|
|
5891
|
+
}), reset(be);
|
|
5892
|
+
var at = sibling(be, 2), ot = child(at, !0);
|
|
5893
|
+
return reset(at), reset(ne), template_effect(() => {
|
|
5894
|
+
re = set_class(ne, 1, `container ${f() ?? "" ?? ""}`, "svelte-f1in4m", re, { disabled: a() }), set_attribute(ne, "data-pw", s()), set_attribute(ne, "testid", s()), set_checked(G, i()), G.disabled = a(), set_attribute(G, "data-pw", typeof s() == "string" ? `${s()}-native-input` : null), set_attribute(G, "testid", typeof s() == "string" ? `${s()}-native-input` : null), set_attribute(at, "hidden", n().length === 0), set_text(ot, n());
|
|
5895
|
+
}), delegated("click", ne, (e) => {
|
|
5896
|
+
e.preventDefault(), k();
|
|
5897
|
+
}), delegated("click", G, (e) => e.stopPropagation()), append(e, ne), pop(te);
|
|
5898
|
+
}
|
|
5899
|
+
delegate(["click"]), create_custom_element(Checkbox, {
|
|
5869
5900
|
text: {},
|
|
5870
5901
|
checked: {},
|
|
5871
5902
|
disabled: {},
|
|
@@ -5876,7 +5907,9 @@ delegate(["click", "keydown"]), create_custom_element(Checkbox, {
|
|
|
5876
5907
|
onclick: {},
|
|
5877
5908
|
classes: {},
|
|
5878
5909
|
ariaControls: {},
|
|
5879
|
-
ariaLabel: {}
|
|
5910
|
+
ariaLabel: {},
|
|
5911
|
+
controlled: {},
|
|
5912
|
+
attributes: {}
|
|
5880
5913
|
}, [], [], { mode: "open" });
|
|
5881
5914
|
//#endregion
|
|
5882
5915
|
//#region src/wc/components/Checkbox.wc.svelte
|
|
@@ -5947,6 +5980,11 @@ customElements.define("sui-checkbox", create_custom_element(Checkbox_wc, {
|
|
|
5947
5980
|
attribute: "aria-controls",
|
|
5948
5981
|
type: "String"
|
|
5949
5982
|
},
|
|
5983
|
+
controlled: {
|
|
5984
|
+
reflect: !0,
|
|
5985
|
+
type: "Boolean"
|
|
5986
|
+
},
|
|
5987
|
+
attributes: { type: "Object" },
|
|
5950
5988
|
onclick: { type: "Object" }
|
|
5951
5989
|
}, ["checked-icon", "indeterminate-icon"], [], { mode: "open" }));
|
|
5952
5990
|
//#endregion
|
|
@@ -18701,9 +18739,9 @@ delegate(["click", "keydown"]), create_custom_element(BuiltinCell, {
|
|
|
18701
18739
|
}, [], [], { mode: "open" });
|
|
18702
18740
|
//#endregion
|
|
18703
18741
|
//#region src/lib/assets/sort-default.svg?raw
|
|
18704
|
-
var sort_default_default = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.64645 1.64645C5.84171 1.45118 6.15829 1.45118 6.35355 1.64645L8.85355 4.14645C9.04882 4.34171 9.04882 4.65829 8.85355 4.85355C8.65829 5.04882 8.34171 5.04882 8.14645 4.85355L6 2.70711L3.85355 4.85355C3.65829 5.04882 3.34171 5.04882 3.14645 4.85355C2.95118 4.65829 2.95118 4.34171 3.14645 4.14645L5.64645 1.64645Z\" fill=\"currentColor\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.14645 7.14645C3.34171 6.95118 3.65829 6.95118 3.85355 7.14645L6 9.29289L8.14645 7.14645C8.34171 6.95118 8.65829 6.95118 8.85355 7.14645C9.04882 7.34171 9.04882 7.65829 8.85355 7.85355L6.35355 10.3536C6.15829 10.5488 5.84171 10.5488 5.64645 10.3536L3.14645 7.85355C2.95118 7.65829 2.95118 7.34171 3.14645 7.14645Z\" fill=\"currentColor\"/>\n</svg>\n", root$28 = /* @__PURE__ */ from_html("<div class=\"table-title svelte-171ci2i\"> </div>"), root_1$24 = /* @__PURE__ */ from_html("<button class=\"table-search-clear svelte-171ci2i\" type=\"button\" aria-label=\"Clear search\"></button>"), root_2$19 = /* @__PURE__ */ from_html("<div class=\"table-search svelte-171ci2i\"><span class=\"table-search-icon svelte-171ci2i\"></span> <input class=\"table-search-input svelte-171ci2i\" type=\"search\" autocomplete=\"off\"/> <!></div>"), root_3$17 = /* @__PURE__ */ from_html("<div class=\"table-toolbar svelte-171ci2i\"><!></div>"), root_4$14 = /* @__PURE__ */ from_html("<caption class=\"sr-only svelte-171ci2i\"> </caption>"), root_5$13 = /* @__PURE__ */ from_html("<
|
|
18742
|
+
var sort_default_default = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.64645 1.64645C5.84171 1.45118 6.15829 1.45118 6.35355 1.64645L8.85355 4.14645C9.04882 4.34171 9.04882 4.65829 8.85355 4.85355C8.65829 5.04882 8.34171 5.04882 8.14645 4.85355L6 2.70711L3.85355 4.85355C3.65829 5.04882 3.34171 5.04882 3.14645 4.85355C2.95118 4.65829 2.95118 4.34171 3.14645 4.14645L5.64645 1.64645Z\" fill=\"currentColor\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.14645 7.14645C3.34171 6.95118 3.65829 6.95118 3.85355 7.14645L6 9.29289L8.14645 7.14645C8.34171 6.95118 8.65829 6.95118 8.85355 7.14645C9.04882 7.34171 9.04882 7.65829 8.85355 7.85355L6.35355 10.3536C6.15829 10.5488 5.84171 10.5488 5.64645 10.3536L3.14645 7.85355C2.95118 7.65829 2.95118 7.34171 3.14645 7.14645Z\" fill=\"currentColor\"/>\n</svg>\n", root$28 = /* @__PURE__ */ from_html("<div class=\"table-title svelte-171ci2i\"> </div>"), root_1$24 = /* @__PURE__ */ from_html("<button class=\"table-search-clear svelte-171ci2i\" type=\"button\" aria-label=\"Clear search\"></button>"), root_2$19 = /* @__PURE__ */ from_html("<div class=\"table-search svelte-171ci2i\"><span class=\"table-search-icon svelte-171ci2i\"></span> <input class=\"table-search-input svelte-171ci2i\" type=\"search\" autocomplete=\"off\"/> <!></div>"), root_3$17 = /* @__PURE__ */ from_html("<div class=\"table-toolbar svelte-171ci2i\"><!></div>"), root_4$14 = /* @__PURE__ */ from_html("<caption class=\"sr-only svelte-171ci2i\"> </caption>"), root_5$13 = /* @__PURE__ */ from_html("<th><!></th>"), root_6$13 = /* @__PURE__ */ from_html("<th></th>"), root_7$11 = /* @__PURE__ */ from_html("<th> </th>"), root_8$10 = /* @__PURE__ */ from_html("<span> </span>"), root_9$7 = /* @__PURE__ */ from_html("<span class=\"table-header-filter-icon svelte-171ci2i\"></span>"), root_10$6 = /* @__PURE__ */ from_html("<span><!></span>"), root_11$6 = /* @__PURE__ */ from_html("<span class=\"table-header-filter svelte-171ci2i\"><!></span>"), root_12$6 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-asc\"></span>"), root_13$5 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-desc\"></span>"), root_14$5 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-idle\"></span>"), root_15$5 = /* @__PURE__ */ from_html("<div class=\"sort-button svelte-171ci2i\"><!></div>"), root_16$4 = /* @__PURE__ */ from_html("<!> <span class=\"table-inline-search-clear svelte-171ci2i\"><!></span>", 1), root_17$3 = /* @__PURE__ */ from_html("<span class=\"table-inline-search-trigger svelte-171ci2i\"><!></span>"), root_18$3 = /* @__PURE__ */ from_html("<span class=\"table-header-inline-search svelte-171ci2i\"><!></span>"), root_19$3 = /* @__PURE__ */ from_html("<th><span class=\"table-header-content svelte-171ci2i\"><!> <!> <!> <!></span></th>"), root_20$2 = /* @__PURE__ */ from_html("<tr><td class=\"table-empty svelte-171ci2i\"><!></td></tr>"), root_21$2 = /* @__PURE__ */ from_html("<td class=\"table-content table-checkbox-col svelte-171ci2i\"><!></td>"), root_22$2 = /* @__PURE__ */ from_html("<td class=\"table-content table-row-number-col svelte-171ci2i\"> </td>"), root_23$2 = /* @__PURE__ */ from_html("<td><div><!></div></td>"), root_24$2 = /* @__PURE__ */ from_html("<tr><!><!><!></tr>"), root_25$1 = /* @__PURE__ */ from_html("<div class=\"table-footer svelte-171ci2i\"><!></div>"), root_26$1 = /* @__PURE__ */ from_html("<span class=\"table-paginator-size svelte-171ci2i\"><!></span>"), root_27 = /* @__PURE__ */ from_html("<span class=\"table-paginator-controls svelte-171ci2i\"><!> <!></span>"), root_28 = /* @__PURE__ */ from_html("<div class=\"table-footer table-paginator svelte-171ci2i\"><span class=\"table-paginator-range svelte-171ci2i\"> </span> <!></div>"), root_29 = /* @__PURE__ */ from_html("<div><div><div class=\"table-scroll svelte-171ci2i\"><table class=\"svelte-171ci2i\"><!><thead><tr><!><!><!></tr></thead><tbody><!></tbody></table></div></div> <!></div>"), root_30 = /* @__PURE__ */ from_html("<!> <!> <!> <!>", 1), $$css$29 = {
|
|
18705
18743
|
hash: "svelte-171ci2i",
|
|
18706
|
-
code: "\n /* ── Title ─────────────────────────────────────────────────────────────── */.table-title.svelte-171ci2i {margin:var(--table-title-margin, 0px 0px 12px 0px);font-size:var(--table-title-font-size, var(--table-tile-font-size, 18px));font-weight:var(--table-title-font-weight, 600);color:var(--table-title-color, #111827);font-family:var(--table-title-font-family);padding:var(--table-title-padding);}\n\n /* ── C2-3 Search bar ────────────────────────────────────────────────────── */.table-search.svelte-171ci2i {display:flex;align-items:center;gap:var(--table-search-gap, 8px);padding:var(--table-search-padding, 8px 12px);border:var(--table-search-border, 1px solid #e5e7eb);border-radius:var(--table-search-border-radius, var(--radius, 4px));background-color:var(--table-search-background, #ffffff);margin-bottom:var(--table-search-margin-bottom, 8px);}.table-search-icon.svelte-171ci2i {display:inline-flex;align-items:center;color:var(--table-search-icon-color, #9ca3af);flex-shrink:0;}.table-search-icon.svelte-171ci2i svg {width:var(--table-search-icon-size, 16px);height:var(--table-search-icon-size, 16px);}.table-search-input.svelte-171ci2i {flex:1;border:none;outline:none;background:transparent;font-size:var(--table-search-font-size, 14px);color:var(--table-search-color, #111827);min-width:0;}.table-search-input.svelte-171ci2i:focus-visible {outline:2px solid var(--table-focus-outline-color, #3b82f6);outline-offset:2px;border-radius:var(--table-search-focus-border-radius, var(--radius, 4px));}.table-search-input.svelte-171ci2i::placeholder {color:var(--table-search-placeholder-color, #9ca3af);}\n\n /* Hide browser-default clear button on search inputs */.table-search-input.svelte-171ci2i::-webkit-search-cancel-button {display:none;}.table-search-clear.svelte-171ci2i {display:inline-flex;align-items:center;padding:2px;border:none;background:transparent;color:var(--table-search-clear-color, #6b7280);cursor:pointer;border-radius:4px;flex-shrink:0;}.table-search-clear.svelte-171ci2i:hover {color:var(--table-search-clear-hover-color, #111827);background-color:var(--table-search-clear-hover-background, rgba(0, 0, 0, 0.05));}.table-search-clear.svelte-171ci2i svg {width:var(--table-search-clear-icon-size, 14px);height:var(--table-search-clear-icon-size, 14px);}.table-header-inline-search.svelte-171ci2i {display:inline-flex;align-items:center;gap:var(--table-inline-search-gap, 6px);margin-left:auto;}.table-inline-search-trigger.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: var(--table-inline-search-trigger-padding, 4px);--button-text-color: var(--table-inline-search-icon-color, #9ca3af);}.table-inline-search-trigger.svelte-171ci2i svg {width:var(--table-inline-search-icon-size, 16px);height:var(--table-inline-search-icon-size, 16px);display:block;}.table-inline-search-input.svelte-171ci2i {--input-margin: 0;width:var(--table-inline-search-input-width, 160px);}.table-inline-search-clear.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: var(--table-inline-search-clear-padding, 2px);--button-text-color: var(--table-inline-search-clear-color, #6b7280);}.table-inline-search-clear.svelte-171ci2i svg {width:var(--table-inline-search-clear-icon-size, 14px);height:var(--table-inline-search-clear-icon-size, 14px);}\n\n /* ── Container ──────────────────────────────────────────────────────────── */.table-container.svelte-171ci2i {border:var(--table-border, 1px solid #e5e7eb);border-radius:var(--table-border-radius, var(--radius, 4px));width:var(--table-container-width, 100%);overflow:hidden;}.scrollable-table.svelte-171ci2i {height:var(--table-container-height, 143px);overflow-y:auto;}.table-scroll-shell.svelte-171ci2i {position:relative;min-width:0;}\n\n /* Edge scrims: fade the clipped side of the table into its background so\n hidden columns read as \"more content this way\". Class-driven from live\n scroll state — never shown when the table fits. pointer-events: none\n keeps cells under the fade clickable; z-index 2 paints above sticky\n headers (z-index 1). */.table-scroll-shell.svelte-171ci2i::before,\n .table-scroll-shell.svelte-171ci2i::after {content:'';position:absolute;top:0;bottom:0;width:var(--table-scroll-scrim-width, 32px);opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:2;}.table-scroll-shell.svelte-171ci2i::before {left:0;border-radius:var(--table-border-radius, var(--radius, 4px)) 0 0\n var(--table-border-radius, var(--radius, 4px));background:linear-gradient(to right, var(--table-scroll-scrim-color, #ffffff), transparent);}.table-scroll-shell.svelte-171ci2i::after {right:0;border-radius:0 var(--table-border-radius, var(--radius, 4px))\n var(--table-border-radius, var(--radius, 4px)) 0;background:linear-gradient(to left, var(--table-scroll-scrim-color, #ffffff), transparent);}.table-scroll-shell.scrollable-left.svelte-171ci2i::before {opacity:1;}.table-scroll-shell.scrollable-right.svelte-171ci2i::after {opacity:1;}.table-scroll.svelte-171ci2i {overflow-x:auto;min-width:0;scrollbar-width:thin;}table.svelte-171ci2i {width:var(--table-width, 100%);border-collapse:var(--table-border-collapse, collapse);}.table-header.svelte-171ci2i,\n .table-content.svelte-171ci2i {border:var(--table-inner-border, none);padding:var(--table-padding, 12px 16px);text-align:var(--table-text-align, left);width:var(--table-column-width);\n /* Wrap at word boundaries; only a single word wider than the column may\n split as a last resort. break-word (not anywhere) keeps each column's\n min-content width at its longest word, so ordinary labels never split\n mid-word — the old break-all default did. Opt back in per consumer via\n --table-word-break / --table-overflow-wrap. */word-break:var(--table-word-break, normal);overflow-wrap:var(--table-overflow-wrap, break-word);}.scrollable-content.svelte-171ci2i {overflow-y:auto;height:var(--scrollable-column-height, 20px);}.table-header.svelte-171ci2i {background-color:var(--table-header-background, var(--table-header-border-bgcolor, #f9fafb));font-size:var(--table-header-font-size, 13px);font-family:var(--table-header-font-family);font-weight:var(--table-header-font-weight, 600);letter-spacing:var(--table-header-letter-spacing, 0.02em);text-transform:var(--table-header-text-transform);color:var(--table-header-color, var(--table-header-font-color, #6b7280));border-bottom:var(--table-header-border, var(--table-inner-border, none));}.table-header-content.svelte-171ci2i {display:flex;align-items:center;gap:4px;justify-content:var(--table-header-justify, flex-start);}.table-header-label.svelte-171ci2i {text-decoration:var(--table-header-tooltip-underline, underline dotted);text-underline-offset:2px;cursor:help;}.table-header-label-plain.svelte-171ci2i {text-decoration:none;}.table-header-filter.svelte-171ci2i {display:inline-flex;align-items:center;}.table-header-filter-trigger.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: 2px;--button-margin: 0;--button-width: fit-content;--button-height: fit-content;--button-text-color: var(--table-sort-button-color, inherit);--button-border-radius: 4px;--button-hover-color: var(--table-sort-button-hover-background, rgba(0, 0, 0, 0.05));display:inline-flex;align-items:center;opacity:var(--table-sort-idle-opacity, 0.5);}.table-header-filter-trigger.svelte-171ci2i:hover {opacity:var(--table-sort-idle-hover-opacity, 0.85);}.table-header-filter-active.svelte-171ci2i {opacity:1;color:var(--table-filter-active-color, #2563eb);}.table-header-filter-icon.svelte-171ci2i svg {width:var(--table-sort-icon-size, 14px);height:var(--table-sort-icon-size, 14px);display:block;}.table-cell-clamp.svelte-171ci2i {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.table-header-sticky.svelte-171ci2i {position:sticky;top:var(--table-header-sticky-top, 0);z-index:1;}.table-content.svelte-171ci2i {background-color:var(--table-content-background, var(--table-content-border-bgcolor));font-size:var(--table-content-font-size, 14px);font-family:var(--table-content-font-family);color:var(--table-content-color, var(--table-content-font-color, #111827));}\n\n /* Column highlight (TableColumn.highlighted). Row hover keeps higher\n specificity and row selection is declared later at equal specificity, so\n both row states paint over the column wash. */.table-header.table-col-highlighted.svelte-171ci2i {background-color:var(\n --table-col-highlight-header-background,\n var(--table-col-highlight-background, #f3f9ff)\n );}.table-content.table-col-highlighted.svelte-171ci2i {background-color:var(--table-col-highlight-background, #f3f9ff);}.table-row.svelte-171ci2i {border-bottom:var(--table-row-border, 1px solid #f3f4f6);background-color:var(--table-row-background);}.table-row.svelte-171ci2i:last-child {border-bottom:var(--table-row-last-border, none);}.table-row.svelte-171ci2i:nth-child(even) {background-color:var(--table-row-alt-background, var(--table-row-background));}.table-row.svelte-171ci2i:hover {background-color:var(--table-row-hover-background);}.table-row.svelte-171ci2i:hover > .table-content:where(.svelte-171ci2i) {background-color:var(\n --table-row-hover-background,\n var(--table-content-background, var(--table-content-border-bgcolor))\n );}.table-row-clickable.svelte-171ci2i {cursor:pointer;}.table-row-clickable.svelte-171ci2i:focus-visible {outline:2px solid var(--table-focus-outline-color, #3b82f6);outline-offset:-2px;}\n\n /* C2-1: Selected row highlight */.table-row-selected.svelte-171ci2i {background-color:var(--table-row-selected-background, #eff6ff);}.table-row-selected.svelte-171ci2i > .table-content:where(.svelte-171ci2i) {background-color:var(--table-row-selected-background, #eff6ff);}\n\n /* Summary/period-total row (summaryRowIndex): both the row and its cells,\n since a themed --table-content-background would otherwise paint over a\n row-level background. Falls back to the regular cell background. */.table-summary-row.svelte-171ci2i {background-color:var(--table-summary-row-background, var(--table-content-background));}.table-summary-row.svelte-171ci2i > .table-content:where(.svelte-171ci2i) {background-color:var(--table-summary-row-background, var(--table-content-background));}\n\n /* ── C2-1 Checkbox column ───────────────────────────────────────────────── */.table-checkbox-col.svelte-171ci2i {width:var(--table-checkbox-col-width, 44px);padding:var(--table-checkbox-col-padding, 12px 12px);}.table-checkbox-box.svelte-171ci2i {display:inline-flex;align-items:center;justify-content:center;width:var(--table-checkbox-size, 18px);height:var(--table-checkbox-size, 18px);border:var(--table-checkbox-border, 2px solid #9ca3af);border-radius:var(--table-checkbox-border-radius, var(--radius, 4px));background-color:var(--table-checkbox-background, transparent);cursor:pointer;flex-shrink:0;transition:background-color 0.15s,\n border-color 0.15s;user-select:none;}.table-checkbox-box.svelte-171ci2i:focus-visible {outline:none;box-shadow:var(--table-checkbox-focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.3));}.table-checkbox-box.svelte-171ci2i:not(.disabled):hover {border-color:var(--table-checkbox-hover-border-color, #6b7280);}.table-checkbox-box.checked.svelte-171ci2i {background-color:var(--table-checkbox-checked-background, #2563eb);border-color:var(--table-checkbox-checked-border-color, #2563eb);}.table-checkbox-box.indeterminate.svelte-171ci2i {background-color:var(--table-checkbox-indeterminate-background, #2563eb);border-color:var(--table-checkbox-indeterminate-border-color, #2563eb);}.table-checkbox-box.disabled.svelte-171ci2i {opacity:var(--table-checkbox-disabled-opacity, 0.4);cursor:not-allowed;}.table-checkbox-icon.svelte-171ci2i {display:inline-flex;align-items:center;justify-content:center;width:var(--table-checkbox-icon-size, 12px);height:var(--table-checkbox-icon-size, 12px);color:var(--table-checkbox-icon-color, #ffffff);}.table-checkbox-icon.svelte-171ci2i svg {width:100%;height:100%;}\n\n /* ── Sort button ────────────────────────────────────────────────────────── */.sort-button.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: 2px;--button-margin: 0;--button-text-color: var(--table-sort-button-color, inherit);--button-border-radius: 4px;--button-width: fit-content;--button-height: fit-content;--button-hover-color: var(--table-sort-button-hover-background, rgba(0, 0, 0, 0.05));--button-hover-text-color: var(\n --table-sort-button-hover-color,\n var(--table-sort-button-color, inherit)\n );display:inline-flex;align-items:center;line-height:1;}.sort-button.svelte-171ci2i .sort-icon {display:inline-flex;align-items:center;}\n\n /* The sorted-direction half paints via currentColor; without an explicit\n color it inherits the Button's text color (white on the default button\n theme), which disappears on light headers. Default to the design\n system's active blue. */.sort-button.svelte-171ci2i .sort-icon:not(.sort-icon-idle) {color:var(--table-sort-active-color, #1b85ff);}.sort-button.svelte-171ci2i .sort-icon svg {width:var(--table-sort-icon-size, 14px);height:var(--table-sort-icon-size, 14px);display:block;}\n\n /* Two-tone state painting. The shared sort-default.svg asset stays\n color-agnostic (fill=\"currentColor\", like every other icon asset); the\n state colors live here. All halves default to the inactive fill, then\n the sorted direction's half is released back to currentColor (the\n active color above). Path order in the asset is up-chevron first,\n down-chevron second. */.sort-button.svelte-171ci2i .sort-icon svg path {fill:var(--table-sort-inactive-color, #c7c7c7);}.sort-button.svelte-171ci2i .sort-icon-asc svg path:first-child,\n .sort-button.svelte-171ci2i .sort-icon-desc svg path:last-child {fill:currentColor;}\n\n /* The design system draws every sort state fully opaque — faintness comes\n from the glyph fills (inactive halves #C7C7C7, active direction\n currentColor), never from transparency. The opacity vars remain for\n consumers that prefer a fade but now default to solid; hover steps the\n inactive halves to the design system's hover gray. */.sort-button.svelte-171ci2i .sort-icon-idle {opacity:var(--table-sort-idle-opacity, 1);}.sort-button.svelte-171ci2i:hover .sort-icon-idle {opacity:var(--table-sort-idle-hover-opacity, 1);--table-sort-inactive-color: var(--table-sort-hover-color, #797979);}\n\n /* ── Empty ──────────────────────────────────────────────────────────────── */.table-empty.svelte-171ci2i {padding:var(--table-empty-padding, 32px 24px);text-align:center;color:var(--table-empty-color, #9ca3af);}\n\n /* ── Footer ─────────────────────────────────────────────────────────────── */.table-footer.svelte-171ci2i {border-top:var(--table-footer-border, 1px solid #e5e7eb);padding:var(--table-footer-padding, 8px 16px);background-color:var(--table-footer-background, transparent);}.table-paginator.svelte-171ci2i {display:flex;align-items:center;justify-content:space-between;gap:var(--table-paginator-gap, 12px);flex-wrap:wrap;}.table-paginator-range.svelte-171ci2i {font-size:var(--table-paginator-range-font-size, 13px);color:var(--table-paginator-range-color, #6b7280);font-variant-numeric:tabular-nums;}.table-paginator-controls.svelte-171ci2i {display:flex;align-items:center;gap:var(--table-paginator-gap, 12px);}.table-paginator-size.svelte-171ci2i {display:inline-flex;min-width:var(--table-paginator-size-width, 72px);}\n\n /* ── Toolbar (bulk actions) ─────────────────────────────────────────────── */.table-toolbar.svelte-171ci2i {display:flex;align-items:center;gap:var(--table-toolbar-gap, 12px);padding:var(--table-toolbar-padding, 8px 12px);border:var(--table-toolbar-border, 1px solid #e5e7eb);border-radius:var(--table-toolbar-border-radius, var(--radius, 4px));background-color:var(--table-toolbar-background, #f9fafb);margin-bottom:var(--table-toolbar-margin-bottom, 8px);}\n\n /* ── Row-number column ──────────────────────────────────────────────────── */.table-row-number-col.svelte-171ci2i {width:var(--table-row-number-col-width, 48px);color:var(--table-row-number-color, #6b7280);font-variant-numeric:tabular-nums;text-align:var(--table-row-number-align, var(--table-text-align, left));}\n\n /* ── Accessibility ──────────────────────────────────────────────────────── */.sr-only.svelte-171ci2i {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border-width:0;}"
|
|
18744
|
+
code: "\n /* ── Title ─────────────────────────────────────────────────────────────── */.table-title.svelte-171ci2i {margin:var(--table-title-margin, 0px 0px 12px 0px);font-size:var(--table-title-font-size, var(--table-tile-font-size, 18px));font-weight:var(--table-title-font-weight, 600);color:var(--table-title-color, #111827);font-family:var(--table-title-font-family);padding:var(--table-title-padding);}\n\n /* ── C2-3 Search bar ────────────────────────────────────────────────────── */.table-search.svelte-171ci2i {display:flex;align-items:center;gap:var(--table-search-gap, 8px);padding:var(--table-search-padding, 8px 12px);border:var(--table-search-border, 1px solid #e5e7eb);border-radius:var(--table-search-border-radius, var(--radius, 4px));background-color:var(--table-search-background, #ffffff);margin-bottom:var(--table-search-margin-bottom, 8px);}.table-search-icon.svelte-171ci2i {display:inline-flex;align-items:center;color:var(--table-search-icon-color, #9ca3af);flex-shrink:0;}.table-search-icon.svelte-171ci2i svg {width:var(--table-search-icon-size, 16px);height:var(--table-search-icon-size, 16px);}.table-search-input.svelte-171ci2i {flex:1;border:none;outline:none;background:transparent;font-size:var(--table-search-font-size, 14px);color:var(--table-search-color, #111827);min-width:0;}.table-search-input.svelte-171ci2i:focus-visible {outline:2px solid var(--table-focus-outline-color, #3b82f6);outline-offset:2px;border-radius:var(--table-search-focus-border-radius, var(--radius, 4px));}.table-search-input.svelte-171ci2i::placeholder {color:var(--table-search-placeholder-color, #9ca3af);}\n\n /* Hide browser-default clear button on search inputs */.table-search-input.svelte-171ci2i::-webkit-search-cancel-button {display:none;}.table-search-clear.svelte-171ci2i {display:inline-flex;align-items:center;padding:2px;border:none;background:transparent;color:var(--table-search-clear-color, #6b7280);cursor:pointer;border-radius:4px;flex-shrink:0;}.table-search-clear.svelte-171ci2i:hover {color:var(--table-search-clear-hover-color, #111827);background-color:var(--table-search-clear-hover-background, rgba(0, 0, 0, 0.05));}.table-search-clear.svelte-171ci2i svg {width:var(--table-search-clear-icon-size, 14px);height:var(--table-search-clear-icon-size, 14px);}.table-header-inline-search.svelte-171ci2i {display:inline-flex;align-items:center;gap:var(--table-inline-search-gap, 6px);margin-left:auto;}.table-inline-search-trigger.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: var(--table-inline-search-trigger-padding, 4px);--button-text-color: var(--table-inline-search-icon-color, #9ca3af);}.table-inline-search-trigger.svelte-171ci2i svg {width:var(--table-inline-search-icon-size, 16px);height:var(--table-inline-search-icon-size, 16px);display:block;}.table-inline-search-input.svelte-171ci2i {--input-margin: 0;width:var(--table-inline-search-input-width, 160px);}.table-inline-search-clear.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: var(--table-inline-search-clear-padding, 2px);--button-text-color: var(--table-inline-search-clear-color, #6b7280);}.table-inline-search-clear.svelte-171ci2i svg {width:var(--table-inline-search-clear-icon-size, 14px);height:var(--table-inline-search-clear-icon-size, 14px);}\n\n /* ── Container ──────────────────────────────────────────────────────────── */.table-container.svelte-171ci2i {border:var(--table-border, 1px solid #e5e7eb);border-radius:var(--table-border-radius, var(--radius, 4px));width:var(--table-container-width, 100%);overflow:hidden;}.scrollable-table.svelte-171ci2i {height:var(--table-container-height, 143px);overflow-y:auto;}.table-scroll-shell.svelte-171ci2i {position:relative;min-width:0;}\n\n /* Edge scrims: fade the clipped side of the table into its background so\n hidden columns read as \"more content this way\". Class-driven from live\n scroll state — never shown when the table fits. pointer-events: none\n keeps cells under the fade clickable; z-index 2 paints above sticky\n headers (z-index 1). */.table-scroll-shell.svelte-171ci2i::before,\n .table-scroll-shell.svelte-171ci2i::after {content:'';position:absolute;top:0;bottom:0;width:var(--table-scroll-scrim-width, 32px);opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:2;}.table-scroll-shell.svelte-171ci2i::before {left:0;border-radius:var(--table-border-radius, var(--radius, 4px)) 0 0\n var(--table-border-radius, var(--radius, 4px));background:linear-gradient(to right, var(--table-scroll-scrim-color, #ffffff), transparent);}.table-scroll-shell.svelte-171ci2i::after {right:0;border-radius:0 var(--table-border-radius, var(--radius, 4px))\n var(--table-border-radius, var(--radius, 4px)) 0;background:linear-gradient(to left, var(--table-scroll-scrim-color, #ffffff), transparent);}.table-scroll-shell.scrollable-left.svelte-171ci2i::before {opacity:1;}.table-scroll-shell.scrollable-right.svelte-171ci2i::after {opacity:1;}.table-scroll.svelte-171ci2i {overflow-x:auto;min-width:0;scrollbar-width:thin;}table.svelte-171ci2i {width:var(--table-width, 100%);border-collapse:var(--table-border-collapse, collapse);}.table-header.svelte-171ci2i,\n .table-content.svelte-171ci2i {border:var(--table-inner-border, none);padding:var(--table-padding, 12px 16px);text-align:var(--table-text-align, left);width:var(--table-column-width);\n /* Wrap at word boundaries; only a single word wider than the column may\n split as a last resort. break-word (not anywhere) keeps each column's\n min-content width at its longest word, so ordinary labels never split\n mid-word — the old break-all default did. Opt back in per consumer via\n --table-word-break / --table-overflow-wrap. */word-break:var(--table-word-break, normal);overflow-wrap:var(--table-overflow-wrap, break-word);}.scrollable-content.svelte-171ci2i {overflow-y:auto;height:var(--scrollable-column-height, 20px);}.table-header.svelte-171ci2i {background-color:var(--table-header-background, var(--table-header-border-bgcolor, #f9fafb));font-size:var(--table-header-font-size, 13px);font-family:var(--table-header-font-family);font-weight:var(--table-header-font-weight, 600);letter-spacing:var(--table-header-letter-spacing, 0.02em);text-transform:var(--table-header-text-transform);color:var(--table-header-color, var(--table-header-font-color, #6b7280));border-bottom:var(--table-header-border, var(--table-inner-border, none));}.table-header-content.svelte-171ci2i {display:flex;align-items:center;gap:4px;justify-content:var(--table-header-justify, flex-start);}.table-header-label.svelte-171ci2i {text-decoration:var(--table-header-tooltip-underline, underline dotted);text-underline-offset:2px;cursor:help;}.table-header-label-plain.svelte-171ci2i {text-decoration:none;}.table-header-filter.svelte-171ci2i {display:inline-flex;align-items:center;}.table-header-filter-trigger.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: 2px;--button-margin: 0;--button-width: fit-content;--button-height: fit-content;--button-text-color: var(--table-sort-button-color, inherit);--button-border-radius: 4px;--button-hover-color: var(--table-sort-button-hover-background, rgba(0, 0, 0, 0.05));display:inline-flex;align-items:center;opacity:var(--table-sort-idle-opacity, 0.5);}.table-header-filter-trigger.svelte-171ci2i:hover {opacity:var(--table-sort-idle-hover-opacity, 0.85);}.table-header-filter-active.svelte-171ci2i {opacity:1;color:var(--table-filter-active-color, #2563eb);}.table-header-filter-icon.svelte-171ci2i svg {width:var(--table-sort-icon-size, 14px);height:var(--table-sort-icon-size, 14px);display:block;}.table-cell-clamp.svelte-171ci2i {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.table-header-sticky.svelte-171ci2i {position:sticky;top:var(--table-header-sticky-top, 0);z-index:1;}.table-content.svelte-171ci2i {background-color:var(--table-content-background, var(--table-content-border-bgcolor));font-size:var(--table-content-font-size, 14px);font-family:var(--table-content-font-family);color:var(--table-content-color, var(--table-content-font-color, #111827));}\n\n /* Column highlight (TableColumn.highlighted). Row hover keeps higher\n specificity and row selection is declared later at equal specificity, so\n both row states paint over the column wash. */.table-header.table-col-highlighted.svelte-171ci2i {background-color:var(\n --table-col-highlight-header-background,\n var(--table-col-highlight-background, #f3f9ff)\n );}.table-content.table-col-highlighted.svelte-171ci2i {background-color:var(--table-col-highlight-background, #f3f9ff);}.table-row.svelte-171ci2i {border-bottom:var(--table-row-border, 1px solid #f3f4f6);background-color:var(--table-row-background);}.table-row.svelte-171ci2i:last-child {border-bottom:var(--table-row-last-border, none);}.table-row.svelte-171ci2i:nth-child(even) {background-color:var(--table-row-alt-background, var(--table-row-background));}.table-row.svelte-171ci2i:hover {background-color:var(--table-row-hover-background);}.table-row.svelte-171ci2i:hover > .table-content:where(.svelte-171ci2i) {background-color:var(\n --table-row-hover-background,\n var(--table-content-background, var(--table-content-border-bgcolor))\n );}.table-row-clickable.svelte-171ci2i {cursor:pointer;}.table-row-clickable.svelte-171ci2i:focus-visible {outline:2px solid var(--table-focus-outline-color, #3b82f6);outline-offset:-2px;}\n\n /* C2-1: Selected row highlight */.table-row-selected.svelte-171ci2i {background-color:var(--table-row-selected-background, #eff6ff);}.table-row-selected.svelte-171ci2i > .table-content:where(.svelte-171ci2i) {background-color:var(--table-row-selected-background, #eff6ff);}\n\n /* Summary/period-total row (summaryRowIndex): both the row and its cells,\n since a themed --table-content-background would otherwise paint over a\n row-level background. Falls back to the regular cell background. */.table-summary-row.svelte-171ci2i {background-color:var(--table-summary-row-background, var(--table-content-background));}.table-summary-row.svelte-171ci2i > .table-content:where(.svelte-171ci2i) {background-color:var(--table-summary-row-background, var(--table-content-background));}\n\n /* ── C2-1 Checkbox column ───────────────────────────────────────────────── */\n /* The column renders the library Checkbox. The table's own --table-checkbox-*\n tokens stay the public API and are bridged onto Checkbox's --checkbox-*\n variables here, so a consumer theming the table keeps working and a\n consumer theming Checkbox app-wide is overridden only inside the table. */.table-checkbox-col.svelte-171ci2i {width:var(--table-checkbox-col-width, 44px);padding:var(--table-checkbox-col-padding, 12px 12px);--checkbox-container-gap: 0;--checkbox-size: var(--table-checkbox-size, 18px);--checkbox-border: var(--table-checkbox-border, 2px solid #9ca3af);--checkbox-border-radius: var(--table-checkbox-border-radius, var(--radius, 4px));--checkbox-background: var(--table-checkbox-background, transparent);--checkbox-hover-border-color: var(--table-checkbox-hover-border-color, #6b7280);--checkbox-checked-background: var(--table-checkbox-checked-background, #2563eb);--checkbox-checked-border: var(\n --table-checkbox-checked-border,\n 2px solid var(--table-checkbox-checked-border-color, #2563eb)\n );--checkbox-indeterminate-background: var(--table-checkbox-indeterminate-background, #2563eb);--checkbox-indeterminate-border: var(\n --table-checkbox-indeterminate-border,\n 2px solid var(--table-checkbox-indeterminate-border-color, #2563eb)\n );--checkbox-disabled-opacity: var(--table-checkbox-disabled-opacity, 0.4);--checkbox-focus-ring: var(--table-checkbox-focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.3));--checkbox-icon-size: var(--table-checkbox-icon-size, 12px);--checkbox-checkmark-color: var(--table-checkbox-icon-color, #ffffff);--checkbox-dash-color: var(--table-checkbox-icon-color, #ffffff);--checkbox-transition: 0.15s;}\n\n /* ── Sort button ────────────────────────────────────────────────────────── */.sort-button.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: 2px;--button-margin: 0;--button-text-color: var(--table-sort-button-color, inherit);--button-border-radius: 4px;--button-width: fit-content;--button-height: fit-content;--button-hover-color: var(--table-sort-button-hover-background, rgba(0, 0, 0, 0.05));--button-hover-text-color: var(\n --table-sort-button-hover-color,\n var(--table-sort-button-color, inherit)\n );display:inline-flex;align-items:center;line-height:1;}.sort-button.svelte-171ci2i .sort-icon {display:inline-flex;align-items:center;}\n\n /* The sorted-direction half paints via currentColor; without an explicit\n color it inherits the Button's text color (white on the default button\n theme), which disappears on light headers. Default to the design\n system's active blue. */.sort-button.svelte-171ci2i .sort-icon:not(.sort-icon-idle) {color:var(--table-sort-active-color, #1b85ff);}.sort-button.svelte-171ci2i .sort-icon svg {width:var(--table-sort-icon-size, 14px);height:var(--table-sort-icon-size, 14px);display:block;}\n\n /* Two-tone state painting. The shared sort-default.svg asset stays\n color-agnostic (fill=\"currentColor\", like every other icon asset); the\n state colors live here. All halves default to the inactive fill, then\n the sorted direction's half is released back to currentColor (the\n active color above). Path order in the asset is up-chevron first,\n down-chevron second. */.sort-button.svelte-171ci2i .sort-icon svg path {fill:var(--table-sort-inactive-color, #c7c7c7);}.sort-button.svelte-171ci2i .sort-icon-asc svg path:first-child,\n .sort-button.svelte-171ci2i .sort-icon-desc svg path:last-child {fill:currentColor;}\n\n /* The design system draws every sort state fully opaque — faintness comes\n from the glyph fills (inactive halves #C7C7C7, active direction\n currentColor), never from transparency. The opacity vars remain for\n consumers that prefer a fade but now default to solid; hover steps the\n inactive halves to the design system's hover gray. */.sort-button.svelte-171ci2i .sort-icon-idle {opacity:var(--table-sort-idle-opacity, 1);}.sort-button.svelte-171ci2i:hover .sort-icon-idle {opacity:var(--table-sort-idle-hover-opacity, 1);--table-sort-inactive-color: var(--table-sort-hover-color, #797979);}\n\n /* ── Empty ──────────────────────────────────────────────────────────────── */.table-empty.svelte-171ci2i {padding:var(--table-empty-padding, 32px 24px);text-align:center;color:var(--table-empty-color, #9ca3af);}\n\n /* ── Footer ─────────────────────────────────────────────────────────────── */.table-footer.svelte-171ci2i {border-top:var(--table-footer-border, 1px solid #e5e7eb);padding:var(--table-footer-padding, 8px 16px);background-color:var(--table-footer-background, transparent);}.table-paginator.svelte-171ci2i {display:flex;align-items:center;justify-content:space-between;gap:var(--table-paginator-gap, 12px);flex-wrap:wrap;}.table-paginator-range.svelte-171ci2i {font-size:var(--table-paginator-range-font-size, 13px);color:var(--table-paginator-range-color, #6b7280);font-variant-numeric:tabular-nums;}.table-paginator-controls.svelte-171ci2i {display:flex;align-items:center;gap:var(--table-paginator-gap, 12px);}.table-paginator-size.svelte-171ci2i {display:inline-flex;min-width:var(--table-paginator-size-width, 72px);}\n\n /* ── Toolbar (bulk actions) ─────────────────────────────────────────────── */.table-toolbar.svelte-171ci2i {display:flex;align-items:center;gap:var(--table-toolbar-gap, 12px);padding:var(--table-toolbar-padding, 8px 12px);border:var(--table-toolbar-border, 1px solid #e5e7eb);border-radius:var(--table-toolbar-border-radius, var(--radius, 4px));background-color:var(--table-toolbar-background, #f9fafb);margin-bottom:var(--table-toolbar-margin-bottom, 8px);}\n\n /* ── Row-number column ──────────────────────────────────────────────────── */.table-row-number-col.svelte-171ci2i {width:var(--table-row-number-col-width, 48px);color:var(--table-row-number-color, #6b7280);font-variant-numeric:tabular-nums;text-align:var(--table-row-number-align, var(--table-text-align, left));}\n\n /* ── Accessibility ──────────────────────────────────────────────────────── */.sr-only.svelte-171ci2i {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border-width:0;}"
|
|
18707
18745
|
};
|
|
18708
18746
|
function Table(e, t) {
|
|
18709
18747
|
push(t, !0), append_styles$1(e, $$css$29);
|
|
@@ -18823,7 +18861,13 @@ function Table(e, t) {
|
|
|
18823
18861
|
at().onSelectionChange?.(new Set(Cn));
|
|
18824
18862
|
}
|
|
18825
18863
|
}, Pn = (e, t) => {
|
|
18826
|
-
|
|
18864
|
+
let n = t === -1 ? "select-all" : `row-checkbox-${e}`, i = t === -1 ? {} : { id: `row-checkbox-${e}` };
|
|
18865
|
+
typeof S() == "string" && (i["data-pw"] = `${S()}-${n}`, i.testID = `${S()}-${n}`);
|
|
18866
|
+
let a = at()?.getRowAttributes ? at().getRowAttributes(e, t) : {};
|
|
18867
|
+
return {
|
|
18868
|
+
...i,
|
|
18869
|
+
...a
|
|
18870
|
+
};
|
|
18827
18871
|
}, Fn = /* @__PURE__ */ user_derived(() => !!at() && at().enabled !== !1), In = /* @__PURE__ */ user_derived(() => at()?.selectionMode === "single");
|
|
18828
18872
|
var Ln = {
|
|
18829
18873
|
get tableTitle() {
|
|
@@ -19036,7 +19080,7 @@ function Table(e, t) {
|
|
|
19036
19080
|
set usePortal(e = !1) {
|
|
19037
19081
|
gt(e), flushSync();
|
|
19038
19082
|
}
|
|
19039
|
-
}, Rn =
|
|
19083
|
+
}, Rn = root_30(), zn = first_child(Rn), Bn = (e) => {
|
|
19040
19084
|
var t = root$28(), i = child(t, !0);
|
|
19041
19085
|
reset(t), template_effect(() => set_text(i, n())), append(e, t);
|
|
19042
19086
|
};
|
|
@@ -19069,7 +19113,7 @@ function Table(e, t) {
|
|
|
19069
19113
|
typeof ut() == "function" && get(Fn) && get(Tn).size > 0 && e(Wn);
|
|
19070
19114
|
});
|
|
19071
19115
|
var Gn = sibling(Un, 2), Kn = (e) => {
|
|
19072
|
-
var t =
|
|
19116
|
+
var t = root_29(), n = child(t);
|
|
19073
19117
|
let i;
|
|
19074
19118
|
var a = child(n), s = child(a), c = child(s), l = (e) => {
|
|
19075
19119
|
var t = root_4$14(), n = child(t, !0);
|
|
@@ -19079,57 +19123,52 @@ function Table(e, t) {
|
|
|
19079
19123
|
C() && e(l);
|
|
19080
19124
|
});
|
|
19081
19125
|
var u = sibling(c), f = child(u), G = child(f), be = (e) => {
|
|
19082
|
-
var t =
|
|
19126
|
+
var t = root_5$13();
|
|
19083
19127
|
let n;
|
|
19084
|
-
var i = child(t)
|
|
19085
|
-
|
|
19086
|
-
|
|
19087
|
-
|
|
19088
|
-
|
|
19089
|
-
|
|
19090
|
-
|
|
19091
|
-
|
|
19092
|
-
|
|
19093
|
-
|
|
19094
|
-
|
|
19095
|
-
|
|
19096
|
-
|
|
19097
|
-
|
|
19098
|
-
|
|
19099
|
-
|
|
19100
|
-
|
|
19101
|
-
|
|
19102
|
-
|
|
19103
|
-
|
|
19104
|
-
|
|
19105
|
-
}
|
|
19106
|
-
|
|
19107
|
-
|
|
19108
|
-
|
|
19109
|
-
if_block(o, (e) => {
|
|
19110
|
-
get(jn) === "all" ? e(s) : get(jn) === "some" && e(c, 1);
|
|
19111
|
-
}), reset(i), reset(t), template_effect(() => n = set_class(t, 1, "table-header table-checkbox-col svelte-171ci2i", null, n, { "table-header-sticky": get(At) })), append(e, t);
|
|
19112
|
-
}, ct = (e) => {
|
|
19113
|
-
var t = root_7$11();
|
|
19128
|
+
var i = child(t);
|
|
19129
|
+
{
|
|
19130
|
+
let e = /* @__PURE__ */ user_derived(() => get(jn) === "all"), t = /* @__PURE__ */ user_derived(() => get(jn) === "some"), n = /* @__PURE__ */ user_derived(() => get(An).map((e) => `row-checkbox-${e}`).join(" ")), a = /* @__PURE__ */ user_derived(() => Pn("__header__", -1));
|
|
19131
|
+
Checkbox(i, {
|
|
19132
|
+
text: "",
|
|
19133
|
+
ariaLabel: "Select all rows",
|
|
19134
|
+
controlled: !0,
|
|
19135
|
+
get checked() {
|
|
19136
|
+
return get(e);
|
|
19137
|
+
},
|
|
19138
|
+
get indeterminate() {
|
|
19139
|
+
return get(t);
|
|
19140
|
+
},
|
|
19141
|
+
get ariaControls() {
|
|
19142
|
+
return get(n);
|
|
19143
|
+
},
|
|
19144
|
+
get attributes() {
|
|
19145
|
+
return get(a);
|
|
19146
|
+
},
|
|
19147
|
+
onclick: Nn
|
|
19148
|
+
});
|
|
19149
|
+
}
|
|
19150
|
+
reset(t), template_effect(() => n = set_class(t, 1, "table-header table-checkbox-col svelte-171ci2i", null, n, { "table-header-sticky": get(At) })), append(e, t);
|
|
19151
|
+
}, at = (e) => {
|
|
19152
|
+
var t = root_6$13();
|
|
19114
19153
|
let n;
|
|
19115
19154
|
template_effect(() => n = set_class(t, 1, "table-header table-checkbox-col svelte-171ci2i", null, n, { "table-header-sticky": get(At) })), append(e, t);
|
|
19116
19155
|
};
|
|
19117
19156
|
if_block(G, (e) => {
|
|
19118
|
-
get(Fn) && !get(In) ? e(be) : get(Fn) && get(In) && e(
|
|
19157
|
+
get(Fn) && !get(In) ? e(be) : get(Fn) && get(In) && e(at, 1);
|
|
19119
19158
|
});
|
|
19120
|
-
var
|
|
19121
|
-
var t =
|
|
19159
|
+
var ct = sibling(G), ut = (e) => {
|
|
19160
|
+
var t = root_7$11();
|
|
19122
19161
|
let n;
|
|
19123
19162
|
var i = child(t, !0);
|
|
19124
19163
|
reset(t), template_effect(() => {
|
|
19125
19164
|
n = set_class(t, 1, "table-header table-row-number-col svelte-171ci2i", null, n, { "table-header-sticky": get(At) }), set_text(i, ft());
|
|
19126
19165
|
}), append(e, t);
|
|
19127
19166
|
};
|
|
19128
|
-
if_block(
|
|
19129
|
-
dt() && e(
|
|
19130
|
-
}), each(sibling(
|
|
19167
|
+
if_block(ct, (e) => {
|
|
19168
|
+
dt() && e(ut);
|
|
19169
|
+
}), each(sibling(ct), 17, () => get(vt), index, (e, t, n) => {
|
|
19131
19170
|
let i = /* @__PURE__ */ user_derived(() => o()?.[n]);
|
|
19132
|
-
var a =
|
|
19171
|
+
var a = root_19$3();
|
|
19133
19172
|
let s, c;
|
|
19134
19173
|
var l = child(a);
|
|
19135
19174
|
let u;
|
|
@@ -19146,7 +19185,7 @@ function Table(e, t) {
|
|
|
19146
19185
|
},
|
|
19147
19186
|
iconPosition: "trailing",
|
|
19148
19187
|
children: (e, n) => {
|
|
19149
|
-
var i =
|
|
19188
|
+
var i = root_8$10();
|
|
19150
19189
|
let a;
|
|
19151
19190
|
var o = child(i, !0);
|
|
19152
19191
|
reset(i), template_effect(() => {
|
|
@@ -19164,15 +19203,15 @@ function Table(e, t) {
|
|
|
19164
19203
|
});
|
|
19165
19204
|
var S = sibling(f, 2), C = (e) => {
|
|
19166
19205
|
let n = /* @__PURE__ */ user_derived(() => get(i).filter);
|
|
19167
|
-
var a =
|
|
19206
|
+
var a = root_11$6(), o = child(a);
|
|
19168
19207
|
{
|
|
19169
19208
|
let e = (e) => {
|
|
19170
|
-
var a =
|
|
19209
|
+
var a = root_10$6();
|
|
19171
19210
|
let o;
|
|
19172
19211
|
var s = child(a);
|
|
19173
19212
|
{
|
|
19174
19213
|
let e = (e) => {
|
|
19175
|
-
var t =
|
|
19214
|
+
var t = root_9$7();
|
|
19176
19215
|
html(t, () => chevron_down_sm_default, !0), reset(t), append(e, t);
|
|
19177
19216
|
}, n = /* @__PURE__ */ user_derived(() => get(i).testId && `${get(i).testId}-filter-trigger`);
|
|
19178
19217
|
Button(s, {
|
|
@@ -19213,7 +19252,7 @@ function Table(e, t) {
|
|
|
19213
19252
|
get(i)?.filter && e(C);
|
|
19214
19253
|
});
|
|
19215
19254
|
var ne = sibling(S, 2), re = (e) => {
|
|
19216
|
-
var i =
|
|
19255
|
+
var i = root_15$5();
|
|
19217
19256
|
Button(child(i), {
|
|
19218
19257
|
onclick: () => Et(n),
|
|
19219
19258
|
get ariaLabel() {
|
|
@@ -19225,7 +19264,7 @@ function Table(e, t) {
|
|
|
19225
19264
|
var t = comment();
|
|
19226
19265
|
snippet(first_child(t), k), append(e, t);
|
|
19227
19266
|
}, a = (e) => {
|
|
19228
|
-
var t =
|
|
19267
|
+
var t = root_12$6();
|
|
19229
19268
|
html(t, () => sort_default_default, !0), reset(t), append(e, t);
|
|
19230
19269
|
};
|
|
19231
19270
|
if_block(n, (e) => {
|
|
@@ -19236,7 +19275,7 @@ function Table(e, t) {
|
|
|
19236
19275
|
var t = comment();
|
|
19237
19276
|
snippet(first_child(t), R), append(e, t);
|
|
19238
19277
|
}, a = (e) => {
|
|
19239
|
-
var t =
|
|
19278
|
+
var t = root_13$5();
|
|
19240
19279
|
html(t, () => sort_default_default, !0), reset(t), append(e, t);
|
|
19241
19280
|
};
|
|
19242
19281
|
if_block(n, (e) => {
|
|
@@ -19246,7 +19285,7 @@ function Table(e, t) {
|
|
|
19246
19285
|
var t = comment();
|
|
19247
19286
|
snippet(first_child(t), te), append(e, t);
|
|
19248
19287
|
}, l = (e) => {
|
|
19249
|
-
var t =
|
|
19288
|
+
var t = root_14$5();
|
|
19250
19289
|
html(t, () => sort_default_default, !0), reset(t), append(e, t);
|
|
19251
19290
|
};
|
|
19252
19291
|
if_block(a, (e) => {
|
|
@@ -19260,8 +19299,8 @@ function Table(e, t) {
|
|
|
19260
19299
|
get(G) && e(re);
|
|
19261
19300
|
});
|
|
19262
19301
|
var be = sibling(ne, 2), Me = (e) => {
|
|
19263
|
-
var t =
|
|
19264
|
-
var t =
|
|
19302
|
+
var t = root_18$3(), n = child(t), i = (e) => {
|
|
19303
|
+
var t = root_16$4(), n = first_child(t);
|
|
19265
19304
|
{
|
|
19266
19305
|
let e = /* @__PURE__ */ user_derived(() => ot()?.placeholder ?? "Search…"), t = /* @__PURE__ */ user_derived(() => ot()?.testId ?? ""), i = /* @__PURE__ */ user_derived(() => ot()?.placeholder ?? "Search");
|
|
19267
19306
|
bind_this(Input(n, {
|
|
@@ -19297,7 +19336,7 @@ function Table(e, t) {
|
|
|
19297
19336
|
$$slots: { icon: !0 }
|
|
19298
19337
|
}), reset(i), append(e, t);
|
|
19299
19338
|
}, a = (e) => {
|
|
19300
|
-
var t =
|
|
19339
|
+
var t = root_17$3(), n = child(t);
|
|
19301
19340
|
{
|
|
19302
19341
|
let e = (e) => {
|
|
19303
19342
|
var t = comment();
|
|
@@ -19336,59 +19375,51 @@ function Table(e, t) {
|
|
|
19336
19375
|
}), u = set_style(l, "", u, { "justify-content": get(i)?.align === "right" ? "flex-end" : get(i)?.align === "center" ? "center" : null });
|
|
19337
19376
|
}), append(e, a);
|
|
19338
19377
|
}), reset(f), reset(u);
|
|
19339
|
-
var
|
|
19340
|
-
var t =
|
|
19378
|
+
var _t = sibling(u), yt = child(_t), xt = (e) => {
|
|
19379
|
+
var t = root_20$2(), n = child(t);
|
|
19341
19380
|
snippet(child(n), re), reset(n), reset(t), template_effect(() => set_attribute(n, "colspan", get(vt).length + +!!get(Fn) + +!!dt())), append(e, t);
|
|
19342
|
-
},
|
|
19381
|
+
}, Lt = (e) => {
|
|
19343
19382
|
var t = comment();
|
|
19344
19383
|
each(first_child(t), 19, () => get(pn), (e, t) => get(kn).get(e) ?? t, (e, t, n) => {
|
|
19345
19384
|
let i = /* @__PURE__ */ user_derived(() => get(n) + get(xn)), a = /* @__PURE__ */ user_derived(() => get(bt).get(get(t)) ?? get(i)), s = /* @__PURE__ */ user_derived(() => get(kn).get(get(t)) ?? String(get(i))), c = /* @__PURE__ */ user_derived(() => get(Fn) && En(get(s))), l = /* @__PURE__ */ user_derived(() => get(Fn) && Dn(get(s)));
|
|
19346
|
-
var u =
|
|
19385
|
+
var u = root_24$2();
|
|
19347
19386
|
let f;
|
|
19348
|
-
var p = child(u),
|
|
19349
|
-
var t =
|
|
19350
|
-
|
|
19351
|
-
|
|
19352
|
-
|
|
19353
|
-
|
|
19354
|
-
|
|
19355
|
-
|
|
19356
|
-
|
|
19357
|
-
|
|
19358
|
-
|
|
19359
|
-
|
|
19360
|
-
|
|
19361
|
-
|
|
19362
|
-
|
|
19363
|
-
|
|
19364
|
-
|
|
19365
|
-
|
|
19366
|
-
|
|
19367
|
-
|
|
19368
|
-
|
|
19369
|
-
|
|
19370
|
-
|
|
19371
|
-
}), [() => at()?.getRowAttributes ? at().getRowAttributes(get(s), get(i)) : {}], void 0, void 0, "svelte-171ci2i");
|
|
19372
|
-
var u = child(n), f = (e) => {
|
|
19373
|
-
var t = root_5$13();
|
|
19374
|
-
html(t, () => checkmark_default, !0), reset(t), append(e, t);
|
|
19375
|
-
};
|
|
19376
|
-
if_block(u, (e) => {
|
|
19377
|
-
get(l) && e(f);
|
|
19378
|
-
}), reset(n), reset(t), append(e, t);
|
|
19387
|
+
var p = child(u), S = (e) => {
|
|
19388
|
+
var t = root_21$2(), n = child(t);
|
|
19389
|
+
{
|
|
19390
|
+
let e = /* @__PURE__ */ user_derived(() => `Select row ${get(s) || "non-selectable"}`), t = /* @__PURE__ */ user_derived(() => Pn(get(s), get(i)));
|
|
19391
|
+
Checkbox(n, {
|
|
19392
|
+
text: "",
|
|
19393
|
+
get ariaLabel() {
|
|
19394
|
+
return get(e);
|
|
19395
|
+
},
|
|
19396
|
+
controlled: !0,
|
|
19397
|
+
get checked() {
|
|
19398
|
+
return get(l);
|
|
19399
|
+
},
|
|
19400
|
+
get disabled() {
|
|
19401
|
+
return get(c);
|
|
19402
|
+
},
|
|
19403
|
+
get attributes() {
|
|
19404
|
+
return get(t);
|
|
19405
|
+
},
|
|
19406
|
+
onclick: () => Mn(get(s))
|
|
19407
|
+
});
|
|
19408
|
+
}
|
|
19409
|
+
reset(t), delegated("click", t, (e) => e.stopPropagation()), delegated("keydown", t, (e) => e.stopPropagation()), append(e, t);
|
|
19379
19410
|
};
|
|
19380
19411
|
if_block(p, (e) => {
|
|
19381
|
-
get(Fn) && e(
|
|
19412
|
+
get(Fn) && e(S);
|
|
19382
19413
|
});
|
|
19383
|
-
var
|
|
19384
|
-
var t =
|
|
19414
|
+
var C = sibling(p), k = (e) => {
|
|
19415
|
+
var t = root_22$2(), i = child(t, !0);
|
|
19385
19416
|
reset(t), template_effect((e) => set_text(i, e), [() => bn(get(n))]), append(e, t);
|
|
19386
19417
|
};
|
|
19387
|
-
if_block(
|
|
19388
|
-
dt() && e(
|
|
19389
|
-
}), each(sibling(
|
|
19418
|
+
if_block(C, (e) => {
|
|
19419
|
+
dt() && e(k);
|
|
19420
|
+
}), each(sibling(C), 17, () => get(t), index, (e, n, s) => {
|
|
19390
19421
|
let c = /* @__PURE__ */ user_derived(() => o()?.[s]), l = /* @__PURE__ */ user_derived(() => get(St)?.get(get(t))), u = /* @__PURE__ */ user_derived(() => typeof get(n) == "string" || typeof get(n) == "number" || typeof get(n) == "boolean");
|
|
19391
|
-
var f =
|
|
19422
|
+
var f = root_23$2();
|
|
19392
19423
|
let p, S;
|
|
19393
19424
|
var C = child(f);
|
|
19394
19425
|
let k;
|
|
@@ -19446,18 +19477,18 @@ function Table(e, t) {
|
|
|
19446
19477
|
}), append(e, u);
|
|
19447
19478
|
}), append(e, t);
|
|
19448
19479
|
};
|
|
19449
|
-
if_block(
|
|
19450
|
-
get(an).length === 0 && typeof re() == "function" ? e(
|
|
19451
|
-
}), reset(
|
|
19452
|
-
var
|
|
19453
|
-
var t =
|
|
19480
|
+
if_block(yt, (e) => {
|
|
19481
|
+
get(an).length === 0 && typeof re() == "function" ? e(xt) : e(Lt, -1);
|
|
19482
|
+
}), reset(_t), reset(s), reset(a), action(a, (e) => Nt?.(e)), reset(n);
|
|
19483
|
+
var Rt = sibling(n, 2), Zt = (e) => {
|
|
19484
|
+
var t = root_25$1();
|
|
19454
19485
|
snippet(child(t), Re), reset(t), append(e, t);
|
|
19455
|
-
},
|
|
19456
|
-
var t =
|
|
19486
|
+
}, en = (e) => {
|
|
19487
|
+
var t = root_28(), n = child(t), i = child(n, !0);
|
|
19457
19488
|
reset(n);
|
|
19458
19489
|
var a = sibling(n, 2), o = (e) => {
|
|
19459
|
-
var t =
|
|
19460
|
-
var t =
|
|
19490
|
+
var t = root_27(), n = child(t), i = (e) => {
|
|
19491
|
+
var t = root_26$1(), n = child(t);
|
|
19461
19492
|
{
|
|
19462
19493
|
let e = /* @__PURE__ */ user_derived(() => get(hn).map((e) => ({
|
|
19463
19494
|
id: String(e),
|
|
@@ -19529,8 +19560,8 @@ function Table(e, t) {
|
|
|
19529
19560
|
set_attribute(t, "data-pw", lt().testId ?? null), set_attribute(t, "testid", lt().testId ?? null), set_attribute(n, "data-pw", lt().rangeTestId ?? (typeof S() == "string" ? `${S()}-paginator-range` : lt()?.testId ? `${lt().testId}-range` : null)), set_attribute(n, "testid", lt().rangeTestId ?? (typeof S() == "string" ? `${S()}-paginator-range` : lt()?.testId ? `${lt().testId}-range` : null)), set_text(i, get(mn));
|
|
19530
19561
|
}), append(e, t);
|
|
19531
19562
|
};
|
|
19532
|
-
if_block(
|
|
19533
|
-
typeof Re() == "function" ? e(
|
|
19563
|
+
if_block(Rt, (e) => {
|
|
19564
|
+
typeof Re() == "function" ? e(Zt) : lt() && (get(fn) > 1 || lt().hasMore || lt().showFooterOnSinglePage || get(gn) && get(_n)) && e(en, 1);
|
|
19534
19565
|
}), reset(t), template_effect(() => {
|
|
19535
19566
|
set_class(t, 1, `table-container ${p() ? "scrollable-table" : ""} ${Me() ?? "" ?? ""}`, "svelte-171ci2i"), set_attribute(t, "data-pw", S()), set_attribute(t, "testid", S()), i = set_class(n, 1, "table-scroll-shell svelte-171ci2i", null, i, {
|
|
19536
19567
|
"scrollable-left": get(jt),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@juspay/svelte-ui-components",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.1.1",
|
|
4
4
|
"description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"svelte",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"package": "svelte-kit sync && svelte-package && publint",
|
|
29
29
|
"prepublishOnly": "npm run build:wc && npm run build:codemod && npm run package",
|
|
30
30
|
"test": "npm run test:integration && npm run test:unit",
|
|
31
|
-
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && npm run check:wc && npm run check:codemod && npm run check:migrate && npm run check:wc-parity",
|
|
31
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && npm run check:wc && npm run check:codemod && npm run check:migrate && npm run check:release && npm run check:wc-parity",
|
|
32
32
|
"check:codemod": "tsc -p scripts/codemod/tsconfig.json",
|
|
33
33
|
"codemod": "node scripts/codemod/cli.ts",
|
|
34
34
|
"check:wc": "svelte-check --tsconfig ./tsconfig.wc.json --compiler-warnings \"options_missing_custom_element:ignore\"",
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
"test:visual:update": "scripts/visual-test.sh --update-snapshots",
|
|
43
43
|
"migrate": "node scripts/migrate/cli.ts",
|
|
44
44
|
"check:migrate": "tsc -p scripts/migrate/tsconfig.json",
|
|
45
|
+
"check:release": "tsc -p scripts/release/tsconfig.json",
|
|
45
46
|
"check:wc-parity": "tsc -p scripts/wc-parity/tsconfig.json",
|
|
46
47
|
"postinstall": "node scripts/postinstall.mjs"
|
|
47
48
|
},
|