@scania/tegel 1.3.3-event-types.0 → 1.4.0

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

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

package/dist/components/tds-spinner.js

@@ -3,32 +3,32 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 const spinnerCss = ":root{--tds-spinner-background:var(--tds-blue-400);--tds-spinner-background-inverted:var(--tds-white);--tds-spinner-speed:1.8s;--tds-spinner-speed-lg:2s;--tds-spinner-radius-xs:8px;--tds-spinner-radius-sm:12px;--tds-spinner-radius-md:26px;--tds-spinner-radius-lg:42px;--tds-spinner-radius:var(--tds-spinner-radius-lg);--tds-spinner-stroke-width-xs:3px;--tds-spinner-stroke-width-sm:4px;--tds-spinner-stroke-width-md:6px;--tds-spinner-stroke-width-lg:8px;--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-lg);--PI:3.14159265358979}:host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}.tds-spinner-svg{width:calc(var(--tds-spinner-radius) * 2);height:calc(var(--tds-spinner-radius) * 2);transform:scale(-1, 1) rotate(-90deg)}.tds-spinner-svg-xs{--tds-spinner-radius:var(--tds-spinner-radius-xs);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-xs);--tds-spinner-animation-speed:var(--tds-spinner-speed)}.tds-spinner-svg-sm{--tds-spinner-radius:var(--tds-spinner-radius-sm);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-sm);--tds-spinner-animation-speed:var(--tds-spinner-speed)}.tds-spinner-svg-md{--tds-spinner-radius:var(--tds-spinner-radius-md);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-md);--tds-spinner-animation-speed:var(--tds-spinner-speed)}.tds-spinner-svg-lg{--tds-spinner-radius:var(--tds-spinner-radius-lg);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-lg);--tds-spinner-animation-speed:var(--tds-spinner-speed-lg)}.tds-spinner-circle{cx:var(--tds-spinner-radius);cy:var(--tds-spinner-radius);r:calc(var(--tds-spinner-radius) - var(--tds-spinner-stroke-width) / 2);fill:none;--tds-spinner-stroke-dash:calc((2 * var(--PI)) * var(--tds-spinner-radius));stroke-dasharray:var(--tds-spinner-stroke-dash);stroke-width:var(--tds-spinner-stroke-width);animation:dash var(--tds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite}.tds-spinner-circle-standard{stroke:var(--tds-spinner-background)}.tds-spinner-circle-inverted{stroke:var(--tds-spinner-background-inverted)}@keyframes dash{from{stroke-dashoffset:calc(-1 * var(--tds-spinner-stroke-dash))}to{stroke-dashoffset:var(--tds-spinner-stroke-dash)}}";
 
 const TdsSpinner$1 = /*@__PURE__*/ proxyCustomElement(class TdsSpinner extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.size = 'lg';
-    this.variant = 'standard';
-  }
-  render() {
-    return (h("div", { "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
-  }
-  static get style() { return spinnerCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.size = 'lg';
+        this.variant = 'standard';
+    }
+    render() {
+        return (h("div", { "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
+    }
+    static get style() { return spinnerCss; }
 }, [0, "tds-spinner", {
-    "size": [1],
-    "variant": [1]
-  }]);
+        "size": [1],
+        "variant": [1]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-spinner":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsSpinner$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-spinner":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsSpinner$1);
+            }
+            break;
+    } });
 }
 defineCustomElement$1();
 

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

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

package/dist/components/tds-step.js

