@scania/tegel 0.0.5 → 0.0.6

package/dist/components/sdds-folder-tab.js

@@ -0,0 +1,54 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sddsFolderTabCss = ":host{box-sizing:border-box;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;min-width:142px;display:block;width:calc(100% - 32px);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none;border-left:1px solid;border-left-color:transparent}:host div:not(.selected){background-color:var(--sdds-folder-tab-background)}:host div:not(.selected) ::slotted(*){border-left-color:var(--sdds-folder-tab-divider-color);border-top:2px solid var(--sdds-folder-tab-background);color:var(--sdds-folder-tab-item-color)}:host div:not(.selected):hover{background-color:var(--sdds-folder-tab-background-hover);cursor:pointer}:host div:not(.selected):hover ::slotted(*){border-top-color:var(--sdds-folder-tab-background-hover);color:var(--sdds-folder-tab-color)}:host ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .disabled{pointer-events:none}:host .disabled ::slotted(*){color:var(--sdds-folder-tab-item-color-disabled)}:host .disabled:focus-visible{outline:none}:host .selected{background-color:var(--sdds-folder-tab-background-selected);border-top:2px solid var(--sdds-folder-tab-border-selected)}:host .selected::after{content:\" \";background-color:var(--sdds-folder-tab-background-selected);width:1px;top:0;bottom:0;right:-1px;display:block;position:absolute;z-index:1}:host .selected ::slotted(*){color:var(--sdds-folder-tab-color)}:host(.first) :not(.selected) ::slotted(*){border-left-color:transparent}";
+
+const SddsFolderTab$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.disabled = false;
+    this.selected = false;
+    this.tabWidth = undefined;
+  }
+  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */
+  async setTabWidth(width) {
+    this.tabWidth = width;
+  }
+  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */
+  async setSelected(selected) {
+    this.selected = selected;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("div", { class: `${this.disabled ? 'disabled' : ''}
+                  ${this.selected ? 'selected' : ''}
+                `, style: { width: `${this.tabWidth}px` } }, h("slot", null))));
+  }
+  static get style() { return sddsFolderTabCss; }
+}, [1, "sdds-folder-tab", {
+    "disabled": [4],
+    "selected": [32],
+    "tabWidth": [32],
+    "setTabWidth": [64],
+    "setSelected": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-folder-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-folder-tab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsFolderTab$1);
+      }
+      break;
+  } });
+}
+
+const SddsFolderTab = SddsFolderTab$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsFolderTab, defineCustomElement };
+
+//# sourceMappingURL=sdds-folder-tab.js.map

package/dist/components/sdds-folder-tab.js.map

@@ -0,0 +1 @@
+{"file":"sdds-folder-tab.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,yjDAAyjD;;MCOrkDA,eAAa;;;;;oBAEI,KAAK;oBAEJ,KAAK;;;;EAMlC,MAAM,WAAW,CAAC,KAAa;IAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;GACvB;;EAID,MAAM,WAAW,CAAC,QAAiB;IACjC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;GAC1B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,WACE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;oBAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;iBAClC,EACP,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,IAEtC,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsFolderTab"],"sources":["./src/components/tabs/folder-tabs/folder-tab/sdds-folder-tab.scss?tag=sdds-folder-tab&encapsulation=shadow","./src/components/tabs/folder-tabs/folder-tab/sdds-folder-tab.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/z-index';\n@import '../../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  position: relative;\n\n  ::slotted(*) {\n    all: unset;\n    min-width: 142px;\n    display: block;\n    width: calc(100% - 32px);\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    cursor: pointer;\n    padding: 16px;\n    white-space: nowrap;\n    text-decoration: none;\n    text-align: left;\n    outline: none;\n    border: none;\n    border-left: 1px solid;\n    border-left-color: transparent;\n  }\n\n  div:not(.selected) {\n    background-color: var(--sdds-folder-tab-background);\n\n    ::slotted(*) {\n      border-left-color: var(--sdds-folder-tab-divider-color);\n      border-top: 2px solid var(--sdds-folder-tab-background);\n      color: var(--sdds-folder-tab-item-color);\n    }\n\n    &:hover {\n      background-color: var(--sdds-folder-tab-background-hover);\n      cursor: pointer;\n\n      ::slotted(*) {\n        border-top-color: var(--sdds-folder-tab-background-hover);\n        color: var(--sdds-folder-tab-color);\n      }\n    }\n  }\n\n  ::slotted(*:focus-visible) {\n    @include sdds-focus-state;\n  }\n\n  .disabled {\n    pointer-events: none;\n\n    ::slotted(*) {\n      color: var(--sdds-folder-tab-item-color-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n    }\n  }\n\n  .selected {\n    background-color: var(--sdds-folder-tab-background-selected);\n    border-top: 2px solid var(--sdds-folder-tab-border-selected);\n\n    &::after {\n      content: ' ';\n      background-color: var(--sdds-folder-tab-background-selected);\n      width: 1px;\n      top: 0;\n      bottom: 0;\n      right: -1px;\n      display: block;\n      position: absolute;\n      z-index: 1;\n    }\n\n    ::slotted(*) {\n      color: var(--sdds-folder-tab-color);\n    }\n  }\n}\n\n:host(.first) {\n  :not(.selected) {\n    ::slotted(*) {\n      border-left-color: transparent;\n    }\n  }\n}\n","import { Component, Host, h, Method, State, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-folder-tab',\n  styleUrl: 'sdds-folder-tab.scss',\n  shadow: true,\n})\nexport class SddsFolderTab {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  @State() selected: boolean = false;\n\n  @State() tabWidth: number;\n\n  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setTabWidth(width: number) {\n    this.tabWidth = width;\n  }\n\n  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setSelected(selected: boolean) {\n    this.selected = selected;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <div\n          class={`${this.disabled ? 'disabled' : ''}\n                  ${this.selected ? 'selected' : ''}\n                `}\n          style={{ width: `${this.tabWidth}px` }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-folder-tabs.js

@@ -38,12 +38,46 @@ const InlineTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       });
       resizeObserver.observe(this.navWrapperElement);
     };
+    this.addEventListenerToTabs = () => {
+      this.children = Array.from(this.host.children);
+      this.children = this.children.map((item, index) => {
+        item.addEventListener('click', () => {
+          const sddsChangeEvent = this.sddsChange.emit({
+            selectedTabIndex: this.children.indexOf(item)
+          });
+          if (!sddsChangeEvent.defaultPrevented) {
+            if (!item.disabled) {
+              this.children.forEach((element) => element.setSelected(false));
+              item.setSelected(true);
+              this.selectedIndex = index;
+            }
+          }
+        });
+        return item;
+      });
+    };
     this.modeVariant = null;
