@sebgroup/green-core 2.36.0 → 2.37.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/components/table/table.component.d.ts +14 -0
- package/components/table/table.component.js +90 -14
- package/components/table/table.stories.data.d.ts +9 -1
- package/components/table/table.stories.data.js +51 -3
- package/components/table/table.styles.js +181 -9
- package/components/table/table.types.d.ts +9 -1
- package/custom-elements.json +130 -109
- package/gds-element.js +1 -1
- package/generated/mcp/components.json +1 -1
- package/generated/mcp/icons.json +1 -1
- package/generated/mcp/index.json +1 -1
- package/generated/mcp/table/api.md +2 -0
- package/generated/react/index.d.ts +2 -2
- package/generated/react/index.js +2 -2
- package/generated/react/table/index.d.ts +1 -0
- package/package.json +1 -1
- package/utils/helpers/custom-element-scoping.js +1 -1
package/custom-elements.json
CHANGED
|
@@ -34484,6 +34484,10 @@
|
|
|
34484
34484
|
"description": "Content displayed at the end of the table header (before settings).",
|
|
34485
34485
|
"name": "`header-trail`"
|
|
34486
34486
|
},
|
|
34487
|
+
{
|
|
34488
|
+
"description": "Content displayed in the table footer area (before pagination).",
|
|
34489
|
+
"name": "`footer`"
|
|
34490
|
+
},
|
|
34487
34491
|
{
|
|
34488
34492
|
"description": "Custom error state content when data loading fails.",
|
|
34489
34493
|
"name": "`error`"
|
|
@@ -34684,6 +34688,15 @@
|
|
|
34684
34688
|
"description": "Disables data caching mechanism.",
|
|
34685
34689
|
"attribute": "nocache"
|
|
34686
34690
|
},
|
|
34691
|
+
{
|
|
34692
|
+
"kind": "field",
|
|
34693
|
+
"name": "tfoot",
|
|
34694
|
+
"type": {
|
|
34695
|
+
"text": "Types.Tfoot | undefined"
|
|
34696
|
+
},
|
|
34697
|
+
"description": "Configures a table footer row (`<tfoot>`) at the bottom of the table.\nThe footer row provides slot insertion points for each visible column,\nletting consumers render any aggregation (sum, average, count, etc.).\n\nUse `tfoot.label` to optionally show a label in the first cell (omitted by default).\nUse `tfoot.sticky` to pin the footer to the bottom of the scroll area.\n\nSlot naming convention: `tfoot:{columnKey}`\n\nAccepts: `{ label?: string, sticky?: boolean }` or omit to disable.",
|
|
34698
|
+
"attribute": "tfoot"
|
|
34699
|
+
},
|
|
34687
34700
|
{
|
|
34688
34701
|
"kind": "field",
|
|
34689
34702
|
"name": "dataLoadKey",
|
|
@@ -35113,6 +35126,14 @@
|
|
|
35113
35126
|
"description": "Disables data caching mechanism.",
|
|
35114
35127
|
"fieldName": "nocache"
|
|
35115
35128
|
},
|
|
35129
|
+
{
|
|
35130
|
+
"name": "tfoot",
|
|
35131
|
+
"type": {
|
|
35132
|
+
"text": "Types.Tfoot | undefined"
|
|
35133
|
+
},
|
|
35134
|
+
"description": "Configures a table footer row (`<tfoot>`) at the bottom of the table.\nThe footer row provides slot insertion points for each visible column,\nletting consumers render any aggregation (sum, average, count, etc.).\n\nUse `tfoot.label` to optionally show a label in the first cell (omitted by default).\nUse `tfoot.sticky` to pin the footer to the bottom of the scroll area.\n\nSlot naming convention: `tfoot:{columnKey}`\n\nAccepts: `{ label?: string, sticky?: boolean }` or omit to disable.",
|
|
35135
|
+
"fieldName": "tfoot"
|
|
35136
|
+
},
|
|
35116
35137
|
{
|
|
35117
35138
|
"name": "dataLoadKey",
|
|
35118
35139
|
"type": {
|
|
@@ -35246,7 +35267,7 @@
|
|
|
35246
35267
|
"type": {
|
|
35247
35268
|
"text": "object"
|
|
35248
35269
|
},
|
|
35249
|
-
"default": "{ Columns: [ { key: 'id', label: 'ID', sortable: false, }, { key: 'name', label: 'Name', sortable: true, }, { key: 'email', label: 'Email', sortable: true, justify: 'space-between', }, { key: 'role', label: 'Role', sortable: true, visible: false, }, { key: 'status', label: 'Status', sortable: true, }, { key: 'department', label: 'Department', sortable: true, }, { key: 'amount', label: 'Amount', sortable: true, justify: 'end', }, { key: 'account', label: 'Account', sortable: true, }, { key: 'login', label: 'Last Login', sortable: true, }, { key: 'download', label: 'Download', }, ] as TableColumn[], Actions: { label: 'Actions', justify: 'end', } as TableActions, Data: userDataProvider, /** * Generates slot content for the given rows (current page). * Creates per-row slot elements using `columnKey:rowKey:slotId` convention. * * Used with Lit's `render()` to update table light DOM on each data load: * ```ts * @gds-table-data-loaded=${(e) => render(Users.SlotContent(e.detail.rows), table)} * ``` */ SlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any) => html` <!-- name: avatar --> <gds-img src=\"${row.avatarUrl ?? '#'}\" alt=\"${String(row.name)}\" slot=\"name:${row.id}:avatar\" width=\"xl\" height=\"xl\" ></gds-img> <!-- email: copy button --> <gds-button slot=\"email:${row.id}:copy-button\" rank=\"tertiary\" size=\"small\" > <gds-icon-copy></gds-icon-copy> </gds-button> <!-- status: badge --> <gds-badge slot=\"status:${row.id}:status\" variant=\"${String(row.status) === 'Active' ? 'positive' : 'negative'}\" size=\"small\" > ${String(row.status)} </gds-badge> <!-- amount: formatted number --> <gds-formatted-number slot=\"amount:${row.id}:amount\" .value=${row.amount} ></gds-formatted-number> <!-- amount: currency --> <gds-badge slot=\"amount:${row.id}:currency\" size=\"small\"> SEK </gds-badge> <!-- account: formatted account --> <gds-formatted-account slot=\"account:${row.id}:main\" account=\"${row.account}\" format=\"seb-account\" ></gds-formatted-account> <!-- login: formatted date --> <gds-formatted-date slot=\"login:${row.id}:main\" .value=\"${String(row.login)}\" locale=\"sv-SE\" format=\"dateLong\" ></gds-formatted-date> <!-- download: link with icon --> <gds-link slot=\"download:${row.id}:main\" href=\"${row.download ?? '#'}\" text-decoration=\"underline\" download > Download file <gds-icon-cloud-download slot=\"trail\"></gds-icon-cloud-download> </gds-link> <!-- actions: context menu --> <gds-context-menu slot=\"actions:${row.id}:main\"> <gds-button slot=\"trigger\" rank=\"tertiary\" size=\"small\"> <gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal> </gds-button> <gds-menu-item>Edit ${String(row.name)}</gds-menu-item> <gds-menu-item>Delete</gds-menu-item> </gds-context-menu> `, )} ` }, }"
|
|
35270
|
+
"default": "{ Columns: [ { key: 'id', label: 'ID', sortable: false, }, { key: 'name', label: 'Name', sortable: true, }, { key: 'email', label: 'Email', sortable: true, justify: 'space-between', }, { key: 'role', label: 'Role', sortable: true, visible: false, }, { key: 'status', label: 'Status', sortable: true, }, { key: 'department', label: 'Department', sortable: true, }, { key: 'amount', label: 'Amount', sortable: true, justify: 'end', }, { key: 'account', label: 'Account', sortable: true, }, { key: 'login', label: 'Last Login', sortable: true, }, { key: 'download', label: 'Download', }, ] as TableColumn[], Actions: { label: 'Actions', justify: 'end', } as TableActions, Tfoot: { label: 'Totals', sticky: true, } as TableTfoot, Data: userDataProvider, /** * Generates slot content for the given rows (current page). * Creates per-row slot elements using `columnKey:rowKey:slotId` convention. * * Used with Lit's `render()` to update table light DOM on each data load: * ```ts * @gds-table-data-loaded=${(e) => render(Users.SlotContent(e.detail.rows), table)} * ``` */ SlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any) => html` <!-- name: avatar --> <gds-img src=\"${row.avatarUrl ?? '#'}\" alt=\"${String(row.name)}\" slot=\"name:${row.id}:avatar\" width=\"xl\" height=\"xl\" ></gds-img> <!-- email: copy button --> <gds-button slot=\"email:${row.id}:copy-button\" rank=\"tertiary\" size=\"small\" > <gds-icon-copy></gds-icon-copy> </gds-button> <!-- status: badge --> <gds-badge slot=\"status:${row.id}:status\" variant=\"${String(row.status) === 'Active' ? 'positive' : 'negative'}\" size=\"small\" > ${String(row.status)} </gds-badge> <!-- amount: formatted number --> <gds-formatted-number slot=\"amount:${row.id}:amount\" .value=${row.amount} ></gds-formatted-number> <!-- amount: currency --> <gds-badge slot=\"amount:${row.id}:currency\" size=\"small\"> SEK </gds-badge> <!-- account: formatted account --> <gds-formatted-account slot=\"account:${row.id}:main\" account=\"${row.account}\" format=\"seb-account\" ></gds-formatted-account> <!-- login: formatted date --> <gds-formatted-date slot=\"login:${row.id}:main\" .value=\"${String(row.login)}\" locale=\"sv-SE\" format=\"dateLong\" ></gds-formatted-date> <!-- download: link with icon --> <gds-link slot=\"download:${row.id}:main\" href=\"${row.download ?? '#'}\" text-decoration=\"underline\" download > Download file <gds-icon-cloud-download slot=\"trail\"></gds-icon-cloud-download> </gds-link> <!-- actions: context menu --> <gds-context-menu slot=\"actions:${row.id}:main\"> <gds-button slot=\"trigger\" rank=\"tertiary\" size=\"small\"> <gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal> </gds-button> <gds-menu-item>Edit ${String(row.name)}</gds-menu-item> <gds-menu-item>Delete</gds-menu-item> </gds-context-menu> `, )} ` }, /** * Generates tfoot slot content for the footer row. * Receives all rows on the page and computes aggregations. * * Slot naming: `tfoot:{columnKey}` */ TfootSlotContent: (rows: any[]): TemplateResult => { const totalAmount = rows.reduce( (sum, row) => sum + (Number(row.amount) || 0), 0, ) const activeCount = rows.filter( (row) => String(row.status) === 'Active', ).length const activeRate = Math.round((activeCount / rows.length) * 100) const departments = new Set(rows.map((row) => row.department)).size return html` <!-- tfoot: name row count --> <span slot=\"tfoot:name\">${rows.length} Users</span> <!-- tfoot: status active rate --> <gds-badge slot=\"tfoot:status\" variant=\"${activeRate >= 70 ? 'positive' : activeRate >= 40 ? 'warning' : 'negative'}\" size=\"small\" > ${activeRate}% active </gds-badge> <!-- tfoot: department count --> <gds-badge slot=\"tfoot:department\" variant=\"information\" size=\"small\"> ${departments} depts </gds-badge> <!-- tfoot: amount sum --> <gds-flex slot=\"tfoot:amount\" gap=\"s\" align-items=\"center\"> <gds-formatted-number .value=${totalAmount}></gds-formatted-number> <gds-badge size=\"small\">SEK</gds-badge> </gds-flex> ` }, }"
|
|
35250
35271
|
},
|
|
35251
35272
|
{
|
|
35252
35273
|
"kind": "variable",
|
|
@@ -35262,7 +35283,7 @@
|
|
|
35262
35283
|
"type": {
|
|
35263
35284
|
"text": "object"
|
|
35264
35285
|
},
|
|
35265
|
-
"default": "{ Columns: [ { key: 'task', label: 'Task', align: 'center' }, { key: 'assignee', label: 'Assignee', align: 'center' }, { key: 'priority', label: 'Priority', align: 'center', width: '100px' }, ] as TableColumn[], MultipleActions: { label: 'Actions', align: 'center', justify: 'start', width: '150px', } as TableActions, MultipleActionsSlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any, i: number) => html` <gds-button slot=\"actions:${row.id ?? i + 1}:main\" rank=\"secondary\" size=\"small\" variant=\"positive\" > <gds-icon-circle-check size=\"m\"></gds-icon-circle-check> </gds-button> <gds-button slot=\"actions:${row.id ?? i + 1}:main\" rank=\"secondary\" size=\"small\" variant=\"negative\" > <gds-icon-cross-small size=\"m\"></gds-icon-cross-small> </gds-button> `, )} ` }, ActionLink: { label: 'Actions', align: 'center', justify: 'end', width: '150px', } as TableActions, ActionLinkSlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any, i: number) => html` <gds-button slot=\"actions:${row.id ?? i + 1}:main\" size=\"small\" rank=\"secondary\" > View details </gds-button> `, )} ` }, ActionContextMenu: { label: 'Actions', align: 'center', justify: 'end', width: '150px', } as TableActions, ActionContextMenuSlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any, i: number) => html` <gds-context-menu slot=\"actions:${row.id ?? i + 1}:main\"> <gds-button slot=\"trigger\" rank=\"tertiary\" size=\"small\"> <gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal> </gds-button> <gds-menu-item>Edit</gds-menu-item> <gds-menu-item>Archive</gds-menu-item> <gds-menu-item>Delete</gds-menu-item> </gds-context-menu> `, )} ` }, Data: actionsDataProvider, }"
|
|
35286
|
+
"default": "{ Columns: [ { key: 'task', label: 'Task', align: 'center' }, { key: 'assignee', label: 'Assignee', align: 'center' }, { key: 'priority', label: 'Priority', align: 'center', width: '100px' }, ] as TableColumn[], MultipleActions: { label: 'Actions', align: 'center', justify: 'start', // width: '150px', sticky: true, } as TableActions, MultipleActionsSlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any, i: number) => html` <gds-button slot=\"actions:${row.id ?? i + 1}:main\" rank=\"secondary\" size=\"small\" variant=\"positive\" > <gds-icon-circle-check size=\"m\"></gds-icon-circle-check> </gds-button> <gds-button slot=\"actions:${row.id ?? i + 1}:main\" rank=\"secondary\" size=\"small\" variant=\"negative\" > <gds-icon-cross-small size=\"m\"></gds-icon-cross-small> </gds-button> `, )} ` }, ActionLink: { label: 'Actions', align: 'center', justify: 'end', // width: '150px', sticky: true, } as TableActions, ActionLinkSlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any, i: number) => html` <gds-button slot=\"actions:${row.id ?? i + 1}:main\" size=\"small\" rank=\"secondary\" > View details </gds-button> `, )} ` }, ActionContextMenu: { label: 'Actions', align: 'center', justify: 'end', // width: '150px', sticky: true, } as TableActions, ActionContextMenuSlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any, i: number) => html` <gds-context-menu slot=\"actions:${row.id ?? i + 1}:main\"> <gds-button slot=\"trigger\" rank=\"tertiary\" size=\"small\"> <gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal> </gds-button> <gds-menu-item>Edit</gds-menu-item> <gds-menu-item>Archive</gds-menu-item> <gds-menu-item>Delete</gds-menu-item> </gds-context-menu> `, )} ` }, Data: actionsDataProvider, }"
|
|
35266
35287
|
}
|
|
35267
35288
|
],
|
|
35268
35289
|
"exports": [
|
|
@@ -35366,7 +35387,15 @@
|
|
|
35366
35387
|
"type": {
|
|
35367
35388
|
"text": "Story"
|
|
35368
35389
|
},
|
|
35369
|
-
"default": "{ args: { columns: ActionsData.Columns, actions: ActionsData.MultipleActions, data: ActionsData.Data, }, parameters: { docs: { description: { story: ` The \\`actions\\` property defines row interactions shown as the last cell of each row. Supports all cell types (button, link, context-menu, badge, etc.) and can contain multiple actions. When passed as an object \\`{ label, align, justify }\\`, it configures the actions column header and cell layout. The actual action content is provided through named slots using the \\`actions:rowKey:main\\` convention. `, }, }, }, render: (args) => { const multiRef = createRef<any>() const ctxRef = createRef<any>() const linkRef = createRef<any>() return html` <gds-table ${ref(multiRef)} plain headline=\"Multiple Actions\" summary=\"Multiple interactive elements in a single actions cell.\" .rows=${2} .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${args.actions}\" @gds-table-data-loaded=${(e: CustomEvent) => { const table = multiRef.value if (table) render(ActionsData.MultipleActionsSlotContent(e.detail.rows), table) }} > </gds-table> <br /> <br /> <br /> <gds-table ${ref(ctxRef)} plain headline=\"Context Menu\" summary=\"Actions grouped inside a context menu trigger.\" .rows=${2} .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${ActionsData.ActionContextMenu}\" @gds-table-data-loaded=${(e: CustomEvent) => { const table = ctxRef.value if (table) render( ActionsData.ActionContextMenuSlotContent(e.detail.rows), table, ) }} > </gds-table> <br /> <br /> <br /> <gds-table ${ref(linkRef)} plain headline=\"Link Action\" summary=\"Single button element as a row action.\" .rows=${2} .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${ActionsData.ActionLink}\" @gds-table-data-loaded=${(e: CustomEvent) => { const table = linkRef.value if (table) render(ActionsData.ActionLinkSlotContent(e.detail.rows), table) }} > </gds-table> ` }, }"
|
|
35390
|
+
"default": "{ args: { columns: ActionsData.Columns, actions: ActionsData.MultipleActions, data: ActionsData.Data, }, parameters: { docs: { description: { story: ` The \\`actions\\` property defines row interactions shown as the last cell of each row. Supports all cell types (button, link, context-menu, badge, etc.) and can contain multiple actions. When passed as an object \\`{ label, align, justify, sticky }\\`, it configures the actions column header and cell layout. The actual action content is provided through named slots using the \\`actions:rowKey:main\\` convention. #### Sticky Actions Set \\`sticky: true\\` on the actions configuration to pin the actions column to the right edge of the table during horizontal scrolling. This ensures action buttons remain accessible even when the table content overflows horizontally. `, }, }, }, render: (args) => { const multiRef = createRef<any>() const ctxRef = createRef<any>() const linkRef = createRef<any>() return html` <gds-table ${ref(multiRef)} plain headline=\"Multiple Actions\" summary=\"Multiple interactive elements in a single actions cell.\" .rows=${2} .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${args.actions}\" @gds-table-data-loaded=${(e: CustomEvent) => { const table = multiRef.value if (table) render(ActionsData.MultipleActionsSlotContent(e.detail.rows), table) }} > </gds-table> <br /> <br /> <br /> <gds-table ${ref(ctxRef)} plain headline=\"Context Menu\" summary=\"Actions grouped inside a context menu trigger.\" .rows=${2} .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${ActionsData.ActionContextMenu}\" @gds-table-data-loaded=${(e: CustomEvent) => { const table = ctxRef.value if (table) render( ActionsData.ActionContextMenuSlotContent(e.detail.rows), table, ) }} > </gds-table> <br /> <br /> <br /> <gds-table ${ref(linkRef)} plain headline=\"Link Action\" summary=\"Single button element as a row action.\" .rows=${2} .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${ActionsData.ActionLink}\" @gds-table-data-loaded=${(e: CustomEvent) => { const table = linkRef.value if (table) render(ActionsData.ActionLinkSlotContent(e.detail.rows), table) }} > </gds-table> ` }, }"
|
|
35391
|
+
},
|
|
35392
|
+
{
|
|
35393
|
+
"kind": "variable",
|
|
35394
|
+
"name": "Tfoot",
|
|
35395
|
+
"type": {
|
|
35396
|
+
"text": "Story"
|
|
35397
|
+
},
|
|
35398
|
+
"default": "{ args: { columns: Users.Columns, actions: Users.Actions, density: 'comfortable', variant: 'secondary', data: Users.Data, tfoot: Users.Tfoot, selectable: true, searchable: true, searchLabel: 'Search users', settings: true, plain: false, height: '80vh', responsive: false, nocache: false, striped: false, }, parameters: { docs: { description: { story: ` The \\`tfoot\\` property adds a \\`<tfoot>\\` footer row at the bottom of the table for displaying aggregated values (sums, averages, counts, etc.). The footer row is fully slot-based, the table provides insertion points for each visible column and you decide what to render (formatted numbers, badges, text, or nothing). When a \\`label\\` is provided, the first cell renders as a \\`<th scope=\"row\">\\` for proper accessibility semantics. #### Configuration \\`\\`\\`typescript const tfoot = { label: 'Total', // Label shown in the first cell (renders as <th scope=\"row\">) sticky: true, // Pin to the bottom of the scroll area } \\`\\`\\` #### Slot Convention Table footer slots use the naming pattern \\`tfoot:{columnKey}\\`: \\`\\`\\`html <gds-formatted-number slot=\"tfoot:amount\" .value=\\${sum}></gds-formatted-number> <gds-badge slot=\"tfoot:status\" size=\"small\">\\${count} active</gds-badge> \\`\\`\\` Compute your aggregation in the \\`gds-table-data-loaded\\` handler and render slot content into the table. When \\`sticky: true\\`, the footer stays pinned to the bottom of the scroll area combined with the sticky header, this creates a fixed frame around the scrollable data. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render( html`${Users.SlotContent(e.detail.rows)} ${Users.TfootSlotContent(e.detail.rows)}`, table, ) } return html` <gds-table ${ref(tableRef)} density=\"${args.density}\" variant=\"${args.variant}\" search-label=\"${args.searchLabel}\" ?searchable=\"${args.searchable}\" ?settings=\"${args.settings}\" ?plain=\"${args.plain}\" ?responsive=\"${args.responsive}\" ?nocache=\"${args.nocache}\" ?striped=\"${args.striped}\" ?selectable=\"${args.selectable}\" height=\"${args.height}\" .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${args.actions}\" .tfoot=\"${args.tfoot}\" rows=\"50\" @gds-table-data-loaded=${handleDataLoaded} > </gds-table> ` }, }"
|
|
35370
35399
|
},
|
|
35371
35400
|
{
|
|
35372
35401
|
"kind": "variable",
|
|
@@ -35398,7 +35427,7 @@
|
|
|
35398
35427
|
"type": {
|
|
35399
35428
|
"text": "Story"
|
|
35400
35429
|
},
|
|
35401
|
-
"default": "{ args: { columns: Users.Columns, data: Users.Data, density: 'compact', headline: 'User Management', summary: 'Overview of all users in the system', }, parameters: { docs: { description: { story: ` The \\`density\\` property controls the table's visual spacing and affects the table's **built-in UI** (search input, column settings dropdown, pagination). - **\\`comfortable\\`** (Default) · Standard spacing for balanced readability - **\\`compact\\`** · Reduced spacing to maximize information density - **\\`spacious\\`** · Increased spacing for enhanced readability > **Slot content sizing**
|
|
35430
|
+
"default": "{ args: { columns: Users.Columns, data: Users.Data, density: 'compact', headline: 'User Management', summary: 'Overview of all users in the system', }, parameters: { docs: { description: { story: ` The \\`density\\` property controls the table's visual spacing and affects the table's **built-in UI** (search input, column settings dropdown, pagination). - **\\`comfortable\\`** (Default) · Standard spacing for balanced readability - **\\`compact\\`** · Reduced spacing to maximize information density - **\\`spacious\\`** · Increased spacing for enhanced readability > **Slot content sizing** The density mode does **not** automatically resize components you provide via slots. When using a specific density, size your slotted components accordingly. For example, use \\`size=\"small\"\\` on badges and buttons in \\`compact\\` or \\`comfortable\\` mode, and \\`size=\"medium\"\\` in \\`spacious\\` mode to maintain visual consistency. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render(Users.SlotContent(e.detail.rows), table) } return html` <gds-table ${ref(tableRef)} headline=\"${args.headline}\" summary=\"${args.summary}\" searchable settings .density=\"${args.density}\" .columns=\"${args.columns}\" .data=\"${args.data}\" @gds-table-data-loaded=${handleDataLoaded} > </gds-table> ` }, }"
|
|
35402
35431
|
},
|
|
35403
35432
|
{
|
|
35404
35433
|
"kind": "variable",
|
|
@@ -35422,7 +35451,7 @@
|
|
|
35422
35451
|
"type": {
|
|
35423
35452
|
"text": "Story"
|
|
35424
35453
|
},
|
|
35425
|
-
"default": "{ args: { columns: Users.Columns, data: Users.Data, }, parameters: { docs: { description: { story: ` Use slots to add custom controls to the table header and
|
|
35454
|
+
"default": "{ args: { columns: Users.Columns, data: Users.Data, }, parameters: { docs: { description: { story: ` Use slots to add custom controls to the table header, footer, and content areas. - **header-lead**: Add filtering/sorting controls at the start of the header. - **header-trail**: Add actions (e.g., export buttons) at the end of the header. - **footer**: Replace the default pagination footer with custom content. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render(Users.SlotContent(e.detail.rows), table) } return html` <gds-table ${ref(tableRef)} .columns=\"${args.columns}\" .data=\"${args.data}\" rows=\"4\" settings searchable @gds-table-data-loaded=${handleDataLoaded} > <gds-dropdown size=\"small\" slot=\"header-lead\" plain searchable> <span slot=\"trigger\">Sorting</span> <gds-option value=\"by-name\">Sort by Name</gds-option> <gds-option value=\"by-status\">Sort by Status</gds-option> </gds-dropdown> <gds-button slot=\"header-trail\" rank=\"secondary\" size=\"small\"> Export </gds-button> </gds-table> ` }, }"
|
|
35426
35455
|
},
|
|
35427
35456
|
{
|
|
35428
35457
|
"kind": "variable",
|
|
@@ -35434,11 +35463,11 @@
|
|
|
35434
35463
|
},
|
|
35435
35464
|
{
|
|
35436
35465
|
"kind": "variable",
|
|
35437
|
-
"name": "
|
|
35466
|
+
"name": "SlotComposition",
|
|
35438
35467
|
"type": {
|
|
35439
35468
|
"text": "Story"
|
|
35440
35469
|
},
|
|
35441
|
-
"default": "{ args: { columns: Users.Columns, data: Users.Data, }, parameters: { docs: { description: { story: `
|
|
35470
|
+
"default": "{ args: { columns: Users.Columns, data: Users.Data, headline: 'User Management', summary: 'Overview of all users in the system', selectable: true, searchable: true, settings: true, density: 'comfortable', }, parameters: { docs: { description: { story: ` Slot composition lets you render custom components inside table cells using standard web component slots. Each row needs a **unique key** for slot naming set via the \\`key\\` parameter in \\`Slot()\\`, or it falls back to \\`row.id\\`, then the row index. #### 1. Compose data with \\`Slot()\\` \\`\\`\\`ts // With explicit unique key (value, slots, key) const data = users.map(row => ({ ...row, name: Slot(row.name, ['avatar', 'value'], row.accountId), email: Slot(row.email, ['value', 'copy-button'], row.accountId), status: Slot(row.status, ['status'], row.accountId), })) // Without key - falls back to row.id, then row index const data = users.map(row => ({ ...row, name: Slot(row.name, ['avatar', 'value']), email: Slot(row.email, ['value', 'copy-button']), status: Slot(row.status, ['status']), })) \\`\\`\\` The arguments are positional: \\`Slot(value, slots, key)\\` or \\`Slot(value, key, slots)\\`. The **value** is used for sorting/search, **slots** is an ordered array of slot ids (include \\`'value'\\` to render the plain text alongside your components), and **key** is an optional \\`string | number\\` used as a stable row identifier. #### 2. Render slot content on data load \\`\\`\\`ts @gds-table-data-loaded=\\${(e) => { render(slotContent(e.detail.rows), tableEl) }} \\`\\`\\` #### 3. Slot naming convention The slot name follows the pattern \\`columnKey:rowKey:slotId\\`. \\`\\`\\`html <!-- When key is set to row.accountId (e.g. \"ACC-1042\") --> <gds-badge slot=\"status:ACC-1042:status\" variant=\"positive\">Active</gds-badge> <gds-button slot=\"email:ACC-1042:copy-button\" rank=\"tertiary\" size=\"small\"> <gds-icon-copy></gds-icon-copy> </gds-button> <!-- When no key is set and row.id is 42 --> <gds-badge slot=\"status:42:status\" variant=\"positive\">Active</gds-badge> <gds-button slot=\"email:42:copy-button\" rank=\"tertiary\" size=\"small\"> <gds-icon-copy></gds-icon-copy> </gds-button> <!-- When no key and no row.id - falls back to row index (1-based) --> <gds-badge slot=\"status:1:status\" variant=\"positive\">Active</gds-badge> \\`\\`\\` Only the current page's slot content is rendered - previous elements are replaced on page change. > See the **Developer Guide** for full details on framework integration and the \\`Slot()\\` API. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render(Users.SlotContent(e.detail.rows), table) } return html` <gds-table ${ref(tableRef)} .columns=\"${args.columns}\" .data=\"${args.data}\" .headline=\"${args.headline}\" .summary=\"${args.summary}\" ?selectable=\"${args.selectable}\" ?searchable=\"${args.searchable}\" ?settings=\"${args.settings}\" density=\"${args.density}\" responsive rows=\"5\" @gds-table-data-loaded=${handleDataLoaded} > </gds-table> ` }, }"
|
|
35442
35471
|
},
|
|
35443
35472
|
{
|
|
35444
35473
|
"kind": "variable",
|
|
@@ -35447,14 +35476,6 @@
|
|
|
35447
35476
|
"text": "Story"
|
|
35448
35477
|
},
|
|
35449
35478
|
"default": "{ args: { columns: Users.Columns, data: Users.Data, }, parameters: { docs: { description: { story: ` The table component dispatches events for various user interactions. **Pagination Events** - **gds-page-change**: Fired when the active page changes. Detail: \\`{ page: number }\\` - **gds-rows-change**: Fired when the rows per page value changes. Detail: \\`{ rows: number }\\` **Sorting Events** - **gds-sort-change**: Fired when sorting changes. Detail: \\`{ sortColumn: string, sortDirection: 'asc' | 'desc' }\\` **Data Events** - **gds-table-data-loaded**: Fired when data is successfully loaded - **gds-table-data-error**: Fired when data loading fails - **gds-table-selection**: Fired when row selection changes This example demonstrates listening to pagination and sorting events and displaying the current state. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const state = { currentPage: 1, currentRows: 10, sortColumn: '', sortDirection: 'asc', } const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render(Users.SlotContent(e.detail.rows), table) } const handlePageChange = (e: CustomEvent) => { console.log('🔔 Page change event:', e.detail) state.currentPage = e.detail.page const pageEl = document.querySelector('#page-status') if (pageEl) { pageEl.textContent = `Page: ${state.currentPage}` } } const handleRowsChange = (e: CustomEvent) => { console.log('🔔 Rows change event:', e.detail) state.currentRows = e.detail.rows const rowsEl = document.querySelector('#rows-status') if (rowsEl) { rowsEl.textContent = `Rows: ${state.currentRows}` } } const handleSortChange = (e: CustomEvent) => { console.log('🔔 Sort change event:', e.detail) state.sortColumn = e.detail.sortColumn state.sortDirection = e.detail.sortDirection const sortEl = document.querySelector('#sort-status') if (sortEl) { sortEl.textContent = `${state.sortColumn} (${state.sortDirection})` } } return html` <gds-flex flex-direction=\"column\" gap=\"l\"> <gds-flex flex-direction=\"column\" gap=\"m\"> <gds-card variant=\"secondary\" padding=\"m\" border-radius=\"m\"> <gds-flex flex-direction=\"column\" gap=\"s\"> <gds-text font=\"heading-s\">Event Monitor</gds-text> <gds-text font=\"detail-book-s\" color=\"neutral-01\"> Open your browser console (F12) to see event logs </gds-text> <gds-flex gap=\"m\"> <gds-flex flex-direction=\"column\" gap=\"xs\" flex=\"1\"> <gds-text font=\"detail-book-s\" color=\"neutral-01\"> Current Page </gds-text> <gds-text id=\"page-status\" font=\"body-regular-m\" color=\"primary\" > Page: ${state.currentPage} </gds-text> </gds-flex> <gds-flex flex-direction=\"column\" gap=\"xs\" flex=\"1\"> <gds-text font=\"detail-book-s\" color=\"neutral-01\"> Rows Per Page </gds-text> <gds-text id=\"rows-status\" font=\"body-regular-m\" color=\"primary\" > Rows: ${state.currentRows} </gds-text> </gds-flex> <gds-flex flex-direction=\"column\" gap=\"xs\" flex=\"1\"> <gds-text font=\"detail-book-s\" color=\"neutral-01\"> Sort Column </gds-text> <gds-text id=\"sort-status\" font=\"body-regular-m\" color=\"primary\" > ${state.sortColumn ? `${state.sortColumn} (${state.sortDirection})` : 'None'} </gds-text> </gds-flex> </gds-flex> </gds-flex> </gds-card> </gds-flex> <gds-table ${ref(tableRef)} .columns=\"${args.columns}\" .data=\"${args.data}\" rows=\"5\" selectable searchable settings @gds-table-data-loaded=${handleDataLoaded} @gds-page-change=${(e: CustomEvent) => handlePageChange(e)} @gds-rows-change=${(e: CustomEvent) => handleRowsChange(e)} @gds-sort-change=${(e: CustomEvent) => handleSortChange(e)} > </gds-table> </gds-flex> ` }, }"
|
|
35450
|
-
},
|
|
35451
|
-
{
|
|
35452
|
-
"kind": "variable",
|
|
35453
|
-
"name": "SlotComposition",
|
|
35454
|
-
"type": {
|
|
35455
|
-
"text": "Story"
|
|
35456
|
-
},
|
|
35457
|
-
"default": "{ args: { columns: Users.Columns, data: Users.Data, headline: 'User Management', summary: 'Overview of all users in the system', selectable: true, searchable: true, settings: true, density: 'comfortable', }, parameters: { docs: { description: { story: ` Demonstrates dynamic slot composition for data-driven content injection into table cells. **Pattern:** Generate slots using \\`columnKey:rowKey:slotId\\` naming convention. Slot content is generated from \\`Users.SlotContent(rows)\\` which receives the current page's rows from the \\`gds-table-data-loaded\\` event and creates per-row elements (avatars, copy icons, download icons). Only the current page's slot content is rendered — when pages change, previous slot elements are replaced with new ones for the visible rows. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render(Users.SlotContent(e.detail.rows), table) } return html` <gds-table ${ref(tableRef)} .columns=\"${args.columns}\" .data=\"${args.data}\" .headline=\"${args.headline}\" .summary=\"${args.summary}\" ?selectable=\"${args.selectable}\" ?searchable=\"${args.searchable}\" ?settings=\"${args.settings}\" density=\"${args.density}\" responsive rows=\"5\" @gds-table-data-loaded=${handleDataLoaded} > </gds-table> ` }, }"
|
|
35458
35479
|
}
|
|
35459
35480
|
],
|
|
35460
35481
|
"exports": [
|
|
@@ -35530,6 +35551,14 @@
|
|
|
35530
35551
|
"module": "src/components/table/table.stories.ts"
|
|
35531
35552
|
}
|
|
35532
35553
|
},
|
|
35554
|
+
{
|
|
35555
|
+
"kind": "js",
|
|
35556
|
+
"name": "Tfoot",
|
|
35557
|
+
"declaration": {
|
|
35558
|
+
"name": "Tfoot",
|
|
35559
|
+
"module": "src/components/table/table.stories.ts"
|
|
35560
|
+
}
|
|
35561
|
+
},
|
|
35533
35562
|
{
|
|
35534
35563
|
"kind": "js",
|
|
35535
35564
|
"name": "Headline",
|
|
@@ -35596,9 +35625,9 @@
|
|
|
35596
35625
|
},
|
|
35597
35626
|
{
|
|
35598
35627
|
"kind": "js",
|
|
35599
|
-
"name": "
|
|
35628
|
+
"name": "SlotComposition",
|
|
35600
35629
|
"declaration": {
|
|
35601
|
-
"name": "
|
|
35630
|
+
"name": "SlotComposition",
|
|
35602
35631
|
"module": "src/components/table/table.stories.ts"
|
|
35603
35632
|
}
|
|
35604
35633
|
},
|
|
@@ -35609,14 +35638,6 @@
|
|
|
35609
35638
|
"name": "Events",
|
|
35610
35639
|
"module": "src/components/table/table.stories.ts"
|
|
35611
35640
|
}
|
|
35612
|
-
},
|
|
35613
|
-
{
|
|
35614
|
-
"kind": "js",
|
|
35615
|
-
"name": "SlotComposition",
|
|
35616
|
-
"declaration": {
|
|
35617
|
-
"name": "SlotComposition",
|
|
35618
|
-
"module": "src/components/table/table.stories.ts"
|
|
35619
|
-
}
|
|
35620
35641
|
}
|
|
35621
35642
|
]
|
|
35622
35643
|
},
|
|
@@ -35627,7 +35648,7 @@
|
|
|
35627
35648
|
{
|
|
35628
35649
|
"kind": "variable",
|
|
35629
35650
|
"name": "TableStyles",
|
|
35630
|
-
"default": "css` /* Host & Container */ :host { display: block; font: var(--gds-sys-text-detail-book-s); color: var(--gds-sys-color-content-neutral-01); text-align: left; --_table-height: 80vh; --_table-border-width: var(--gds-sys-space-5xs); --_table-border-color: var(--gds-sys-color-border-subtle-01); } /* Density Modes */ /* Compact density */ .table.compact { --table-cell-padding-y: var(--gds-sys-space-xs); --table-cell-padding-x: var(--gds-sys-space-s); --table-header-padding-y: var(--gds-sys-space-xs); --table-header-padding-x: var(--gds-sys-space-s); --table-row-min-height: var(--gds-sys-space-xl); --table-font-size: var(--gds-sys-text-detail-book-s); --table-gap: var(--gds-sys-space-m); --table-border-spacing: 0 var(--gds-sys-space-5xs); --table-data-padding: var(--gds-sys-space-5xs) var(--gds-sys-space-4xs); } /* Comfortable default */ .table.comfortable { --table-cell-padding-y: var(--gds-sys-space-s); --table-cell-padding-x: var(--gds-sys-space-m); --table-header-padding-y: var(--gds-sys-space-s); --table-header-padding-x: var(--gds-sys-space-m); --table-row-min-height: var(--gds-sys-space-4xl); --table-font-size: var(--gds-sys-text-detail-book-s); --table-gap: var(--gds-sys-space-l); --table-border-spacing: 0 var(--gds-sys-space-4xs); --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-2xs); } /* Spacious density */ .table.spacious { --table-cell-padding-y: var(--gds-sys-space-l); --table-cell-padding-x: var(--gds-sys-space-l); --table-header-padding-y: var(--gds-sys-space-l); --table-header-padding-x: var(--gds-sys-space-l); --table-row-min-height: var(--gds-sys-space-5xl); --table-font-size: var(--gds-sys-text-detail-book-m); --table-gap: var(--gds-sys-space-xl); --table-border-spacing: 0 var(--gds-sys-space-3xs); --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-xs); } /* Secondary and Tertiary */ .data.variant-secondary, .data.variant-tertiary { --_table-header-bg: var(--gds-sys-color-l2-neutral-01); --_table-header-hover: var(--gds-sys-color-l3-neutral-02); --_table-header-active: var(--gds-sys-color-l3-neutral-03); --_table-row-hover: var(--gds-sys-color-l2-neutral-01); --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-03); --_table-row-striped: var(--gds-sys-color-l2-neutral-01); } /* Primary variant */ .data.variant-primary { --_table-header-bg: var(--gds-sys-color-l2-neutral-02); --_table-header-hover: var(--gds-sys-color-l3-neutral-02); --_table-header-active: var(--gds-sys-color-l3-neutral-03); --_table-row-hover: color-mix( in srgb, var(--gds-sys-color-l3-neutral-02), var(--gds-sys-color-state-neutral-01) ); --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-03); --_table-row-striped: var(--gds-sys-color-l2-neutral-01); } /* Apply density variables */ .table { display: flex; flex-direction: column; gap: var(--table-gap); font: var(--table-font-size); width: 100%; } /* Container that enables horizontal scroll */ .data { width: 100%; overflow-x: auto; overflow-y: auto; max-height: var(--_table-height); box-sizing: border-box; padding: var(--table-data-padding); position: relative; border-radius: var(--gds-sys-radius-m); } .data:focus { outline: none; } .table-card { outline-color: transparent; outline-offset: var(--gds-sys-space-4xs); outline-style: solid; outline-width: var(--gds-sys-space-4xs); } .table-card:has(.data:focus-visible) { outline-color: var(--gds-sys-color-content-neutral-01); } .table-card:has(.data:focus-within:not(:focus-visible)) { outline-color: transparent; } table { width: max-content; min-width: 100%; table-layout: auto; border: none; border-collapse: separate; border-spacing: var(--table-border-spacing); } tbody td { font-weight: normal; padding-block: var(--table-cell-padding-y); padding-inline: var(--table-cell-padding-x); } thead tr th:first-child, tbody tr:hover td:first-child, tbody tr.selected td:first-child, .striped tbody tr td:first-child { border-top-left-radius: var(--gds-sys-radius-s); border-bottom-left-radius: var(--gds-sys-radius-s); } thead tr th:last-child, tbody tr:hover td:last-child, tbody tr.selected td:last-child, .striped tbody tr td:last-child { border-top-right-radius: var(--gds-sys-radius-s); border-bottom-right-radius: var(--gds-sys-radius-s); } /* Table Header */ thead tr th { padding-block: var(--gds-sys-space-3xs); background: var(--_table-header-bg); } thead th.sortable { cursor: pointer; user-select: none; } /* Column header content layout */ .column-header { display: flex; align-items: center; position: relative; justify-content: space-between; min-height: var(--gds-sys-space-l); gap: var(--table-gap); padding: calc(var(--table-cell-padding-y) / 2) var(--table-cell-padding-x); border-radius: var(--gds-sys-radius-xs); transition: all var(--gds-sys-motion-duration-fast); } th.sortable .column-header:hover { background-color: var(--_table-header-hover); } th.sortable:active .column-header { background-color: var(--_table-header-active); } .column-label { font-weight: var(--gds-sys-text-weight-book); } .sort-icon { display: flex; align-items: center; justify-content: center; transition-property: opacity; transition-duration: var(--gds-sys-motion-duration-fast); transition-timing-function: var(--gds-sys-motion-easing-ease); opacity: 0; } @media (hover: hover) and (min-width: 768px) { thead th.sortable:hover:not(.sorted) .sort-icon { opacity: 0.8; } } thead th.sorted .sort-icon { opacity: 1; } /* Table Body */ tbody tr td { border-top-style: solid; border-top-width: var(--_table-border-width); border-top-color: var(--_table-border-color); } tbody tr.loading { opacity: 0.3; pointer-events: none; } tbody tr.loading:not(:first-child) td { border-color: var(--gds-sys-color-border-subtle-02); } /* Row Selection */ .checkbox-cell { min-width: var(--gds-sys-space-l); width: var(--gds-sys-space-l); max-width: var(--gds-sys-space-l); padding: var(--table-cell-padding-y) var(--table-cell-padding-x); } tbody tr:hover td, tbody tr.selected td, tbody tr:first-child td { border-color: transparent; } tbody tr:hover + tr td, tbody tr.selected + tr td { border-color: transparent; } tbody tr.selected:last-child td { border-bottom-color: transparent; } tbody tr.selected { background-color: var(--gds-sys-color-l3-neutral-02); } @media (hover: hover) and (min-width: 768px) { tbody tr.selected:hover { background-color: var(--_table-row-selected-hover); } tbody tr:hover:not(.selected) { background-color: var(--_table-row-hover); } } tbody tr:hover, tbody tr:hover + tr { border-color: transparent; } /* Striped */ .striped tbody tr:not(.selected, :hover):nth-child(even) td { background-color: var(--_table-row-striped); } .striped tbody tr td { border-color: transparent; } /* Header & Footer Layout */ .header { display: flex; justify-content: space-between; transition-property: opacity, translate; transition-duration: var(--gds-sys-motion-duration-fast); transition-timing-function: var(--gds-sys-motion-easing-ease); @starting-style { opacity: 0; translate: 0 -2px; } } /* Shared layout for header and footer sections */ .header .lead, .header .trail { display: flex; align-items: center; gap: calc(var(--table-gap) * 0.8); width: max-content; } /* Cell Content & Alignment */ .cell-content { width: 100%; height: 100%; display: flex; align-items: center; gap: 10px; } /* Wrapping utilities */ td.wrap .cell-content { white-space: normal; word-wrap: break-word; overflow-wrap: break-word; } td.wrap, th.wrap { width: var(--cell-width); } /* Justify utilities */ .justify-start .cell-content { text-align: left; justify-content: start; } .justify-center .cell-content { text-align: center; justify-content: center; } .justify-space-between .cell-content { text-align: left; justify-content: space-between; } .justify-end .cell-content { text-align: right; justify-content: flex-end; } .justify-end:not(.sortable) .column-header { text-align: right; justify-content: flex-end; } .sortable.justify-end .column-header { flex-direction: row-reverse; } th.actions { padding-inline: 0; } th.actions.justify-end .column-header { justify-content: flex-end; } /* Align utilities */ td { height: 100%; } .align-start { vertical-align: top; } .align-end { vertical-align: bottom; } .align-center { vertical-align: middle; } .align-start .cell-content { align-items: start; } .align-center .cell-content { align-items: center; } .align-stretch .cell-content { align-items: stretch; } .align-end .cell-content { align-items: end; } /* Responsive Design */ @media (max-width: 760px) { .responsive.data { display: contents; } .responsive table { max-width: 100%; } .responsive thead { position: sticky; top: var(--gds-sys-space-s); z-index: 2; border-radius: var(--gds-sys-radius-s); } .responsive thead { display: none; } .responsive tbody { display: flex; flex-direction: column; gap: var(--table-gap); } .responsive tbody tr { display: flex; flex-direction: column; padding: var(--table-cell-padding-x); border: var(--gds-sys-space-5xs) solid var(--gds-sys-color-border-subtle-01); border-radius: var(--gds-sys-space-s); margin: 0; } .responsive tbody tr:hover, .responsive tbody tr:hover + tr { border-color: var(--gds-sys-color-border-subtle-01); } .responsive tr.selected { border-color: transparent; } .responsive td { width: 100%; max-width: 100%; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; padding: var(--gds-sys-space-xs) 0; border: none; } .responsive td .column-label { text-align: left; flex: 1; min-width: 0; } .responsive td .cell-content { justify-content: flex-start; flex: 1; width: 100%; gap: var(--gds-sys-space-s); } .responsive td .cell-wrapped-content { flex: 1; justify-content: flex-end; text-align: right; } .responsive tr:hover, .responsive tr td:hover { background: none; } } /* Medium screens: input and dropdown side by side */ @media (max-width: 760px) and (min-width: 480px) { .header { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'input dropdown' 'lead trail'; gap: calc(var(--table-gap) / 2); } .header .lead [gds-element='gds-input'] { grid-area: input; } .header .trail [gds-element='gds-dropdown'] { grid-area: dropdown; } .header .lead ::slotted(*:not([gds-element='gds-input'])) { grid-area: lead; } .header .trail ::slotted(*:not([gds-element='gds-dropdown'])) { grid-area: trail; } .header .lead, .header .trail { display: contents; } } /* Small screens: fully stacked */ @media (max-width: 479px) { .header { display: grid; grid-template-columns: 1fr; grid-template-areas: 'input' 'dropdown' 'lead' 'trail'; gap: calc(var(--table-gap) / 2); } .header .lead [gds-element='gds-input'] { grid-area: input; } .header .trail [gds-element='gds-dropdown'] { grid-area: dropdown; } .header .lead ::slotted(*:not([gds-element='gds-input'])) { grid-area: lead; } .header .trail ::slotted(*:not([gds-element='gds-dropdown'])) { grid-area: trail; } .header .lead, .header .trail { display: contents; } } /* Skeleton Loading State */ .skeleton { display: inline-block; background: linear-gradient( 90deg, var(--gds-sys-color-l3-neutral-01) 25%, var(--gds-sys-color-l2-neutral-01) 50%, var(--gds-sys-color-l3-neutral-01) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--gds-sys-space-max); opacity: 0.1; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Skeleton elements */ .skeleton-text { height: 14px; width: 80%; min-width: 60px; } .skeleton-checkbox { height: 18px; width: 18px; border-radius: var(--gds-sys-radius-3xs); } .skeleton-action { height: 24px; width: 24px; border-radius: var(--gds-sys-radius-max); } /* Skeleton row styling */ .skeleton-row { opacity: 1; pointer-events: none; } .skeleton-row td { padding: var(--table-cell-padding-y) var(--table-cell-padding-x); } /* Different skeleton text widths for more natural look */ .skeleton-row:nth-child(odd) .skeleton-text { width: 70%; } .skeleton-row:nth-child(3n) .skeleton-text { width: 90%; } .skeleton-row:nth-child(4n) .skeleton-text { width: 60%; } /* Visually hidden - screen reader only without layout impact */ .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; height: 0px; width: 0px; } /* Scroll driven animation */ @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { tbody tr { animation-name: ROW_ANIMATION_VERTICAL, ROW_ANIMATION_VERTICAL; animation-fill-mode: both; animation-timing-function: ease-in-out; animation-direction: normal, reverse; animation-timeline: view(block); animation-range: entry -40px, exit -40px; } @keyframes ROW_ANIMATION_VERTICAL { 0% { opacity: 0; filter: blur(12px); translate: 0 12px; } } thead { position: sticky; top: 4px; z-index: 10; transition: box-shadow 200ms ease; border-radius: var(--gds-sys-radius-s); will-change: transform; } thead { background-color: var(--gds-sys-color-l1-neutral-01); } .data.scrolled thead { box-shadow: var(--gds-sys-shadow-l-01), var(--gds-sys-shadow-l-02), inset 0 -4px 6px var(--gds-sys-color-l1-neutral-01); backdrop-filter: blur(8px); background: color-mix( in srgb, var(--gds-sys-color-l2-neutral-01), transparent 30% ); } @media (prefers-reduced-transparency: no-preference) { .data.scrolled thead tr th { background: transparent; } } /* Horizontal scroll */ @property --_start-fade { syntax: '<length>'; inherits: false; initial-value: 0; } @property --_end-fade { syntax: '<length>'; inherits: false; initial-value: 0; } @keyframes scroll-fade { 0% { --_start-fade: 0; } 10%, 100% { --_start-fade: var(--gds-sys-space-4xl); } 0%, 90% { --_end-fade: var(--gds-sys-space-4xl); } 100% { --_end-fade: 0; } } .data { overflow-x: auto; mask: linear-gradient( to right, #0000, #ffff var(--_start-fade) calc(100% - var(--_end-fade)), #0000 ); animation: scroll-fade; animation-timeline: --scroll-fade; scroll-timeline: --scroll-fade x; } } } @media (max-width: 760px) { .responsive, .responsive tbody tr { animation: none; } } @supports not (animation-timeline: scroll()) { tbody tr { will-change: opacity, filter, translate; transition: all 242ms cubic-bezier(0.22, 0.61, 0.36, 1); @starting-style { opacity: 0; filter: blur(20px); translate: 0 10px; } } } /* Scrollbar */ .data { --_scrollbar-color-thumb: var(--gds-sys-color-content-neutral-02); --_scrollbar-color-track: var(--gds-sys-color-l3-neutral-02); --_scrollbar-width: var(--gds-sys-space-2xs); } @supports (scrollbar-width: auto) { .data { scrollbar-color: var(--_scrollbar-color-thumb) transparent; scrollbar-width: var(--_scrollbar-width); } } @supports selector(::-webkit-scrollbar) { .data::-webkit-scrollbar { width: var(--_scrollbar-width); height: var(--_scrollbar-width); } .data::-webkit-scrollbar-track { background: transparent; } .data::-webkit-scrollbar-thumb { background: var(--_scrollbar-color-thumb); border-radius: var(--gds-sys-radius-max); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { tbody tr, tbody td .cell-content, thead th .column-header, .sort-icon, .column-header, .header { transition: none; animation: none; } } `"
|
|
35651
|
+
"default": "css` /* Host & Container */ :host { display: block; font: var(--gds-sys-text-detail-book-s); color: var(--gds-sys-color-content-neutral-01); text-align: left; --_table-height: 80vh; --_table-border-width: var(--gds-sys-space-5xs); --_table-border-color: var(--gds-sys-color-border-subtle-01); } /* Density Modes */ /* Compact density */ .table.compact { --table-cell-padding-y: var(--gds-sys-space-xs); --table-cell-padding-x: var(--gds-sys-space-s); --table-header-padding-y: var(--gds-sys-space-xs); --table-header-padding-x: var(--gds-sys-space-s); --table-row-min-height: var(--gds-sys-space-xl); --table-font-size: var(--gds-sys-text-detail-book-s); --table-gap: var(--gds-sys-space-m); --table-border-spacing: 0 var(--gds-sys-space-5xs); --table-data-padding: var(--gds-sys-space-5xs) var(--gds-sys-space-4xs); --table-data-padding-x: var(--gds-sys-space-4xs); } /* Comfortable default */ .table.comfortable { --table-cell-padding-y: var(--gds-sys-space-s); --table-cell-padding-x: var(--gds-sys-space-m); --table-header-padding-y: var(--gds-sys-space-s); --table-header-padding-x: var(--gds-sys-space-m); --table-row-min-height: var(--gds-sys-space-4xl); --table-font-size: var(--gds-sys-text-detail-book-s); --table-gap: var(--gds-sys-space-l); --table-border-spacing: 0 var(--gds-sys-space-4xs); --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-2xs); --table-data-padding-x: var(--gds-sys-space-2xs); } /* Spacious density */ .table.spacious { --table-cell-padding-y: var(--gds-sys-space-l); --table-cell-padding-x: var(--gds-sys-space-l); --table-header-padding-y: var(--gds-sys-space-l); --table-header-padding-x: var(--gds-sys-space-l); --table-row-min-height: var(--gds-sys-space-5xl); --table-font-size: var(--gds-sys-text-detail-book-m); --table-gap: var(--gds-sys-space-xl); --table-border-spacing: 0 var(--gds-sys-space-3xs); --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-xs); --table-data-padding-x: var(--gds-sys-space-xs); } /* Secondary and Tertiary */ .data.variant-secondary, .data.variant-tertiary { --_table-header-bg: var(--gds-sys-color-l2-neutral-01); --_table-header-hover: var(--gds-sys-color-l3-neutral-02); --_table-header-active: var(--gds-sys-color-l3-neutral-03); --_table-row-hover: var(--gds-sys-color-l2-neutral-01); --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-03); --_table-row-striped: var(--gds-sys-color-l2-neutral-01); --_table-card-bg: var(--gds-sys-color-l1-neutral-01); } /* Primary variant */ .data.variant-primary { --_table-header-bg: var(--gds-sys-color-l2-neutral-02); --_table-header-hover: var(--gds-sys-color-l3-neutral-02); --_table-header-active: var(--gds-sys-color-l3-neutral-03); --_table-row-hover: color-mix( in srgb, var(--gds-sys-color-l3-neutral-02), var(--gds-sys-color-state-neutral-01) ); --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-03); --_table-row-striped: var(--gds-sys-color-l2-neutral-01); --_table-card-bg: var(--gds-sys-color-l2-neutral-01); } /* Apply density variables */ .table { display: flex; flex-direction: column; gap: var(--table-gap); font: var(--table-font-size); width: 100%; } /* Container that enables horizontal scroll */ .data { width: 100%; overflow-x: auto; overflow-y: auto; max-height: var(--_table-height); box-sizing: border-box; padding: var(--table-data-padding); position: relative; border-radius: var(--gds-sys-radius-m); } .data:focus { outline: none; } .table-card { outline-color: transparent; outline-offset: var(--gds-sys-space-4xs); outline-style: solid; outline-width: var(--gds-sys-space-4xs); } .table-card:has(.data:focus-visible) { outline-color: var(--gds-sys-color-content-neutral-01); } .table-card:has(.data:focus-within:not(:focus-visible)) { outline-color: transparent; } table { width: max-content; min-width: 100%; table-layout: auto; border: none; border-collapse: separate; border-spacing: var(--table-border-spacing); } tbody td { font-weight: normal; padding-block: var(--table-cell-padding-y); padding-inline: var(--table-cell-padding-x); } thead tr th:first-child, tbody tr:hover td:first-child, tbody tr.selected td:first-child, .striped tbody tr td:first-child { border-top-left-radius: var(--gds-sys-radius-s); border-bottom-left-radius: var(--gds-sys-radius-s); } thead tr th:last-child, tbody tr:hover td:last-child, tbody tr.selected td:last-child, .striped tbody tr td:last-child { border-top-right-radius: var(--gds-sys-radius-s); border-bottom-right-radius: var(--gds-sys-radius-s); } /* Table Header */ thead tr th { padding-block: var(--gds-sys-space-3xs); background: var(--_table-header-bg); } thead th.sortable { cursor: pointer; user-select: none; } /* Column header content layout */ .column-header { display: flex; align-items: center; position: relative; justify-content: space-between; min-height: var(--gds-sys-space-l); gap: var(--table-gap); padding: calc(var(--table-cell-padding-y) / 2) var(--table-cell-padding-x); border-radius: var(--gds-sys-radius-xs); transition: all var(--gds-sys-motion-duration-fast); } th.sortable .column-header:hover { background-color: var(--_table-header-hover); } th.sortable:active .column-header { background-color: var(--_table-header-active); } .column-label { font-weight: var(--gds-sys-text-weight-book); } .sort-icon { display: flex; align-items: center; justify-content: center; transition-property: opacity; transition-duration: var(--gds-sys-motion-duration-fast); transition-timing-function: var(--gds-sys-motion-easing-ease); opacity: 0; } @media (hover: hover) and (min-width: 768px) { thead th.sortable:hover:not(.sorted) .sort-icon { opacity: 0.8; } } thead th.sorted .sort-icon { opacity: 1; } /* Table Body */ tbody tr td { border-top-style: solid; border-top-width: var(--_table-border-width); border-top-color: var(--_table-border-color); } tbody tr.loading { opacity: 0.3; pointer-events: none; } tbody tr.loading:not(:first-child) td { border-color: var(--gds-sys-color-border-subtle-02); } /* Row Selection */ .checkbox-cell { min-width: var(--gds-sys-space-l); width: var(--gds-sys-space-l); max-width: var(--gds-sys-space-l); padding: var(--table-cell-padding-y) var(--table-cell-padding-x); } tbody tr:hover td, tbody tr.selected td, tbody tr:first-child td { border-color: transparent; } tbody tr:hover + tr td, tbody tr.selected + tr td { border-color: transparent; } tbody tr.selected:last-child td { border-bottom-color: transparent; } tbody tr.selected { background-color: var(--gds-sys-color-l3-neutral-02); } @media (hover: hover) and (min-width: 768px) { tbody tr.selected:hover { background-color: var(--_table-row-selected-hover); } tbody tr:hover:not(.selected) { background-color: var(--_table-row-hover); } } tbody tr:hover, tbody tr:hover + tr { border-color: transparent; } /* Striped */ .striped tbody tr:not(.selected, :hover):nth-child(even) td { background-color: var(--_table-row-striped); } .striped tbody tr td { border-color: transparent; } /* Header & Footer Layout */ .header { display: flex; justify-content: space-between; transition-property: opacity, translate; transition-duration: var(--gds-sys-motion-duration-fast); transition-timing-function: var(--gds-sys-motion-easing-ease); @starting-style { opacity: 0; translate: 0 -2px; } } /* Shared layout for header and footer sections */ .header .lead, .header .trail { display: flex; align-items: center; gap: calc(var(--table-gap) * 0.8); width: max-content; } /* Cell Content & Alignment */ .cell-content { width: 100%; height: 100%; display: flex; align-items: center; gap: 10px; } /* Wrapping utilities */ td.wrap .cell-content { white-space: normal; word-wrap: break-word; overflow-wrap: break-word; } td.wrap, th.wrap { width: var(--cell-width); } /* Justify utilities */ .justify-start .cell-content { text-align: left; justify-content: start; } .justify-center .cell-content { text-align: center; justify-content: center; } .justify-space-between .cell-content { text-align: left; justify-content: space-between; } .justify-end .cell-content { text-align: right; justify-content: flex-end; } .justify-end:not(.sortable) .column-header { text-align: right; justify-content: flex-end; } .sortable.justify-end .column-header { flex-direction: row-reverse; } th.actions { padding-inline: 0; } th.actions.justify-end .column-header { justify-content: flex-end; } /* Sticky actions column */ th.actions.sticky, td.actions-cell.sticky { position: sticky; right: calc(-1 * var(--table-data-padding-x, 0px)); z-index: 1; width: max-content; padding-right: calc( var(--table-cell-padding-x) + var(--table-data-padding-x, 0px) ); } th.actions.sticky { z-index: 2; background: var(--_table-header-bg); } th.actions.sticky .column-header { justify-content: flex-end; } td.actions-cell.sticky { background: var(--_table-card-bg); } td.actions-cell.sticky .cell-content { justify-content: flex-end; position: relative; } /* Left gradient fade on sticky action cells */ td.actions-cell.sticky::before { content: ''; position: absolute; inset-block: 0; right: 100%; width: var(--gds-sys-space-4xl); pointer-events: none; background: linear-gradient(to right, transparent, var(--_table-card-bg)); } th.actions.sticky::before { content: ''; position: absolute; inset-block: 0; right: 100%; width: var(--gds-sys-space-4xl); pointer-events: none; background: linear-gradient(to right, transparent, var(--_table-header-bg)); } /* Sticky action inherits row hover/selected/striped backgrounds */ tbody tr:hover td.actions-cell.sticky { background: var(--_table-row-hover); } tbody tr:hover td.actions-cell.sticky::before { background: linear-gradient(to right, transparent, var(--_table-row-hover)); } tbody tr.selected td.actions-cell.sticky { background: var(--gds-sys-color-l3-neutral-02); } tbody tr.selected td.actions-cell.sticky::before { background: linear-gradient( to right, transparent, var(--gds-sys-color-l3-neutral-02) ); } .striped tbody tr:not(.selected, :hover):nth-child(even) td.actions-cell.sticky { background: var(--_table-row-striped); } .striped tbody tr:not(.selected, :hover):nth-child(even) td.actions-cell.sticky::before { background: linear-gradient( to right, transparent, var(--_table-row-striped) ); } /* Table Footer Row */ tfoot.tablefoot tr td, tfoot.tablefoot tr th[scope='row'] { padding-block: var(--table-cell-padding-y); padding-inline: var(--table-cell-padding-x); background: var(--_table-header-bg); font-weight: normal; border-top: var(--_table-border-width) solid var(--_table-border-color); } tfoot.tablefoot tr th[scope='row'] { font-weight: var(--gds-sys-text-weight-book); } tfoot.tablefoot tr td:first-child, tfoot.tablefoot tr th:first-child { border-top-left-radius: var(--gds-sys-radius-s); border-bottom-left-radius: var(--gds-sys-radius-s); } tfoot.tablefoot tr td:last-child, tfoot.tablefoot tr th:last-child { border-top-right-radius: var(--gds-sys-radius-s); border-bottom-right-radius: var(--gds-sys-radius-s); } .tablefoot-label { font-weight: var(--gds-sys-text-weight-book); white-space: nowrap; } tfoot.tablefoot.sticky { position: sticky; bottom: 0; z-index: 10; will-change: transform; } /* When sticky tablefoot: move padding from .data to table, keep tfoot edge-to-edge */ .data:has(tfoot.tablefoot.sticky) { padding: 0; } .data:has(tfoot.tablefoot.sticky) table { padding-top: var(--table-data-padding-x); padding-inline: var(--table-data-padding-x); } tfoot.tablefoot.sticky tr td, tfoot.tablefoot.sticky tr th[scope='row'] { border-radius: 0; background: var(--_table-card-bg); border-top: var(--_table-border-width) solid var(--_table-border-color); } /* Align utilities */ td { height: 100%; } .align-start { vertical-align: top; } .align-end { vertical-align: bottom; } .align-center { vertical-align: middle; } .align-start .cell-content { align-items: start; } .align-center .cell-content { align-items: center; } .align-stretch .cell-content { align-items: stretch; } .align-end .cell-content { align-items: end; } /* Responsive Design */ @media (max-width: 760px) { .responsive.data { display: contents; } .responsive table { max-width: 100%; } .responsive thead { position: sticky; top: var(--gds-sys-space-s); z-index: 2; border-radius: var(--gds-sys-radius-s); } .responsive thead { display: none; } .responsive tbody { display: flex; flex-direction: column; gap: var(--table-gap); } .responsive tbody tr { display: flex; flex-direction: column; padding: var(--table-cell-padding-x); border: var(--gds-sys-space-5xs) solid var(--gds-sys-color-border-subtle-01); border-radius: var(--gds-sys-space-s); margin: 0; } .responsive tbody tr:hover, .responsive tbody tr:hover + tr { border-color: var(--gds-sys-color-border-subtle-01); } .responsive tr.selected { border-color: transparent; } .responsive td { width: 100%; max-width: 100%; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; padding: var(--gds-sys-space-xs) 0; border: none; } .responsive td .column-label { text-align: left; flex: 1; min-width: 0; } .responsive td .cell-content { justify-content: flex-start; flex: 1; width: 100%; gap: var(--gds-sys-space-s); } .responsive td .cell-wrapped-content { flex: 1; justify-content: flex-end; text-align: right; } .responsive tr:hover, .responsive tr td:hover { background: none; } } /* Medium screens: input and dropdown side by side */ @media (max-width: 760px) and (min-width: 480px) { .header { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'input dropdown' 'lead trail'; gap: calc(var(--table-gap) / 2); } .header .lead [gds-element='gds-input'] { grid-area: input; } .header .trail [gds-element='gds-dropdown'] { grid-area: dropdown; } .header .lead ::slotted(*:not([gds-element='gds-input'])) { grid-area: lead; } .header .trail ::slotted(*:not([gds-element='gds-dropdown'])) { grid-area: trail; } .header .lead, .header .trail { display: contents; } } /* Small screens: fully stacked */ @media (max-width: 479px) { .header { display: grid; grid-template-columns: 1fr; grid-template-areas: 'input' 'dropdown' 'lead' 'trail'; gap: calc(var(--table-gap) / 2); } .header .lead [gds-element='gds-input'] { grid-area: input; } .header .trail [gds-element='gds-dropdown'] { grid-area: dropdown; } .header .lead ::slotted(*:not([gds-element='gds-input'])) { grid-area: lead; } .header .trail ::slotted(*:not([gds-element='gds-dropdown'])) { grid-area: trail; } .header .lead, .header .trail { display: contents; } } /* Skeleton Loading State */ .skeleton { display: inline-block; background: linear-gradient( 90deg, var(--gds-sys-color-l3-neutral-01) 25%, var(--gds-sys-color-l2-neutral-01) 50%, var(--gds-sys-color-l3-neutral-01) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--gds-sys-space-max); opacity: 0.1; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Skeleton elements */ .skeleton-text { height: 14px; width: 80%; min-width: 60px; } .skeleton-checkbox { height: 18px; width: 18px; border-radius: var(--gds-sys-radius-3xs); } .skeleton-action { height: 24px; width: 24px; border-radius: var(--gds-sys-radius-max); } /* Skeleton row styling */ .skeleton-row { opacity: 1; pointer-events: none; } .skeleton-row td { padding: var(--table-cell-padding-y) var(--table-cell-padding-x); } /* Different skeleton text widths for more natural look */ .skeleton-row:nth-child(odd) .skeleton-text { width: 70%; } .skeleton-row:nth-child(3n) .skeleton-text { width: 90%; } .skeleton-row:nth-child(4n) .skeleton-text { width: 60%; } /* Visually hidden - screen reader only without layout impact */ .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; height: 0px; width: 0px; } /* Scroll driven animation */ @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { tbody tr { animation-name: ROW_ANIMATION_VERTICAL, ROW_ANIMATION_VERTICAL; animation-fill-mode: both; animation-timing-function: ease-in-out; animation-direction: normal, reverse; animation-timeline: view(block); animation-range: entry -40px, exit -40px; } @keyframes ROW_ANIMATION_VERTICAL { 0% { opacity: 0; filter: blur(12px); translate: 0 12px; } } thead { position: sticky; top: 4px; z-index: 10; transition: box-shadow 200ms ease; border-radius: var(--gds-sys-radius-s); will-change: transform; } thead { background-color: var(--gds-sys-color-l1-neutral-01); } .data.scrolled thead { box-shadow: var(--gds-sys-shadow-l-01), var(--gds-sys-shadow-l-02), inset 0 -4px 6px var(--gds-sys-color-l1-neutral-01); backdrop-filter: blur(8px); background: color-mix( in srgb, var(--gds-sys-color-l2-neutral-01), transparent 30% ); } @media (prefers-reduced-transparency: no-preference) { .data.scrolled thead tr th { background: transparent; } } /* Sticky table footer */ tfoot.tablefoot.sticky { background-color: var(--_table-card-bg); } tfoot.tablefoot.sticky tr td, tfoot.tablefoot.sticky tr th[scope='row'] { background: var(--_table-card-bg); } /* Horizontal scroll */ @property --_start-fade { syntax: '<length>'; inherits: false; initial-value: 0; } @property --_end-fade { syntax: '<length>'; inherits: false; initial-value: 0; } @keyframes scroll-fade { 0% { --_start-fade: 0px; --_end-fade: var(--gds-sys-space-4xl); } 1% { --_start-fade: var(--gds-sys-space-4xl); --_end-fade: var(--gds-sys-space-4xl); } 99% { --_start-fade: var(--gds-sys-space-4xl); --_end-fade: var(--gds-sys-space-4xl); } 100% { --_start-fade: var(--gds-sys-space-4xl); --_end-fade: 0px; } } .data { overflow-x: auto; mask: linear-gradient( to right, #0000, #ffff var(--_start-fade) calc(100% - var(--_end-fade)), #0000 ); animation: scroll-fade both linear; animation-timeline: scroll(self inline); } /* When sticky actions are present, remove the right fade.*/ .data:has(td.actions-cell.sticky) { mask: linear-gradient( to right, #0000, #ffff var(--_start-fade), #ffff 100% ); } } } @media (max-width: 760px) { .responsive, .responsive tbody tr { animation: none; } } @supports not (animation-timeline: scroll()) { tbody tr { will-change: opacity, filter, translate; transition: all 242ms cubic-bezier(0.22, 0.61, 0.36, 1); @starting-style { opacity: 0; filter: blur(20px); translate: 0 10px; } } } /* Scrollbar */ .data { --_scrollbar-color-thumb: var(--gds-sys-color-content-neutral-02); --_scrollbar-color-track: var(--gds-sys-color-l3-neutral-02); --_scrollbar-width: var(--gds-sys-space-2xs); } @supports (scrollbar-width: auto) { .data { scrollbar-color: var(--_scrollbar-color-thumb) transparent; scrollbar-width: var(--_scrollbar-width); } } @supports selector(::-webkit-scrollbar) { .data::-webkit-scrollbar { width: var(--_scrollbar-width); height: var(--_scrollbar-width); } .data::-webkit-scrollbar-track { background: transparent; } .data::-webkit-scrollbar-thumb { background: var(--_scrollbar-color-thumb); border-radius: var(--gds-sys-radius-max); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { tbody tr, tbody td .cell-content, thead th .column-header, .sort-icon, .column-header, .header { transition: none; animation: none; } } `"
|
|
35631
35652
|
}
|
|
35632
35653
|
],
|
|
35633
35654
|
"exports": [
|
|
@@ -35667,7 +35688,7 @@
|
|
|
35667
35688
|
"text": "{\n compact: {\n input: 'small',\n dropdown: 'small',\n },\n comfortable: {\n input: 'small',\n dropdown: 'small',\n },\n spacious: {\n input: 'large',\n dropdown: 'medium',\n },\n}"
|
|
35668
35689
|
},
|
|
35669
35690
|
"default": "{ compact: { input: 'small', dropdown: 'small', }, comfortable: { input: 'small', dropdown: 'small', }, spacious: { input: 'large', dropdown: 'medium', }, }",
|
|
35670
|
-
"description": "Internal density configuration for the table's built-in UI controls\n(search input, column settings dropdown). Does not affect user-provided\nslot content
|
|
35691
|
+
"description": "Internal density configuration for the table's built-in UI controls\n(search input, column settings dropdown). Does not affect user-provided\nslot content size your own components to match the chosen density."
|
|
35671
35692
|
},
|
|
35672
35693
|
{
|
|
35673
35694
|
"kind": "function",
|
|
@@ -40533,6 +40554,14 @@
|
|
|
40533
40554
|
"module": "src/generated/react/formatted-number/index.js"
|
|
40534
40555
|
}
|
|
40535
40556
|
},
|
|
40557
|
+
{
|
|
40558
|
+
"kind": "js",
|
|
40559
|
+
"name": "*",
|
|
40560
|
+
"declaration": {
|
|
40561
|
+
"name": "*",
|
|
40562
|
+
"module": "src/generated/react/radio-group/index.js"
|
|
40563
|
+
}
|
|
40564
|
+
},
|
|
40536
40565
|
{
|
|
40537
40566
|
"kind": "js",
|
|
40538
40567
|
"name": "*",
|
|
@@ -43245,14 +43274,6 @@
|
|
|
43245
43274
|
"module": "src/generated/react/icons/icon-zoom-out/index.js"
|
|
43246
43275
|
}
|
|
43247
43276
|
},
|
|
43248
|
-
{
|
|
43249
|
-
"kind": "js",
|
|
43250
|
-
"name": "*",
|
|
43251
|
-
"declaration": {
|
|
43252
|
-
"name": "*",
|
|
43253
|
-
"module": "src/generated/react/radio-group/index.js"
|
|
43254
|
-
}
|
|
43255
|
-
},
|
|
43256
43277
|
{
|
|
43257
43278
|
"kind": "js",
|
|
43258
43279
|
"name": "*",
|
|
@@ -43266,7 +43287,7 @@
|
|
|
43266
43287
|
"name": "*",
|
|
43267
43288
|
"declaration": {
|
|
43268
43289
|
"name": "*",
|
|
43269
|
-
"module": "src/generated/react/sensitive-
|
|
43290
|
+
"module": "src/generated/react/sensitive-account/index.js"
|
|
43270
43291
|
}
|
|
43271
43292
|
},
|
|
43272
43293
|
{
|
|
@@ -43274,7 +43295,7 @@
|
|
|
43274
43295
|
"name": "*",
|
|
43275
43296
|
"declaration": {
|
|
43276
43297
|
"name": "*",
|
|
43277
|
-
"module": "src/generated/react/sensitive-
|
|
43298
|
+
"module": "src/generated/react/sensitive-date/index.js"
|
|
43278
43299
|
}
|
|
43279
43300
|
},
|
|
43280
43301
|
{
|
|
@@ -236120,16 +236141,16 @@
|
|
|
236120
236141
|
},
|
|
236121
236142
|
{
|
|
236122
236143
|
"kind": "javascript-module",
|
|
236123
|
-
"path": "src/generated/react/
|
|
236144
|
+
"path": "src/generated/react/blur/index.ts",
|
|
236124
236145
|
"declarations": [
|
|
236125
236146
|
{
|
|
236126
236147
|
"kind": "function",
|
|
236127
|
-
"name": "
|
|
236148
|
+
"name": "GdsBlur",
|
|
236128
236149
|
"parameters": [
|
|
236129
236150
|
{
|
|
236130
236151
|
"name": "props",
|
|
236131
236152
|
"type": {
|
|
236132
|
-
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<
|
|
236153
|
+
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<GdsBlurClass>>\n > & { ref?: React.Ref<GdsBlurClass> }"
|
|
236133
236154
|
}
|
|
236134
236155
|
}
|
|
236135
236156
|
]
|
|
@@ -236138,26 +236159,26 @@
|
|
|
236138
236159
|
"exports": [
|
|
236139
236160
|
{
|
|
236140
236161
|
"kind": "js",
|
|
236141
|
-
"name": "
|
|
236162
|
+
"name": "GdsBlur",
|
|
236142
236163
|
"declaration": {
|
|
236143
|
-
"name": "
|
|
236144
|
-
"module": "src/generated/react/
|
|
236164
|
+
"name": "GdsBlur",
|
|
236165
|
+
"module": "src/generated/react/blur/index.ts"
|
|
236145
236166
|
}
|
|
236146
236167
|
}
|
|
236147
236168
|
]
|
|
236148
236169
|
},
|
|
236149
236170
|
{
|
|
236150
236171
|
"kind": "javascript-module",
|
|
236151
|
-
"path": "src/generated/react/
|
|
236172
|
+
"path": "src/generated/react/breadcrumb/index.ts",
|
|
236152
236173
|
"declarations": [
|
|
236153
236174
|
{
|
|
236154
236175
|
"kind": "function",
|
|
236155
|
-
"name": "
|
|
236176
|
+
"name": "GdsBreadcrumb",
|
|
236156
236177
|
"parameters": [
|
|
236157
236178
|
{
|
|
236158
236179
|
"name": "props",
|
|
236159
236180
|
"type": {
|
|
236160
|
-
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<
|
|
236181
|
+
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<GdsBreadcrumbClass>>\n > & { ref?: React.Ref<GdsBreadcrumbClass> }"
|
|
236161
236182
|
}
|
|
236162
236183
|
}
|
|
236163
236184
|
]
|
|
@@ -236166,10 +236187,10 @@
|
|
|
236166
236187
|
"exports": [
|
|
236167
236188
|
{
|
|
236168
236189
|
"kind": "js",
|
|
236169
|
-
"name": "
|
|
236190
|
+
"name": "GdsBreadcrumb",
|
|
236170
236191
|
"declaration": {
|
|
236171
|
-
"name": "
|
|
236172
|
-
"module": "src/generated/react/
|
|
236192
|
+
"name": "GdsBreadcrumb",
|
|
236193
|
+
"module": "src/generated/react/breadcrumb/index.ts"
|
|
236173
236194
|
}
|
|
236174
236195
|
}
|
|
236175
236196
|
]
|
|
@@ -237877,16 +237898,16 @@
|
|
|
237877
237898
|
},
|
|
237878
237899
|
{
|
|
237879
237900
|
"kind": "javascript-module",
|
|
237880
|
-
"path": "src/generated/react/icons/icon-arrow-box-
|
|
237901
|
+
"path": "src/generated/react/icons/icon-arrow-box-left-alt/index.ts",
|
|
237881
237902
|
"declarations": [
|
|
237882
237903
|
{
|
|
237883
237904
|
"kind": "function",
|
|
237884
|
-
"name": "
|
|
237905
|
+
"name": "IconArrowBoxLeftAlt",
|
|
237885
237906
|
"parameters": [
|
|
237886
237907
|
{
|
|
237887
237908
|
"name": "props",
|
|
237888
237909
|
"type": {
|
|
237889
|
-
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<
|
|
237910
|
+
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<IconArrowBoxLeftAltClass>>\n > & { ref?: React.Ref<IconArrowBoxLeftAltClass> }"
|
|
237890
237911
|
}
|
|
237891
237912
|
}
|
|
237892
237913
|
]
|
|
@@ -237895,26 +237916,26 @@
|
|
|
237895
237916
|
"exports": [
|
|
237896
237917
|
{
|
|
237897
237918
|
"kind": "js",
|
|
237898
|
-
"name": "
|
|
237919
|
+
"name": "IconArrowBoxLeftAlt",
|
|
237899
237920
|
"declaration": {
|
|
237900
|
-
"name": "
|
|
237901
|
-
"module": "src/generated/react/icons/icon-arrow-box-
|
|
237921
|
+
"name": "IconArrowBoxLeftAlt",
|
|
237922
|
+
"module": "src/generated/react/icons/icon-arrow-box-left-alt/index.ts"
|
|
237902
237923
|
}
|
|
237903
237924
|
}
|
|
237904
237925
|
]
|
|
237905
237926
|
},
|
|
237906
237927
|
{
|
|
237907
237928
|
"kind": "javascript-module",
|
|
237908
|
-
"path": "src/generated/react/icons/icon-arrow-box-
|
|
237929
|
+
"path": "src/generated/react/icons/icon-arrow-box-right/index.ts",
|
|
237909
237930
|
"declarations": [
|
|
237910
237931
|
{
|
|
237911
237932
|
"kind": "function",
|
|
237912
|
-
"name": "
|
|
237933
|
+
"name": "IconArrowBoxRight",
|
|
237913
237934
|
"parameters": [
|
|
237914
237935
|
{
|
|
237915
237936
|
"name": "props",
|
|
237916
237937
|
"type": {
|
|
237917
|
-
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<
|
|
237938
|
+
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<IconArrowBoxRightClass>>\n > & { ref?: React.Ref<IconArrowBoxRightClass> }"
|
|
237918
237939
|
}
|
|
237919
237940
|
}
|
|
237920
237941
|
]
|
|
@@ -237923,10 +237944,10 @@
|
|
|
237923
237944
|
"exports": [
|
|
237924
237945
|
{
|
|
237925
237946
|
"kind": "js",
|
|
237926
|
-
"name": "
|
|
237947
|
+
"name": "IconArrowBoxRight",
|
|
237927
237948
|
"declaration": {
|
|
237928
|
-
"name": "
|
|
237929
|
-
"module": "src/generated/react/icons/icon-arrow-box-
|
|
237949
|
+
"name": "IconArrowBoxRight",
|
|
237950
|
+
"module": "src/generated/react/icons/icon-arrow-box-right/index.ts"
|
|
237930
237951
|
}
|
|
237931
237952
|
}
|
|
237932
237953
|
]
|
|
@@ -238549,16 +238570,16 @@
|
|
|
238549
238570
|
},
|
|
238550
238571
|
{
|
|
238551
238572
|
"kind": "javascript-module",
|
|
238552
|
-
"path": "src/generated/react/icons/icon-
|
|
238573
|
+
"path": "src/generated/react/icons/icon-at/index.ts",
|
|
238553
238574
|
"declarations": [
|
|
238554
238575
|
{
|
|
238555
238576
|
"kind": "function",
|
|
238556
|
-
"name": "
|
|
238577
|
+
"name": "IconAt",
|
|
238557
238578
|
"parameters": [
|
|
238558
238579
|
{
|
|
238559
238580
|
"name": "props",
|
|
238560
238581
|
"type": {
|
|
238561
|
-
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<
|
|
238582
|
+
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<IconAtClass>>\n > & { ref?: React.Ref<IconAtClass> }"
|
|
238562
238583
|
}
|
|
238563
238584
|
}
|
|
238564
238585
|
]
|
|
@@ -238567,26 +238588,26 @@
|
|
|
238567
238588
|
"exports": [
|
|
238568
238589
|
{
|
|
238569
238590
|
"kind": "js",
|
|
238570
|
-
"name": "
|
|
238591
|
+
"name": "IconAt",
|
|
238571
238592
|
"declaration": {
|
|
238572
|
-
"name": "
|
|
238573
|
-
"module": "src/generated/react/icons/icon-
|
|
238593
|
+
"name": "IconAt",
|
|
238594
|
+
"module": "src/generated/react/icons/icon-at/index.ts"
|
|
238574
238595
|
}
|
|
238575
238596
|
}
|
|
238576
238597
|
]
|
|
238577
238598
|
},
|
|
238578
238599
|
{
|
|
238579
238600
|
"kind": "javascript-module",
|
|
238580
|
-
"path": "src/generated/react/icons/icon-
|
|
238601
|
+
"path": "src/generated/react/icons/icon-asterisk/index.ts",
|
|
238581
238602
|
"declarations": [
|
|
238582
238603
|
{
|
|
238583
238604
|
"kind": "function",
|
|
238584
|
-
"name": "
|
|
238605
|
+
"name": "IconAsterisk",
|
|
238585
238606
|
"parameters": [
|
|
238586
238607
|
{
|
|
238587
238608
|
"name": "props",
|
|
238588
238609
|
"type": {
|
|
238589
|
-
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<
|
|
238610
|
+
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<IconAsteriskClass>>\n > & { ref?: React.Ref<IconAsteriskClass> }"
|
|
238590
238611
|
}
|
|
238591
238612
|
}
|
|
238592
238613
|
]
|
|
@@ -238595,10 +238616,10 @@
|
|
|
238595
238616
|
"exports": [
|
|
238596
238617
|
{
|
|
238597
238618
|
"kind": "js",
|
|
238598
|
-
"name": "
|
|
238619
|
+
"name": "IconAsterisk",
|
|
238599
238620
|
"declaration": {
|
|
238600
|
-
"name": "
|
|
238601
|
-
"module": "src/generated/react/icons/icon-
|
|
238621
|
+
"name": "IconAsterisk",
|
|
238622
|
+
"module": "src/generated/react/icons/icon-asterisk/index.ts"
|
|
238602
238623
|
}
|
|
238603
238624
|
}
|
|
238604
238625
|
]
|
|
@@ -239193,16 +239214,16 @@
|
|
|
239193
239214
|
},
|
|
239194
239215
|
{
|
|
239195
239216
|
"kind": "javascript-module",
|
|
239196
|
-
"path": "src/generated/react/icons/icon-brand-
|
|
239217
|
+
"path": "src/generated/react/icons/icon-brand-apple-music/index.ts",
|
|
239197
239218
|
"declarations": [
|
|
239198
239219
|
{
|
|
239199
239220
|
"kind": "function",
|
|
239200
|
-
"name": "
|
|
239221
|
+
"name": "IconBrandAppleMusic",
|
|
239201
239222
|
"parameters": [
|
|
239202
239223
|
{
|
|
239203
239224
|
"name": "props",
|
|
239204
239225
|
"type": {
|
|
239205
|
-
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<
|
|
239226
|
+
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<IconBrandAppleMusicClass>>\n > & { ref?: React.Ref<IconBrandAppleMusicClass> }"
|
|
239206
239227
|
}
|
|
239207
239228
|
}
|
|
239208
239229
|
]
|
|
@@ -239211,26 +239232,26 @@
|
|
|
239211
239232
|
"exports": [
|
|
239212
239233
|
{
|
|
239213
239234
|
"kind": "js",
|
|
239214
|
-
"name": "
|
|
239235
|
+
"name": "IconBrandAppleMusic",
|
|
239215
239236
|
"declaration": {
|
|
239216
|
-
"name": "
|
|
239217
|
-
"module": "src/generated/react/icons/icon-brand-
|
|
239237
|
+
"name": "IconBrandAppleMusic",
|
|
239238
|
+
"module": "src/generated/react/icons/icon-brand-apple-music/index.ts"
|
|
239218
239239
|
}
|
|
239219
239240
|
}
|
|
239220
239241
|
]
|
|
239221
239242
|
},
|
|
239222
239243
|
{
|
|
239223
239244
|
"kind": "javascript-module",
|
|
239224
|
-
"path": "src/generated/react/icons/icon-brand-
|
|
239245
|
+
"path": "src/generated/react/icons/icon-brand-bankid/index.ts",
|
|
239225
239246
|
"declarations": [
|
|
239226
239247
|
{
|
|
239227
239248
|
"kind": "function",
|
|
239228
|
-
"name": "
|
|
239249
|
+
"name": "IconBrandBankid",
|
|
239229
239250
|
"parameters": [
|
|
239230
239251
|
{
|
|
239231
239252
|
"name": "props",
|
|
239232
239253
|
"type": {
|
|
239233
|
-
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<
|
|
239254
|
+
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<IconBrandBankidClass>>\n > & { ref?: React.Ref<IconBrandBankidClass> }"
|
|
239234
239255
|
}
|
|
239235
239256
|
}
|
|
239236
239257
|
]
|
|
@@ -239239,10 +239260,10 @@
|
|
|
239239
239260
|
"exports": [
|
|
239240
239261
|
{
|
|
239241
239262
|
"kind": "js",
|
|
239242
|
-
"name": "
|
|
239263
|
+
"name": "IconBrandBankid",
|
|
239243
239264
|
"declaration": {
|
|
239244
|
-
"name": "
|
|
239245
|
-
"module": "src/generated/react/icons/icon-brand-
|
|
239265
|
+
"name": "IconBrandBankid",
|
|
239266
|
+
"module": "src/generated/react/icons/icon-brand-bankid/index.ts"
|
|
239246
239267
|
}
|
|
239247
239268
|
}
|
|
239248
239269
|
]
|
|
@@ -244009,16 +244030,16 @@
|
|
|
244009
244030
|
},
|
|
244010
244031
|
{
|
|
244011
244032
|
"kind": "javascript-module",
|
|
244012
|
-
"path": "src/generated/react/icons/icon-
|
|
244033
|
+
"path": "src/generated/react/icons/icon-pencel-line/index.ts",
|
|
244013
244034
|
"declarations": [
|
|
244014
244035
|
{
|
|
244015
244036
|
"kind": "function",
|
|
244016
|
-
"name": "
|
|
244037
|
+
"name": "IconPencelLine",
|
|
244017
244038
|
"parameters": [
|
|
244018
244039
|
{
|
|
244019
244040
|
"name": "props",
|
|
244020
244041
|
"type": {
|
|
244021
|
-
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<
|
|
244042
|
+
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<IconPencelLineClass>>\n > & { ref?: React.Ref<IconPencelLineClass> }"
|
|
244022
244043
|
}
|
|
244023
244044
|
}
|
|
244024
244045
|
]
|
|
@@ -244027,26 +244048,26 @@
|
|
|
244027
244048
|
"exports": [
|
|
244028
244049
|
{
|
|
244029
244050
|
"kind": "js",
|
|
244030
|
-
"name": "
|
|
244051
|
+
"name": "IconPencelLine",
|
|
244031
244052
|
"declaration": {
|
|
244032
|
-
"name": "
|
|
244033
|
-
"module": "src/generated/react/icons/icon-
|
|
244053
|
+
"name": "IconPencelLine",
|
|
244054
|
+
"module": "src/generated/react/icons/icon-pencel-line/index.ts"
|
|
244034
244055
|
}
|
|
244035
244056
|
}
|
|
244036
244057
|
]
|
|
244037
244058
|
},
|
|
244038
244059
|
{
|
|
244039
244060
|
"kind": "javascript-module",
|
|
244040
|
-
"path": "src/generated/react/icons/icon-
|
|
244061
|
+
"path": "src/generated/react/icons/icon-pdf/index.ts",
|
|
244041
244062
|
"declarations": [
|
|
244042
244063
|
{
|
|
244043
244064
|
"kind": "function",
|
|
244044
|
-
"name": "
|
|
244065
|
+
"name": "IconPdf",
|
|
244045
244066
|
"parameters": [
|
|
244046
244067
|
{
|
|
244047
244068
|
"name": "props",
|
|
244048
244069
|
"type": {
|
|
244049
|
-
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<
|
|
244070
|
+
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<IconPdfClass>>\n > & { ref?: React.Ref<IconPdfClass> }"
|
|
244050
244071
|
}
|
|
244051
244072
|
}
|
|
244052
244073
|
]
|
|
@@ -244055,10 +244076,10 @@
|
|
|
244055
244076
|
"exports": [
|
|
244056
244077
|
{
|
|
244057
244078
|
"kind": "js",
|
|
244058
|
-
"name": "
|
|
244079
|
+
"name": "IconPdf",
|
|
244059
244080
|
"declaration": {
|
|
244060
|
-
"name": "
|
|
244061
|
-
"module": "src/generated/react/icons/icon-
|
|
244081
|
+
"name": "IconPdf",
|
|
244082
|
+
"module": "src/generated/react/icons/icon-pdf/index.ts"
|
|
244062
244083
|
}
|
|
244063
244084
|
}
|
|
244064
244085
|
]
|
|
@@ -246529,16 +246550,16 @@
|
|
|
246529
246550
|
},
|
|
246530
246551
|
{
|
|
246531
246552
|
"kind": "javascript-module",
|
|
246532
|
-
"path": "src/generated/react/icons/icon-
|
|
246553
|
+
"path": "src/generated/react/icons/icon-todos/index.ts",
|
|
246533
246554
|
"declarations": [
|
|
246534
246555
|
{
|
|
246535
246556
|
"kind": "function",
|
|
246536
|
-
"name": "
|
|
246557
|
+
"name": "IconTodos",
|
|
246537
246558
|
"parameters": [
|
|
246538
246559
|
{
|
|
246539
246560
|
"name": "props",
|
|
246540
246561
|
"type": {
|
|
246541
|
-
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<
|
|
246562
|
+
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<IconTodosClass>>\n > & { ref?: React.Ref<IconTodosClass> }"
|
|
246542
246563
|
}
|
|
246543
246564
|
}
|
|
246544
246565
|
]
|
|
@@ -246547,26 +246568,26 @@
|
|
|
246547
246568
|
"exports": [
|
|
246548
246569
|
{
|
|
246549
246570
|
"kind": "js",
|
|
246550
|
-
"name": "
|
|
246571
|
+
"name": "IconTodos",
|
|
246551
246572
|
"declaration": {
|
|
246552
|
-
"name": "
|
|
246553
|
-
"module": "src/generated/react/icons/icon-
|
|
246573
|
+
"name": "IconTodos",
|
|
246574
|
+
"module": "src/generated/react/icons/icon-todos/index.ts"
|
|
246554
246575
|
}
|
|
246555
246576
|
}
|
|
246556
246577
|
]
|
|
246557
246578
|
},
|
|
246558
246579
|
{
|
|
246559
246580
|
"kind": "javascript-module",
|
|
246560
|
-
"path": "src/generated/react/icons/icon-
|
|
246581
|
+
"path": "src/generated/react/icons/icon-ticket/index.ts",
|
|
246561
246582
|
"declarations": [
|
|
246562
246583
|
{
|
|
246563
246584
|
"kind": "function",
|
|
246564
|
-
"name": "
|
|
246585
|
+
"name": "IconTicket",
|
|
246565
246586
|
"parameters": [
|
|
246566
246587
|
{
|
|
246567
246588
|
"name": "props",
|
|
246568
246589
|
"type": {
|
|
246569
|
-
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<
|
|
246590
|
+
"text": "React.ComponentProps<\n ReturnType<typeof getReactComponent<IconTicketClass>>\n > & { ref?: React.Ref<IconTicketClass> }"
|
|
246570
246591
|
}
|
|
246571
246592
|
}
|
|
246572
246593
|
]
|
|
@@ -246575,10 +246596,10 @@
|
|
|
246575
246596
|
"exports": [
|
|
246576
246597
|
{
|
|
246577
246598
|
"kind": "js",
|
|
246578
|
-
"name": "
|
|
246599
|
+
"name": "IconTicket",
|
|
246579
246600
|
"declaration": {
|
|
246580
|
-
"name": "
|
|
246581
|
-
"module": "src/generated/react/icons/icon-
|
|
246601
|
+
"name": "IconTicket",
|
|
246602
|
+
"module": "src/generated/react/icons/icon-ticket/index.ts"
|
|
246582
246603
|
}
|
|
246583
246604
|
}
|
|
246584
246605
|
]
|