@scania/tegel 0.0.34 → 0.0.52

package/dist/cjs/sdds-toggle.cjs.entry.js

@@ -2,21 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aff9d4d5.js');
+const index = require('./index-5ad19933.js');
 
 const sddsToggleCss = ".sdds-toggle-webcomponent.sc-sdds-toggle .toggle-headline.sc-sdds-toggle{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-toggle-headline);margin-bottom:12px}.sdds-toggle-webcomponent.sc-sdds-toggle .toggle-headline.disabled.sc-sdds-toggle{color:var(--sdds-toggle-headline-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle{margin:0;width:44px;height:24px;position:relative;display:inline-block;vertical-align:middle}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::after,.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::before{content:\"\";position:absolute;box-sizing:border-box;transition:all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::before{width:44px;height:24px;border-radius:16px;background-color:var(--sdds-toggle-off-slider);left:0}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::after{width:16px;height:16px;background-color:var(--sdds-toggle-switch);border-radius:50%;left:4px;top:4px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:focus{outline:none}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:focus::before{background-color:var(--sdds-toggle-off-slider-focus);border:1px solid var(--sdds-toggle-off-border-focus)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:checked::before{background-color:var(--sdds-toggle-on-slider);border:1px solid var(--sdds-toggle-on-border-focus)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:checked::after{left:24px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled::before{background-color:var(--sdds-toggle-slider-disabled);border:1px solid var(--sdds-toggle-slider-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled::after{background-color:var(--sdds-toggle-switch-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled:checked::before{background-color:var(--sdds-toggle-on-slider-disabled);border:1px solid var(--sdds-toggle-on-slider-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled:checked::after{background-color:var(--sdds-toggle-switch-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle{width:28px;height:16px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle::before{width:28px;height:16px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle::after{width:8px;height:8px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:checked::before{background-color:var(--sdds-toggle-on-slider)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:checked::after{left:16px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:disabled::before{background-color:var(--sdds-toggle-slider-disabled);border:1px solid var(--sdds-toggle-slider-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:disabled::after{background-color:var(--sdds-toggle-switch-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle label.sc-sdds-toggle{display:inline-block;vertical-align:middle;font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls);color:var(--sdds-toggle-label-color);padding-left:8px}.sdds-toggle-webcomponent.sc-sdds-toggle label.disabled.sc-sdds-toggle{color:var(--sdds-toggle-label-color-disabled)}";
 
 const SddsToggle = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.sddsToggleChangeEvent = index.createEvent(this, "sddsToggleChangeEvent", 7);
+    this.sddsToggle = index.createEvent(this, "sddsToggle", 6);
+    this.handleToggle = () => {
+      this.checked = !this.checked;
+      this.sddsToggle.emit({
+        toggleId: this.toggleId,
+        checked: this.checked,
+      });
+    };
     this.checked = false;
     this.required = false;
-    this.ariaLabelledby = undefined;
-    this.ariaDescribedby = undefined;
     this.size = 'lg';
     this.name = undefined;
-    this.label = undefined;
     this.headline = undefined;
     this.disabled = false;
     this.toggleId = crypto.randomUUID();
