@scania/tegel 0.0.31 → 0.0.32

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

@@ -0,0 +1,123 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+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 relevantTableProps = [
+  'enableMultiselect',
+  'verticalDividers',
+  'compactDesign',
+  'modeVariant',
+];
+const TableBodyRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.bodyRowToTable = createEvent(this, "bodyRowToTable", 7);
+    this.runPaginationEvent = createEvent(this, "runPaginationEvent", 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.bodyRowToTable.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.bodyRowToTable.emit(this.bodyCheckBoxStatus);
+  }
+  tablePropsChangedEventListener(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]);
+    }
+  }
+  updateBodyCheckboxesEventListener(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.runPaginationEvent.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 this; }
+  static get style() { return tableBodyRowCss; }
+}, [1, "sdds-table-body-row", {
+    "enableMultiselect": [32],
+    "bodyCheckBoxStatus": [32],
+    "mainCheckBoxStatus": [32],
+    "verticalDividers": [32],
+    "compactDesign": [32],
+    "noMinWidth": [32],
+    "modeVariant": [32],
+    "tableId": [32]
+  }, [[16, "tablePropsChangedEvent", "tablePropsChangedEventListener"], [16, "mainCheckboxSelectedEvent", "headCheckboxListener"], [16, "updateBodyCheckboxesEvent", "updateBodyCheckboxesEventListener"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-table-body-row"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-table-body-row":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableBodyRow);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { TableBodyRow as T, defineCustomElement as d };
+
+//# sourceMappingURL=table-body-row.js.map

package/dist/components/table-body-row.js.map

@@ -0,0 +1 @@
+{"file":"table-body-row.js","mappings":";;AAAA,MAAM,eAAe,GAAG,09LAA09L;;ACGl/L,MAAM,kBAAkB,GAAsC;EAC5D,mBAAmB;EACnB,kBAAkB;EAClB,eAAe;EACf,aAAa;CACd,CAAC;MAOW,YAAY;;;;;;;6BACe,KAAK;8BAEJ,KAAK;8BAEL,KAAK;4BAEP,KAAK;yBAER,KAAK;sBAER,KAAK;uBAEY,IAAI;mBAEzB,EAAE;;EAM7B,mBAAmB,CAAC,KAAK;IACvB,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC;IACtB,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC;IACtD,IAAI,IAAI,CAAC,kBAAkB,KAAK,IAAI,EAAE;MACpC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;KAChD;SAAM;MACL,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC;KACnD;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;GACnD;EAED,yBAAyB,CAAC,MAAM;IAC9B,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC;IACjC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC;IAClD,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC;IACtB,IAAI,IAAI,CAAC,kBAAkB,KAAK,IAAI,EAAE;MACpC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;KAChD;SAAM;MACL,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC;KACnD;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;GACnD;EAGD,8BAA8B,CAAC,KAA0C;IACvE,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;MACzC,KAAK,CAAC,MAAM,CAAC,OAAO;SACjB,MAAM,CAAC,CAAC,WAAW,KAAK,kBAAkB,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;SACjE,OAAO,CAAC,CAAC,WAAW;QACnB,IAAI,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;UAC5C,MAAM,IAAI,KAAK,CAAC,gCAAgC,WAAW,EAAE,CAAC,CAAC;SAChE;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;OAC/C,CAAC,CAAC;KACN;GACF;EAqBD,oBAAoB,CAAC,KAAuB;IAC1C,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;MACpC,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;KACjD;GACF;EAGD,iCAAiC,CAAC,KAAuB;IACvD,MAAM,CAAC,UAAU,EAAE,0BAA0B,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAC9D,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE;MAC/B,IAAI,CAAC,yBAAyB,CAAC,0BAA0B,CAAC,CAAC;KAC5D;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;GACrC;EAED,iBAAiB;IACf,kBAAkB,CAAC,OAAO,CAAC,CAAC,aAAa;MACvC,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;KACnD,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GAC5C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,qBAAqB,EAAE,IAAI,CAAC,aAAa;QACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;QAC5C,2BAA2B,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS;QAC3D,6BAA6B,EAAE,IAAI,CAAC,WAAW,KAAK,WAAW;OAChE,IAEA,IAAI,CAAC,iBAAiB,KACrB,UAAI,KAAK,EAAC,uDAAuD,IAC/D,WAAK,KAAK,EAAC,oBAAoB,IAC7B,aAAO,KAAK,EAAC,6CAA6C,IACxD,aACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,kBAAkB,GAChC,CACI,CACJ,CACH,CACN,EACD,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./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":["/* 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 { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['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.bodyRowToTable.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.bodyRowToTable.emit(this.bodyCheckBoxStatus);\n  }\n\n  @Listen('tablePropsChangedEvent', { target: 'body' })\n  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\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  /** 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: 'bodyRowToTable',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  bodyRowToTable: EventEmitter<boolean>;\n\n  /** Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n  @Event({\n    eventName: 'runPaginationEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  runPaginationEvent: EventEmitter<string>;\n\n  @Listen('mainCheckboxSelectedEvent', { 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('updateBodyCheckboxesEvent', { target: 'body' })\n  updateBodyCheckboxesEventListener(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.runPaginationEvent.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-toast.entry.js

@@ -66,7 +66,7 @@ const SddsToast = class {
     this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');
   }
   render() {
-    return (h(Host, { role: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
+    return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
             toast-wrapper
             ${this.type}
             ` }, h("sdds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `toast-content` }, h("div", { class: `toast-header

package/dist/esm/sdds-toast.entry.js.map

@@ -1 +1 @@
-{"file":"sdds-toast.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,upEAAupE;;MCQ/pE,SAAS;;;;IAsDpB,gBAAW,GAAG;MACZ,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,aAAa;UAChB,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;UACV,OAAO,OAAO,CAAC;QACjB,KAAK,SAAS;UACZ,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;UACZ,OAAO,MAAM,CAAC;QAChB;UACE,OAAO,MAAM,CAAC;OACjB;KACF,CAAC;IAEF,gBAAW,GAAG;MACZ,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACzC,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE;QACpC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;OACpB;KACF,CAAC;IAQF,qBAAgB,GAAG;MACjB,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACvC,OAAO,aAAa,CAAC;OACtB;MACD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,OAAO,cAAc,CAAC;OACvB;MACD,OAAO,EAAE,CAAC;KACX,CAAC;mBA1FwB,MAAM,CAAC,UAAU,EAAE;;;gBASmB,aAAa;kBAGnD,KAAK;qBAGiB,OAAO;;;;;EAUvD,MAAM,SAAS;IACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO;MACL,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;;EAID,MAAM,SAAS;IACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,OAAO;MACL,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;EAqCD,iBAAiB;IACf,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,IAAI,KAAK,iBAAiB,CAAC,CAAC;IAC7F,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC;GACpF;EAYD,MAAM;IACJ,QACE,EAAC,IAAI,IACH,IAAI,EAAE,IAAI,CAAC,SAAS,sBACF,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAC5D,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,IAEzC,WACE,KAAK,EAAE;;cAEH,IAAI,CAAC,IAAI;aACV,IAEH,iBAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,MAAM,GAAa,EAC7D,WAAK,KAAK,EAAE,eAAe,IACzB,WACE,KAAK,EAAE;gBACL,IAAI,CAAC,gBAAgB,EAAE;eACxB,IAEA,IAAI,CAAC,MAAM,CACR,EACN,WAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,SAAS,EAAE,IAC5D,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,EACN,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,EACN,cACE,OAAO,EAAE;QACP,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB,EACD,KAAK,EAAE,aAAa,IAEpB,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACL,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/toast/sdds-toast.scss?tag=sdds-toast&encapsulation=shadow","./src/components/toast/sdds-toast.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/z-index';\n\n:host(.hide) {\n  display: none;\n  visibility: hidden;\n}\n\n:host {\n  z-index: z(toast);\n\n  .toast-wrapper {\n    display: flex;\n    width: calc(352px - 4px);\n    background-color: var(--sdds-toast-background-color);\n    border-radius: 4px;\n\n    &.information {\n      border-left: 4px solid var(--sdds-information);\n\n      sdds-icon {\n        color: var(--sdds-information);\n      }\n    }\n\n    &.success {\n      border-left: 4px solid var(--sdds-positive);\n\n      sdds-icon {\n        color: var(--sdds-positive);\n      }\n    }\n\n    &.error {\n      border-left: 4px solid var(--sdds-negative);\n\n      sdds-icon {\n        color: var(--sdds-negative);\n      }\n    }\n\n    &.warning {\n      border-left: 4px solid var(--sdds-warning);\n\n      sdds-icon {\n        color: var(--sdds-warning);\n      }\n    }\n\n    button.toast-close {\n      height: 20px;\n      width: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 14px 14px 0 0;\n      border: none;\n      background: transparent;\n\n      &:hover {\n        cursor: pointer;\n      }\n\n      &:focus {\n        @include sdds-focus-state;\n      }\n\n      sdds-icon {\n        color: var(--sdds-toast-dissmiss-color);\n        padding: 0;\n      }\n    }\n  }\n\n  sdds-icon {\n    padding: 14px 0 0 12px;\n  }\n\n  .toast-content {\n    padding: 16px 0 16px 10px;\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n\n    .toast-header {\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n      color: var(--sdds-toast-headline-color);\n\n      &.no-subheader {\n        margin-bottom: 4px;\n      }\n\n      &.only-header {\n        margin-bottom: 0;\n      }\n    }\n\n    .toast-subheader {\n      slot::slotted(*) {\n        margin-top: 4px;\n        color: var(--sdds-toast-subheadline-color);\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        padding-bottom: 16px;\n        max-width: 252px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      &.no-link {\n        slot::slotted(*) {\n          padding-bottom: 0;\n        }\n      }\n    }\n  }\n\n  slot[name='toast-link']::slotted(*) {\n    color: var(--sdds-toast-link-color);\n  }\n\n  .sdds-mode-variant-primary {\n    --sdds-toast-background: var(--sdds-toast-background-primary);\n  }\n\n  .sdds-mode-variant-secondary {\n    --sdds-toast-background: var(--sdds-toast-background-secondary);\n  }\n}\n","import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toast',\n  styleUrl: 'sdds-toast.scss',\n  shadow: true,\n})\nexport class SddsToast {\n  /** ID for the toast. Randomly generated if not specified. */\n  @Prop() toastId: string = crypto.randomUUID();\n\n  /** Header text for the component. */\n  @Prop() header: string;\n\n  /** Subheader text for the component. */\n  @Prop() subheader: string;\n\n  /** Type of toast. */\n  @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n  /** Hides the toast. */\n  @Prop() hidden: boolean = false;\n\n  /** ARIA toastRole for the toast. */\n  @Prop() toastRole: 'alert' | 'log' | 'status' = 'alert';\n\n  @Element() host: HostElement;\n\n  @State() hasSubheader: boolean;\n\n  @State() hasLink: boolean;\n\n  /** Hides the toast. */\n  @Method()\n  async hideToast() {\n    this.hidden = true;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Shows the toast. */\n  @Method()\n  async showToast() {\n    this.hidden = false;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Sends unique toast identifier component is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    toastId: string;\n  }>;\n\n  getIconName = () => {\n    switch (this.type) {\n      case 'information':\n        return 'info';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'success':\n        return 'tick';\n      default:\n        return 'info';\n    }\n  };\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      toastId: this.toastId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  connectedCallback() {\n    const children = Array.from(this.host.children);\n    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n  }\n\n  getHeaderClasses = () => {\n    if (!this.hasSubheader && !this.hasLink) {\n      return 'only-header';\n    }\n    if (!this.hasSubheader) {\n      return 'no-subheader';\n    }\n    return '';\n  };\n\n  render() {\n    return (\n      <Host\n        role={this.toastRole}\n        aria-describedby={this.host.getAttribute('aria-describedby')}\n        class={`${this.hidden ? 'hide' : 'show'}`}\n      >\n        <div\n          class={`\n            toast-wrapper\n            ${this.type}\n            `}\n        >\n          <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n          <div class={`toast-content`}>\n            <div\n              class={`toast-header\n              ${this.getHeaderClasses()}\n              `}\n            >\n              {this.header}\n            </div>\n            <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n              <slot name=\"toast-subheader\"></slot>\n            </div>\n            <slot name=\"toast-link\"></slot>\n          </div>\n          <button\n            onClick={() => {\n              this.handleClose();\n            }}\n            class={`toast-close`}\n          >\n            <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-toast.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,upEAAupE;;MCQ/pE,SAAS;;;;IAsDpB,gBAAW,GAAG;MACZ,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,aAAa;UAChB,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;UACV,OAAO,OAAO,CAAC;QACjB,KAAK,SAAS;UACZ,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;UACZ,OAAO,MAAM,CAAC;QAChB;UACE,OAAO,MAAM,CAAC;OACjB;KACF,CAAC;IAEF,gBAAW,GAAG;MACZ,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACzC,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE;QACpC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;OACpB;KACF,CAAC;IAQF,qBAAgB,GAAG;MACjB,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACvC,OAAO,aAAa,CAAC;OACtB;MACD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,OAAO,cAAc,CAAC;OACvB;MACD,OAAO,EAAE,CAAC;KACX,CAAC;mBA1FwB,MAAM,CAAC,UAAU,EAAE;;;gBASmB,aAAa;kBAGnD,KAAK;qBAGiB,OAAO;;;;;EAUvD,MAAM,SAAS;IACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO;MACL,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;;EAID,MAAM,SAAS;IACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,OAAO;MACL,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;EAqCD,iBAAiB;IACf,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,IAAI,KAAK,iBAAiB,CAAC,CAAC;IAC7F,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC;GACpF;EAYD,MAAM;IACJ,QACE,EAAC,IAAI,IACH,SAAS,EAAE,IAAI,CAAC,SAAS,sBACP,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAC5D,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,IAEzC,WACE,KAAK,EAAE;;cAEH,IAAI,CAAC,IAAI;aACV,IAEH,iBAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,MAAM,GAAa,EAC7D,WAAK,KAAK,EAAE,eAAe,IACzB,WACE,KAAK,EAAE;gBACL,IAAI,CAAC,gBAAgB,EAAE;eACxB,IAEA,IAAI,CAAC,MAAM,CACR,EACN,WAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,SAAS,EAAE,IAC5D,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,EACN,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,EACN,cACE,OAAO,EAAE;QACP,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB,EACD,KAAK,EAAE,aAAa,IAEpB,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACL,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/toast/sdds-toast.scss?tag=sdds-toast&encapsulation=shadow","./src/components/toast/sdds-toast.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/z-index';\n\n:host(.hide) {\n  display: none;\n  visibility: hidden;\n}\n\n:host {\n  z-index: z(toast);\n\n  .toast-wrapper {\n    display: flex;\n    width: calc(352px - 4px);\n    background-color: var(--sdds-toast-background-color);\n    border-radius: 4px;\n\n    &.information {\n      border-left: 4px solid var(--sdds-information);\n\n      sdds-icon {\n        color: var(--sdds-information);\n      }\n    }\n\n    &.success {\n      border-left: 4px solid var(--sdds-positive);\n\n      sdds-icon {\n        color: var(--sdds-positive);\n      }\n    }\n\n    &.error {\n      border-left: 4px solid var(--sdds-negative);\n\n      sdds-icon {\n        color: var(--sdds-negative);\n      }\n    }\n\n    &.warning {\n      border-left: 4px solid var(--sdds-warning);\n\n      sdds-icon {\n        color: var(--sdds-warning);\n      }\n    }\n\n    button.toast-close {\n      height: 20px;\n      width: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 14px 14px 0 0;\n      border: none;\n      background: transparent;\n\n      &:hover {\n        cursor: pointer;\n      }\n\n      &:focus {\n        @include sdds-focus-state;\n      }\n\n      sdds-icon {\n        color: var(--sdds-toast-dissmiss-color);\n        padding: 0;\n      }\n    }\n  }\n\n  sdds-icon {\n    padding: 14px 0 0 12px;\n  }\n\n  .toast-content {\n    padding: 16px 0 16px 10px;\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n\n    .toast-header {\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n      color: var(--sdds-toast-headline-color);\n\n      &.no-subheader {\n        margin-bottom: 4px;\n      }\n\n      &.only-header {\n        margin-bottom: 0;\n      }\n    }\n\n    .toast-subheader {\n      slot::slotted(*) {\n        margin-top: 4px;\n        color: var(--sdds-toast-subheadline-color);\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        padding-bottom: 16px;\n        max-width: 252px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      &.no-link {\n        slot::slotted(*) {\n          padding-bottom: 0;\n        }\n      }\n    }\n  }\n\n  slot[name='toast-link']::slotted(*) {\n    color: var(--sdds-toast-link-color);\n  }\n\n  .sdds-mode-variant-primary {\n    --sdds-toast-background: var(--sdds-toast-background-primary);\n  }\n\n  .sdds-mode-variant-secondary {\n    --sdds-toast-background: var(--sdds-toast-background-secondary);\n  }\n}\n","import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toast',\n  styleUrl: 'sdds-toast.scss',\n  shadow: true,\n})\nexport class SddsToast {\n  /** ID for the toast. Randomly generated if not specified. */\n  @Prop() toastId: string = crypto.randomUUID();\n\n  /** Header text for the component. */\n  @Prop() header: string;\n\n  /** Subheader text for the component. */\n  @Prop() subheader: string;\n\n  /** Type of toast. */\n  @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n  /** Hides the toast. */\n  @Prop() hidden: boolean = false;\n\n  /** ARIA role for the toast. */\n  @Prop() toastRole: 'alert' | 'log' | 'status' = 'alert';\n\n  @Element() host: HostElement;\n\n  @State() hasSubheader: boolean;\n\n  @State() hasLink: boolean;\n\n  /** Hides the toast. */\n  @Method()\n  async hideToast() {\n    this.hidden = true;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Shows the toast. */\n  @Method()\n  async showToast() {\n    this.hidden = false;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Sends unique toast identifier component is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    toastId: string;\n  }>;\n\n  getIconName = () => {\n    switch (this.type) {\n      case 'information':\n        return 'info';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'success':\n        return 'tick';\n      default:\n        return 'info';\n    }\n  };\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      toastId: this.toastId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  connectedCallback() {\n    const children = Array.from(this.host.children);\n    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n  }\n\n  getHeaderClasses = () => {\n    if (!this.hasSubheader && !this.hasLink) {\n      return 'only-header';\n    }\n    if (!this.hasSubheader) {\n      return 'no-subheader';\n    }\n    return '';\n  };\n\n  render() {\n    return (\n      <Host\n        toastRole={this.toastRole}\n        aria-describedby={this.host.getAttribute('aria-describedby')}\n        class={`${this.hidden ? 'hide' : 'show'}`}\n      >\n        <div\n          class={`\n            toast-wrapper\n            ${this.type}\n            `}\n        >\n          <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n          <div class={`toast-content`}>\n            <div\n              class={`toast-header\n              ${this.getHeaderClasses()}\n              `}\n            >\n              {this.header}\n            </div>\n            <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n              <slot name=\"toast-subheader\"></slot>\n            </div>\n            <slot name=\"toast-link\"></slot>\n          </div>\n          <button\n            onClick={() => {\n              this.handleClose();\n            }}\n            class={`toast-close`}\n          >\n            <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/tegel/{p-46013562.entry.js → p-f51fe381.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,c as t,h as o,H as a,g as r}from"./p-0b4eba86.js";const e=":host(.hide){display:none;visibility:hidden}:host{z-index:700}:host .toast-wrapper{display:flex;width:348px;background-color:var(--sdds-toast-background-color);border-radius:4px}:host .toast-wrapper.information{border-left:4px solid var(--sdds-information)}:host .toast-wrapper.information sdds-icon{color:var(--sdds-information)}:host .toast-wrapper.success{border-left:4px solid var(--sdds-positive)}:host .toast-wrapper.success sdds-icon{color:var(--sdds-positive)}:host .toast-wrapper.error{border-left:4px solid var(--sdds-negative)}:host .toast-wrapper.error sdds-icon{color:var(--sdds-negative)}:host .toast-wrapper.warning{border-left:4px solid var(--sdds-warning)}:host .toast-wrapper.warning sdds-icon{color:var(--sdds-warning)}:host .toast-wrapper button.toast-close{height:20px;width:20px;display:flex;align-items:center;justify-content:center;margin:14px 14px 0 0;border:none;background:transparent}:host .toast-wrapper button.toast-close:hover{cursor:pointer}:host .toast-wrapper button.toast-close:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .toast-wrapper button.toast-close sdds-icon{color:var(--sdds-toast-dissmiss-color);padding:0}:host sdds-icon{padding:14px 0 0 12px}:host .toast-content{padding:16px 0 16px 10px;display:flex;flex-direction:column;flex:1}:host .toast-content .toast-header{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-toast-headline-color)}:host .toast-content .toast-header.no-subheader{margin-bottom:4px}:host .toast-content .toast-header.only-header{margin-bottom:0}:host .toast-content .toast-subheader slot::slotted(*){margin-top:4px;color:var(--sdds-toast-subheadline-color);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding-bottom:16px;max-width:252px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .toast-content .toast-subheader.no-link slot::slotted(*){padding-bottom:0}:host slot[name=toast-link]::slotted(*){color:var(--sdds-toast-link-color)}:host .sdds-mode-variant-primary{--sdds-toast-background:var(--sdds-toast-background-primary)}:host .sdds-mode-variant-secondary{--sdds-toast-background:var(--sdds-toast-background-secondary)}";const d=class{constructor(o){s(this,o);this.sddsClose=t(this,"sddsClose",7);this.getIconName=()=>{switch(this.type){case"information":return"info";case"error":return"error";case"warning":return"warning";case"success":return"tick";default:return"info"}};this.handleClose=()=>{const s=this.sddsClose.emit({toastId:this.toastId});if(!s.defaultPrevented){this.hidden=true}};this.getHeaderClasses=()=>{if(!this.hasSubheader&&!this.hasLink){return"only-header"}if(!this.hasSubheader){return"no-subheader"}return""};this.toastId=crypto.randomUUID();this.header=undefined;this.subheader=undefined;this.type="information";this.hidden=false;this.toastRole="alert";this.hasSubheader=undefined;this.hasLink=undefined}async hideToast(){this.hidden=true;return{toastId:this.toastId}}async showToast(){this.hidden=false;return{toastId:this.toastId}}connectedCallback(){const s=Array.from(this.host.children);this.hasSubheader=s.some((s=>s.slot==="toast-subheader"));this.hasLink=s.some((s=>s.slot==="toast-link"))}render(){return o(a,{role:this.toastRole,"aria-describedby":this.host.getAttribute("aria-describedby"),class:`${this.hidden?"hide":"show"}`},o("div",{class:`\n            toast-wrapper\n            ${this.type}\n            `},o("sdds-icon",{name:this.getIconName(),size:"20px"}),o("div",{class:`toast-content`},o("div",{class:`toast-header\n              ${this.getHeaderClasses()}\n              `},this.header),o("div",{class:`toast-subheader ${this.hasLink?"":"no-link"}`},o("slot",{name:"toast-subheader"})),o("slot",{name:"toast-link"})),o("button",{onClick:()=>{this.handleClose()},class:`toast-close`},o("sdds-icon",{name:"cross",size:"20px"}))))}get host(){return r(this)}};d.style=e;export{d as sdds_toast};
-//# sourceMappingURL=p-46013562.entry.js.map
+import{r as s,c as t,h as o,H as a,g as r}from"./p-0b4eba86.js";const e=":host(.hide){display:none;visibility:hidden}:host{z-index:700}:host .toast-wrapper{display:flex;width:348px;background-color:var(--sdds-toast-background-color);border-radius:4px}:host .toast-wrapper.information{border-left:4px solid var(--sdds-information)}:host .toast-wrapper.information sdds-icon{color:var(--sdds-information)}:host .toast-wrapper.success{border-left:4px solid var(--sdds-positive)}:host .toast-wrapper.success sdds-icon{color:var(--sdds-positive)}:host .toast-wrapper.error{border-left:4px solid var(--sdds-negative)}:host .toast-wrapper.error sdds-icon{color:var(--sdds-negative)}:host .toast-wrapper.warning{border-left:4px solid var(--sdds-warning)}:host .toast-wrapper.warning sdds-icon{color:var(--sdds-warning)}:host .toast-wrapper button.toast-close{height:20px;width:20px;display:flex;align-items:center;justify-content:center;margin:14px 14px 0 0;border:none;background:transparent}:host .toast-wrapper button.toast-close:hover{cursor:pointer}:host .toast-wrapper button.toast-close:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .toast-wrapper button.toast-close sdds-icon{color:var(--sdds-toast-dissmiss-color);padding:0}:host sdds-icon{padding:14px 0 0 12px}:host .toast-content{padding:16px 0 16px 10px;display:flex;flex-direction:column;flex:1}:host .toast-content .toast-header{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-toast-headline-color)}:host .toast-content .toast-header.no-subheader{margin-bottom:4px}:host .toast-content .toast-header.only-header{margin-bottom:0}:host .toast-content .toast-subheader slot::slotted(*){margin-top:4px;color:var(--sdds-toast-subheadline-color);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding-bottom:16px;max-width:252px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .toast-content .toast-subheader.no-link slot::slotted(*){padding-bottom:0}:host slot[name=toast-link]::slotted(*){color:var(--sdds-toast-link-color)}:host .sdds-mode-variant-primary{--sdds-toast-background:var(--sdds-toast-background-primary)}:host .sdds-mode-variant-secondary{--sdds-toast-background:var(--sdds-toast-background-secondary)}";const d=class{constructor(o){s(this,o);this.sddsClose=t(this,"sddsClose",7);this.getIconName=()=>{switch(this.type){case"information":return"info";case"error":return"error";case"warning":return"warning";case"success":return"tick";default:return"info"}};this.handleClose=()=>{const s=this.sddsClose.emit({toastId:this.toastId});if(!s.defaultPrevented){this.hidden=true}};this.getHeaderClasses=()=>{if(!this.hasSubheader&&!this.hasLink){return"only-header"}if(!this.hasSubheader){return"no-subheader"}return""};this.toastId=crypto.randomUUID();this.header=undefined;this.subheader=undefined;this.type="information";this.hidden=false;this.toastRole="alert";this.hasSubheader=undefined;this.hasLink=undefined}async hideToast(){this.hidden=true;return{toastId:this.toastId}}async showToast(){this.hidden=false;return{toastId:this.toastId}}connectedCallback(){const s=Array.from(this.host.children);this.hasSubheader=s.some((s=>s.slot==="toast-subheader"));this.hasLink=s.some((s=>s.slot==="toast-link"))}render(){return o(a,{toastRole:this.toastRole,"aria-describedby":this.host.getAttribute("aria-describedby"),class:`${this.hidden?"hide":"show"}`},o("div",{class:`\n            toast-wrapper\n            ${this.type}\n            `},o("sdds-icon",{name:this.getIconName(),size:"20px"}),o("div",{class:`toast-content`},o("div",{class:`toast-header\n              ${this.getHeaderClasses()}\n              `},this.header),o("div",{class:`toast-subheader ${this.hasLink?"":"no-link"}`},o("slot",{name:"toast-subheader"})),o("slot",{name:"toast-link"})),o("button",{onClick:()=>{this.handleClose()},class:`toast-close`},o("sdds-icon",{name:"cross",size:"20px"}))))}get host(){return r(this)}};d.style=e;export{d as sdds_toast};
+//# sourceMappingURL=p-f51fe381.entry.js.map

package/dist/tegel/p-f51fe381.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sddsToastCss","SddsToast","this","getIconName","type","handleClose","sddsCloseEvent","sddsClose","emit","toastId","defaultPrevented","hidden","getHeaderClasses","hasSubheader","hasLink","crypto","randomUUID","async","connectedCallback","children","Array","from","host","some","childElement","slot","render","h","Host","toastRole","getAttribute","class","name","size","header","onClick"],"sources":["./src/components/toast/sdds-toast.scss?tag=sdds-toast&encapsulation=shadow","./src/components/toast/sdds-toast.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/z-index';\n\n:host(.hide) {\n  display: none;\n  visibility: hidden;\n}\n\n:host {\n  z-index: z(toast);\n\n  .toast-wrapper {\n    display: flex;\n    width: calc(352px - 4px);\n    background-color: var(--sdds-toast-background-color);\n    border-radius: 4px;\n\n    &.information {\n      border-left: 4px solid var(--sdds-information);\n\n      sdds-icon {\n        color: var(--sdds-information);\n      }\n    }\n\n    &.success {\n      border-left: 4px solid var(--sdds-positive);\n\n      sdds-icon {\n        color: var(--sdds-positive);\n      }\n    }\n\n    &.error {\n      border-left: 4px solid var(--sdds-negative);\n\n      sdds-icon {\n        color: var(--sdds-negative);\n      }\n    }\n\n    &.warning {\n      border-left: 4px solid var(--sdds-warning);\n\n      sdds-icon {\n        color: var(--sdds-warning);\n      }\n    }\n\n    button.toast-close {\n      height: 20px;\n      width: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 14px 14px 0 0;\n      border: none;\n      background: transparent;\n\n      &:hover {\n        cursor: pointer;\n      }\n\n      &:focus {\n        @include sdds-focus-state;\n      }\n\n      sdds-icon {\n        color: var(--sdds-toast-dissmiss-color);\n        padding: 0;\n      }\n    }\n  }\n\n  sdds-icon {\n    padding: 14px 0 0 12px;\n  }\n\n  .toast-content {\n    padding: 16px 0 16px 10px;\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n\n    .toast-header {\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n      color: var(--sdds-toast-headline-color);\n\n      &.no-subheader {\n        margin-bottom: 4px;\n      }\n\n      &.only-header {\n        margin-bottom: 0;\n      }\n    }\n\n    .toast-subheader {\n      slot::slotted(*) {\n        margin-top: 4px;\n        color: var(--sdds-toast-subheadline-color);\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        padding-bottom: 16px;\n        max-width: 252px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      &.no-link {\n        slot::slotted(*) {\n          padding-bottom: 0;\n        }\n      }\n    }\n  }\n\n  slot[name='toast-link']::slotted(*) {\n    color: var(--sdds-toast-link-color);\n  }\n\n  .sdds-mode-variant-primary {\n    --sdds-toast-background: var(--sdds-toast-background-primary);\n  }\n\n  .sdds-mode-variant-secondary {\n    --sdds-toast-background: var(--sdds-toast-background-secondary);\n  }\n}\n","import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toast',\n  styleUrl: 'sdds-toast.scss',\n  shadow: true,\n})\nexport class SddsToast {\n  /** ID for the toast. Randomly generated if not specified. */\n  @Prop() toastId: string = crypto.randomUUID();\n\n  /** Header text for the component. */\n  @Prop() header: string;\n\n  /** Subheader text for the component. */\n  @Prop() subheader: string;\n\n  /** Type of toast. */\n  @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n  /** Hides the toast. */\n  @Prop() hidden: boolean = false;\n\n  /** ARIA role for the toast. */\n  @Prop() toastRole: 'alert' | 'log' | 'status' = 'alert';\n\n  @Element() host: HostElement;\n\n  @State() hasSubheader: boolean;\n\n  @State() hasLink: boolean;\n\n  /** Hides the toast. */\n  @Method()\n  async hideToast() {\n    this.hidden = true;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Shows the toast. */\n  @Method()\n  async showToast() {\n    this.hidden = false;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Sends unique toast identifier component is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    toastId: string;\n  }>;\n\n  getIconName = () => {\n    switch (this.type) {\n      case 'information':\n        return 'info';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'success':\n        return 'tick';\n      default:\n        return 'info';\n    }\n  };\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      toastId: this.toastId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  connectedCallback() {\n    const children = Array.from(this.host.children);\n    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n  }\n\n  getHeaderClasses = () => {\n    if (!this.hasSubheader && !this.hasLink) {\n      return 'only-header';\n    }\n    if (!this.hasSubheader) {\n      return 'no-subheader';\n    }\n    return '';\n  };\n\n  render() {\n    return (\n      <Host\n        toastRole={this.toastRole}\n        aria-describedby={this.host.getAttribute('aria-describedby')}\n        class={`${this.hidden ? 'hide' : 'show'}`}\n      >\n        <div\n          class={`\n            toast-wrapper\n            ${this.type}\n            `}\n        >\n          <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n          <div class={`toast-content`}>\n            <div\n              class={`toast-header\n              ${this.getHeaderClasses()}\n              `}\n            >\n              {this.header}\n            </div>\n            <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n              <slot name=\"toast-subheader\"></slot>\n            </div>\n            <slot name=\"toast-link\"></slot>\n          </div>\n          <button\n            onClick={() => {\n              this.handleClose();\n            }}\n            class={`toast-close`}\n          >\n            <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAe,wpE,MCQRC,EAAS,M,8DAsDpBC,KAAAC,YAAc,KACZ,OAAQD,KAAKE,MACX,IAAK,cACH,MAAO,OACT,IAAK,QACH,MAAO,QACT,IAAK,UACH,MAAO,UACT,IAAK,UACH,MAAO,OACT,QACE,MAAO,O,EAIbF,KAAAG,YAAc,KACZ,MAAMC,EAAiBJ,KAAKK,UAAUC,KAAK,CACzCC,QAASP,KAAKO,UAEhB,IAAKH,EAAeI,iBAAkB,CACpCR,KAAKS,OAAS,I,GAUlBT,KAAAU,iBAAmB,KACjB,IAAKV,KAAKW,eAAiBX,KAAKY,QAAS,CACvC,MAAO,a,CAET,IAAKZ,KAAKW,aAAc,CACtB,MAAO,c,CAET,MAAO,EAAE,E,aAzFeE,OAAOC,a,yDAS+B,c,YAGtC,M,eAGsB,Q,mDAUhDC,kBACEf,KAAKS,OAAS,KACd,MAAO,CACLF,QAASP,KAAKO,Q,CAMlBQ,kBACEf,KAAKS,OAAS,MACd,MAAO,CACLF,QAASP,KAAKO,Q,CAuClBS,oBACE,MAAMC,EAAWC,MAAMC,KAAKnB,KAAKoB,KAAKH,UACtCjB,KAAKW,aAAeM,EAASI,MAAMC,GAAiBA,EAAaC,OAAS,oBAC1EvB,KAAKY,QAAUK,EAASI,MAAMC,GAAiBA,EAAaC,OAAS,c,CAavEC,SACE,OACEC,EAACC,EAAI,CACHC,UAAW3B,KAAK2B,UAAS,mBACP3B,KAAKoB,KAAKQ,aAAa,oBACzCC,MAAO,GAAG7B,KAAKS,OAAS,OAAS,UAEjCgB,EAAA,OACEI,MAAO,4CAEH7B,KAAKE,sBAGTuB,EAAA,aAAWK,KAAM9B,KAAKC,cAAe8B,KAAK,SAC1CN,EAAA,OAAKI,MAAO,iBACVJ,EAAA,OACEI,MAAO,+BACL7B,KAAKU,sCAGNV,KAAKgC,QAERP,EAAA,OAAKI,MAAO,mBAAmB7B,KAAKY,QAAU,GAAK,aACjDa,EAAA,QAAMK,KAAK,qBAEbL,EAAA,QAAMK,KAAK,gBAEbL,EAAA,UACEQ,QAAS,KACPjC,KAAKG,aAAa,EAEpB0B,MAAO,eAEPJ,EAAA,aAAWK,KAAK,QAAQC,KAAK,W"}

package/dist/tegel/tegel.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-0b4eba86.js";export{s as setNonce}from"./p-0b4eba86.js";const t=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};t().then((e=>a(JSON.parse('[["p-62ed6fdc",[[1,"sdds-banner",{"icon":[1],"header":[1],"subheader":[1],"linkText":[1,"link-text"],"href":[1],"linkTarget":[1,"link-target"],"linkRel":[1,"link-rel"],"type":[1],"bannerId":[1,"banner-id"],"persistent":[4],"hidden":[4],"hideBanner":[64],"showBanner":[64]}]]],["p-6e54f5a2",[[1,"sdds-dropdown-filter",{"placeholder":[1],"label":[1],"defaultOption":[1,"default-option"],"selectedOption":[1,"selected-option"],"disabled":[4],"size":[1],"inline":[4],"labelPosition":[1,"label-position"],"state":[1],"helper":[1],"data":[1],"dataOptions":[32],"filteredContent":[32],"searchTerm":[32],"selectedOptionState":[32],"dropdownRef":[32],"selectedLabel":[32],"selectedValue":[32],"resetOption":[64]},[[0,"inputSearch","updateOptionsContent"],[0,"selectOption","selectOptionHandler"]]]]],["p-0953710b",[[4,"sdds-table-body",{"disableFilteringFunction":[4,"disable-filtering-function"],"disableSortingFunction":[4,"disable-sorting-function"],"bodyData":[8,"body-data"],"enableDummyData":[4,"enable-dummy-data"],"dummyData":[32],"rowsPerPage":[32],"enableMultiselect":[32],"enablePaginationTableBody":[32],"enableExpandableRows":[32],"innerBodyData":[32],"bodyDataManipulated":[32],"bodyDataOriginal":[32],"multiselectArray":[32],"multiselectArrayJSON":[32],"mainCheckboxStatus":[32],"columnsNumber":[32],"disableAllSorting":[32],"numberOfPages":[32],"paginationValue":[32],"tempPaginationDisable":[32],"showNoResultsMessage":[32],"tableId":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"],[16,"sortColumnDataEvent","updateOptionsContent"],[16,"mainCheckboxSelectedEvent","headCheckboxListener"],[16,"bodyRowToTable","bodyCheckboxListener"],[16,"tableFilteringTerm","tableFilteringTermListener"]]]]],["p-cd08f5f0",[[1,"sdds-accordion-item",{"header":[1],"expandIconPosition":[1,"expand-icon-position"],"disabled":[4],"expanded":[4],"paddingReset":[4,"padding-reset"]}]]],["p-525ec252",[[1,"sdds-datetime",{"type":[513],"value":[513],"defaultValue":[1,"default-value"],"disabled":[4],"size":[1],"noMinWidth":[4,"no-min-width"],"modeVariant":[1,"mode-variant"],"name":[1],"state":[1],"autofocus":[4],"label":[1],"helper":[1],"focusInput":[32]},[[0,"focus","handleFocusIn"],[0,"focusout","handleFocusOut"]]]]],["p-262dca00",[[1,"sdds-message",{"header":[1],"modeVariant":[1,"mode-variant"],"type":[1],"noIcon":[4,"no-icon"],"minimal":[4]}]]],["p-84e5d141",[[1,"sdds-modal",{"prevent":[4],"size":[1],"actions":[1],"open":[4],"openModal":[64]}]]],["p-ebffa726",[[0,"sdds-slider",{"label":[1],"value":[1],"min":[1],"max":[1],"ticks":[1],"showTickNumbers":[4,"show-tick-numbers"],"tooltip":[4],"disabled":[4],"readOnly":[4,"read-only"],"controls":[4],"input":[4],"step":[1],"name":[1],"size":[1],"snap":[4],"sliderId":[1,"slider-id"],"reset":[64]},[[0,"keydown","handleKeydown"],[9,"mouseup","handleMouseUp"],[9,"touchend","handleTouchEnd"],[9,"mousemove","handleMouseMove"],[9,"touchmove","handleTouchMove"]]]]],["p-fbcdf3d9",[[0,"sdds-textarea",{"label":[1],"name":[1],"helper":[1],"cols":[2],"rows":[2],"labelPosition":[1,"label-position"],"placeholder":[1],"value":[1],"disabled":[4],"readOnly":[4,"read-only"],"state":[1],"maxLength":[2,"max-length"],"modeVariant":[1,"mode-variant"],"autoFocus":[4,"auto-focus"],"focusInput":[32]}]]],["p-d910763a",[[4,"sdds-textfield",{"type":[513],"labelPosition":[1,"label-position"],"label":[1],"helper":[1],"placeholder":[1],"value":[513],"disabled":[4],"readOnly":[4,"read-only"],"size":[1],"modeVariant":[1,"mode-variant"],"noMinWidth":[4,"no-min-width"],"name":[1],"state":[1],"maxLength":[2,"max-length"],"autofocus":[4],"focusInput":[32]}]]],["p-46013562",[[1,"sdds-toast",{"toastId":[1,"toast-id"],"header":[1],"subheader":[1],"type":[1],"hidden":[4],"toastRole":[1,"toast-role"],"hasSubheader":[32],"hasLink":[32],"hideToast":[64],"showToast":[64]}]]],["p-2fad34c4",[[1,"sdds-accordion",{"divider":[4],"modeVariant":[1,"mode-variant"]}]]],["p-6bdce8c1",[[1,"sdds-badges",{"value":[1],"hidden":[4],"isSmall":[4,"is-small"],"size":[1],"shape":[32],"text":[32]}]]],["p-aff4d273",[[1,"sdds-block",{"modeVariant":[1,"mode-variant"]}]]],["p-ba975249",[[1,"sdds-breadcrumb"]]],["p-b2dde7a5",[[1,"sdds-breadcrumb-item",{"current":[4],"href":[1],"disabled":[4]}]]],["p-92869ad1",[[1,"sdds-button",{"text":[1],"type":[1],"size":[1],"disabled":[4],"fullbleed":[4],"modeVariant":[1,"mode-variant"],"onlyIcon":[32]}]]],["p-336efb27",[[1,"sdds-card",{"modeVariant":[1,"mode-variant"],"headerPlacement":[1,"header-placement"],"header":[1],"subheader":[1],"headerImg":[1,"header-img"],"headerImgAlt":[1,"header-img-alt"],"bodyImg":[1,"body-img"],"bodyImgAlt":[1,"body-img-alt"],"bodyDivider":[4,"body-divider"],"clickable":[4],"cardId":[1,"card-id"],"hasCardBottomSlot":[32],"hasCardBodySlot":[32]}]]],["p-72099402",[[6,"sdds-checkbox",{"name":[1],"checkboxId":[1,"checkbox-id"],"disabled":[4],"required":[4],"checked":[516],"value":[1],"toggleCheckbox":[64]}]]],["p-1eb8dd92",[[1,"sdds-header-cell",{"columnKey":[513,"column-key"],"columnTitle":[513,"column-title"],"customWidth":[513,"custom-width"],"sortable":[4],"textAlign":[513,"text-align"],"textAlignState":[32],"sortingDirection":[32],"sortedByMyKey":[32],"disableSortingBtn":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"enableMultiselect":[32],"enableToolbarDesign":[32],"tableId":[32],"enableExpandableRows":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"],[16,"sortingSwitcherEvent","sortingSwitcherEventListener"],[16,"sortColumnDataEvent","updateOptionsContent"],[16,"enableMultiselectEvent","enableMultiselectEventListener"]]]]],["p-e25424af",[[1,"sdds-inline-tab",{"label":[1],"disabled":[4],"default":[4]}]]],["p-33e7f7e5",[[1,"sdds-inline-tabs",{"defaultTab":[1,"default-tab"],"autoHeight":[4,"auto-height"],"modeVariant":[1,"mode-variant"],"tabs":[32],"buttonWidth":[32],"tabHeight":[32],"showLeftScroll":[32],"showRightScroll":[32],"showTab":[64]}]]],["p-93571e36",[[1,"sdds-inline-tabs-fullbleed",{"modeVariant":[1,"mode-variant"],"tabs":[32],"showLeftScroll":[32],"showRightScroll":[32]}]]],["p-913cb5e9",[[1,"sdds-navigation-tabs",{"modeVariant":[1,"mode-variant"],"tabs":[32],"showLeftScroll":[32],"showRightScroll":[32]}]]],["p-a3741fdd",[[1,"sdds-popover-canvas",{"selector":[1],"referenceEl":[16],"show":[4],"placement":[1],"offsetSkidding":[2,"offset-skidding"],"offsetDistance":[2,"offset-distance"],"renderedShowValue":[32],"popperInstance":[32],"target":[32]},[[9,"mousedown","handleOutsideClick"]]]]],["p-b9ec54c5",[[1,"sdds-popover-menu",{"selector":[1],"referenceEl":[16],"show":[4],"placement":[1],"offsetSkidding":[2,"offset-skidding"],"offsetDistance":[2,"offset-distance"],"renderedShowValue":[32],"popperInstance":[32],"target":[32]},[[9,"mousedown","handleOutsideClick"]]]]],["p-5c390692",[[6,"sdds-radio-button",{"name":[1],"value":[1],"radioId":[1,"radio-id"],"checked":[516],"required":[4],"disabled":[4]}]]],["p-68fca08c",[[0,"sdds-spinner",{"size":[1],"variant":[1]}]]],["p-c79b3861",[[1,"sdds-table",{"verticalDividers":[516,"vertical-dividers"],"compactDesign":[516,"compact-design"],"noMinWidth":[516,"no-min-width"],"enableMultiselect":[516,"enable-multiselect"],"enableExpandableRows":[516,"enable-expandable-rows"],"enableResponsive":[516,"enable-responsive"],"modeVariant":[513,"mode-variant"],"tableId":[1,"table-id"]}]]],["p-458cda76",[[1,"sdds-table-body-row-expandable",{"colSpan":[2,"col-span"],"isExpanded":[32],"tableId":[32],"columnsNumber":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"modeVariant":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"]]]]],["p-5e50ce81",[[1,"sdds-table-footer",{"enablePagination":[516,"enable-pagination"],"rowsPerPage":[514,"rows-per-page"],"enableClientPagination":[516,"enable-client-pagination"],"clientPaginationValue":[514,"client-pagination-value"],"clientMaxPages":[514,"client-max-pages"],"clientSetColumnsNumber":[2,"client-set-columns-number"],"disablePaginationFunction":[4,"disable-pagination-function"],"columnsNumber":[32],"numberOfPages":[32],"paginationValue":[32],"tempPaginationDisable":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"tableId":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"],[16,"runPaginationEvent","runPaginationEventListener"]]]]],["p-9904d7ec",[[1,"sdds-table-header",{"enableMultiselect":[32],"enableExpandableRows":[32],"mainCheckboxSelected":[32],"mainExpendSelected":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"enableToolbarDesign":[32],"tableId":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"],[16,"updateMainCheckboxEvent","updateMainCheckboxEventListener"],[16,"singleRowExpandedEvent","singleRowExpandedEventListener"]]]]],["p-25af32a7",[[1,"sdds-table-toolbar",{"tableTitle":[513,"table-title"],"enableFiltering":[516,"enable-filtering"],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"tableId":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"]]]]],["p-07c7c2e7",[[6,"sdds-toggle",{"checked":[516],"required":[4],"ariaLabelledby":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"size":[1],"name":[1],"label":[1],"headline":[1],"disabled":[4],"toggleId":[1,"toggle-id"],"toggle":[64]}]]],["p-e662e68d",[[1,"sdds-tooltip",{"text":[1],"selector":[1],"referenceEl":[16],"mouseOverTooltip":[4,"mouse-over-tooltip"],"show":[1028],"placement":[1],"popperInstance":[32],"target":[32]}]]],["p-e5e10d8f",[[4,"sdds-link",{"href":[1],"target":[1],"disabled":[4],"underline":[4],"rel":[1]}]]],["p-77a4950d",[[1,"sdds-body-cell",{"cellValue":[520,"cell-value"],"cellKey":[520,"cell-key"],"disablePadding":[516,"disable-padding"],"textAlignState":[32],"activeSorting":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"tableId":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"],[16,"headCellHoverEvent","headCellHoverEventListener"],[16,"textAlignEvent","textAlignEventListener"]]],[1,"sdds-table-body-row",{"enableMultiselect":[32],"bodyCheckBoxStatus":[32],"mainCheckBoxStatus":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"modeVariant":[32],"tableId":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"],[16,"mainCheckboxSelectedEvent","headCheckboxListener"],[16,"updateBodyCheckboxesEvent","updateBodyCheckboxesEventListener"]]]]],["p-fa3dbeec",[[1,"sdds-dropdown",{"modeVariant":[1,"mode-variant"],"placeholder":[1],"defaultOption":[1,"default-option"],"selectedOption":[1,"selected-option"],"disabled":[4],"type":[1],"size":[1],"inline":[4],"labelPosition":[1,"label-position"],"label":[1],"state":[1],"helper":[1],"openDirection":[1,"open-direction"],"optionValues":[32],"optionLabels":[32],"open":[32],"node":[32],"selectedLabel":[32],"selectedValue":[32],"selectedValuesArray":[32],"selectedLabelsArray":[32],"dropdownUniqueClass":[32],"openUpwards":[32],"dropdownMenuHeight":[32],"dropdownMenuSelector":[32],"listItemIndex":[32],"listItemArray":[32],"resetOption":[64]},[[4,"click","handleDocClick"],[0,"keydown","keyListener"],[0,"selectOption","selectOptionHandler"]]],[1,"sdds-dropdown-option",{"selected":[4],"disabled":[4],"value":[513],"innerValue":[32]},[[1,"mouseover","changeFocusHandler"],[1,"mouseout","removeFocusHandler"],[0,"keydown","onKeyDown"]]]]],["p-fc96cf21",[[1,"sdds-icon",{"name":[513],"size":[513],"icons_object":[32],"arrayOfIcons":[32]}]]]]'),e)));
+import{p as e,b as a}from"./p-0b4eba86.js";export{s as setNonce}from"./p-0b4eba86.js";const t=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};t().then((e=>a(JSON.parse('[["p-62ed6fdc",[[1,"sdds-banner",{"icon":[1],"header":[1],"subheader":[1],"linkText":[1,"link-text"],"href":[1],"linkTarget":[1,"link-target"],"linkRel":[1,"link-rel"],"type":[1],"bannerId":[1,"banner-id"],"persistent":[4],"hidden":[4],"hideBanner":[64],"showBanner":[64]}]]],["p-6e54f5a2",[[1,"sdds-dropdown-filter",{"placeholder":[1],"label":[1],"defaultOption":[1,"default-option"],"selectedOption":[1,"selected-option"],"disabled":[4],"size":[1],"inline":[4],"labelPosition":[1,"label-position"],"state":[1],"helper":[1],"data":[1],"dataOptions":[32],"filteredContent":[32],"searchTerm":[32],"selectedOptionState":[32],"dropdownRef":[32],"selectedLabel":[32],"selectedValue":[32],"resetOption":[64]},[[0,"inputSearch","updateOptionsContent"],[0,"selectOption","selectOptionHandler"]]]]],["p-0953710b",[[4,"sdds-table-body",{"disableFilteringFunction":[4,"disable-filtering-function"],"disableSortingFunction":[4,"disable-sorting-function"],"bodyData":[8,"body-data"],"enableDummyData":[4,"enable-dummy-data"],"dummyData":[32],"rowsPerPage":[32],"enableMultiselect":[32],"enablePaginationTableBody":[32],"enableExpandableRows":[32],"innerBodyData":[32],"bodyDataManipulated":[32],"bodyDataOriginal":[32],"multiselectArray":[32],"multiselectArrayJSON":[32],"mainCheckboxStatus":[32],"columnsNumber":[32],"disableAllSorting":[32],"numberOfPages":[32],"paginationValue":[32],"tempPaginationDisable":[32],"showNoResultsMessage":[32],"tableId":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"],[16,"sortColumnDataEvent","updateOptionsContent"],[16,"mainCheckboxSelectedEvent","headCheckboxListener"],[16,"bodyRowToTable","bodyCheckboxListener"],[16,"tableFilteringTerm","tableFilteringTermListener"]]]]],["p-cd08f5f0",[[1,"sdds-accordion-item",{"header":[1],"expandIconPosition":[1,"expand-icon-position"],"disabled":[4],"expanded":[4],"paddingReset":[4,"padding-reset"]}]]],["p-525ec252",[[1,"sdds-datetime",{"type":[513],"value":[513],"defaultValue":[1,"default-value"],"disabled":[4],"size":[1],"noMinWidth":[4,"no-min-width"],"modeVariant":[1,"mode-variant"],"name":[1],"state":[1],"autofocus":[4],"label":[1],"helper":[1],"focusInput":[32]},[[0,"focus","handleFocusIn"],[0,"focusout","handleFocusOut"]]]]],["p-262dca00",[[1,"sdds-message",{"header":[1],"modeVariant":[1,"mode-variant"],"type":[1],"noIcon":[4,"no-icon"],"minimal":[4]}]]],["p-84e5d141",[[1,"sdds-modal",{"prevent":[4],"size":[1],"actions":[1],"open":[4],"openModal":[64]}]]],["p-ebffa726",[[0,"sdds-slider",{"label":[1],"value":[1],"min":[1],"max":[1],"ticks":[1],"showTickNumbers":[4,"show-tick-numbers"],"tooltip":[4],"disabled":[4],"readOnly":[4,"read-only"],"controls":[4],"input":[4],"step":[1],"name":[1],"size":[1],"snap":[4],"sliderId":[1,"slider-id"],"reset":[64]},[[0,"keydown","handleKeydown"],[9,"mouseup","handleMouseUp"],[9,"touchend","handleTouchEnd"],[9,"mousemove","handleMouseMove"],[9,"touchmove","handleTouchMove"]]]]],["p-fbcdf3d9",[[0,"sdds-textarea",{"label":[1],"name":[1],"helper":[1],"cols":[2],"rows":[2],"labelPosition":[1,"label-position"],"placeholder":[1],"value":[1],"disabled":[4],"readOnly":[4,"read-only"],"state":[1],"maxLength":[2,"max-length"],"modeVariant":[1,"mode-variant"],"autoFocus":[4,"auto-focus"],"focusInput":[32]}]]],["p-d910763a",[[4,"sdds-textfield",{"type":[513],"labelPosition":[1,"label-position"],"label":[1],"helper":[1],"placeholder":[1],"value":[513],"disabled":[4],"readOnly":[4,"read-only"],"size":[1],"modeVariant":[1,"mode-variant"],"noMinWidth":[4,"no-min-width"],"name":[1],"state":[1],"maxLength":[2,"max-length"],"autofocus":[4],"focusInput":[32]}]]],["p-f51fe381",[[1,"sdds-toast",{"toastId":[1,"toast-id"],"header":[1],"subheader":[1],"type":[1],"hidden":[4],"toastRole":[1,"toast-role"],"hasSubheader":[32],"hasLink":[32],"hideToast":[64],"showToast":[64]}]]],["p-2fad34c4",[[1,"sdds-accordion",{"divider":[4],"modeVariant":[1,"mode-variant"]}]]],["p-6bdce8c1",[[1,"sdds-badges",{"value":[1],"hidden":[4],"isSmall":[4,"is-small"],"size":[1],"shape":[32],"text":[32]}]]],["p-aff4d273",[[1,"sdds-block",{"modeVariant":[1,"mode-variant"]}]]],["p-ba975249",[[1,"sdds-breadcrumb"]]],["p-b2dde7a5",[[1,"sdds-breadcrumb-item",{"current":[4],"href":[1],"disabled":[4]}]]],["p-92869ad1",[[1,"sdds-button",{"text":[1],"type":[1],"size":[1],"disabled":[4],"fullbleed":[4],"modeVariant":[1,"mode-variant"],"onlyIcon":[32]}]]],["p-336efb27",[[1,"sdds-card",{"modeVariant":[1,"mode-variant"],"headerPlacement":[1,"header-placement"],"header":[1],"subheader":[1],"headerImg":[1,"header-img"],"headerImgAlt":[1,"header-img-alt"],"bodyImg":[1,"body-img"],"bodyImgAlt":[1,"body-img-alt"],"bodyDivider":[4,"body-divider"],"clickable":[4],"cardId":[1,"card-id"],"hasCardBottomSlot":[32],"hasCardBodySlot":[32]}]]],["p-72099402",[[6,"sdds-checkbox",{"name":[1],"checkboxId":[1,"checkbox-id"],"disabled":[4],"required":[4],"checked":[516],"value":[1],"toggleCheckbox":[64]}]]],["p-1eb8dd92",[[1,"sdds-header-cell",{"columnKey":[513,"column-key"],"columnTitle":[513,"column-title"],"customWidth":[513,"custom-width"],"sortable":[4],"textAlign":[513,"text-align"],"textAlignState":[32],"sortingDirection":[32],"sortedByMyKey":[32],"disableSortingBtn":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"enableMultiselect":[32],"enableToolbarDesign":[32],"tableId":[32],"enableExpandableRows":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"],[16,"sortingSwitcherEvent","sortingSwitcherEventListener"],[16,"sortColumnDataEvent","updateOptionsContent"],[16,"enableMultiselectEvent","enableMultiselectEventListener"]]]]],["p-e25424af",[[1,"sdds-inline-tab",{"label":[1],"disabled":[4],"default":[4]}]]],["p-33e7f7e5",[[1,"sdds-inline-tabs",{"defaultTab":[1,"default-tab"],"autoHeight":[4,"auto-height"],"modeVariant":[1,"mode-variant"],"tabs":[32],"buttonWidth":[32],"tabHeight":[32],"showLeftScroll":[32],"showRightScroll":[32],"showTab":[64]}]]],["p-93571e36",[[1,"sdds-inline-tabs-fullbleed",{"modeVariant":[1,"mode-variant"],"tabs":[32],"showLeftScroll":[32],"showRightScroll":[32]}]]],["p-913cb5e9",[[1,"sdds-navigation-tabs",{"modeVariant":[1,"mode-variant"],"tabs":[32],"showLeftScroll":[32],"showRightScroll":[32]}]]],["p-a3741fdd",[[1,"sdds-popover-canvas",{"selector":[1],"referenceEl":[16],"show":[4],"placement":[1],"offsetSkidding":[2,"offset-skidding"],"offsetDistance":[2,"offset-distance"],"renderedShowValue":[32],"popperInstance":[32],"target":[32]},[[9,"mousedown","handleOutsideClick"]]]]],["p-b9ec54c5",[[1,"sdds-popover-menu",{"selector":[1],"referenceEl":[16],"show":[4],"placement":[1],"offsetSkidding":[2,"offset-skidding"],"offsetDistance":[2,"offset-distance"],"renderedShowValue":[32],"popperInstance":[32],"target":[32]},[[9,"mousedown","handleOutsideClick"]]]]],["p-5c390692",[[6,"sdds-radio-button",{"name":[1],"value":[1],"radioId":[1,"radio-id"],"checked":[516],"required":[4],"disabled":[4]}]]],["p-68fca08c",[[0,"sdds-spinner",{"size":[1],"variant":[1]}]]],["p-c79b3861",[[1,"sdds-table",{"verticalDividers":[516,"vertical-dividers"],"compactDesign":[516,"compact-design"],"noMinWidth":[516,"no-min-width"],"enableMultiselect":[516,"enable-multiselect"],"enableExpandableRows":[516,"enable-expandable-rows"],"enableResponsive":[516,"enable-responsive"],"modeVariant":[513,"mode-variant"],"tableId":[1,"table-id"]}]]],["p-458cda76",[[1,"sdds-table-body-row-expandable",{"colSpan":[2,"col-span"],"isExpanded":[32],"tableId":[32],"columnsNumber":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"modeVariant":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"]]]]],["p-5e50ce81",[[1,"sdds-table-footer",{"enablePagination":[516,"enable-pagination"],"rowsPerPage":[514,"rows-per-page"],"enableClientPagination":[516,"enable-client-pagination"],"clientPaginationValue":[514,"client-pagination-value"],"clientMaxPages":[514,"client-max-pages"],"clientSetColumnsNumber":[2,"client-set-columns-number"],"disablePaginationFunction":[4,"disable-pagination-function"],"columnsNumber":[32],"numberOfPages":[32],"paginationValue":[32],"tempPaginationDisable":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"tableId":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"],[16,"runPaginationEvent","runPaginationEventListener"]]]]],["p-9904d7ec",[[1,"sdds-table-header",{"enableMultiselect":[32],"enableExpandableRows":[32],"mainCheckboxSelected":[32],"mainExpendSelected":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"enableToolbarDesign":[32],"tableId":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"],[16,"updateMainCheckboxEvent","updateMainCheckboxEventListener"],[16,"singleRowExpandedEvent","singleRowExpandedEventListener"]]]]],["p-25af32a7",[[1,"sdds-table-toolbar",{"tableTitle":[513,"table-title"],"enableFiltering":[516,"enable-filtering"],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"tableId":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"]]]]],["p-07c7c2e7",[[6,"sdds-toggle",{"checked":[516],"required":[4],"ariaLabelledby":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"size":[1],"name":[1],"label":[1],"headline":[1],"disabled":[4],"toggleId":[1,"toggle-id"],"toggle":[64]}]]],["p-e662e68d",[[1,"sdds-tooltip",{"text":[1],"selector":[1],"referenceEl":[16],"mouseOverTooltip":[4,"mouse-over-tooltip"],"show":[1028],"placement":[1],"popperInstance":[32],"target":[32]}]]],["p-e5e10d8f",[[4,"sdds-link",{"href":[1],"target":[1],"disabled":[4],"underline":[4],"rel":[1]}]]],["p-77a4950d",[[1,"sdds-body-cell",{"cellValue":[520,"cell-value"],"cellKey":[520,"cell-key"],"disablePadding":[516,"disable-padding"],"textAlignState":[32],"activeSorting":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"tableId":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"],[16,"headCellHoverEvent","headCellHoverEventListener"],[16,"textAlignEvent","textAlignEventListener"]]],[1,"sdds-table-body-row",{"enableMultiselect":[32],"bodyCheckBoxStatus":[32],"mainCheckBoxStatus":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"modeVariant":[32],"tableId":[32]},[[16,"tablePropsChangedEvent","tablePropsChangedEventListener"],[16,"mainCheckboxSelectedEvent","headCheckboxListener"],[16,"updateBodyCheckboxesEvent","updateBodyCheckboxesEventListener"]]]]],["p-fa3dbeec",[[1,"sdds-dropdown",{"modeVariant":[1,"mode-variant"],"placeholder":[1],"defaultOption":[1,"default-option"],"selectedOption":[1,"selected-option"],"disabled":[4],"type":[1],"size":[1],"inline":[4],"labelPosition":[1,"label-position"],"label":[1],"state":[1],"helper":[1],"openDirection":[1,"open-direction"],"optionValues":[32],"optionLabels":[32],"open":[32],"node":[32],"selectedLabel":[32],"selectedValue":[32],"selectedValuesArray":[32],"selectedLabelsArray":[32],"dropdownUniqueClass":[32],"openUpwards":[32],"dropdownMenuHeight":[32],"dropdownMenuSelector":[32],"listItemIndex":[32],"listItemArray":[32],"resetOption":[64]},[[4,"click","handleDocClick"],[0,"keydown","keyListener"],[0,"selectOption","selectOptionHandler"]]],[1,"sdds-dropdown-option",{"selected":[4],"disabled":[4],"value":[513],"innerValue":[32]},[[1,"mouseover","changeFocusHandler"],[1,"mouseout","removeFocusHandler"],[0,"keydown","onKeyDown"]]]]],["p-fc96cf21",[[1,"sdds-icon",{"name":[513],"size":[513],"icons_object":[32],"arrayOfIcons":[32]}]]]]'),e)));
 //# sourceMappingURL=tegel.esm.js.map

package/dist/types/components/toast/sdds-toast.d.ts

@@ -11,7 +11,7 @@ export declare class SddsToast {
   type: 'information' | 'error' | 'warning' | 'success';
   /** Hides the toast. */
   hidden: boolean;
-  /** ARIA toastRole for the toast. */
+  /** ARIA role for the toast. */
   toastRole: 'alert' | 'log' | 'status';
   host: HostElement;
   hasSubheader: boolean;

package/dist/types/components.d.ts

@@ -954,7 +954,7 @@ export namespace Components {
          */
         "toastId": string;
         /**
-          * ARIA toastRole for the toast.
+          * ARIA role for the toast.
          */
         "toastRole": 'alert' | 'log' | 'status';
         /**
@@ -2468,7 +2468,7 @@ declare namespace LocalJSX {
          */
         "toastId"?: string;
         /**
-          * ARIA toastRole for the toast.
+          * ARIA role for the toast.
          */
         "toastRole"?: 'alert' | 'log' | 'status';
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "Tegel - Scania's Digital Design System",
   "keywords": [
     "tegel",
@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.1",
-    "@stencil/sass": "^2.0.3",
+    "@stencil/sass": "^2.0.1",
     "@storybook/addon-a11y": "^6.5.14",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",

package/dist/tegel/p-46013562.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sddsToastCss","SddsToast","this","getIconName","type","handleClose","sddsCloseEvent","sddsClose","emit","toastId","defaultPrevented","hidden","getHeaderClasses","hasSubheader","hasLink","crypto","randomUUID","async","connectedCallback","children","Array","from","host","some","childElement","slot","render","h","Host","role","toastRole","getAttribute","class","name","size","header","onClick"],"sources":["./src/components/toast/sdds-toast.scss?tag=sdds-toast&encapsulation=shadow","./src/components/toast/sdds-toast.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/z-index';\n\n:host(.hide) {\n  display: none;\n  visibility: hidden;\n}\n\n:host {\n  z-index: z(toast);\n\n  .toast-wrapper {\n    display: flex;\n    width: calc(352px - 4px);\n    background-color: var(--sdds-toast-background-color);\n    border-radius: 4px;\n\n    &.information {\n      border-left: 4px solid var(--sdds-information);\n\n      sdds-icon {\n        color: var(--sdds-information);\n      }\n    }\n\n    &.success {\n      border-left: 4px solid var(--sdds-positive);\n\n      sdds-icon {\n        color: var(--sdds-positive);\n      }\n    }\n\n    &.error {\n      border-left: 4px solid var(--sdds-negative);\n\n      sdds-icon {\n        color: var(--sdds-negative);\n      }\n    }\n\n    &.warning {\n      border-left: 4px solid var(--sdds-warning);\n\n      sdds-icon {\n        color: var(--sdds-warning);\n      }\n    }\n\n    button.toast-close {\n      height: 20px;\n      width: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 14px 14px 0 0;\n      border: none;\n      background: transparent;\n\n      &:hover {\n        cursor: pointer;\n      }\n\n      &:focus {\n        @include sdds-focus-state;\n      }\n\n      sdds-icon {\n        color: var(--sdds-toast-dissmiss-color);\n        padding: 0;\n      }\n    }\n  }\n\n  sdds-icon {\n    padding: 14px 0 0 12px;\n  }\n\n  .toast-content {\n    padding: 16px 0 16px 10px;\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n\n    .toast-header {\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n      color: var(--sdds-toast-headline-color);\n\n      &.no-subheader {\n        margin-bottom: 4px;\n      }\n\n      &.only-header {\n        margin-bottom: 0;\n      }\n    }\n\n    .toast-subheader {\n      slot::slotted(*) {\n        margin-top: 4px;\n        color: var(--sdds-toast-subheadline-color);\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        padding-bottom: 16px;\n        max-width: 252px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      &.no-link {\n        slot::slotted(*) {\n          padding-bottom: 0;\n        }\n      }\n    }\n  }\n\n  slot[name='toast-link']::slotted(*) {\n    color: var(--sdds-toast-link-color);\n  }\n\n  .sdds-mode-variant-primary {\n    --sdds-toast-background: var(--sdds-toast-background-primary);\n  }\n\n  .sdds-mode-variant-secondary {\n    --sdds-toast-background: var(--sdds-toast-background-secondary);\n  }\n}\n","import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toast',\n  styleUrl: 'sdds-toast.scss',\n  shadow: true,\n})\nexport class SddsToast {\n  /** ID for the toast. Randomly generated if not specified. */\n  @Prop() toastId: string = crypto.randomUUID();\n\n  /** Header text for the component. */\n  @Prop() header: string;\n\n  /** Subheader text for the component. */\n  @Prop() subheader: string;\n\n  /** Type of toast. */\n  @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n  /** Hides the toast. */\n  @Prop() hidden: boolean = false;\n\n  /** ARIA toastRole for the toast. */\n  @Prop() toastRole: 'alert' | 'log' | 'status' = 'alert';\n\n  @Element() host: HostElement;\n\n  @State() hasSubheader: boolean;\n\n  @State() hasLink: boolean;\n\n  /** Hides the toast. */\n  @Method()\n  async hideToast() {\n    this.hidden = true;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Shows the toast. */\n  @Method()\n  async showToast() {\n    this.hidden = false;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Sends unique toast identifier component is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    toastId: string;\n  }>;\n\n  getIconName = () => {\n    switch (this.type) {\n      case 'information':\n        return 'info';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'success':\n        return 'tick';\n      default:\n        return 'info';\n    }\n  };\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      toastId: this.toastId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  connectedCallback() {\n    const children = Array.from(this.host.children);\n    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n  }\n\n  getHeaderClasses = () => {\n    if (!this.hasSubheader && !this.hasLink) {\n      return 'only-header';\n    }\n    if (!this.hasSubheader) {\n      return 'no-subheader';\n    }\n    return '';\n  };\n\n  render() {\n    return (\n      <Host\n        role={this.toastRole}\n        aria-describedby={this.host.getAttribute('aria-describedby')}\n        class={`${this.hidden ? 'hide' : 'show'}`}\n      >\n        <div\n          class={`\n            toast-wrapper\n            ${this.type}\n            `}\n        >\n          <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n          <div class={`toast-content`}>\n            <div\n              class={`toast-header\n              ${this.getHeaderClasses()}\n              `}\n            >\n              {this.header}\n            </div>\n            <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n              <slot name=\"toast-subheader\"></slot>\n            </div>\n            <slot name=\"toast-link\"></slot>\n          </div>\n          <button\n            onClick={() => {\n              this.handleClose();\n            }}\n            class={`toast-close`}\n          >\n            <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAe,wpE,MCQRC,EAAS,M,8DAsDpBC,KAAAC,YAAc,KACZ,OAAQD,KAAKE,MACX,IAAK,cACH,MAAO,OACT,IAAK,QACH,MAAO,QACT,IAAK,UACH,MAAO,UACT,IAAK,UACH,MAAO,OACT,QACE,MAAO,O,EAIbF,KAAAG,YAAc,KACZ,MAAMC,EAAiBJ,KAAKK,UAAUC,KAAK,CACzCC,QAASP,KAAKO,UAEhB,IAAKH,EAAeI,iBAAkB,CACpCR,KAAKS,OAAS,I,GAUlBT,KAAAU,iBAAmB,KACjB,IAAKV,KAAKW,eAAiBX,KAAKY,QAAS,CACvC,MAAO,a,CAET,IAAKZ,KAAKW,aAAc,CACtB,MAAO,c,CAET,MAAO,EAAE,E,aAzFeE,OAAOC,a,yDAS+B,c,YAGtC,M,eAGsB,Q,mDAUhDC,kBACEf,KAAKS,OAAS,KACd,MAAO,CACLF,QAASP,KAAKO,Q,CAMlBQ,kBACEf,KAAKS,OAAS,MACd,MAAO,CACLF,QAASP,KAAKO,Q,CAuClBS,oBACE,MAAMC,EAAWC,MAAMC,KAAKnB,KAAKoB,KAAKH,UACtCjB,KAAKW,aAAeM,EAASI,MAAMC,GAAiBA,EAAaC,OAAS,oBAC1EvB,KAAKY,QAAUK,EAASI,MAAMC,GAAiBA,EAAaC,OAAS,c,CAavEC,SACE,OACEC,EAACC,EAAI,CACHC,KAAM3B,KAAK4B,UAAS,mBACF5B,KAAKoB,KAAKS,aAAa,oBACzCC,MAAO,GAAG9B,KAAKS,OAAS,OAAS,UAEjCgB,EAAA,OACEK,MAAO,4CAEH9B,KAAKE,sBAGTuB,EAAA,aAAWM,KAAM/B,KAAKC,cAAe+B,KAAK,SAC1CP,EAAA,OAAKK,MAAO,iBACVL,EAAA,OACEK,MAAO,+BACL9B,KAAKU,sCAGNV,KAAKiC,QAERR,EAAA,OAAKK,MAAO,mBAAmB9B,KAAKY,QAAU,GAAK,aACjDa,EAAA,QAAMM,KAAK,qBAEbN,EAAA,QAAMM,KAAK,gBAEbN,EAAA,UACES,QAAS,KACPlC,KAAKG,aAAa,EAEpB2B,MAAO,eAEPL,EAAA,aAAWM,KAAK,QAAQC,KAAK,W"}