@scania/tegel 1.3.3 → 1.4.0

package/dist/components/tds-table-header.js

@@ -4,128 +4,128 @@ import { d as defineCustomElement$2 } from './checkbox.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 = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderRow extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.tdsSelectAll = 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() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tdsSelectAll = 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);
         }
-        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;
+        }
     }
-  }
-  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;
+    connectedCallback() {
+        this.tableEl = this.host.closest('tds-table');
+        this.tableId = this.tableEl.tableId;
     }
-    else {
-      this.mainExpendSelected = false;
+    componentWillLoad() {
+        relevantTableProps.forEach((tablePropName) => {
+            this[tablePropName] = this.tableEl[tablePropName];
+        });
     }
-  }
-  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 (h(Host, { class: {
-        'tds-table--compact': this.compactDesign,
-        'tds-table--divider': this.verticalDividers,
-        'tds-table--toolbar-available': this.enableToolbarDesign,
-      } }, h("tr", null, this.multiselect && (h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { checked: this.allSelected || this.selected, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", null))));
-  }
-  get host() { return this; }
-  static get style() { return tableHeaderCss; }
+    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 (h(Host, { class: {
+                'tds-table--compact': this.compactDesign,
+                'tds-table--divider': this.verticalDividers,
+                'tds-table--toolbar-available': this.enableToolbarDesign,
+            } }, h("tr", null, this.multiselect && (h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { checked: this.allSelected || this.selected, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", null))));
+    }
+    get host() { return this; }
+    static get style() { return tableHeaderCss; }
 }, [1, "tds-table-header", {
-    "allSelected": [1540, "all-selected"],
-    "selected": [1540],
-    "indeterminate": [4],
-    "multiselect": [32],
-    "expandableRows": [32],
-    "mainCheckboxSelected": [32],
-    "mainExpendSelected": [32],
-    "verticalDividers": [32],
-    "compactDesign": [32],
-    "noMinWidth": [32],
-    "whiteBackground": [32],
-    "enableToolbarDesign": [32],
-    "tableId": [32]
-  }, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"], [16, "internalTdsRowExpanded", "internalTdsRowExpandedListener"]]]);
+        "allSelected": [1540, "all-selected"],
+        "selected": [1540],
+        "indeterminate": [4],
+        "multiselect": [32],
+        "expandableRows": [32],
+        "mainCheckboxSelected": [32],
+        "mainExpendSelected": [32],
+        "verticalDividers": [32],
+        "compactDesign": [32],
+        "noMinWidth": [32],
+        "whiteBackground": [32],
+        "enableToolbarDesign": [32],
+        "tableId": [32]
+    }, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"], [16, "internalTdsRowExpanded", "internalTdsRowExpandedListener"]]]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-table-header", "tds-checkbox"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-table-header":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsTableHeaderRow);
-      }
-      break;
-    case "tds-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-table-header", "tds-checkbox"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-table-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsTableHeaderRow);
+            }
+            break;
+        case "tds-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 defineCustomElement$1();
 

package/dist/components/tds-table-toolbar.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface TdsTableToolbar extends Components.TdsTableToolbar, HTMLElement {}
 export const TdsTableToolbar: {
-  prototype: TdsTableToolbar;
-  new (): TdsTableToolbar;
+    prototype: TdsTableToolbar;
+    new (): TdsTableToolbar;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/tds-table-toolbar.js

@@ -4,91 +4,91 @@ import { d as defineCustomElement$2 } from './icon.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$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableToolbar extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.tdsFilter = 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() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tdsFilter = 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 (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("div", { class: "tds-table__upper-bar-flex" }, h("caption", { class: "tds-table__title" }, this.tableTitle), h("div", { class: "tds-table__actionbar" }, this.filter && (h("div", { class: "tds-table__searchbar" }, h("input", { class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { class: "tds-table__searchbar-icon" }, h("tds-icon", { name: "search", size: "20px" })))), h("slot", { name: "end" })))));
     }
-  }
-  render() {
-    return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("div", { class: "tds-table__upper-bar-flex" }, h("caption", { class: "tds-table__title" }, this.tableTitle), h("div", { class: "tds-table__actionbar" }, this.filter && (h("div", { class: "tds-table__searchbar" }, h("input", { class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { class: "tds-table__searchbar-icon" }, h("tds-icon", { name: "search", size: "20px" })))), h("slot", { name: "end" })))));
-  }
-  get host() { return this; }
-  static get style() { return tableToolbarCss; }
+    get host() { return this; }
+    static get style() { return tableToolbarCss; }
 }, [1, "tds-table-toolbar", {
-    "tableTitle": [513, "table-title"],
-    "filter": [516],
-    "verticalDividers": [32],
-    "compactDesign": [32],
-    "noMinWidth": [32],
-    "whiteBackground": [32],
-    "tableId": [32]
-  }, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"]]]);
+        "tableTitle": [513, "table-title"],
+        "filter": [516],
+        "verticalDividers": [32],
+        "compactDesign": [32],
+        "noMinWidth": [32],
+        "whiteBackground": [32],
+        "tableId": [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;
-  } });
+    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();
 

package/dist/components/tds-table.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface TdsTable extends Components.TdsTable, HTMLElement {}
 export const TdsTable: {
-  prototype: TdsTable;
-  new (): TdsTable;
+    prototype: TdsTable;
+    new (): TdsTable;
 };
 /**
  * Used to define this component and all nested components recursively.