@scania/tegel 0.0.1-beta.9 → 0.0.2

package/dist/cjs/sdds-inline-tabs.cjs.entry.js

@@ -0,0 +1,221 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b98965c7.js');
+
+const inlineTabsCss = ":host{outline:0 !important;box-sizing:border-box}:host *{box-sizing:border-box}.sdds-inline-tabs{overflow:hidden;outline:0}.sdds-inline-tabs-header{position:relative}.sdds-inline-tabs-main{background-color:var(--sdds-inline-tabs-main-background);padding:24px 24px 48px}.sdds-inline-tabs-wrapper{display:flex;overflow-x:scroll;scrollbar-width:none}.sdds-inline-tabs-wrapper::-webkit-scrollbar{display:none}.sdds-inline-tabs--forward,.sdds-inline-tabs--back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;top:0;background-color:var(--sdds-inline-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-inline-tabs--forward__show,.sdds-inline-tabs--back__show{opacity:1;pointer-events:all}.sdds-inline-tabs--forward:hover,.sdds-inline-tabs--back:hover{background-color:var(--sdds-inline-tabs-scroll-btn-background-hover)}.sdds-inline-tabs--forward:active,.sdds-inline-tabs--back:active{background-color:var(--sdds-inline-tabs-scroll-btn-background-active)}.sdds-inline-tabs--forward:focus,.sdds-inline-tabs--back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-inline-tabs--forward svg,.sdds-inline-tabs--back svg{fill:var(--sdds-inline-tabs-scroll-btn-color)}.sdds-inline-tabs--back{left:0}.sdds-inline-tabs--forward{right:0}.sdds-inline-tabs--tab{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);cursor:pointer;border:0;color:var(--sdds-inline-tabs-tab-color);background-color:var(--sdds-inline-tabs-tab-background);padding:16px;min-width:142px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out;white-space:nowrap;flex-shrink:0;text-align:left;outline:none}.sdds-inline-tabs--tab>*{opacity:0.6}.sdds-inline-tabs--tab:not(:last-child){border-right:1px solid var(--sdds-inline-tabs-tab-border-color)}.sdds-inline-tabs--tab::after{content:\" \";position:absolute;top:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-tab-indicator-background);transition:width 0.15s ease-in-out}.sdds-inline-tabs--tab:hover{background-color:var(--sdds-inline-tabs-tab-background-hover);color:var(--sdds-inline-tabs-tab-color-hover);text-decoration:none}.sdds-inline-tabs--tab:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-inline-tabs--tab__active{background-color:var(--sdds-inline-tabs-tab-background-active);color:var(--sdds-inline-tabs-tab-color-active);cursor:initial;border-right:1px solid transparent !important}.sdds-inline-tabs--tab__active>*{opacity:1}.sdds-inline-tabs--tab__active:hover{background-color:var(--sdds-inline-tabs-tab-background-active)}.sdds-inline-tabs--tab__active::after{width:calc(100% + 2px);left:-1px;background-color:var(--sdds-inline-tabs-tab-indicator-background-active)}.sdds-inline-tabs--tab__active::before{content:\" \";background-color:var(--sdds-inline-tabs-tab-background-active);width:1px;top:0;bottom:0;left:-1px;display:block;position:absolute}.sdds-inline-tabs--tab__active:first-child:focus::before{left:0}.sdds-inline-tabs--tab:disabled,.sdds-inline-tabs--tab__disabled{cursor:initial;color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}.sdds-inline-tabs--tab:disabled>*,.sdds-inline-tabs--tab__disabled>*{opacity:0.16}.sdds-inline-tabs--tab__active{background-color:var(--sdds-inline-tabs-tab-background-active)}.sdds-inline-tabs-main{background-color:var(--sdds-inline-tabs-main-background)}";
+
+function generateKeyFromName(name) {
+  return name
+    .replace(/\s/g, '-')
+    .replace(/[^a-z0-9-]/gi, '')
+    .toLowerCase();
+}
+const InlineTabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.startingTab = null; // name of the tab to show by default (infered from either "default-tab"-prop (on component) or "default"-prop (on a slotted child)
+    this.navWrapperElement = null; // reference to container with nav buttons
+    this.tabWrapperElement = null; // reference to container with slotted children
+    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.useAutoHeight = false; // set height for slotted children or not
+    this.defaultTab = '';
+    this.autoHeight = false;
+    this.modeVariant = null;
+    this.tabs = [];
+    this.buttonWidth = 0;
+    this.tabHeight = 0;
+    this.showLeftScroll = false;
+    this.showRightScroll = false;
+  }
+  /** used for switching to a tab programmatically */
+  async showTab(key) {
+    this.switchToTab(key);
+  }
+  componentWillLoad() {
+    this.initComponent();
+  }
+  initComponent(createInitialState = true) {
+    if (this.autoHeight) {
+      this.useAutoHeight = true;
+    }
+    this.tabs = Array.from(this.host.children).map((item, index) => {
+      const name = item.label ? item.label : item.getAttribute('name') || `Tab ${index + 1}`;
+      const key = generateKeyFromName(name);
+      if (item.default) {
+        this.startingTab = key;
+      }
+      let disabled = false;
+      if (item.disabled) {
+        disabled = true;
+      }
+      return {
+        name,
+        key,
+        element: item,
+        disabled,
+        visible: true,
+        initialDisplay: window.getComputedStyle(item).display,
+      };
+    });
+    if (createInitialState) {
+      this.setInitialState();
+    }
+    this.tabs = Array.from(this.tabs);
+  }
+  calculateButtonWidth() {
+    const navButtons = this.navWrapperElement.querySelectorAll('button.sdds-inline-tabs--tab');
+    let best = 0;
+    Array.from(navButtons).forEach((navButton) => {
+      const oldStyle = navButton.style.width;
+      // eslint-disable-next-line no-param-reassign
+      navButton.style.width = '';
+      const width = navButton.clientWidth;
+      // eslint-disable-next-line no-param-reassign
+      navButton.style.width = oldStyle;
+      if (navButton.clientWidth > best) {
+        best = width;
+      }
+    });
+    this.buttonWidth = best;
+  }
+  calculateTabHeight() {
+    let best = 0;
+    this.tabs.forEach((_, tabIndex) => {
+      const tab = this.tabs[tabIndex];
+      // TODO: add comment on what this does
+      const oldStyle = tab.element.style.display;
+      tab.element.style.display = '';
+      const height = tab.element.clientHeight;
+      tab.element.style.display = oldStyle;
+      if (height > best) {
+        best = height;
+      }
+    });
+    this.tabHeight = best;
+  }
+  componentDidRender() {
+    this.calculateTabHeight();
+    this.calculateButtonWidth();
+  }
+  componentDidLoad() {
+    const mutationObserver = new MutationObserver(( /* mutations, observer */) => {
+      const visibleTab = this.tabs.find((tab) => tab.visible);
+      this.initComponent(false);
+      this.calculateTabHeight();
+      this.calculateButtonWidth();
+      if (visibleTab) {
+        this.switchToTab(visibleTab.key);
+      }
+    });
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        const componentWidth = entry.contentRect.width;
+        let buttonsWidth = 0;
+        const navButtons = entry.target.querySelectorAll('button.sdds-inline-tabs--tab');
+        Array.from(navButtons).forEach((navButton) => {
+          buttonsWidth += navButton.clientWidth;
+        });
+        this.componentWidth = componentWidth;
+        this.buttonsWidth = buttonsWidth;
+        this.scrollWidth = buttonsWidth - componentWidth;
+        if (this.buttonsWidth > this.componentWidth) {
+          this.evaluateScrollButtons();
+        }
+        else {
+          this.showLeftScroll = false;
+          this.showRightScroll = false;
+        }
+        this.calculateTabHeight();
+      });
+    });
+    mutationObserver.observe(this.host, {
+      childList: true,
+      attributes: true,
+    });
+    resizeObserver.observe(this.navWrapperElement);
+    this.calculateButtonWidth();
+    this.calculateTabHeight();
+  }
+  setInitialState() {
+    if (this.defaultTab) {
+      this.startingTab = this.defaultTab;
+    }
+    this.tabs.forEach((tab, index) => {
+      if (this.startingTab) {
+        if (tab.key !== this.startingTab) {
+          this.hideTab(index);
+        }
+      }
+      else {
+        if (index > 0) {
+          this.hideTab(index);
+        }
+      }
+    });
+  }
+  unhideTab(tabIndex) {
+    const tab = this.tabs[tabIndex];
+    tab.element.style.display = '';
+    tab.visible = true;
+  }
+  hideTab(tabIndex) {
+    const tab = this.tabs[tabIndex];
+    tab.element.style.display = 'none';
+    tab.visible = false;
+  }
+  switchToTab(key) {
+    this.tabs.forEach((tab, index) => {
+      if (tab.key === key) {
+        this.unhideTab(index);
+      }
+      else {
+        this.hideTab(index);
+      }
+    });
+    this.tabs = Array.from(this.tabs);
+  }
+  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() {
+    const style = {};
+    if (this.useAutoHeight) {
+      style.height = `${this.tabHeight}px`;
+    }
+    return (index.h(index.Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, index.h("div", { class: `sdds-inline-tabs sdds-inline-tabs` }, index.h("nav", { class: "sdds-inline-tabs-header" }, index.h("div", { ref: (el) => {
+        this.navWrapperElement = el;
+      }, class: "sdds-inline-tabs-wrapper" }, this.tabs.map((tab) => (index.h("button", { style: { width: `${this.buttonWidth}px` }, disabled: tab.disabled, class: `sdds-inline-tabs--tab ${tab.visible ? 'sdds-inline-tabs--tab__active' : ''}`, onClick: () => this.switchToTab(tab.key) }, index.h("span", null, tab.name))))), index.h("div", { class: "sdds-inline-tabs-header-navigation" }, index.h("button", { class: `sdds-inline-tabs--forward ${this.showRightScroll ? 'sdds-inline-tabs--back__show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }))), index.h("button", { class: `sdds-inline-tabs--back ${this.showLeftScroll ? 'sdds-inline-tabs--back__show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }))))), index.h("div", { ref: (el) => {
+        this.tabWrapperElement = el;
+      }, class: "sdds-inline-tabs-main", style: style }, index.h("slot", null)))));
+  }
+  get host() { return index.getElement(this); }
+};
+InlineTabs.style = inlineTabsCss;
+
+exports.sdds_inline_tabs = InlineTabs;

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

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b98965c7.js');
+
+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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.href = undefined;
+    this.target = '_self';
+    this.disabled = false;
+    this.underline = true;
+    this.rel = 'noopener';
+  }
+  render() {
+    return (index.h("a", { class: `
+        ${this.disabled ? 'disabled' : ''}
+        ${this.underline ? '' : 'no-underline'}
+        
+        `, href: this.href, target: this.target, rel: this.rel }, index.h("slot", null)));
+  }
+};
+SddsLink.style = sddsLinkCss;
+
+exports.sdds_link = SddsLink;

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

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b98965c7.js');
+
+const sddsMessageCss = ":host .message-wrapper{display:flex;padding:16px;background-color:var(--sdds-message-background);border-radius:4px}:host .message-wrapper.information{border-left:4px solid var(--sdds-information)}:host .message-wrapper.information sdds-icon{color:var(--sdds-information)}:host .message-wrapper.success{border-left:4px solid var(--sdds-positive)}:host .message-wrapper.success sdds-icon{color:var(--sdds-positive)}:host .message-wrapper.error{background-color:var(--sdds-message-type-error-background);border-left:4px solid var(--sdds-negative)}:host .message-wrapper.error sdds-icon{color:var(--sdds-negative)}:host .message-wrapper.warning{border-left:4px solid var(--sdds-warning)}:host .message-wrapper.warning sdds-icon{color:var(--sdds-warning)}:host .message-wrapper.message-minimal{border:none;display:flex;align-items:center;padding:0;background-color:transparent}:host .message-wrapper.message-minimal .message-header{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .message-wrapper.message-minimal sdds-icon{padding-right:8px}:host sdds-icon{padding-right:16px}:host .message-content{display:flex;flex-direction:column;gap:4px;color:var(--sdds-message-color);padding:2px 0}:host .message-content .message-header{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host .message-content .message-extended-message{color:var(--sdds-message-color);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .sdds-mode-variant-primary{--sdds-message-background:var(--sdds-message-background-primary)}:host .sdds-mode-variant-secondary{--sdds-message-background:var(--sdds-message-background-secondary)}";
+
+const SddsMessage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.getIconName = () => {
+      switch (this.type) {
+        case 'information':
+          return 'info';
+        case 'error':
+          return 'error';
+        case 'warning':
+          return 'warning';
+        case 'success':
+          return 'tick';
+        default:
+          return 'info';
+      }
+    };
+    this.header = undefined;
+    this.modeVariant = null;
+    this.type = 'information';
+    this.noIcon = false;
+    this.minimal = false;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: `
+        message-wrapper ${this.type}
+        ${this.minimal ? 'message-minimal' : ''}
+        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && index.h("sdds-icon", { name: this.getIconName(), size: "20px" }), index.h("div", { class: `message-content` }, this.header && index.h("div", { class: "message-header" }, this.header), !this.minimal && (index.h("div", { class: "message-extended-message" }, index.h("slot", null)))))));
+  }
+};
+SddsMessage.style = sddsMessageCss;
+
+exports.sdds_message = SddsMessage;

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

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b98965c7.js');
+
+const modalCss = ":root,.sdds-mode-light{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-background:var(--sdds-white);--sdds-modal-text:var(--sdds-grey-958);--sdds-modal-icon:var(--sdds-black);--sdds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A\");--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}.sdds-mode-dark{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-background:var(--sdds-grey-900);--sdds-modal-text:var(--sdds-grey-50);--sdds-modal-icon:var(--sdds-white);--sdds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A\");--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}.sdds-modal{box-sizing:border-box;background-color:var(--sdds-modal-background);margin:auto;position:relative;border-radius:4px;padding:16px;max-height:85vh;overflow-y:auto;}.sdds-modal *{box-sizing:border-box}.sdds-modal::-webkit-scrollbar{width:5px;background-color:var(--sdds-grey-300);border-radius:0 1em 1em 0}.sdds-modal::-webkit-scrollbar-track{background-color:var(--sdds-grey-300);border-radius:0 1em 1em 0}.sdds-modal::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-500);border-radius:0 1em 1em 0}.sdds-modal__actions-sticky{overflow:hidden}.sdds-modal__actions-sticky .sdds-modal-body{font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);padding-bottom:96px;margin:0 -16px 0 0;max-height:calc(85vh - 36px);overflow-y:auto}.sdds-modal__actions-sticky .sdds-modal-actions{position:absolute;bottom:-1px;left:0;right:0;background-color:var(--sdds-modal-background);padding:var(--sdds-spacing-element-16);display:flex;gap:16px}.sdds-modal__actions-static .sdds-modal-actions{background-color:var(--sdds-modal-background);display:flex;gap:16px}@media (min-width: 320px){.sdds-modal-xs{width:100%}.sdds-modal-sm{width:100%}.sdds-modal-md{width:100%}.sdds-modal-lg{width:100%}}@media (min-width: 672px){.sdds-modal-xs{width:75%}.sdds-modal-sm{width:62.5%}.sdds-modal-md{width:75%}.sdds-modal-lg{width:100%}}@media (min-width: 1056px){.sdds-modal-xs{width:31.25%}.sdds-modal-sm{width:43.75%}.sdds-modal-md{width:62.5%}.sdds-modal-lg{width:75%}}@media (min-width: 1312px){.sdds-modal-xs{width:31.25%}.sdds-modal-sm{width:37.5%}.sdds-modal-md{width:62.5%}.sdds-modal-lg{width:75%}}@media (min-width: 1584px){.sdds-modal-xs{width:25%}.sdds-modal-sm{width:37.5%}.sdds-modal-md{width:50%}.sdds-modal-lg{width:75%}}@media (max-width: 320px){.sdds-modal-md,.sdds-modal-lg,.sdds-modal-sm{height:100%}.sdds-modal-md slot[name=sdds-modal-actions]::slotted(*),.sdds-modal-lg slot[name=sdds-modal-actions]::slotted(*),.sdds-modal-sm slot[name=sdds-modal-actions]::slotted(*){display:flex}}.sdds-modal-header{display:flex;padding-bottom:var(--sdds-spacing-element-8);position:sticky;top:0;background-color:var(--sdds-modal-background);z-index:1}.sdds-modal-header::before{content:\" \";position:absolute;height:16px;top:-16px;width:100%;background-color:var(--sdds-modal-background)}.sdds-modal-headline{color:var(--sdds-modal-text);font:var(--sdds-headline-05);letter-spacing:var(--sdds-headline-05-ls);margin:0;flex:1;color:var(--sdds-modal-text)}.sdds-modal-body{color:var(--sdds-modal-text);font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);padding-bottom:40px;overflow-y:visible;padding-right:16px;}.sdds-modal-body::-webkit-scrollbar{width:5px;background-color:var(--sdds-grey-300)}.sdds-modal-body::-webkit-scrollbar-track{background-color:var(--sdds-grey-300)}.sdds-modal-body::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-500)}@media (min-width: 1056px){.sdds-modal-body{padding-right:64px}}.sdds-modal-backdrop{box-sizing:border-box;left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--sdds-modal-backdrop);padding:0 16px}.sdds-modal-backdrop *{box-sizing:border-box}@media (max-width: 320px){.sdds-modal-backdrop{padding:0}}.sdds-modal-backdrop.show{display:flex}.sdds-modal-backdrop.hide{display:none}button.sdds-modal-close{background-color:transparent;border:0;padding:0;appearance:unset}.sdds-modal-close{display:inline-block;height:auto;color:var(--sdds-modal-icon);cursor:pointer}.sdds-modal-close:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}@media (min-width: 320px){.sdds-modal-close{margin-left:var(--sdds-spacing-element-16)}}@media (min-width: 1056px){.sdds-modal-close{margin-left:var(--sdds-spacing-element-48)}}.sdds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.sdds-modal-close-btn{margin-left:var(--sdds-spacing-element-16)}}@media (min-width: 1056px){.sdds-modal-close-btn{margin-left:var(--sdds-spacing-element-48)}}.sdds-modal-close-btn svg{fill:var(--sdds-modal-icon)}.sdds-modal-overflow{overflow:hidden}:host{left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--sdds-modal-backdrop);padding:0 16px}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host .sdds-modal-close{border:none;background-color:transparent}:host .sdds-modal-close-btn{border:none;background-color:transparent}:host(.show){display:flex}:host(.hide){display:none}";
+
+const Modal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.prevent = false;
+    this.size = 'md';
+    this.actions = 'static';
+    this.open = false;
+  }
+  /** Shows the modal  */
+  async openModal() {
+    this.open = true;
+  }
+  setDissmissButtons() {
+    const nodes = this.el.querySelectorAll('[data-dismiss-modal]');
+    [...Array.from(nodes), this.closeButtonEl].forEach((el) => {
+      el.addEventListener('click', () => {
+        this.open = false;
+      });
+    });
+  }
+  handleClick(e) {
+    const targetList = e.composedPath();
+    const target = targetList[0];
+    if (target.classList[0] === 'sdds-modal-close' ||
+      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)) {
+      this.open = false;
+    }
+  }
+  componentDidRender() {
+    this.setDissmissButtons();
+  }
+  render() {
+    return (index.h(index.Host, { onClick: (event) => {
+        this.handleClick(event);
+      }, class: `sdds-modal-backdrop ${this.open ? 'show' : 'hide'}` }, index.h("div", { class: `sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${this.size ? `sdds-modal-${this.size}` : ''} ` }, index.h("div", { class: "sdds-modal-header" }, index.h("slot", { name: "sdds-modal-headline" }), index.h("button", { class: "sdds-modal-close", "aria-label": "close", ref: (el) => {
+        this.closeButtonEl = el;
+      } }, index.h("sdds-icon", { name: "cross", size: "20px" }))), index.h("div", { class: "sdds-modal-body" }, index.h("slot", { name: "sdds-modal-body" })), index.h("div", { class: "sdds-modal-actions" }, index.h("slot", { name: "sdds-modal-actions" })))));
+  }
+  get el() { return index.getElement(this); }
+};
+Modal.style = modalCss;
+
+exports.sdds_modal = Modal;

package/dist/cjs/sdds-navigation-tabs.cjs.entry.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b98965c7.js');
+
+const navigationTabsCss = ".sdds-navigation-tabs{box-sizing:border-box;background-color:var(--sdds-navigation-tabs-background);position:relative;display:flex;}.sdds-navigation-tabs *{box-sizing:border-box}.sdds-navigation-tabs::after{content:\" \";display:block;border-bottom:1px solid var(--sdds-navigation-tabs-horizontal-divider-background);opacity:var(--sdds-navigation-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}.sdds-navigation-tabs-wrapper{display:flex;flex-wrap:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}.sdds-navigation-tabs-wrapper::-webkit-scrollbar{display:none}.sdds-navigation-tabs-forward{cursor:pointer;width:48px;height:100%;border:0;position:absolute;right:0;top:0;background-color:var(--sdds-navigation-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-navigation-tabs-forward__show{opacity:1;pointer-events:all}.sdds-navigation-tabs-forward:hover{background-color:var(--sdds-navigation-tabs-scroll-btn-background-hover);text-decoration:none}.sdds-navigation-tabs-forward:active{background-color:var(--sdds-navigation-tabs-scroll-btn-background-active)}.sdds-navigation-tabs-forward:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-navigation-tabs-back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;left:0;top:0;background-color:var(--sdds-navigation-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-navigation-tabs-back__show{opacity:1;pointer-events:all}.sdds-navigation-tabs-back:hover{background-color:var(--sdds-navigation-tabs-scroll-btn-background-hover)}.sdds-navigation-tabs-back:active{background-color:var(--sdds-navigation-tabs-scroll-btn-background-active)}.sdds-navigation-tabs-back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}::slotted(.sdds-navigation-tabs-tab){font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);opacity:0.6;padding:26px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;background-color:transparent;border:0}::slotted(.sdds-navigation-tabs-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-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}::slotted(.sdds-navigation-tabs-tab:first-child){margin-left:32px}::slotted(.sdds-navigation-tabs-tab:last-child){margin-right:32px}::slotted(.sdds-navigation-tabs-tab:hover){color:var(--sdds-navigation-tabs-tab-color-hover);opacity:1}::slotted(.sdds-navigation-tabs-tab:hover)::after{width:100%}::slotted(.sdds-navigation-tabs-tab:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px;color:var(--sdds-navigation-tabs-tab-color-focus);opacity:1}::slotted(.sdds-navigation-tabs-tab:focus)::after{width:0}::slotted(.sdds-navigation-tabs-tab-active){color:var(--sdds-navigation-tabs-tab-color-active);opacity:1}::slotted(.sdds-navigation-tabs-tab-active)::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}::slotted(.sdds-navigation-tabs-tab-active:focus)::after{width:100%}::slotted(.sdds-navigation-tabs-tab-disabled){color:var(--sdds-navigation-tabs-tab-color-disabled);opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled);pointer-events:none}";
+
+const NavigationTabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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.tabs = [];
+    this.showLeftScroll = false;
+    this.showRightScroll = false;
+    this.modeVariant = null;
+  }
+  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-navigation-tabs-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 (index.h(index.Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, index.h("div", { class: "sdds-navigation-tabs" }, index.h("div", { class: "sdds-navigation-tabs-wrapper", ref: (el) => {
+        this.navWrapperElement = el;
+      } }, index.h("slot", null)), index.h("div", { class: "sdds-navigation-tabs-navigation" }, index.h("button", { class: `sdds-navigation-tabs-forward ${this.showRightScroll ? 'sdds-navigation-tabs-forward-show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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", fill: "#0D0F13" }))), index.h("button", { class: `sdds-navigation-tabs-back ${this.showLeftScroll ? 'sdds-navigation-tabs-back-show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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", fill: "#0D0F13" })))))));
+  }
+  get host() { return index.getElement(this); }
+};
+NavigationTabs.style = navigationTabsCss;
+
+exports.sdds_navigation_tabs = NavigationTabs;

