@scania/tegel 0.0.4 → 0.0.6

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js

@@ -1,129 +0,0 @@
-import { Host, h } from '@stencil/core';
-export class InlineTabsFullbleed {
-  constructor() {
-    this.navWrapperElement = null; // reference to container with nav buttons
-    this.componentWidth = 0; // visible width of this component
-    this.buttonsWidth = 0; // total width of all nav items combined
-    this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
-    this.buttonWidth = 0; // current calculated width of the largest nav button
-    this.modeVariant = null;
-    this.tabs = [];
-    this.showLeftScroll = false;
-    this.showRightScroll = false;
-  }
-  componentDidRender() {
-    this.calculateButtonWidth();
-  }
-  componentDidLoad() {
-    const resizeObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        const componentWidth = entry.contentRect.width;
-        let buttonsWidth = 0;
-        const navButtons = Array.from(this.host.children);
-        navButtons.forEach((navButton) => {
-          const style = window.getComputedStyle(navButton);
-          buttonsWidth +=
-            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');
-        });
-        this.componentWidth = componentWidth;
-        this.buttonsWidth = buttonsWidth;
-        this.scrollWidth = buttonsWidth - componentWidth;
-        if (this.buttonsWidth > this.componentWidth) {
-          this.evaluateScrollButtons();
-        }
-        else {
-          this.showLeftScroll = false;
-          this.showRightScroll = false;
-        }
-      });
-    });
-    resizeObserver.observe(this.navWrapperElement);
-    this.calculateButtonWidth();
-  }
-  calculateButtonWidth() {
-    let best = 0;
-    const navButtons = Array.from(this.host.children);
-    navButtons.forEach((navButton) => {
-      const style = window.getComputedStyle(navButton);
-      const width = navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-      if (width > best) {
-        best = width;
-      }
-    });
-    this.buttonWidth = best;
-  }
-  scrollRight() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;
-    this.evaluateScrollButtons();
-  }
-  scrollLeft() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;
-    this.evaluateScrollButtons();
-  }
-  evaluateScrollButtons() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    if (scroll >= this.scrollWidth) {
-      this.showRightScroll = false;
-    }
-    else {
-      this.showRightScroll = true;
-    }
-    if (scroll <= 0) {
-      this.showLeftScroll = false;
-    }
-    else {
-      this.showLeftScroll = true;
-    }
-  }
-  render() {
-    return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: `sdds-inline-tabs-fullbleed` }, h("div", { class: "sdds-inline-tabs-fullbleed-wrapper", ref: (el) => {
-        this.navWrapperElement = el;
-      } }, h("slot", null)), h("div", { class: "sdds-inline-tabs-fullbleed-navigation" }, h("button", { class: `sdds-inline-tabs-fullbleed--forward ${this.showRightScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z" }))), h("button", { class: `sdds-inline-tabs-fullbleed--back ${this.showLeftScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z" })))))));
-  }
-  static get is() { return "sdds-inline-tabs-fullbleed"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["inline-tabs-fullbleed.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["inline-tabs-fullbleed.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "modeVariant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variant of the tabs, primary= on white, secondary= on grey50"
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "tabs": {},
-      "showLeftScroll": {},
-      "showRightScroll": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-}
-//# sourceMappingURL=inline-tabs-fullbleed.js.map

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inline-tabs-fullbleed.js","sourceRoot":"","sources":["../../../../src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, State, Element, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tabs-fullbleed',\n  styleUrl: 'inline-tabs-fullbleed.scss',\n  shadow: true,\n})\nexport class InlineTabsFullbleed {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @Element() host: HTMLElement;\n\n  @State() tabs: Array<any> = []; // array with metadata for slotted children\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\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  buttonWidth: number = 0; // current calculated width of the largest nav button\n\n  componentDidRender() {\n    this.calculateButtonWidth();\n  }\n\n  componentDidLoad() {\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          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');\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    this.calculateButtonWidth();\n  }\n\n  calculateButtonWidth() {\n    let best = 0;\n    const navButtons = Array.from(this.host.children);\n    navButtons.forEach((navButton: HTMLElement) => {\n      const style = window.getComputedStyle(navButton);\n      const width =\n        navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n      if (width > best) {\n        best = width;\n      }\n    });\n\n    this.buttonWidth = best;\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\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  render() {\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n        <div class={`sdds-inline-tabs-fullbleed`}>\n          <div\n            class=\"sdds-inline-tabs-fullbleed-wrapper\"\n            ref={(el) => {\n              this.navWrapperElement = el as HTMLElement;\n            }}\n          >\n            <slot />\n          </div>\n          <div class=\"sdds-inline-tabs-fullbleed-navigation\">\n            <button\n              class={`sdds-inline-tabs-fullbleed--forward ${\n                this.showRightScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n              }`}\n              onClick={() => this.scrollRight()}\n              disabled={!this.showRightScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n                ></path>\n              </svg>\n            </button>\n            <button\n              class={`sdds-inline-tabs-fullbleed--back ${\n                this.showLeftScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n              }`}\n              onClick={() => this.scrollLeft()}\n              disabled={!this.showLeftScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n                ></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js

@@ -1,47 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Tabs',
-  parameters: {
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    modeVariant: {
-      name: 'Mode variant',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-  },
-};
-const Template = ({ modeVariant }) => formatHtmlPreview(`
-  <sdds-inline-tabs-fullbleed id="inline-tabs-fullbleed-example" ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-      <a href="#">Tab name</a>
-      <a href="#" class="sdds-inline-tabs-fullbleed--tab__active">Active tab</a>
-      <a href="#">Tab name</a>
-      <a href="#">Tab name</a>
-      <a href="#" class="sdds-inline-tabs-fullbleed--tab__disabled" aria-disabled="true" tabindex="-1">Disabled tab</a>
-    </sdds-inline-tabs-fullbleed>
-`);
-export const InlineTabsFullbleed = Template.bind({});
-InlineTabsFullbleed.args = {};
-//# sourceMappingURL=inline-tabs-fullbleed.stories.js.map

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inline-tabs-fullbleed.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,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,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,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,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;GACnC;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACnC,iBAAiB,CAAC;mEAC+C,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAA,CAAC,CAAC,EAAE;;;;;;;CAO3J,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACrD,mBAAmB,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Tabs',\n  parameters: {\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=10544%3A32834&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\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  args: {\n    modeVariant: 'Inherit from parent',\n  },\n};\n\nconst Template = ({ modeVariant }) =>\n  formatHtmlPreview(`\n  <sdds-inline-tabs-fullbleed id=\"inline-tabs-fullbleed-example\" ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"`: ''}>\n      <a href=\"#\">Tab name</a>\n      <a href=\"#\" class=\"sdds-inline-tabs-fullbleed--tab__active\">Active tab</a>\n      <a href=\"#\">Tab name</a>\n      <a href=\"#\">Tab name</a>\n      <a href=\"#\" class=\"sdds-inline-tabs-fullbleed--tab__disabled\" aria-disabled=\"true\" tabindex=\"-1\">Disabled tab</a>\n    </sdds-inline-tabs-fullbleed>\n`);\n\nexport const InlineTabsFullbleed = Template.bind({});\nInlineTabsFullbleed.args = {};\n"]}

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

@@ -1,58 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './icon.js';
-
-const sddsFooterLinkGroupCss = ".sc-sdds-footer-link-group-h{display:block;width:100%}.sc-sdds-footer-link-group-h .footer-top-title.sc-sdds-footer-link-group{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}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group{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)}.sc-sdds-footer-link-group-h button.footer-top-title-button.expanded.sc-sdds-footer-link-group{border-bottom:none}.sc-sdds-footer-link-group-h button.footer-top-title-button.expanded.sc-sdds-footer-link-group sdds-icon.sc-sdds-footer-link-group{transform:rotateZ(180deg)}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group:hover{cursor:pointer}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group:active{background-color:var(--sdds-footer-top-button-active)}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group sdds-icon.sc-sdds-footer-link-group{transition:transform 0.2s ease-in-out}.sc-sdds-footer-link-group-h [role=list].sc-sdds-footer-link-group{list-style:none;padding:0;margin:0;display:flex;gap:8px}.sc-sdds-footer-link-group-h [role=list].top-part-child.sc-sdds-footer-link-group{flex-direction:column}@media all and (max-width: 992px){.sc-sdds-footer-link-group-h [role=list].left.sc-sdds-footer-link-group:not(.top-part-child){flex-direction:column}.sc-sdds-footer-link-group-h [role=list].top-part-child.closed.sc-sdds-footer-link-group{display:none}.sc-sdds-footer-link-group-h [role=list].top-part-child.sc-sdds-footer-link-group{gap:0}.sc-sdds-footer-link-group-h .footer-top-title.sc-sdds-footer-link-group{display:none}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group{display:flex;align-items:center}}";
-
-const SddsFooterLinkGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.rightSlot = false;
-    this.parentIsTopPart = false;
-    this.titleText = undefined;
-    this.open = false;
-  }
-  connectedCallback() {
-    this.rightSlot = this.host.parentElement.slot === 'main-right';
-    this.parentIsTopPart = this.host.parentElement.slot === 'top';
-  }
-  render() {
-    return (h(Host, null, this.titleText && this.parentIsTopPart && (h("div", { class: "footer-top-title" }, this.titleText)), this.titleText && this.parentIsTopPart && (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.rightSlot ? 'right' : 'left'}
-        ${this.parentIsTopPart ? 'top-part-child' : ''}
-        ${this.open ? 'expanded' : 'closed'}
-        ` }, h("slot", null))));
-  }
-  get host() { return this; }
-  static get style() { return sddsFooterLinkGroupCss; }
-}, [6, "sdds-footer-link-group", {
-    "titleText": [1, "title-text"],
-    "open": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-footer-link-group", "sdds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-footer-link-group":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsFooterLinkGroup$1);
-      }
-      break;
-    case "sdds-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const SddsFooterLinkGroup = SddsFooterLinkGroup$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SddsFooterLinkGroup, defineCustomElement };
-
-//# sourceMappingURL=sdds-footer-link-group.js.map

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

@@ -1 +0,0 @@
-{"file":"sdds-footer-link-group.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,mlEAAmlE;;MCSrmEA,qBAAmB;;;;IAQ9B,cAAS,GAAY,KAAK,CAAC;IAE3B,oBAAe,GAAY,KAAK,CAAC;;gBAJR,KAAK;;EAM9B,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,YAAY,CAAC;IAC/D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,KAAK,CAAC;GAC/D;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,eAAe,KACrC,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD,EAEA,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,eAAe,KACrC,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;UACP,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,MAAM;UACjC,IAAI,CAAC,eAAe,GAAG,gBAAgB,GAAG,EAAE;UAC5C,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,QAAQ;SAClC,IAEC,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsFooterLinkGroup"],"sources":["./src/components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-group.scss?tag=sdds-footer-link-group&encapsulation=scoped","./src/components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-group.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\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    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    &.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\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-link-group',\n  styleUrl: 'sdds-footer-link-group.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsFooterLinkGroup {\n  /** Title text for the link group, only valid on top part of footer. */\n  @Prop() titleText: string;\n\n  @Element() host: HostElement;\n\n  @State() open: boolean = false;\n\n  rightSlot: boolean = false;\n\n  parentIsTopPart: boolean = false;\n\n  connectedCallback() {\n    this.rightSlot = this.host.parentElement.slot === 'main-right';\n    this.parentIsTopPart = this.host.parentElement.slot === 'top';\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.titleText && this.parentIsTopPart && (\n          <div class=\"footer-top-title\">{this.titleText}</div>\n        )}\n\n        {this.titleText && this.parentIsTopPart && (\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={`\n        ${this.rightSlot ? 'right' : 'left'}\n        ${this.parentIsTopPart ? 'top-part-child' : ''}\n        ${this.open ? 'expanded' : 'closed'}\n        `}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,46 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const sddsFooterLinkCss = "[role=listitem].sc-sdds-footer-link a.sc-sdds-footer-link{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].sc-sdds-footer-link a.sc-sdds-footer-link:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}[role=listitem].sc-sdds-footer-link a.sc-sdds-footer-link:hover{text-decoration:underline}[role=listitem].top-part-child.sc-sdds-footer-link a.sc-sdds-footer-link{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.sc-sdds-footer-link a.sc-sdds-footer-link:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}@media all and (max-width: 992px){[role=listitem].top-part-child.sc-sdds-footer-link{border-bottom:1px solid var(--sdds-footer-top-divider)}[role=listitem].top-part-child.sc-sdds-footer-link a.sc-sdds-footer-link{display:block;height:100%;padding:19px 40px;font-weight:normal}[role=listitem].top-part-child.sc-sdds-footer-link a.sc-sdds-footer-link:hover{text-decoration:underline;background-color:var(--sdds-footer-top-links-background-hover)}[role=listitem].top-part-child.sc-sdds-footer-link a.sc-sdds-footer-link:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}}";
-
-const SddsFooterLink$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.parentIsTopPart = false;
-    this.linkHref = undefined;
-    this.target = '_self';
-    this.rel = 'noopener';
-  }
-  connectedCallback() {
-    this.parentIsTopPart = this.host.closest('sdds-footer-link-group').parentElement.slot === 'top';
-  }
-  render() {
-    return (h("div", { role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("a", { target: this.target, rel: this.rel, href: this.linkHref }, h("slot", null))));
-  }
-  get host() { return this; }
-  static get style() { return sddsFooterLinkCss; }
-}, [6, "sdds-footer-link", {
-    "linkHref": [1, "link-href"],
-    "target": [1],
-    "rel": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-footer-link"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-footer-link":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsFooterLink$1);
-      }
-      break;
-  } });
-}
-
-const SddsFooterLink = SddsFooterLink$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SddsFooterLink, defineCustomElement };
-
-//# sourceMappingURL=sdds-footer-link.js.map

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

@@ -1 +0,0 @@
-{"file":"sdds-footer-link.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,i5CAAi5C;;MCS95CA,gBAAc;;;;IAYzB,oBAAe,GAAY,KAAK,CAAC;;kBAPyB,OAAO;eAG3C,UAAU;;EAMhC,iBAAiB;IACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC,aAAa,CAAC,IAAI,KAAK,KAAK,CAAC;GACjG;EAED,MAAM;IACJ,QACE,WAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,eAAe,GAAG,gBAAgB,GAAG,EAAE,EAAE,IAC3E,SAAG,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,IACxD,eAAa,CACX,CACA,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsFooterLink"],"sources":["./src/components/footer/webcomponent/sdds-footer-link/sdds-footer-link.scss?tag=sdds-footer-link&encapsulation=scoped","./src/components/footer/webcomponent/sdds-footer-link/sdds-footer-link.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n[role='listitem'] {\n  a {\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    &:focus {\n      @include sdds-focus-state;\n    }\n\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n\n  &.top-part-child {\n    a {\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      &:focus {\n        @include sdds-focus-state;\n      }\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    a {\n      display: block;\n      height: 100%;\n      padding: 19px 40px;\n      font-weight: normal;\n\n      &:hover {\n        text-decoration: underline;\n        background-color: var(--sdds-footer-top-links-background-hover);\n      }\n\n      &:focus {\n        @include sdds-focus-state;\n      }\n    }\n  }\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-footer-link',\n  styleUrl: 'sdds-footer-link.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsFooterLink {\n  /** URL for the link */\n  @Prop() linkHref: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that prevents the opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  @Element() host: HostElement;\n\n  parentIsTopPart: boolean = false;\n\n  connectedCallback() {\n    this.parentIsTopPart = this.host.closest('sdds-footer-link-group').parentElement.slot === 'top';\n  }\n\n  render() {\n    return (\n      <div role=\"listitem\" class={`${this.parentIsTopPart ? 'top-part-child' : ''}`}>\n        <a target={this.target} rel={this.rel} href={this.linkHref}>\n          <slot></slot>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-inline-tabs-fullbleed.d.ts

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

package/dist/components/sdds-inline-tabs-fullbleed.js

@@ -1,119 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const inlineTabsFullbleedCss = ".sdds-inline-tabs-fullbleed{box-sizing:border-box;display:flex;position:relative;}.sdds-inline-tabs-fullbleed *{box-sizing:border-box}.sdds-inline-tabs-fullbleed::after{content:\" \";display:block;border-bottom:1px solid var(--sdds-inline-tabs-fullbleed-horizontal-divider-background);opacity:var(--sdds-inline-tabs-fullbleed-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}.sdds-inline-tabs-fullbleed-wrapper{display:flex;flex-wrap:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}.sdds-inline-tabs-fullbleed-wrapper::-webkit-scrollbar{display:none}.sdds-inline-tabs-fullbleed--forward,.sdds-inline-tabs-fullbleed--back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;right:0;top:0;background-color:var(--sdds-inline-tabs-fullbleed-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-inline-tabs-fullbleed--forward__show,.sdds-inline-tabs-fullbleed--back__show{opacity:1;pointer-events:all}.sdds-inline-tabs-fullbleed--forward:hover,.sdds-inline-tabs-fullbleed--back:hover{background-color:var(--sdds-inline-tabs-fullbleed-scroll-btn-background-hover)}.sdds-inline-tabs-fullbleed--forward:active,.sdds-inline-tabs-fullbleed--back:active{background-color:var(--sdds-inline-tabs-fullbleed-scroll-btn-background-active)}.sdds-inline-tabs-fullbleed--forward:focus,.sdds-inline-tabs-fullbleed--back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-inline-tabs-fullbleed--forward svg,.sdds-inline-tabs-fullbleed--back svg{fill:var(--sdds-inline-tabs-scroll-btn-color)}.sdds-inline-tabs-fullbleed-centered{justify-content:center}::slotted(.sdds-inline-tabs-fullbleed--tab){font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-inline-tabs-fullbleed-tab-color);opacity:0.6;padding:16px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;text-align:left}::slotted(.sdds-inline-tabs-fullbleed--tab)::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-fullbleed-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}::slotted(.sdds-inline-tabs-fullbleed--tab__active){color:var(--sdds-inline-tabs-fullbleed-tab-color-active);opacity:1}::slotted(.sdds-inline-tabs-fullbleed--tab__active)::after{width:100%;background-color:var(--sdds-inline-tabs-fullbleed-tab-indicator-background-active)}::slotted(.sdds-inline-tabs-fullbleed--tab:first-child){margin-left:32px}::slotted(.sdds-inline-tabs-fullbleed--tab:last-child){margin-right:32px}::slotted(.sdds-inline-tabs-fullbleed--tab:hover){color:var(--sdds-inline-tabs-fullbleed-tab-color-hover);opacity:1}::slotted(.sdds-inline-tabs-fullbleed--tab:hover)::after{width:100%}::slotted(.sdds-inline-tabs-fullbleed--tab:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px;color:var(--sdds-inline-tabs-fullbleed-tab-color-focus);opacity:1}::slotted(.sdds-inline-tabs-fullbleed--tab:focus)::after{width:0}::slotted(.sdds-inline-tabs-fullbleed--tab__active:focus)::after{width:100%}::slotted(.sdds-inline-tabs-fullbleed--tab__disabled){color:var(--sdds-inline-tabs-fullbleed-tab-color-disabled);pointer-events:none;opacity:var(--sdds-inline-tabs-fullbleed-tab-color-opacity-disabled)}.sdds-inline-tabs-fullbleed{background-color:var(--sdds-inline-tabs-fullbleed-tab-background)}.sdds-inline-tabs-fullbleed .sdds-inline-tabs-fullbleed--forward{background-color:var(--sdds-inline-tabs-fullbleed-tab-background)}.sdds-inline-tabs-fullbleed .sdds-inline-tabs-fullbleed--back{background-color:var(--sdds-inline-tabs-fullbleed-tab-background)}";
-
-const InlineTabsFullbleed = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.navWrapperElement = null; // reference to container with nav buttons
-    this.componentWidth = 0; // visible width of this component
-    this.buttonsWidth = 0; // total width of all nav items combined
-    this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
-    this.buttonWidth = 0; // current calculated width of the largest nav button
-    this.modeVariant = null;
-    this.tabs = [];
-    this.showLeftScroll = false;
-    this.showRightScroll = false;
-  }
-  componentDidRender() {
-    this.calculateButtonWidth();
-  }
-  componentDidLoad() {
-    const resizeObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        const componentWidth = entry.contentRect.width;
-        let buttonsWidth = 0;
-        const navButtons = Array.from(this.host.children);
-        navButtons.forEach((navButton) => {
-          const style = window.getComputedStyle(navButton);
-          buttonsWidth +=
-            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');
-        });
-        this.componentWidth = componentWidth;
-        this.buttonsWidth = buttonsWidth;
-        this.scrollWidth = buttonsWidth - componentWidth;
-        if (this.buttonsWidth > this.componentWidth) {
-          this.evaluateScrollButtons();
-        }
-        else {
-          this.showLeftScroll = false;
-          this.showRightScroll = false;
-        }
-      });
-    });
-    resizeObserver.observe(this.navWrapperElement);
-    this.calculateButtonWidth();
-  }
-  calculateButtonWidth() {
-    let best = 0;
-    const navButtons = Array.from(this.host.children);
-    navButtons.forEach((navButton) => {
-      const style = window.getComputedStyle(navButton);
-      const width = navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-      if (width > best) {
-        best = width;
-      }
-    });
-    this.buttonWidth = best;
-  }
-  scrollRight() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;
-    this.evaluateScrollButtons();
-  }
-  scrollLeft() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;
-    this.evaluateScrollButtons();
-  }
-  evaluateScrollButtons() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    if (scroll >= this.scrollWidth) {
-      this.showRightScroll = false;
-    }
-    else {
-      this.showRightScroll = true;
-    }
-    if (scroll <= 0) {
-      this.showLeftScroll = false;
-    }
-    else {
-      this.showLeftScroll = true;
-    }
-  }
-  render() {
-    return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: `sdds-inline-tabs-fullbleed` }, h("div", { class: "sdds-inline-tabs-fullbleed-wrapper", ref: (el) => {
-        this.navWrapperElement = el;
-      } }, h("slot", null)), h("div", { class: "sdds-inline-tabs-fullbleed-navigation" }, h("button", { class: `sdds-inline-tabs-fullbleed--forward ${this.showRightScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z" }))), h("button", { class: `sdds-inline-tabs-fullbleed--back ${this.showLeftScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z" })))))));
-  }
-  get host() { return this; }
-  static get style() { return inlineTabsFullbleedCss; }
-}, [1, "sdds-inline-tabs-fullbleed", {
-    "modeVariant": [1, "mode-variant"],
-    "tabs": [32],
-    "showLeftScroll": [32],
-    "showRightScroll": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-inline-tabs-fullbleed"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-inline-tabs-fullbleed":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, InlineTabsFullbleed);
-      }
-      break;
-  } });
-}
-
-const SddsInlineTabsFullbleed = InlineTabsFullbleed;
-const defineCustomElement = defineCustomElement$1;
-
-export { SddsInlineTabsFullbleed, defineCustomElement };
-
-//# sourceMappingURL=sdds-inline-tabs-fullbleed.js.map

