@scania/tegel 0.0.51 → 0.0.52

package/dist/esm/sdds-body-cell_2.entry.js

@@ -2,167 +2,167 @@ import { r as registerInstance, h, H as Host, g as getElement, c as createEvent
 
 const tableBodyCellCss = ":host(.sdds-table__body-cell){box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--sdds-data-table-color);padding:var(--sdds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}:host(.sdds-table__body-cell) *{box-sizing:border-box}:host(.sdds-table__body-cell--no-padding){padding:0}:host(.sdds-table__body-cell--hover){background-color:var(--sdds-data-table-body-cell-background-hover)}:host(.sdds-table__compact){padding:var(--sdds-spacing-element-8) var(--sdds-spacing-element-16)}:host(.sdds-table--divider){border-right:1px solid var(--sdds-data-table-divider)}:host(.sdds-table--divider:last-of-type){border-right:none}:host(.sdds-table--no-min-width){min-width:unset}";
 
-const relevantTableProps$1 = [
-  'verticalDividers',
-  'compactDesign',
-  'noMinWidth',
-];
-const TableBodyCell = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.cellValue = undefined;
-    this.cellKey = undefined;
-    this.disablePadding = false;
-    this.textAlignState = undefined;
-    this.activeSorting = false;
-    this.verticalDividers = false;
-    this.compactDesign = false;
-    this.noMinWidth = false;
-    this.whiteBackground = false;
-    this.tableId = '';
-  }
-  internalSddsPropChangeListener(event) {
-    if (this.tableId === event.detail.tableId) {
-      event.detail.changed
-        .filter((changedProp) => relevantTableProps$1.includes(changedProp))
-        .forEach((changedProp) => {
-        if (typeof this[changedProp] === 'undefined') {
-          throw new Error(`Table prop is not supported: ${changedProp}`);
-        }
-        this[changedProp] = event.detail[changedProp];
-      });
-    }
-  }
-  // Listen to headKey from data-table-header-element
-  internalSddsHoverListener(event) {
-    const [receivedID, receivedKeyValue] = event.detail;
-    if (this.tableId === receivedID) {
-      this.activeSorting = this.cellKey === receivedKeyValue;
-    }
-  }
-  // Listen to internalSddsTextAlign from data-table-header-element
-  internalSddsTextAlignListener(event) {
-    const [receivedID, receivedKey, receivedTextAlign] = event.detail;
-    if (this.tableId === receivedID) {
-      if (this.cellKey === receivedKey) {
-        this.textAlignState = receivedTextAlign;
-      }
-    }
-  }
-  connectedCallback() {
-    this.tableEl = this.host.closest('sdds-table');
-    this.tableId = this.tableEl.tableId;
-  }
-  componentWillLoad() {
-    relevantTableProps$1.forEach((tablePropName) => {
-      this[tablePropName] = this.tableEl[tablePropName];
-    });
-  }
-  render() {
-    return (h(Host, { class: {
-        'sdds-table__body-cell': true,
-        'sdds-table__body-cell--hover': this.activeSorting,
-        'sdds-table__compact': this.compactDesign,
-        'sdds-table--divider': this.verticalDividers,
-        'sdds-table--no-min-width': this.noMinWidth,
-        'sdds-table__body-cell--no-padding': this.disablePadding,
-      }, style: { textAlign: this.textAlignState } }, this.cellValue, h("slot", null)));
-  }
-  get host() { return getElement(this); }
-};
+const relevantTableProps$1 = [
+  'verticalDividers',
+  'compactDesign',
+  'noMinWidth',
+];
+const TableBodyCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.cellValue = undefined;
+    this.cellKey = undefined;
+    this.disablePadding = false;
+    this.textAlignState = undefined;
+    this.activeSorting = false;
+    this.verticalDividers = false;
+    this.compactDesign = false;
+    this.noMinWidth = false;
+    this.whiteBackground = false;
+    this.tableId = '';
+  }
+  internalSddsPropChangeListener(event) {
+    if (this.tableId === event.detail.tableId) {
+      event.detail.changed
+        .filter((changedProp) => relevantTableProps$1.includes(changedProp))
+        .forEach((changedProp) => {
+        if (typeof this[changedProp] === 'undefined') {
+          throw new Error(`Table prop is not supported: ${changedProp}`);
+        }
+        this[changedProp] = event.detail[changedProp];
+      });
+    }
+  }
+  // Listen to headKey from data-table-header-element
+  internalSddsHoverListener(event) {
+    const [receivedID, receivedKeyValue] = event.detail;
+    if (this.tableId === receivedID) {
+      this.activeSorting = this.cellKey === receivedKeyValue;
+    }
+  }
+  // Listen to internalSddsTextAlign from data-table-header-element
+  internalSddsTextAlignListener(event) {
+    const [receivedID, receivedKey, receivedTextAlign] = event.detail;
+    if (this.tableId === receivedID) {
+      if (this.cellKey === receivedKey) {
+        this.textAlignState = receivedTextAlign;
+      }
+    }
+  }
+  connectedCallback() {
+    this.tableEl = this.host.closest('sdds-table');
+    this.tableId = this.tableEl.tableId;
+  }
+  componentWillLoad() {
+    relevantTableProps$1.forEach((tablePropName) => {
+      this[tablePropName] = this.tableEl[tablePropName];
+    });
+  }
+  render() {
+    return (h(Host, { class: {
+        'sdds-table__body-cell': true,
+        'sdds-table__body-cell--hover': this.activeSorting,
+        'sdds-table__compact': this.compactDesign,
+        'sdds-table--divider': this.verticalDividers,
+        'sdds-table--no-min-width': this.noMinWidth,
+        'sdds-table__body-cell--no-padding': this.disablePadding,
+      }, style: { textAlign: this.textAlignState } }, this.cellValue, h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
 TableBodyCell.style = tableBodyCellCss;
 
-const tableBodyRowCss = ":root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-mode-dark,.sdds-mode-light .sdds-mode-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-background-hover:white;--sdds-checkbox-background-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:0.24;transition:opacity 0.2s ease-in-out}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}:host(.sdds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--sdds-data-table-divider);background-color:var(--sdds-data-table-body-row-background);transition:background-color 200ms ease;color:var(--sdds-data-table-color)}:host(.sdds-table__row) *{box-sizing:border-box}:host(.sdds-table__row) .sdds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.sdds-table__row:hover){background-color:var(--sdds-data-table-body-row-background-hover)}:host(.sdds-table__row--selected){background-color:var(--sdds-data-table-body-row-background-active)}:host(.sdds-table__row--selected:hover){background-color:var(--sdds-data-table-body-row-background-active-hover)}:host(.sdds-table__row--hidden){display:none}:host(.sdds-table__row--expended){width:100%;background-color:pink}:host .sdds-form-label--data-table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.sdds-table__compact) .sdds-form-label--data-table{height:32px}:host(.sdds-table--divider) .sdds-table__body-cell--checkbox{border-right:1px solid var(--sdds-data-table-divider)}";
+const tableBodyRowCss = ":root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-background-opacity-hover:0.12;--sdds-checkbox-background-opacity-focus:0.24;--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-mode-dark,.sdds-mode-light .sdds-mode-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-background-hover:var(--sdds-grey-600);--sdds-checkbox-background-focus:var(--sdds-grey-600);--sdds-checkbox-background-opacity-hover:0.48;--sdds-checkbox-background-opacity-focus:0.72;--sdds-checkbox-disabled:white;--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:var(--sdds-checkbox-background-opacity-hover)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:var(--sdds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}:host(.sdds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--sdds-data-table-divider);background-color:var(--sdds-data-table-body-row-background);transition:background-color 200ms ease;color:var(--sdds-data-table-color)}:host(.sdds-table__row) *{box-sizing:border-box}:host(.sdds-table__row) .sdds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.sdds-table__row:hover){background-color:var(--sdds-data-table-body-row-background-hover)}:host(.sdds-table__row--selected){background-color:var(--sdds-data-table-body-row-background-active)}:host(.sdds-table__row--selected:hover){background-color:var(--sdds-data-table-body-row-background-active-hover)}:host(.sdds-table__row--hidden){display:none}:host(.sdds-table__row--expended){width:100%;background-color:pink}:host .sdds-form-label--data-table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.sdds-table__compact) .sdds-form-label--data-table{height:32px}:host(.sdds-table--divider) .sdds-table__body-cell--checkbox{border-right:1px solid var(--sdds-data-table-divider)}";
 
-const relevantTableProps = [
-  'enableMultiselect',
-  'verticalDividers',
-  'compactDesign',
-  'modeVariant',
-];
-const TableBodyRow = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.internalSddsRowChange = createEvent(this, "internalSddsRowChange", 7);
-    this.internalSddsPagination = createEvent(this, "internalSddsPagination", 7);
-    this.enableMultiselect = false;
-    this.bodyCheckBoxStatus = false;
-    this.mainCheckBoxStatus = false;
-    this.verticalDividers = false;
-    this.compactDesign = false;
-    this.noMinWidth = false;
-    this.modeVariant = null;
-    this.tableId = '';
-  }
-  bodyCheckBoxClicked(event) {
-    const row = this.host;
-    this.bodyCheckBoxStatus = event.currentTarget.checked;
-    if (this.bodyCheckBoxStatus === true) {
-      row.classList.add('sdds-table__row--selected');
-    }
-    else {
-      row.classList.remove('sdds-table__row--selected');
-    }
-    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);
-  }
-  bodyCheckBoxStatusUpdater(status) {
-    this.mainCheckBoxStatus = status;
-    this.bodyCheckBoxStatus = this.mainCheckBoxStatus;
-    const row = this.host;
-    if (this.bodyCheckBoxStatus === true) {
-      row.classList.add('sdds-table__row--selected');
-    }
-    else {
-      row.classList.remove('sdds-table__row--selected');
-    }
-    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);
-  }
-  internalSddsPropChangeListener(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];
-      });
-    }
-  }
-  headCheckboxListener(event) {
-    if (this.tableId === event.detail[0]) {
-      this.bodyCheckBoxStatusUpdater(event.detail[1]);
-    }
-  }
-  internalSddsCheckboxChangeListener(event) {
-    const [receivedID, receivedBodyCheckboxStatus] = event.detail;
-    if (this.tableId === receivedID) {
-      this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);
-    }
-  }
-  connectedCallback() {
-    this.tableEl = this.host.closest('sdds-table');
-    this.tableId = this.tableEl.tableId;
-  }
-  componentWillLoad() {
-    relevantTableProps.forEach((tablePropName) => {
-      this[tablePropName] = this.tableEl[tablePropName];
-    });
-  }
-  componentDidLoad() {
-    this.internalSddsPagination.emit(this.tableId);
-  }
-  render() {
-    return (h(Host, { class: {
-        'sdds-table__row': true,
-        'sdds-table__compact': this.compactDesign,
-        'sdds-table--divider': this.verticalDividers,
-        'sdds-mode-variant-primary': this.modeVariant === 'primary',
-        'sdds-mode-variant-secondary': this.modeVariant === 'secondary',
-      } }, this.enableMultiselect && (h("td", { class: "sdds-table__body-cell sdds-table__body-cell--checkbox" }, h("div", { class: "sdds-checkbox-item" }, h("label", { class: "sdds-form-label sdds-form-label--data-table" }, h("input", { class: "sdds-form-input", type: "checkbox", onChange: (event) => this.bodyCheckBoxClicked(event), checked: this.bodyCheckBoxStatus }))))), h("slot", null)));
-  }
-  get host() { return getElement(this); }
-};
+const relevantTableProps = [
+  'enableMultiselect',
+  'verticalDividers',
+  'compactDesign',
+  'modeVariant',
+];
+const TableBodyRow = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.internalSddsRowChange = createEvent(this, "internalSddsRowChange", 7);
+    this.internalSddsPagination = createEvent(this, "internalSddsPagination", 7);
+    this.enableMultiselect = false;
+    this.bodyCheckBoxStatus = false;
+    this.mainCheckBoxStatus = false;
+    this.verticalDividers = false;
+    this.compactDesign = false;
+    this.noMinWidth = false;
+    this.modeVariant = null;
+    this.tableId = '';
+  }
+  bodyCheckBoxClicked(event) {
+    const row = this.host;
+    this.bodyCheckBoxStatus = event.currentTarget.checked;
+    if (this.bodyCheckBoxStatus === true) {
+      row.classList.add('sdds-table__row--selected');
+    }
+    else {
+      row.classList.remove('sdds-table__row--selected');
+    }
+    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);
+  }
+  bodyCheckBoxStatusUpdater(status) {
+    this.mainCheckBoxStatus = status;
+    this.bodyCheckBoxStatus = this.mainCheckBoxStatus;
+    const row = this.host;
+    if (this.bodyCheckBoxStatus === true) {
+      row.classList.add('sdds-table__row--selected');
+    }
+    else {
+      row.classList.remove('sdds-table__row--selected');
+    }
+    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);
+  }
+  internalSddsPropChangeListener(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];
+      });
+    }
+  }
+  headCheckboxListener(event) {
+    if (this.tableId === event.detail[0]) {
+      this.bodyCheckBoxStatusUpdater(event.detail[1]);
+    }
+  }
+  internalSddsCheckboxChangeListener(event) {
+    const [receivedID, receivedBodyCheckboxStatus] = event.detail;
+    if (this.tableId === receivedID) {
+      this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);
+    }
+  }
+  connectedCallback() {
+    this.tableEl = this.host.closest('sdds-table');
+    this.tableId = this.tableEl.tableId;
+  }
+  componentWillLoad() {
+    relevantTableProps.forEach((tablePropName) => {
+      this[tablePropName] = this.tableEl[tablePropName];
+    });
+  }
+  componentDidLoad() {
+    this.internalSddsPagination.emit(this.tableId);
+  }
+  render() {
+    return (h(Host, { class: {
+        'sdds-table__row': true,
+        'sdds-table__compact': this.compactDesign,
+        'sdds-table--divider': this.verticalDividers,
+        'sdds-mode-variant-primary': this.modeVariant === 'primary',
+        'sdds-mode-variant-secondary': this.modeVariant === 'secondary',
+      } }, this.enableMultiselect && (h("td", { class: "sdds-table__body-cell sdds-table__body-cell--checkbox" }, h("div", { class: "sdds-checkbox-item" }, h("label", { class: "sdds-form-label sdds-form-label--data-table" }, h("input", { class: "sdds-form-input", type: "checkbox", onChange: (event) => this.bodyCheckBoxClicked(event), checked: this.bodyCheckBoxStatus }))))), h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
 TableBodyRow.style = tableBodyRowCss;
 
 export { TableBodyCell as sdds_body_cell, TableBodyRow as sdds_table_body_row };

package/dist/esm/sdds-body-cell_2.entry.js.map

@@ -1 +1 @@
-{"file":"sdds-body-cell.sdds-table-body-row.entry.js","mappings":"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","names":["relevantTableProps"],"sources":["./src/components/data-table/table-body-cell/table-body-cell.scss?tag=sdds-body-cell&encapsulation=shadow","./src/components/data-table/table-body-cell/table-body-cell.tsx","./src/components/data-table/table-body-row/table-body-row.scss?tag=sdds-table-body-row&encapsulation=shadow","./src/components/data-table/table-body-row/table-body-row.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__body-cell) {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  display: table-cell;\n  box-sizing: border-box;\n  color: var(--sdds-data-table-color);\n  padding: var(--sdds-spacing-element-16);\n  min-width: 192px;\n  vertical-align: top;\n  background-color: transparent;\n  transition: background-color 200ms ease;\n}\n\n:host(.sdds-table__body-cell--no-padding) {\n  padding: 0;\n}\n\n:host(.sdds-table__body-cell--hover) {\n  background-color: var(--sdds-data-table-body-cell-background-hover);\n}\n\n:host(.sdds-table__compact) {\n  padding: var(--sdds-spacing-element-8) var(--sdds-spacing-element-16);\n}\n\n:host(.sdds-table--divider) {\n  border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n  border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n  min-width: unset;\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n];\n@Component({\n  tag: 'sdds-body-cell',\n  styleUrl: 'table-body-cell.scss',\n  shadow: true,\n})\nexport class TableBodyCell {\n  /** Value that will be presented as text inside a cell */\n  @Prop({ reflect: true }) cellValue: string | number;\n\n  /** Passing same cell key for all body cells which is used in head cell enables features of text align and hovering */\n  @Prop({ reflect: true }) cellKey: any;\n\n  /** Disables internal padding. Useful when passing other components to cell. */\n  @Prop({ reflect: true }) disablePadding: boolean = false;\n\n  @State() textAlignState: string;\n\n  @State() activeSorting: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  @Listen('internalSddsPropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  // Listen to headKey from data-table-header-element\n  @Listen('internalSddsHover', { target: 'body' })\n  internalSddsHoverListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKeyValue] = event.detail;\n\n    if (this.tableId === receivedID) {\n      this.activeSorting = this.cellKey === receivedKeyValue;\n    }\n  }\n\n  // Listen to internalSddsTextAlign from data-table-header-element\n  @Listen('internalSddsTextAlign', { target: 'body' })\n  internalSddsTextAlignListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKey, receivedTextAlign] = event.detail;\n\n    if (this.tableId === receivedID) {\n      if (this.cellKey === receivedKey) {\n        this.textAlignState = receivedTextAlign;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__body-cell': true,\n          'sdds-table__body-cell--hover': this.activeSorting,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-table--no-min-width': this.noMinWidth,\n          'sdds-table__body-cell--no-padding': this.disablePadding,\n        }}\n        style={{ textAlign: this.textAlignState }}\n      >\n        {this.cellValue}\n        <slot />\n      </Host>\n    );\n  }\n}\n","/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__row) {\n  @include sdds-box-sizing;\n\n  display: table-row;\n  border-bottom: 1px solid var(--sdds-data-table-divider);\n  background-color: var(--sdds-data-table-body-row-background);\n  transition: background-color 200ms ease;\n  color: var(--sdds-data-table-color);\n\n  .sdds-table__body-cell--checkbox {\n    min-width: 48px;\n    width: 48px;\n    padding: 0;\n  }\n}\n\n:host(.sdds-table__row:hover) {\n  background-color: var(--sdds-data-table-body-row-background-hover);\n}\n\n:host(.sdds-table__row--selected) {\n  background-color: var(--sdds-data-table-body-row-background-active);\n}\n\n:host(.sdds-table__row--selected:hover) {\n  background-color: var(--sdds-data-table-body-row-background-active-hover);\n}\n\n:host(.sdds-table__row--hidden) {\n  display: none;\n}\n\n:host(.sdds-table__row--expended) {\n  width: 100%;\n  background-color: pink;\n}\n\n:host {\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    width: 100%;\n    height: 48px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n}\n\n:host(.sdds-table__compact) {\n  .sdds-form-label--data-table {\n    height: 32px;\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__body-cell--checkbox {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n","import { Component, Element, h, Host, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'enableMultiselect',\n  'verticalDividers',\n  'compactDesign',\n  'modeVariant',\n];\n\n@Component({\n  tag: 'sdds-table-body-row',\n  styleUrl: 'table-body-row.scss',\n  shadow: true,\n})\nexport class TableBodyRow {\n  @State() enableMultiselect: boolean = false;\n\n  @State() bodyCheckBoxStatus: boolean = false;\n\n  @State() mainCheckBoxStatus: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  bodyCheckBoxClicked(event) {\n    const row = this.host;\n    this.bodyCheckBoxStatus = event.currentTarget.checked;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);\n  }\n\n  bodyCheckBoxStatusUpdater(status) {\n    this.mainCheckBoxStatus = status;\n    this.bodyCheckBoxStatus = this.mainCheckBoxStatus;\n    const row = this.host;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);\n  }\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  /** @internal Send status of single row to the parent, sdds-table component that hold logic for data export and main checkbox control */\n  @Event({\n    eventName: 'internalSddsRowChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsRowChange: EventEmitter<boolean>;\n\n  /** @internal Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n  @Event({\n    eventName: 'internalSddsPagination',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsPagination: EventEmitter<string>;\n\n  @Listen('internalSddsMainCheckboxSelect', { target: 'body' })\n  headCheckboxListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      this.bodyCheckBoxStatusUpdater(event.detail[1]);\n    }\n  }\n\n  @Listen('internalSddsCheckboxChange', { target: 'body' })\n  internalSddsCheckboxChangeListener(event: CustomEvent<any>) {\n    const [receivedID, receivedBodyCheckboxStatus] = event.detail;\n    if (this.tableId === receivedID) {\n      this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentDidLoad() {\n    this.internalSddsPagination.emit(this.tableId);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__row': true,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-mode-variant-primary': this.modeVariant === 'primary',\n          'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n        }}\n      >\n        {this.enableMultiselect && (\n          <td class=\"sdds-table__body-cell sdds-table__body-cell--checkbox\">\n            <div class=\"sdds-checkbox-item\">\n              <label class=\"sdds-form-label sdds-form-label--data-table\">\n                <input\n                  class=\"sdds-form-input\"\n                  type=\"checkbox\"\n                  onChange={(event) => this.bodyCheckBoxClicked(event)}\n                  checked={this.bodyCheckBoxStatus}\n                />\n              </label>\n            </div>\n          </td>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-body-cell.sdds-table-body-row.entry.js","mappings":"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","names":["relevantTableProps"],"sources":["./src/components/data-table/table-body-cell/table-body-cell.scss?tag=sdds-body-cell&encapsulation=shadow","./src/components/data-table/table-body-cell/table-body-cell.tsx","./src/components/data-table/table-body-row/table-body-row.scss?tag=sdds-table-body-row&encapsulation=shadow","./src/components/data-table/table-body-row/table-body-row.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__body-cell) {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  display: table-cell;\n  box-sizing: border-box;\n  color: var(--sdds-data-table-color);\n  padding: var(--sdds-spacing-element-16);\n  min-width: 192px;\n  vertical-align: top;\n  background-color: transparent;\n  transition: background-color 200ms ease;\n}\n\n:host(.sdds-table__body-cell--no-padding) {\n  padding: 0;\n}\n\n:host(.sdds-table__body-cell--hover) {\n  background-color: var(--sdds-data-table-body-cell-background-hover);\n}\n\n:host(.sdds-table__compact) {\n  padding: var(--sdds-spacing-element-8) var(--sdds-spacing-element-16);\n}\n\n:host(.sdds-table--divider) {\n  border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n  border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n  min-width: unset;\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n];\n@Component({\n  tag: 'sdds-body-cell',\n  styleUrl: 'table-body-cell.scss',\n  shadow: true,\n})\nexport class TableBodyCell {\n  /** Value that will be presented as text inside a cell */\n  @Prop({ reflect: true }) cellValue: string | number;\n\n  /** Passing same cell key for all body cells which is used in head cell enables features of text align and hovering */\n  @Prop({ reflect: true }) cellKey: any;\n\n  /** Disables internal padding. Useful when passing other components to cell. */\n  @Prop({ reflect: true }) disablePadding: boolean = false;\n\n  @State() textAlignState: string;\n\n  @State() activeSorting: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  @Listen('internalSddsPropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  // Listen to headKey from data-table-header-element\n  @Listen('internalSddsHover', { target: 'body' })\n  internalSddsHoverListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKeyValue] = event.detail;\n\n    if (this.tableId === receivedID) {\n      this.activeSorting = this.cellKey === receivedKeyValue;\n    }\n  }\n\n  // Listen to internalSddsTextAlign from data-table-header-element\n  @Listen('internalSddsTextAlign', { target: 'body' })\n  internalSddsTextAlignListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKey, receivedTextAlign] = event.detail;\n\n    if (this.tableId === receivedID) {\n      if (this.cellKey === receivedKey) {\n        this.textAlignState = receivedTextAlign;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__body-cell': true,\n          'sdds-table__body-cell--hover': this.activeSorting,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-table--no-min-width': this.noMinWidth,\n          'sdds-table__body-cell--no-padding': this.disablePadding,\n        }}\n        style={{ textAlign: this.textAlignState }}\n      >\n        {this.cellValue}\n        <slot />\n      </Host>\n    );\n  }\n}\n","/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__row) {\n  @include sdds-box-sizing;\n\n  display: table-row;\n  border-bottom: 1px solid var(--sdds-data-table-divider);\n  background-color: var(--sdds-data-table-body-row-background);\n  transition: background-color 200ms ease;\n  color: var(--sdds-data-table-color);\n\n  .sdds-table__body-cell--checkbox {\n    min-width: 48px;\n    width: 48px;\n    padding: 0;\n  }\n}\n\n:host(.sdds-table__row:hover) {\n  background-color: var(--sdds-data-table-body-row-background-hover);\n}\n\n:host(.sdds-table__row--selected) {\n  background-color: var(--sdds-data-table-body-row-background-active);\n}\n\n:host(.sdds-table__row--selected:hover) {\n  background-color: var(--sdds-data-table-body-row-background-active-hover);\n}\n\n:host(.sdds-table__row--hidden) {\n  display: none;\n}\n\n:host(.sdds-table__row--expended) {\n  width: 100%;\n  background-color: pink;\n}\n\n:host {\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    width: 100%;\n    height: 48px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n}\n\n:host(.sdds-table__compact) {\n  .sdds-form-label--data-table {\n    height: 32px;\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__body-cell--checkbox {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n","import { Component, Element, h, Host, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'enableMultiselect',\n  'verticalDividers',\n  'compactDesign',\n  'modeVariant',\n];\n\n@Component({\n  tag: 'sdds-table-body-row',\n  styleUrl: 'table-body-row.scss',\n  shadow: true,\n})\nexport class TableBodyRow {\n  @State() enableMultiselect: boolean = false;\n\n  @State() bodyCheckBoxStatus: boolean = false;\n\n  @State() mainCheckBoxStatus: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  bodyCheckBoxClicked(event) {\n    const row = this.host;\n    this.bodyCheckBoxStatus = event.currentTarget.checked;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);\n  }\n\n  bodyCheckBoxStatusUpdater(status) {\n    this.mainCheckBoxStatus = status;\n    this.bodyCheckBoxStatus = this.mainCheckBoxStatus;\n    const row = this.host;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);\n  }\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  /** @internal Send status of single row to the parent, sdds-table component that hold logic for data export and main checkbox control */\n  @Event({\n    eventName: 'internalSddsRowChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsRowChange: EventEmitter<boolean>;\n\n  /** @internal Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n  @Event({\n    eventName: 'internalSddsPagination',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsPagination: EventEmitter<string>;\n\n  @Listen('internalSddsMainCheckboxSelect', { target: 'body' })\n  headCheckboxListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      this.bodyCheckBoxStatusUpdater(event.detail[1]);\n    }\n  }\n\n  @Listen('internalSddsCheckboxChange', { target: 'body' })\n  internalSddsCheckboxChangeListener(event: CustomEvent<any>) {\n    const [receivedID, receivedBodyCheckboxStatus] = event.detail;\n    if (this.tableId === receivedID) {\n      this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentDidLoad() {\n    this.internalSddsPagination.emit(this.tableId);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__row': true,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-mode-variant-primary': this.modeVariant === 'primary',\n          'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n        }}\n      >\n        {this.enableMultiselect && (\n          <td class=\"sdds-table__body-cell sdds-table__body-cell--checkbox\">\n            <div class=\"sdds-checkbox-item\">\n              <label class=\"sdds-form-label sdds-form-label--data-table\">\n                <input\n                  class=\"sdds-form-input\"\n                  type=\"checkbox\"\n                  onChange={(event) => this.bodyCheckBoxClicked(event)}\n                  checked={this.bodyCheckBoxStatus}\n                />\n              </label>\n            </div>\n          </td>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-breadcrumb-link.entry.js

@@ -1,21 +1,21 @@
 import { r as registerInstance, h } from './index-fdfb114c.js';
 
-const sddsBreadcrumbLinkCss = "@charset \"UTF-8\";[role=listitem]{display:flex;align-items:center;color:var(--sdds-breadcrumb-color)}[role=listitem] a{color:var(--sdds-breadcrumb-color);text-decoration:none}[role=listitem]:hover{cursor:pointer}[role=listitem]:hover a{color:var(--sdds-breadcrumb-color-hover);text-decoration:underline}[role=listitem].disabled{pointer-events:none}[role=listitem].disabled a,[role=listitem].current a,[role=listitem] [aria-current=page] a{cursor:default;color:var(--sdds-breadcrumb-color-disabled)}[role=listitem].disabled:hover a,[role=listitem].current:hover a,[role=listitem] [aria-current=page]:hover a{color:var(--sdds-breadcrumb-color-disabled);text-decoration:none}[role=listitem] a::after{content:\"›\";color:var(--sdds-breadcrumb-separator-color);margin-right:4px;margin-left:4px;display:inline-block;width:4px;height:8px}:host(.last) a::after{display:none}";
+const sddsBreadcrumbLinkCss = "@charset \"UTF-8\";[role=listitem]{display:flex;align-items:center;color:var(--sdds-breadcrumb-color)}[role=listitem] a{color:var(--sdds-breadcrumb-color);text-decoration:none}[role=listitem]:hover{cursor:pointer}[role=listitem]:hover a{color:var(--sdds-breadcrumb-color-hover);text-decoration:underline}[role=listitem].disabled{pointer-events:none}[role=listitem].disabled a,[role=listitem].current a,[role=listitem] [aria-current=page] a{cursor:default;color:var(--sdds-breadcrumb-color-disabled)}[role=listitem].disabled:hover a,[role=listitem].current:hover a,[role=listitem] [aria-current=page]:hover a{color:var(--sdds-breadcrumb-color-disabled);text-decoration:none}[role=listitem] ::slotted(*)::after{content:\"›\";color:var(--sdds-breadcrumb-separator-color);margin-right:4px;margin-left:4px;display:inline-block;width:4px;height:8px}:host(.last) ::slotted(*)::after{display:none}";
 
-const SddsBreadcrumbLink = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.current = false;
-    this.href = undefined;
-    this.target = '_self';
-    this.rel = 'noopener';
-    this.disabled = false;
-  }
-  render() {
+const SddsBreadcrumbLink = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.current = false;
+    this.href = undefined;
+    this.target = '_self';
+    this.rel = 'noopener';
+    this.disabled = false;
+  }
+  render() {
     return (h("div", { role: "listitem", class: `${this.current ? 'current' : ''} 
-      ${this.disabled ? 'disabled' : ''}` }, h("a", { href: !this.disabled ? this.href : null, target: this.target, rel: this.rel }, h("slot", null))));
-  }
-};
+      ${this.disabled ? 'disabled' : ''}` }, h("a", { href: !this.disabled ? this.href : null, target: this.target, rel: this.rel }, h("slot", { name: "label" }))));
+  }
+};
 SddsBreadcrumbLink.style = sddsBreadcrumbLinkCss;
 
 export { SddsBreadcrumbLink as sdds_breadcrumb_link };

package/dist/esm/sdds-breadcrumb-link.entry.js.map

@@ -1 +1 @@
-{"file":"sdds-breadcrumb-link.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,q2BAAq2B;;MCOt3B,kBAAkB;;;mBAEF,KAAK;;kBAM0B,OAAO;eAG3C,UAAU;oBAGJ,KAAK;;EAEjC,MAAM;IACJ,QACE,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE;QACvC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAEjC,SAAG,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IAC5E,eAAa,CACX,CACA,EACN;GACH;;;;;;","names":[],"sources":["./src/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.scss?tag=sdds-breadcrumb-link&encapsulation=shadow","./src/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n\n[role='listitem'] {\n  display: flex;\n  align-items: center;\n  color: var(--sdds-breadcrumb-color);\n\n  a {\n    color: var(--sdds-breadcrumb-color);\n    text-decoration: none;\n  }\n\n  &:hover {\n    a {\n      color: var(--sdds-breadcrumb-color-hover);\n      text-decoration: underline;\n    }\n\n    cursor: pointer;\n  }\n\n  &.disabled {\n    pointer-events: none;\n  }\n\n  &.disabled,\n  &.current,\n  [aria-current='page'] {\n    a {\n      cursor: default;\n      color: var(--sdds-breadcrumb-color-disabled);\n    }\n\n    &:hover {\n      a {\n        color: var(--sdds-breadcrumb-color-disabled);\n        text-decoration: none;\n      }\n    }\n  }\n\n  a::after {\n    content: '\\203A';\n    color: var(--sdds-breadcrumb-separator-color);\n    margin-right: 4px;\n    margin-left: 4px;\n    display: inline-block;\n    width: 4px;\n    height: 8px;\n  }\n}\n\n:host(.last) {\n  a::after {\n    display: none;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb-link',\n  styleUrl: 'sdds-breadcrumb-link.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumbLink {\n  /** Boolean for the current link */\n  @Prop() current: boolean = false;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  /** Toggle the disabled state for the breadcrumb */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <div\n        role=\"listitem\"\n        class={`${this.current ? 'current' : ''} \n      ${this.disabled ? 'disabled' : ''}`}\n      >\n        <a href={!this.disabled ? this.href : null} target={this.target} rel={this.rel}>\n          <slot></slot>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-breadcrumb-link.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,23BAA23B;;MCO54B,kBAAkB;;;mBAEF,KAAK;;kBAM0B,OAAO;eAG3C,UAAU;oBAGJ,KAAK;;EAEjC,MAAM;IACJ,QACE,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE;QACvC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAEjC,SAAG,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IAC5E,YAAM,IAAI,EAAC,OAAO,GAAQ,CACxB,CACA,EACN;GACH;;;;;;","names":[],"sources":["./src/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.scss?tag=sdds-breadcrumb-link&encapsulation=shadow","./src/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n\n[role='listitem'] {\n  display: flex;\n  align-items: center;\n  color: var(--sdds-breadcrumb-color);\n\n  a {\n    color: var(--sdds-breadcrumb-color);\n    text-decoration: none;\n  }\n\n  &:hover {\n    a {\n      color: var(--sdds-breadcrumb-color-hover);\n      text-decoration: underline;\n    }\n\n    cursor: pointer;\n  }\n\n  &.disabled {\n    pointer-events: none;\n  }\n\n  &.disabled,\n  &.current,\n  [aria-current='page'] {\n    a {\n      cursor: default;\n      color: var(--sdds-breadcrumb-color-disabled);\n    }\n\n    &:hover {\n      a {\n        color: var(--sdds-breadcrumb-color-disabled);\n        text-decoration: none;\n      }\n    }\n  }\n\n  ::slotted(*)::after {\n    content: '\\203A';\n    color: var(--sdds-breadcrumb-separator-color);\n    margin-right: 4px;\n    margin-left: 4px;\n    display: inline-block;\n    width: 4px;\n    height: 8px;\n  }\n}\n\n:host(.last) {\n  ::slotted(*)::after {\n    display: none;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb-link',\n  styleUrl: 'sdds-breadcrumb-link.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumbLink {\n  /** Boolean for the current link */\n  @Prop() current: boolean = false;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  /** Toggle the disabled state for the breadcrumb */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <div\n        role=\"listitem\"\n        class={`${this.current ? 'current' : ''} \n      ${this.disabled ? 'disabled' : ''}`}\n      >\n        <a href={!this.disabled ? this.href : null} target={this.target} rel={this.rel}>\n          <slot name=\"label\"></slot>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-breadcrumb.entry.js

@@ -2,18 +2,18 @@ import { r as registerInstance, h, g as getElement } from './index-fdfb114c.js';
 
 const sddsBreadcrumbCss = ":host{box-sizing:border-box}:host *{box-sizing:border-box}:host [role=list]{padding:0;margin:0;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;flex-wrap:wrap;list-style-type:none}";
 
-const SddsBreadcrumb = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  connectedCallback() {
-    this.el.children[this.el.children.length - 1].classList.add('last');
-  }
-  render() {
-    return (h("nav", null, h("div", { role: "list", class: 'sdds-breadcrumb' }, h("slot", null))));
-  }
-  get el() { return getElement(this); }
-};
+const SddsBreadcrumb = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  connectedCallback() {
+    this.el.children[this.el.children.length - 1].classList.add('last');
+  }
+  render() {
+    return (h("nav", null, h("div", { role: "list", class: 'sdds-breadcrumb' }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
 SddsBreadcrumb.style = sddsBreadcrumbCss;
 
 export { SddsBreadcrumb as sdds_breadcrumb };