@jsekulowicz/ds-components 0.16.0 → 0.16.2
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/custom-elements.json +23 -7
- package/dist/atoms/segmented-control/segmented-control.styles.d.ts.map +1 -1
- package/dist/atoms/segmented-control/segmented-control.styles.js +6 -0
- package/dist/atoms/segmented-control/segmented-control.styles.js.map +1 -1
- package/dist/atoms/table/table-pagination.styles.d.ts.map +1 -1
- package/dist/atoms/table/table-pagination.styles.js +10 -2
- package/dist/atoms/table/table-pagination.styles.js.map +1 -1
- package/dist/atoms/table/table-rendering.d.ts +4 -2
- package/dist/atoms/table/table-rendering.d.ts.map +1 -1
- package/dist/atoms/table/table-rendering.js +33 -9
- package/dist/atoms/table/table-rendering.js.map +1 -1
- package/dist/atoms/table/table-responsive.styles.d.ts.map +1 -1
- package/dist/atoms/table/table-responsive.styles.js +22 -10
- package/dist/atoms/table/table-responsive.styles.js.map +1 -1
- package/dist/atoms/table/table-sort-button.d.ts.map +1 -1
- package/dist/atoms/table/table-sort-button.js +0 -1
- package/dist/atoms/table/table-sort-button.js.map +1 -1
- package/dist/atoms/table/table-sort-button.styles.d.ts.map +1 -1
- package/dist/atoms/table/table-sort-button.styles.js +5 -3
- package/dist/atoms/table/table-sort-button.styles.js.map +1 -1
- package/dist/atoms/table/table.d.ts +2 -0
- package/dist/atoms/table/table.d.ts.map +1 -1
- package/dist/atoms/table/table.js +27 -14
- package/dist/atoms/table/table.js.map +1 -1
- package/dist/atoms/table/table.styles.d.ts.map +1 -1
- package/dist/atoms/table/table.styles.js +61 -1
- package/dist/atoms/table/table.styles.js.map +1 -1
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -5620,7 +5620,7 @@
|
|
|
5620
5620
|
{
|
|
5621
5621
|
"kind": "variable",
|
|
5622
5622
|
"name": "segmentedControlStyles",
|
|
5623
|
-
"default": "css` :host { display: inline-flex; flex-direction: column; gap: var(--ds-space-1); max-width: 100%; } :host([disabled]) { cursor: not-allowed; opacity: 0.6; } .group { /* Equal columns that all size to the widest segment: with a shrink-to-fit track, equal 1fr columns each resolve to the widest cell's content, so no segment ends up narrower than its label needs. When the host is given an explicit width they simply share it evenly. */ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; /* The track colour shows through the 1px padding and gaps as a hairline frame and dividers between the otherwise borderless segments. */ gap: 1px; padding: 1px; background: var(--ds-color-border-subtle); border-radius: var(--ds-radius-sm); max-width: 100%; } .segment { min-width: 0; } /* Give unselected segments a surface that's distinct from the track so each option reads as its own tile; the selected one keeps the accent fill from the primary button variant. Drop the button min-width floor so the grid drives sizing. */ .segment::part(button) { min-width: 0; border-radius: calc(var(--ds-radius-sm) - 1px); } .segment[variant='ghost']::part(button) { background: var(--ds-color-bg); } .segment[variant='ghost']::part(button):hover { background: var(--ds-color-bg-subtle); } /* Square off the inner edges so the row reads as one connected control, rounding only the outer corners of the first and last segments. */ .segment:first-child:not(:last-child)::part(button) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .segment:last-child:not(:first-child)::part(button) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .segment:not(:first-child):not(:last-child)::part(button) { border-radius: 0; } `"
|
|
5623
|
+
"default": "css` :host { display: inline-flex; flex-direction: column; gap: var(--ds-space-1); max-width: 100%; } :host([disabled]) { cursor: not-allowed; opacity: 0.6; } .group { /* Equal columns that all size to the widest segment: with a shrink-to-fit track, equal 1fr columns each resolve to the widest cell's content, so no segment ends up narrower than its label needs. When the host is given an explicit width they simply share it evenly. */ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; /* The track colour shows through the 1px padding and gaps as a hairline frame and dividers between the otherwise borderless segments. */ gap: 1px; padding: 1px; background: var(--ds-color-border-subtle); border-radius: var(--ds-radius-sm); max-width: 100%; } .segment { min-width: 0; } /* Lift the focused segment above its neighbours so the full focus ring is visible instead of being painted over by the adjacent segment. */ .segment:focus-within { position: relative; z-index: 1; } /* Give unselected segments a surface that's distinct from the track so each option reads as its own tile; the selected one keeps the accent fill from the primary button variant. Drop the button min-width floor so the grid drives sizing. */ .segment::part(button) { min-width: 0; border-radius: calc(var(--ds-radius-sm) - 1px); } .segment[variant='ghost']::part(button) { background: var(--ds-color-bg); } .segment[variant='ghost']::part(button):hover { background: var(--ds-color-bg-subtle); } /* Square off the inner edges so the row reads as one connected control, rounding only the outer corners of the first and last segments. */ .segment:first-child:not(:last-child)::part(button) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .segment:last-child:not(:first-child)::part(button) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .segment:not(:first-child):not(:last-child)::part(button) { border-radius: 0; } `"
|
|
5624
5624
|
}
|
|
5625
5625
|
],
|
|
5626
5626
|
"exports": [
|
|
@@ -7505,7 +7505,7 @@
|
|
|
7505
7505
|
{
|
|
7506
7506
|
"kind": "variable",
|
|
7507
7507
|
"name": "tablePaginationStyles",
|
|
7508
|
-
"default": "css` :host { display: flex; align-items: center; justify-content: space-between; column-gap: var(--ds-space-4); row-gap: var(--ds-space-3); flex-wrap: wrap; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } nav { display: flex; align-items: center; gap: var(--ds-space-2); } .list { display: flex; align-items: center; gap: var(--ds-space-2); list-style: none; padding: 0; margin: 0; } button { min-width: 2rem; height: 2rem; padding: 0 var(--ds-space-2); background: transparent; color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); } button:hover:not(:disabled) { background: var(--ds-color-bg-muted); } button:focus-visible { outline:
|
|
7508
|
+
"default": "css` :host { display: flex; align-items: center; justify-content: space-between; column-gap: var(--ds-space-4); row-gap: var(--ds-space-3); flex-wrap: wrap; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } nav { display: flex; align-items: center; gap: var(--ds-space-2); } .list { display: flex; align-items: center; gap: var(--ds-space-2); list-style: none; padding: 0; margin: 0; } button { position: relative; min-width: 2rem; height: 2rem; padding: 0 var(--ds-space-2); background: transparent; color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); } button:hover:not(:disabled) { background: var(--ds-color-bg-muted); } button:focus-visible { outline: none; border-color: var(--ds-color-focus); box-shadow: var(--ds-shadow-focus); z-index: 1; } button:disabled { color: var(--ds-color-fg-subtle); cursor: not-allowed; opacity: 0.6; } button[aria-current=\"page\"] { background: var(--ds-color-accent); color: var(--ds-color-accent-fg); border-color: var(--ds-color-accent); } /* Without this override the generic button:hover:not(:disabled) rule wins on specificity (it carries an extra :not pseudo-class) and the current-page button briefly flashes back to the muted surface colour on hover. Keep the active button on-brand by stepping to the accent-hover token instead. */ button[aria-current=\"page\"]:hover:not(:disabled) { background: var(--ds-color-accent-hover); border-color: var(--ds-color-accent-hover); } .ellipsis { display: inline-flex; min-width: 2rem; justify-content: center; color: var(--ds-color-fg-muted); } .size { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-color-fg-muted); } select { padding: var(--ds-space-1) var(--ds-space-2); background: var(--ds-color-bg); color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; } select:focus-visible { outline: none; border-color: var(--ds-color-focus); box-shadow: var(--ds-shadow-focus); } .summary { color: var(--ds-color-fg-muted); } svg { width: 1em; height: 1em; } /* Compact mode is driven by the host's [compact] attribute, which ds-table-pagination toggles automatically via ResizeObserver when the host is narrower than ~480px. We hide the Previous / Next text label here so the buttons collapse to icons; the page-number range shrinks via the JS path (maxVisiblePages → 3, siblingCount → 0). The slot itself stays in the DOM so consumer overrides via ::part(prev-next-label) still work if labels are wanted even when compact. */ :host([compact]) .label { display: none; } `"
|
|
7509
7509
|
}
|
|
7510
7510
|
],
|
|
7511
7511
|
"exports": [
|
|
@@ -8016,7 +8016,7 @@
|
|
|
8016
8016
|
{
|
|
8017
8017
|
"kind": "variable",
|
|
8018
8018
|
"name": "tableResponsiveStyles",
|
|
8019
|
-
"default": "css` @container (max-width: ${mobileBreakpoint}) { :host(:not([responsive=\"scroll\"])) .scroll { overflow-x: visible; border: 0; border-radius: 0; background: transparent; } :host(:not([responsive=\"scroll\"])) table, :host(:not([responsive=\"scroll\"])) tbody, :host(:not([responsive=\"scroll\"])) tr { display: block; } :host(:not([responsive=\"scroll\"])) table { border-collapse: separate; border-spacing: 0; } :host(:not([responsive=\"scroll\"])) .skeleton-table { min-width: 0; } :host(:not([responsive=\"scroll\"])) caption { display: block; padding-inline: 0; } :host(:not([responsive=\"scroll\"])) colgroup
|
|
8019
|
+
"default": "css` @container (max-width: ${mobileBreakpoint}) { :host(:not([responsive=\"scroll\"])) .scroll { overflow-x: visible; border: 0; border-radius: 0; background: transparent; } :host(:not([responsive=\"scroll\"])) table, :host(:not([responsive=\"scroll\"])) tbody, :host(:not([responsive=\"scroll\"])) tr { display: block; } :host(:not([responsive=\"scroll\"])) table { border-collapse: separate; border-spacing: 0; } :host(:not([responsive=\"scroll\"])) .skeleton-table { min-width: 0; } :host(:not([responsive=\"scroll\"])) caption { display: block; padding-inline: 0; } :host(:not([responsive=\"scroll\"])) colgroup { display: none; } :host(:not([responsive=\"scroll\"])) thead { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0; white-space: nowrap; } :host(:not([responsive=\"scroll\"])) tbody { display: grid; gap: var(--ds-space-3); } :host(:not([responsive=\"scroll\"])) tbody tr { overflow: hidden; border: 1px solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-md); background: var(--ds-color-bg); } :host(:not([responsive=\"scroll\"])) tbody tr.clickable:has(.row-action:focus-visible) { box-shadow: var(--ds-shadow-focus); } :host(:not([responsive=\"scroll\"])) .skeleton-table tbody tr { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-3); } :host(:not([responsive=\"scroll\"])) tbody td { display: grid; grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr); gap: var(--ds-space-3); align-items: start; min-width: 0; overflow-wrap: anywhere; text-align: left; } :host(:not([responsive=\"scroll\"])) .cell-label { display: block; color: var(--ds-color-fg-muted); font-weight: var(--ds-font-weight-medium); min-width: 0; overflow-wrap: anywhere; } :host(:not([responsive=\"scroll\"])) tbody td[data-label=\"\"], :host(:not([responsive=\"scroll\"])) tbody td.empty { display: block; } :host(:not([responsive=\"scroll\"])) tbody td[data-label=\"\"] .cell-label, :host(:not([responsive=\"scroll\"])) tbody td.empty .cell-label, :host(:not([responsive=\"scroll\"])) .skeleton-table .cell-label { display: none; } :host(:not([responsive=\"scroll\"])) .skeleton-table tbody td { padding: 0; border-bottom: 0; background: transparent; } :host(:not([responsive=\"scroll\"])) .skeleton-label { display: block; } } `"
|
|
8020
8020
|
}
|
|
8021
8021
|
],
|
|
8022
8022
|
"exports": [
|
|
@@ -8097,7 +8097,7 @@
|
|
|
8097
8097
|
{
|
|
8098
8098
|
"kind": "variable",
|
|
8099
8099
|
"name": "tableSortButtonStyles",
|
|
8100
|
-
"default": "css` :host { display: inline-flex; } button { display: inline-flex; align-items: center; gap: var(--ds-space-1); background: transparent; color: inherit; border: 0; padding:
|
|
8100
|
+
"default": "css` :host { display: inline-flex; } button { position: relative; display: inline-flex; align-items: center; gap: var(--ds-space-1); background: transparent; color: inherit; border: 0; padding: var(--ds-space-1); font: inherit; cursor: pointer; border-radius: var(--ds-radius-sm); } button:focus-visible { outline: none; background: var(--ds-color-bg); box-shadow: var(--ds-shadow-focus); } button:hover { color: var(--ds-color-accent); } .icon { display: inline-flex; width: 1em; height: 1em; color: var(--ds-color-fg-muted); } :host([direction]) .icon { color: var(--ds-color-accent); } svg { width: 100%; height: 100%; } `"
|
|
8101
8101
|
}
|
|
8102
8102
|
],
|
|
8103
8103
|
"exports": [
|
|
@@ -8230,7 +8230,7 @@
|
|
|
8230
8230
|
{
|
|
8231
8231
|
"kind": "variable",
|
|
8232
8232
|
"name": "tableStyles",
|
|
8233
|
-
"default": "css` :host { display: block; container-type: inline-size; width: 100%; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); /* Header row height (used as the top scroll-fade offset in scroll-body mode). Single-line by construction; override to taste. */ --ds-table-header-height: calc(var(--ds-space-2) * 2 + var(--ds-font-size-sm) * 1.5 + 1px); } .toolbar { padding: var(--ds-space-3) 0; } .scroll { position: relative; width: 100%; overflow-x: auto; border: 1px solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-md); background: var(--ds-color-bg); } table { width: 100%; border-collapse: collapse; text-align: left; } caption { caption-side: top; padding: var(--ds-space-3); color: var(--ds-color-fg-muted); text-align: left; } caption:empty { display: none; padding: 0; } thead th { background: var(--ds-color-bg-subtle); color: var(--ds-color-fg); font-weight: var(--ds-font-weight-medium); padding: var(--ds-space-2) var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border); /* Headers never wrap, so the header row keeps a constant height (a long header widens its column / scrolls rather than growing taller). */ white-space: nowrap; } tbody td { padding: var(--ds-space-2) var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border-subtle); vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:nth-child(even) td { background: var(--ds-color-bg-subtle); } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } tbody tr.clickable { cursor: pointer; outline: none; } tbody tr.clickable:hover td { background: var(--ds-color-bg-muted); } tbody tr.clickable:focus-visible { box-shadow: inset 0 0 0 2px var(--ds-color-focus); } .skeleton-table { min-width: 32rem; } .skeleton-label { display: none; } .loading { position: absolute; inset: 0; display: grid; place-items: center; min-height: 100%; background: color-mix(in srgb, var(--ds-color-bg) 78%, transparent); color: var(--ds-color-fg); pointer-events: auto; } .loading span { padding: var(--ds-space-2) var(--ds-space-3); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.12)); font-weight: var(--ds-font-weight-medium); } .empty { padding: var(--ds-space-6); text-align: center; color: var(--ds-color-fg-muted); } .footer { padding: var(--ds-space-3) 0; } `"
|
|
8233
|
+
"default": "css` :host { display: block; container-type: inline-size; width: 100%; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); /* Header row height (used as the top scroll-fade offset in scroll-body mode). Single-line by construction; override to taste. */ --ds-table-header-height: calc(var(--ds-space-2) * 2 + var(--ds-font-size-sm) * 1.5 + 1px); } .toolbar { padding: var(--ds-space-3) 0; } .scroll { position: relative; width: 100%; overflow-x: auto; border: 1px solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-md); background: var(--ds-color-bg); } table { width: 100%; border-collapse: collapse; text-align: left; } caption { caption-side: top; padding: var(--ds-space-3); color: var(--ds-color-fg-muted); text-align: left; } caption:empty { display: none; padding: 0; } thead th { background: var(--ds-color-bg-subtle); color: var(--ds-color-fg); font-weight: var(--ds-font-weight-medium); padding: var(--ds-space-2) var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border); /* Headers never wrap, so the header row keeps a constant height (a long header widens its column / scrolls rather than growing taller). */ white-space: nowrap; } tbody td { padding: var(--ds-space-2) var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border-subtle); vertical-align: middle; } .cell-label { display: none; } .cell-content { display: block; min-width: 0; } tbody tr:last-child td { border-bottom: 0; } tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--ds-radius-md) - 1px); } tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--ds-radius-md) - 1px); } tbody tr:nth-child(even) td { background: var(--ds-color-bg-subtle); } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } tbody tr.clickable { position: relative; cursor: pointer; outline: none; } tbody tr.clickable:hover td { background: var(--ds-color-bg-muted); } tbody tr.clickable:has(.row-action:focus-visible) td { background: var(--ds-color-bg-muted); box-shadow: inset 0 2px 0 var(--ds-color-focus), inset 0 -2px 0 var(--ds-color-focus); } tbody tr.clickable:has(.row-action:focus-visible) td:first-child { box-shadow: inset 2px 0 0 var(--ds-color-focus), inset 0 2px 0 var(--ds-color-focus), inset 0 -2px 0 var(--ds-color-focus); } tbody tr.clickable:has(.row-action:focus-visible) td:last-child { box-shadow: inset -2px 0 0 var(--ds-color-focus), inset 0 2px 0 var(--ds-color-focus), inset 0 -2px 0 var(--ds-color-focus); } tbody tr.clickable:has(.row-action:focus-visible) td:first-child:last-child { box-shadow: inset 0 0 0 2px var(--ds-color-focus); } .row-action { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0; white-space: nowrap; } .skeleton-table { min-width: 32rem; } .skeleton-label { display: none; } .loading { position: absolute; inset: 0; display: grid; place-items: center; min-height: 100%; background: color-mix(in srgb, var(--ds-color-bg) 78%, transparent); color: var(--ds-color-fg); pointer-events: auto; } .loading span { padding: var(--ds-space-2) var(--ds-space-3); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.12)); font-weight: var(--ds-font-weight-medium); } .loading-status { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0; white-space: nowrap; } .empty { padding: var(--ds-space-6); text-align: center; color: var(--ds-color-fg-muted); } .footer { padding: var(--ds-space-3) 0; } `"
|
|
8234
8234
|
}
|
|
8235
8235
|
],
|
|
8236
8236
|
"exports": [
|
|
@@ -8279,6 +8279,10 @@
|
|
|
8279
8279
|
"description": "Each body `<tr>` when `clickable-rows` is set.",
|
|
8280
8280
|
"name": "row-clickable"
|
|
8281
8281
|
},
|
|
8282
|
+
{
|
|
8283
|
+
"description": "The native row action button rendered in the first cell when `clickable-rows` is set.",
|
|
8284
|
+
"name": "row-action"
|
|
8285
|
+
},
|
|
8282
8286
|
{
|
|
8283
8287
|
"description": "Each body `<td>`.",
|
|
8284
8288
|
"name": "cell"
|
|
@@ -8363,6 +8367,13 @@
|
|
|
8363
8367
|
},
|
|
8364
8368
|
"default": "null"
|
|
8365
8369
|
},
|
|
8370
|
+
{
|
|
8371
|
+
"kind": "field",
|
|
8372
|
+
"name": "rowActionLabel",
|
|
8373
|
+
"type": {
|
|
8374
|
+
"text": "(row: T, index: number) => string | undefined"
|
|
8375
|
+
}
|
|
8376
|
+
},
|
|
8366
8377
|
{
|
|
8367
8378
|
"kind": "field",
|
|
8368
8379
|
"name": "clickableRows",
|
|
@@ -8483,7 +8494,7 @@
|
|
|
8483
8494
|
},
|
|
8484
8495
|
{
|
|
8485
8496
|
"kind": "field",
|
|
8486
|
-
"name": "#
|
|
8497
|
+
"name": "#onRowAction",
|
|
8487
8498
|
"privacy": "private"
|
|
8488
8499
|
},
|
|
8489
8500
|
{
|
|
@@ -8510,7 +8521,7 @@
|
|
|
8510
8521
|
"privacy": "private",
|
|
8511
8522
|
"return": {
|
|
8512
8523
|
"type": {
|
|
8513
|
-
"text": "'ascending' | 'descending' |
|
|
8524
|
+
"text": "'ascending' | 'descending' | undefined"
|
|
8514
8525
|
}
|
|
8515
8526
|
},
|
|
8516
8527
|
"parameters": [
|
|
@@ -8522,6 +8533,11 @@
|
|
|
8522
8533
|
}
|
|
8523
8534
|
]
|
|
8524
8535
|
},
|
|
8536
|
+
{
|
|
8537
|
+
"kind": "field",
|
|
8538
|
+
"name": "#rowActionLabel",
|
|
8539
|
+
"privacy": "private"
|
|
8540
|
+
},
|
|
8525
8541
|
{
|
|
8526
8542
|
"kind": "method",
|
|
8527
8543
|
"name": "#renderLoading",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segmented-control.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,
|
|
1
|
+
{"version":3,"file":"segmented-control.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBA+DlC,CAAC"}
|
|
@@ -29,6 +29,12 @@ export const segmentedControlStyles = css `
|
|
|
29
29
|
.segment {
|
|
30
30
|
min-width: 0;
|
|
31
31
|
}
|
|
32
|
+
/* Lift the focused segment above its neighbours so the full focus ring is
|
|
33
|
+
visible instead of being painted over by the adjacent segment. */
|
|
34
|
+
.segment:focus-within {
|
|
35
|
+
position: relative;
|
|
36
|
+
z-index: 1;
|
|
37
|
+
}
|
|
32
38
|
/* Give unselected segments a surface that's distinct from the track so each
|
|
33
39
|
option reads as its own tile; the selected one keeps the accent fill from
|
|
34
40
|
the primary button variant. Drop the button min-width floor so the grid
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segmented-control.styles.js","sourceRoot":"","sources":["../../../src/atoms/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"segmented-control.styles.js","sourceRoot":"","sources":["../../../src/atoms/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DxC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-pagination.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"table-pagination.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,yBAyHjC,CAAC"}
|
|
@@ -28,6 +28,7 @@ export const tablePaginationStyles = css `
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
button {
|
|
31
|
+
position: relative;
|
|
31
32
|
min-width: 2rem;
|
|
32
33
|
height: 2rem;
|
|
33
34
|
padding: 0 var(--ds-space-2);
|
|
@@ -46,8 +47,10 @@ export const tablePaginationStyles = css `
|
|
|
46
47
|
background: var(--ds-color-bg-muted);
|
|
47
48
|
}
|
|
48
49
|
button:focus-visible {
|
|
49
|
-
outline:
|
|
50
|
-
|
|
50
|
+
outline: none;
|
|
51
|
+
border-color: var(--ds-color-focus);
|
|
52
|
+
box-shadow: var(--ds-shadow-focus);
|
|
53
|
+
z-index: 1;
|
|
51
54
|
}
|
|
52
55
|
button:disabled {
|
|
53
56
|
color: var(--ds-color-fg-subtle);
|
|
@@ -91,6 +94,11 @@ export const tablePaginationStyles = css `
|
|
|
91
94
|
border-radius: var(--ds-radius-sm);
|
|
92
95
|
font: inherit;
|
|
93
96
|
}
|
|
97
|
+
select:focus-visible {
|
|
98
|
+
outline: none;
|
|
99
|
+
border-color: var(--ds-color-focus);
|
|
100
|
+
box-shadow: var(--ds-shadow-focus);
|
|
101
|
+
}
|
|
94
102
|
|
|
95
103
|
.summary {
|
|
96
104
|
color: var(--ds-color-fg-muted);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-pagination.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"table-pagination.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHvC,CAAC"}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { type TemplateResult } from 'lit';
|
|
2
2
|
import type { TableColumn, TableRow } from './types.js';
|
|
3
|
-
type AriaSort = 'ascending' | 'descending' |
|
|
3
|
+
type AriaSort = 'ascending' | 'descending' | undefined;
|
|
4
4
|
type TableBodyOptions<T extends TableRow> = {
|
|
5
5
|
rows: readonly T[];
|
|
6
6
|
columns: readonly TableColumn<T>[];
|
|
7
7
|
clickableRows: boolean;
|
|
8
|
+
rowActionsDisabled: boolean;
|
|
9
|
+
rowActionLabel: (row: T, index: number) => string;
|
|
8
10
|
onRowClick: (event: MouseEvent, row: T, index: number) => void;
|
|
9
|
-
|
|
11
|
+
onRowAction: (row: T, index: number) => void;
|
|
10
12
|
};
|
|
11
13
|
export declare function renderTableBody<T extends TableRow>(options: TableBodyOptions<T>): TemplateResult;
|
|
12
14
|
export declare function renderTableHeader<T extends TableRow>(columns: readonly TableColumn<T>[], ariaSort: (column: TableColumn<T>) => AriaSort): TemplateResult[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-rendering.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-rendering.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"table-rendering.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-rendering.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAExD,KAAK,QAAQ,GAAG,WAAW,GAAG,YAAY,GAAG,SAAS,CAAC;AAEvD,KAAK,gBAAgB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC1C,IAAI,EAAE,SAAS,CAAC,EAAE,CAAC;IACnB,OAAO,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClD,UAAU,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/D,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AA0FF,wBAAgB,eAAe,CAAC,CAAC,SAAS,QAAQ,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,cAAc,CAWhG;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,QAAQ,EAClD,OAAO,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,EAClC,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,QAAQ,GAC7C,cAAc,EAAE,CAWlB"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
1
|
+
import { html, nothing } from 'lit';
|
|
2
2
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
3
3
|
function renderCell(column, row, index) {
|
|
4
4
|
if (column.render) {
|
|
@@ -7,10 +7,37 @@ function renderCell(column, row, index) {
|
|
|
7
7
|
const value = row[column.field];
|
|
8
8
|
return value == null ? '' : String(value);
|
|
9
9
|
}
|
|
10
|
-
function
|
|
11
|
-
|
|
10
|
+
function renderCellLabel(column) {
|
|
11
|
+
if (!column.label) {
|
|
12
|
+
return nothing;
|
|
13
|
+
}
|
|
14
|
+
return html `<span class="cell-label" aria-hidden="true">${column.label}</span>`;
|
|
15
|
+
}
|
|
16
|
+
function renderRowAction(options, row, index) {
|
|
17
|
+
return html `
|
|
18
|
+
<button
|
|
19
|
+
class="row-action"
|
|
20
|
+
part="row-action"
|
|
21
|
+
type="button"
|
|
22
|
+
aria-label=${options.rowActionLabel(row, index)}
|
|
23
|
+
?disabled=${options.rowActionsDisabled}
|
|
24
|
+
@click=${() => options.onRowAction(row, index)}
|
|
25
|
+
></button>
|
|
26
|
+
`;
|
|
27
|
+
}
|
|
28
|
+
function renderCellContent(options, column, row, rowIndex, columnIndex) {
|
|
29
|
+
return html `
|
|
30
|
+
<span class="cell-content">
|
|
31
|
+
${options.clickableRows && columnIndex === 0 ? renderRowAction(options, row, rowIndex) : nothing}
|
|
32
|
+
${renderCell(column, row, rowIndex)}
|
|
33
|
+
</span>
|
|
34
|
+
`;
|
|
35
|
+
}
|
|
36
|
+
function renderCells(options, columns, row, index) {
|
|
37
|
+
return columns.map((column, columnIndex) => html `
|
|
12
38
|
<td part="cell" class=${`align-${column.align ?? 'left'}`} data-label=${column.label}>
|
|
13
|
-
${
|
|
39
|
+
${renderCellLabel(column)}
|
|
40
|
+
${renderCellContent(options, column, row, index, columnIndex)}
|
|
14
41
|
</td>
|
|
15
42
|
`);
|
|
16
43
|
}
|
|
@@ -19,12 +46,9 @@ function renderClickableRow(options, row, index) {
|
|
|
19
46
|
<tr
|
|
20
47
|
part="row row-clickable"
|
|
21
48
|
class="clickable"
|
|
22
|
-
role="button"
|
|
23
|
-
tabindex="0"
|
|
24
49
|
@click=${(e) => options.onRowClick(e, row, index)}
|
|
25
|
-
@keydown=${(e) => options.onRowKeydown(e, row, index)}
|
|
26
50
|
>
|
|
27
|
-
${renderCells(options.columns, row, index)}
|
|
51
|
+
${renderCells(options, options.columns, row, index)}
|
|
28
52
|
</tr>
|
|
29
53
|
`;
|
|
30
54
|
}
|
|
@@ -34,7 +58,7 @@ function renderRow(options, row, index) {
|
|
|
34
58
|
}
|
|
35
59
|
return html `
|
|
36
60
|
<tr part="row">
|
|
37
|
-
${renderCells(options.columns, row, index)}
|
|
61
|
+
${renderCells(options, options.columns, row, index)}
|
|
38
62
|
</tr>
|
|
39
63
|
`;
|
|
40
64
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-rendering.js","sourceRoot":"","sources":["../../../src/atoms/table/table-rendering.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"table-rendering.js","sourceRoot":"","sources":["../../../src/atoms/table/table-rendering.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAezD,SAAS,UAAU,CAAqB,MAAsB,EAAE,GAAM,EAAE,KAAa;IACnF,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;QAClB,OAAO,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;IACD,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChC,OAAO,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5C,CAAC;AAED,SAAS,eAAe,CAAqB,MAAsB;IACjE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QAClB,OAAO,OAAO,CAAC;IACjB,CAAC;IACD,OAAO,IAAI,CAAA,+CAA+C,MAAM,CAAC,KAAK,SAAS,CAAC;AAClF,CAAC;AAED,SAAS,eAAe,CACtB,OAA4B,EAC5B,GAAM,EACN,KAAa;IAEb,OAAO,IAAI,CAAA;;;;;mBAKM,OAAO,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC;kBACnC,OAAO,CAAC,kBAAkB;eAC7B,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC;;GAEjD,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CACxB,OAA4B,EAC5B,MAAsB,EACtB,GAAM,EACN,QAAgB,EAChB,WAAmB;IAEnB,OAAO,IAAI,CAAA;;QAEL,OAAO,CAAC,aAAa,IAAI,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO;QAC9F,UAAU,CAAC,MAAM,EAAE,GAAG,EAAE,QAAQ,CAAC;;GAEtC,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAClB,OAA4B,EAC5B,OAAkC,EAClC,GAAM,EACN,KAAa;IAEb,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,IAAI,CAAA;4BACtB,SAAS,MAAM,CAAC,KAAK,IAAI,MAAM,EAAE,eAAe,MAAM,CAAC,KAAK;QAChF,eAAe,CAAC,MAAM,CAAC;QACvB,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,CAAC;;GAEhE,CAAC,CAAC;AACL,CAAC;AAED,SAAS,kBAAkB,CACzB,OAA4B,EAC5B,GAAM,EACN,KAAa;IAEb,OAAO,IAAI,CAAA;;;;eAIE,CAAC,CAAa,EAAE,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC;;QAE3D,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC;;GAEtD,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAqB,OAA4B,EAAE,GAAM,EAAE,KAAa;IACxF,IAAI,OAAO,CAAC,aAAa,EAAE,CAAC;QAC1B,OAAO,kBAAkB,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;IACjD,CAAC;IACD,OAAO,IAAI,CAAA;;QAEL,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC;;GAEtD,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAqB,OAA4B;IAC9E,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC9B,OAAO,IAAI,CAAA;;iDAEkC,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC;;;;KAIvE,CAAC;IACJ,CAAC;IACD,OAAO,IAAI,CAAA,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC;AACnF,CAAC;AAED,MAAM,UAAU,iBAAiB,CAC/B,OAAkC,EAClC,QAA8C;IAE9C,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;;;cAIrB,SAAS,MAAM,CAAC,KAAK,IAAI,MAAM,EAAE;kBAC7B,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;;mBAE1B,UAAU,MAAM,CAAC,IAAI,EAAE,IAAI,MAAM,CAAC,KAAK;;GAEvD,CAAC,CAAC;AACL,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-responsive.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-responsive.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"table-responsive.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-responsive.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,qBAAqB,yBA2GjC,CAAC"}
|
|
@@ -30,11 +30,23 @@ export const tableResponsiveStyles = css `
|
|
|
30
30
|
padding-inline: 0;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
:host(:not([responsive="scroll"])) colgroup
|
|
34
|
-
:host(:not([responsive="scroll"])) thead {
|
|
33
|
+
:host(:not([responsive="scroll"])) colgroup {
|
|
35
34
|
display: none;
|
|
36
35
|
}
|
|
37
36
|
|
|
37
|
+
:host(:not([responsive="scroll"])) thead {
|
|
38
|
+
position: absolute;
|
|
39
|
+
inline-size: 1px;
|
|
40
|
+
block-size: 1px;
|
|
41
|
+
margin: -1px;
|
|
42
|
+
padding: 0;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
clip: rect(0, 0, 0, 0);
|
|
45
|
+
clip-path: inset(50%);
|
|
46
|
+
border: 0;
|
|
47
|
+
white-space: nowrap;
|
|
48
|
+
}
|
|
49
|
+
|
|
38
50
|
:host(:not([responsive="scroll"])) tbody {
|
|
39
51
|
display: grid;
|
|
40
52
|
gap: var(--ds-space-3);
|
|
@@ -47,8 +59,8 @@ export const tableResponsiveStyles = css `
|
|
|
47
59
|
background: var(--ds-color-bg);
|
|
48
60
|
}
|
|
49
61
|
|
|
50
|
-
:host(:not([responsive="scroll"])) tbody tr.clickable:focus-visible {
|
|
51
|
-
box-shadow:
|
|
62
|
+
:host(:not([responsive="scroll"])) tbody tr.clickable:has(.row-action:focus-visible) {
|
|
63
|
+
box-shadow: var(--ds-shadow-focus);
|
|
52
64
|
}
|
|
53
65
|
|
|
54
66
|
:host(:not([responsive="scroll"])) .skeleton-table tbody tr {
|
|
@@ -67,8 +79,8 @@ export const tableResponsiveStyles = css `
|
|
|
67
79
|
text-align: left;
|
|
68
80
|
}
|
|
69
81
|
|
|
70
|
-
:host(:not([responsive="scroll"]))
|
|
71
|
-
|
|
82
|
+
:host(:not([responsive="scroll"])) .cell-label {
|
|
83
|
+
display: block;
|
|
72
84
|
color: var(--ds-color-fg-muted);
|
|
73
85
|
font-weight: var(--ds-font-weight-medium);
|
|
74
86
|
min-width: 0;
|
|
@@ -80,10 +92,10 @@ export const tableResponsiveStyles = css `
|
|
|
80
92
|
display: block;
|
|
81
93
|
}
|
|
82
94
|
|
|
83
|
-
:host(:not([responsive="scroll"])) tbody td[data-label=""]
|
|
84
|
-
:host(:not([responsive="scroll"])) tbody td.empty
|
|
85
|
-
:host(:not([responsive="scroll"])) .skeleton-table
|
|
86
|
-
|
|
95
|
+
:host(:not([responsive="scroll"])) tbody td[data-label=""] .cell-label,
|
|
96
|
+
:host(:not([responsive="scroll"])) tbody td.empty .cell-label,
|
|
97
|
+
:host(:not([responsive="scroll"])) .skeleton-table .cell-label {
|
|
98
|
+
display: none;
|
|
87
99
|
}
|
|
88
100
|
|
|
89
101
|
:host(:not([responsive="scroll"])) .skeleton-table tbody td {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-responsive.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-responsive.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAElD,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;2BACb,gBAAgB
|
|
1
|
+
{"version":3,"file":"table-responsive.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-responsive.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAElD,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;2BACb,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0G1C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-sort-button.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAA0B,MAAM,KAAK,CAAC;AAE7E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAgBrD;;;;;;;GAOG;AACH,qBAAa,iBAAkB,SAAQ,SAAS;;IAC9C,OAAgB,MAAM,4BAAgD;IAEzC,SAAS,EAAE,kBAAkB,CAAQ;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IA4BnB,MAAM,IAAI,cAAc;
|
|
1
|
+
{"version":3,"file":"table-sort-button.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAA0B,MAAM,KAAK,CAAC;AAE7E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAgBrD;;;;;;;GAOG;AACH,qBAAa,iBAAkB,SAAQ,SAAS;;IAC9C,OAAgB,MAAM,4BAAgD;IAEzC,SAAS,EAAE,kBAAkB,CAAQ;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IA4BnB,MAAM,IAAI,cAAc;CAalC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-sort-button.js","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAA+C,MAAM,KAAK,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAGtE,MAAM,YAAY,GAAG,GAAG,CAAA,0MAA0M,CAAC;AACnO,MAAM,QAAQ,GAAG,GAAG,CAAA,kLAAkL,CAAC;AACvM,MAAM,SAAS,GAAG,GAAG,CAAA,iLAAiL,CAAC;AAEvM,SAAS,aAAa,CAAC,OAA2B;IAChD,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACrB,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,EAAE,CAAC;QACtB,OAAO,MAAM,CAAC;IAChB,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,OAAO,iBAAkB,SAAQ,SAAS;IAAhD;;QAG+B,cAAS,GAAuB,IAAI,CAAC;QAGlE,aAAQ,GAAG,GAAS,EAAE;YACpB,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAChD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;QAClD,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"table-sort-button.js","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAA+C,MAAM,KAAK,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAGtE,MAAM,YAAY,GAAG,GAAG,CAAA,0MAA0M,CAAC;AACnO,MAAM,QAAQ,GAAG,GAAG,CAAA,kLAAkL,CAAC;AACvM,MAAM,SAAS,GAAG,GAAG,CAAA,iLAAiL,CAAC;AAEvM,SAAS,aAAa,CAAC,OAA2B;IAChD,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACrB,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,EAAE,CAAC;QACtB,OAAO,MAAM,CAAC;IAChB,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,OAAO,iBAAkB,SAAQ,SAAS;IAAhD;;QAG+B,cAAS,GAAuB,IAAI,CAAC;QAGlE,aAAQ,GAAG,GAAS,EAAE;YACpB,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAChD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;QAClD,CAAC,CAAC;IAoCJ,CAAC;aA5CiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,qBAAqB,CAAC,AAA/C,CAAgD;IAKtE,QAAQ,CAGN;IAEF,KAAK;QACH,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;YAC7B,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,EAAE,CAAC;YAC9B,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,UAAU;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;QAC7D,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;YAC7B,OAAO,GAAG,IAAI,cAAc,CAAC;QAC/B,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,EAAE,CAAC;YAC9B,OAAO,GAAG,IAAI,eAAe,CAAC;QAChC,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;qBAIM,IAAI,CAAC,UAAU,EAAE;iBACrB,IAAI,CAAC,QAAQ;;;yCAGW,IAAI,CAAC,KAAK,EAAE;;KAEhD,CAAC;IACJ,CAAC;;AAzC4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAsC;AACtD;IAAX,QAAQ,EAAE;iDAAiB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-sort-button.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"table-sort-button.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,yBAwCjC,CAAC"}
|
|
@@ -5,20 +5,22 @@ export const tableSortButtonStyles = css `
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
button {
|
|
8
|
+
position: relative;
|
|
8
9
|
display: inline-flex;
|
|
9
10
|
align-items: center;
|
|
10
11
|
gap: var(--ds-space-1);
|
|
11
12
|
background: transparent;
|
|
12
13
|
color: inherit;
|
|
13
14
|
border: 0;
|
|
14
|
-
padding:
|
|
15
|
+
padding: var(--ds-space-1);
|
|
15
16
|
font: inherit;
|
|
16
17
|
cursor: pointer;
|
|
17
18
|
border-radius: var(--ds-radius-sm);
|
|
18
19
|
}
|
|
19
20
|
button:focus-visible {
|
|
20
|
-
outline:
|
|
21
|
-
|
|
21
|
+
outline: none;
|
|
22
|
+
background: var(--ds-color-bg);
|
|
23
|
+
box-shadow: var(--ds-shadow-focus);
|
|
22
24
|
}
|
|
23
25
|
button:hover {
|
|
24
26
|
color: var(--ds-color-accent);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-sort-button.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"table-sort-button.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCvC,CAAC"}
|
|
@@ -20,6 +20,7 @@ import type { TableColumn, TableResponsiveMode, TableRow, TableSortState } from
|
|
|
20
20
|
* @csspart tbody - The `<tbody>` element.
|
|
21
21
|
* @csspart row - Each body `<tr>`.
|
|
22
22
|
* @csspart row-clickable - Each body `<tr>` when `clickable-rows` is set.
|
|
23
|
+
* @csspart row-action - The native row action button rendered in the first cell when `clickable-rows` is set.
|
|
23
24
|
* @csspart cell - Each body `<td>`.
|
|
24
25
|
* @csspart header-cell - Each header `<th>`.
|
|
25
26
|
* @csspart caption - The `<caption>` wrapper.
|
|
@@ -35,6 +36,7 @@ export declare class DsTable<T extends TableRow = TableRow> extends DsElement {
|
|
|
35
36
|
rows: readonly T[];
|
|
36
37
|
columns: readonly TableColumn<T>[];
|
|
37
38
|
sortState: TableSortState | null;
|
|
39
|
+
rowActionLabel?: (row: T, index: number) => string;
|
|
38
40
|
clickableRows: boolean;
|
|
39
41
|
loading: boolean;
|
|
40
42
|
skeletonRows: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAyB7F;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,OAAO,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,CAAE,SAAQ,SAAS;;IACnE,OAAgB,MAAM,4BAMpB;IAE8B,IAAI,EAAE,SAAS,CAAC,EAAE,CAAM;IACxB,OAAO,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAM;IACxC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAQ;IACxC,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACV,aAAa,UAAS;IAC3C,OAAO,UAAS;IACZ,YAAY,SAAK;IACd,eAAe,SAAK;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,mBAAmB,CAAW;IACD,UAAU,UAAS;IAChF,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAIO,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IAiI5B,MAAM,IAAI,cAAc;CAUlC"}
|
|
@@ -22,6 +22,11 @@ const INTERACTIVE_TAGS = new Set([
|
|
|
22
22
|
'ds-searchable-select', 'ds-text-field', 'ds-table-sort-button',
|
|
23
23
|
'ds-table-pagination',
|
|
24
24
|
]);
|
|
25
|
+
const INTERACTIVE_ROLES = new Set([
|
|
26
|
+
'button', 'checkbox', 'link', 'menuitem', 'menuitemcheckbox',
|
|
27
|
+
'menuitemradio', 'option', 'radio', 'searchbox', 'slider',
|
|
28
|
+
'spinbutton', 'switch', 'textbox',
|
|
29
|
+
]);
|
|
25
30
|
const FALSE_BOOLEAN_ATTRIBUTES = new Set(['false', '0']);
|
|
26
31
|
function parseBooleanAttribute(value) {
|
|
27
32
|
return value !== null && !FALSE_BOOLEAN_ATTRIBUTES.has(value.trim().toLowerCase());
|
|
@@ -47,6 +52,7 @@ const booleanAttributeConverter = {
|
|
|
47
52
|
* @csspart tbody - The `<tbody>` element.
|
|
48
53
|
* @csspart row - Each body `<tr>`.
|
|
49
54
|
* @csspart row-clickable - Each body `<tr>` when `clickable-rows` is set.
|
|
55
|
+
* @csspart row-action - The native row action button rendered in the first cell when `clickable-rows` is set.
|
|
50
56
|
* @csspart cell - Each body `<td>`.
|
|
51
57
|
* @csspart header-cell - Each header `<th>`.
|
|
52
58
|
* @csspart caption - The `<caption>` wrapper.
|
|
@@ -87,16 +93,15 @@ export class DsTable extends DsElement {
|
|
|
87
93
|
}
|
|
88
94
|
this.emit('ds-row-click', { detail: { row, index } });
|
|
89
95
|
};
|
|
90
|
-
this.#
|
|
96
|
+
this.#onRowAction = (row, index) => {
|
|
91
97
|
if (this.loading) {
|
|
92
98
|
return;
|
|
93
99
|
}
|
|
94
|
-
if (event.key !== 'Enter' && event.key !== ' ') {
|
|
95
|
-
return;
|
|
96
|
-
}
|
|
97
|
-
event.preventDefault();
|
|
98
100
|
this.emit('ds-row-click', { detail: { row, index } });
|
|
99
101
|
};
|
|
102
|
+
this.#rowActionLabel = (row, index) => {
|
|
103
|
+
return this.rowActionLabel?.(row, index) ?? `Activate row ${index + 1}`;
|
|
104
|
+
};
|
|
100
105
|
}
|
|
101
106
|
static { this.styles = [
|
|
102
107
|
...DsElement.styles,
|
|
@@ -124,7 +129,7 @@ export class DsTable extends DsElement {
|
|
|
124
129
|
}
|
|
125
130
|
#syncSlotPresence;
|
|
126
131
|
#onRowClick;
|
|
127
|
-
#
|
|
132
|
+
#onRowAction;
|
|
128
133
|
#pathHasInteractiveBeforeRow(event) {
|
|
129
134
|
const path = event.composedPath();
|
|
130
135
|
for (const node of path) {
|
|
@@ -138,28 +143,31 @@ export class DsTable extends DsElement {
|
|
|
138
143
|
if (INTERACTIVE_TAGS.has(tag)) {
|
|
139
144
|
return true;
|
|
140
145
|
}
|
|
141
|
-
|
|
146
|
+
const role = node.getAttribute('role');
|
|
147
|
+
if (role && INTERACTIVE_ROLES.has(role)) {
|
|
142
148
|
return true;
|
|
143
149
|
}
|
|
144
150
|
}
|
|
145
151
|
return false;
|
|
146
152
|
}
|
|
147
153
|
#ariaSort(column) {
|
|
148
|
-
if (!column.sortable) {
|
|
154
|
+
if (!column.sortable || this.sortState?.name !== column.name || !this.sortState.direction) {
|
|
149
155
|
return undefined;
|
|
150
156
|
}
|
|
151
|
-
if (this.sortState?.name !== column.name || !this.sortState.direction) {
|
|
152
|
-
return 'none';
|
|
153
|
-
}
|
|
154
157
|
return this.sortState.direction === 'asc' ? 'ascending' : 'descending';
|
|
155
158
|
}
|
|
159
|
+
#rowActionLabel;
|
|
156
160
|
#renderLoading() {
|
|
157
|
-
if (!this.loading
|
|
161
|
+
if (!this.loading) {
|
|
158
162
|
return null;
|
|
159
163
|
}
|
|
164
|
+
const content = html `<slot name="loading">Loading...</slot>`;
|
|
165
|
+
if (this.rows.length === 0) {
|
|
166
|
+
return html `<div class="loading-status" role="status" aria-live="polite">${content}</div>`;
|
|
167
|
+
}
|
|
160
168
|
return html `
|
|
161
169
|
<div class="loading" part="loading" role="status" aria-live="polite">
|
|
162
|
-
<span
|
|
170
|
+
<span>${content}</span>
|
|
163
171
|
</div>
|
|
164
172
|
`;
|
|
165
173
|
}
|
|
@@ -190,8 +198,10 @@ export class DsTable extends DsElement {
|
|
|
190
198
|
rows: this.rows,
|
|
191
199
|
columns: this.columns,
|
|
192
200
|
clickableRows: this.clickableRows,
|
|
201
|
+
rowActionsDisabled: this.loading,
|
|
202
|
+
rowActionLabel: this.#rowActionLabel,
|
|
193
203
|
onRowClick: this.#onRowClick,
|
|
194
|
-
|
|
204
|
+
onRowAction: this.#onRowAction,
|
|
195
205
|
})}</tbody>
|
|
196
206
|
</table>
|
|
197
207
|
`;
|
|
@@ -228,6 +238,9 @@ __decorate([
|
|
|
228
238
|
__decorate([
|
|
229
239
|
property({ attribute: false })
|
|
230
240
|
], DsTable.prototype, "sortState", void 0);
|
|
241
|
+
__decorate([
|
|
242
|
+
property({ attribute: false })
|
|
243
|
+
], DsTable.prototype, "rowActionLabel", void 0);
|
|
231
244
|
__decorate([
|
|
232
245
|
property({ type: Boolean, reflect: true, attribute: 'clickable-rows' })
|
|
233
246
|
], DsTable.prototype, "clickableRows", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG1E,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAAC;IAC/B,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO;IACrD,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW;IAC9D,sBAAsB,EAAE,eAAe,EAAE,sBAAsB;IAC/D,qBAAqB;CACtB,CAAC,CAAC;AAEH,MAAM,wBAAwB,GAAG,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;AAEzD,SAAS,qBAAqB,CAAC,KAAoB;IACjD,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;AACrF,CAAC;AAED,MAAM,yBAAyB,GAAG;IAChC,aAAa,EAAE,qBAAqB;CACrC,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAmLvB,CAAC"}
|
|
@@ -59,9 +59,24 @@ export const tableStyles = css `
|
|
|
59
59
|
vertical-align: middle;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
+
.cell-label {
|
|
63
|
+
display: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.cell-content {
|
|
67
|
+
display: block;
|
|
68
|
+
min-width: 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
62
71
|
tbody tr:last-child td {
|
|
63
72
|
border-bottom: 0;
|
|
64
73
|
}
|
|
74
|
+
tbody tr:last-child td:first-child {
|
|
75
|
+
border-bottom-left-radius: calc(var(--ds-radius-md) - 1px);
|
|
76
|
+
}
|
|
77
|
+
tbody tr:last-child td:last-child {
|
|
78
|
+
border-bottom-right-radius: calc(var(--ds-radius-md) - 1px);
|
|
79
|
+
}
|
|
65
80
|
|
|
66
81
|
tbody tr:nth-child(even) td {
|
|
67
82
|
background: var(--ds-color-bg-subtle);
|
|
@@ -72,16 +87,48 @@ export const tableStyles = css `
|
|
|
72
87
|
.align-center { text-align: center; }
|
|
73
88
|
|
|
74
89
|
tbody tr.clickable {
|
|
90
|
+
position: relative;
|
|
75
91
|
cursor: pointer;
|
|
76
92
|
outline: none;
|
|
77
93
|
}
|
|
78
94
|
tbody tr.clickable:hover td {
|
|
79
95
|
background: var(--ds-color-bg-muted);
|
|
80
96
|
}
|
|
81
|
-
tbody tr.clickable:focus-visible {
|
|
97
|
+
tbody tr.clickable:has(.row-action:focus-visible) td {
|
|
98
|
+
background: var(--ds-color-bg-muted);
|
|
99
|
+
box-shadow:
|
|
100
|
+
inset 0 2px 0 var(--ds-color-focus),
|
|
101
|
+
inset 0 -2px 0 var(--ds-color-focus);
|
|
102
|
+
}
|
|
103
|
+
tbody tr.clickable:has(.row-action:focus-visible) td:first-child {
|
|
104
|
+
box-shadow:
|
|
105
|
+
inset 2px 0 0 var(--ds-color-focus),
|
|
106
|
+
inset 0 2px 0 var(--ds-color-focus),
|
|
107
|
+
inset 0 -2px 0 var(--ds-color-focus);
|
|
108
|
+
}
|
|
109
|
+
tbody tr.clickable:has(.row-action:focus-visible) td:last-child {
|
|
110
|
+
box-shadow:
|
|
111
|
+
inset -2px 0 0 var(--ds-color-focus),
|
|
112
|
+
inset 0 2px 0 var(--ds-color-focus),
|
|
113
|
+
inset 0 -2px 0 var(--ds-color-focus);
|
|
114
|
+
}
|
|
115
|
+
tbody tr.clickable:has(.row-action:focus-visible) td:first-child:last-child {
|
|
82
116
|
box-shadow: inset 0 0 0 2px var(--ds-color-focus);
|
|
83
117
|
}
|
|
84
118
|
|
|
119
|
+
.row-action {
|
|
120
|
+
position: absolute;
|
|
121
|
+
inline-size: 1px;
|
|
122
|
+
block-size: 1px;
|
|
123
|
+
margin: -1px;
|
|
124
|
+
padding: 0;
|
|
125
|
+
overflow: hidden;
|
|
126
|
+
clip: rect(0, 0, 0, 0);
|
|
127
|
+
clip-path: inset(50%);
|
|
128
|
+
border: 0;
|
|
129
|
+
white-space: nowrap;
|
|
130
|
+
}
|
|
131
|
+
|
|
85
132
|
.skeleton-table {
|
|
86
133
|
min-width: 32rem;
|
|
87
134
|
}
|
|
@@ -109,6 +156,19 @@ export const tableStyles = css `
|
|
|
109
156
|
font-weight: var(--ds-font-weight-medium);
|
|
110
157
|
}
|
|
111
158
|
|
|
159
|
+
.loading-status {
|
|
160
|
+
position: absolute;
|
|
161
|
+
inline-size: 1px;
|
|
162
|
+
block-size: 1px;
|
|
163
|
+
margin: -1px;
|
|
164
|
+
padding: 0;
|
|
165
|
+
overflow: hidden;
|
|
166
|
+
clip: rect(0, 0, 0, 0);
|
|
167
|
+
clip-path: inset(50%);
|
|
168
|
+
border: 0;
|
|
169
|
+
white-space: nowrap;
|
|
170
|
+
}
|
|
171
|
+
|
|
112
172
|
.empty {
|
|
113
173
|
padding: var(--ds-space-6);
|
|
114
174
|
text-align: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmL7B,CAAC"}
|
package/package.json
CHANGED