@@ -4,74 +4,74 @@ import { d as defineCustomElement$2 } from './icon.js';
 const stepCss = ":host{position:relative;display:table-cell}:host tds-icon{line-height:1}:host [role=listitem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listitem].text-below{flex-direction:column}:host [role=listitem].lg{padding:0 20px;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem].lg .content-container{height:30px;min-width:30px}:host [role=listitem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;right:calc(50% + 24px);left:0;top:18px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listitem].sm{padding:0 20px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem].sm .content-container{height:24px;min-width:24px}:host [role=listitem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listitem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listitem] .content-container{border-radius:100px;border:1px solid var(--tds-stepper-icon-background);display:flex;justify-content:center;align-items:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-negative);color:var(--tds-negative)}:host [role=listitem] .content-container.success{background-color:var(--tds-positive);border-color:var(--tds-positive);color:var(--tds-white)}:host [role=listitem] .content-container.upcoming{background-color:transparent;border-color:var(--tds-stepper-label-border-color-upcoming);color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host [role=listitem] .label{text-align:center}:host [role=listitem] .label.lg{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem] .label.sm{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem] .label.upcoming{color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host(.last) [role=listitem].sm::after,:host(.last) [role=listitem].lg::after{display:none}:host(.last) [role=listitem].sm.vertical::before{display:none}:host(.first) [role=listitem].sm::before,:host(.first) [role=listitem].lg::before{display:none}";
 
 const propToStateMap = {
-  orientation: 'orientation',
-  labelPosition: 'labelPosition',
-  size: 'size',
-  hideLabels: 'hideLabels',
+    orientation: 'orientation',
+    labelPosition: 'labelPosition',
+    size: 'size',
+    hideLabels: 'hideLabels',
 };
 const TdsStep$1 = /*@__PURE__*/ proxyCustomElement(class TdsStep extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.index = undefined;
-    this.state = 'upcoming';
-    this.hideLabels = undefined;
-    this.size = undefined;
-    this.orientation = undefined;
-    this.labelPosition = undefined;
-  }
-  /* Needs to be onload to do this on any updates. */
-  componentWillLoad() {
-    this.stepperEl = this.el.closest('tds-stepper');
-    this.orientation = this.stepperEl.orientation;
-    this.labelPosition = this.stepperEl.labelPosition;
-    this.size = this.stepperEl.size;
-    this.hideLabels = this.stepperEl.hideLabels;
-    this.stepperId = this.stepperEl.stepperId;
-  }
-  handlePropsChange(event) {
-    if (this.stepperId === event.detail.stepperId) {
-      event.detail.changed.forEach((changedProp) => {
-        if (typeof this[changedProp] === 'undefined') {
-          throw new Error(`Stepper prop is not supported: ${changedProp}`);
-        }
-        else if (changedProp in propToStateMap) {
-          this[propToStateMap[changedProp]] = event.detail[changedProp];
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.index = undefined;
+        this.state = 'upcoming';
+        this.hideLabels = undefined;
+        this.size = undefined;
+        this.orientation = undefined;
+        this.labelPosition = undefined;
+    }
+    /* Needs to be onload to do this on any updates. */
+    componentWillLoad() {
+        this.stepperEl = this.el.closest('tds-stepper');
+        this.orientation = this.stepperEl.orientation;
+        this.labelPosition = this.stepperEl.labelPosition;
+        this.size = this.stepperEl.size;
+        this.hideLabels = this.stepperEl.hideLabels;
+        this.stepperId = this.stepperEl.stepperId;
+    }
+    handlePropsChange(event) {
+        if (this.stepperId === event.detail.stepperId) {
+            event.detail.changed.forEach((changedProp) => {
+                if (typeof this[changedProp] === 'undefined') {
+                    throw new Error(`Stepper prop is not supported: ${changedProp}`);
+                }
+                else if (changedProp in propToStateMap) {
+                    this[propToStateMap[changedProp]] = event.detail[changedProp];
+                }
+            });
         }
-      });
     }
-  }
-  render() {
-    return (h(Host, null, h("div", { role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabels && (h("div", { class: `label ${this.size} ${this.state}` }, h("slot", { name: "label" }))))));
-  }
-  get el() { return this; }
-  static get style() { return stepCss; }
+    render() {
+        return (h(Host, null, h("div", { role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabels && (h("div", { class: `label ${this.size} ${this.state}` }, h("slot", { name: "label" }))))));
+    }
+    get el() { return this; }
+    static get style() { return stepCss; }
 }, [1, "tds-step", {
-    "index": [1],
-    "state": [1],
-    "hideLabels": [32],
-    "size": [32],
-    "orientation": [32],
-    "labelPosition": [32]
-  }, [[16, "internalTdsPropsChange", "handlePropsChange"]]]);
+        "index": [1],
+        "state": [1],
+        "hideLabels": [32],
+        "size": [32],
+        "orientation": [32],
+        "labelPosition": [32]
+    }, [[16, "internalTdsPropsChange", "handlePropsChange"]]]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-step", "tds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-step":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsStep$1);
-      }
-      break;
-    case "tds-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-step", "tds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-step":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsStep$1);
+            }
+            break;
+        case "tds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 defineCustomElement$1();
 

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

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

package/dist/components/tds-stepper.js