package/dist/components/sdds-inline-tabs-fullbleed.js.map

@@ -1 +0,0 @@
-{"file":"sdds-inline-tabs-fullbleed.js","mappings":"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","names":[],"sources":["./src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.scss?tag=sdds-inline-tabs-fullbleed&encapsulation=shadow","./src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n.sdds-inline-tabs-fullbleed {\n  @include sdds-box-sizing;\n\n  display: flex;\n  position: relative;\n\n  &::after {\n    content: ' ';\n    display: block;\n    border-bottom: 1px solid var(--sdds-inline-tabs-fullbleed-horizontal-divider-background);\n    opacity: var(--sdds-inline-tabs-fullbleed-horizontal-divider-opacity);\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n  }\n\n  &-wrapper {\n    display: flex;\n    flex-wrap: nowrap;\n    width: 100%;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &--forward,\n  &--back {\n    cursor: pointer;\n    width: 48px;\n    height: 100%;\n    border: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n\n    &__show {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n    svg{\n      fill:var(--sdds-inline-tabs-scroll-btn-color);\n    }\n  }\n\n  &-centered {\n    justify-content: center;\n  }\n\n  /* tab */\n  ::slotted(&--tab) {\n    //fixme: headline-07 has a line-height that is not matching old storybook\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-inline-tabs-fullbleed-tab-color);\n    opacity: 0.6;\n    padding: 16px 0;\n    margin-right: 32px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out;\n    white-space: nowrap;\n    text-align: left;\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin-left: auto;\n      width: 0;\n      margin-right: auto;\n      height: 2px;\n      background-color: var(--sdds-inline-tabs-fullbleed-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out;\n      z-index: 1;\n    }\n  }\n  \n  ::slotted(&--tab__active) {\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-active);\n    opacity:1;\n\n    &::after {\n      width: 100%;\n      background-color: var(--sdds-inline-tabs-fullbleed-tab-indicator-background-active);\n    }\n  }\n\n  ::slotted(&--tab:first-child) {\n    margin-left: 32px;\n  }\n\n  ::slotted(&--tab:last-child) {\n    margin-right: 32px;\n  }\n\n  /* tab states */\n  ::slotted(&--tab:hover) {\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-hover);\n    opacity:1;\n\n    &::after {\n      width: 100%;\n    }\n  }\n\n  ::slotted(&--tab:focus) {\n    @include sdds-focus-state;\n\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-focus);\n    opacity:1;\n    \n    &::after {\n      width: 0;\n    }\n  }\n\n  ::slotted(&--tab__active:focus)::after {\n    width: 100%;\n  }\n\n  ::slotted(&--tab__disabled) {\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-disabled);\n    pointer-events: none;\n    opacity: var(--sdds-inline-tabs-fullbleed-tab-color-opacity-disabled);\n  }\n}\n\n.sdds-inline-tabs-fullbleed {\n  background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n\n  .sdds-inline-tabs-fullbleed--forward {\n    background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n  }\n\n  .sdds-inline-tabs-fullbleed--back {\n    background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n  }\n}\n","import { Component, Host, State, Element, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tabs-fullbleed',\n  styleUrl: 'inline-tabs-fullbleed.scss',\n  shadow: true,\n})\nexport class InlineTabsFullbleed {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @Element() host: HTMLElement;\n\n  @State() tabs: Array<any> = []; // array with metadata for slotted children\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\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  buttonWidth: number = 0; // current calculated width of the largest nav button\n\n  componentDidRender() {\n    this.calculateButtonWidth();\n  }\n\n  componentDidLoad() {\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          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');\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    this.calculateButtonWidth();\n  }\n\n  calculateButtonWidth() {\n    let best = 0;\n    const navButtons = Array.from(this.host.children);\n    navButtons.forEach((navButton: HTMLElement) => {\n      const style = window.getComputedStyle(navButton);\n      const width =\n        navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n      if (width > best) {\n        best = width;\n      }\n    });\n\n    this.buttonWidth = best;\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\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  render() {\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n        <div class={`sdds-inline-tabs-fullbleed`}>\n          <div\n            class=\"sdds-inline-tabs-fullbleed-wrapper\"\n            ref={(el) => {\n              this.navWrapperElement = el as HTMLElement;\n            }}\n          >\n            <slot />\n          </div>\n          <div class=\"sdds-inline-tabs-fullbleed-navigation\">\n            <button\n              class={`sdds-inline-tabs-fullbleed--forward ${\n                this.showRightScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n              }`}\n              onClick={() => this.scrollRight()}\n              disabled={!this.showRightScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n                ></path>\n              </svg>\n            </button>\n            <button\n              class={`sdds-inline-tabs-fullbleed--back ${\n                this.showLeftScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n              }`}\n              onClick={() => this.scrollLeft()}\n              disabled={!this.showLeftScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n                ></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-link2.js

@@ -1,46 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const sddsLinkCss = "a{cursor:pointer;outline:none;color:var(--sdds-link)}a:active{color:var(--sdds-link);text-decoration:underline;text-decoration-color:var(--sdds-link)}a:hover{color:var(--sdds-link-hover);text-decoration:underline;text-decoration-color:var(--sdds-link-hover)}a:visited{color:var(--sdds-link-visited);text-decoration-color:var(--sdds-link-visited)}a:focus{color:var(--sdds-link-focus);text-decoration:none;outline:2px solid var(--sdds-link-focus);outline-offset:-2px}a.disabled{color:var(--sdds-link-disabled);text-decoration-color:var(--sdds-link-disabled);pointer-events:none}a.no-underline{text-decoration:none}a.no-underline:hover{text-decoration:none}";
-
-const SddsLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.href = undefined;
-    this.target = '_self';
-    this.disabled = false;
-    this.underline = true;
-    this.rel = 'noopener';
-  }
-  render() {
-    return (h("a", { class: `
-        ${this.disabled ? 'disabled' : ''}
-        ${this.underline ? '' : 'no-underline'}
-        
-        `, href: this.href, target: this.target, rel: this.rel }, h("slot", null)));
-  }
-  static get style() { return sddsLinkCss; }
-}, [4, "sdds-link", {
-    "href": [1],
-    "target": [1],
-    "disabled": [4],
-    "underline": [4],
-    "rel": [1]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-link"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-link":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsLink);
-      }
-      break;
-  } });
-}
-
-export { SddsLink as S, defineCustomElement as d };
-
-//# sourceMappingURL=sdds-link2.js.map

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