+    this.defaultSelectedIndex = 0;
+    this.selectedIndex = undefined;
     this.buttonWidth = 0;
     this.showLeftScroll = false;
     this.showRightScroll = false;
-    this.selectedTab = undefined;
-    this.selectedTabIndex = undefined;
+  }
+  /** Sets the passed tabindex as the selected tab. */
+  async selectTab(tabIndex) {
+    if (!this.children[tabIndex].disabled) {
+      this.children.forEach((element) => element.setSelected(false));
+      this.children = this.children.map((element, index) => {
+        if (index === tabIndex) {
+          element.setSelected(true);
+          this.selectedIndex = tabIndex;
+        }
+        return element;
+      });
+    }
+    return {
+      selectedTabIndex: this.selectedIndex,
+    };
   }
   calculateButtonWidth() {
     this.children = this.children.map((tab) => {
@@ -83,46 +117,29 @@ const InlineTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   connectedCallback() {
     this.children = Array.from(this.host.children);
-    this.children = this.children.map((item, index) => {
-      item.addEventListener('click', () => {
-        if (!item.disabled) {
-          this.children.forEach((element) => element.removeAttribute('selected'));
-          item.setAttribute('selected', '');
-          this.selectedTab = item.innerHTML;
-          this.selectedTabIndex = index;
-        }
-      });
-      if (index === 0) {
-        item.classList.add('first');
-      }
-      if (index === this.children.length - 1) {
-        item.classList.add('last');
-      }
-      if (item.selected) {
-        this.selectedTab = item.innerHTML;
-        this.selectedTabIndex = index;
-      }
-      return item;
-    });
+    this.children[0].classList.add('first');
+    this.children[this.children.length - 1].classList.add('last');
   }
   componentDidLoad() {
+    if (this.selectedIndex === undefined) {
+      this.addEventListenerToTabs();
+      this.children[this.defaultSelectedIndex].setSelected(true);
+      this.selectedIndex = this.defaultSelectedIndex;
+      this.sddsChange.emit({
+        selectedTabIndex: this.selectedIndex,
+      });
+    }
+    else {
+      this.children[this.selectedIndex].setSelected(true);
+      this.sddsChange.emit({
+        selectedTabIndex: this.selectedIndex,
+      });
+    }
     this.calculateButtonWidth();
   }
   componentDidUpdate() {
     this.calculateButtonWidth();
   }
-  componentWillRender() {
-    if (!this.selectedTab) {
-      this.children = Array.from(this.host.children);
-      this.children = this.children.map((item, index) => {
-        if (item.selected) {
-          this.selectedTab = item.innerHTML;
-          this.selectedTabIndex = index;
-        }
-        return item;
-      });
-    }
-  }
   componentDidRender() {
     if (this.buttonsWidth > this.componentWidth) {
       this.evaluateScrollButtons();
@@ -133,52 +150,20 @@ const InlineTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     this.addResizeObserver();
   }
-  /** Sets the passed tabindex as the selected tab. */
-  async selectTab(tabIndex) {
-    if (!this.children[tabIndex].disabled) {
-      this.children.forEach((element) => element.removeAttribute('selected'));
-      this.children = this.children.map((element, index) => {
-        if (index === tabIndex) {
-          element.setAttribute('selected', '');
-          this.selectedTab = element.innerHTML;
-          this.selectedTabIndex = tabIndex;
-        }
-        return element;
-      });
-    }
-    return {
-      selectedTab: this.selectedTab,
-      selectedTabIndex: this.selectedTabIndex,
-    };
-  }
-  handleSelectedTabChange() {
-    this.host.setAttribute('selected-tab', this.selectedTab);
-  }
-  handleSelectedTabIndexChange() {
-    this.host.setAttribute('selected-tab-index', `${this.selectedTabIndex}`);
-    this.sddsChange.emit({
-      selectedTab: this.selectedTab,
-      selectedTabIndex: this.selectedTabIndex,
-    });
-  }
   render() {
-    return (h(Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { ref: (el) => {
+    return (h(Host, { role: "list", class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
         this.navWrapperElement = el;
-      }, class: "wrapper", role: "list" }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("sdds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("sdds-icon", { name: "chevron_right", size: "20px" })))));
+      } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("sdds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("sdds-icon", { name: "chevron_right", size: "20px" })))));
   }
   get host() { return this; }
-  static get watchers() { return {
-    "selectedTab": ["handleSelectedTabChange"],
-    "selectedTabIndex": ["handleSelectedTabIndexChange"]
-  }; }
   static get style() { return folderTabsCss; }
 }, [1, "sdds-folder-tabs", {
     "modeVariant": [1, "mode-variant"],
+    "defaultSelectedIndex": [2, "default-selected-index"],
+    "selectedIndex": [514, "selected-index"],
     "buttonWidth": [32],
     "showLeftScroll": [32],
     "showRightScroll": [32],
-    "selectedTab": [32],
-    "selectedTabIndex": [32],
     "selectTab": [64]
   }]);
 function defineCustomElement$1() {

package/dist/components/sdds-folder-tabs.js.map

@@ -1 +1 @@
-{"file":"sdds-folder-tabs.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,ytCAAytC;;MCkBluC,UAAU;;;;;;IAgBrB,sBAAiB,GAAgB,IAAI,CAAC;IAEtC,mBAAc,GAAW,CAAC,CAAC;IAE3B,iBAAY,GAAW,CAAC,CAAC;IAEzB,gBAAW,GAAW,CAAC,CAAC;IA8CxB,sBAAiB,GAAG;MAClB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO;QAChD,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK;UACpB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;UAC/C,IAAI,YAAY,GAAG,CAAC,CAAC;UAErB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;UAClD,UAAU,CAAC,OAAO,CAAC,CAAC,SAAsB;YACxC,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;YACjD,YAAY;cACV,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;WACxF,CAAC,CAAC;UAEH,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;UACrC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;UACjC,IAAI,CAAC,WAAW,GAAG,YAAY,GAAG,cAAc,CAAC;UAEjD,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE;YAC3C,IAAI,CAAC,qBAAqB,EAAE,CAAC;WAC9B;eAAM;YACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;WAC9B;SACF,CAAC,CAAC;OACJ,CAAC,CAAC;MAEH,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAChD,CAAC;uBA7F6C,IAAI;uBAEpB,CAAC;0BAEG,KAAK;2BAEJ,KAAK;;;;EAkBzC,oBAAoB;IAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAC/B,CAAC,GAAoE;MACnE,IAAI,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE;QACtC,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,WAAW,CAAC;OACpC;MACD,OAAO,GAAG,CAAC;KACZ,CACF,CAAC;IACF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG;MACxB,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACnC,CAAC,CAAC;GACJ;EAED,WAAW;IACT,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;IACjD,IAAI,CAAC,iBAAiB,CAAC,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;IAC9D,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAED,UAAU;IACR,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;IACjD,IAAI,CAAC,iBAAiB,CAAC,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;IAC9D,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAED,qBAAqB;IACnB,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;IAEjD,IAAI,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;MAC9B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;KAC9B;SAAM;MACL,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC7B;IAED,IAAI,MAAM,IAAI,CAAC,EAAE;MACf,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B;SAAM;MACL,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;GACF;EA+BD,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAE5C,CAAC;IACF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK;MAC5C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;QAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;UAClB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC;UACxE,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;UAClC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;UAClC,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;SAC/B;OACF,CAAC,CAAC;MACH,IAAI,KAAK,KAAK,CAAC,EAAE;QACf,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;OAC7B;MACD,IAAI,KAAK,KAAK,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;QACtC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;OAC5B;MACD,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;QAClC,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;OAC/B;MACD,OAAO,IAAI,CAAC;KACb,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;EAED,kBAAkB;IAChB,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;EAED,mBAAmB;IACjB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACrB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAE5C,CAAC;MACF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK;QAC5C,IAAI,IAAI,CAAC,QAAQ,EAAE;UACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;UAClC,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;SAC/B;QACD,OAAO,IAAI,CAAC;OACb,CAAC,CAAC;KACJ;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE;MAC3C,IAAI,CAAC,qBAAqB,EAAE,CAAC;KAC9B;SAAM;MACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;MAC5B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;KAC9B;IACD,IAAI,CAAC,iBAAiB,EAAE,CAAC;GAC1B;;EAeD,MAAM,SAAS,CAAC,QAAgB;IAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE;MACrC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC;MACxE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK;QAC/C,IAAI,KAAK,KAAK,QAAQ,EAAE;UACtB,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;UACrC,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,SAAS,CAAC;UACrC,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;SAClC;QACD,OAAO,OAAO,CAAC;OAChB,CAAC,CAAC;KACJ;IACD,OAAO;MACL,WAAW,EAAE,IAAI,CAAC,WAAW;MAC7B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;KACxC,CAAC;GACH;EAGD,uBAAuB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;GAC1D;EAGD,4BAA4B;IAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;IACzE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,WAAW,EAAE,IAAI,CAAC,WAAW;MAC7B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;KACxC,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,EAAE,IAC/E,WACE,GAAG,EAAE,CAAC,EAAE;QACN,IAAI,CAAC,iBAAiB,GAAG,EAAoB,CAAC;OAC/C,EACD,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,MAAM,IAEX,cACE,KAAK,EAAE,sBAAsB,IAAI,CAAC,cAAc,GAAG,MAAM,GAAG,EAAE,EAAE,EAChE,QAAQ,EAAE,CAAC,IAAI,CAAC,cAAc,EAC9B,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAEhC,iBAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CAChD,EACT,eAAa,EACb,cACE,KAAK,EAAE,uBAAuB,IAAI,CAAC,eAAe,GAAG,MAAM,GAAG,EAAE,EAAE,EAClE,QAAQ,EAAE,CAAC,IAAI,CAAC,eAAe,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAEjC,iBAAW,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAa,CACjD,CACL,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tabs/folder-tabs/folder-tabs.scss?tag=sdds-folder-tabs&encapsulation=shadow","./src/components/tabs/folder-tabs/folder-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n@import '../../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  overflow: hidden;\n  outline: 0;\n\n  .wrapper {\n    display: flex;\n    overflow-x: scroll;\n    scrollbar-width: none;\n    position: relative;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .scroll-right-button {\n    z-index: calc(z(tab) + 1);\n    right: 0;\n  }\n\n  .scroll-left-button {\n    z-index: calc(z(tab) + 1);\n    left: 0;\n  }\n\n  .scroll-right-button,\n  .scroll-left-button {\n    height: 50px;\n    color: var(--sdds-folder-tabs-scroll-btn-color);\n    cursor: pointer;\n    border: 0;\n    width: 0;\n    background-color: var(--sdds-folder-tabs-scroll-btn-background);\n    display: none;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n    position: sticky;\n\n    &.show {\n      min-width: 48px;\n      display: block;\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n\n    svg {\n      fill: var(--sdds-folder-tabs-scroll-btn-color);\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  State,\n  Element,\n  Prop,\n  h,\n  Watch,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-folder-tabs',\n  styleUrl: 'folder-tabs.scss',\n  shadow: true,\n})\nexport class InlineTabs {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() buttonWidth: number = 0;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  @State() selectedTab: string;\n\n  @State() selectedTabIndex: number;\n\n  @Element() host: HTMLElement;\n\n  navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  componentWidth: number = 0; // visible width of this component\n\n  buttonsWidth: number = 0; // total width of all nav items combined\n\n  scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  children: Array<HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement>;\n\n  calculateButtonWidth() {\n    this.children = this.children.map(\n      (tab: HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement) => {\n        if (tab.offsetWidth > this.buttonWidth) {\n          this.buttonWidth = tab.offsetWidth;\n        }\n        return tab;\n      },\n    );\n    this.children.forEach((tab) => {\n      tab.setTabWidth(this.buttonWidth);\n    });\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  addResizeObserver = () => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n  };\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children) as Array<\n      HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement\n    >;\n    this.children = this.children.map((item, index) => {\n      item.addEventListener('click', () => {\n        if (!item.disabled) {\n          this.children.forEach((element) => element.removeAttribute('selected'));\n          item.setAttribute('selected', '');\n          this.selectedTab = item.innerHTML;\n          this.selectedTabIndex = index;\n        }\n      });\n      if (index === 0) {\n        item.classList.add('first');\n      }\n      if (index === this.children.length - 1) {\n        item.classList.add('last');\n      }\n      if (item.selected) {\n        this.selectedTab = item.innerHTML;\n        this.selectedTabIndex = index;\n      }\n      return item;\n    });\n  }\n\n  componentDidLoad() {\n    this.calculateButtonWidth();\n  }\n\n  componentDidUpdate() {\n    this.calculateButtonWidth();\n  }\n\n  componentWillRender() {\n    if (!this.selectedTab) {\n      this.children = Array.from(this.host.children) as Array<\n        HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement\n      >;\n      this.children = this.children.map((item, index) => {\n        if (item.selected) {\n          this.selectedTab = item.innerHTML;\n          this.selectedTabIndex = index;\n        }\n        return item;\n      });\n    }\n  }\n\n  componentDidRender() {\n    if (this.buttonsWidth > this.componentWidth) {\n      this.evaluateScrollButtons();\n    } else {\n      this.showLeftScroll = false;\n      this.showRightScroll = false;\n    }\n    this.addResizeObserver();\n  }\n\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    selectedTab: string;\n    selectedTabIndex: number;\n  }>;\n\n  /** Sets the passed tabindex as the selected tab. */\n  @Method()\n  async selectTab(tabIndex: number) {\n    if (!this.children[tabIndex].disabled) {\n      this.children.forEach((element) => element.removeAttribute('selected'));\n      this.children = this.children.map((element, index) => {\n        if (index === tabIndex) {\n          element.setAttribute('selected', '');\n          this.selectedTab = element.innerHTML;\n          this.selectedTabIndex = tabIndex;\n        }\n        return element;\n      });\n    }\n    return {\n      selectedTab: this.selectedTab,\n      selectedTabIndex: this.selectedTabIndex,\n    };\n  }\n\n  @Watch('selectedTab')\n  handleSelectedTabChange() {\n    this.host.setAttribute('selected-tab', this.selectedTab);\n  }\n\n  @Watch('selectedTabIndex')\n  handleSelectedTabIndexChange() {\n    this.host.setAttribute('selected-tab-index', `${this.selectedTabIndex}`);\n    this.sddsChange.emit({\n      selectedTab: this.selectedTab,\n      selectedTabIndex: this.selectedTabIndex,\n    });\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n        <div\n          ref={(el) => {\n            this.navWrapperElement = el as HTMLDivElement;\n          }}\n          class=\"wrapper\"\n          role=\"list\"\n        >\n          <button\n            class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n            disabled={!this.showLeftScroll}\n            onClick={() => this.scrollLeft()}\n          >\n            <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n          </button>\n          <slot></slot>\n          <button\n            class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n            disabled={!this.showRightScroll}\n            onClick={() => this.scrollRight()}\n          >\n            <sdds-icon name=\"chevron_right\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-folder-tabs.js","mappings":"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","names":[],"sources":["./src/components/tabs/folder-tabs/folder-tabs.scss?tag=sdds-folder-tabs&encapsulation=shadow","./src/components/tabs/folder-tabs/folder-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n@import '../../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  overflow: hidden;\n  outline: 0;\n\n  .wrapper {\n    display: flex;\n    overflow-x: scroll;\n    scrollbar-width: none;\n    position: relative;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .scroll-right-button {\n    z-index: calc(z(tab) + 1);\n    right: 0;\n  }\n\n  .scroll-left-button {\n    z-index: calc(z(tab) + 1);\n    left: 0;\n  }\n\n  .scroll-right-button,\n  .scroll-left-button {\n    height: 50px;\n    color: var(--sdds-folder-tabs-scroll-btn-color);\n    cursor: pointer;\n    border: 0;\n    width: 0;\n    background-color: var(--sdds-folder-tabs-scroll-btn-background);\n    display: none;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n    position: sticky;\n\n    &.show {\n      min-width: 48px;\n      display: block;\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n\n    svg {\n      fill: var(--sdds-folder-tabs-scroll-btn-color);\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  State,\n  Element,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-folder-tabs',\n  styleUrl: 'folder-tabs.scss',\n  shadow: true,\n})\nexport class InlineTabs {\n  @Element() host: HTMLElement;\n\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Sets the default selected tab. */\n  @Prop() defaultSelectedIndex: number = 0;\n\n  /** Sets the selected tab.\n   * If this is set all tab changes needs to be handled by the user. */\n  @Prop({ reflect: true }) selectedIndex: number;\n\n  @State() buttonWidth: number = 0;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  private navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  private componentWidth: number = 0; // visible width of this component\n\n  private buttonsWidth: number = 0; // total width of all nav items combined\n\n  private scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  private children: Array<HTMLSddsFolderTabElement>;\n\n  /** Event emitted when the selected tab is changed. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    selectedTabIndex: number;\n  }>;\n\n  /** Sets the passed tabindex as the selected tab. */\n  @Method()\n  async selectTab(tabIndex: number) {\n    if (!this.children[tabIndex].disabled) {\n      this.children.forEach((element) => element.setSelected(false));\n      this.children = this.children.map((element, index) => {\n        if (index === tabIndex) {\n          element.setSelected(true);\n          this.selectedIndex = tabIndex;\n        }\n        return element;\n      });\n    }\n    return {\n      selectedTabIndex: this.selectedIndex,\n    };\n  }\n\n  calculateButtonWidth() {\n    this.children = this.children.map((tab: HTMLSddsFolderTabElement) => {\n      if (tab.offsetWidth > this.buttonWidth) {\n        this.buttonWidth = tab.offsetWidth;\n      }\n      return tab;\n    });\n    this.children.forEach((tab) => {\n      tab.setTabWidth(this.buttonWidth);\n    });\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  addResizeObserver = () => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n  };\n\n  addEventListenerToTabs = () => {\n      this.children = Array.from(this.host.children) as Array<HTMLSddsFolderTabElement>;\n      this.children = this.children.map((item, index) => {\n        item.addEventListener('click', () => {\n          const sddsChangeEvent = this.sddsChange.emit({\n            selectedTabIndex: this.children.indexOf(item)\n          });\n\n          if(!sddsChangeEvent.defaultPrevented) {\n            if (!item.disabled) {\n              this.children.forEach((element) => element.setSelected(false));\n              item.setSelected(true);\n              this.selectedIndex = index;\n            }\n          }\n        });\n        return item;\n      });\n    \n  };\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children) as Array<HTMLSddsFolderTabElement>;\n    this.children[0].classList.add('first');\n    this.children[this.children.length - 1].classList.add('last');\n  }\n\n  componentDidLoad() {\n    if (this.selectedIndex === undefined) {\n      this.addEventListenerToTabs();\n      this.children[this.defaultSelectedIndex].setSelected(true);\n      this.selectedIndex = this.defaultSelectedIndex;\n      this.sddsChange.emit({\n        selectedTabIndex: this.selectedIndex,\n      });\n    } else {\n      this.children[this.selectedIndex].setSelected(true);\n      this.sddsChange.emit({\n        selectedTabIndex: this.selectedIndex,\n      });\n    }\n    this.calculateButtonWidth();\n  }\n\n  componentDidUpdate() {\n    this.calculateButtonWidth();\n  }\n\n  componentDidRender() {\n    if (this.buttonsWidth > this.componentWidth) {\n      this.evaluateScrollButtons();\n    } else {\n      this.showLeftScroll = false;\n      this.showRightScroll = false;\n    }\n    this.addResizeObserver();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"list\"\n        class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}\n      >\n        <div\n          class=\"wrapper\"\n          ref={(el) => {\n            this.navWrapperElement = el as HTMLDivElement;\n          }}\n        >\n          <button\n            class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n            disabled={!this.showLeftScroll}\n            onClick={() => this.scrollLeft()}\n          >\n            <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n          </button>\n          <slot></slot>\n          <button\n            class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n            disabled={!this.showRightScroll}\n            onClick={() => this.scrollRight()}\n          >\n            <sdds-icon name=\"chevron_right\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-footer-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsFooterGroup extends Components.SddsFooterGroup, HTMLElement {}
+export const SddsFooterGroup: {
+  prototype: SddsFooterGroup;
+  new (): SddsFooterGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sdds-footer-group.js

@@ -0,0 +1,61 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const sddsFooterGroupCss = ":host{display:block}:host .footer-top-title{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);opacity:var(--sdds-footer-top-title-opacity);color:var(--sdds-footer-top-links);padding-bottom:8px}:host button.footer-top-title-button{display:none;border:none;width:100%;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-footer-top-links);background-color:transparent;text-align:left;padding:19px 24px;justify-content:space-between;border-bottom:1px solid var(--sdds-footer-top-divider)}:host button.footer-top-title-button.expanded{border-bottom:none}:host button.footer-top-title-button.expanded sdds-icon{transform:rotateZ(180deg)}:host button.footer-top-title-button:hover{cursor:pointer}:host button.footer-top-title-button:active{background-color:var(--sdds-footer-top-button-active)}:host button.footer-top-title-button:focus-visible{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host button.footer-top-title-button sdds-icon{transition:transform 0.2s ease-in-out}:host [role=list]{list-style:none;padding:0;margin:0;display:flex;gap:8px}:host [role=list].left,:host [role=list].right{gap:24px}:host [role=list].top-part-child{flex-direction:column}@media all and (max-width: 992px){:host [role=list].left:not(.top-part-child){flex-direction:column}:host [role=list].left:not(.top-part-child).left,:host [role=list].left:not(.top-part-child).right{gap:8px}:host [role=list].top-part-child.closed{display:none}:host [role=list].top-part-child{gap:0}:host .footer-top-title{display:none}:host button.footer-top-title-button{display:flex;align-items:center}}";
+
+const SddsFooterGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /** If the group is placed in the main part of the footer it can have either left or right as a slot position otherwise undefined. */
+    this.slotPostion = null;
+    /** Indicates the if group is part of the top part of the footer. */
+    this.topPartGroup = false;
+    this.titleText = undefined;
+    this.open = false;
+  }
+  connectedCallback() {
+    this.topPartGroup = this.host.parentElement.slot === 'top';
+    if (!this.topPartGroup) {
+      this.slotPostion = this.host.parentElement.slot === 'main-right' ? 'right' : 'left';
+    }
+  }
+  render() {
+    return (h(Host, null, this.titleText && this.topPartGroup && (h("div", { class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { onClick: () => {
+        this.open = !this.open;
+      }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("sdds-icon", { name: "chevron_down", size: "20px" }))), h("div", { role: "list", class: `${this.slotPostion ? this.slotPostion : ''}
+            ${this.topPartGroup ? 'top-part-child' : ''}
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", null))));
+  }
+  get host() { return this; }
+  static get style() { return sddsFooterGroupCss; }
+}, [1, "sdds-footer-group", {
+    "titleText": [1, "title-text"],
+    "open": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-footer-group", "sdds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-footer-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsFooterGroup$1);
+      }
+      break;
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SddsFooterGroup = SddsFooterGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsFooterGroup, defineCustomElement };
+
+//# sourceMappingURL=sdds-footer-group.js.map

package/dist/components/sdds-footer-group.js.map

@@ -0,0 +1 @@
+{"file":"sdds-footer-group.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,gmDAAgmD;;MCQ9mDA,iBAAe;;;;;;IAUlB,gBAAW,GAAqB,IAAI,CAAC;;IAGrC,iBAAY,GAAY,KAAK,CAAC;;gBANb,KAAK;;EAQ9B,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,KAAK,CAAC;IAC3D,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;KACrF;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,KAClC,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD,EAEA,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,KAClC,cACE,OAAO,EAAE;QACP,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;OACxB,EACD,KAAK,EAAE,4BAA4B,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,QAAQ,EAAE,IAErE,IAAI,CAAC,SAAS,EACf,iBAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CAChD,CACV,EACD,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,EAAE;cAC9C,IAAI,CAAC,YAAY,GAAG,gBAAgB,GAAG,EAAE;cACzC,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,QAAQ,EAAE,IAEvC,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsFooterGroup"],"sources":["./src/components/footer/webcomponent/sdds-footer-group/sdds-footer-group.scss?tag=sdds-footer-group&encapsulation=shadow","./src/components/footer/webcomponent/sdds-footer-group/sdds-footer-group.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n:host {\n  display: block;\n\n  .footer-top-title {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    opacity: var(--sdds-footer-top-title-opacity);\n    color: var(--sdds-footer-top-links);\n    padding-bottom: 8px;\n  }\n\n  button.footer-top-title-button {\n    display: none;\n    border: none;\n    width: 100%;\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-footer-top-links);\n    background-color: transparent;\n    text-align: left;\n    padding: 19px 24px;\n    justify-content: space-between;\n    border-bottom: 1px solid var(--sdds-footer-top-divider);\n\n    &.expanded {\n      border-bottom: none;\n\n      sdds-icon {\n        transform: rotateZ(180deg);\n      }\n    }\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:active {\n      background-color: var(--sdds-footer-top-button-active);\n    }\n\n    &:focus-visible {\n      @include sdds-focus-state;\n    }\n\n    sdds-icon {\n      transition: transform 0.2s ease-in-out;\n    }\n  }\n\n  [role='list'] {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    display: flex;\n    gap: 8px;\n\n    &.left,\n    &.right {\n      gap: 24px;\n    }\n\n    &.top-part-child {\n      flex-direction: column;\n    }\n  }\n\n  @media all and (max-width: 992px) {\n    [role='list'].left:not(.top-part-child) {\n      flex-direction: column;\n\n      &.left,\n      &.right {\n        gap: 8px;\n      }\n    }\n\n    [role='list'].top-part-child.closed {\n      display: none;\n    }\n\n    [role='list'].top-part-child {\n      gap: 0;\n    }\n\n    .footer-top-title {\n      display: none;\n    }\n\n    button.footer-top-title-button {\n      display: flex;\n      align-items: center;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { HostElement, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-footer-group',\n  styleUrl: 'sdds-footer-group.scss',\n  shadow: true,\n})\nexport class SddsFooterGroup {\n  @Element() host: HostElement;\n\n  /** Title text for the link group, only valid on top part of footer. */\n  @Prop() titleText: string;\n\n  /** In mobile, this indicates when the group (if it's in the top part) is opened/closed. */\n  @State() open: boolean = false;\n\n  /** If the group is placed in the main part of the footer it can have either left or right as a slot position otherwise undefined. */\n  private slotPostion: 'left' | 'right' = null;\n\n  /** Indicates the if group is part of the top part of the footer. */\n  private topPartGroup: boolean = false;\n\n  connectedCallback() {\n    this.topPartGroup = this.host.parentElement.slot === 'top';\n    if (!this.topPartGroup) {\n      this.slotPostion = this.host.parentElement.slot === 'main-right' ? 'right' : 'left';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.titleText && this.topPartGroup && (\n          <div class=\"footer-top-title\">{this.titleText}</div>\n        )}\n\n        {this.titleText && this.topPartGroup && (\n          <button\n            onClick={() => {\n              this.open = !this.open;\n            }}\n            class={`footer-top-title-button  ${this.open ? 'expanded' : 'closed'}`}\n          >\n            {this.titleText}\n            <sdds-icon name=\"chevron_down\" size=\"20px\"></sdds-icon>\n          </button>\n        )}\n        <div\n          role=\"list\"\n          class={`${this.slotPostion ? this.slotPostion : ''}\n            ${this.topPartGroup ? 'top-part-child' : ''}\n            ${this.open ? 'expanded' : 'closed'}`}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{sdds-footer-link.d.ts → sdds-footer-item.d.ts}

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

package/dist/components/sdds-footer-item.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sddsFooterItemCss = "[role=listitem] ::slotted(*){font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls);color:var(--sdds-footer-main-links);opacity:var(--sdds-footer-main-links-opacity);text-decoration:none}[role=listitem] ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}[role=listitem] ::slotted(*:hover){text-decoration:underline}[role=listitem].top-part-child ::slotted(*){color:var(--sdds-footer-top-links);font-family:\"Scania Sans Semi Condensed\", \"Scania Sans Condensed\", arial, helvetica, sans-serif;font-weight:bold;font-size:14px;line-height:18px}[role=listitem].top-part-child ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}@media all and (max-width: 992px){[role=listitem].top-part-child{border-bottom:1px solid var(--sdds-footer-top-divider)}[role=listitem].top-part-child ::slotted(*){display:block;height:100%;padding:19px 40px;font-weight:normal}[role=listitem].top-part-child ::slotted(*:hover){text-decoration:underline;background-color:var(--sdds-footer-top-links-background-hover)}[role=listitem].top-part-child ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}}";
+
+const SddsFooterItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.parentIsTopPart = false;
+  }
+  connectedCallback() {
+    this.parentIsTopPart = this.host.closest('sdds-footer-group').parentElement.slot === 'top';
+  }
+  render() {
+    return (h("div", { role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", null)));
+  }
+  get host() { return this; }
+  static get style() { return sddsFooterItemCss; }
+}, [1, "sdds-footer-item"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-footer-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-footer-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsFooterItem$1);
+      }
+      break;
+  } });
+}
+
+const SddsFooterItem = SddsFooterItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsFooterItem, defineCustomElement };
+
+//# sourceMappingURL=sdds-footer-item.js.map

package/dist/components/sdds-footer-item.js.map

@@ -0,0 +1 @@
+{"file":"sdds-footer-item.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,6qCAA6qC;;MCQ1rCA,gBAAc;EAL3B;;;;IAQU,oBAAe,GAAY,KAAK,CAAC;GAa1C;EAXC,iBAAiB;IACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,aAAa,CAAC,IAAI,KAAK,KAAK,CAAC;GAC5F;EAED,MAAM;IACJ,QACE,WAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,eAAe,GAAG,gBAAgB,GAAG,EAAE,EAAE,IAC3E,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsFooterItem"],"sources":["./src/components/footer/webcomponent/sdds-footer-item/sdds-footer-item.scss?tag=sdds-footer-item&encapsulation=shadow","./src/components/footer/webcomponent/sdds-footer-item/sdds-footer-item.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n[role='listitem'] {\n  ::slotted(*) {\n    font: var(--sdds-headline-06);\n    letter-spacing: var(--sdds-headline-06-ls);\n    color: var(--sdds-footer-main-links);\n    opacity: var(--sdds-footer-main-links-opacity);\n    text-decoration: none;\n\n  }\n\n  ::slotted(*:focus-visible) {\n    @include sdds-focus-state;\n  }\n\n\n  ::slotted(*:hover) {\n    text-decoration: underline;\n    }\n\n  &.top-part-child {\n    ::slotted(*) {\n      color: var(--sdds-footer-top-links);\n      font-family: 'Scania Sans Semi Condensed', 'Scania Sans Condensed', arial, helvetica,\n        sans-serif;\n      font-weight: bold;\n      font-size: 14px;\n      line-height: 18px;\n    }\n\n    ::slotted(*:focus-visible) {\n      @include sdds-focus-state;\n    }\n  }\n}\n\n@media all and (max-width: 992px) {\n  [role='listitem'].top-part-child {\n    border-bottom: 1px solid var(--sdds-footer-top-divider);\n\n    ::slotted(*) {\n      display: block;\n      height: 100%;\n      padding: 19px 40px;\n      font-weight: normal;\n    }\n\n\n    ::slotted(*:hover){\n        text-decoration: underline;\n        background-color: var(--sdds-footer-top-links-background-hover);\n    }\n\n    ::slotted(*:focus-visible){\n      @include sdds-focus-state;\n    }\n  }\n}\n","import { Component, Element, h } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-footer-item',\n  styleUrl: 'sdds-footer-item.scss',\n  shadow: true,\n})\nexport class SddsFooterItem {\n  @Element() host: HostElement;\n\n  private parentIsTopPart: boolean = false;\n\n  connectedCallback() {\n    this.parentIsTopPart = this.host.closest('sdds-footer-group').parentElement.slot === 'top';\n  }\n\n  render() {\n    return (\n      <div role=\"listitem\" class={`${this.parentIsTopPart ? 'top-part-child' : ''}`}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-footer.js

@@ -11,8 +11,7 @@ const SddsFooter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.hasTopPart = undefined;
   }
   connectedCallback() {
-    const children = Array.from(this.host.children);
-    this.hasTopPart = children.some((element) => element.slot === 'top');
+    this.hasTopPart = Array.from(this.host.children).some((element) => element.slot === 'top');
   }
   render() {
     return (h(Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("footer", null, this.hasTopPart && (h("div", { class: "footer-top" }, h("slot", { name: "top" }))), h("div", { class: "footer-main" }, h("div", { class: "footer-main-top" }, h("div", { class: "footer-bottom-left" }, h("slot", { name: "main-left" })), h("div", { class: "footer-bottom-right" }, h("slot", { name: "main-right" }))), h("div", { class: "footer-main-bottom" }, h("small", { class: "copyright" }, "Copyright \u00A9 ", new Date().getFullYear(), " Scania"), h("div", { class: "brand" }, h("p", null, "Scania")))))));

package/dist/components/sdds-footer.js.map

@@ -1 +1 @@
-{"file":"sdds-footer.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ghDAAghD;;MCQzhDA,YAAU;;;;;uBAE0B,IAAI;;;EAMnD,iBAAiB;IACf,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;GACtE;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,EAAE,IAC/E,kBACG,IAAI,CAAC,UAAU,KACd,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACP,EACD,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,EACN,WAAK,KAAK,EAAC,oBAAoB,IAC7B,aAAO,KAAK,EAAC,WAAW,yBAAmB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,YAAgB,EACnF,WAAK,KAAK,EAAC,OAAO,IAChB,sBAAa,CACT,CACF,CACF,CACC,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsFooter"],"sources":["./src/components/footer/webcomponent/sdds-footer.scss?tag=sdds-footer&encapsulation=shadow","./src/components/footer/webcomponent/sdds-footer.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  $grid-xs: 0;\n  $grid-sm: 608px;\n  $grid-md: 800px;\n  $grid-lg: 992px;\n  $grid-xlg: 1184px;\n  $grid-xxlg: 1376px;\n  $grid-max: 1584px;\n\n  .footer-top {\n    background-color: var(--sdds-footer-top-background);\n    padding: 40px;\n\n    ::slotted(*) {\n      display: grid;\n      grid-template-columns: 1fr 1fr 1fr 1fr;\n      row-gap: 40px;\n      width: 100%;\n    }\n  }\n\n  .footer-main {\n    background-color: var(--sdds-footer-main-background);\n    padding: 0 40px;\n  }\n\n  .footer-main-top {\n    padding: 40px 0;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .footer-bottom-right,\n  .footer-bottom-left {\n    ::slotted(*) {\n      display: flex;\n      column-gap: 24px;\n    }\n  }\n\n  .footer-main-bottom {\n    padding: 40px 0;\n    display: flex;\n    justify-content: space-between;\n    border-top: 1px solid var(--sdds-footer-main-divider);\n\n    small.copyright {\n      margin: 0;\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      color: var(--sdds-footer-main-copyright);\n    }\n\n    .brand {\n      background-image: var(--sdds-background-image-scania-wordmark-white-svg);\n      background-repeat: no-repeat;\n      background-size: 117px;\n      background-position: right;\n      width: 117px;\n      height: 20px;\n\n      p {\n        color: transparent;\n        padding: 0;\n        margin: 0;\n        height: 100%;\n        visibility: hidden;\n      }\n    }\n  }\n\n  @media all and (max-width: $grid-lg) {\n    .footer-top {\n      padding: 0;\n\n      ::slotted(*) {\n        display: block;\n        width: 100%;\n      }\n    }\n\n    .footer-main {\n      padding: 0 24px;\n    }\n\n    .footer-main-top {\n      flex-direction: column;\n      row-gap: 48px;\n      padding: 24px 0;\n    }\n\n    .footer-bottom-left {\n      ::slotted(*) {\n        flex-direction: column;\n        gap: 8px;\n      }\n    }\n\n    .footer-main-bottom {\n      flex-direction: column;\n      padding-bottom: 32px;\n\n      p.copyright {\n        padding-bottom: 96px;\n      }\n\n      .brand {\n        width: 100%;\n      }\n    }\n  }\n}\n","import { Component, h, State, Element } from '@stencil/core';\nimport { Host, HostElement, Prop } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-footer',\n  styleUrl: 'sdds-footer.scss',\n  shadow: true,\n})\nexport class SddsFooter {\n  /** Mode variant of the component, based on current mode. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() hasTopPart: boolean;\n\n  @Element() host: HostElement;\n\n  connectedCallback() {\n    const children = Array.from(this.host.children);\n    this.hasTopPart = children.some((element) => element.slot === 'top');\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n        <footer>\n          {this.hasTopPart && (\n            <div class=\"footer-top\">\n              <slot name=\"top\"></slot>\n            </div>\n          )}\n          <div class=\"footer-main\">\n            <div class=\"footer-main-top\">\n              <div class=\"footer-bottom-left\">\n                <slot name=\"main-left\"></slot>\n              </div>\n              <div class=\"footer-bottom-right\">\n                <slot name=\"main-right\"></slot>\n              </div>\n            </div>\n            <div class=\"footer-main-bottom\">\n              <small class=\"copyright\">Copyright &#169; {new Date().getFullYear()} Scania</small>\n              <div class=\"brand\">\n                <p>Scania</p>\n              </div>\n            </div>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-footer.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ghDAAghD;;MCQzhDA,YAAU;;;;;uBAI0B,IAAI;;;EAKnD,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;GAC5F;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,EAAE,IAC/E,kBACG,IAAI,CAAC,UAAU,KACd,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACP,EACD,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,EACN,WAAK,KAAK,EAAC,oBAAoB,IAC7B,aAAO,KAAK,EAAC,WAAW,yBAAmB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,YAAgB,EACnF,WAAK,KAAK,EAAC,OAAO,IAChB,sBAAa,CACT,CACF,CACF,CACC,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsFooter"],"sources":["./src/components/footer/webcomponent/sdds-footer.scss?tag=sdds-footer&encapsulation=shadow","./src/components/footer/webcomponent/sdds-footer.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  $grid-lg: 992px;\n\n  .footer-top {\n    background-color: var(--sdds-footer-top-background);\n    padding: 40px;\n\n    ::slotted(*) {\n      display: grid;\n      grid-template-columns: 1fr 1fr 1fr 1fr;\n      row-gap: 40px;\n      width: 100%;\n    }\n  }\n\n  .footer-main {\n    background-color: var(--sdds-footer-main-background);\n    padding: 0 40px;\n  }\n\n  .footer-main-top {\n    padding: 40px 0;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .footer-bottom-right,\n  .footer-bottom-left {\n    ::slotted(*) {\n      display: flex;\n      column-gap: 24px;\n    }\n  }\n\n  .footer-main-bottom {\n    padding: 40px 0;\n    display: flex;\n    justify-content: space-between;\n    border-top: 1px solid var(--sdds-footer-main-divider);\n\n    small.copyright {\n      margin: 0;\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      color: var(--sdds-footer-main-copyright);\n    }\n\n    .brand {\n      background-image: var(--sdds-background-image-scania-wordmark-white-svg);\n      background-repeat: no-repeat;\n      background-size: 117px;\n      background-position: right;\n      width: 117px;\n      height: 20px;\n\n      p {\n        color: transparent;\n        padding: 0;\n        margin: 0;\n        height: 100%;\n        visibility: hidden;\n      }\n    }\n  }\n\n  @media all and (max-width: $grid-lg) {\n    .footer-top {\n      padding: 0;\n\n      ::slotted(*) {\n        display: block;\n        width: 100%;\n      }\n    }\n\n    .footer-main {\n      padding: 0 24px;\n    }\n\n    .footer-main-top {\n      flex-direction: column;\n      row-gap: 48px;\n      padding: 24px 0;\n    }\n\n    .footer-bottom-left {\n      ::slotted(*) {\n        flex-direction: column;\n        gap: 8px;\n      }\n    }\n\n    .footer-main-bottom {\n      flex-direction: column;\n      padding-bottom: 32px;\n\n      p.copyright {\n        padding-bottom: 96px;\n      }\n\n      .brand {\n        width: 100%;\n      }\n    }\n  }\n}\n","import { Component, h, State, Element } from '@stencil/core';\nimport { Host, HostElement, Prop } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-footer',\n  styleUrl: 'sdds-footer.scss',\n  shadow: true,\n})\nexport class SddsFooter {\n  @Element() host: HostElement;\n\n  /** Mode variant of the component, based on current mode. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Indictes whether or not the footer has a top part. */\n  @State() hasTopPart: boolean;\n\n  connectedCallback() {\n    this.hasTopPart = Array.from(this.host.children).some((element) => element.slot === 'top');\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n        <footer>\n          {this.hasTopPart && (\n            <div class=\"footer-top\">\n              <slot name=\"top\"></slot>\n            </div>\n          )}\n          <div class=\"footer-main\">\n            <div class=\"footer-main-top\">\n              <div class=\"footer-bottom-left\">\n                <slot name=\"main-left\"></slot>\n              </div>\n              <div class=\"footer-bottom-right\">\n                <slot name=\"main-right\"></slot>\n              </div>\n            </div>\n            <div class=\"footer-main-bottom\">\n              <small class=\"copyright\">Copyright &#169; {new Date().getFullYear()} Scania</small>\n              <div class=\"brand\">\n                <p>Scania</p>\n              </div>\n            </div>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-header-brand-symbol.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsHeaderBrandSymbol extends Components.SddsHeaderBrandSymbol, HTMLElement {}
+export const SddsHeaderBrandSymbol: {
+  prototype: SddsHeaderBrandSymbol;
+  new (): SddsHeaderBrandSymbol;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sdds-header-brand-symbol.js

@@ -0,0 +1,53 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as inheritAriaAttributes } from './utils.js';
+import { d as defineCustomElement$3 } from './core-header-item.js';
+import { d as defineCustomElement$2 } from './header-item.js';
+
+const headerBrandSymbolCss = ":host sdds-header-item{display:none}:host sdds-header-item a{background-image:var(--sdds-background-image-scania-symbol-svg), var(--sdds-background-image-scania-symbol-png);background-size:30px auto;background-position:center;background-repeat:no-repeat}@media (min-width: 521px){:host sdds-header-item{display:block}}";
+
+const HeaderBrandSymbol = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.linkHref = 'https://www.scania.com';
+  }
+  render() {
+    const inheritedLinkProps = Object.assign({}, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("sdds-header-item", null, h("a", Object.assign({}, inheritedLinkProps, { href: this.linkHref })))));
+  }
+  get host() { return this; }
+  static get style() { return headerBrandSymbolCss; }
+}, [1, "sdds-header-brand-symbol", {
+    "linkHref": [1, "link-href"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-brand-symbol", "sdds-core-header-item", "sdds-header-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-brand-symbol":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderBrandSymbol);
+      }
+      break;
+    case "sdds-core-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "sdds-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SddsHeaderBrandSymbol = HeaderBrandSymbol;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderBrandSymbol, defineCustomElement };
+
+//# sourceMappingURL=sdds-header-brand-symbol.js.map

package/dist/components/sdds-header-brand-symbol.js.map

@@ -0,0 +1 @@
+{"file":"sdds-header-brand-symbol.js","mappings":";;;;;AAAA,MAAM,oBAAoB,GAAG,gUAAgU;;MCQhV,iBAAiB;;;;;oBAID,wBAAwB;;EAEnD,MAAM;IACJ,MAAM,kBAAkB,qBACnB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IACF,QACE,EAAC,IAAI,QACH,4BACE,yBAAO,kBAAkB,IAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,IAAM,CACnC,CACd,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-brand-symbol/header-brand-symbol.scss?tag=sdds-header-brand-symbol&encapsulation=shadow","./src/components/header/webcomponent/header-brand-symbol/header-brand-symbol.tsx"],"sourcesContent":[":host {\n  // \"On smaller breakpoints, starting from the width 520px, the Scania symbol is removed.\"\n  // (tegel.scania.com, 2023-03-01)\n  sdds-header-item {\n    display: none;\n  }\n\n  sdds-header-item a {\n    background-image: var(--sdds-background-image-scania-symbol-svg),\n      var(--sdds-background-image-scania-symbol-png);\n    background-size: 30px auto;\n    background-position: center;\n    background-repeat: no-repeat;\n  }\n\n  @media (min-width: 521px) {\n    sdds-header-item {\n      display: block;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-brand-symbol',\n  styleUrl: 'header-brand-symbol.scss',\n  shadow: true,\n})\nexport class HeaderBrandSymbol {\n  @Element() host: HTMLElement;\n\n  /** The href for the logo link. */\n  @Prop() linkHref: string = 'https://www.scania.com';\n\n  render() {\n    const inheritedLinkProps = {\n      ...inheritAriaAttributes(this.host),\n    };\n    return (\n      <Host>\n        <sdds-header-item>\n          <a {...inheritedLinkProps} href={this.linkHref}></a>\n        </sdds-header-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-header-cell.js

@@ -14,9 +14,9 @@ const TableHeaderCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.sddsSortChange = createEvent(this, "sddsSortChange", 7);
-    this.internalSddsTextAlign = createEvent(this, "internalSddsTextAlign", 7);
-    this.internalSddsHover = createEvent(this, "internalSddsHover", 7);
+    this.sddsSortChange = createEvent(this, "sddsSortChange", 6);
+    this.internalSddsTextAlign = createEvent(this, "internalSddsTextAlign", 6);
+    this.internalSddsHover = createEvent(this, "internalSddsHover", 6);
     this.sortButtonClick = (key) => {
       // Toggling direction of sorting as we only use one button for sorting
       if (this.sortingDirection !== 'asc') {