@patternfly/elements
Version:
PatternFly Elements
1 lines • 38.8 kB
Source Map (JSON)
{"version":3,"file":"pf-table.js","sourceRoot":"","sources":["pf-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { state } from 'lit/decorators/state.js';\n\nimport { provide } from '@lit/context';\nimport { thRoleContext } from './context.js';\n\nimport { PfTh, RequestSortEvent } from './pf-th.js';\nimport { PfTd } from './pf-td.js';\nimport { PfTr, RequestExpandEvent } from './pf-tr.js';\n\nexport * from './pf-caption.js';\nexport * from './pf-thead.js';\nexport * from './pf-tbody.js';\nexport * from './pf-tr.js';\nexport * from './pf-th.js';\nexport * from './pf-td.js';\n\nimport styles from './pf-table.css';\n\nconst rowQuery = [\n ':scope > pf-tbody:not([expandable]) > pf-tr',\n ':scope > pf-tbody > pf-tr[expandable]',\n ':scope > pf-tr',\n ':scope > pf-tr[expandable]',\n].join();\n\n/**\n * A **table** is used to display large data sets that can be easily laid out in a simple grid with column headers.\n * @slot\n * The default slot can hold an optional `pf-caption` element and a combination of `pf-tr`, `pf-thead`, or `pf-tbody` elements.\n * @cssprop {<color>} [--pf-c-table--BackgroundColor=#fff]\n * Table background color\n *\n * @cssprop {<color>} [--pf-c-table--BorderColor=#d2d2d2]\n * Table border color\n *\n * @cssprop {<dimension>} [--pf-c-table--border-width--base=1px]\n * Table border base width\n *\n * @cssprop {<dimension>} [--pf-c-table-caption--FontSize=0.875rem]\n * Table caption font size\n *\n * @cssprop {<color>} [--pf-c-table-caption--Color=#6a6e73]\n * Table caption color\n *\n * @cssprop {<dimension>} [--pf-c-table-caption--PaddingTop=1rem]\n * Table caption top padding\n *\n * @cssprop {<dimension>} [--pf-c-table-caption--PaddingRight=1.5rem]\n * Table caption right padding\n *\n * @cssprop {<dimension>} [--pf-c-table-caption--PaddingBottom=1rem]\n * Table caption bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table-caption--PaddingLeft=1.5rem]\n * Table caption left padding\n *\n * @cssprop {<length>} [--pf-c-table-caption--xl--PaddingRight=1rem]\n * Table XL caption right padding\n *\n * @cssprop {<dimension>} [--pf-c-table-caption--xl--PaddingLeft=1rem]\n * Table XL caption left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--thead--cell--FontSize=0.875rem]\n * Table head cell font size\n *\n * @cssprop {<number>} [--pf-c-table--thead--cell--FontWeight=700]\n * Table head cell font weight\n *\n * @cssprop {<dimension>} [--pf-c-table--tbody--cell--PaddingTop=1.5rem]\n * Table body cell padding top\n *\n * @cssprop {<dimension>} [--pf-c-table--tbody--cell--PaddingBottom=1.5rem]\n * Table body cell padding bottom\n *\n * @cssprop {<color>} [--pf-c-table--tr--BoxShadow--top--base=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n * Table row top base box shadow\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--Padding--base=1rem]\n * Table cell base padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--FontSize=1rem]\n * Table cell font size\n *\n * @cssprop {<number>} [--pf-c-table--cell--FontWeight=400]\n * Table cell font weight\n *\n * @cssprop {<color>} [--pf-c-table--cell--Color=#151515]\n * Table cell color\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingTop=1rem]\n * Table cell top padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingRight=1rem]\n * Table cell right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingBottom=1rem]\n * Table cell bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingLeft=1rem]\n * Table cell left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--first-last-child--PaddingLeft=1rem]\n * Table cell last child left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--first-last-child--PaddingRight=1rem]\n * Table cell last child right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--first-last-child--xl--PaddingLeft=1.5rem]\n * Table XL cell last child left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--first-last-child--xl--PaddingRight=1.5rem]\n * Table XL cell last child right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft=1rem]\n * Table row first cell offset reset cell left padding\n *\n * @cssprop {<length>} [--pf-c-table--cell--MinWidth=0]\n * Table cell min width\n *\n * @cssprop {<length>} [--pf-c-table--cell--MaxWidth=none]\n * Table cell max width\n *\n * @cssprop {<length>} [--pf-c-table--cell--Width=auto]\n * Table cell width\n *\n * @cssprop {<overflow>} [--pf-c-table--cell--Overflow=visible]\n * Table cell overflow\n *\n * @cssprop {<>} [--pf-c-table--cell--TextOverflow=clip]\n * Table cell text overflow\n *\n * @cssprop {<>} [--pf-c-table--cell--WhiteSpace=normal]\n * Table cell white space\n *\n * @cssprop {<>} [--pf-c-table--cell--WordBreak=normal]\n * Table cell word break\n *\n * @cssprop {<length>} [--pf-c-table--cell--m-border-right--before--BorderRightWidth=1px]\n * Table cell before right border width\n *\n * @cssprop {<color>} [--pf-c-table--cell--m-border-right--before--BorderRightColor=#d2d2d2]\n * Table cell before right border color\n *\n * @cssprop {<length>} [--pf-c-table--cell--m-border-left--before--BorderLeftWidth=1px]\n * Table cell before left border width\n *\n * @cssprop {<color>} [--pf-c-table--cell--m-border-left--before--BorderLeftColor=#d2d2d2]\n * Table cell before left border color\n *\n * @cssprop {<length>} [--pf-c-table--cell--m-help--MinWidth=11ch]\n * Help cell minimum width\n *\n * @cssprop {<length>} [--pf-c-table--m-truncate--cell--MaxWidth=1px]\n * Help cell maximum width\n *\n * @cssprop {<calc-sum>} [--pf-c-table--m-truncate--cell--MinWidth=calc(5ch + 1rem + 1rem)]\n * Truncated cell minimum width\n *\n * @cssprop {<>} [--pf-c-table--cell--hidden-visible--Display=grid]\n * Cell visible display\n *\n * @cssprop {<calc-product>} [--pf-c-table__toggle--c-button--MarginTop=calc(0.375rem * -1)]\n * Toggle button top margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__toggle--c-button--MarginBottom=calc(0.375rem * -1)]\n * Toggle button bottom margin\n *\n * @cssprop {<>} [--pf-c-table__toggle--c-button__toggle-icon--Rotate=270deg]\n * Toggle button icon rotation\n *\n * @cssprop {<>} [--pf-c-table__toggle--c-button__toggle-icon--Transition=.2s ease-in 0s]\n * Toggle button icon transition\n *\n * @cssprop {<>} [--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate=360deg]\n * Expanded toggle button icon rotation\n *\n * @cssprop {<color>} [--pf-c-table__button--BackgroundColor=transparent]\n * Button background color\n *\n * @cssprop {<color>} [--pf-c-table__button--Color=#151515]\n * Button color\n *\n * @cssprop {<color>} [--pf-c-table__button--hover--Color=#151515]\n * Button hover color\n *\n * @cssprop {<color>} [--pf-c-table__button--focus--Color=#151515]\n * Button focus color\n *\n * @cssprop {<color>} [--pf-c-table__button--active--Color=#151515]\n * Button active color\n *\n * @cssprop {<calc-sum>} [--pf-c-table__button--OutlineOffset=calc(3px * -1)]\n * Button outline offset\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact__toggle--PaddingTop=0]\n * Compact toggle top padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact__toggle--PaddingBottom=0]\n * Compacy toggle bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table__check--input--MarginTop=0.25rem]\n * Check input top margin\n *\n * @cssprop {<dimension>} [--pf-c-table__check--input--FontSize=1rem]\n * Check input font size\n *\n * @cssprop {<color>} [--pf-c-table--cell--m-favorite--Color=#d2d2d2]\n * Favorite cell color\n *\n * @cssprop {<color>} [--pf-c-table__favorite--c-button--Color=#d2d2d2]\n * Favorite button color\n *\n * @cssprop {<dimension>} [--pf-c-table__favorite--c-button--FontSize=0.875rem]\n * Favorite button font size\n *\n * @cssprop {<calc-product>} [--pf-c-table__favorite--c-button--MarginTop=calc(0.375rem * -1)]\n * Favorite button top margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__favorite--c-button--MarginRight=calc(1rem * -1)]\n * Favorite button right margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__favorite--c-button--MarginBottom=calc(0.375rem * -1)]\n * Favorite button bottom margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__favorite--c-button--MarginLeft=calc(1rem * -1)]\n * Favorite button left margin\n *\n * @cssprop {<color>} [--pf-c-table__favorite--m-favorited--c-button--Color=#f0ab00]\n * Favorited button color\n *\n * @cssprop {<color>} [--pf-c-table__sort--m-favorite__button__text--Color=#6a6e73]\n * Favorite sort button text color\n *\n * @cssprop {<color>} [--pf-c-table__sort--m-favorite__button--hover__text--Color=#151515]\n * Favorite sort button hover text color\n *\n * @cssprop {<color>} [--pf-c-table__sort--m-favorite__button--focus__text--Color=#151515]\n * Favorite sort button focus text color\n *\n * @cssprop {<color>} [--pf-c-table__sort--m-favorite__button--active__text--Color=#151515]\n * Favorite sort button active text color\n *\n * @cssprop {<calc-product>} [--pf-c-table__draggable--c-button--MarginTop=calc(0.375rem * -1)]\n * Draggable button top margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__draggable--c-button--MarginRight=calc(1rem * -1)]\n * Draggable button right margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__draggable--c-button--MarginBottom=calc(0.375rem * -1)]\n * Draggable button bottom margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__draggable--c-button--MarginLeft=calc(1rem * -1)]\n * Draggable button left margin\n *\n * @cssprop {<dimension>} [--pf-c-table__tr--m-ghost-row--Opacity=.4]\n * Ghost row opacity\n *\n * @cssprop {<color>} [--pf-c-table__tr--m-ghost-row--BackgroundColor=#fff]\n * Ghost row background color\n *\n * @cssprop {<dimension>} [--pf-c-table__action--PaddingTop=0]\n * Action top padding\n *\n * @cssprop {<dimension>} [--pf-c-table__action--PaddingRight=0]\n * Action right padding\n *\n * @cssprop {<dimension>} [--pf-c-table__action--PaddingBottom=0]\n * Action bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table__action--PaddingLeft=0]\n * Action left padding\n *\n * @cssprop {<dimension>} [--pf-c-table__inline-edit-action--PaddingTop=0]\n * Inline edit action top padding\n *\n * @cssprop {<dimension>} [--pf-c-table__inline-edit-action--PaddingRight=0]\n * Inline edit action right padding\n *\n * @cssprop {<dimension>} [--pf-c-table__inline-edit-action--PaddingBottom=0]\n * Inline edit action bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table__inline-edit-action--PaddingLeft=0]\n * Inline edit action left padding\n *\n * @cssprop {<>} [--pf-c-table__expandable-row--Transition=all 250ms cubic-bezier(.42, 0, .58, 1)]\n * Expandable row transition\n *\n * @cssprop {<length>} [--pf-c-table__expandable-row--MaxHeight=28.125rem]\n * Expandable row max height\n *\n * @cssprop {<>} [--pf-c-table__expandable-row-content--Transition=all 250ms cubic-bezier(.42, 0, .58, 1)]\n * Expandable row content transition\n *\n * @cssprop {<dimension>} [--pf-c-table__expandable-row-content--PaddingTop=1.5rem]\n * Expandable row content top padding\n *\n * @cssprop {<dimension>} [--pf-c-table__expandable-row-content--PaddingBottom=1.5rem]\n * Expandable row content bottom padding\n *\n * @cssprop {<calc-product>} [--pf-c-table__expandable-row--after--Top=calc(1px * -1)]\n * Expandable row after top\n *\n * @cssprop {<calc-product>} [--pf-c-table__expandable-row--after--Bottom=calc(1px * -1)]\n * Expandable row after bottom\n *\n * @cssprop {<length>} [--pf-c-table__expandable-row--after--border-width--base=3px]\n * Expandable row after base border width\n *\n * @cssprop {<length>} [--pf-c-table__expandable-row--after--BorderLeftWidth=0]\n * Expandable row after left border width\n *\n * @cssprop {<color>} [--pf-c-table__expandable-row--after--BorderColor=#06c]\n * Expandable row after border color\n *\n * @cssprop {<dimension>} [--pf-c-table__icon-inline--MarginRight=0.5rem]\n * Inline icon right margin\n *\n * @cssprop {<calc-sum>} [--pf-c-table__sort--MinWidth=calc(6ch + 1rem + 1rem + 1rem)]\n * Sort button minimum width\n *\n * @cssprop {<dimension>} [--pf-c-table__sort__button--PaddingTop=0.375rem]\n * Sort button top padding\n *\n * @cssprop {<dimension>} [--pf-c-table__sort__button--PaddingRight=0.5rem]\n * Sort button right padding\n *\n * @cssprop {<dimension>} [--pf-c-table__sort__button--PaddingBottom=0.375rem]\n * Sort button bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table__sort__button--PaddingLeft=0.5rem]\n * Sort button left padding\n *\n * @cssprop {<calc-product>} [--pf-c-table__sort__button--MarginTop=calc(0.375rem * -1)]\n * Sort button top margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__sort__button--MarginBottom=calc(0.375rem * -1)]\n * Sort button bottom margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__sort__button--MarginLeft=calc(0.5rem * -1)]\n * Sort button left margin\n *\n * @cssprop {<color>} [--pf-c-table__sort__button--Color=#151515]\n * Sort button color\n *\n * @cssprop {<color>} [--pf-c-table__sort--m-selected__button--Color=#06c]\n * Selected sort button color\n *\n * @cssprop {<length>} [--pf-c-table__sort--m-help--MinWidth=15ch]\n * Help button minimum width\n *\n * @cssprop {<color>} [--pf-c-table__sort__button__text--Color=currentcolor]\n * Sort button text color\n *\n * @cssprop {<color>} [--pf-c-table__sort__button--hover__text--Color=currencolor]\n * Sort button hover text color\n *\n * @cssprop {<color>} [--pf-c-table__sort__button--focus__text--Color=currentcolor]\n * Sort button focus text color\n *\n * @cssprop {<color>} [--pf-c-table__sort__button--active__text--Color=currentcolor]\n * Sort button active text color\n *\n * @cssprop {<color>} [--pf-c-table__sort-indicator--Color=#d2d2d2]\n * Sort inidcator color\n *\n * @cssprop {<calc-sum>} [--pf-c-table__sort-indicator--MarginLeft=calc(6ch + 1rem + 1rem + 1rem)]\n * Sort inidcator left margin\n *\n * @cssprop {<color>} [--pf-c-table__sort--m-selected__sort-indicator--Color=#06c]\n * Selected sort inidcator color\n *\n * @cssprop {<color>} [--pf-c-table__sort__button--hover__sort-indicator--Color=#151515]\n * Sort button hover sort indicator color\n *\n * @cssprop {<color>} [--pf-c-table__sort__button--active__sort-indicator--Color=#151515]\n * Sort button hover active sort indicator color\n *\n * @cssprop {<color>} [--pf-c-table__sort__button--focus__sort-indicator--Color=#151515]\n * Sort button hover focus sort indicator color\n *\n * @cssprop {<length>} [--pf-c-table--th--m-help--MinWidth=11ch]\n * Header cell help minimum width\n *\n * @cssprop {<dimension>} [--pf-c-table__column-help--MarginLeft=0.25rem]\n * Help column left magin\n *\n * @cssprop {<dimension>} [--pf-c-table__column-help--TranslateY=0.125rem]\n * Help column translate y axis\n *\n * @cssprop {<calc-product>} [--pf-c-table__column-help--c-button--MarginTop=calc(0.375rem * -1)]\n * Help column button top margin\n *\n * @cssprop {<calc-product>} [--pf-c-table__column-help--c-button--MarginBottom=calc(0.375rem * -1)]\n * Help column button bottom margin\n *\n * @cssprop {<dimension>} [--pf-c-table__column-help--c-button--PaddingRight=0.5rem]\n * Help column button right padding\n *\n * @cssprop {<dimension>} [--pf-c-table__column-help--c-button--PaddingLeft=0.5rem]\n * Help column button left margin\n *\n * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--Color=#06c]\n * Compound expansion toggle button color\n *\n * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--hover--Color=#004080]\n * Compound expansion hover toggle button color\n *\n * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--focus--Color=#004080]\n * Compound expansion focus toggle button color\n *\n * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--active--Color=#004080]\n * Compound expansion active toggle button color\n *\n * @cssprop {<length>} [--pf-c-table__compound-expansion-toggle__button--before--border-width--base=1px]\n * Compound expansion toggle button before border width\n *\n * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--before--BorderColor=#d2d2d2]\n * Compound expansion toggle button before border color\n *\n * @cssprop {<length>} [--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth=0]\n * Compound expansion toggle button before right border width\n *\n * @cssprop {<length>} [--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth=0]\n * Compound expansion toggle button before left border width\n *\n * @cssprop {<calc-product>} [--pf-c-table__compound-expansion-toggle__button--before--Bottom=calc(1px * -1)]\n * Compound expansion toggle button before bottom\n *\n * @cssprop {<calc-product>} [--pf-c-table__compound-expansion-toggle__button--before--Left=calc(1px * -1)]\n * Compound expansion toggle button before left\n *\n * @cssprop {<length>} [--pf-c-table__compound-expansion-toggle__button--after--border-width--base=3px]\n * Compound expansion toggle button after base border width\n *\n * @cssprop {<color>} [--pf-c-table__compound-expansion-toggle__button--after--BorderColor=#06c]\n * Compound expansion toggle button after border color\n *\n * @cssprop {<length>} [--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth=0]\n * Compound expansion toggle button after top border width\n *\n * @cssprop {<calc-sum>} [--pf-c-table__compound-expansion-toggle__button--after--Top=calc(1px * -1)]\n * Compound expansion toggle button after top\n *\n * @cssprop {<calc-sum>} [--pf-c-table__compound-expansion-toggle__button--after--Left=calc(1px * -1)]\n * Compound expansion toggle button after left\n *\n * @cssprop {<calc-sum>} [--pf-c-table--m-compact-th--PaddingTop=calc(0.5rem + 0.25rem)]\n * Compact header cell top padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact-th--PaddingBottom=0.5rem]\n * Compact header cell bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--PaddingTop=0.5rem]\n * Compact cell top padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--PaddingRight=0.5rem]\n * Compact cell right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--PaddingBottom=0.5rem]\n * Compact cell bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--PaddingLeft=0.5rem]\n * Compact cell left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--first-last-child--PaddingLeft=1rem]\n * Compact cell first child left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--first-last-child--PaddingRight=1rem]\n * Compact XLcell first child right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft=1.5rem]\n * Compact cell first child XL left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight=1.5rem]\n * Compact cell first child XL right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact--FontSize=0.875rem]\n * Compact font size\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact__expandable-row-content--PaddingTop=1.5rem]\n * Compact expandable row content top padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact__expandable-row-content--PaddingRight=1.5rem]\n * Compact expandable row content right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact__expandable-row-content--PaddingBottom=1.5rem]\n * Compact expandable row content bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table--m-compact__expandable-row-content--PaddingLeft=1.5rem]\n * Compact expandable row content left padding\n *\n * @cssprop {<dimension>} [--pf-c-table--nested--first-last-child--PaddingRight=1rem]\n * Nested first child right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--nested--first-last-child--PaddingLeft=1rem]\n * Nested first child left padding\n *\n * @cssprop {<color>} [--pf-c-table__expandable-row--m-expanded--BorderBottomColor=#d2d2d2]\n * Expandable row expanded bottom border color\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--BoxShadow--top=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n * Hoverable table row top box shadow\n *\n * @cssprop {<dimension>} [--pf-c-table--tr--m-hoverable--BackgroundColor=transparent]\n * Hoverable table row background color\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n * Hoverable table row box shadow\n *\n * @cssprop {<calc-sum>} [--pf-c-table--tr--m-hoverable--OutlineOffset=calc(-1 * 0.25rem)]\n * Hoverable table row outline offset\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--hover--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n * Hoverable table row hover box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--hover--BackgroundColor=#fff]\n * Hoverable table row hover background color\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--focus--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n * Hoverable table row focus box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--focus--BackgroundColor=#fff]\n * Hoverable table row focus background color\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--active--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n * Hoverable table row active box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--active--BackgroundColor=#fff]\n * Hoverable table row active background color\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-hoverable--m-selected--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n * Hoverable table row selected box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-selected--BoxShadow--top=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n * Selected table row top box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-selected--BackgroundColor=#fff]\n * Selected table row background color\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-selected--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n * Selected table row box shadow\n *\n * @cssprop {<calc-sum>} [--pf-c-table--tr--m-selected--OutlineOffset=calc(-1 * 0.25rem)]\n * Selected table row outline offset\n *\n * @cssprop {<length>} [--pf-c-table--tr--m-selected--after--BorderLeftWidth=3px]\n * Selected table row after left border width\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-selected--after--BorderLeftColor=#06c]\n * Selected table row after left border color\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-selected--m-selected--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n * Selected table row box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-selected--hover--m-selected--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n * Selected table row hover box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n * Selected table row hover box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--BoxShadow--top=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n * Hoverable table body top box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n * Hoverable table body box shadow\n *\n * @cssprop {<dimension>} [--pf-c-table--tbody--m-hoverable--BackgroundColor=transparent]\n * Hoverable table body background color\n *\n * @cssprop {<calc-sum>} [--pf-c-table--tbody--m-hoverable--OutlineOffset=calc(-1 * 0.25rem)]\n * Hoverable table body outline offset\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--hover--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n * Hoverable table body hover box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--hover--BackgroundColor=#fff]\n * Hoverable table body hover background color\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--focus--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n * Hoverable table body focus box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--focus--BackgroundColor=#fff]\n * Hoverable table body focus background color\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--active--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n * Hoverable table body active box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--active--BackgroundColor=#fff]\n * Hoverable table body active background color\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor=#73bcf7]\n * Hoverable table body expanded border color\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n * Hoverable table body selected table row box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-selected--BackgroundColor=#fff]\n * Selected table body background color\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-selected--BoxShadow--top=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n * Selected table body top box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-selected--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08)]\n * Selected table body box shadow\n *\n * @cssprop {<calc-product>} [--pf-c-table--tbody--m-selected--OutlineOffset=calc(-1 * 0.25rem)]\n * Selected table body outline offset\n *\n * @cssprop {<length>} [--pf-c-table--tbody--m-selected--after--BorderLeftWidth=3px]\n * Selected table body after left border width\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-selected--after--BorderLeftColor=#06c]\n * Selected table body after left border color\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-selected--m-selected--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n * Selected table body selected box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow=0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16) inset, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n * Selected table body hover selected box shadow\n *\n * @cssprop {<color>} [--pf-c-table--tbody--m-selected--tbody--m-selected--hover--BoxShadow=0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)]\n * Selected table body hover box shadow\n *\n * @cssprop {<dimension>} [--pf-c-table--thead--m-nested-column-header--button--OutlineOffset=-0.1875rem]\n * Table head nested column header button outline offset\n *\n * @cssprop {<dimension>} [--pf-c-table--thead--m-nested-column-header--tr--PaddingTop=0.25rem]\n * Table head nested column header row top padding\n *\n * @cssprop {<dimension>} [--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom=0.25rem]\n * Table head nested column header row bottom padding\n *\n * @cssprop {<color>} [--pf-c-table__subhead--Color=#6a6e73]\n * Subhead color\n *\n * @cssprop {<color>} [--pf-c-table--m-striped__tr--BackgroundColor=#fafafa]\n * Striped row background color\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingTop=1rem]\n * Cell top padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingRight=1rem]\n * Cell right padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingBottom=1rem]\n * Cell bottom padding\n *\n * @cssprop {<dimension>} [--pf-c-table--cell--PaddingLeft=1rem]\n * Cell left padding\n *\n * @cssprop {<calc-sum>} [--pf-c-table__favorite--c-button--MarginTop=calc(0.375rem * -1)]\n * Favorite button top margin\n *\n * @cssprop {<calc-sum>} [--pf-c-table__favorite--c-button--MarginRight=calc(1rem * -1)]\n * Favorite button right margin\n *\n * @cssprop {<calc-sum>} [--pf-c-table__favorite--c-button--MarginBottom=calc(0.375rem * -1)]\n * Favorite button bottom margin\n *\n * @cssprop {<calc-sum>} [--pf-c-table__favorite--c-button--MarginLeft=calc(1rem * -1)]\n * Favorite button left margin\n *\n */\n@customElement('pf-table')\nexport class PfTable extends LitElement {\n static readonly styles: CSSStyleSheet[] = [styles];\n\n get rows(): NodeListOf<PfTr> {\n return this.querySelectorAll?.<PfTr>(rowQuery);\n }\n\n @state() private columns = 0;\n\n @provide({ context: thRoleContext }) private thRowContext = 'rowheader';\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'table');\n this.#onSlotchange();\n }\n\n render(): TemplateResult<1> {\n const hasExpandableRow = !!this.querySelector?.('pf-tr[expandable]');\n const coeffRows = hasExpandableRow ? '1' : '0';\n return html`\n <slot @slotchange=\"${this.#onSlotchange}\"\n @request-expand=\"${this.#onRequestExpand}\"\n @request-sort=\"${this.#onRequestSort}\"\n style=\"${styleMap({\n '--_pf-table--expandable-rows': coeffRows,\n '--_pf-table--number-of-columns': this.columns,\n })}\"\n ></slot>\n `;\n }\n\n #onRequestExpand(event: Event) {\n if (event instanceof RequestExpandEvent\n && !event.defaultPrevented) {\n event.stopPropagation();\n if (event.target instanceof PfTr) {\n event.target.expanded = !!event.target.expandable && !event.target.expanded;\n } else if (event.target instanceof PfTd && event.row) {\n event.row.expanded = event.compoundExpanded;\n for (const cell of event.row.querySelectorAll('pf-td')) {\n cell.expanded = event.compoundExpanded === cell.compoundExpand;\n }\n }\n }\n }\n\n #onSlotchange() {\n this.columns = this.querySelector?.('pf-tr')?.querySelectorAll('pf-th')?.length ?? 0;\n this.requestUpdate();\n }\n\n #onRequestSort(event: Event) {\n if (event instanceof RequestSortEvent) {\n for (const col of this.querySelectorAll<PfTh>('pf-th[sortable]')) {\n col.selected = col === event.target;\n if (col !== event.target) {\n col.removeAttribute('sort-direction');\n }\n }\n if (!event.defaultPrevented && event.target instanceof PfTh) {\n event.target.sortDirection = event.direction;\n this.#performSort(event.target, event.direction);\n }\n }\n }\n\n #performSort(header: PfTh, direction: 'asc' | 'desc') {\n const children = header.parentElement?.children;\n if (children) {\n const columnIndexToSort = [...children].indexOf(header);\n Array\n .from(this.rows, node => PfTable.getNodeContentForSort(columnIndexToSort, node))\n .sort((a, b) => PfTable.sortByContent(direction, a, b))\n .forEach(({ node }, index) => {\n const target = this.rows[index];\n if (this.rows[index] !== node) {\n const position: InsertPosition =\n direction === 'desc' ? 'afterend' : 'beforebegin';\n target.insertAdjacentElement(position, node);\n }\n });\n }\n }\n\n private static getNodeContentForSort(\n columnIndexToSort: number,\n node: Element,\n ) {\n const content = node.querySelector(`\n :scope > :is(pf-th, pf-td):nth-child(${columnIndexToSort + 1}),\n :scope > pf-tr > :is(pf-th, pf-td):nth-child(${columnIndexToSort + 1})\n `.trim())?.textContent?.trim()?.toLowerCase() ?? '';\n return { node, content };\n }\n\n private static sortByContent(\n direction: 'asc' | 'desc',\n a: { content: string },\n b: { content: string },\n ) {\n if (direction === 'asc') {\n return (a.content < b.content ? -1 : a.content > b.content ? 1 : 0);\n } else {\n return (b.content < a.content ? -1 : b.content > a.content ? 1 : 0);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-table': PfTable;\n }\n}\n"]}