@@ -1 +0,0 @@
-{"file":"sdds-link2.js","mappings":";;AAAA,MAAM,WAAW,GAAG,gpBAAgpB;;MCOvpB,QAAQ;;;;;kBAKuC,OAAO;oBAGrC,KAAK;qBAGJ,IAAI;eAGX,UAAU;;EAEhC,MAAM;IACJ,QACE,SACE,KAAK,EAAE;UACL,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,cAAc;;SAErC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,IAEb,eAAa,CACX,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/link/sdds-link.scss?tag=sdds-link","./src/components/link/sdds-link.tsx"],"sourcesContent":["a {\n  cursor: pointer;\n  outline: none;\n  color: var(--sdds-link);\n\n  &:active {\n    color: var(--sdds-link);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link);\n  }\n\n  &:hover {\n    color: var(--sdds-link-hover);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link-hover);\n  }\n\n  &:visited {\n    color: var(--sdds-link-visited);\n    text-decoration-color: var(--sdds-link-visited);\n  }\n\n  &:focus {\n    color: var(--sdds-link-focus);\n    text-decoration: none;\n    outline: 2px solid var(--sdds-link-focus);\n    outline-offset: -2px;\n  }\n\n  &.disabled {\n    color: var(--sdds-link-disabled);\n    text-decoration-color: var(--sdds-link-disabled);\n    pointer-events: none;\n  }\n\n  &.no-underline {\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-link',\n  styleUrl: 'sdds-link.scss',\n  shadow: false,\n})\nexport class SddsLink {\n  /** URL for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** Disables the link */\n  @Prop() disabled: boolean = false;\n\n  /** Displays the link with an underline. */\n  @Prop() underline: boolean = true;\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  render() {\n    return (\n      <a\n        class={`\n        ${this.disabled ? 'disabled' : ''}\n        ${this.underline ? '' : 'no-underline'}\n        \n        `}\n        href={this.href}\n        target={this.target}\n        rel={this.rel}\n      >\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"],"version":3}