@juspay/svelte-ui-components 4.22.0 → 4.23.0
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/Table/Table.svelte +8 -1
- package/dist-wc/index.js +1 -1
- package/package.json +1 -1
package/dist/Table/Table.svelte
CHANGED
|
@@ -1188,11 +1188,18 @@
|
|
|
1188
1188
|
}
|
|
1189
1189
|
|
|
1190
1190
|
/* ── Container ──────────────────────────────────────────────────────────── */
|
|
1191
|
+
/* `hidden` is the default because it is what clips the table's corners to
|
|
1192
|
+
this element's border-radius; without it the first and last cells square
|
|
1193
|
+
off over the rounded border. A consumer who needs the container itself to
|
|
1194
|
+
scroll sideways sets this to `auto` and accepts that trade. Note the
|
|
1195
|
+
scrollable variant below sets `overflow-y`, and per the CSS overflow spec
|
|
1196
|
+
a `visible` on one axis computes to `auto` when the other is not visible,
|
|
1197
|
+
so `visible` here does not survive on a scrollable table. */
|
|
1191
1198
|
.table-container {
|
|
1192
1199
|
border: var(--table-border, 1px solid #e5e7eb);
|
|
1193
1200
|
border-radius: var(--table-border-radius, var(--radius, 4px));
|
|
1194
1201
|
width: var(--table-container-width, 100%);
|
|
1195
|
-
overflow: hidden;
|
|
1202
|
+
overflow: var(--table-container-overflow, hidden);
|
|
1196
1203
|
}
|
|
1197
1204
|
|
|
1198
1205
|
.scrollable-table {
|
package/dist-wc/index.js
CHANGED
|
@@ -19383,7 +19383,7 @@ delegate(["click", "keydown"]), create_custom_element(BuiltinCell, {
|
|
|
19383
19383
|
//#region src/lib/assets/sort-default.svg?raw
|
|
19384
19384
|
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$31 = /* @__PURE__ */ from_html("<div class=\"table-title svelte-171ci2i\"> </div>"), root_1$28 = /* @__PURE__ */ from_html("<button class=\"table-search-clear svelte-171ci2i\" type=\"button\"></button>"), root_2$22 = /* @__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$20 = /* @__PURE__ */ from_html("<div class=\"table-toolbar svelte-171ci2i\"><!></div>"), root_4$16 = /* @__PURE__ */ from_html("<caption class=\"sr-only svelte-171ci2i\"> </caption>"), root_5$15 = /* @__PURE__ */ from_html("<th><!></th>"), root_6$14 = /* @__PURE__ */ from_html("<th></th>"), root_7$13 = /* @__PURE__ */ from_html("<th> </th>"), root_8$12 = /* @__PURE__ */ from_html("<span> </span>"), root_9$9 = /* @__PURE__ */ from_html("<span class=\"table-header-filter-icon svelte-171ci2i\"></span>"), root_10$8 = /* @__PURE__ */ from_html("<span><!></span>"), root_11$7 = /* @__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$33 = {
|
|
19385
19385
|
hash: "svelte-171ci2i",
|
|
19386
|
-
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;}"
|
|
19386
|
+
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 ──────────────────────────────────────────────────────────── */\n /* `hidden` is the default because it is what clips the table's corners to\n this element's border-radius; without it the first and last cells square\n off over the rounded border. A consumer who needs the container itself to\n scroll sideways sets this to `auto` and accepts that trade. Note the\n scrollable variant below sets `overflow-y`, and per the CSS overflow spec\n a `visible` on one axis computes to `auto` when the other is not visible,\n so `visible` here does not survive on a scrollable table. */.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:var(--table-container-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;}"
|
|
19387
19387
|
};
|
|
19388
19388
|
function Table(e, t) {
|
|
19389
19389
|
push(t, !0), append_styles$1(e, $$css$33);
|