package/dist/cjs/sdds-popover-canvas.cjs.entry.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b98965c7.js');
+const popper = require('./popper-11d5f714.js');
+
+const popoverCanvasCss = ":host{box-sizing:border-box;min-width:160px;min-height:160px;color:var(--sdds-popover-canvas-color);background-color:var(--sdds-popover-canvas-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.sdds-popover-canvas-show){opacity:1;display:block}";
+
+const PopoverCanvas = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selector = '';
+    this.referenceEl = undefined;
+    this.show = false;
+    this.placement = 'auto';
+    this.offsetSkidding = 0;
+    this.offsetDistance = 8;
+    this.renderedShowValue = false;
+    this.popperInstance = undefined;
+    this.target = undefined;
+  }
+  handleOutsideClick() {
+    if (this.show) {
+      this.show = false;
+    }
+  }
+  componentDidLoad() {
+    var _a;
+    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+    this.renderedShowValue = this.show;
+    this.popperInstance = popper.createPopper(this.target, this.popoverCanvasElement, {
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [this.offsetSkidding, this.offsetDistance],
+          },
+        },
+      ],
+    });
+    const showCanvas = () => {
+      this.show = true;
+    };
+    const hideCanvas = () => {
+      this.show = false;
+    };
+    this.target.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+      if (this.show) {
+        hideCanvas();
+      }
+      else {
+        showCanvas();
+      }
+    });
+    this.popoverCanvasElement.addEventListener('mousemove', (event) => {
+      event.stopPropagation();
+    });
+    this.popoverCanvasElement.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+    });
+  }
+  componentDidRender() {
+    if (this.show && !this.renderedShowValue) {
+      // Here we update the popper position since its position is wrong
+      // before it is rendered.
+      this.popperInstance.update();
+    }
+    this.renderedShowValue = this.show;
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  render() {
+    return (index.h(index.Host, { class: `sdds-popover-canvas ${this.show ? 'sdds-popover-canvas-show' : ''}` }, index.h("slot", null)));
+  }
+  get popoverCanvasElement() { return index.getElement(this); }
+};
+PopoverCanvas.style = popoverCanvasCss;
+
+exports.sdds_popover_canvas = PopoverCanvas;

