@scania/tegel
Version:
Tegel Design System
169 lines (164 loc) • 10.2 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
import { g as generateUniqueId } from './p-11648030.js';
const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host .tds-table__row--expanded{border-bottom:none}:host .tds-table__row:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand--expanded{border-bottom:1px solid var(--tds-table-divider)}:host .tds-table__row-expand .tds-table__cell-expand{max-width:1px;overflow:auto;padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host .tds-table__row-expand .tds-table__cell-expand--overflow-visible{overflow:visible}:host .tds-table__row-expand .tds-table__cell-expand--overflow-hidden{overflow:hidden}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table__row--hidden){display:none}:host(.tds-table--divider) .tds-table__cell--expand{border-right:1px solid var(--tds-table-divider)}";
const TdsTableBodyRowExpandableStyle0 = tableBodyRowExpandableCss;
const relevantTableProps = [
'verticalDividers',
'compactDesign',
'noMinWidth',
'modeVariant',
];
const TdsTableBodyRowExpandable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRowExpandable extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.internalTdsRowExpanded = createEvent(this, "internalTdsRowExpanded", 6);
this.tdsChange = createEvent(this, "tdsChange", 6);
this.colSpan = null;
this.rowId = generateUniqueId();
this.expanded = undefined;
this.overflow = 'auto';
this.autoCollapse = false;
this.tdsAriaLabelExpandButton = '';
this.isExpanded = false;
this.tableId = '';
this.columnsNumber = null;
this.verticalDividers = false;
this.compactDesign = false;
this.noMinWidth = false;
this.modeVariant = null;
}
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];
});
}
}
handleRowExpand(event) {
/** Collapse all other rows when autoCollapse is true and a row is expanded */
if (this.autoCollapse &&
event.detail.isExpanded &&
event.detail.rowId !== this.rowId &&
event.detail.tableId === this.tableId) {
this.collapse();
}
}
watchExpanded(newValue) {
if (newValue !== this.isExpanded) {
this.isExpanded = newValue;
this.tdsChange.emit({
rowId: this.rowId,
isExpanded: this.isExpanded,
tableId: this.tableId,
});
}
}
/** Method to expand table row */
async expand() {
this.isExpanded = true;
this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded, tableId: this.tableId });
}
/** Method to collapse table row */
async collapse() {
this.isExpanded = false;
this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded, tableId: this.tableId });
}
connectedCallback() {
/* if user did set a prop we use that as default behaviour */
if (this.expanded !== undefined) {
this.isExpanded = this.expanded;
}
this.tableEl = this.host.closest('tds-table');
this.tableId = this.tableEl.tableId;
}
componentWillLoad() {
relevantTableProps.forEach((tablePropName) => {
this[tablePropName] = this.tableEl[tablePropName];
});
}
componentWillRender() {
if (this.colSpan !== null) {
this.columnsNumber = this.colSpan;
}
else {
this.columnsNumber = this.tableEl.querySelector('tds-table-header').childElementCount + 1;
}
}
sendValue() {
this.internalTdsRowExpanded.emit([this.tableId, this.isExpanded]);
this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded, tableId: this.tableId });
}
onChangeHandler(event) {
this.isExpanded = event.currentTarget.checked === true;
this.sendValue();
}
render() {
return (h(Host, { key: '36be80e7cd0916cb8e196f52676281fcabc1996e', class: {
'tds-table__row': true,
'tds-table__row-expand--active': this.isExpanded,
'tds-table__compact': this.compactDesign,
'tds-table--divider': this.verticalDividers,
} }, h("tr", { key: '868377d055d9d66fcf1824ed811e4a56f67b79e0', id: `expandable-content-${this.rowId}`, class: {
'tds-table__row': true,
'tds-table__row--expanded': this.isExpanded,
}, part: "row" }, h("td", { key: '059858ff5293deda48d039fdc81dd4a5d8ae6fce', class: {
'tds-table__cell-expand': true,
} }, h("label", { key: '6e05d93a509cb77cb3fd76f3d869b820b5d83163', class: "tds-table__expand-control-container" }, h("input", { key: 'ed7091d4dfdac43c082ee63548c7bff2e87379dd', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: '84622275a00b28685834e0de8552f5c7a36bc983', class: "tds-expendable-row-icon" }, h("svg", { key: '633d1030453895343295b30142410ece7f15dec3', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: 'e4d21588ca0bb6fbcd68af3a7afb48bafe180bc1', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '5c66154a24fe8d21bb6b9d91930ad7efd4cb1ec5' })), h("tr", { key: '1417c7143b8aaafbb2143557e53443cde9afcbde', class: {
'tds-table__row-expand': true,
'tds-table__row-expand--expanded': this.isExpanded,
}, part: "expand-row" }, h("td", { key: 'b72d532f22b5c7c0bc7c7b23caf5887d4228b9d0', class: {
'tds-table__cell-expand': true,
'tds-table__cell-expand--overflow-hidden': this.overflow === 'hidden',
'tds-table__cell-expand--overflow-visible': this.overflow === 'visible',
}, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: '256a827b43a8099b9ea4e5a5a43023ff9bf0b828', style: {
overflow: this.overflow,
} }, h("slot", { key: '6bbc0eeca7b7a654da9c1b7da6992aa8928e1974', name: "expand-row" }))))));
}
get host() { return this; }
static get watchers() { return {
"expanded": ["watchExpanded"]
}; }
static get style() { return TdsTableBodyRowExpandableStyle0; }
}, [1, "tds-table-body-row-expandable", {
"colSpan": [2, "col-span"],
"rowId": [513, "row-id"],
"expanded": [516],
"overflow": [513],
"autoCollapse": [4, "auto-collapse"],
"tdsAriaLabelExpandButton": [513, "tds-aria-label-expand-button"],
"isExpanded": [32],
"tableId": [32],
"columnsNumber": [32],
"verticalDividers": [32],
"compactDesign": [32],
"noMinWidth": [32],
"modeVariant": [32],
"expand": [64],
"collapse": [64]
}, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"], [16, "tdsChange", "handleRowExpand"]], {
"expanded": ["watchExpanded"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-table-body-row-expandable"];
components.forEach(tagName => { switch (tagName) {
case "tds-table-body-row-expandable":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsTableBodyRowExpandable$1);
}
break;
} });
}
defineCustomElement$1();
const TdsTableBodyRowExpandable = TdsTableBodyRowExpandable$1;
const defineCustomElement = defineCustomElement$1;
export { TdsTableBodyRowExpandable, defineCustomElement };