@aqua-ds/web-components
Version:
AquaDS Web Components
238 lines (233 loc) • 13.6 kB
JavaScript
import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './aq-tooltip2.js';
var Sort;
(function (Sort) {
Sort["UNSET"] = "unset";
Sort["ASC"] = "asc";
Sort["DESC"] = "desc";
})(Sort || (Sort = {}));
const aqTableHeaderCellCss = ".aq-table__header-cells{display:-ms-flexbox;display:flex;width:100%;margin-bottom:var(--spacing-size-minor)}.aq-table__header-cells-row{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.aq-table__header-cells-row:not(:nth-child(1)):not(:nth-last-child(1)){border-bottom:var(--spacing-size-basic) solid var(--color-paper-light)}.aq-table__header-cells-row:nth-last-child(1){border-bottom:var(--spacing-size-basic) solid var(--color-paper-light)}.aq-table__header-cells-group{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;width:100%;overflow:hidden;scroll-behavior:auto}.aq-table__header-cells-group:not(:nth-child(1)){border-left:var(--spacing-size-basic) solid var(--color-paper-light);border-right:var(--spacing-size-basic) solid var(--color-paper-light)}.aq-table__header-cells .aq-table-header__cell{width:100%;padding:calc(var(--spacing-size-large) - 0.25rem) var(--spacing-size-moderate);font-size:var(--spacing-size-medium);color:var(--color-paper-darker);font-weight:var(--font-weight-bold);-webkit-transition:all 200ms ease-out;transition:all 200ms ease-out;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.aq-table__header-cells .aq-table-header__cell-item{width:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.aq-table__header-cells .aq-table-header__cell-labels{width:100%;position:relative}.aq-table__header-cells .aq-table-header__cell-labels,.aq-table__header-cells .aq-table-header__cell-config{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:var(--spacing-size-medium)}.aq-table__header-cells .aq-table-header__cell-reorder{position:absolute;left:calc(var(--spacing-size-medium) * -1);opacity:0;font-size:var(--spacing-size-moderate);-webkit-transition:all 200ms ease-out;transition:all 200ms ease-out;cursor:move}.aq-table__header-cells .aq-table-header__cell-reorder--hide{left:calc(var(--spacing-size-medium) * -1) !important;opacity:0 !important}.aq-table__header-cells .aq-table-header__cell-reorder--hide::hover{left:calc(var(--spacing-size-medium) * -1) !important;opacity:0 !important}.aq-table__header-cells .aq-table-header__cell-pinned,.aq-table__header-cells .aq-table-header__cell-sort{cursor:pointer}.aq-table__header-cells .aq-table-header__cell-pinned.aq-icon-chevron-up,.aq-table__header-cells .aq-table-header__cell-sort.aq-icon-chevron-up{margin-bottom:var(--spacing-size-minor)}.aq-table__header-cells .aq-table-header__cell-pinned.aq-icon-chevron-down,.aq-table__header-cells .aq-table-header__cell-sort.aq-icon-chevron-down{margin-top:var(--spacing-size-minor)}.aq-table__header-cells .aq-table-header__cell-label{-webkit-transition:all 200ms ease-out;transition:all 200ms ease-out;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.aq-table__header-cells .aq-table-header__cell-icon{padding-right:var(--spacing-size-small);-webkit-transition:all 200ms ease-out;transition:all 200ms ease-out}.aq-table__header-cells .aq-table-header__cell-tooltip{margin-left:var(--spacing-size-small)}.aq-table__header-cells .aq-table-header__cell:hover{color:var(--color-ink-base)}.aq-table__header-cells .aq-table-header__cell:hover .aq-table-header__cell-reorder{opacity:1;left:0}.aq-table__header-cells .aq-table-header__cell:hover .aq-table-header__cell-label--left-sloted{margin-left:var(--spacing-size-moderate)}.aq-table__header-cells .aq-table-header__cell:hover .aq-table-header__cell-icon--left-sloted{margin-left:var(--spacing-size-moderate)}.aq-table__header-cells .aq-table-header__cell-divider{min-width:var(--spacing-size-minor);height:var(--spacing-size-big);padding:var(--spacing-size-short) 0px;cursor:col-resize;position:relative;z-index:2}.aq-table__header-cells .aq-table-header__cell-divider--resizing{border-right:var(--spacing-size-basic) dashed var(--color-paper-dark)}";
const AqTableHeaderCell = /*@__PURE__*/ proxyCustomElement(class AqTableHeaderCell extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.pinned = false;
this.showPinned = false;
this.sort = Sort.UNSET;
this.onResizing = (evt) => {
const diff = evt.pageX - this.startX;
const newSize = Math.max(this.startWidth + diff, 50);
const headerItem = this.el;
const cell = this.el.querySelector('.aq-table-header__cell');
let finalSize = newSize;
if (this.maxWidth && newSize > this.maxWidth) {
finalSize = this.maxWidth;
}
if (this.minWidth && newSize < this.minWidth) {
finalSize = this.minWidth;
}
headerItem.style.width = `${finalSize}px`;
cell.style.width = `${finalSize}px`;
if (this.minWidth)
headerItem.style.minWidth = `${this.minWidth}px`;
if (this.maxWidth)
headerItem.style.maxWidth = `${this.maxWidth}px`;
if (this.minWidth)
headerItem.style.minWidth = `${this.minWidth}px`;
if (this.maxWidth)
headerItem.style.maxWidth = `${this.maxWidth}px`;
const { size } = { ...this.columnDef };
!!size ? (headerItem.style.flex = '0 0 auto') : (headerItem.style.flexShrink = '1');
};
this.onResizeEnd = () => {
document.removeEventListener('mousemove', this.onResizing);
document.removeEventListener('mouseup', this.onResizeEnd);
this.el.querySelector('.aq-table-header__cell-divider')?.classList.remove('aq-table-header__cell-divider--resizing');
this.column.setSize(this.el.getBoundingClientRect().width);
this.setCellTooltip();
};
}
onColumnChange(newVal) {
this.setValues(newVal);
}
onPinnedChange(newVal) {
setTimeout(() => {
this.showPinned = newVal;
}, 200);
}
handlePin() {
this.pinned = !this.pinned;
this.column.setPin(this.pinned);
}
handleSort() {
switch (this.sort) {
case Sort.UNSET:
this.sort = Sort.ASC;
break;
case Sort.ASC:
this.sort = Sort.DESC;
break;
case Sort.DESC:
this.sort = Sort.UNSET;
break;
default:
this.sort = Sort.UNSET;
break;
}
this.column.setSort(this.sort);
}
get getHasColumns() {
return !!this.getMeta.pinned || !!this.getMeta.sort;
}
get getSortClass() {
return {
'aq-table-header__cell-sort': true,
'aq-icon-chevron-up-down': this.sort === Sort.UNSET,
'aq-icon-chevron-up': this.sort === Sort.ASC,
'aq-icon-chevron-down': this.sort === Sort.DESC,
};
}
get getSortElement() {
if (!!this.getMeta.sort)
return h("em", { onClick: () => this.handleSort(), class: this.getSortClass });
}
get getPinnedClass() {
return {
'aq-table-header__cell-pinned': true,
'aq-icon-pin': !this.pinned,
'aq-icon-pin-fill': this.pinned,
};
}
get getPinnedElement() {
return h("em", { onClick: () => this.handlePin(), class: this.getPinnedClass });
}
get getMeta() {
return this.columnDef?.meta || {};
}
get getTooltipElement() {
if (!!this.getMeta.tooltip)
return (h("em", { class: "aq-table-header__cell-tooltip aq-icon-info-circle" }, h("aq-tooltip", { config: { placement: 'top' } }, h("span", null, this.getMeta.tooltip))));
}
get getIconClass() {
return {
'aq-table-header__cell-icon': true,
'aq-table-header__cell-icon--left-sloted': !!this.getMeta.reorder && !this.getMeta.pinned,
[`${this.getMeta.icon}`]: !!this.getMeta.icon,
};
}
get getIconElement() {
if (!!this.getMeta.icon)
return h("em", { class: this.getIconClass });
}
get getReorderClasses() {
return {
'aq-table-header__cell-reorder aq-icon-six-dots': true,
'aq-table-header__cell-reorder--hide': this.pinned,
};
}
get getLabelClass() {
return {
'aq-table-header__cell-label': true,
'aq-table-header__cell-label--left-sloted': !!this.getMeta.reorder && !!this.getMeta.icon === false && !this.pinned,
};
}
get getColumnSize() {
const { size } = { ...this.columnDef };
return !!size ? `${size}px` : '100%';
}
get getMinColumnSize() {
const { minSize } = { ...this.columnDef };
return minSize;
}
get getMaxColumnSize() {
const { maxSize } = { ...this.columnDef };
return maxSize;
}
get getSizes() {
let sizes = { width: this.getColumnSize };
if (!!this.getMinColumnSize || !!this.minWidth)
sizes.minWidth = this.getMinColumnSize;
if (!!this.getMaxColumnSize || !!this.maxWidth)
sizes.maxWidth = this.getMaxColumnSize;
return sizes;
}
get getLabel() {
console.log('TBL Label: ', this.columnDef, this.column);
return this.getMeta.label || this.columnDef.header;
}
setValues(newVal) {
this.columnDef = newVal?.columnDef || this.column?.columnDef;
this.sort = this.getMeta.sort || Sort.UNSET;
this.pinned = this.getMeta.pinned || false;
this.showPinned = this.pinned;
}
setCellTooltip() {
const cellHeader = this.el.querySelector('.aq-table-header__cell-labels');
const label = this.el.querySelector('.aq-table-header__cell-label');
const iconWidth = !!this.getIconClass ? 14 : 0;
const cellHeaderWidth = cellHeader.getBoundingClientRect().width - iconWidth;
const labelWidth = label.scrollWidth;
this.showTooltip = cellHeaderWidth < labelWidth;
}
onResizeStart(evt, column) {
evt.preventDefault();
this.startX = evt.pageX;
this.startWidth = column.columnDef.size || column.columnDef.minSize || 50;
this.minWidth = column.columnDef.minSize || 100;
if (!!column.columnDef.maxSize)
this.maxWidth = column.columnDef.maxSize;
this.el.querySelector('.aq-table-header__cell-divider')?.classList.add('aq-table-header__cell-divider--resizing');
document.addEventListener('mousemove', this.onResizing);
document.addEventListener('mouseup', this.onResizeEnd);
}
componentWillLoad() {
this.setValues();
}
componentDidLoad() {
this.setCellTooltip();
}
render() {
return (h(Fragment, { key: '9b66f86c17dd27f71852c4983693f6ca5fb3b868' }, h("div", { key: '787caa471f173f95a665c4d7735a8fefc034dba4', class: "aq-table-header__cell", style: { ...this.getSizes } }, h("div", { key: '3b88d22a96bd7db428ec175abf5b2f558ce65ad4', class: "aq-table-header__cell-labels" }, !!this.getMeta.reorder && !this.showPinned && h("em", { key: '445ae2c1345bcd62b10136668501bafc8e7bfd97', class: this.getReorderClasses }), this.getIconElement, h("span", { class: this.getLabelClass, key: `tooltip-${this.showTooltip}` }, this.showTooltip && h("aq-tooltip", { key: 'fb687e408181014c170283a79f6ed8271185aeda', config: { placement: 'top' } }, this.getLabel), this.getLabel), this.getTooltipElement), this.getHasColumns && (h("div", { key: '2734646cd0b925c20159a20218006c34799adea1', class: "aq-table-header__cell-config" }, this.getPinnedElement, this.getSortElement))), h("div", { key: '4aee3aa83cbc978ced58cfd913415af8e4456d93', class: "aq-table-header__cell-divider", onMouseDown: evt => this.onResizeStart(evt, this.column) })));
}
get el() { return this; }
static get watchers() { return {
"column": ["onColumnChange"],
"pinned": ["onPinnedChange"]
}; }
static get style() { return aqTableHeaderCellCss; }
}, [256, "aq-table-header-cell", {
"column": [16],
"pinned": [32],
"showPinned": [32],
"sort": [32],
"columnDef": [32],
"startX": [32],
"startWidth": [32],
"minWidth": [32],
"maxWidth": [32],
"showTooltip": [32]
}, undefined, {
"column": ["onColumnChange"],
"pinned": ["onPinnedChange"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-table-header-cell", "aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-table-header-cell":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqTableHeaderCell);
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqTableHeaderCell as A, Sort as S, defineCustomElement as d };