@spectrum-web-components/table 0.37.0 → 0.39.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/README.md +295 -24
- package/custom-elements.json +101 -0
- package/package.json +8 -8
- package/src/Table.d.ts +12 -0
- package/src/Table.dev.js +27 -7
- package/src/Table.dev.js.map +2 -2
- package/src/Table.js +12 -12
- package/src/Table.js.map +3 -3
- package/src/TableCheckboxCell.d.ts +5 -0
- package/src/TableCheckboxCell.dev.js +10 -3
- package/src/TableCheckboxCell.dev.js.map +2 -2
- package/src/TableCheckboxCell.js +3 -2
- package/src/TableCheckboxCell.js.map +3 -3
- package/src/TableHeadCell.dev.js +3 -2
- package/src/TableHeadCell.dev.js.map +2 -2
- package/src/TableHeadCell.js +4 -4
- package/src/TableHeadCell.js.map +3 -3
- package/src/spectrum-config.js +124 -4
- package/src/spectrum-table-body.css.dev.js +9 -9
- package/src/spectrum-table-body.css.dev.js.map +1 -1
- package/src/spectrum-table-body.css.js +11 -11
- package/src/spectrum-table-body.css.js.map +1 -1
- package/src/spectrum-table-cell.css.dev.js +59 -15
- package/src/spectrum-table-cell.css.dev.js.map +2 -2
- package/src/spectrum-table-cell.css.js +61 -17
- package/src/spectrum-table-cell.css.js.map +2 -2
- package/src/spectrum-table-checkbox-cell.css.dev.js +101 -3
- package/src/spectrum-table-checkbox-cell.css.dev.js.map +2 -2
- package/src/spectrum-table-checkbox-cell.css.js +103 -5
- package/src/spectrum-table-checkbox-cell.css.js.map +2 -2
- package/src/spectrum-table-head-cell.css.dev.js +102 -32
- package/src/spectrum-table-head-cell.css.dev.js.map +2 -2
- package/src/spectrum-table-head-cell.css.js +104 -34
- package/src/spectrum-table-head-cell.css.js.map +2 -2
- package/src/spectrum-table-head.css.dev.js +1 -1
- package/src/spectrum-table-head.css.dev.js.map +1 -1
- package/src/spectrum-table-head.css.js +1 -1
- package/src/spectrum-table-head.css.js.map +1 -1
- package/src/spectrum-table-row.css.dev.js +199 -27
- package/src/spectrum-table-row.css.dev.js.map +2 -2
- package/src/spectrum-table-row.css.js +201 -29
- package/src/spectrum-table-row.css.js.map +2 -2
- package/src/spectrum-table.css.dev.js +247 -325
- package/src/spectrum-table.css.dev.js.map +2 -2
- package/src/spectrum-table.css.js +249 -327
- package/src/spectrum-table.css.js.map +2 -2
- package/src/table-body.css.dev.js +17 -9
- package/src/table-body.css.dev.js.map +2 -2
- package/src/table-body.css.js +17 -9
- package/src/table-body.css.js.map +2 -2
- package/src/table-cell.css.dev.js +59 -15
- package/src/table-cell.css.dev.js.map +2 -2
- package/src/table-cell.css.js +61 -17
- package/src/table-cell.css.js.map +2 -2
- package/src/table-checkbox-cell.css.dev.js +101 -3
- package/src/table-checkbox-cell.css.dev.js.map +2 -2
- package/src/table-checkbox-cell.css.js +101 -3
- package/src/table-checkbox-cell.css.js.map +2 -2
- package/src/table-head-cell.css.dev.js +103 -33
- package/src/table-head-cell.css.dev.js.map +2 -2
- package/src/table-head-cell.css.js +105 -35
- package/src/table-head-cell.css.js.map +2 -2
- package/src/table-head.css.dev.js +1 -1
- package/src/table-head.css.dev.js.map +1 -1
- package/src/table-head.css.js +1 -1
- package/src/table-head.css.js.map +1 -1
- package/src/table-row.css.dev.js +199 -27
- package/src/table-row.css.dev.js.map +2 -2
- package/src/table-row.css.js +201 -29
- package/src/table-row.css.js.map +2 -2
- package/src/table.css.dev.js +247 -325
- package/src/table.css.dev.js.map +2 -2
- package/src/table.css.js +249 -327
- package/src/table.css.js.map +2 -2
- package/stories/table-elements.stories.js +40 -4
- package/stories/table-elements.stories.js.map +2 -2
- package/test/helpers.js +18 -0
- package/test/helpers.js.map +7 -0
- package/test/table-selects.test.js +2 -16
- package/test/table-selects.test.js.map +2 -2
- package/test/table.test.js +42 -24
- package/test/table.test.js.map +2 -2
- package/test/virtualized-table-selects.test.js +15 -46
- package/test/virtualized-table-selects.test.js.map +2 -2
- package/test/virtualized-table.test.js +4 -27
- package/test/virtualized-table.test.js.map +2 -2
package/src/table.css.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["table.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{border-collapse:separate;border-spacing:0}:host([size=s]){--spectrum-table-compact-quiet-border-radius:var(\n--spectrum-table-s-compact-quiet-border-radius,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-table-compact-header-border-radius:var(\n--spectrum-table-s-compact-header-border-radius,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-table-compact-cell-border-radius-key-focus:var(\n--spectrum-table-s-compact-cell-border-radius-key-focus,var(--spectrum-alias-border-radius-regular)\n);--spectrum-table-compact-divider-border-size:var(\n--spectrum-table-s-compact-divider-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-table-compact-header-text-size:var(\n--spectrum-table-s-compact-header-text-size,var(--spectrum-global-dimension-font-size-50)\n);--spectrum-table-compact-header-text-font-weight:var(\n--spectrum-table-s-compact-header-text-font-weight,var(--spectrum-alias-detail-text-font-weight-regular)\n);--spectrum-table-compact-header-text-letter-spacing:var(\n--spectrum-table-s-compact-header-text-letter-spacing,var(--spectrum-global-font-letter-spacing-medium)\n);--spectrum-table-compact-header-text-line-height:var(\n--spectrum-table-s-compact-header-text-line-height,var(--spectrum-alias-heading-text-line-height)\n);--spectrum-table-compact-header-sort-icon-gap:var(\n--spectrum-table-s-compact-header-sort-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-table-compact-header-min-height:var(\n--spectrum-table-s-compact-header-min-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-table-compact-header-padding-top:var(\n--spectrum-table-s-compact-header-padding-top,var(--spectrum-global-dimension-static-size-125)\n);--spectrum-table-compact-header-padding-bottom:var(\n--spectrum-table-s-compact-header-padding-bottom,var(--spectrum-global-dimension-static-size-125)\n);--spectrum-table-compact-header-padding-left:var(\n--spectrum-table-s-compact-header-padding-left,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-compact-header-padding-right:var(\n--spectrum-table-s-compact-header-padding-right,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-compact-cell-text-size:var(\n--spectrum-table-s-compact-cell-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-table-compact-cell-text-font-weight:var(\n--spectrum-table-s-compact-cell-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-table-compact-cell-text-line-height:var(\n--spectrum-table-s-compact-cell-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-table-compact-cell-checkbox-padding-right:var(\n--spectrum-table-s-compact-cell-checkbox-padding-right,var(--spectrum-global-dimension-size-100)\n);--spectrum-table-compact-cell-checkbox-vertical-alignment:var(\n--spectrum-table-s-compact-cell-checkbox-vertical-alignment,middle\n);--spectrum-table-compact-cell-min-height:var(\n--spectrum-table-s-compact-cell-min-height,var(--spectrum-global-dimension-size-300)\n);--spectrum-table-compact-cell-padding-top:var(\n--spectrum-table-s-compact-cell-padding-top,var(--spectrum-global-dimension-size-50)\n);--spectrum-table-compact-cell-padding-bottom:var(\n--spectrum-table-s-compact-cell-padding-bottom,var(--spectrum-global-dimension-size-50)\n);--spectrum-table-compact-cell-padding-left:var(\n--spectrum-table-s-compact-cell-padding-left,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-compact-cell-padding-right:var(\n--spectrum-table-s-compact-cell-padding-right,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-compact-cell-vertical-alignment:var(\n--spectrum-table-s-compact-cell-vertical-alignment,top\n);--spectrum-table-compact-border-radius:var(\n--spectrum-table-s-compact-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-table-compact-border-size:var(\n--spectrum-table-s-compact-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-table-regular-quiet-border-radius:var(\n--spectrum-table-s-regular-quiet-border-radius,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-table-regular-header-border-radius:var(\n--spectrum-table-s-regular-header-border-radius,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-table-regular-cell-border-radius-key-focus:var(\n--spectrum-table-s-regular-cell-border-radius-key-focus,var(--spectrum-alias-border-radius-regular)\n);--spectrum-table-regular-divider-border-size:var(\n--spectrum-table-s-regular-divider-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-table-regular-header-text-size:var(\n--spectrum-table-s-regular-header-text-size,var(--spectrum-global-dimension-font-size-50)\n);--spectrum-table-regular-header-text-font-weight:var(\n--spectrum-table-s-regular-header-text-font-weight,var(--spectrum-alias-detail-text-font-weight-regular)\n);--spectrum-table-regular-header-text-letter-spacing:var(\n--spectrum-table-s-regular-header-text-letter-spacing,var(--spectrum-global-font-letter-spacing-medium)\n);--spectrum-table-regular-header-text-line-height:var(\n--spectrum-table-s-regular-header-text-line-height,var(--spectrum-alias-heading-text-line-height)\n);--spectrum-table-regular-header-sort-icon-gap:var(\n--spectrum-table-s-regular-header-sort-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-table-regular-header-min-height:var(\n--spectrum-table-s-regular-header-min-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-table-regular-header-padding-top:var(\n--spectrum-table-s-regular-header-padding-top,var(--spectrum-global-dimension-static-size-125)\n);--spectrum-table-regular-header-padding-bottom:var(\n--spectrum-table-s-regular-header-padding-bottom,var(--spectrum-global-dimension-static-size-125)\n);--spectrum-table-regular-header-padding-left:var(\n--spectrum-table-s-regular-header-padding-left,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-regular-header-padding-right:var(\n--spectrum-table-s-regular-header-padding-right,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-regular-cell-text-size:var(\n--spectrum-table-s-regular-cell-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-table-regular-cell-text-font-weight:var(\n--spectrum-table-s-regular-cell-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-table-regular-cell-text-line-height:var(\n--spectrum-table-s-regular-cell-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-table-regular-cell-checkbox-padding-right:var(\n--spectrum-table-s-regular-cell-checkbox-padding-right,var(--spectrum-global-dimension-size-100)\n);--spectrum-table-regular-cell-checkbox-vertical-alignment:var(\n--spectrum-table-s-regular-cell-checkbox-vertical-alignment,middle\n);--spectrum-table-regular-cell-min-height:var(\n--spectrum-table-s-regular-cell-min-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-table-regular-cell-padding-top:var(\n--spectrum-table-s-regular-cell-padding-top,var(--spectrum-global-dimension-size-85)\n);--spectrum-table-regular-cell-padding-bottom:var(\n--spectrum-table-s-regular-cell-padding-bottom,var(--spectrum-global-dimension-size-85)\n);--spectrum-table-regular-cell-padding-left:var(\n--spectrum-table-s-regular-cell-padding-left,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-regular-cell-padding-right:var(\n--spectrum-table-s-regular-cell-padding-right,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-regular-cell-vertical-alignment:var(\n--spectrum-table-s-regular-cell-vertical-alignment,top\n);--spectrum-table-regular-border-radius:var(\n--spectrum-table-s-regular-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-table-regular-border-size:var(\n--spectrum-table-s-regular-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-table-spacious-quiet-border-radius:var(\n--spectrum-table-s-spacious-quiet-border-radius,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-table-spacious-header-border-radius:var(\n--spectrum-table-s-spacious-header-border-radius,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-table-spacious-cell-border-radius-key-focus:var(\n--spectrum-table-s-spacious-cell-border-radius-key-focus,var(--spectrum-alias-border-radius-regular)\n);--spectrum-table-spacious-divider-border-size:var(\n--spectrum-table-s-spacious-divider-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-table-spacious-header-text-size:var(\n--spectrum-table-s-spacious-header-text-size,var(--spectrum-global-dimension-font-size-50)\n);--spectrum-table-spacious-header-text-font-weight:var(\n--spectrum-table-s-spacious-header-text-font-weight,var(--spectrum-alias-detail-text-font-weight-regular)\n);--spectrum-table-spacious-header-text-letter-spacing:var(\n--spectrum-table-s-spacious-header-text-letter-spacing,var(--spectrum-global-font-letter-spacing-medium)\n);--spectrum-table-spacious-header-text-line-height:var(\n--spectrum-table-s-spacious-header-text-line-height,var(--spectrum-alias-heading-text-line-height)\n);--spectrum-table-spacious-header-sort-icon-gap:var(\n--spectrum-table-s-spacious-header-sort-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-table-spacious-header-min-height:var(\n--spectrum-table-s-spacious-header-min-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-table-spacious-header-padding-top:var(\n--spectrum-table-s-spacious-header-padding-top,var(--spectrum-global-dimension-static-size-125)\n);--spectrum-table-spacious-header-padding-bottom:var(\n--spectrum-table-s-spacious-header-padding-bottom,var(--spectrum-global-dimension-static-size-125)\n);--spectrum-table-spacious-header-padding-left:var(\n--spectrum-table-s-spacious-header-padding-left,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-spacious-header-padding-right:var(\n--spectrum-table-s-spacious-header-padding-right,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-spacious-cell-text-size:var(\n--spectrum-table-s-spacious-cell-text-size,var(--spectrum-global-dimension-font-size-75)\n);--spectrum-table-spacious-cell-text-font-weight:var(\n--spectrum-table-s-spacious-cell-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-table-spacious-cell-text-line-height:var(\n--spectrum-table-s-spacious-cell-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-table-spacious-cell-checkbox-padding-right:var(\n--spectrum-table-s-spacious-cell-checkbox-padding-right,var(--spectrum-global-dimension-size-100)\n);--spectrum-table-spacious-cell-checkbox-vertical-alignment:var(\n--spectrum-table-s-spacious-cell-checkbox-vertical-alignment,middle\n);--spectrum-table-spacious-cell-min-height:var(\n--spectrum-table-s-spacious-cell-min-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-table-spacious-cell-padding-top:var(\n--spectrum-table-s-spacious-cell-padding-top,var(--spectrum-global-dimension-size-125)\n);--spectrum-table-spacious-cell-padding-bottom:var(\n--spectrum-table-s-spacious-cell-padding-bottom,var(--spectrum-global-dimension-size-125)\n);--spectrum-table-spacious-cell-padding-left:var(\n--spectrum-table-s-spacious-cell-padding-left,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-spacious-cell-padding-right:var(\n--spectrum-table-s-spacious-cell-padding-right,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-spacious-cell-vertical-alignment:var(\n--spectrum-table-s-spacious-cell-vertical-alignment,top\n);--spectrum-table-spacious-border-radius:var(\n--spectrum-table-s-spacious-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-table-spacious-border-size:var(\n--spectrum-table-s-spacious-border-size,var(--spectrum-alias-border-size-thin)\n)}:host([size=m]){--spectrum-table-compact-quiet-border-radius:var(\n--spectrum-table-m-compact-quiet-border-radius,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-table-compact-header-border-radius:var(\n--spectrum-table-m-compact-header-border-radius,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-table-compact-cell-border-radius-key-focus:var(\n--spectrum-table-m-compact-cell-border-radius-key-focus,var(--spectrum-alias-border-radius-regular)\n);--spectrum-table-compact-divider-border-size:var(\n--spectrum-table-m-compact-divider-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-table-compact-header-text-size:var(\n--spectrum-table-m-compact-header-text-size,var(--spectrum-global-dimension-font-size-50)\n);--spectrum-table-compact-header-text-font-weight:var(\n--spectrum-table-m-compact-header-text-font-weight,var(--spectrum-alias-detail-text-font-weight-regular)\n);--spectrum-table-compact-header-text-letter-spacing:var(\n--spectrum-table-m-compact-header-text-letter-spacing,var(--spectrum-global-font-letter-spacing-medium)\n);--spectrum-table-compact-header-text-line-height:var(\n--spectrum-table-m-compact-header-text-line-height,var(--spectrum-alias-heading-text-line-height)\n);--spectrum-table-compact-header-sort-icon-gap:var(\n--spectrum-table-m-compact-header-sort-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-table-compact-header-min-height:var(\n--spectrum-table-m-compact-header-min-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-table-compact-header-padding-top:var(\n--spectrum-table-m-compact-header-padding-top,var(--spectrum-global-dimension-static-size-125)\n);--spectrum-table-compact-header-padding-bottom:var(\n--spectrum-table-m-compact-header-padding-bottom,var(--spectrum-global-dimension-static-size-125)\n);--spectrum-table-compact-header-padding-left:var(\n--spectrum-table-m-compact-header-padding-left,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-compact-header-padding-right:var(\n--spectrum-table-m-compact-header-padding-right,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-compact-cell-text-size:var(\n--spectrum-table-m-compact-cell-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-table-compact-cell-text-font-weight:var(\n--spectrum-table-m-compact-cell-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-table-compact-cell-text-line-height:var(\n--spectrum-table-m-compact-cell-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-table-compact-cell-checkbox-padding-right:var(\n--spectrum-table-m-compact-cell-checkbox-padding-right,var(--spectrum-global-dimension-size-100)\n);--spectrum-table-compact-cell-checkbox-vertical-alignment:var(\n--spectrum-table-m-compact-cell-checkbox-vertical-alignment,middle\n);--spectrum-table-compact-cell-min-height:var(\n--spectrum-table-m-compact-cell-min-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-table-compact-cell-padding-top:var(\n--spectrum-table-m-compact-cell-padding-top,var(--spectrum-global-dimension-size-85)\n);--spectrum-table-compact-cell-padding-bottom:var(\n--spectrum-table-m-compact-cell-padding-bottom,var(--spectrum-global-dimension-size-85)\n);--spectrum-table-compact-cell-padding-left:var(\n--spectrum-table-m-compact-cell-padding-left,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-compact-cell-padding-right:var(\n--spectrum-table-m-compact-cell-padding-right,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-compact-cell-vertical-alignment:var(\n--spectrum-table-m-compact-cell-vertical-alignment,top\n);--spectrum-table-compact-border-radius:var(\n--spectrum-table-m-compact-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-table-compact-border-size:var(\n--spectrum-table-m-compact-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-table-regular-quiet-border-radius:var(\n--spectrum-table-m-regular-quiet-border-radius,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-table-regular-header-border-radius:var(\n--spectrum-table-m-regular-header-border-radius,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-table-regular-cell-border-radius-key-focus:var(\n--spectrum-table-m-regular-cell-border-radius-key-focus,var(--spectrum-alias-border-radius-regular)\n);--spectrum-table-regular-divider-border-size:var(\n--spectrum-table-m-regular-divider-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-table-regular-header-text-size:var(\n--spectrum-table-m-regular-header-text-size,var(--spectrum-global-dimension-font-size-50)\n);--spectrum-table-regular-header-text-font-weight:var(\n--spectrum-table-m-regular-header-text-font-weight,var(--spectrum-alias-detail-text-font-weight-regular)\n);--spectrum-table-regular-header-text-letter-spacing:var(\n--spectrum-table-m-regular-header-text-letter-spacing,var(--spectrum-global-font-letter-spacing-medium)\n);--spectrum-table-regular-header-text-line-height:var(\n--spectrum-table-m-regular-header-text-line-height,var(--spectrum-alias-heading-text-line-height)\n);--spectrum-table-regular-header-sort-icon-gap:var(\n--spectrum-table-m-regular-header-sort-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-table-regular-header-min-height:var(\n--spectrum-table-m-regular-header-min-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-table-regular-header-padding-top:var(\n--spectrum-table-m-regular-header-padding-top,var(--spectrum-global-dimension-static-size-125)\n);--spectrum-table-regular-header-padding-bottom:var(\n--spectrum-table-m-regular-header-padding-bottom,var(--spectrum-global-dimension-static-size-125)\n);--spectrum-table-regular-header-padding-left:var(\n--spectrum-table-m-regular-header-padding-left,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-regular-header-padding-right:var(\n--spectrum-table-m-regular-header-padding-right,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-regular-cell-text-size:var(\n--spectrum-table-m-regular-cell-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-table-regular-cell-text-font-weight:var(\n--spectrum-table-m-regular-cell-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-table-regular-cell-text-line-height:var(\n--spectrum-table-m-regular-cell-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-table-regular-cell-checkbox-padding-right:var(\n--spectrum-table-m-regular-cell-checkbox-padding-right,var(--spectrum-global-dimension-size-100)\n);--spectrum-table-regular-cell-checkbox-vertical-alignment:var(\n--spectrum-table-m-regular-cell-checkbox-vertical-alignment,middle\n);--spectrum-table-regular-cell-min-height:var(\n--spectrum-table-m-regular-cell-min-height,var(--spectrum-global-dimension-size-500)\n);--spectrum-table-regular-cell-padding-top:var(\n--spectrum-table-m-regular-cell-padding-top,var(--spectrum-global-dimension-size-130)\n);--spectrum-table-regular-cell-padding-bottom:var(\n--spectrum-table-m-regular-cell-padding-bottom,var(--spectrum-global-dimension-size-130)\n);--spectrum-table-regular-cell-padding-left:var(\n--spectrum-table-m-regular-cell-padding-left,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-regular-cell-padding-right:var(\n--spectrum-table-m-regular-cell-padding-right,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-regular-cell-vertical-alignment:var(\n--spectrum-table-m-regular-cell-vertical-alignment,top\n);--spectrum-table-regular-border-radius:var(\n--spectrum-table-m-regular-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-table-regular-border-size:var(\n--spectrum-table-m-regular-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-table-spacious-quiet-border-radius:var(\n--spectrum-table-m-spacious-quiet-border-radius,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-table-spacious-header-border-radius:var(\n--spectrum-table-m-spacious-header-border-radius,var(--spectrum-global-dimension-static-size-0)\n);--spectrum-table-spacious-cell-border-radius-key-focus:var(\n--spectrum-table-m-spacious-cell-border-radius-key-focus,var(--spectrum-alias-border-radius-regular)\n);--spectrum-table-spacious-divider-border-size:var(\n--spectrum-table-m-spacious-divider-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-table-spacious-header-text-size:var(\n--spectrum-table-m-spacious-header-text-size,var(--spectrum-global-dimension-font-size-50)\n);--spectrum-table-spacious-header-text-font-weight:var(\n--spectrum-table-m-spacious-header-text-font-weight,var(--spectrum-alias-detail-text-font-weight-regular)\n);--spectrum-table-spacious-header-text-letter-spacing:var(\n--spectrum-table-m-spacious-header-text-letter-spacing,var(--spectrum-global-font-letter-spacing-medium)\n);--spectrum-table-spacious-header-text-line-height:var(\n--spectrum-table-m-spacious-header-text-line-height,var(--spectrum-alias-heading-text-line-height)\n);--spectrum-table-spacious-header-sort-icon-gap:var(\n--spectrum-table-m-spacious-header-sort-icon-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-table-spacious-header-min-height:var(\n--spectrum-table-m-spacious-header-min-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-table-spacious-header-padding-top:var(\n--spectrum-table-m-spacious-header-padding-top,var(--spectrum-global-dimension-static-size-125)\n);--spectrum-table-spacious-header-padding-bottom:var(\n--spectrum-table-m-spacious-header-padding-bottom,var(--spectrum-global-dimension-static-size-125)\n);--spectrum-table-spacious-header-padding-left:var(\n--spectrum-table-m-spacious-header-padding-left,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-spacious-header-padding-right:var(\n--spectrum-table-m-spacious-header-padding-right,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-spacious-cell-text-size:var(\n--spectrum-table-m-spacious-cell-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-table-spacious-cell-text-font-weight:var(\n--spectrum-table-m-spacious-cell-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-table-spacious-cell-text-line-height:var(\n--spectrum-table-m-spacious-cell-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-table-spacious-cell-checkbox-padding-right:var(\n--spectrum-table-m-spacious-cell-checkbox-padding-right,var(--spectrum-global-dimension-size-100)\n);--spectrum-table-spacious-cell-checkbox-vertical-alignment:var(\n--spectrum-table-m-spacious-cell-checkbox-vertical-alignment,middle\n);--spectrum-table-spacious-cell-min-height:var(\n--spectrum-table-m-spacious-cell-min-height,var(--spectrum-global-dimension-size-600)\n);--spectrum-table-spacious-cell-padding-top:var(\n--spectrum-table-m-spacious-cell-padding-top,var(--spectrum-global-dimension-size-185)\n);--spectrum-table-spacious-cell-padding-bottom:var(\n--spectrum-table-m-spacious-cell-padding-bottom,var(--spectrum-global-dimension-size-185)\n);--spectrum-table-spacious-cell-padding-left:var(\n--spectrum-table-m-spacious-cell-padding-left,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-spacious-cell-padding-right:var(\n--spectrum-table-m-spacious-cell-padding-right,var(--spectrum-global-dimension-static-size-200)\n);--spectrum-table-spacious-cell-vertical-alignment:var(\n--spectrum-table-m-spacious-cell-vertical-alignment,top\n);--spectrum-table-spacious-border-radius:var(\n--spectrum-table-m-spacious-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-table-spacious-border-size:var(\n--spectrum-table-m-spacious-border-size,var(--spectrum-alias-border-size-thin)\n)}:host{display:flex;flex-direction:column}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-table-header-top-to-text:var(\n--spectrum-table-column-header-row-top-to-text-medium\n);--spectrum-table-header-bottom-to-text:var(\n--spectrum-table-column-header-row-bottom-to-text-medium\n);--spectrum-table-min-header-height:var(--spectrum-component-height-100);--spectrum-table-min-row-height:var(\n--spectrum-table-row-height-medium-regular\n);--spectrum-table-row-top-to-text:var(\n--spectrum-table-row-top-to-text-medium-regular\n);--spectrum-table-row-bottom-to-text:var(\n--spectrum-table-row-bottom-to-text-medium-regular\n);--spectrum-table-cell-inline-space:var(--spectrum-table-edge-to-content);--spectrum-table-border-radius:var(--spectrum-corner-radius-100);--spectrum-table-border-width:var(--spectrum-table-border-divider-width);--spectrum-table-outer-border-inline-width:var(\n--spectrum-table-border-divider-width\n);--spectrum-table-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-table-default-vertical-align:top;--spectrum-table-header-vertical-align:middle;--spectrum-table-header-font-weight:var(--spectrum-bold-font-weight);--spectrum-table-row-font-family:var(--spectrum-sans-font-family-stack);--spectrum-table-row-font-weight:var(--spectrum-regular-font-weight);--spectrum-table-row-font-style:var(--spectrum-default-font-style);--spectrum-table-row-font-size:var(--spectrum-font-size-100);--spectrum-table-row-line-height:var(--spectrum-line-height-100);--spectrum-table-border-color:var(--spectrum-gray-300);--spectrum-table-divider-color:var(--spectrum-gray-300);--spectrum-table-header-background-color:var(\n--spectrum-transparent-white-100\n);--spectrum-table-header-text-color:var(--spectrum-body-color);--spectrum-table-row-background-color:var(--spectrum-gray-50);--spectrum-table-row-text-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-table-selected-row-background-color:rgba(var(--spectrum-blue-900-rgb),var(--spectrum-table-selected-row-background-opacity));--spectrum-table-selected-row-background-color-non-emphasized:rgba(var(--spectrum-gray-700-rgb),var(--spectrum-table-selected-row-background-opacity-non-emphasized));--spectrum-table-row-background-color-hover:rgba(var(--spectrum-gray-900-rgb),var(--spectrum-table-row-hover-opacity));--spectrum-table-row-active-color:rgba(var(--spectrum-gray-900-rgb),var(--spectrum-table-row-down-opacity));--spectrum-table-selected-row-background-color-focus:rgba(var(--spectrum-blue-900-rgb),var(--spectrum-table-selected-row-background-opacity-hover));--spectrum-table-selected-row-background-color-non-emphasized-focus:rgba(var(--spectrum-gray-700-rgb),var(\n--spectrum-table-selected-row-background-opacity-non-emphasized-hover\n));--spectrum-table-icon-color-default:var(\n--spectrum-neutral-subdued-content-color-default\n);--spectrum-table-icon-color-hover:var(\n--spectrum-neutral-subdued-content-color-hover\n);--spectrum-table-icon-color-active:var(\n--spectrum-neutral-subdued-content-color-down\n);--spectrum-table-icon-color-focus:var(\n--spectrum-neutral-subdued-content-color-focus\n);--spectrum-table-icon-color-focus-hover:var(\n--spectrum-neutral-subdued-content-focus-hover\n);--spectrum-table-icon-color-key-focus:var(\n--spectrum-neutral-subdued-content-color-key-focus\n);--spectrum-table-header-checkbox-block-spacing:var(\n--spectrum-table-header-row-checkbox-to-top-medium\n);--spectrum-table-row-checkbox-block-spacing:var(\n--spectrum-table-row-checkbox-to-top-medium-regular\n);--spectrum-table-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-table-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-table-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color-rgb),var(--spectrum-drop-zone-background-color-opacity));--spectrum-table-drop-zone-outline-color:var(\n--spectrum-accent-visual-color\n);--spectrum-table-transition-duration:var(\n--spectrum-animation-duration-100\n);--spectrum-table-summary-row-font-weight:var(--spectrum-bold-font-weight);--spectrum-table-summary-row-background-color:var(--spectrum-gray-200);--spectrum-table-section-header-min-height:var(\n--spectrum-table-section-header-row-height-medium\n);--spectrum-table-section-header-block-start-spacing:var(\n--spectrum-component-top-to-text-100\n);--spectrum-table-section-header-block-end-spacing:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-table-section-header-font-weight:var(\n--spectrum-bold-font-weight\n);--spectrum-table-section-header-background-color:var(--spectrum-gray-200);--spectrum-table-collapsible-tier-indent:var(--spectrum-spacing-300);--spectrum-table-collapsible-disclosure-inline-spacing:0px;--spectrum-table-disclosure-icon-size:var(--spectrum-component-height-100);--spectrum-table-collapsible-icon-animation-duration:var(\n--spectrum-animation-duration-100\n);--spectrum-table-thumbnail-to-text:var(--spectrum-text-to-visual-100);--spectrum-table-thumbnail-block-spacing:var(\n--spectrum-table-thumbnail-to-top-minimum-medium-regular\n);--spectrum-table-thumbnail-size:var(--spectrum-thumbnail-size-300);--spectrum-table-cell-background-color:var(\n--highcontrast-table-row-background-color,var(\n--mod-table-row-background-color,var(--spectrum-table-row-background-color)\n)\n);--spectrum-table-selected-cell-background-color:var(\n--highcontrast-table-selected-row-background-color,var(\n--mod-table-selected-row-background-color-non-emphasized,var(--spectrum-table-selected-row-background-color-non-emphasized)\n)\n);--spectrum-table-selected-cell-background-color-focus:var(\n--highcontrast-table-selected-row-background-color-focus,var(\n--mod-table-selected-row-background-color-non-emphasized-focus,var(\n--spectrum-table-selected-row-background-color-non-emphasized-focus\n)\n)\n);--mod-thumbnail-size:var(\n--mod-table-thumbnail-size,var(--spectrum-table-thumbnail-size)\n)}:host([size=s]){--spectrum-table-min-header-height:var(--spectrum-component-height-100);--spectrum-table-header-top-to-text:var(\n--spectrum-table-column-header-row-top-to-text-small\n);--spectrum-table-header-bottom-to-text:var(\n--spectrum-table-column-header-row-bottom-to-text-small\n);--spectrum-table-min-row-height:var(\n--spectrum-table-row-height-small-regular\n);--spectrum-table-row-top-to-text:var(\n--spectrum-table-row-top-to-text-small-regular\n);--spectrum-table-row-bottom-to-text:var(\n--spectrum-table-row-bottom-to-text-small-regular\n);--spectrum-table-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-table-row-font-size:var(--spectrum-font-size-75);--spectrum-table-header-checkbox-block-spacing:var(\n--spectrum-table-header-row-checkbox-to-top-small\n);--spectrum-table-row-checkbox-block-spacing:var(\n--spectrum-table-row-checkbox-to-top-small-regular\n);--spectrum-table-section-header-min-height:var(\n--spectrum-table-section-header-row-height-small\n);--spectrum-table-section-header-block-start-spacing:var(\n--spectrum-component-top-to-text-75\n);--spectrum-table-section-header-block-end-spacing:var(\n--spectrum-component-bottom-to-text-75\n);--spectrum-table-disclosure-icon-size:var(--spectrum-component-height-75);--spectrum-table-thumbnail-block-spacing:var(\n--spectrum-table-thumbnail-to-top-minimum-small-regular\n);--spectrum-table-thumbnail-to-text:var(--spectrum-text-to-visual-100);--spectrum-table-thumbnail-size:var(--spectrum-thumbnail-size-200)}:host([size=l]){--spectrum-table-min-header-height:var(--spectrum-component-height-200);--spectrum-table-header-top-to-text:var(\n--spectrum-table-column-header-row-top-to-text-large\n);--spectrum-table-header-bottom-to-text:var(\n--spectrum-table-column-header-row-bottom-to-text-large\n);--spectrum-table-min-row-height:var(\n--spectrum-table-row-height-large-regular\n);--spectrum-table-row-top-to-text:var(\n--spectrum-table-row-top-to-text-large-regular\n);--spectrum-table-row-bottom-to-text:var(\n--spectrum-table-row-bottom-to-text-large-regular\n);--spectrum-table-icon-to-text:var(--spectrum-text-to-visual-200);--spectrum-table-row-font-size:var(--spectrum-font-size-200);--spectrum-table-header-checkbox-block-spacing:var(\n--spectrum-table-header-row-checkbox-to-top-large\n);--spectrum-table-row-checkbox-block-spacing:var(\n--spectrum-table-row-checkbox-to-top-large-regular\n);--spectrum-table-section-header-min-height:var(\n--spectrum-table-section-header-row-height-large\n);--spectrum-table-section-header-block-start-spacing:var(\n--spectrum-component-top-to-text-200\n);--spectrum-table-section-header-block-end-spacing:var(\n--spectrum-component-bottom-to-text-200\n);--spectrum-table-disclosure-icon-size:var(--spectrum-component-height-200);--spectrum-table-thumbnail-block-spacing:var(\n--spectrum-table-thumbnail-to-top-minimum-large-regular\n);--spectrum-table-thumbnail-to-text:var(--spectrum-text-to-visual-200);--spectrum-table-thumbnail-size:var(--spectrum-thumbnail-size-500)}:host([size=xl]){--spectrum-table-min-header-height:var(--spectrum-component-height-300);--spectrum-table-header-top-to-text:var(\n--spectrum-table-column-header-row-top-to-text-extra-large\n);--spectrum-table-header-bottom-to-text:var(\n--spectrum-table-column-header-row-bottom-to-text-extra-large\n);--spectrum-table-min-row-height:var(\n--spectrum-table-row-height-extra-large-regular\n);--spectrum-table-row-top-to-text:var(\n--spectrum-table-row-top-to-text-extra-large-regular\n);--spectrum-table-row-bottom-to-text:var(\n--spectrum-table-row-bottom-to-text-extra-large-regular\n);--spectrum-table-icon-to-text:var(--spectrum-text-to-visual-300);--spectrum-table-row-font-size:var(--spectrum-font-size-300);--spectrum-table-header-checkbox-block-spacing:var(\n--spectrum-table-header-row-checkbox-to-top-extra-large\n);--spectrum-table-row-checkbox-block-spacing:var(\n--spectrum-table-row-checkbox-to-top-extra-large-regular\n);--spectrum-table-section-header-min-height:var(\n--spectrum-table-section-header-row-height-extra-large\n);--spectrum-table-section-header-block-start-spacing:var(\n--spectrum-component-top-to-text-300\n);--spectrum-table-section-header-block-end-spacing:var(\n--spectrum-component-bottom-to-text-300\n);--spectrum-table-disclosure-icon-size:var(--spectrum-component-height-300);--spectrum-table-thumbnail-block-spacing:var(\n--spectrum-table-thumbnail-to-top-minimum-extra-large-regular\n);--spectrum-table-thumbnail-to-text:var(--spectrum-text-to-visual-300);--spectrum-table-thumbnail-size:var(--spectrum-thumbnail-size-700)}:host([density=compact]){--mod-table-min-row-height:var(\n--mod-table-min-row-height--compact,var(--spectrum-table-row-height-medium-compact)\n);--mod-table-row-top-to-text:var(\n--mod-table-row-top-to-text--compact,var(--spectrum-table-row-top-to-text-medium-compact)\n);--mod-table-row-bottom-to-text:var(\n--mod-table-row-bottom-to-text--compact,var(--spectrum-table-row-bottom-to-text-medium-compact)\n);--mod-table-row-checkbox-block-spacing:var(\n--mod-table-row-checkbox-block-spacing--compact,var(--spectrum-table-row-checkbox-to-top-medium-compact)\n);--mod-table-thumbnail-block-spacing:var(\n--mod-table-thumbnail-block-spacing-compact,var(--spectrum-table-thumbnail-to-top-minimum-medium-compact)\n);--mod-table-thumbnail-size:var(\n--mod-table-thumbnail-size-compact,var(--spectrum-thumbnail-size-200)\n)}:host([density=compact][size=s]){--mod-table-min-row-height:var(\n--mod-table-min-row-height--compact,var(--spectrum-table-row-height-small-compact)\n);--mod-table-row-top-to-text:var(\n--mod-table-row-top-to-text--compact,var(--spectrum-table-row-top-to-text-small-compact)\n);--mod-table-row-bottom-to-text:var(\n--mod-table-row-bottom-to-text--compact,var(--spectrum-table-row-bottom-to-text-small-compact)\n);--mod-table-row-checkbox-block-spacing:var(\n--mod-table-row-checkbox-block-spacing--compact,var(--spectrum-table-row-checkbox-to-top-small-compact)\n);--mod-table-thumbnail-block-spacing:var(\n--mod-table-thumbnail-block-spacing-compact,var(--spectrum-table-thumbnail-to-top-minimum-small-compact)\n);--mod-table-thumbnail-size:var(\n--mod-table-thumbnail-size-compact,var(--spectrum-thumbnail-size-50)\n)}:host([density=compact][size=l]){--mod-table-min-row-height:var(\n--mod-table-min-row-height--compact,var(--spectrum-table-row-height-large-compact)\n);--mod-table-row-top-to-text:var(\n--mod-table-row-top-to-text--compact,var(--spectrum-table-row-top-to-text-large-compact)\n);--mod-table-row-bottom-to-text:var(\n--mod-table-row-bottom-to-text--compact,var(--spectrum-table-row-bottom-to-text-large-compact)\n);--mod-table-row-checkbox-block-spacing:var(\n--mod-table-row-checkbox-block-spacing--compact,var(--spectrum-table-row-checkbox-to-top-large-compact)\n);--mod-table-thumbnail-block-spacing:var(\n--mod-table-thumbnail-block-spacing-compact,var(--spectrum-table-thumbnail-to-top-minimum-large-compact)\n);--mod-table-thumbnail-size:var(\n--mod-table-thumbnail-size-compact,var(--spectrum-thumbnail-size-300)\n)}:host([density=compact][size=xl]){--mod-table-min-row-height:var(\n--mod-table-min-row-height--compact,var(--spectrum-table-row-height-extra-large-compact)\n);--mod-table-row-top-to-text:var(\n--mod-table-row-top-to-text--compact,var(--spectrum-table-row-top-to-text-extra-large-compact)\n);--mod-table-row-bottom-to-text:var(\n--mod-table-row-bottom-to-text--compact,var(--spectrum-table-row-bottom-to-text-extra-large-compact)\n);--mod-table-row-checkbox-block-spacing:var(\n--mod-table-row-checkbox-block-spacing--compact,var(--spectrum-table-row-checkbox-to-top-extra-large-compact)\n);--mod-table-thumbnail-block-spacing:var(\n--mod-table-thumbnail-block-spacing-compact,var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact)\n);--mod-table-thumbnail-size:var(\n--mod-table-thumbnail-size-compact,var(--spectrum-thumbnail-size-500)\n)}:host([density=spacious]){--mod-table-min-row-height:var(\n--mod-table-min-row-height--spacious,var(--spectrum-table-row-height-medium-spacious)\n);--mod-table-row-top-to-text:var(\n--mod-table-row-top-to-text--spacious,var(--spectrum-table-row-top-to-text-medium-spacious)\n);--mod-table-row-bottom-to-text:var(\n--mod-table-row-bottom-to-text--spacious,var(--spectrum-table-row-bottom-to-text-medium-spacious)\n);--mod-table-row-checkbox-block-spacing:var(\n--mod-table-row-checkbox-block-spacing--spacious,var(--spectrum-table-row-checkbox-to-top-medium-spacious)\n);--mod-table-thumbnail-block-spacing:var(\n--mod-table-thumbnail-block-spacing-spacious,var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious)\n);--mod-table-thumbnail-size:var(\n--mod-table-thumbnail-size-spacious,var(--spectrum-thumbnail-size-500)\n)}:host([density=spacious][size=s]){--mod-table-min-row-height:var(\n--mod-table-min-row-height--spacious,var(--spectrum-table-row-height-small-spacious)\n);--mod-table-row-top-to-text:var(\n--mod-table-row-top-to-text--spacious,var(--spectrum-table-row-top-to-text-small-spacious)\n);--mod-table-row-bottom-to-text:var(\n--mod-table-row-bottom-to-text--spacious,var(--spectrum-table-row-bottom-to-text-small-spacious)\n);--mod-table-row-checkbox-block-spacing:var(\n--mod-table-row-checkbox-block-spacing--spacious,var(--spectrum-table-row-checkbox-to-top-small-spacious)\n);--mod-table-thumbnail-block-spacing:var(\n--mod-table-thumbnail-block-spacing-spacious,var(--spectrum-table-thumbnail-to-top-minimum-small-spacious)\n);--mod-table-thumbnail-size:var(\n--mod-table-thumbnail-size-spacious,var(--spectrum-thumbnail-size-300)\n)}:host([density=spacious][size=l]){--mod-table-min-row-height:var(\n--mod-table-min-row-height--spacious,var(--spectrum-table-row-height-large-spacious)\n);--mod-table-row-top-to-text:var(\n--mod-table-row-top-to-text--spacious,var(--spectrum-table-row-top-to-text-large-spacious)\n);--mod-table-row-bottom-to-text:var(\n--mod-table-row-bottom-to-text--spacious,var(--spectrum-table-row-bottom-to-text-large-spacious)\n);--mod-table-row-checkbox-block-spacing:var(\n--mod-table-row-checkbox-block-spacing--spacious,var(--spectrum-table-row-checkbox-to-top-large-spacious)\n);--mod-table-thumbnail-block-spacing:var(\n--mod-table-thumbnail-block-spacing-spacious,var(--spectrum-table-thumbnail-to-top-minimum-large-spacious)\n);--mod-table-thumbnail-size:var(\n--mod-table-thumbnail-size-spacious,var(--spectrum-thumbnail-size-700)\n)}:host([density=spacious][size=xl]){--mod-table-min-row-height:var(\n--mod-table-min-row-height--spacious,var(--spectrum-table-row-height-extra-large-spacious)\n);--mod-table-row-top-to-text:var(\n--mod-table-row-top-to-text--spacious,var(--spectrum-table-row-top-to-text-extra-large-spacious)\n);--mod-table-row-bottom-to-text:var(\n--mod-table-row-bottom-to-text--spacious,var(--spectrum-table-row-bottom-to-text-extra-large-spacious)\n);--mod-table-row-checkbox-block-spacing:var(\n--mod-table-row-checkbox-block-spacing--spacious,var(--spectrum-table-row-checkbox-to-top-extra-large-spacious)\n);--mod-table-thumbnail-block-spacing:var(\n--mod-table-thumbnail-block-spacing-spacious,var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious)\n);--mod-table-thumbnail-size:var(\n--mod-table-thumbnail-size-spacious,var(--spectrum-thumbnail-size-800)\n)}:host([emphasized]){--spectrum-table-selected-cell-background-color:var(\n--highcontrast-table-selected-row-background-color,var(\n--mod-table-selected-row-background-color,var(--spectrum-table-selected-row-background-color)\n)\n);--spectrum-table-selected-cell-background-color-focus:var(\n--highcontrast-table-selected-row-background-color-focus,var(\n--mod-table-selected-row-background-color-focus,var(--spectrum-table-selected-row-background-color-focus)\n)\n)}:host([quiet]){--mod-table-border-radius:var(--mod-table-border-radius--quiet,0px);--mod-table-outer-border-inline-width:var(\n--mod-table-outer-border-inline-width--quiet,0px\n);--mod-table-header-background-color:var(\n--mod-table-header-background-color--quiet,var(--spectrum-transparent-white-100)\n);--mod-table-row-background-color:var(\n--mod-table-row-background-color--quiet,var(--spectrum-transparent-white-100)\n)}@media (forced-colors:active){:host{--highcontrast-table-row-background-color:Canvas;--highcontrast-table-row-text-color:CanvasText;--highcontrast-table-divider-color:CanvasText;--highcontrast-table-border-color:CanvasText;--highcontrast-table-icon-color:CanvasText;--highcontrast-table-icon-color-focus:Highlight;--highcontrast-table-selected-row-background-color:Highlight;--highcontrast-table-selected-row-text-color:HighlightText;--highcontrast-table-selected-row-text-color-default:HighlightText;--highcontrast-table-selected-row-background-color-focus:Highlight;--highcontrast-table-selected-row-text-color-focus:HighlightText;--highcontrast-table-row-background-color-hover:Highlight;--highcontrast-table-row-text-color-hover:HighlightText;--highcontrast-table-section-header-text-color:Canvas;--highcontrast-table-section-header-background-color:CanvasText;--highcontrast-table-focus-indicator-color:Highlight;--highcontrast-table-transition-duration:0}@supports (color:SelectedItem){:host{--highcontrast-table-selected-row-background-color:SelectedItem;--highcontrast-table-selected-row-text-color:SelectedItemText;--highcontrast-table-selected-row-text-color-default:SelectedItemText}}}:host:not(.spectrum-Table-scroller){border-collapse:separate;border-spacing:0}:host:not(.spectrum-Table-scroller){display:table}:host{display:flex;flex-direction:column}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyPf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -38,7 +38,7 @@ export default {
|
|
|
38
38
|
};
|
|
39
39
|
export const elements = () => {
|
|
40
40
|
return html`
|
|
41
|
-
<sp-table
|
|
41
|
+
<sp-table>
|
|
42
42
|
<sp-table-head>
|
|
43
43
|
<sp-table-head-cell>Column Title</sp-table-head-cell>
|
|
44
44
|
<sp-table-head-cell>Column Title</sp-table-head-cell>
|
|
@@ -115,7 +115,6 @@ export const small = () => {
|
|
|
115
115
|
export const selectsSingle = () => {
|
|
116
116
|
return html`
|
|
117
117
|
<sp-table
|
|
118
|
-
size="m"
|
|
119
118
|
selects="single"
|
|
120
119
|
.selected=${["row1"]}
|
|
121
120
|
@change=${({ target }) => {
|
|
@@ -163,7 +162,7 @@ export const selectsSingle = () => {
|
|
|
163
162
|
};
|
|
164
163
|
export const noSelectsSpecified = () => {
|
|
165
164
|
return html`
|
|
166
|
-
<sp-table
|
|
165
|
+
<sp-table .selected=${["row1", "row2"]}>
|
|
167
166
|
<sp-table-head>
|
|
168
167
|
<sp-table-head-cell>Column Title</sp-table-head-cell>
|
|
169
168
|
<sp-table-head-cell>Column Title</sp-table-head-cell>
|
|
@@ -202,7 +201,6 @@ export const noSelectsSpecified = () => {
|
|
|
202
201
|
export const selectsMultiple = () => {
|
|
203
202
|
return html`
|
|
204
203
|
<sp-table
|
|
205
|
-
size="m"
|
|
206
204
|
selects="multiple"
|
|
207
205
|
.selected=${["row1", "row2"]}
|
|
208
206
|
@change=${({ target }) => {
|
|
@@ -253,4 +251,42 @@ export const selectsMultiple = () => {
|
|
|
253
251
|
<div>Selected Count: 2</div>
|
|
254
252
|
`;
|
|
255
253
|
};
|
|
254
|
+
export const emphasized = () => {
|
|
255
|
+
return html`
|
|
256
|
+
<sp-table emphasized selects="multiple" .selected=${["row1", "row2"]}>
|
|
257
|
+
<sp-table-head>
|
|
258
|
+
<sp-table-head-cell>Column Title</sp-table-head-cell>
|
|
259
|
+
<sp-table-head-cell>Column Title</sp-table-head-cell>
|
|
260
|
+
<sp-table-head-cell>Column Title</sp-table-head-cell>
|
|
261
|
+
</sp-table-head>
|
|
262
|
+
<sp-table-body style="height: 120px">
|
|
263
|
+
<sp-table-row value="row1" class="row1">
|
|
264
|
+
<sp-table-cell>Row Item Alpha</sp-table-cell>
|
|
265
|
+
<sp-table-cell>Row Item Alpha</sp-table-cell>
|
|
266
|
+
<sp-table-cell>Row Item Alpha</sp-table-cell>
|
|
267
|
+
</sp-table-row>
|
|
268
|
+
<sp-table-row value="row2" class="row2">
|
|
269
|
+
<sp-table-cell>Row Item Bravo</sp-table-cell>
|
|
270
|
+
<sp-table-cell>Row Item Bravo</sp-table-cell>
|
|
271
|
+
<sp-table-cell>Row Item Bravo</sp-table-cell>
|
|
272
|
+
</sp-table-row>
|
|
273
|
+
<sp-table-row value="row3" class="row3">
|
|
274
|
+
<sp-table-cell>Row Item Charlie</sp-table-cell>
|
|
275
|
+
<sp-table-cell>Row Item Charlie</sp-table-cell>
|
|
276
|
+
<sp-table-cell>Row Item Charlie</sp-table-cell>
|
|
277
|
+
</sp-table-row>
|
|
278
|
+
<sp-table-row value="row4" class="row4">
|
|
279
|
+
<sp-table-cell>Row Item Delta</sp-table-cell>
|
|
280
|
+
<sp-table-cell>Row Item Delta</sp-table-cell>
|
|
281
|
+
<sp-table-cell>Row Item Delta</sp-table-cell>
|
|
282
|
+
</sp-table-row>
|
|
283
|
+
<sp-table-row value="row5" class="row5">
|
|
284
|
+
<sp-table-cell>Row Item Echo</sp-table-cell>
|
|
285
|
+
<sp-table-cell>Row Item Echo</sp-table-cell>
|
|
286
|
+
<sp-table-cell>Row Item Echo</sp-table-cell>
|
|
287
|
+
</sp-table-row>
|
|
288
|
+
</sp-table-body>
|
|
289
|
+
</sp-table>
|
|
290
|
+
`;
|
|
291
|
+
};
|
|
256
292
|
//# sourceMappingURL=table-elements.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["table-elements.stories.ts"],
|
|
4
|
-
"sourcesContent": ["/* STORIES\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/table/sp-table.js';\nimport '@spectrum-web-components/table/sp-table-checkbox-cell.js';\nimport '@spectrum-web-components/table/sp-table-head.js';\nimport '@spectrum-web-components/table/sp-table-head-cell.js';\nimport '@spectrum-web-components/table/sp-table-body.js';\nimport '@spectrum-web-components/table/sp-table-row.js';\nimport '@spectrum-web-components/table/sp-table-cell.js';\nimport type { Table } from '@spectrum-web-components/table';\n\nexport default {\n title: 'Table',\n component: 'sp-table',\n args: {\n selected: [],\n selects: '',\n },\n argTypes: {\n selected: {\n name: 'selected',\n description: 'The value of the selected `<sp-table-row>`(s).',\n control: {\n type: 'text',\n },\n },\n selects: {\n name: 'selects',\n description:\n 'Whether the elements selects its children and how many it can select at a time.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['', 'single', 'multiple'],\n },\n },\n },\n};\n\nexport const elements = (): TemplateResult => {\n return html`\n <sp-table size=\"m\">\n <sp-table-head>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n </sp-table-head>\n <sp-table-body style=\"height: 200px\">\n <sp-table-row value=\"row1\" class=\"row1\">\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row2\" class=\"row2\">\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row3\" class=\"row3\">\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row4\" class=\"row4\">\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row5\" class=\"row5\">\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n </sp-table-row>\n </sp-table-body>\n </sp-table>\n `;\n};\n\nexport const small = (): TemplateResult => {\n return html`\n <sp-table size=\"s\">\n <sp-table-head>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n </sp-table-head>\n <sp-table-body style=\"height: 120px\">\n <sp-table-row value=\"row1\" class=\"row1\">\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row2\" class=\"row2\">\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row3\" class=\"row3\">\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row4\" class=\"row4\">\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row5\" class=\"row5\">\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n </sp-table-row>\n </sp-table-body>\n </sp-table>\n `;\n};\n\nexport const selectsSingle = (): TemplateResult => {\n return html`\n <sp-table\n size=\"m\"\n selects=\"single\"\n .selected=${['row1']}\n @change=${({ target }: Event & { target: Table }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <sp-table-head>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n </sp-table-head>\n <sp-table-body style=\"height: 120px\">\n <sp-table-row value=\"row1\" class=\"row1\">\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row2\" class=\"row2\">\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row3\" class=\"row3\">\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row4\" class=\"row4\">\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row5\" class=\"row5\">\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n </sp-table-row>\n </sp-table-body>\n </sp-table>\n <div>Selected: [\"row1\"]</div>\n `;\n};\nexport const noSelectsSpecified = (): TemplateResult => {\n return html`\n <sp-table size=\"m\" .selected=${['row1', 'row2']}>\n <sp-table-head>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n </sp-table-head>\n <sp-table-body style=\"height: 120px\">\n <sp-table-row value=\"row1\" class=\"row1\">\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row2\" class=\"row2\">\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row3\" class=\"row3\">\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row4\" class=\"row4\">\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row5\" class=\"row5\">\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n </sp-table-row>\n </sp-table-body>\n </sp-table>\n `;\n};\n\nexport const selectsMultiple = (): TemplateResult => {\n return html`\n <sp-table\n size=\"m\"\n selects=\"multiple\"\n .selected=${['row1', 'row2']}\n @change=${({ target }: Event & { target: Table }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected,\n null,\n ' '\n )}`;\n const nextNext = next.nextElementSibling as HTMLDivElement;\n nextNext.textContent = `Selected Count: ${target.selected.length}`;\n }}\n >\n <sp-table-head>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n </sp-table-head>\n <sp-table-body style=\"height: 120px\">\n <sp-table-row value=\"row1\" class=\"row1\">\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row2\" class=\"row2\">\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row3\" class=\"row3\">\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row4\" class=\"row4\">\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row5\" class=\"row5\">\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n </sp-table-row>\n </sp-table-body>\n </sp-table>\n <div>Selected: [\"row1\", \"row2\"]</div>\n <div>Selected Count: 2</div>\n `;\n};\n\n// export const selectsMultipleAttributes = (): TemplateResult => {\n// return html`\n// <sp-table size=\"m\" selects=\"multiple\">\n// <sp-table-head>\n// <sp-table-head-cell>\n// Column Title\n// </sp-table-head-cell>\n// <sp-table-head-cell>Column Title</sp-table-head-cell>\n// <sp-table-head-cell>Column Title</sp-table-head-cell>\n// </sp-table-head>\n// <sp-table-body style=\"height: 120px\">\n// <sp-table-row value=\"row1\" selected>\n// <sp-table-cell>Row Item Alpha</sp-table-cell>\n// <sp-table-cell>Row Item Alpha</sp-table-cell>\n// <sp-table-cell>Row Item Alpha</sp-table-cell>\n// </sp-table-row>\n// <sp-table-row value=\"row2\">\n// <sp-table-cell>Row Item Bravo</sp-table-cell>\n// <sp-table-cell>Row Item Bravo</sp-table-cell>\n// <sp-table-cell>Row Item Bravo</sp-table-cell>\n// </sp-table-row>\n// <sp-table-row value=\"row3\" selected>\n// <sp-table-cell>Row Item Charlie</sp-table-cell>\n// <sp-table-cell>Row Item Charlie</sp-table-cell>\n// <sp-table-cell>Row Item Charlie</sp-table-cell>\n// </sp-table-row>\n// <sp-table-row value=\"row4\">\n// <sp-table-cell>Row Item Delta</sp-table-cell>\n// <sp-table-cell>Row Item Delta</sp-table-cell>\n// <sp-table-cell>Row Item Delta</sp-table-cell>\n// </sp-table-row>\n// <sp-table-row value=\"row5\">\n// <sp-table-cell>Row Item Echo</sp-table-cell>\n// <sp-table-cell>Row Item Echo</sp-table-cell>\n// <sp-table-cell>Row Item Echo</sp-table-cell>\n// </sp-table-row>\n// </sp-table-body>\n// </sp-table>\n// `;\n// };\n"],
|
|
5
|
-
"mappings": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAGP,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,IACF,UAAU,CAAC;AAAA,IACX,SAAS;AAAA,EACb;AAAA,EACA,UAAU;AAAA,IACN,UAAU;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,MACN,aACI;AAAA,MACJ,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,SAAS;AAAA,QAC1B,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,IAAI,UAAU,UAAU;AAAA,MACtC;AAAA,IACJ;AAAA,EACJ;AACJ;AAEO,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCX;AAEO,aAAM,QAAQ,MAAsB;AACvC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCX;AAEO,aAAM,gBAAgB,MAAsB;AAC/C,SAAO;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["/* STORIES\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/table/sp-table.js';\nimport '@spectrum-web-components/table/sp-table-checkbox-cell.js';\nimport '@spectrum-web-components/table/sp-table-head.js';\nimport '@spectrum-web-components/table/sp-table-head-cell.js';\nimport '@spectrum-web-components/table/sp-table-body.js';\nimport '@spectrum-web-components/table/sp-table-row.js';\nimport '@spectrum-web-components/table/sp-table-cell.js';\nimport type { Table } from '@spectrum-web-components/table';\n\nexport default {\n title: 'Table',\n component: 'sp-table',\n args: {\n selected: [],\n selects: '',\n },\n argTypes: {\n selected: {\n name: 'selected',\n description: 'The value of the selected `<sp-table-row>`(s).',\n control: {\n type: 'text',\n },\n },\n selects: {\n name: 'selects',\n description:\n 'Whether the elements selects its children and how many it can select at a time.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['', 'single', 'multiple'],\n },\n },\n },\n};\n\nexport const elements = (): TemplateResult => {\n return html`\n <sp-table>\n <sp-table-head>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n </sp-table-head>\n <sp-table-body style=\"height: 200px\">\n <sp-table-row value=\"row1\" class=\"row1\">\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row2\" class=\"row2\">\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row3\" class=\"row3\">\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row4\" class=\"row4\">\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row5\" class=\"row5\">\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n </sp-table-row>\n </sp-table-body>\n </sp-table>\n `;\n};\n\nexport const small = (): TemplateResult => {\n return html`\n <sp-table size=\"s\">\n <sp-table-head>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n </sp-table-head>\n <sp-table-body style=\"height: 120px\">\n <sp-table-row value=\"row1\" class=\"row1\">\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row2\" class=\"row2\">\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row3\" class=\"row3\">\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row4\" class=\"row4\">\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row5\" class=\"row5\">\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n </sp-table-row>\n </sp-table-body>\n </sp-table>\n `;\n};\n\nexport const selectsSingle = (): TemplateResult => {\n return html`\n <sp-table\n selects=\"single\"\n .selected=${['row1']}\n @change=${({ target }: Event & { target: Table }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <sp-table-head>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n </sp-table-head>\n <sp-table-body style=\"height: 120px\">\n <sp-table-row value=\"row1\" class=\"row1\">\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row2\" class=\"row2\">\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row3\" class=\"row3\">\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row4\" class=\"row4\">\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row5\" class=\"row5\">\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n </sp-table-row>\n </sp-table-body>\n </sp-table>\n <div>Selected: [\"row1\"]</div>\n `;\n};\n\nexport const noSelectsSpecified = (): TemplateResult => {\n return html`\n <sp-table .selected=${['row1', 'row2']}>\n <sp-table-head>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n </sp-table-head>\n <sp-table-body style=\"height: 120px\">\n <sp-table-row value=\"row1\" class=\"row1\">\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row2\" class=\"row2\">\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row3\" class=\"row3\">\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row4\" class=\"row4\">\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row5\" class=\"row5\">\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n </sp-table-row>\n </sp-table-body>\n </sp-table>\n `;\n};\n\nexport const selectsMultiple = (): TemplateResult => {\n return html`\n <sp-table\n selects=\"multiple\"\n .selected=${['row1', 'row2']}\n @change=${({ target }: Event & { target: Table }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected,\n null,\n ' '\n )}`;\n const nextNext = next.nextElementSibling as HTMLDivElement;\n nextNext.textContent = `Selected Count: ${target.selected.length}`;\n }}\n >\n <sp-table-head>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n </sp-table-head>\n <sp-table-body style=\"height: 120px\">\n <sp-table-row value=\"row1\" class=\"row1\">\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row2\" class=\"row2\">\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row3\" class=\"row3\">\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row4\" class=\"row4\">\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row5\" class=\"row5\">\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n </sp-table-row>\n </sp-table-body>\n </sp-table>\n <div>Selected: [\"row1\", \"row2\"]</div>\n <div>Selected Count: 2</div>\n `;\n};\n\nexport const emphasized = (): TemplateResult => {\n return html`\n <sp-table emphasized selects=\"multiple\" .selected=${['row1', 'row2']}>\n <sp-table-head>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n </sp-table-head>\n <sp-table-body style=\"height: 120px\">\n <sp-table-row value=\"row1\" class=\"row1\">\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row2\" class=\"row2\">\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row3\" class=\"row3\">\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row4\" class=\"row4\">\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row5\" class=\"row5\">\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n </sp-table-row>\n </sp-table-body>\n </sp-table>\n `;\n};\n\n// export const selectsMultipleAttributes = (): TemplateResult => {\n// return html`\n// <sp-table selects=\"multiple\">\n// <sp-table-head>\n// <sp-table-head-cell>\n// Column Title\n// </sp-table-head-cell>\n// <sp-table-head-cell>Column Title</sp-table-head-cell>\n// <sp-table-head-cell>Column Title</sp-table-head-cell>\n// </sp-table-head>\n// <sp-table-body style=\"height: 120px\">\n// <sp-table-row value=\"row1\" selected>\n// <sp-table-cell>Row Item Alpha</sp-table-cell>\n// <sp-table-cell>Row Item Alpha</sp-table-cell>\n// <sp-table-cell>Row Item Alpha</sp-table-cell>\n// </sp-table-row>\n// <sp-table-row value=\"row2\">\n// <sp-table-cell>Row Item Bravo</sp-table-cell>\n// <sp-table-cell>Row Item Bravo</sp-table-cell>\n// <sp-table-cell>Row Item Bravo</sp-table-cell>\n// </sp-table-row>\n// <sp-table-row value=\"row3\" selected>\n// <sp-table-cell>Row Item Charlie</sp-table-cell>\n// <sp-table-cell>Row Item Charlie</sp-table-cell>\n// <sp-table-cell>Row Item Charlie</sp-table-cell>\n// </sp-table-row>\n// <sp-table-row value=\"row4\">\n// <sp-table-cell>Row Item Delta</sp-table-cell>\n// <sp-table-cell>Row Item Delta</sp-table-cell>\n// <sp-table-cell>Row Item Delta</sp-table-cell>\n// </sp-table-row>\n// <sp-table-row value=\"row5\">\n// <sp-table-cell>Row Item Echo</sp-table-cell>\n// <sp-table-cell>Row Item Echo</sp-table-cell>\n// <sp-table-cell>Row Item Echo</sp-table-cell>\n// </sp-table-row>\n// </sp-table-body>\n// </sp-table>\n// `;\n// };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/helpers.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { fixture, html } from "@open-wc/testing";
|
|
3
|
+
import { virtualizerRef } from "@lit-labs/virtualizer/virtualize.js";
|
|
4
|
+
export async function styledFixture(story) {
|
|
5
|
+
const test = await fixture(html`
|
|
6
|
+
<sp-theme theme="classic" scale="medium" color="light">
|
|
7
|
+
${story}
|
|
8
|
+
</sp-theme>
|
|
9
|
+
`);
|
|
10
|
+
return test.children[0];
|
|
11
|
+
}
|
|
12
|
+
export async function tableLayoutComplete(table) {
|
|
13
|
+
const body = table.querySelector(
|
|
14
|
+
"sp-table-body"
|
|
15
|
+
);
|
|
16
|
+
await body[virtualizerRef].layoutComplete;
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=helpers.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["helpers.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { TemplateResult } from '@spectrum-web-components/base';\nimport type { Table, TableBody } from '@spectrum-web-components/table';\nimport type { Theme } from '@spectrum-web-components/theme';\nimport { fixture, html } from '@open-wc/testing';\nimport { virtualizerRef } from '@lit-labs/virtualizer/virtualize.js';\nimport { Virtualizer } from '@lit-labs/virtualizer/Virtualizer.js';\n\nexport async function styledFixture<T extends Element>(\n story: TemplateResult\n): Promise<T> {\n const test = await fixture<Theme>(html`\n <sp-theme theme=\"classic\" scale=\"medium\" color=\"light\">\n ${story}\n </sp-theme>\n `);\n return test.children[0] as T;\n}\n\n/* awaiting a `rangeChanged` event does not guarantee that the component has updated. We need to use\n ** layout complete to ensure the TableBody has updated for tests involving scrolling.\n */\nexport async function tableLayoutComplete(table: Table): Promise<void> {\n const body = table.querySelector(\n 'sp-table-body'\n ) as unknown as TableBody & {\n [virtualizerRef]: Virtualizer;\n };\n await body[virtualizerRef].layoutComplete;\n}\n"],
|
|
5
|
+
"mappings": ";AAcA,SAAS,SAAS,YAAY;AAC9B,SAAS,sBAAsB;AAG/B,sBAAsB,cAClB,OACU;AACV,QAAM,OAAO,MAAM,QAAe;AAAA;AAAA,cAExB,KAAK;AAAA;AAAA,KAEd;AACD,SAAO,KAAK,SAAS,CAAC;AAC1B;AAKA,sBAAsB,oBAAoB,OAA6B;AACnE,QAAM,OAAO,MAAM;AAAA,IACf;AAAA,EACJ;AAGA,QAAM,KAAK,cAAc,EAAE;AAC/B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -19,22 +19,8 @@ import {
|
|
|
19
19
|
selectsSingle
|
|
20
20
|
} from "../stories/table-elements.stories.js";
|
|
21
21
|
import { spy } from "sinon";
|
|
22
|
-
|
|
23
|
-
before
|
|
24
|
-
Mocha.process.removeListener("uncaughtException");
|
|
25
|
-
globalErrorHandler = window.onerror;
|
|
26
|
-
addEventListener("error", (error) => {
|
|
27
|
-
var _a, _b;
|
|
28
|
-
if ((_b = (_a = error.message) == null ? void 0 : _a.match) == null ? void 0 : _b.call(_a, /ResizeObserver loop limit exceeded/)) {
|
|
29
|
-
return;
|
|
30
|
-
} else {
|
|
31
|
-
globalErrorHandler == null ? void 0 : globalErrorHandler(error);
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
});
|
|
35
|
-
after(function() {
|
|
36
|
-
window.onerror = globalErrorHandler;
|
|
37
|
-
});
|
|
22
|
+
import { ignoreResizeObserverLoopError } from "../../../test/testing-helpers.js";
|
|
23
|
+
ignoreResizeObserverLoopError(before, after);
|
|
38
24
|
describe("Table Selects", () => {
|
|
39
25
|
it("selects items not initially visible in the <sp-table-body>", async () => {
|
|
40
26
|
const el = await fixture(elements());
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["table-selects.test.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n nextFrame,\n} from '@open-wc/testing';\n\nimport '@spectrum-web-components/table/sp-table.js';\nimport '@spectrum-web-components/table/sp-table-head.js';\nimport '@spectrum-web-components/table/sp-table-head-cell.js';\nimport '@spectrum-web-components/table/sp-table-body.js';\nimport '@spectrum-web-components/table/sp-table-row.js';\nimport '@spectrum-web-components/table/sp-table-cell.js';\nimport type {\n Table,\n TableCheckboxCell,\n TableRow,\n} from '@spectrum-web-components/table';\n\nimport {\n elements,\n noSelectsSpecified,\n selectsMultiple,\n selectsSingle,\n} from '../stories/table-elements.stories.js';\nimport { spy } from 'sinon';\n\nlet globalErrorHandler: undefined | OnErrorEventHandler = undefined;\nbefore(function () {\n // Save Mocha's handler.\n (\n Mocha as unknown as { process: { removeListener(name: string): void } }\n ).process.removeListener('uncaughtException');\n globalErrorHandler = window.onerror;\n addEventListener('error', (error) => {\n if (error.message?.match?.(/ResizeObserver loop limit exceeded/)) {\n return;\n } else {\n globalErrorHandler?.(error);\n }\n });\n});\nafter(function () {\n window.onerror = globalErrorHandler as OnErrorEventHandler;\n});\n\ndescribe('Table Selects', () => {\n it('selects items not initially visible in the <sp-table-body>', async () => {\n const el = await fixture<Table>(elements());\n\n el.selects = 'single';\n el.selected = ['row5'];\n\n await elementUpdated(el);\n\n const rowFive = el.querySelector('.row5') as TableRow;\n const rowFiveCheckbox = rowFive.querySelector(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n const checkboxes = el.querySelectorAll(\n 'sp-table-checkbox-cell:nth-child(n+1):nth-child(n+4)'\n ) as NodeListOf<TableCheckboxCell>;\n\n checkboxes.forEach((checkbox) => {\n expect(checkbox.checkbox.checked).to.be.false;\n });\n\n el.scrollTop = el.scrollHeight;\n\n await nextFrame();\n\n expect(rowFiveCheckbox.checkbox.checked).to.be.true;\n });\n it('can prevent selection', async () => {\n const el = await fixture<Table>(html`\n <sp-table\n size=\"m\"\n selects=\"single\"\n @change=${(event: Event) => {\n event.preventDefault();\n }}\n >\n <sp-table-head>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n </sp-table-head>\n <sp-table-body style=\"height: 120px\">\n <sp-table-row value=\"row1\" class=\"row1\">\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row2\" class=\"row2\">\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row3\" class=\"row3\">\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row4\" class=\"row4\">\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row5\" class=\"row5\">\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n </sp-table-row>\n </sp-table-body>\n </sp-table>\n `);\n\n const rowTwo = el.querySelector('.row2') as TableRow;\n const rowTwoCheckbox = rowTwo.querySelector(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n\n rowTwoCheckbox.checkbox.click();\n await elementUpdated(el);\n\n expect(rowTwoCheckbox.checked).to.be.false;\n expect(rowTwo.selected).to.be.false;\n expect(el.selected.length).to.equal(0);\n });\n it('ignores unexpected `change` events', async () => {\n const changeSpy = spy();\n const el = await fixture<Table>(html`\n <sp-table\n size=\"m\"\n selects=\"single\"\n @change=${(event: Event) => {\n event.preventDefault();\n changeSpy();\n }}\n >\n <sp-table-head>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n </sp-table-head>\n <sp-table-body style=\"height: 120px\">\n <sp-table-row value=\"row1\" class=\"row1\">\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>\n <sp-checkbox>Test checkbox</sp-checkbox>\n </sp-table-cell>\n </sp-table-row>\n </sp-table-body>\n </sp-table>\n `);\n\n const checkbox = el.querySelector('sp-checkbox');\n\n try {\n checkbox?.click();\n expect(changeSpy.callCount).to.equal(1);\n } catch (error) {\n expect(true, 'There was an error due to the click.').to.be.false;\n }\n });\n it('surfaces [selects=\"single\"] selection', async () => {\n const el = await fixture<Table>(selectsSingle());\n\n expect(el.selected, \"'Row 1 selected\").to.deep.equal(['row1']);\n });\n\n it('selects via `click` while [selects=\"single\"]', async () => {\n const el = await fixture<Table>(selectsSingle());\n const rowTwo = el.querySelector('.row2') as TableRow;\n const rowTwoCheckbox = rowTwo.querySelector(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n\n const rowThree = el.querySelector('.row3') as TableRow;\n const rowThreeCheckbox = rowThree.querySelector(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n\n rowTwoCheckbox.checkbox.click();\n await elementUpdated(el);\n\n expect(rowTwoCheckbox.checked).to.be.true;\n expect(el.selected).to.deep.equal(['row2']);\n\n rowThreeCheckbox.checkbox.click();\n await elementUpdated(el);\n await elementUpdated(rowTwoCheckbox); // webkit needs this\n\n expect(rowThreeCheckbox.checkbox.checked).to.be.true;\n expect(rowTwoCheckbox.checkbox.checked).to.be.false;\n expect(el.selected.length).to.equal(1);\n\n rowTwo.click();\n await elementUpdated(el);\n\n expect(rowTwoCheckbox.checked).to.be.true;\n expect(el.selected).to.deep.equal(['row2']);\n });\n\n it('surfaces [selects=\"multiple\"] selection', async () => {\n const el = await fixture<Table>(selectsMultiple());\n\n expect(el.selected, 'Rows 1 and 2 selected').to.deep.equal([\n 'row1',\n 'row2',\n ]);\n });\n\n it('selects via `click` while [selects=\"multiple\"] selection', async () => {\n const el = await fixture<Table>(selectsMultiple());\n const rowFour = el.querySelector('.row4') as TableRow;\n const tableHeadCheckboxCell = el.querySelector(\n 'sp-table-head sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n const rowFourCheckbox = rowFour.querySelector(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(2);\n\n rowFourCheckbox.checkbox.click();\n await elementUpdated(el);\n\n expect(rowFourCheckbox.checked).to.be.true;\n expect(el.selected).to.deep.equal(['row1', 'row2', 'row4']);\n\n tableHeadCheckboxCell.click();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal([\n 'row1',\n 'row2',\n 'row4',\n 'row3',\n 'row5',\n ]);\n });\n\n it('allows [selects] to be changed by the application', async () => {\n const el = await fixture<Table>(elements());\n\n expect(el.selects).to.be.undefined;\n\n el.selects = 'single';\n\n await elementUpdated(el);\n expect(el.selects).to.equal('single');\n\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n const rowTwoCheckboxCell = el.querySelector(\n '.row2 sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n const rowOneCheckboxCell = el.querySelector(\n '.row1 sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n const tableHeadCheckboxCell = el.querySelector(\n 'sp-table-head sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n\n expect(tableHeadCheckboxCell.selectsSingle).to.be.true;\n\n rowOneCheckboxCell.checkbox.click();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal(['row1']);\n expect(rowOneCheckboxCell.checkbox.checked).to.be.true;\n expect(rowTwoCheckboxCell.checkbox.checked).to.be.false;\n\n el.selects = 'multiple';\n await elementUpdated(el);\n\n expect(el.selects).to.equal('multiple');\n expect(tableHeadCheckboxCell.indeterminate).to.be.true;\n\n rowTwoCheckboxCell.checkbox.click();\n\n await elementUpdated(el);\n await elementUpdated(rowTwoCheckboxCell);\n\n expect(el.selected).to.deep.equal(['row1', 'row2']);\n expect(rowOneCheckboxCell.checkbox.checked).to.be.true;\n expect(rowTwoCheckboxCell.checkbox.checked).to.be.true;\n expect(tableHeadCheckboxCell.indeterminate).to.be.true;\n });\n\n it('selects a user-passed value for .selected array with no [selects] specified, but does not allow interaction afterwards', async () => {\n const el = await fixture<Table>(noSelectsSpecified());\n\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(2);\n\n const rows = el.querySelectorAll('sp-table-row');\n\n rows.forEach((row) => {\n const checkbox = row.querySelector('sp-table-checkbox-cell');\n expect(checkbox).to.be.null;\n });\n });\n\n it('allows .selected values to be changed by the application when [selects=\"multiple\"]', async () => {\n const el = await fixture<Table>(selectsMultiple());\n await elementUpdated(el);\n\n const rowThreeCheckboxCell = el.querySelector(\n '.row3 sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n const rowOneCheckboxCell = el.querySelector(\n '.row1 sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n\n expect(el.selected).to.deep.equal(['row1', 'row2']);\n expect(rowOneCheckboxCell.checkbox.checked).to.be.true;\n expect(rowThreeCheckboxCell.checkbox.checked).to.be.false;\n\n el.selected = ['row1', 'row3'];\n\n await elementUpdated(el);\n await elementUpdated(rowThreeCheckboxCell);\n\n expect(el.selected).to.deep.equal(['row1', 'row3']);\n expect(rowOneCheckboxCell.checkbox.checked).to.be.true;\n expect(rowThreeCheckboxCell.checkbox.checked).to.be.true;\n });\n});\n"],
|
|
5
|
-
"mappings": ";AAWA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n nextFrame,\n} from '@open-wc/testing';\n\nimport '@spectrum-web-components/table/sp-table.js';\nimport '@spectrum-web-components/table/sp-table-head.js';\nimport '@spectrum-web-components/table/sp-table-head-cell.js';\nimport '@spectrum-web-components/table/sp-table-body.js';\nimport '@spectrum-web-components/table/sp-table-row.js';\nimport '@spectrum-web-components/table/sp-table-cell.js';\nimport type {\n Table,\n TableCheckboxCell,\n TableRow,\n} from '@spectrum-web-components/table';\nimport {\n elements,\n noSelectsSpecified,\n selectsMultiple,\n selectsSingle,\n} from '../stories/table-elements.stories.js';\nimport { spy } from 'sinon';\nimport { ignoreResizeObserverLoopError } from '../../../test/testing-helpers.js';\n\nignoreResizeObserverLoopError(before, after);\n\ndescribe('Table Selects', () => {\n it('selects items not initially visible in the <sp-table-body>', async () => {\n const el = await fixture<Table>(elements());\n\n el.selects = 'single';\n el.selected = ['row5'];\n\n await elementUpdated(el);\n\n const rowFive = el.querySelector('.row5') as TableRow;\n const rowFiveCheckbox = rowFive.querySelector(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n const checkboxes = el.querySelectorAll(\n 'sp-table-checkbox-cell:nth-child(n+1):nth-child(n+4)'\n ) as NodeListOf<TableCheckboxCell>;\n\n checkboxes.forEach((checkbox) => {\n expect(checkbox.checkbox.checked).to.be.false;\n });\n\n el.scrollTop = el.scrollHeight;\n\n await nextFrame();\n\n expect(rowFiveCheckbox.checkbox.checked).to.be.true;\n });\n it('can prevent selection', async () => {\n const el = await fixture<Table>(html`\n <sp-table\n size=\"m\"\n selects=\"single\"\n @change=${(event: Event) => {\n event.preventDefault();\n }}\n >\n <sp-table-head>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n </sp-table-head>\n <sp-table-body style=\"height: 120px\">\n <sp-table-row value=\"row1\" class=\"row1\">\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row2\" class=\"row2\">\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n <sp-table-cell>Row Item Bravo</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row3\" class=\"row3\">\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n <sp-table-cell>Row Item Charlie</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row4\" class=\"row4\">\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n <sp-table-cell>Row Item Delta</sp-table-cell>\n </sp-table-row>\n <sp-table-row value=\"row5\" class=\"row5\">\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n <sp-table-cell>Row Item Echo</sp-table-cell>\n </sp-table-row>\n </sp-table-body>\n </sp-table>\n `);\n\n const rowTwo = el.querySelector('.row2') as TableRow;\n const rowTwoCheckbox = rowTwo.querySelector(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n\n rowTwoCheckbox.checkbox.click();\n await elementUpdated(el);\n\n expect(rowTwoCheckbox.checked).to.be.false;\n expect(rowTwo.selected).to.be.false;\n expect(el.selected.length).to.equal(0);\n });\n it('ignores unexpected `change` events', async () => {\n const changeSpy = spy();\n const el = await fixture<Table>(html`\n <sp-table\n size=\"m\"\n selects=\"single\"\n @change=${(event: Event) => {\n event.preventDefault();\n changeSpy();\n }}\n >\n <sp-table-head>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n <sp-table-head-cell>Column Title</sp-table-head-cell>\n </sp-table-head>\n <sp-table-body style=\"height: 120px\">\n <sp-table-row value=\"row1\" class=\"row1\">\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>Row Item Alpha</sp-table-cell>\n <sp-table-cell>\n <sp-checkbox>Test checkbox</sp-checkbox>\n </sp-table-cell>\n </sp-table-row>\n </sp-table-body>\n </sp-table>\n `);\n\n const checkbox = el.querySelector('sp-checkbox');\n\n try {\n checkbox?.click();\n expect(changeSpy.callCount).to.equal(1);\n } catch (error) {\n expect(true, 'There was an error due to the click.').to.be.false;\n }\n });\n it('surfaces [selects=\"single\"] selection', async () => {\n const el = await fixture<Table>(selectsSingle());\n\n expect(el.selected, \"'Row 1 selected\").to.deep.equal(['row1']);\n });\n\n it('selects via `click` while [selects=\"single\"]', async () => {\n const el = await fixture<Table>(selectsSingle());\n const rowTwo = el.querySelector('.row2') as TableRow;\n const rowTwoCheckbox = rowTwo.querySelector(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n\n const rowThree = el.querySelector('.row3') as TableRow;\n const rowThreeCheckbox = rowThree.querySelector(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n\n rowTwoCheckbox.checkbox.click();\n await elementUpdated(el);\n\n expect(rowTwoCheckbox.checked).to.be.true;\n expect(el.selected).to.deep.equal(['row2']);\n\n rowThreeCheckbox.checkbox.click();\n await elementUpdated(el);\n await elementUpdated(rowTwoCheckbox); // webkit needs this\n\n expect(rowThreeCheckbox.checkbox.checked).to.be.true;\n expect(rowTwoCheckbox.checkbox.checked).to.be.false;\n expect(el.selected.length).to.equal(1);\n\n rowTwo.click();\n await elementUpdated(el);\n\n expect(rowTwoCheckbox.checked).to.be.true;\n expect(el.selected).to.deep.equal(['row2']);\n });\n\n it('surfaces [selects=\"multiple\"] selection', async () => {\n const el = await fixture<Table>(selectsMultiple());\n\n expect(el.selected, 'Rows 1 and 2 selected').to.deep.equal([\n 'row1',\n 'row2',\n ]);\n });\n\n it('selects via `click` while [selects=\"multiple\"] selection', async () => {\n const el = await fixture<Table>(selectsMultiple());\n const rowFour = el.querySelector('.row4') as TableRow;\n const tableHeadCheckboxCell = el.querySelector(\n 'sp-table-head sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n const rowFourCheckbox = rowFour.querySelector(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(2);\n\n rowFourCheckbox.checkbox.click();\n await elementUpdated(el);\n\n expect(rowFourCheckbox.checked).to.be.true;\n expect(el.selected).to.deep.equal(['row1', 'row2', 'row4']);\n\n tableHeadCheckboxCell.click();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal([\n 'row1',\n 'row2',\n 'row4',\n 'row3',\n 'row5',\n ]);\n });\n\n it('allows [selects] to be changed by the application', async () => {\n const el = await fixture<Table>(elements());\n\n expect(el.selects).to.be.undefined;\n\n el.selects = 'single';\n\n await elementUpdated(el);\n expect(el.selects).to.equal('single');\n\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n const rowTwoCheckboxCell = el.querySelector(\n '.row2 sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n const rowOneCheckboxCell = el.querySelector(\n '.row1 sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n const tableHeadCheckboxCell = el.querySelector(\n 'sp-table-head sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n\n expect(tableHeadCheckboxCell.selectsSingle).to.be.true;\n\n rowOneCheckboxCell.checkbox.click();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal(['row1']);\n expect(rowOneCheckboxCell.checkbox.checked).to.be.true;\n expect(rowTwoCheckboxCell.checkbox.checked).to.be.false;\n\n el.selects = 'multiple';\n await elementUpdated(el);\n\n expect(el.selects).to.equal('multiple');\n expect(tableHeadCheckboxCell.indeterminate).to.be.true;\n\n rowTwoCheckboxCell.checkbox.click();\n\n await elementUpdated(el);\n await elementUpdated(rowTwoCheckboxCell);\n\n expect(el.selected).to.deep.equal(['row1', 'row2']);\n expect(rowOneCheckboxCell.checkbox.checked).to.be.true;\n expect(rowTwoCheckboxCell.checkbox.checked).to.be.true;\n expect(tableHeadCheckboxCell.indeterminate).to.be.true;\n });\n\n it('selects a user-passed value for .selected array with no [selects] specified, but does not allow interaction afterwards', async () => {\n const el = await fixture<Table>(noSelectsSpecified());\n\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(2);\n\n const rows = el.querySelectorAll('sp-table-row');\n\n rows.forEach((row) => {\n const checkbox = row.querySelector('sp-table-checkbox-cell');\n expect(checkbox).to.be.null;\n });\n });\n\n it('allows .selected values to be changed by the application when [selects=\"multiple\"]', async () => {\n const el = await fixture<Table>(selectsMultiple());\n await elementUpdated(el);\n\n const rowThreeCheckboxCell = el.querySelector(\n '.row3 sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n const rowOneCheckboxCell = el.querySelector(\n '.row1 sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n\n expect(el.selected).to.deep.equal(['row1', 'row2']);\n expect(rowOneCheckboxCell.checkbox.checked).to.be.true;\n expect(rowThreeCheckboxCell.checkbox.checked).to.be.false;\n\n el.selected = ['row1', 'row3'];\n\n await elementUpdated(el);\n await elementUpdated(rowThreeCheckboxCell);\n\n expect(el.selected).to.deep.equal(['row1', 'row3']);\n expect(rowOneCheckboxCell.checkbox.checked).to.be.true;\n expect(rowThreeCheckboxCell.checkbox.checked).to.be.true;\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/table.test.js
CHANGED
|
@@ -16,30 +16,9 @@ import "@spectrum-web-components/table/sp-table-row.js";
|
|
|
16
16
|
import "@spectrum-web-components/table/sp-table-cell.js";
|
|
17
17
|
import { elements } from "../stories/table-elements.stories.js";
|
|
18
18
|
import { spy } from "sinon";
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
globalErrorHandler = window.onerror;
|
|
23
|
-
addEventListener("error", (error) => {
|
|
24
|
-
var _a, _b;
|
|
25
|
-
if ((_b = (_a = error.message) == null ? void 0 : _a.match) == null ? void 0 : _b.call(_a, /ResizeObserver loop limit exceeded/)) {
|
|
26
|
-
return;
|
|
27
|
-
} else {
|
|
28
|
-
globalErrorHandler == null ? void 0 : globalErrorHandler(error);
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
|
-
after(function() {
|
|
33
|
-
window.onerror = globalErrorHandler;
|
|
34
|
-
});
|
|
35
|
-
async function styledFixture(story) {
|
|
36
|
-
const test = await fixture(html`
|
|
37
|
-
<sp-theme theme="classic" scale="medium" color="light">
|
|
38
|
-
${story}
|
|
39
|
-
</sp-theme>
|
|
40
|
-
`);
|
|
41
|
-
return test.children[0];
|
|
42
|
-
}
|
|
19
|
+
import { ignoreResizeObserverLoopError } from "../../../test/testing-helpers.js";
|
|
20
|
+
import { styledFixture } from "./helpers.js";
|
|
21
|
+
ignoreResizeObserverLoopError(before, after);
|
|
43
22
|
describe("Table", () => {
|
|
44
23
|
it("loads default table accessibly", async () => {
|
|
45
24
|
const el = await styledFixture(elements());
|
|
@@ -229,5 +208,44 @@ describe("Table", () => {
|
|
|
229
208
|
expect(tableHeadCheckboxCell.checkbox.checked).to.be.false;
|
|
230
209
|
expect(tableHeadCheckboxCell.checkbox.indeterminate).to.be.false;
|
|
231
210
|
});
|
|
211
|
+
it("can be headerless", async () => {
|
|
212
|
+
const el = await fixture(html`
|
|
213
|
+
<sp-table>
|
|
214
|
+
<sp-table-body style="height: 120px">
|
|
215
|
+
<sp-table-row value="row1">
|
|
216
|
+
<sp-table-cell>Row Item Alpha</sp-table-cell>
|
|
217
|
+
<sp-table-cell>Row Item Alpha</sp-table-cell>
|
|
218
|
+
<sp-table-cell>Row Item Alpha</sp-table-cell>
|
|
219
|
+
</sp-table-row>
|
|
220
|
+
<sp-table-row value="row2">
|
|
221
|
+
<sp-table-cell>Row Item Bravo</sp-table-cell>
|
|
222
|
+
<sp-table-cell>Row Item Bravo</sp-table-cell>
|
|
223
|
+
<sp-table-cell>Row Item Bravo</sp-table-cell>
|
|
224
|
+
</sp-table-row>
|
|
225
|
+
<sp-table-row value="row3">
|
|
226
|
+
<sp-table-cell>Row Item Charlie</sp-table-cell>
|
|
227
|
+
<sp-table-cell>Row Item Charlie</sp-table-cell>
|
|
228
|
+
<sp-table-cell>Row Item Charlie</sp-table-cell>
|
|
229
|
+
</sp-table-row>
|
|
230
|
+
<sp-table-row value="row4">
|
|
231
|
+
<sp-table-cell>Row Item Delta</sp-table-cell>
|
|
232
|
+
<sp-table-cell>Row Item Delta</sp-table-cell>
|
|
233
|
+
<sp-table-cell>Row Item Delta</sp-table-cell>
|
|
234
|
+
</sp-table-row>
|
|
235
|
+
<sp-table-row value="row5">
|
|
236
|
+
<sp-table-cell>Row Item Echo</sp-table-cell>
|
|
237
|
+
<sp-table-cell>Row Item Echo</sp-table-cell>
|
|
238
|
+
<sp-table-cell>Row Item Echo</sp-table-cell>
|
|
239
|
+
</sp-table-row>
|
|
240
|
+
</sp-table-body>
|
|
241
|
+
</sp-table>
|
|
242
|
+
`);
|
|
243
|
+
await elementUpdated(el);
|
|
244
|
+
expect(el.size).to.equal("m");
|
|
245
|
+
const tableHead = el.querySelector("sp-table-head");
|
|
246
|
+
expect(tableHead).to.not.exist;
|
|
247
|
+
const tableRows = el.querySelectorAll("sp-table-row");
|
|
248
|
+
expect(tableRows.length).to.equal(5);
|
|
249
|
+
});
|
|
232
250
|
});
|
|
233
251
|
//# sourceMappingURL=table.test.js.map
|