@scania/tegel 1.3.3 → 1.4.0

package/dist/cjs/tds-table-footer.cjs.entry.js

@@ -2,106 +2,106 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-705dca7c.js');
+const index = require('./index-ae4fbf97.js');
 
 const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:48px}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 16px}:host .tds-table__footer-cell .tds-table__pagination{height:48px;display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:54px;height:30px;border:none;border-radius:4px;transition:background-color 250ms ease;margin-right:4px;padding-left:16px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:32px;width:32px;border-radius:4px;transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:20px;width:20px;fill:var(--tds-table-color)}:host(.tds-table--compact){height:32px}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:32px}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:24px}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}";
 
 const relevantTableProps = ['compactDesign'];
 function removeShakeAnimation(e) {
-  e.target.classList.remove('tds-table__page-selector-input--shake');
+    e.target.classList.remove('tds-table__page-selector-input--shake');
 }
 const TdsTableFooter = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tdsPagination = index.createEvent(this, "tdsPagination", 7);
-    this.previousPage = () => {
-      /** If pages and greater or equal to 2, decrease pagination value.
-       * This is to not get under 1 in pagination value.  */
-      if (this.paginationValue >= 2) {
-        this.paginationValue--;
-      }
-      /* Emits pagination event. */
-      this.tdsPagination.emit({
-        tableId: this.tableId,
-        paginationValue: Number(this.paginationValue),
-      });
-      this.storeLastCorrectValue(this.paginationValue);
-    };
-    this.nextPage = () => {
-      /** If pages and greater or equal to the number of pages, increase pagination value.
-       * This is to not get above the number of pages in pagination value.  */
-      if (this.paginationValue <= this.pages) {
-        this.paginationValue++;
-      }
-      this.tdsPagination.emit({
-        tableId: this.tableId,
-        paginationValue: Number(this.paginationValue),
-      });
-      this.storeLastCorrectValue(this.paginationValue);
-    };
-    this.pagination = false;
-    this.paginationValue = 1;
-    this.pages = null;
-    this.cols = null;
-    this.columnsNumber = 0;
-    this.compactDesign = false;
-    this.lastCorrectValue = undefined;
-    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}`);
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tdsPagination = index.createEvent(this, "tdsPagination", 7);
+        this.previousPage = () => {
+            /** If pages and greater or equal to 2, decrease pagination value.
+             * This is to not get under 1 in pagination value.  */
+            if (this.paginationValue >= 2) {
+                this.paginationValue--;
+            }
+            /* Emits pagination event. */
+            this.tdsPagination.emit({
+                tableId: this.tableId,
+                paginationValue: Number(this.paginationValue),
+            });
+            this.storeLastCorrectValue(this.paginationValue);
+        };
+        this.nextPage = () => {
+            /** If pages and greater or equal to the number of pages, increase pagination value.
+             * This is to not get above the number of pages in pagination value.  */
+            if (this.paginationValue <= this.pages) {
+                this.paginationValue++;
+            }
+            this.tdsPagination.emit({
+                tableId: this.tableId,
+                paginationValue: Number(this.paginationValue),
+            });
+            this.storeLastCorrectValue(this.paginationValue);
+        };
+        this.pagination = false;
+        this.paginationValue = 1;
+        this.pages = null;
+        this.cols = null;
+        this.columnsNumber = 0;
+        this.compactDesign = false;
+        this.lastCorrectValue = undefined;
+        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];
+            });
         }
-        this[changedProp] = event.detail[changedProp];
-      });
     }
-  }
-  connectedCallback() {
-    this.tableEl = this.host.closest('tds-table');
-    this.tableId = this.tableEl.tableId;
-  }
-  componentWillLoad() {
-    relevantTableProps.forEach((tablePropName) => {
-      this[tablePropName] = this.tableEl[tablePropName];
-    });
-    this.storeLastCorrectValue(this.paginationValue);
-    /** Get the number of columns. */
-    const numberOfColumns = this.host.parentElement.querySelector('tds-table-header').childElementCount;
-    if (this.cols) {
-      this.columnsNumber = this.cols;
+    connectedCallback() {
+        this.tableEl = this.host.closest('tds-table');
+        this.tableId = this.tableEl.tableId;
+    }
+    componentWillLoad() {
+        relevantTableProps.forEach((tablePropName) => {
+            this[tablePropName] = this.tableEl[tablePropName];
+        });
+        this.storeLastCorrectValue(this.paginationValue);
+        /** Get the number of columns. */
+        const numberOfColumns = this.host.parentElement.querySelector('tds-table-header').childElementCount;
+        if (this.cols) {
+            this.columnsNumber = this.cols;
+        }
+        else {
+            this.columnsNumber = numberOfColumns;
+        }
     }
-    else {
-      this.columnsNumber = numberOfColumns;
+    /* Function to store last valid input */
+    storeLastCorrectValue(value) {
+        this.lastCorrectValue = value;
     }
-  }
-  /* Function to store last valid input */
-  storeLastCorrectValue(value) {
-    this.lastCorrectValue = value;
-  }
-  paginationInputChange(event) {
-    const insertedValue = Number(event.target.value);
-    if (insertedValue > event.target.max || insertedValue < event.target.min) {
-      event.target.classList.add('tds-table__page-selector-input--shake');
-      this.inputElement.value = String(this.lastCorrectValue);
-      this.paginationValue = Number(this.inputElement.value);
+    paginationInputChange(event) {
+        const insertedValue = Number(event.target.value);
+        if (insertedValue > event.target.max || insertedValue < event.target.min) {
+            event.target.classList.add('tds-table__page-selector-input--shake');
+            this.inputElement.value = String(this.lastCorrectValue);
+            this.paginationValue = Number(this.inputElement.value);
+        }
+        else {
+            this.paginationValue = insertedValue;
+        }
+        this.tdsPagination.emit({
+            tableId: this.tableId,
+            paginationValue: Number(this.paginationValue),
+        });
+        this.storeLastCorrectValue(this.paginationValue);
     }
-    else {
-      this.paginationValue = insertedValue;
+    render() {
+        return (index.h(index.Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, index.h("tr", { class: "tds-table__footer-row" }, index.h("td", { class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (index.h("div", { class: "tds-table__pagination" }, index.h("div", { class: "tds-table__row-selector" }), index.h("div", { class: "tds-table__page-selector" }, index.h("input", { ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), index.h("p", { class: "tds-table__footer-text" }, "of ", index.h("span", null, this.pages), " pages"), index.h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, index.h("tds-icon", { name: "chevron_left", size: "20px" })), index.h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, index.h("tds-icon", { name: "chevron_right", size: "20px" })))))))));
     }
-    this.tdsPagination.emit({
-      tableId: this.tableId,
-      paginationValue: Number(this.paginationValue),
-    });
-    this.storeLastCorrectValue(this.paginationValue);
-  }
-  render() {
-    return (index.h(index.Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, index.h("tr", { class: "tds-table__footer-row" }, index.h("td", { class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (index.h("div", { class: "tds-table__pagination" }, index.h("div", { class: "tds-table__row-selector" }), index.h("div", { class: "tds-table__page-selector" }, index.h("input", { ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), index.h("p", { class: "tds-table__footer-text" }, "of ", index.h("span", null, this.pages), " pages"), index.h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, index.h("tds-icon", { name: "chevron_left", size: "20px" })), index.h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, index.h("tds-icon", { name: "chevron_right", size: "20px" })))))))));
-  }
-  get host() { return index.getElement(this); }
+    get host() { return index.getElement(this); }
 };
 TdsTableFooter.style = tableFooterCss;
 

package/dist/cjs/tds-table-header.cjs.entry.js

@@ -2,98 +2,98 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-705dca7c.js');
+const index = require('./index-ae4fbf97.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 ::slotted(tds-header-cell:hover){background-color:var(--tds-table-header-background-hover)}: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',
+    'multiselect',
+    'expandableRows',
+    'verticalDividers',
+    'compactDesign',
+    'noMinWidth',
 ];
 const TdsTableHeaderRow = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tdsSelectAll = index.createEvent(this, "tdsSelectAll", 6);
-    this.allSelected = false;
-    this.selected = undefined;
-    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}`);
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tdsSelectAll = index.createEvent(this, "tdsSelectAll", 6);
+        this.allSelected = false;
+        this.selected = undefined;
+        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() {
+        const numberOfExtendRowsActive = this.host.parentElement
+            .querySelector('tds-table-body')
+            .getElementsByClassName('tds-table__row-extend--active').length;
+        const numberOfExtendRows = this.host.parentElement
+            .querySelector('tds-table-body')
+            .getElementsByTagName('tds-table-body-row-expendable').length;
+        if (numberOfExtendRows === numberOfExtendRowsActive) {
+            this.mainExpendSelected = true;
+        }
+        else {
+            this.mainExpendSelected = false;
         }
-        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);
+    connectedCallback() {
+        this.tableEl = this.host.closest('tds-table');
+        this.tableId = this.tableEl.tableId;
+    }
+    componentWillLoad() {
+        relevantTableProps.forEach((tablePropName) => {
+            this[tablePropName] = this.tableEl[tablePropName];
+        });
+    }
+    componentWillRender() {
+        this.enableToolbarDesign =
+            this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
     }