@@ -30,14 +34,9 @@ const SddsToggle = class {
     };
   }
   render() {
-    return (index.h("div", { class: "sdds-toggle-webcomponent" }, this.headline && (index.h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), index.h("input", { "aria-labelledby": this.ariaLabelledby, "aria-describedby": this.ariaDescribedby, onChange: () => {
-        this.checked = !this.checked;
-        this.sddsToggleChangeEvent.emit({
-          toggleId: this.toggleId,
-          checked: this.checked,
-        });
-      }, class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), index.h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, index.h("slot", null))));
+    return (index.h("div", { class: "sdds-toggle-webcomponent" }, this.headline && (index.h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), index.h("input", { "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), index.h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, index.h("slot", { name: "label" }))));
   }
+  get host() { return index.getElement(this); }
 };
 SddsToggle.style = sddsToggleCss;
 

package/dist/cjs/sdds-toggle.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"sdds-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,ymHAAymH;;MCQlnH,UAAU;;;;mBAEuB,KAAK;oBAGrB,KAAK;;;gBASL,IAAI;;;;oBAYJ,KAAK;oBAGN,MAAM,CAAC,UAAU,EAAE;;;EAI9C,MAAM,MAAM;IACV,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;EAcD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,QAAQ,KACZA,iBAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAO,CACxF,EACDA,sCACmB,IAAI,CAAC,cAAc,sBAClB,IAAI,CAAC,eAAe,EACtC,QAAQ,EAAE;QACR,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;UAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC,CAAC;OACJ,EACD,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,GACb,EACFA,mBAAO,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxEA,qBAAa,CACP,CACJ,EACN;GACH;;;;;;","names":["h"],"sources":["./src/components/toggle/sdds-toggle.scss?tag=sdds-toggle&encapsulation=scoped","./src/components/toggle/sdds-toggle.tsx"],"sourcesContent":[".sdds-toggle-webcomponent {\n  .toggle-headline {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    color: var(--sdds-toggle-headline);\n    margin-bottom: 12px;\n\n    &.disabled {\n      color: var(--sdds-toggle-headline-disabled);\n    }\n  }\n\n  input[type='checkbox'] {\n    margin: 0;\n    width: 44px;\n    height: 24px;\n    position: relative;\n    display: inline-block;\n    vertical-align: middle;\n\n    &::after,\n    &::before {\n      content: '';\n      position: absolute;\n      box-sizing: border-box;\n      transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);\n    }\n\n    &::before {\n      /* Slider */\n      width: 44px;\n      height: 24px;\n      border-radius: 16px;\n      background-color: var(--sdds-toggle-off-slider);\n      left: 0;\n    }\n\n    /* Switch */\n    &::after {\n      width: 16px;\n      height: 16px;\n      background-color: var(--sdds-toggle-switch);\n      border-radius: 50%;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:focus {\n      outline: none;\n\n      &::before {\n        background-color: var(--sdds-toggle-off-slider-focus);\n        border: 1px solid var(--sdds-toggle-off-border-focus);\n      }\n    }\n\n    &:checked {\n      &::before {\n        background-color: var(--sdds-toggle-on-slider);\n        border: 1px solid var(--sdds-toggle-on-border-focus);\n      }\n\n      &::after {\n        left: calc(44px - 20px);\n      }\n    }\n\n    &:disabled {\n      &::before {\n        background-color: var(--sdds-toggle-slider-disabled);\n        border: 1px solid var(--sdds-toggle-slider-disabled);\n      }\n\n      &::after {\n        background-color: var(--sdds-toggle-switch-disabled);\n      }\n    }\n\n    &:disabled:checked {\n      &::before {\n        background-color: var(--sdds-toggle-on-slider-disabled);\n        border: 1px solid var(--sdds-toggle-on-slider-disabled);\n      }\n\n      &::after {\n        background-color: var(--sdds-toggle-switch-disabled);\n      }\n    }\n\n    &.sm {\n      width: 28px;\n      height: 16px;\n\n      &::before {\n        width: 28px;\n        height: 16px;\n      }\n\n      &::after {\n        width: 8px;\n        height: 8px;\n      }\n\n      &:checked {\n        &::before {\n          background-color: var(--sdds-toggle-on-slider);\n        }\n\n        &::after {\n          left: calc(44px - 28px); // slider width - switch width - padding\n        }\n      }\n\n      &:disabled {\n        &::before {\n          background-color: var(--sdds-toggle-slider-disabled);\n          border: 1px solid var(--sdds-toggle-slider-disabled);\n        }\n\n        &::after {\n          background-color: var(--sdds-toggle-switch-disabled);\n        }\n      }\n    }\n  }\n\n  label {\n    display: inline-block;\n    vertical-align: middle;\n    font: var(--sdds-detail-01);\n    letter-spacing: var(--sdds-detail-01-ls);\n    color: var(--sdds-toggle-label-color);\n    padding-left: 8px;\n\n    &.disabled {\n      color: var(--sdds-toggle-label-color-disabled);\n    }\n  }\n}\n","import { Component, h, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-toggle',\n  styleUrl: 'sdds-toggle.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsToggle {\n  /** Sets the toggle as checked */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Make the toggle required */\n  @Prop() required: boolean = false;\n\n  /** Aria-labelledby for the toggles input element. */\n  @Prop() ariaLabelledby: string;\n\n  /** Aria-describedby for the toggles input element. */\n  @Prop() ariaDescribedby: string;\n\n  /** Size of the toggle */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Name of the toggles input element */\n  @Prop() name: string;\n\n  /** Label for the toggle */\n  @Prop() label: string;\n\n  /** Headline for the toggle */\n  @Prop() headline: string;\n\n  /** Sets the toggle in a disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** ID of the toggles input element, if not specifed it's randomly generated */\n  @Prop() toggleId: string = crypto.randomUUID();\n\n  /** Toggles the toggle. */\n  @Method()\n  async toggle() {\n    this.checked = !this.checked;\n    return {\n      toggleId: this.toggleId,\n      checked: this.checked,\n    };\n  }\n\n  /** Sends unique toggle identifier and status when it is toggled. */\n  @Event({\n    eventName: 'sddsToggleChangeEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsToggleChangeEvent: EventEmitter<{\n    toggleId: string;\n    checked: boolean;\n  }>;\n\n  render() {\n    return (\n      <div class=\"sdds-toggle-webcomponent\">\n        {this.headline && (\n          <div class={`toggle-headline ${this.disabled ? 'disabled' : ''}`}>{this.headline}</div>\n        )}\n        <input\n          aria-labelledby={this.ariaLabelledby}\n          aria-describedby={this.ariaDescribedby}\n          onChange={() => {\n            this.checked = !this.checked;\n            this.sddsToggleChangeEvent.emit({\n              toggleId: this.toggleId,\n              checked: this.checked,\n            });\n          }}\n          class={`${this.size}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          required={this.required}\n          type=\"checkbox\"\n          name={this.name}\n          id={this.toggleId}\n          role=\"switch\"\n        />\n        <label class={`${this.disabled ? 'disabled' : ''}`} htmlFor={this.toggleId}>\n          <slot></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,ymHAAymH;;MCSlnH,UAAU;;;;IA8CrB,iBAAY,GAAG;MACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;KACJ,CAAC;mBAlD0C,KAAK;oBAGrB,KAAK;gBAGL,IAAI;;;oBASJ,KAAK;oBAGN,MAAM,CAAC,UAAU,EAAE;;;EAM9C,MAAM,MAAM;IACV,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;EAsBD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,QAAQ,KACZA,iBAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAO,CACxF,EACDA,uCACoB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,qBAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,kBAC5C,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EACnC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,GACb,EACFA,mBAAO,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxEA,kBAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,EACN;GACH;;;;;;;","names":["h"],"sources":["./src/components/toggle/sdds-toggle.scss?tag=sdds-toggle&encapsulation=scoped","./src/components/toggle/sdds-toggle.tsx"],"sourcesContent":[".sdds-toggle-webcomponent {\n  .toggle-headline {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    color: var(--sdds-toggle-headline);\n    margin-bottom: 12px;\n\n    &.disabled {\n      color: var(--sdds-toggle-headline-disabled);\n    }\n  }\n\n  input[type='checkbox'] {\n    margin: 0;\n    width: 44px;\n    height: 24px;\n    position: relative;\n    display: inline-block;\n    vertical-align: middle;\n\n    &::after,\n    &::before {\n      content: '';\n      position: absolute;\n      box-sizing: border-box;\n      transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);\n    }\n\n    &::before {\n      /* Slider */\n      width: 44px;\n      height: 24px;\n      border-radius: 16px;\n      background-color: var(--sdds-toggle-off-slider);\n      left: 0;\n    }\n\n    /* Switch */\n    &::after {\n      width: 16px;\n      height: 16px;\n      background-color: var(--sdds-toggle-switch);\n      border-radius: 50%;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:focus {\n      outline: none;\n\n      &::before {\n        background-color: var(--sdds-toggle-off-slider-focus);\n        border: 1px solid var(--sdds-toggle-off-border-focus);\n      }\n    }\n\n    &:checked {\n      &::before {\n        background-color: var(--sdds-toggle-on-slider);\n        border: 1px solid var(--sdds-toggle-on-border-focus);\n      }\n\n      &::after {\n        left: calc(44px - 20px);\n      }\n    }\n\n    &:disabled {\n      &::before {\n        background-color: var(--sdds-toggle-slider-disabled);\n        border: 1px solid var(--sdds-toggle-slider-disabled);\n      }\n\n      &::after {\n        background-color: var(--sdds-toggle-switch-disabled);\n      }\n    }\n\n    &:disabled:checked {\n      &::before {\n        background-color: var(--sdds-toggle-on-slider-disabled);\n        border: 1px solid var(--sdds-toggle-on-slider-disabled);\n      }\n\n      &::after {\n        background-color: var(--sdds-toggle-switch-disabled);\n      }\n    }\n\n    &.sm {\n      width: 28px;\n      height: 16px;\n\n      &::before {\n        width: 28px;\n        height: 16px;\n      }\n\n      &::after {\n        width: 8px;\n        height: 8px;\n      }\n\n      &:checked {\n        &::before {\n          background-color: var(--sdds-toggle-on-slider);\n        }\n\n        &::after {\n          left: calc(44px - 28px); // slider width - switch width - padding\n        }\n      }\n\n      &:disabled {\n        &::before {\n          background-color: var(--sdds-toggle-slider-disabled);\n          border: 1px solid var(--sdds-toggle-slider-disabled);\n        }\n\n        &::after {\n          background-color: var(--sdds-toggle-switch-disabled);\n        }\n      }\n    }\n  }\n\n  label {\n    display: inline-block;\n    vertical-align: middle;\n    font: var(--sdds-detail-01);\n    letter-spacing: var(--sdds-detail-01-ls);\n    color: var(--sdds-toggle-label-color);\n    padding-left: 8px;\n\n    &.disabled {\n      color: var(--sdds-toggle-label-color-disabled);\n    }\n  }\n}\n","import { Component, h, Prop, Event, Element, EventEmitter, Method } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toggle',\n  styleUrl: 'sdds-toggle.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsToggle {\n  /** Sets the toggle as checked */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Make the toggle required */\n  @Prop() required: boolean = false;\n\n  /** Size of the toggle */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Name of the toggles input element */\n  @Prop() name: string;\n\n  /** Headline for the toggle */\n  @Prop() headline: string;\n\n  /** Sets the toggle in a disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** ID of the toggles input element, if not specifed it's randomly generated */\n  @Prop() toggleId: string = crypto.randomUUID();\n\n  @Element() host: HostElement;\n\n  /** Toggles the toggle. */\n  @Method()\n  async toggle() {\n    this.checked = !this.checked;\n    return {\n      toggleId: this.toggleId,\n      checked: this.checked,\n    };\n  }\n\n  /** Sends unique toggle identifier and status when it is toggled. */\n  @Event({\n    eventName: 'sddsToggle',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsToggle: EventEmitter<{\n    toggleId: string;\n    checked: boolean;\n  }>;\n\n  handleToggle = () => {\n    this.checked = !this.checked;\n    this.sddsToggle.emit({\n      toggleId: this.toggleId,\n      checked: this.checked,\n    });\n  };\n\n  render() {\n    return (\n      <div class=\"sdds-toggle-webcomponent\">\n        {this.headline && (\n          <div class={`toggle-headline ${this.disabled ? 'disabled' : ''}`}>{this.headline}</div>\n        )}\n        <input\n          aria-describedby={this.host.getAttribute('aria-describedby')}\n          aria-labelledby={this.host.getAttribute('aria-labelledby')}\n          aria-checked={this.checked}\n          aria-required={this.required}\n          onChange={() => this.handleToggle()}\n          class={`${this.size}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          required={this.required}\n          type=\"checkbox\"\n          name={this.name}\n          id={this.toggleId}\n          role=\"switch\"\n        />\n        <label class={`${this.disabled ? 'disabled' : ''}`} htmlFor={this.toggleId}>\n          <slot name=\"label\"></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-tooltip.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aff9d4d5.js');
+const index = require('./index-5ad19933.js');
 const popper = require('./popper-11d5f714.js');
 
 const tooltipCss = ":root,.sdds-mode-light{--sdds-tooltip-background:var(--sdds-grey-800);--sdds-tooltip-color:var(--sdds-white)}.sdds-mode-dark{--sdds-tooltip-background:var(--sdds-grey-200);--sdds-tooltip-color:var(--sdds-grey-958)}.sdds-tooltip{box-sizing:border-box;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-tooltip-color);background-color:var(--sdds-tooltip-background);border-radius:4px;padding:8px;word-wrap:break-word;max-width:192px;z-index:800;opacity:0;visibility:hidden;transition:opacity 200ms ease-in, visibility 200ms ease-in}.sdds-tooltip *{box-sizing:border-box}.sdds-tooltip.sdds-tooltip-top-left{border-radius:0 4px 4px}.sdds-tooltip.sdds-tooltip-top-right{border-radius:4px 0 4px 4px}.sdds-tooltip.sdds-tooltip-bottom-right{border-radius:4px 4px 0}.sdds-tooltip.sdds-tooltip-bottom-left{border-radius:4px 4px 4px 0}.sdds-tooltip-show{opacity:1;visibility:visible}";

package/dist/cjs/sdds-tooltip.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"sdds-tooltip.entry.cjs.js","mappings":"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","names":["createPopper","h"],"sources":["./src/components/tooltip/tooltip.scss?tag=sdds-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './tooltip-theme-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-tooltip {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-tooltip-color);\n  background-color: var(--sdds-tooltip-background);\n  border-radius: 4px;\n  padding: 8px;\n  word-wrap: break-word;\n  max-width: 192px;\n  z-index: z(tooltip);\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 200ms ease-in, visibility 200ms ease-in;\n\n  &.sdds-tooltip-top-left {\n    border-radius: 0 4px 4px;\n  }\n\n  &.sdds-tooltip-top-right {\n    border-radius: 4px 0 4px 4px;\n  }\n\n  &.sdds-tooltip-bottom-right {\n    border-radius: 4px 4px 0;\n  }\n\n  &.sdds-tooltip-bottom-left {\n    border-radius: 4px 4px 4px 0;\n  }\n}\n\n.sdds-tooltip-show {\n  opacity: 1;\n  visibility: visible;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /** In case tooltip contains only text, no HTML, text can be passed by this prop */\n  @Prop() text: string = '';\n\n  /** The CSS-selector for an element that will trigger the tooltip */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the tooltip (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button. */\n  @Prop() mouseOverTooltip: boolean = false;\n\n  /** Prop in control of showing and hiding prop */\n  @Prop({ mutable: true }) show: boolean = false;\n\n  /** Placement of tooltip. */\n  @Prop() placement: Placement = 'bottom';\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  border: string;\n\n  offsetSkidding: number = 0;\n\n  offsetDistance: number = 8;\n\n  tooltip!: HTMLInputElement;\n\n  componentDidLoad() {\n    this.target = this.referenceEl ?? document.querySelector(this.selector);\n\n    const thisValue = this;\n    this.popperInstance = createPopper(this.target, this.tooltip, {\n      placement: thisValue.placement,\n      modifiers: [\n        {\n          name: 'positionCalc',\n          enabled: true,\n          phase: 'main',\n          fn({ state }) {\n            if (state.placement === 'bottom-start' || state.placement === 'right-start') {\n              thisValue.border = 'top-left';\n            } else if (state.placement === 'bottom-end' || state.placement === 'left-start') {\n              thisValue.border = 'top-right';\n            } else if (state.placement === 'top-end' || state.placement === 'left-end') {\n              thisValue.border = 'bottom-right';\n            } else if (state.placement === 'top-start' || state.placement === 'right-end') {\n              thisValue.border = 'bottom-left';\n            } else if (state.placement === 'bottom' || state.placement === 'top') {\n              thisValue.border = 'default';\n            }\n          },\n        },\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n      ],\n    });\n\n    const showTooltip = () => {\n      this.show = true;\n    };\n\n    const hideTooltip = () => {\n      this.show = false;\n    };\n\n    // For tabbing over element\n    this.target.addEventListener('focusin', () => {\n      showTooltip();\n    });\n\n    this.target.addEventListener('focusout', () => {\n      hideTooltip();\n    });\n\n    // For hovering over element with selector\n    this.target.addEventListener('mouseenter', () => {\n      showTooltip();\n    });\n\n    this.target.addEventListener('mouseleave', () => {\n      hideTooltip();\n    });\n\n    // For hovering over tooltip itself:\n    if (this.mouseOverTooltip === true) {\n      this.tooltip.addEventListener('mouseenter', () => {\n        showTooltip();\n      });\n\n      this.tooltip.addEventListener('mouseleave', () => {\n        hideTooltip();\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  /* Slot on line 118 is added to support adding HTML elements to component */\n  render() {\n    return (\n      <span\n        ref={(el) => {\n          this.tooltip = el as HTMLInputElement;\n        }}\n        class={`sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-tooltip-show' : ''}`}\n      >\n        {this.text}\n        <slot />\n      </span>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-tooltip.entry.cjs.js","mappings":"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","names":["createPopper","h"],"sources":["./src/components/tooltip/tooltip.scss?tag=sdds-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './tooltip-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-tooltip {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-tooltip-color);\n  background-color: var(--sdds-tooltip-background);\n  border-radius: 4px;\n  padding: 8px;\n  word-wrap: break-word;\n  max-width: 192px;\n  z-index: z(tooltip);\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 200ms ease-in, visibility 200ms ease-in;\n\n  &.sdds-tooltip-top-left {\n    border-radius: 0 4px 4px;\n  }\n\n  &.sdds-tooltip-top-right {\n    border-radius: 4px 0 4px 4px;\n  }\n\n  &.sdds-tooltip-bottom-right {\n    border-radius: 4px 4px 0;\n  }\n\n  &.sdds-tooltip-bottom-left {\n    border-radius: 4px 4px 4px 0;\n  }\n}\n\n.sdds-tooltip-show {\n  opacity: 1;\n  visibility: visible;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /** In case tooltip contains only text, no HTML, text can be passed by this prop */\n  @Prop() text: string = '';\n\n  /** The CSS-selector for an element that will trigger the tooltip */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the tooltip (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button. */\n  @Prop() mouseOverTooltip: boolean = false;\n\n  /** Prop in control of showing and hiding prop */\n  @Prop({ mutable: true }) show: boolean = false;\n\n  /** Placement of tooltip. */\n  @Prop() placement: Placement = 'bottom';\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  border: string;\n\n  offsetSkidding: number = 0;\n\n  offsetDistance: number = 8;\n\n  tooltip!: HTMLInputElement;\n\n  componentDidLoad() {\n    this.target = this.referenceEl ?? document.querySelector(this.selector);\n\n    const thisValue = this;\n    this.popperInstance = createPopper(this.target, this.tooltip, {\n      placement: thisValue.placement,\n      modifiers: [\n        {\n          name: 'positionCalc',\n          enabled: true,\n          phase: 'main',\n          fn({ state }) {\n            if (state.placement === 'bottom-start' || state.placement === 'right-start') {\n              thisValue.border = 'top-left';\n            } else if (state.placement === 'bottom-end' || state.placement === 'left-start') {\n              thisValue.border = 'top-right';\n            } else if (state.placement === 'top-end' || state.placement === 'left-end') {\n              thisValue.border = 'bottom-right';\n            } else if (state.placement === 'top-start' || state.placement === 'right-end') {\n              thisValue.border = 'bottom-left';\n            } else if (state.placement === 'bottom' || state.placement === 'top') {\n              thisValue.border = 'default';\n            }\n          },\n        },\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n      ],\n    });\n\n    const showTooltip = () => {\n      this.show = true;\n    };\n\n    const hideTooltip = () => {\n      this.show = false;\n    };\n\n    // For tabbing over element\n    this.target.addEventListener('focusin', () => {\n      showTooltip();\n    });\n\n    this.target.addEventListener('focusout', () => {\n      hideTooltip();\n    });\n\n    // For hovering over element with selector\n    this.target.addEventListener('mouseenter', () => {\n      showTooltip();\n    });\n\n    this.target.addEventListener('mouseleave', () => {\n      hideTooltip();\n    });\n\n    // For hovering over tooltip itself:\n    if (this.mouseOverTooltip === true) {\n      this.tooltip.addEventListener('mouseenter', () => {\n        showTooltip();\n      });\n\n      this.tooltip.addEventListener('mouseleave', () => {\n        hideTooltip();\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  /* Slot on line 118 is added to support adding HTML elements to component */\n  render() {\n    return (\n      <span\n        ref={(el) => {\n          this.tooltip = el as HTMLInputElement;\n        }}\n        class={`sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-tooltip-show' : ''}`}\n      >\n        {this.text}\n        <slot />\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/tegel.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aff9d4d5.js');
+const index = require('./index-5ad19933.js');
 
 /*
  Stencil Client Patch Browser v3.0.1 | MIT Licensed | https://stenciljs.com
@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy(JSON.parse("[[\"sdds-banner.cjs\",[[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]}]]],[\"sdds-dropdown-filter.cjs\",[[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\"]]]]],[\"sdds-table-body.cjs\",[[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\"]]]]],[\"sdds-accordion-item.cjs\",[[1,\"sdds-accordion-item\",{\"header\":[1],\"expandIconPosition\":[1,\"expand-icon-position\"],\"disabled\":[4],\"expanded\":[4],\"paddingReset\":[4,\"padding-reset\"]}]]],[\"sdds-datetime.cjs\",[[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\"]]]]],[\"sdds-message.cjs\",[[1,\"sdds-message\",{\"header\":[1],\"modeVariant\":[1,\"mode-variant\"],\"type\":[1],\"noIcon\":[4,\"no-icon\"],\"minimal\":[4]}]]],[\"sdds-modal.cjs\",[[1,\"sdds-modal\",{\"prevent\":[4],\"size\":[1],\"actions\":[1],\"open\":[4],\"openModal\":[64]}]]],[\"sdds-slider.cjs\",[[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\"]]]]],[\"sdds-textarea.cjs\",[[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]}]]],[\"sdds-textfield.cjs\",[[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]}]]],[\"sdds-toast.cjs\",[[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]}]]],[\"sdds-accordion.cjs\",[[1,\"sdds-accordion\",{\"divider\":[4],\"modeVariant\":[1,\"mode-variant\"]}]]],[\"sdds-badges.cjs\",[[1,\"sdds-badges\",{\"value\":[1],\"hidden\":[4],\"isSmall\":[4,\"is-small\"],\"size\":[1],\"shape\":[32],\"text\":[32]}]]],[\"sdds-block.cjs\",[[1,\"sdds-block\",{\"modeVariant\":[1,\"mode-variant\"]}]]],[\"sdds-breadcrumb.cjs\",[[1,\"sdds-breadcrumb\"]]],[\"sdds-breadcrumb-item.cjs\",[[1,\"sdds-breadcrumb-item\",{\"current\":[4],\"href\":[1],\"disabled\":[4]}]]],[\"sdds-button.cjs\",[[1,\"sdds-button\",{\"text\":[1],\"type\":[1],\"size\":[1],\"disabled\":[4],\"fullbleed\":[4],\"modeVariant\":[1,\"mode-variant\"],\"onlyIcon\":[32]}]]],[\"sdds-card.cjs\",[[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]}]]],[\"sdds-checkbox.cjs\",[[6,\"sdds-checkbox\",{\"name\":[1],\"checkboxId\":[1,\"checkbox-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"value\":[1],\"toggleCheckbox\":[64]}]]],[\"sdds-header-cell.cjs\",[[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\"]]]]],[\"sdds-inline-tab.cjs\",[[1,\"sdds-inline-tab\",{\"label\":[1],\"disabled\":[4],\"default\":[4]}]]],[\"sdds-inline-tabs.cjs\",[[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]}]]],[\"sdds-inline-tabs-fullbleed.cjs\",[[1,\"sdds-inline-tabs-fullbleed\",{\"modeVariant\":[1,\"mode-variant\"],\"tabs\":[32],\"showLeftScroll\":[32],\"showRightScroll\":[32]}]]],[\"sdds-navigation-tabs.cjs\",[[1,\"sdds-navigation-tabs\",{\"modeVariant\":[1,\"mode-variant\"],\"tabs\":[32],\"showLeftScroll\":[32],\"showRightScroll\":[32]}]]],[\"sdds-popover-canvas.cjs\",[[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\"]]]]],[\"sdds-popover-menu.cjs\",[[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\"]]]]],[\"sdds-radio-button.cjs\",[[6,\"sdds-radio-button\",{\"name\":[1],\"value\":[1],\"radioId\":[1,\"radio-id\"],\"checked\":[516],\"required\":[4],\"disabled\":[4]}]]],[\"sdds-spinner.cjs\",[[0,\"sdds-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"sdds-table.cjs\",[[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\"]}]]],[\"sdds-table-body-row-expandable.cjs\",[[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\"]]]]],[\"sdds-table-footer.cjs\",[[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\"]]]]],[\"sdds-table-header.cjs\",[[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\"]]]]],[\"sdds-table-toolbar.cjs\",[[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\"]]]]],[\"sdds-toggle.cjs\",[[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]}]]],[\"sdds-tooltip.cjs\",[[1,\"sdds-tooltip\",{\"text\":[1],\"selector\":[1],\"referenceEl\":[16],\"mouseOverTooltip\":[4,\"mouse-over-tooltip\"],\"show\":[1028],\"placement\":[1],\"popperInstance\":[32],\"target\":[32]}]]],[\"sdds-link.cjs\",[[4,\"sdds-link\",{\"href\":[1],\"target\":[1],\"disabled\":[4],\"underline\":[4],\"rel\":[1]}]]],[\"sdds-body-cell_2.cjs\",[[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\"]]]]],[\"sdds-dropdown_2.cjs\",[[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\"]]]]],[\"sdds-icon.cjs\",[[1,\"sdds-icon\",{\"name\":[513],\"size\":[513],\"icons_object\":[32],\"arrayOfIcons\":[32]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"sdds-dropdown-filter.cjs\",[[1,\"sdds-dropdown-filter\",{\"modeVariant\":[1,\"mode-variant\"],\"placeholder\":[1],\"label\":[1],\"defaultOption\":[1,\"default-option\"],\"selectedOption\":[1,\"selected-option\"],\"disabled\":[4],\"size\":[1],\"inline\":[4],\"labelPosition\":[1,\"label-position\"],\"state\":[4],\"helper\":[1],\"data\":[1],\"dataOptions\":[32],\"filteredContent\":[32],\"searchTerm\":[32],\"selectedOptionState\":[32],\"dropdownRef\":[32],\"selectedLabel\":[32],\"selectedValue\":[32],\"resetOption\":[64]},[[0,\"inputSearch\",\"updateOptionsContent\"],[0,\"internalSddsSelect\",\"selectOptionHandler\"]]]]],[\"sdds-table-body.cjs\",[[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,\"internalSddsTablePropChange\",\"internalSddsPropChangeListener\"],[16,\"sddsSortChange\",\"updateOptionsContent\"],[16,\"internalSddsMainCheckboxChange\",\"headCheckboxListener\"],[16,\"internalSddsRowChange\",\"bodyCheckboxListener\"],[16,\"sddsFilter\",\"sddsFilterListener\"]]]]],[\"sdds-accordion-item.cjs\",[[1,\"sdds-accordion-item\",{\"header\":[1],\"expandIconPosition\":[1,\"expand-icon-position\"],\"disabled\":[4],\"expanded\":[4],\"paddingReset\":[4,\"padding-reset\"]}]]],[\"sdds-banner.cjs\",[[1,\"sdds-banner\",{\"icon\":[1],\"header\":[1],\"type\":[1],\"bannerId\":[1,\"banner-id\"],\"persistent\":[4],\"hidden\":[4],\"hasSubheader\":[32],\"hasLink\":[32],\"hideBanner\":[64],\"showBanner\":[64]}]]],[\"sdds-datetime.cjs\",[[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\"]]]]],[\"sdds-folder-tabs.cjs\",[[1,\"sdds-folder-tabs\",{\"modeVariant\":[1,\"mode-variant\"],\"buttonWidth\":[32],\"showLeftScroll\":[32],\"showRightScroll\":[32],\"selectedTab\":[32],\"selectedTabIndex\":[32],\"selectTab\":[64]}]]],[\"sdds-footer-link-group.cjs\",[[6,\"sdds-footer-link-group\",{\"titleText\":[1,\"title-text\"],\"open\":[32]}]]],[\"sdds-inline-tabs.cjs\",[[1,\"sdds-inline-tabs\",{\"modeVariant\":[1,\"mode-variant\"],\"showLeftScroll\":[32],\"showRightScroll\":[32],\"selectedTab\":[32],\"buttonWidth\":[32],\"selectTab\":[64]}]]],[\"sdds-message.cjs\",[[1,\"sdds-message\",{\"header\":[1],\"modeVariant\":[1,\"mode-variant\"],\"type\":[1],\"noIcon\":[4,\"no-icon\"],\"minimal\":[4]}]]],[\"sdds-modal.cjs\",[[1,\"sdds-modal\",{\"prevent\":[4],\"size\":[1],\"actions\":[1],\"selector\":[1],\"referenceEl\":[16],\"show\":[4],\"isShown\":[32],\"showModal\":[64],\"closeModal\":[64]}]]],[\"sdds-navigation-tabs.cjs\",[[1,\"sdds-navigation-tabs\",{\"modeVariant\":[1,\"mode-variant\"],\"showLeftScroll\":[32],\"showRightScroll\":[32],\"selectedTab\":[32],\"selectTab\":[64]}]]],[\"sdds-slider.cjs\",[[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],\"scrubberSize\":[1,\"scrubber-size\"],\"snap\":[4],\"sliderId\":[1,\"slider-id\"],\"reset\":[64]},[[0,\"keydown\",\"handleKeydown\"],[9,\"mouseup\",\"handleMouseUp\"],[9,\"touchend\",\"handleTouchEnd\"],[9,\"mousemove\",\"handleMouseMove\"],[9,\"touchmove\",\"handleTouchMove\"]]]]],[\"sdds-stepper-item.cjs\",[[1,\"sdds-stepper-item\",{\"labelText\":[1,\"label-text\"],\"state\":[1],\"hideLabel\":[32],\"size\":[32],\"iconSize\":[32],\"direction\":[32],\"labelPosition\":[32],\"setWidth\":[64]}]]],[\"sdds-textarea.cjs\",[[2,\"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\"],\"noMinWidth\":[4,\"no-min-width\"],\"focusInput\":[32]}]]],[\"sdds-textfield.cjs\",[[6,\"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]}]]],[\"sdds-toast.cjs\",[[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]}]]],[\"sdds-accordion.cjs\",[[1,\"sdds-accordion\",{\"modeVariant\":[1,\"mode-variant\"]}]]],[\"sdds-badges.cjs\",[[1,\"sdds-badges\",{\"value\":[1],\"hidden\":[4],\"isSmall\":[4,\"is-small\"],\"size\":[1],\"shape\":[32],\"text\":[32]}]]],[\"sdds-block.cjs\",[[1,\"sdds-block\",{\"modeVariant\":[1,\"mode-variant\"]}]]],[\"sdds-breadcrumb.cjs\",[[1,\"sdds-breadcrumb\"]]],[\"sdds-breadcrumb-link.cjs\",[[1,\"sdds-breadcrumb-link\",{\"current\":[4],\"href\":[1],\"target\":[1],\"rel\":[1],\"disabled\":[4]}]]],[\"sdds-button.cjs\",[[1,\"sdds-button\",{\"text\":[1],\"type\":[1],\"size\":[1],\"disabled\":[4],\"fullbleed\":[4],\"modeVariant\":[1,\"mode-variant\"],\"onlyIcon\":[32]}]]],[\"sdds-card.cjs\",[[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]}]]],[\"sdds-checkbox.cjs\",[[6,\"sdds-checkbox\",{\"name\":[1],\"checkboxId\":[1,\"checkbox-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"value\":[1],\"toggleCheckbox\":[64]}]]],[\"sdds-divider.cjs\",[[1,\"sdds-divider\",{\"orientation\":[1]}]]],[\"sdds-folder-tabs-button.cjs\",[[1,\"sdds-folder-tabs-button\",{\"disabled\":[4],\"selected\":[4],\"tabWidth\":[32],\"setTabWidth\":[64]}]]],[\"sdds-folder-tabs-link.cjs\",[[1,\"sdds-folder-tabs-link\",{\"disabled\":[4],\"selected\":[4],\"href\":[1],\"target\":[1],\"rel\":[1],\"tabWidth\":[32],\"setTabWidth\":[64]}]]],[\"sdds-footer.cjs\",[[1,\"sdds-footer\",{\"modeVariant\":[1,\"mode-variant\"],\"hasTopPart\":[32]}]]],[\"sdds-footer-link.cjs\",[[6,\"sdds-footer-link\",{\"href\":[1],\"target\":[1],\"rel\":[1]}]]],[\"sdds-header-cell.cjs\",[[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,\"internalSddsPropChange\",\"internalSddsPropChangeListener\"],[16,\"internalSddsSortingChange\",\"internalSddsSortingChangeListener\"],[16,\"sddsSortChange\",\"updateOptionsContent\"]]]]],[\"sdds-inline-tabs-button.cjs\",[[1,\"sdds-inline-tabs-button\",{\"disabled\":[4],\"selected\":[4]}]]],[\"sdds-inline-tabs-link.cjs\",[[1,\"sdds-inline-tabs-link\",{\"disabled\":[4],\"selected\":[4],\"href\":[1],\"target\":[1],\"rel\":[1]}]]],[\"sdds-link.cjs\",[[4,\"sdds-link\",{\"href\":[1],\"target\":[1],\"disabled\":[4],\"underline\":[4],\"rel\":[1]}]]],[\"sdds-navigation-tabs-button.cjs\",[[1,\"sdds-navigation-tabs-button\",{\"disabled\":[4],\"selected\":[4]}]]],[\"sdds-navigation-tabs-link.cjs\",[[1,\"sdds-navigation-tabs-link\",{\"disabled\":[4],\"selected\":[4],\"href\":[1],\"target\":[1],\"rel\":[1]}]]],[\"sdds-popover-canvas.cjs\",[[1,\"sdds-popover-canvas\",{\"selector\":[1],\"referenceEl\":[16],\"show\":[4],\"placement\":[1],\"offsetSkidding\":[2,\"offset-skidding\"],\"offsetDistance\":[2,\"offset-distance\"],\"modifiers\":[16],\"renderedShowValue\":[32],\"popperInstance\":[32],\"target\":[32],\"isShown\":[32]},[[8,\"click\",\"onAnyClick\"]]]]],[\"sdds-popover-menu.cjs\",[[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\"]]]]],[\"sdds-radio-button.cjs\",[[6,\"sdds-radio-button\",{\"name\":[1],\"value\":[1],\"radioId\":[1,\"radio-id\"],\"checked\":[516],\"required\":[4],\"disabled\":[4]}]]],[\"sdds-spinner.cjs\",[[0,\"sdds-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"sdds-stepper.cjs\",[[1,\"sdds-stepper\",{\"direction\":[1],\"labelPosition\":[1,\"label-position\"],\"size\":[1],\"hideLabels\":[4,\"hide-labels\"],\"width\":[32]}]]],[\"sdds-table.cjs\",[[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\"]}]]],[\"sdds-table-body-row-expandable.cjs\",[[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,\"internalSddsTablePropChange\",\"internalSddsPropChangeListener\"]]]]],[\"sdds-table-footer.cjs\",[[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,\"internalSddsTablePropChange\",\"internalSddsPropChangeListener\"],[16,\"internalSddsPagination\",\"sddsPaginationListener\"]]]]],[\"sdds-table-header.cjs\",[[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,\"internalSddsTablePropChange\",\"internalSddsPropChangeListener\"],[16,\"internalSddsMainCheckboxChange\",\"internalSddsMainCheckboxChangeListener\"],[16,\"internalSddsRowExpanded\",\"internalSddsRowExpandedListener\"]]]]],[\"sdds-table-toolbar.cjs\",[[1,\"sdds-table-toolbar\",{\"tableTitle\":[513,\"table-title\"],\"enableFiltering\":[516,\"enable-filtering\"],\"verticalDividers\":[32],\"compactDesign\":[32],\"noMinWidth\":[32],\"whiteBackground\":[32],\"tableId\":[32]},[[16,\"internalSddsTablePropChange\",\"internalSddsPropChangeListener\"]]]]],[\"sdds-toggle.cjs\",[[6,\"sdds-toggle\",{\"checked\":[516],\"required\":[4],\"size\":[1],\"name\":[1],\"headline\":[1],\"disabled\":[4],\"toggleId\":[1,\"toggle-id\"],\"toggle\":[64]}]]],[\"sdds-tooltip.cjs\",[[1,\"sdds-tooltip\",{\"text\":[1],\"selector\":[1],\"referenceEl\":[16],\"mouseOverTooltip\":[4,\"mouse-over-tooltip\"],\"show\":[1028],\"placement\":[1],\"popperInstance\":[32],\"target\":[32]}]]],[\"sdds-body-cell_2.cjs\",[[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,\"internalSddsPropChange\",\"internalSddsPropChangeListener\"],[16,\"internalSddsHover\",\"internalSddsHoverListener\"],[16,\"internalSddsTextAlign\",\"internalSddsTextAlignListener\"]]],[1,\"sdds-table-body-row\",{\"enableMultiselect\":[32],\"bodyCheckBoxStatus\":[32],\"mainCheckBoxStatus\":[32],\"verticalDividers\":[32],\"compactDesign\":[32],\"noMinWidth\":[32],\"modeVariant\":[32],\"tableId\":[32]},[[16,\"internalSddsTablePropChange\",\"internalSddsPropChangeListener\"],[16,\"internalSddsMainCheckboxSelect\",\"headCheckboxListener\"],[16,\"internalSddsCheckboxChange\",\"internalSddsCheckboxChangeListener\"]]]]],[\"sdds-dropdown_2.cjs\",[[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\":[4],\"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],\"listItemObject\":[32],\"resetOption\":[64]},[[4,\"click\",\"handleDocClick\"],[0,\"keydown\",\"keyListener\"],[0,\"internalSddsSelect\",\"selectOptionHandler\"]]],[1,\"sdds-dropdown-option\",{\"selected\":[4],\"disabled\":[4],\"value\":[513],\"innerValue\":[32]},[[1,\"mouseover\",\"changeFocusHandler\"],[1,\"mouseout\",\"removeFocusHandler\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"sdds-icon.cjs\",[[1,\"sdds-icon\",{\"name\":[513],\"size\":[513],\"icons_object\":[32],\"arrayOfIcons\":[32]}]]]]"), options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -6,8 +6,8 @@
     "./components/badge/badges.js",
     "./components/banner/sdds-banner.js",
     "./components/block/sdds-block.js",
-    "./components/breadcrumb/breadcrumb.js",
-    "./components/breadcrumb/breadcrumb-item/breadcrumb-item.js",
+    "./components/breadcrumb/sdds-breadcrumb.js",
+    "./components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.js",
     "./components/button/button-component.js",
     "./components/card/sdds-card.js",
     "./components/checkbox/sdds-checkbox.js",
@@ -20,9 +20,13 @@
     "./components/data-table/table-header-cell/table-header-cell.js",
     "./components/data-table/table-toolbar/table-toolbar.js",
     "./components/datetime/datetime.js",
+    "./components/divider/divider.js",
     "./components/dropdown/dropdown.js",
     "./components/dropdown/dropdown-filter/dropdown-filter.js",
     "./components/dropdown/dropdown-option/dropdown-option.js",
+    "./components/footer/webcomponent/sdds-footer.js",
+    "./components/footer/webcomponent/sdds-footer-link/sdds-footer-link.js",
+    "./components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-group.js",
     "./components/icon/icon.js",
     "./components/link/sdds-link.js",
     "./components/message/sdds-message.js",
@@ -32,10 +36,17 @@
     "./components/radio-button/radio-button.js",
     "./components/slider/slider.js",
     "./components/spinner/spinner.js",
-    "./components/tabs/inline-tabs-default/inline-tabs.js",
-    "./components/tabs/inline-tabs-default/inline-tab/inline-tab.js",
-    "./components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js",
+    "./components/stepper/sdds-stepper.js",
+    "./components/stepper/stepper-item/sdds-stepper-item.js",
+    "./components/tabs/folder-tabs/folder-tabs.js",
+    "./components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.js",
+    "./components/tabs/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.js",
+    "./components/tabs/inline-tabs/inline-tabs.js",
+    "./components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.js",
+    "./components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.js",
     "./components/tabs/navigation-tabs/navigation-tabs.js",
+    "./components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.js",
+    "./components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.js",
     "./components/textarea/textarea.js",
     "./components/textfield/textfield.js",
     "./components/toast/sdds-toast.js",

package/dist/collection/components/accordion/accordion.js

@@ -1,11 +1,10 @@
 import { h, Host } from '@stencil/core';
 export class Accordion {
   constructor() {
-    this.divider = true;
     this.modeVariant = null;
   }
   render() {
-    return (h(Host, { class: `sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+    return (h(Host, { class: `sdds-accordion ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
   }
   static get is() { return "sdds-accordion"; }
   static get encapsulation() { return "shadow"; }
@@ -21,24 +20,6 @@ export class Accordion {
   }
   static get properties() {
     return {
-      "divider": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Enable or disable divider lines between items"
-        },
-        "attribute": "divider",
-        "reflect": false,
-        "defaultValue": "true"
-      },
       "modeVariant": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;mBAEO,IAAI;uBAGgB,IAAI;;EAEnD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,kBAAkB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAA,CAAC,CAAC,EAAE,EAAE;MAElJ,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  /** Enable or disable divider lines between items */\n  @Prop() divider: boolean = true;\n\n  /** Set the variant of the the accordion. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  render() {\n    return (\n      <Host\n        class={`sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;uBAE2B,IAAI;;EAEnD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,kBAAkB,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAA,CAAC,CAAC,EAAE,EAAE;MAElG,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  /** Set the variant of the the accordion. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  render() {\n    return (\n      <Host\n        class={`sdds-accordion ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/accordion/accordion.stories.js

@@ -4,46 +4,46 @@ import readmeItem from './accordion-item/readme.md';
 export default {
   title: 'Components/Accordion',
   argTypes: {
-    iconPosition: {
-      name: 'Expand icon position',
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
         type: 'radio',
       },
-      options: { End: 'end', Start: 'start' },
-      description: 'The horizontal position of the expand icon.',
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
       table: {
-        defaultValue: { summary: 'end' },
+        defaultValue: { summary: 'Inherit from parent' },
       },
     },
-    disabled: {
-      name: 'Disable all items',
-      description: 'Disable all accordion items.',
+    iconPosition: {
+      name: 'Expand icon position',
+      description: 'Sets the horizontal position of the expand icon.',
       control: {
-        type: 'boolean',
+        type: 'radio',
       },
+      options: { End: 'end', Start: 'start' },
       table: {
-        defaultValue: { summary: 'false' },
+        defaultValue: { summary: 'end' },
       },
     },
     paddingReset: {
       name: 'Less padding right',
-      description: 'Less padding on the right inside accordion items.',
+      description: 'Sets less padding on the right inside accordion items.',
       control: {
         type: 'boolean',
       },
       table: {
-        defaultValue: { summary: 'false' },
+        defaultValue: { summary: false },
       },
     },
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Mode variant of the component.',
+    disabled: {
+      name: 'Disable all items',
+      description: 'Disables all accordion items.',
       control: {
-        type: 'radio',
+        type: 'boolean',
       },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
       table: {
-        defaultValue: { summary: 'Inherit from parent' },
+        defaultValue: { summary: false },
       },
     },
   },
@@ -63,10 +63,10 @@ export default {
     ],
   },
   args: {
-    disabled: false,
-    paddingReset: false,
-    iconPosition: 'end',
     modeVariant: 'Inherit from parent',
+    iconPosition: 'end',
+    paddingReset: false,
+    disabled: false,
   },
 };
 const Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {

package/dist/collection/components/accordion/accordion.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.stories.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAEpD,eAAe;EACb,KAAK,EAAE,sBAAsB;EAC7B,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,IAAI,EAAE,sBAAsB;MAC5B,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE;MACvC,WAAW,EAAE,6CAA6C;MAC1D,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,mBAAmB;MACzB,WAAW,EAAE,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,oBAAoB;MAC1B,WAAW,EAAE,mDAAmD;MAChE,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;IACD,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,gCAAgC;MAC7C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;GACF;EACD,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE;IAC5D,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,2GAA2G;OACjH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,2GAA2G;OACjH;KACF;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,KAAK;IACf,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE,KAAK;IACnB,WAAW,EAAE,qBAAqB;GACnC;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,EAAE;EACzE,MAAM,SAAS,GAAG,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,EAAE,CAAC;EACjF,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;EAChD,MAAM,gBAAgB,GAAG,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;EAE7D,OAAO,iBAAiB,CAAC;sBAErB,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAC1F;iDAC6C,SAAS,IAAI,YAAY,IAAI,gBAAgB;;;;kDAI5C,SAAS,IAAI,YAAY,IAAI,gBAAgB;;;;;;;;;;;;;;YAcnF,CAAC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\nimport readmeItem from './accordion-item/readme.md';\n\nexport default {\n  title: 'Components/Accordion',\n  argTypes: {\n    iconPosition: {\n      name: 'Expand icon position',\n      control: {\n        type: 'radio',\n      },\n      options: { End: 'end', Start: 'start' },\n      description: 'The horizontal position of the expand icon.',\n      table: {\n        defaultValue: { summary: 'end' },\n      },\n    },\n    disabled: {\n      name: 'Disable all items',\n      description: 'Disable all accordion items.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n    paddingReset: {\n      name: 'Less padding right',\n      description: 'Less padding on the right inside accordion items.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant of the component.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n  },\n  parameters: {\n    notes: { 'Accordion': readme, 'Accordion item': readmeItem },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  args: {\n    disabled: false,\n    paddingReset: false,\n    iconPosition: 'end',\n    modeVariant: 'Inherit from parent',\n  },\n};\n\nconst Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {\n  const affixAttr = iconPosition === 'start' ? 'expand-icon-position=\"start\"' : '';\n  const disabledAttr = disabled ? 'disabled' : '';\n  const paddingResetAttr = paddingReset ? 'padding-reset' : '';\n\n  return formatHtmlPreview(`\n    <sdds-accordion ${\n      modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''\n    }>\n      <sdds-accordion-item header=\"First item\" ${affixAttr} ${disabledAttr} ${paddingResetAttr}>\n        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.\n        Lorem ipsum doler sit amet.\n      </sdds-accordion-item>\n      <sdds-accordion-item header=\"Second item\" ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>\n        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.\n      </sdds-accordion-item>\n    </sdds-accordion>\n\n    <!-- Script tag for demo purposes -->\n  <script>\n    accordionItems = document.querySelectorAll('sdds-accordion-item');\n    for (let i = 0; i < accordionItems.length; i++) {\n      accordionItems[i].addEventListener('sddsToggle',() => {\n        console.log(i + 1 + \". item of accordion is toggled\")\n      })\n    }\n  </script>`);\n};\n\nexport const Default = Template.bind({});\nDefault.args = {};\n"]}
+{"version":3,"file":"accordion.stories.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAEpD,eAAe;EACb,KAAK,EAAE,sBAAsB;EAC7B,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,0GAA0G;MACvH,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,sBAAsB;MAC5B,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE;MACvC,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,oBAAoB;MAC1B,WAAW,EAAE,wDAAwD;MACrE,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,mBAAmB;MACzB,WAAW,EAAE,+BAA+B;MAC5C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE;IAC5D,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,2GAA2G;OACjH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,2GAA2G;OACjH;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE,KAAK;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,EAAE;EACzE,MAAM,SAAS,GAAG,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,EAAE,CAAC;EACjF,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;EAChD,MAAM,gBAAgB,GAAG,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;EAE7D,OAAO,iBAAiB,CAAC;sBAErB,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAC1F;iDAC6C,SAAS,IAAI,YAAY,IAAI,gBAAgB;;;;kDAI5C,SAAS,IAAI,YAAY,IAAI,gBAAgB;;;;;;;;;;;;;;YAcnF,CAAC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\nimport readmeItem from './accordion-item/readme.md';\n\nexport default {\n  title: 'Components/Accordion',\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    iconPosition: {\n      name: 'Expand icon position',\n      description: 'Sets the horizontal position of the expand icon.',\n      control: {\n        type: 'radio',\n      },\n      options: { End: 'end', Start: 'start' },\n      table: {\n        defaultValue: { summary: 'end' },\n      },\n    },\n    paddingReset: {\n      name: 'Less padding right',\n      description: 'Sets less padding on the right inside accordion items.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      name: 'Disable all items',\n      description: 'Disables all accordion items.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  parameters: {\n    notes: { 'Accordion': readme, 'Accordion item': readmeItem },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    iconPosition: 'end',\n    paddingReset: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {\n  const affixAttr = iconPosition === 'start' ? 'expand-icon-position=\"start\"' : '';\n  const disabledAttr = disabled ? 'disabled' : '';\n  const paddingResetAttr = paddingReset ? 'padding-reset' : '';\n\n  return formatHtmlPreview(`\n    <sdds-accordion ${\n      modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''\n    }>\n      <sdds-accordion-item header=\"First item\" ${affixAttr} ${disabledAttr} ${paddingResetAttr}>\n        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.\n        Lorem ipsum doler sit amet.\n      </sdds-accordion-item>\n      <sdds-accordion-item header=\"Second item\" ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>\n        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.\n      </sdds-accordion-item>\n    </sdds-accordion>\n\n    <!-- Script tag for demo purposes -->\n  <script>\n    accordionItems = document.querySelectorAll('sdds-accordion-item');\n    for (let i = 0; i < accordionItems.length; i++) {\n      accordionItems[i].addEventListener('sddsToggle',() => {\n        console.log(i + 1 + \". item of accordion is toggled\")\n      })\n    }\n  </script>`);\n};\n\nexport const Default = Template.bind({});\nDefault.args = {};\n"]}

package/dist/collection/components/badge/badge.stories.js

@@ -19,46 +19,43 @@ export default {
     ],
   },
   argTypes: {
-    hidden: {
-      name: 'Hidden',
-      description: 'Toggle visibility of badge',
+    size: {
+      name: 'Size',
+      description: 'Sets the size of the component.',
       control: {
-        type: 'boolean',
+        type: 'radio',
+      },
+      options: {
+        Large: 'lg',
+        Small: 'sm',
       },
       table: {
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'lg' },
       },
     },
     value: {
       name: 'Value',
-      description: 'Set a value to show on the badge',
+      description: 'Sets a value to show on the badge.',
       control: {
         type: 'number',
       },
       if: { arg: 'size', neq: 'sm' },
-      table: {
-        defaultValue: { summary: null },
-      },
     },
-    size: {
-      name: 'Size',
-      description: 'Size of the component',
-      options: {
-        Large: 'lg',
-        Small: 'sm',
-      },
+    hidden: {
+      name: 'Hidden',
+      description: 'Toggles visibility of the badge.',
       control: {
-        type: 'radio',
+        type: 'boolean',
       },
       table: {
-        defaultValue: { summary: 'lg' },
+        defaultValue: { summary: false },
       },
     },
   },
   args: {
-    hidden: false,
     size: 'lg',
     value: 1,
+    hidden: false,
   },
 };
 const Template = ({ value, size, hidden }) => formatHtmlPreview(`

package/dist/collection/components/badge/badge.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.stories.js","sourceRoot":"","sources":["../../../src/components/badge/badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE;MAC9B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,uBAAuB;MACpC,OAAO,EAAE;QACP,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;OACZ;MACD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;GACF;EACD,IAAI,EAAE;IACJ,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,CAAC;GACT;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAC3C,iBAAiB,CAAC;;QAEZ,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;QAC/B,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;cAChB,IAAI;mBACC,CAAC,CAAC;AAErB,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CACpD,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;UA0BM,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;qBACpB,OAAO;gBACZ,IAAI;;WAET,CACR,CAAC;AAEJ,MAAM,CAAC,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Badge',\n  parameters: {\n    layout: 'centered',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    hidden: {\n      name: 'Hidden',\n      description: 'Toggle visibility of badge',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    value: {\n      name: 'Value',\n      description: 'Set a value to show on the badge',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'size', neq: 'sm' },\n      table: {\n        defaultValue: { summary: null },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Size of the component',\n      options: {\n        Large: 'lg',\n        Small: 'sm',\n      },\n      control: {\n        type: 'radio',\n      },\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n  },\n  args: {\n    hidden: false,\n    size: 'lg',\n    value: 1,\n  },\n};\n\nconst Template = ({ value, size, hidden }) =>\n  formatHtmlPreview(`\n    <sdds-badges\n      ${value ? `value=\"${value}\"` : ''}\n      ${hidden ? 'hidden' : ''}\n      size=\"${size}\">\n    </sdds-badges>`);\n\nexport const Default = Template.bind({});\n\nconst WithDemoTemplate = ({ value, size, visible }) =>\n  formatHtmlPreview(\n    `\n    <style>\n    /* Note: Demo classes used here are just for demo purposes in Storybook */\n    .badges-demo-box {\n      margin:5px;\n      height: 32px;\n      width: 32px;\n      position: relative;\n      background-color: #C4C4C4;\n    }\n\n    .badges-demo-box sdds-badges[size=\"lg\"]{\n      position: absolute;\n      left: 16px;\n      top: -5px;\n    }\n\n    .badges-demo-box sdds-badges[size=\"sm\"]{\n      position: absolute;\n      left: 26px;\n      top: -2px;\n    }\n    </style>\n\n    <div class=\"badges-demo-box\">\n      <sdds-badges\n        ${value ? `value=\"${value}\"` : ''}\n        is-visible=${visible}\n        size=\"${size}\">\n      </sdds-badges>\n    </div>`,\n  );\n\nexport const WithDemoComponent = WithDemoTemplate.bind({});\n"]}
+{"version":3,"file":"badge.stories.js","sourceRoot":"","sources":["../../../src/components/badge/badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE;QACP,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;OACZ;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE;KAC/B;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,KAAK;GACd;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAC3C,iBAAiB,CAAC;;QAEZ,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;QAC/B,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;cAChB,IAAI;mBACC,CAAC,CAAC;AAErB,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CACpD,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;UA0BM,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;qBACpB,OAAO;gBACZ,IAAI;;WAET,CACR,CAAC;AAEJ,MAAM,CAAC,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Badge',\n  parameters: {\n    layout: 'centered',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the component.',\n      control: {\n        type: 'radio',\n      },\n      options: {\n        Large: 'lg',\n        Small: 'sm',\n      },\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    value: {\n      name: 'Value',\n      description: 'Sets a value to show on the badge.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'size', neq: 'sm' },\n    },\n    hidden: {\n      name: 'Hidden',\n      description: 'Toggles visibility of the badge.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    size: 'lg',\n    value: 1,\n    hidden: false,\n  },\n};\n\nconst Template = ({ value, size, hidden }) =>\n  formatHtmlPreview(`\n    <sdds-badges\n      ${value ? `value=\"${value}\"` : ''}\n      ${hidden ? 'hidden' : ''}\n      size=\"${size}\">\n    </sdds-badges>`);\n\nexport const Default = Template.bind({});\n\nconst WithDemoTemplate = ({ value, size, visible }) =>\n  formatHtmlPreview(\n    `\n    <style>\n    /* Note: Demo classes used here are just for demo purposes in Storybook */\n    .badges-demo-box {\n      margin:5px;\n      height: 32px;\n      width: 32px;\n      position: relative;\n      background-color: #C4C4C4;\n    }\n\n    .badges-demo-box sdds-badges[size=\"lg\"]{\n      position: absolute;\n      left: 16px;\n      top: -5px;\n    }\n\n    .badges-demo-box sdds-badges[size=\"sm\"]{\n      position: absolute;\n      left: 26px;\n      top: -2px;\n    }\n    </style>\n\n    <div class=\"badges-demo-box\">\n      <sdds-badges\n        ${value ? `value=\"${value}\"` : ''}\n        is-visible=${visible}\n        size=\"${size}\">\n      </sdds-badges>\n    </div>`,\n  );\n\nexport const WithDemoComponent = WithDemoTemplate.bind({});\n"]}

package/dist/collection/components/banner/banner.stories.js

@@ -19,7 +19,7 @@ export default {
   argTypes: {
     state: {
       name: 'Type',
-      description: 'Changes type of component',
+      description: 'Changes the type of the component.',
       options: ['Default', 'Error', 'Info'],
       control: {
         type: 'radio',
@@ -30,28 +30,28 @@ export default {
     },
     header: {
       name: 'Header',
-      description: 'Text to display in header section',
+      description: 'Sets text to be displayed in the header section.',
       control: {
         type: 'text',
       },
     },
     subheader: {
       name: 'Subheader',
-      description: 'Text to display in subheader section',
+      description: 'Sets text to be displayed in the subheader section.',
       control: {
         type: 'text',
       },
     },
     link: {
       name: 'Link',
-      description: 'Text to display in link section',
+      description: 'Sets text to be displayed in the link section.',
       control: {
         type: 'text',
       },
     },
     hideIcon: {
       name: 'Hide icon',
-      description: 'If an icon should be displayed. For type default the truck icon is used in this example, but it should be changed to suit your needs.',
+      description: 'Controls if an icon should be displayed. The truck icon is used here as an example, but it should be changed to suit your needs.',
       control: {
         type: 'boolean',
       },