@@ -4,87 +4,87 @@ import { g as generateUniqueId } from './generateUniqueId.js';
 const stepperCss = ":host [role=list]{display:flex;justify-content:space-evenly;min-width:100%}:host [role=list]:not(.text-position-aside){display:table;table-layout:fixed;width:100%;list-style:none}:host [role=list].vertical{height:100%;display:flex;flex-direction:column;justify-content:unset;gap:52px}:host [role=list].vertical.sm{gap:36px}:host [role=list].horizontal.text-position-aside{justify-content:unset}";
 
 const TdsStepper$1 = /*@__PURE__*/ proxyCustomElement(class TdsStepper extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.internalTdsPropsChange = createEvent(this, "internalTdsPropsChange", 6);
-    this.orientation = 'horizontal';
-    this.labelPosition = 'below';
-    this.size = 'lg';
-    this.hideLabels = false;
-    this.stepperId = generateUniqueId();
-  }
-  componentWillLoad() {
-    this.host.children[0].classList.add('first');
-    this.host.children[this.host.children.length - 1].classList.add('last');
-    if (this.orientation === 'vertical') {
-      this.labelPosition = 'aside';
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.internalTdsPropsChange = createEvent(this, "internalTdsPropsChange", 6);
+        this.orientation = 'horizontal';
+        this.labelPosition = 'below';
+        this.size = 'lg';
+        this.hideLabels = false;
+        this.stepperId = generateUniqueId();
     }
-  }
-  handleDirectionChange() {
-    this.internalTdsPropsChange.emit({
-      stepperId: this.stepperId,
-      changed: ['orientation'],
-      orientation: this.orientation,
-    });
-  }
-  handleLabelPositionChange() {
-    this.internalTdsPropsChange.emit({
-      stepperId: this.stepperId,
-      changed: ['labelPosition'],
-      labelPosition: this.labelPosition,
-    });
-  }
-  handleSizeChange() {
-    this.internalTdsPropsChange.emit({
-      stepperId: this.stepperId,
-      changed: ['size'],
-      size: this.size,
-    });
-  }
-  handleHideLabelsChange() {
-    this.internalTdsPropsChange.emit({
-      stepperId: this.stepperId,
-      changed: ['hideLabels'],
-      hideLabels: this.hideLabels,
-    });
-  }
-  render() {
-    return (h(Host, null, h("div", { role: "list", class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", null))));
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "orientation": ["handleDirectionChange"],
-    "labelPosition": ["handleLabelPositionChange"],
-    "size": ["handleSizeChange"],
-    "hideLabels": ["handleHideLabelsChange"]
-  }; }
-  static get style() { return stepperCss; }
+    componentWillLoad() {
+        this.host.children[0].classList.add('first');
+        this.host.children[this.host.children.length - 1].classList.add('last');
+        if (this.orientation === 'vertical') {
+            this.labelPosition = 'aside';
+        }
+    }
+    handleDirectionChange() {
+        this.internalTdsPropsChange.emit({
+            stepperId: this.stepperId,
+            changed: ['orientation'],
+            orientation: this.orientation,
+        });
+    }
+    handleLabelPositionChange() {
+        this.internalTdsPropsChange.emit({
+            stepperId: this.stepperId,
+            changed: ['labelPosition'],
+            labelPosition: this.labelPosition,
+        });
+    }
+    handleSizeChange() {
+        this.internalTdsPropsChange.emit({
+            stepperId: this.stepperId,
+            changed: ['size'],
+            size: this.size,
+        });
+    }
+    handleHideLabelsChange() {
+        this.internalTdsPropsChange.emit({
+            stepperId: this.stepperId,
+            changed: ['hideLabels'],
+            hideLabels: this.hideLabels,
+        });
+    }
+    render() {
+        return (h(Host, null, h("div", { role: "list", class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", null))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "orientation": ["handleDirectionChange"],
+        "labelPosition": ["handleLabelPositionChange"],
+        "size": ["handleSizeChange"],
+        "hideLabels": ["handleHideLabelsChange"]
+    }; }
+    static get style() { return stepperCss; }
 }, [1, "tds-stepper", {
-    "orientation": [1],
-    "labelPosition": [1, "label-position"],
-    "size": [1],
-    "hideLabels": [4, "hide-labels"],
-    "stepperId": [1, "stepper-id"]
-  }, undefined, {
-    "orientation": ["handleDirectionChange"],
-    "labelPosition": ["handleLabelPositionChange"],
-    "size": ["handleSizeChange"],
-    "hideLabels": ["handleHideLabelsChange"]
-  }]);
+        "orientation": [1],
+        "labelPosition": [1, "label-position"],
+        "size": [1],
+        "hideLabels": [4, "hide-labels"],
+        "stepperId": [1, "stepper-id"]
+    }, undefined, {
+        "orientation": ["handleDirectionChange"],
+        "labelPosition": ["handleLabelPositionChange"],
+        "size": ["handleSizeChange"],
+        "hideLabels": ["handleHideLabelsChange"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-stepper"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-stepper":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsStepper$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-stepper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-stepper":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsStepper$1);
+            }
+            break;
+    } });
 }
 defineCustomElement$1();
 

package/dist/components/tds-table-body-row-expandable.d.ts

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

package/dist/components/tds-table-body-row-expandable.js

