@cbpds/web-components/dist/components/cbp-table.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as t,H as r,d as e,h as o,c as a}from"./p-9caf8482.js";import{s as c}from"./p-9c1b2f31.js";const b=":root{--cbp-table-color:var(--cbp-color-text-darkest);--cbp-table-color-dark:var(--cbp-color-text-lightest);--cbp-table-header-color:var(--cbp-color-interactive-secondary-darker);--cbp-table-header-color-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-table-header-color-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-table-header-color-hover-dark:var(--cbp-color-interactive-secondary-darker);--cbp-table-header-color-focus:var(--cbp-color-text-lightest);--cbp-table-header-color-focus-dark:var(--cbp-color-text-darkest);--cbp-table-header-color-active:var(--cbp-color-text-darkest);--cbp-table-header-color-active-dark:var(--cbp-color-text-darkest);--cbp-table-header-color-bg:var(--cbp-color-gray-cool-20);--cbp-table-header-color-bg-dark:var(--cbp-color-gray-cool-60);--cbp-table-header-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-table-header-color-bg-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-table-header-color-bg-focus:var(--cbp-color-interactive-focus-dark);--cbp-table-header-color-bg-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-table-header-color-bg-active:var(--cbp-color-interactive-active-dark);--cbp-table-header-color-bg-active-dark:var(--cbp-color-interactive-active-light);--cbp-table-header-color-outline:var(--cbp-color-white);--cbp-table-header-color-outline-dark:var(--cbp-color-black);--cbp-table-row-color-bg:var(--cbp-color-white);--cbp-table-row-color-bg-dark:var(--cbp-color-gray-cool-70);--cbp-table-row-color-bg-striped:var(--cbp-color-gray-cool-4);--cbp-table-row-color-bg-striped-dark:var(--cbp-color-gray-cool-80);--cbp-table-row-color-bg-hover:var(--cbp-color-gray-cool-10);--cbp-table-row-color-bg-hover-dark:var(--cbp-color-gray-cool-90);--cbp-table-row-color-bg-selected:var(--cbp-color-interactive-selected-light);--cbp-table-row-color-bg-selected-dark:var(--cbp-color-interactive-selected-dark);--cbp-table-row-color-border:var(--cbp-color-gray-cool-30);--cbp-table-row-color-border-dark:var(--cbp-color-gray-cool-50);--cbp-table-row-border-size:var(--cbp-border-size-md);--cbp-table-cell-padding:var(--cbp-space-4x) var(--cbp-space-3x)}[data-cbp-theme=light] cbp-table[context*=dark],[data-cbp-theme=dark] cbp-table:not([context=dark-inverts]):not([context=light-always]){--cbp-table-color:var(--cbp-table-color-dark);--cbp-table-header-color:var(--cbp-table-header-color-dark);--cbp-table-header-color-hover:var(--cbp-table-header-color-hover-dark);--cbp-table-header-color-focus:var(--cbp-table-header-color-focus-dark);--cbp-table-header-color-active:var(--cbp-table-header-color-active-dark);--cbp-table-header-color-bg:var(--cbp-table-header-color-bg-dark);--cbp-table-header-color-bg-hover:var(--cbp-table-header-color-bg-hover-dark);--cbp-table-header-color-bg-focus:var(--cbp-table-header-color-bg-focus-dark);--cbp-table-header-color-bg-active:var(--cbp-table-header-color-bg-active-dark);--cbp-table-header-color-outline:var(--cbp-table-header-color-outline-dark);--cbp-table-row-color-bg:var(--cbp-table-row-color-bg-dark);--cbp-table-row-color-bg-striped:var(--cbp-table-row-color-bg-striped-dark);--cbp-table-row-color-bg-hover:var(--cbp-table-row-color-bg-hover-dark);--cbp-table-row-color-bg-selected:var(--cbp-table-row-color-bg-selected-dark);--cbp-table-row-color-border:var(--cbp-table-row-color-border-dark)}cbp-table{display:block;max-width:100%;overflow-x:auto}cbp-table[striped=odd] tbody tr:nth-child(odd){background-color:var(--cbp-table-row-color-bg-striped)}cbp-table[striped=even] tbody tr:nth-child(even){background-color:var(--cbp-table-row-color-bg-striped)}cbp-table[hover=row] tbody tr:hover td{background-color:var(--cbp-table-row-color-bg-hover)}cbp-table[hover=cell] tbody td:hover{background-color:var(--cbp-table-row-color-bg-hover)}cbp-table[column-hover] table:has(thead tr>*:nth-child(1):hover) tr>*:nth-child(1):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(2):hover) tr>*:nth-child(2):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(3):hover) tr>*:nth-child(3):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(4):hover) tr>*:nth-child(4):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(5):hover) tr>*:nth-child(5):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(6):hover) tr>*:nth-child(6):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(7):hover) tr>*:nth-child(7):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(8):hover) tr>*:nth-child(8):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(9):hover) tr>*:nth-child(9):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(10):hover) tr>*:nth-child(10):not([aria-sort]){background-color:var(--cbp-table-row-color-bg-hover)}cbp-table table{margin:0;padding:0;max-width:100%;border-collapse:collapse}cbp-table table caption{text-align:left;font-size:var(--cbp-font-size-heading-xl);line-height:var(--cbp-line-height-xl)}cbp-table table th,cbp-table table td{color:var(--cbp-table-color);text-align:left;vertical-align:top;padding:var(--cbp-table-cell-padding)}cbp-table table th:has(input[type=checkbox]),cbp-table table td:has(input[type=checkbox]){vertical-align:middle;padding-block:var(--cbp-space-2x)}cbp-table table th:has(button),cbp-table table td:has(button){padding:0}cbp-table table th cbp-checkbox,cbp-table table td cbp-checkbox{--cbp-checkbox-min-height:0;--cbp-checkbox-margin:0}cbp-table table thead th{font-size:var(--cbp-font-size-heading-xs);vertical-align:bottom;transition:width 2s}cbp-table table thead th[aria-sort=none] button{padding-inline-end:var(--cbp-space-9x)}cbp-table table thead th:has(button:hover){--cbp-table-header-color:var(--cbp-table-header-color-hover);--cbp-table-header-color-bg:var(--cbp-table-header-color-bg-hover);--cbp-table-header-color-dark:var(--cbp-table-header-color-hover-dark);--cbp-table-header-color-bg-dark:var(--cbp-table-header-color-bg-hover-dark)}cbp-table table thead th:has(button:hover) cbp-button[fill][color]{--cbp-button-color-hover:var(--cbp-table-header-color-hover);--cbp-button-color-hover-dark:var(--cbp-table-header-color-hover-dark)}cbp-table table thead th:has(cbp-button[fill][color] button:focus){--cbp-table-header-color:var(--cbp-table-header-color-focus);--cbp-table-header-color-bg:var(--cbp-table-header-color-bg-focus);--cbp-table-header-color-dark:var(--cbp-table-header-color-focus-dark);--cbp-table-header-color-bg-dark:var(--cbp-table-header-color-bg-focus-dark);outline-width:var(--cbp-border-size-md)}cbp-table table thead th:has(cbp-button[fill][color] button:active){--cbp-table-header-color:var(--cbp-table-header-color-active);--cbp-table-header-color-bg:var(--cbp-table-header-color-bg-active);--cbp-table-header-color-dark:var(--cbp-table-header-color-active-dark);--cbp-table-header-color-bg-dark:var(--cbp-table-header-color-bg-active-dark)}cbp-table table thead th cbp-button{--cbp-button-border-radius:0;--cbp-button-border-width:0;--cbp-button-focus-outline-width:0;--cbp-button-color-bg:transparent !important;--cbp-button-color-bg-hover:transparent !important;--cbp-button-color-bg-focus:transparent !important;--cbp-button-color-bg-active:transparent !important;--cbp-button-color-bg-dark:transparent !important;--cbp-button-color-bg-hover-dark:transparent !important;--cbp-button-color-bg-focus-dark:transparent !important;--cbp-button-color-bg-active-dark:transparent !important;--cbp-button-padding:var(--cbp-table-cell-padding)}cbp-table table thead th cbp-button button{justify-content:flex-start;text-align:left;text-transform:unset;letter-spacing:unset;white-space:normal;text-wrap:balance;margin:0;transition:width 2s}cbp-table table thead th:has(button:hover){--cbp-button-color-bg-hover:transparent !important;--cbp-button-color-bg-hover-dark:transparent !important}cbp-table table thead th:has(button:focus){--cbp-button-color-bg-focus:var(--cbp-color-interactive-focus-dark) !important;--cbp-button-color-bg-focus-dark:var(--cbp-color-interactive-focus-light) !important}cbp-table table tbody tr{background-color:var(--cbp-table-row-color-bg)}cbp-table table tbody tr:has(input[type=checkbox]:checked){background-color:var(--cbp-table-row-color-bg-selected)}cbp-table table tr{border-bottom:solid var(--cbp-table-row-border-size) var(--cbp-table-row-color-border)}cbp-table table th{--cbp-button-color:var(--cbp-table-header-color);--cbp-button-color-dark:var(--cbp-table-header-color-dark);color:var(--cbp-table-header-color);background-color:var(--cbp-table-header-color-bg);font-weight:var(--cbp-font-weight-medium);text-wrap:balance;outline-width:0;outline-style:solid;outline-color:var(--cbp-table-header-color-outline);outline-offset:calc(var(--cbp-space-1x) * -1)}cbp-table table td{text-wrap:pretty}";const l=b;const d=t(class t extends r{constructor(){super();this.__registerHost();this.tableSort=e(this,"tableSort",7);this.sortableColumns=[];this.striped=undefined;this.hover="row";this.columnHover=undefined;this.context=undefined;this.sx={};this.sort=undefined}addScope(){const t=Array.from(this.host.querySelectorAll("thead th"));const r=Array.from(this.host.querySelectorAll("tbody th"));t.forEach((t=>{t.setAttribute("scope","col")}));r.forEach((t=>{t.setAttribute("scope","row")}))}makeSortable(){this.columnHeadings=Array.from(this.host.querySelectorAll("thead th"));this.columnHeadings.forEach((t=>{const r=t.querySelector("cbp-button");if(r){this.sortableColumns=[...this.sortableColumns,t];const e=r.querySelector("button cbp-icon");if(t.getAttribute("aria-sort")=="ascending")e.rotate=270;if(t.getAttribute("aria-sort")=="descending")e.rotate=90;if(!t.getAttribute("aria-sort")){t.setAttribute("aria-sort","none");e.setAttribute("hidden","");r.pressed="false"}else{e.name="arrow-right";r.pressed="true"}r.addEventListener("buttonClick",(r=>{this.doSort(this.columnHeadings.indexOf(t),r)}))}}));const t=this.host.querySelector("th[aria-sort]");if(t){this.sort={columnHeading:t,direction:t.getAttribute("aria-sort")}}}async doSort(t,r=undefined){const e=this.columnHeadings[t];const o=e.querySelector("cbp-button");const a=e.querySelector("button cbp-icon");let c="ascending";if(e==this.sort.columnHeading){e.getAttribute("aria-sort")=="ascending"?c="descending":c="ascending"}else{this.sort.columnHeading.setAttribute("aria-sort","none");this.sort.columnHeading.querySelector("cbp-button").pressed="false";this.sort.columnHeading.querySelector("button cbp-icon").name=undefined;this.sort.columnHeading.querySelector("button cbp-icon").setAttribute("hidden","");o.pressed="true"}a.removeAttribute("hidden");a.rotate=c=="descending"?90:270;a.name="arrow-right";e.setAttribute("aria-sort",c);let b={columnHeading:e,direction:c};this.sort=b;this.tableSort.emit({host:this.host,column:t,direction:c,nativeEvent:r})}componentWillLoad(){var t;this.table=this.host.querySelector("table");this.caption=(t=this.table)===null||t===void 0?void 0:t.querySelector("caption");if(!this.caption)console.warn(`cbp-table: A caption tag is required for accessibility. If you don't want a visible caption, add a 'hidden' attribute to it.`);this.columnHeadings=Array.from(this.host.querySelectorAll("thead > th"));if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}c(this.host,Object.assign({},this.sx))}componentDidLoad(){this.addScope();this.makeSortable()}render(){return o(a,{key:"e1e51fea95c6c985962c46057b59a775f3473d24"},o("slot",{key:"8d4ee921236d6b99a5a0bcf51b7f1130587d68d8",name:"cbp-table-toolbar"}),o("slot",{key:"8f275deb9b7b3938075815c30c171cecd0821967"}))}get host(){return this}static get style(){return l}},[4,"cbp-table",{striped:[513],hover:[513],columnHover:[516,"column-hover"],context:[513],sx:[8],sort:[32],doSort:[64]}]);function h(){if(typeof customElements==="undefined"){return}const t=["cbp-table"];t.forEach((t=>{switch(t){case"cbp-table":if(!customElements.get(t)){customElements.define(t,d)}break}}))}const i=d;const p=h;export{i as CbpTable,p as defineCustomElement};
//# sourceMappingURL=cbp-table.js.map