@cbpds/web-components
Version:
Web components for the CBP Design System.
127 lines (121 loc) • 13.9 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');
const cbpTableCss = ":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 CbpTableStyle0 = cbpTableCss;
const CbpTable = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.tableSort = index.createEvent(this, "tableSort", 7);
this.sortableColumns = [];
this.striped = undefined;
this.hover = 'row';
this.columnHover = undefined;
this.context = undefined;
this.sx = {};
this.sort = undefined;
}
addScope() {
const columnHeadings = Array.from(this.host.querySelectorAll('thead th'));
const rowHeadings = Array.from(this.host.querySelectorAll('tbody th'));
columnHeadings.forEach(item => {
item.setAttribute('scope', 'col');
});
rowHeadings.forEach(item => {
item.setAttribute('scope', 'row');
});
}
makeSortable() {
this.columnHeadings = Array.from(this.host.querySelectorAll('thead th'));
this.columnHeadings.forEach(item => {
const control = item.querySelector('cbp-button');
if (control) {
this.sortableColumns = [...this.sortableColumns, item];
const icon = control.querySelector('button cbp-icon');
if (item.getAttribute('aria-sort') == "ascending")
icon.rotate = 270;
if (item.getAttribute('aria-sort') == "descending")
icon.rotate = 90;
if (!item.getAttribute('aria-sort')) {
item.setAttribute("aria-sort", "none");
icon.setAttribute('hidden', '');
control.pressed = "false";
}
else {
icon.name = "arrow-right";
control.pressed = "true";
}
control.addEventListener("buttonClick", e => {
this.doSort(this.columnHeadings.indexOf(item), e);
});
}
});
const sortedColumn = this.host.querySelector('th[aria-sort]');
if (sortedColumn) {
this.sort = {
columnHeading: sortedColumn,
direction: sortedColumn.getAttribute('aria-sort')
};
}
}
async doSort(column, e = undefined) {
const ColumnHeading = this.columnHeadings[column];
const CbpButton = ColumnHeading.querySelector('cbp-button');
const Icon = ColumnHeading.querySelector('button cbp-icon');
let direction = "ascending";
if (ColumnHeading == this.sort.columnHeading) {
ColumnHeading.getAttribute('aria-sort') == "ascending"
? direction = "descending"
: direction = "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', '');
CbpButton.pressed = "true";
}
Icon.removeAttribute('hidden');
Icon.rotate = (direction == 'descending') ? 90 : 270;
Icon.name = "arrow-right";
ColumnHeading.setAttribute('aria-sort', direction);
let newSort = {
columnHeading: ColumnHeading,
direction: direction
};
this.sort = newSort;
this.tableSort.emit({
host: this.host,
column: column,
direction: direction,
nativeEvent: e
});
}
componentWillLoad() {
var _a;
this.table = this.host.querySelector('table');
this.caption = (_a = this.table) === null || _a === void 0 ? void 0 : _a.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) || {};
}
utils.setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
this.addScope();
this.makeSortable();
}
render() {
return (index.h(index.Host, { key: 'e1e51fea95c6c985962c46057b59a775f3473d24' }, index.h("slot", { key: '8d4ee921236d6b99a5a0bcf51b7f1130587d68d8', name: "cbp-table-toolbar" }), index.h("slot", { key: '8f275deb9b7b3938075815c30c171cecd0821967' })));
}
get host() { return index.getElement(this); }
};
CbpTable.style = CbpTableStyle0;
exports.cbp_table = CbpTable;
//# sourceMappingURL=cbp-table.cjs.entry.js.map