package/dist/cjs/sdds-popover-menu.cjs.entry.js

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b98965c7.js');
+const popper = require('./popper-11d5f714.js');
+
+const popoverMenuCss = ":host{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--sdds-popover-menu-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;display:none;z-index:800}:host *{box-sizing:border-box}:host(.sdds-popover-menu-show){opacity:1;display:block}";
+
+const PopoverMenu = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selector = '';
+    this.referenceEl = undefined;
+    this.show = false;
+    this.placement = 'auto';
+    this.offsetSkidding = 0;
+    this.offsetDistance = 8;
+    this.renderedShowValue = false;
+    this.popperInstance = undefined;
+    this.target = undefined;
+  }
+  handleOutsideClick() {
+    if (this.show) {
+      this.show = false;
+    }
+  }
+  componentDidLoad() {
+    var _a;
+    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+    this.renderedShowValue = this.show;
+    this.popperInstance = popper.createPopper(this.target, this.popoverMenuElement, {
+      strategy: 'fixed',
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [this.offsetSkidding, this.offsetDistance],
+          },
+        },
+      ],
+    });
+    const showMenu = () => {
+      this.show = true;
+    };
+    const hideMenu = () => {
+      this.show = false;
+    };
+    this.target.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+      if (this.show) {
+        hideMenu();
+      }
+      else {
+        showMenu();
+      }
+    });
+    this.popoverMenuElement.addEventListener('mousemove', (event) => {
+      event.stopPropagation();
+    });
+    this.popoverMenuElement.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+    });
+  }
+  componentDidRender() {
+    if (this.show && !this.renderedShowValue) {
+      // Here we update the popper position since its position is wrong
+      // before it is rendered.
+      this.popperInstance.update();
+    }
+    this.renderedShowValue = this.show;
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  render() {
+    return (index.h(index.Host, { class: `sdds-popover-menu ${this.show ? 'sdds-popover-menu-show' : ''}` }, index.h("slot", null)));
+  }
+  get popoverMenuElement() { return index.getElement(this); }
+};
+PopoverMenu.style = popoverMenuCss;
+
+exports.sdds_popover_menu = PopoverMenu;