@scania/tegel
Version:
Tegel Design System
118 lines (113 loc) • 7.67 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
import { d as defineCustomElement$2 } from './p-b390ece5.js';
const tableToolbarCss = ":host{box-sizing:border-box;display:table-caption;position:relative;background-color:var(--tds-table-toolbar-background);color:var(--tds-table-color);padding:0 var(--tds-spacing-element-16);height:64px;border-top-left-radius:4px;border-top-right-radius:4px}:host *{box-sizing:border-box}:host .tds-table__upper-bar-flex{width:100%;height:100%;display:flex;justify-content:space-between}:host .tds-table__actionbar-left{display:flex}:host .tds-table__title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding-top:var(--tds-spacing-element-16);text-align:left;margin-right:var(--tds-spacing-element-8)}:host .tds-table__actionbar,:host slot[name=end]::slotted(*),:host slot[name=start]::slotted(*){display:flex;align-self:center}:host .tds-table__searchbar{display:flex;align-self:center;position:relative;height:40px;width:40px;border-radius:4px 4px 0 0;transition:background-color 250ms ease, width 250ms ease;overflow:hidden;background-color:transparent}:host .tds-table__searchbar::after{content:\"\";width:100%;height:2px;position:absolute;bottom:0;background-color:var(--tds-blue-400);transform:scaleX(0);transition:transform 150ms ease}:host .tds-table__searchbar:focus-within::after{transform:scaleX(100%)}:host .tds-table__searchbar:focus-within,:host .tds-table__searchbar.tds-table__searchbar--active{width:208px;background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:focus-within:hover,:host .tds-table__searchbar.tds-table__searchbar--active:hover{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar .tds-table__searchbar-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);z-index:1;width:100%;height:100%;border:none;padding:0 36px 0 16px;background-color:transparent;outline:none;cursor:pointer}:host .tds-table__searchbar .tds-table__searchbar-input :focus{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:hover{background-color:var(--tds-table-toolbar-searchbar-background-hover)}:host .tds-table__searchbar .tds-table__searchbar-icon{z-index:0;position:absolute;right:9px;top:9px;width:20px;height:20px}:host(.toolbar__horizontal-scroll){position:absolute;top:var(--tds-spacing-element-16)}:host(.tds-table--compact){height:56px}";
const TdsTableToolbarStyle0 = tableToolbarCss;
const relevantTableProps = [
'compactDesign',
'noMinWidth',
'verticalDividers',
'horizontalScrollWidth',
];
const TdsTableToolbar$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableToolbar extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.tdsFilter = createEvent(this, "tdsFilter", 7);
this.tableTitle = '';
this.filter = false;
this.tdsSearchAriaLabel = '';
this.verticalDividers = false;
this.compactDesign = false;
this.noMinWidth = false;
this.whiteBackground = false;
this.tableId = '';
this.horizontalScrollWidth = 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];
});
}
}
connectedCallback() {
this.tableEl = this.host.closest('tds-table');
this.tableId = this.tableEl.tableId;
if (!this.tdsSearchAriaLabel) {
console.warn('tds-table-toolbar: tdsSearchAriaLabel is highly recommended for accessibility');
}
}
componentWillLoad() {
relevantTableProps.forEach((tablePropName) => {
this[tablePropName] = this.tableEl[tablePropName];
});
}
handleSearch(event) {
const searchTerm = event.currentTarget.value.toLowerCase();
const tdsTableSearchBar = event.currentTarget.parentElement;
this.tdsFilter.emit({
tableId: this.tableId,
query: searchTerm,
});
/** NOTE: Could these be handles in pure CSS? */
if (searchTerm.length > 0) {
tdsTableSearchBar.classList.add('tds-table__searchbar--active');
}
else {
tdsTableSearchBar.classList.remove('tds-table__searchbar--active');
}
}
getStyles() {
const styles = {};
if (this.horizontalScrollWidth) {
styles.width = `${this.horizontalScrollWidth}px`;
}
return styles;
}
render() {
return (h(Host, { key: '76acde1b3c55f421cedae9bf932f923813272fe3', class: {
'tds-table--compact': this.compactDesign,
'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
}, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: 'e6fe2f411ebde77befeb99992b5157bba3651fbf', class: "tds-table__upper-bar-flex" }, h("div", { key: 'f61dc1de54a73c28a2ef10dcae2a5a629ae76c57', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: 'ca50269d08eab742cb759d371937739fd0a87eff', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '275b233ff233a9f90d936553fa31015f72f21899', name: "start" })), h("div", { key: 'd2ed2b7918e8f8d8e23c34bd8114ee1e69cdb681', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'cd0bd112e3ab6b31c96e10bc4b2eb32715766d58', class: "tds-table__searchbar" }, h("input", { key: '3dbcdf5394477fb55d41c2ee0ddcea1e50ffcd64', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '0a34bfd7cd50c88604af01dfc9bef1adae7d8999', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '98a376c6db7d249e060dafffef18c9345730e25c', name: "search", size: "20px" })))), h("slot", { key: 'e4400d9ddb0f6435315569e1f64f34bc04d8054f', name: "end" })))));
}
get host() { return this; }
static get style() { return TdsTableToolbarStyle0; }
}, [1, "tds-table-toolbar", {
"tableTitle": [513, "table-title"],
"filter": [516],
"tdsSearchAriaLabel": [1, "tds-search-aria-label"],
"verticalDividers": [32],
"compactDesign": [32],
"noMinWidth": [32],
"whiteBackground": [32],
"tableId": [32],
"horizontalScrollWidth": [32]
}, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-table-toolbar", "tds-icon"];
components.forEach(tagName => { switch (tagName) {
case "tds-table-toolbar":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsTableToolbar$1);
}
break;
case "tds-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const TdsTableToolbar = TdsTableToolbar$1;
const defineCustomElement = defineCustomElement$1;
export { TdsTableToolbar, defineCustomElement };