@scania/tegel
Version:
Tegel Design System
89 lines (84 loc) • 6.72 kB
JavaScript
'use strict';
var index = require('./index-DGsdvbvx.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 relevantTableProps = [
'compactDesign',
'noMinWidth',
'verticalDividers',
'horizontalScrollWidth',
];
const TdsTableToolbar = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.tdsFilter = index.createEvent(this, "tdsFilter", 7);
/** Adds title to the Table */
this.tableTitle = '';
/** Enables preview of searchbar */
this.filter = false;
/** Aria label for the search input, providing an accessible description */
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() {
var _a;
this.tableEl = this.host.closest('tds-table');
this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
if (!this.tdsSearchAriaLabel) {
console.warn('tds-table-toolbar: tdsSearchAriaLabel is highly recommended for accessibility');
}
}
componentWillLoad() {
relevantTableProps.forEach((tablePropName) => {
var _a;
this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[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 (index.h(index.Host, { key: 'f8a4f02533b392cdef06823c0a8f3fc7eb65dac1', class: {
'tds-table--compact': this.compactDesign,
'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
}, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, index.h("div", { key: 'a4d5d8b3a1f874ad6cf8b6c2f0387abb80dc6c7c', class: "tds-table__upper-bar-flex" }, index.h("div", { key: 'fdda25df918b94db38efec19b67486c27ecef944', class: "tds-table__actionbar-left" }, this.tableTitle && (index.h("caption", { key: '835fa2f6230dffd4e30f219d5753959d66833717', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), index.h("slot", { key: '1e55264456b36bfee36674ced3ab6b7a4767dd24', name: "start" })), index.h("div", { key: '6bbc6ca3917171e610ae162bc2ffce3e5b190874', class: "tds-table__actionbar" }, this.filter && (index.h("div", { key: '49acb858ed5fefb5ef3cd7e84a11d22a8ffbbfa4', class: "tds-table__searchbar" }, index.h("input", { key: '72e41aef9c82e018e03c95dc3c48f1901cf1ce84', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), index.h("span", { key: 'c9825e7843f1460f2d9d2aa1122790b2d2c8fd01', class: "tds-table__searchbar-icon" }, index.h("tds-icon", { key: '3f772922cc80abbb127ff675f4e0e9db79cd6c9a', name: "search", size: "20px" })))), index.h("slot", { key: '20128d959ea3a1fc97eeb4dcf41313db088feae5', name: "end" })))));
}
get host() { return index.getElement(this); }
};
TdsTableToolbar.style = tableToolbarCss();
exports.tds_table_toolbar = TdsTableToolbar;