@scania/tegel
Version:
Tegel Design System
108 lines (103 loc) • 6.38 kB
JavaScript
'use strict';
var index = require('./index-DGsdvbvx.js');
const tableHeaderCss = () => `:host{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .tds-table__header-cell--checkbox{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);display:table-cell;text-align:left;color:var(--tds-table-color);background-color:var(--tds-table-header-background);border-bottom:1px solid var(--tds-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input{display:none}:host .tds-table__expand-control-container .tds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__expand-control-container .tds-expandable-row-icon--opened{transform:rotate(180deg)}:host(.tds-table--compact) .tds-table__header-cell--checkbox{height:32px}:host(.tds-table--compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__header-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table--toolbar-available) .tds-table__header-cell--checkbox{border-top-left-radius:0}`;
const relevantTableProps = [
'multiselect',
'expandableRows',
'verticalDividers',
'compactDesign',
'noMinWidth',
];
const TdsTableHeaderRow = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.tdsSelectAll = index.createEvent(this, "tdsSelectAll", 6);
/** @deprecated Deprecated, use selected instead. */
this.allSelected = false;
/** Prop for controlling the enabled/disabled state of the "All selected"-checkbox. */
this.disabled = false;
/** Prop for controlling the indeterminate state of the "All selected"-checkbox. */
this.indeterminate = false;
this.multiselect = false;
this.expandableRows = false;
this.mainCheckboxSelected = false;
this.mainExpendSelected = false;
this.verticalDividers = false;
this.compactDesign = false;
this.noMinWidth = false;
this.whiteBackground = false;
this.enableToolbarDesign = false;
this.tableId = '';
}
internalTdsPropChangeListener(event) {
if (this.tableId === event.detail.tableId) {
event.detail.changed
.filter((changedProp) => relevantTableProps.includes(changedProp))
.forEach((changedProp) => {
if (typeof this[changedProp] === 'undefined') {
throw new Error(`Table prop is not supported: ${changedProp}`);
}
this[changedProp] = event.detail[changedProp];
});
}
}
internalTdsRowExpandedListener(event) {
if (this.tableId === event.detail[0]) {
// TODO: Improve this logic. Why we get late repose in DOM?
setTimeout(() => {
this.bodyExpandClicked();
}, 100);
}
}
bodyExpandClicked() {
var _a;
const parentBody = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-body');
if (parentBody) {
const numberOfExtendRowsActive = parentBody.getElementsByClassName('tds-table__row-extend--active').length;
const numberOfExtendRows = parentBody.getElementsByTagName('tds-table-body-row-expendable').length;
if (numberOfExtendRows === numberOfExtendRowsActive) {
this.mainExpendSelected = true;
}
else {
this.mainExpendSelected = false;
}
}
}
connectedCallback() {
var _a;
this.tableEl = this.host.closest('tds-table');
this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
}
componentWillLoad() {
relevantTableProps.forEach((tablePropName) => {
var _a;
this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
});
}
componentWillRender() {
const closestTable = this.host.closest('tds-table');
if (closestTable) {
this.enableToolbarDesign =
(closestTable === null || closestTable === void 0 ? void 0 : closestTable.getElementsByTagName('tds-table-toolbar').length) >= 1;
}
}
async handleCheckboxChange(event) {
var _a;
this.allSelected = event.detail.checked;
this.tdsSelectAll.emit({
tableId: this.tableId,
checked: event.detail.checked,
selectedRows: await ((_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.getSelectedRows()),
});
}
render() {
return (index.h(index.Host, { key: '6694732da4046fe06dd5583dabcd7f08b1eca27e', class: {
'tds-table--compact': this.compactDesign,
'tds-table--divider': this.verticalDividers,
'tds-table--toolbar-available': this.enableToolbarDesign,
} }, index.h("tr", { key: 'ae44f1f20feedd4833dcad0f5eb166dbcb8271c2' }, this.multiselect && (index.h("th", { key: '7164dda86ee3eb21dc04c11ebd0dd074a8fdf00d', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, index.h("div", { key: '791a29bf597e9395c84bae6d408f146f8d240967', class: "tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { key: '6bad99498d9e67dfe068e393ed15dc229a6229de', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (index.h("th", { key: '5818a44e2ce485265fecef36135dbbe113ac2bdf', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), index.h("slot", { key: 'a8cd6f4cde24922bf8a1998a4120c7ff02cf60f3' }))));
}
get host() { return index.getElement(this); }
};
TdsTableHeaderRow.style = tableHeaderCss();
exports.tds_table_header = TdsTableHeaderRow;