-  }
-  bodyExpandClicked() {
-    const numberOfExtendRowsActive = this.host.parentElement
-      .querySelector('tds-table-body')
-      .getElementsByClassName('tds-table__row-extend--active').length;
-    const numberOfExtendRows = this.host.parentElement
-      .querySelector('tds-table-body')
-      .getElementsByTagName('tds-table-body-row-expendable').length;
-    if (numberOfExtendRows === numberOfExtendRowsActive) {
-      this.mainExpendSelected = true;
+    async handleCheckboxChange(event) {
+        this.allSelected = event.detail.checked;
+        this.tdsSelectAll.emit({
+            tableId: this.tableId,
+            checked: event.detail.checked,
+            selectedRows: await this.tableEl.getSelectedRows(),
+        });
     }
-    else {
-      this.mainExpendSelected = false;
+    render() {
+        return (index.h(index.Host, { class: {
+                'tds-table--compact': this.compactDesign,
+                'tds-table--divider': this.verticalDividers,
+                'tds-table--toolbar-available': this.enableToolbarDesign,
+            } }, index.h("tr", null, this.multiselect && (index.h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" }, index.h("div", { class: "tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { checked: this.allSelected || this.selected, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (index.h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" })), index.h("slot", null))));
     }
-  }
-  connectedCallback() {
-    this.tableEl = this.host.closest('tds-table');
-    this.tableId = this.tableEl.tableId;
-  }
-  componentWillLoad() {
-    relevantTableProps.forEach((tablePropName) => {
-      this[tablePropName] = this.tableEl[tablePropName];
-    });
-  }
-  componentWillRender() {
-    this.enableToolbarDesign =
-      this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
-  }
-  async handleCheckboxChange(event) {
-    this.allSelected = event.detail.checked;
-    this.tdsSelectAll.emit({
-      tableId: this.tableId,
-      checked: event.detail.checked,
-      selectedRows: await this.tableEl.getSelectedRows(),
-    });
-  }
-  render() {
-    return (index.h(index.Host, { class: {
-        'tds-table--compact': this.compactDesign,
-        'tds-table--divider': this.verticalDividers,
-        'tds-table--toolbar-available': this.enableToolbarDesign,
-      } }, index.h("tr", null, this.multiselect && (index.h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" }, index.h("div", { class: "tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { checked: this.allSelected || this.selected, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (index.h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" })), index.h("slot", null))));
-  }
-  get host() { return index.getElement(this); }
+    get host() { return index.getElement(this); }
 };
 TdsTableHeaderRow.style = tableHeaderCss;
 

package/dist/cjs/tds-table-toolbar.cjs.entry.js

@@ -2,67 +2,67 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-705dca7c.js');
+const index = require('./index-ae4fbf97.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__title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding-top:var(--tds-spacing-element-16);text-align:left}:host .tds-table__actionbar,:host slot[name=end]::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(.tds-table--compact){height:56px}";
 
 const relevantTableProps = [
-  'compactDesign',
-  'noMinWidth',
-  'verticalDividers',
+    'compactDesign',
+    'noMinWidth',
+    'verticalDividers',
 ];
 const TdsTableToolbar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tdsFilter = index.createEvent(this, "tdsFilter", 7);
-    this.tableTitle = '';
-    this.filter = false;
-    this.verticalDividers = false;
-    this.compactDesign = false;
-    this.noMinWidth = false;
-    this.whiteBackground = 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}`);
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tdsFilter = index.createEvent(this, "tdsFilter", 7);
+        this.tableTitle = '';
+        this.filter = false;
+        this.verticalDividers = false;
+        this.compactDesign = false;
+        this.noMinWidth = false;
+        this.whiteBackground = 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];
+            });
         }
-        this[changedProp] = event.detail[changedProp];
-      });
     }
-  }
-  connectedCallback() {
-    this.tableEl = this.host.closest('tds-table');
-    this.tableId = this.tableEl.tableId;
-  }
-  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');
+    connectedCallback() {
+        this.tableEl = this.host.closest('tds-table');
+        this.tableId = this.tableEl.tableId;
+    }
+    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');
+        }
     }
-    else {
-      tdsTableSearchBar.classList.remove('tds-table__searchbar--active');
+    render() {
+        return (index.h(index.Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, index.h("div", { class: "tds-table__upper-bar-flex" }, index.h("caption", { class: "tds-table__title" }, this.tableTitle), index.h("div", { class: "tds-table__actionbar" }, this.filter && (index.h("div", { class: "tds-table__searchbar" }, index.h("input", { class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), index.h("span", { class: "tds-table__searchbar-icon" }, index.h("tds-icon", { name: "search", size: "20px" })))), index.h("slot", { name: "end" })))));
     }
-  }
-  render() {
-    return (index.h(index.Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, index.h("div", { class: "tds-table__upper-bar-flex" }, index.h("caption", { class: "tds-table__title" }, this.tableTitle), index.h("div", { class: "tds-table__actionbar" }, this.filter && (index.h("div", { class: "tds-table__searchbar" }, index.h("input", { class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), index.h("span", { class: "tds-table__searchbar-icon" }, index.h("tds-icon", { name: "search", size: "20px" })))), index.h("slot", { name: "end" })))));
-  }
-  get host() { return index.getElement(this); }
+    get host() { return index.getElement(this); }
 };
 TdsTableToolbar.style = tableToolbarCss;