@@ -3,94 +3,94 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host .tds-table__row:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand .tds-table__cell-expand{padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table__row--hidden){display:none}:host(.tds-table--divider) .tds-table__cell--expand{border-right:1px solid var(--tds-table-divider)}";
 
 const relevantTableProps = [
-  'verticalDividers',
-  'compactDesign',
-  'noMinWidth',
-  'modeVariant',
+    'verticalDividers',
+    'compactDesign',
+    'noMinWidth',
+    'modeVariant',
 ];
 const TdsTableBodyRowExpandable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRowExpandable extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.internalTdsRowExpanded = createEvent(this, "internalTdsRowExpanded", 6);
-    this.colSpan = null;
-    this.isExpanded = false;
-    this.tableId = '';
-    this.columnsNumber = null;
-    this.verticalDividers = false;
-    this.compactDesign = false;
-    this.noMinWidth = false;
-    this.modeVariant = 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}`);
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.internalTdsRowExpanded = createEvent(this, "internalTdsRowExpanded", 6);
+        this.colSpan = null;
+        this.isExpanded = false;
+        this.tableId = '';
+        this.columnsNumber = null;
+        this.verticalDividers = false;
+        this.compactDesign = false;
+        this.noMinWidth = false;
+        this.modeVariant = 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;
+    }
+    componentWillLoad() {
+        relevantTableProps.forEach((tablePropName) => {
+            this[tablePropName] = this.tableEl[tablePropName];
+        });
+    }
+    componentWillRender() {
+        if (this.colSpan !== null) {
+            this.columnsNumber = this.colSpan;
+        }
+        else {
+            this.columnsNumber = this.tableEl.querySelector('tds-table-header').childElementCount + 1;
         }
-        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];
-    });
-  }
-  componentWillRender() {
-    if (this.colSpan !== null) {
-      this.columnsNumber = this.colSpan;
+    sendValue() {
+        this.internalTdsRowExpanded.emit([this.tableId, this.isExpanded]);
     }
-    else {
-      this.columnsNumber = this.tableEl.querySelector('tds-table-header').childElementCount + 1;
+    onChangeHandler(event) {
+        this.isExpanded = event.currentTarget.checked === true;
+        this.sendValue();
     }
-  }
-  sendValue() {
-    this.internalTdsRowExpanded.emit([this.tableId, this.isExpanded]);
-  }
-  onChangeHandler(event) {
-    this.isExpanded = event.currentTarget.checked === true;
-    this.sendValue();
-  }
-  render() {
-    return (h(Host, { class: {
-        'tds-table__row': true,
-        'tds-table__row-expand--active': this.isExpanded,
-        'tds-table__compact': this.compactDesign,
-        'tds-table--divider': this.verticalDividers,
-      } }, h("tr", { class: "tds-table__row" }, h("td", { class: "tds-table__cell tds-table__cell--expand" }, h("label", { class: "tds-table__expand-control-container" }, h("input", { class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { class: "tds-expendable-row-icon" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", null)), h("tr", { class: "tds-table__row-expand" }, h("td", { class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("slot", { name: "expand-row" })))));
-  }
-  get host() { return this; }
-  static get style() { return tableBodyRowExpandableCss; }
+    render() {
+        return (h(Host, { class: {
+                'tds-table__row': true,
+                'tds-table__row-expand--active': this.isExpanded,
+                'tds-table__compact': this.compactDesign,
+                'tds-table--divider': this.verticalDividers,
+            } }, h("tr", { class: "tds-table__row" }, h("td", { class: "tds-table__cell tds-table__cell--expand" }, h("label", { class: "tds-table__expand-control-container" }, h("input", { class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { class: "tds-expendable-row-icon" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", null)), h("tr", { class: "tds-table__row-expand" }, h("td", { class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("slot", { name: "expand-row" })))));
+    }
+    get host() { return this; }
+    static get style() { return tableBodyRowExpandableCss; }
 }, [1, "tds-table-body-row-expandable", {
-    "colSpan": [2, "col-span"],
-    "isExpanded": [32],
-    "tableId": [32],
-    "columnsNumber": [32],
-    "verticalDividers": [32],
-    "compactDesign": [32],
-    "noMinWidth": [32],
-    "modeVariant": [32]
-  }, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"]]]);
+        "colSpan": [2, "col-span"],
+        "isExpanded": [32],
+        "tableId": [32],
+        "columnsNumber": [32],
+        "verticalDividers": [32],
+        "compactDesign": [32],
+        "noMinWidth": [32],
+        "modeVariant": [32]
+    }, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"]]]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-table-body-row-expandable"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-table-body-row-expandable":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsTableBodyRowExpandable$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-table-body-row-expandable"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-table-body-row-expandable":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsTableBodyRowExpandable$1);
+            }
+            break;
+    } });
 }
 defineCustomElement$1();
 

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

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