@scania/tegel 0.0.51 → 0.0.61

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

@@ -1,92 +1,91 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fdfb114c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2d8c4bc9.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) {
-    registerInstance(this, hostRef);
-    this.sddsClose = createEvent(this, "sddsClose", 7);
-    /** Emits a close event and then close the modal if it is not prevented. */
-    this.handleClose = (event) => {
-      const closeEvent = this.sddsClose.emit(event);
-      if (!closeEvent.defaultPrevented) {
-        this.isShown = false;
-      }
-    };
-    this.handleShow = () => {
-      this.isShown = true;
-    };
-    /** Adds an event listener to the reference element that shows/closes the modal. */
-    this.initializeReferenceElement = (referenceEl) => {
-      if (referenceEl) {
-        referenceEl.addEventListener('click', (event) => {
-          event.stopPropagation();
-          if (this.isShown) {
-            this.handleClose(event);
-          }
-          else {
-            this.handleShow();
-          }
-        });
-      }
-    };
-    /** Check if there is a referenceElement or selector and adds event listener to them if so. */
-    this.setShowButton = () => {
-      var _a;
-      if (this.selector || this.referenceEl) {
-        const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-        if (referenceEl) {
-          this.initializeReferenceElement(referenceEl);
-        }
-      }
-    };
-    this.prevent = false;
-    this.size = 'md';
-    this.actions = 'static';
-    this.selector = undefined;
-    this.referenceEl = undefined;
-    this.show = undefined;
-    this.isShown = false;
-  }
-  /** Shows the modal.  */
-  async showModal() {
-    this.handleShow();
-  }
-  /** Closes the modal. */
-  async closeModal() {
-    this.handleClose();
-  }
-  connectedCallback() {
-    if (this.show !== null) {
-      this.isShown = this.show;
-    }
-    this.setDissmissButtons();
-    this.setShowButton();
-  }
-  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */
-  handleOverlayClick(event) {
-    const targetList = event.composedPath();
-    const target = targetList[0];
-    if (target.classList[0] === 'sdds-modal-close' ||
-      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)) {
-      this.handleClose(event);
-    }
-  }
-  /** Adds an event listener to the dismiss buttons that closes the modal. */
-  setDissmissButtons() {
-    this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
-      dismissButton.addEventListener('click', (event) => {
-        this.handleClose(event);
-      });
-    });
-  }
-  render() {
-    return (h(Host, { onClick: (event) => {
-        this.handleOverlayClick(event);
-      }, class: `sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}` }, h("div", { class: `sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${this.size ? `sdds-modal-${this.size}` : ''} ` }, h("div", { class: "sdds-modal-header" }, h("slot", { name: "sdds-modal-headline" }), h("button", { class: "sdds-modal-close", "aria-label": "close", onClick: () => this.handleClose() }, h("sdds-icon", { name: "cross", size: "20px" }))), h("div", { class: "sdds-modal-body" }, h("slot", { name: "sdds-modal-body" })), h("div", { class: "sdds-modal-actions" }, h("slot", { name: "sdds-modal-actions" })))));
-  }
-  get host() { return getElement(this); }
-};
+const Modal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sddsClose = createEvent(this, "sddsClose", 7);
+    /** Emits a close event and then close the modal if it is not prevented. */
+    this.handleClose = (event) => {
+      const closeEvent = this.sddsClose.emit(event);
+      if (!closeEvent.defaultPrevented) {
+        this.isShown = false;
+      }
+    };
+    this.handleShow = () => {
+      this.isShown = true;
+    };
+    /** Adds an event listener to the reference element that shows/closes the modal. */
+    this.initializeReferenceElement = (referenceEl) => {
+      if (referenceEl) {
+        referenceEl.addEventListener('click', (event) => {
+          if (this.isShown) {
+            this.handleClose(event);
+          }
+          else {
+            this.handleShow();
+          }
+        });
+      }
+    };
+    /** Check if there is a referenceElement or selector and adds event listener to them if so. */
+    this.setShowButton = () => {
+      var _a;
+      if (this.selector || this.referenceEl) {
+        const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+        if (referenceEl) {
+          this.initializeReferenceElement(referenceEl);
+        }
+      }
+    };
+    this.prevent = false;
+    this.size = 'md';
+    this.actions = 'static';
+    this.selector = undefined;
+    this.referenceEl = undefined;
+    this.show = undefined;
+    this.isShown = false;
+  }
+  /** Shows the modal.  */
+  async showModal() {
+    this.handleShow();
+  }
+  /** Closes the modal. */
+  async closeModal() {
+    this.handleClose();
+  }
+  connectedCallback() {
+    if (this.show !== null) {
+      this.isShown = this.show;
+    }
+    this.setDissmissButtons();
+    this.setShowButton();
+  }
+  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */
+  handleOverlayClick(event) {
+    const targetList = event.composedPath();
+    const target = targetList[0];
+    if (target.classList[0] === 'sdds-modal-close' ||
+      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)) {
+      this.handleClose(event);
+    }
+  }
+  /** Adds an event listener to the dismiss buttons that closes the modal. */
+  setDissmissButtons() {
+    this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
+      dismissButton.addEventListener('click', (event) => {
+        this.handleClose(event);
+      });
+    });
+  }
+  render() {
+    return (h(Host, { onClick: (event) => {
+        this.handleOverlayClick(event);
+      }, class: `sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}` }, h("div", { class: `sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${this.size ? `sdds-modal-${this.size}` : ''} ` }, h("div", { class: "sdds-modal-header" }, h("slot", { name: "sdds-modal-headline" }), h("button", { class: "sdds-modal-close", "aria-label": "close", onClick: () => this.handleClose() }, h("sdds-icon", { name: "cross", size: "20px" }))), h("div", { class: "sdds-modal-body" }, h("slot", { name: "sdds-modal-body" })), h("div", { class: "sdds-modal-actions" }, h("slot", { name: "sdds-modal-actions" })))));
+  }
+  get host() { return getElement(this); }
+};
 Modal.style = modalCss;
 
 export { Modal as sdds_modal };

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

@@ -1 +1 @@
-{"file":"sdds-modal.entry.js","mappings":"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","names":[],"sources":["./src/components/modal/modal.scss?tag=sdds-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import 'modal-vars';\n@import '../../mixins/box-sizing';\n@import '../../mixins/focus-state';\n\n//TODO: Find a way to create a mixin in spacings that can be used for screen size in rem\n//Media rules doesn't calculate correct with using rem\n// Screen breakpoints\n$screen-s: 320px; //320px\n$screen-md: 672px; // 672px\n$screen-l: 1056px; //1056px\n$screen-xl: 1312px; //1312px\n$screen-xxl: 1584px; //1584px\n\n$modals: (\n  $screen-s: (\n    xs: 100%,\n    sm: 100%,\n    md: 100%,\n    lg: 100%,\n  ),\n  $screen-md: (\n    xs: 75%,\n    sm: 62.5%,\n    md: 75%,\n    lg: 100%,\n  ),\n  $screen-l: (\n    xs: 31.25%,\n    sm: 43.75%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xl: (\n    xs: 31.25%,\n    sm: 37.5%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xxl: (\n    xs: 25%,\n    sm: 37.5%,\n    md: 50%,\n    lg: 75%,\n  ),\n);\n\n/* MIXINS */\n\n@mixin modal-scroll-inner {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n  }\n}\n\n@mixin modal-scroll-outer {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n    border-radius: 0 1em 1em 0;\n  }\n}\n\n@mixin modal-host {\n  left: 0;\n  top: 0;\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  z-index: z(modal);\n  background-color: var(--sdds-modal-backdrop);\n  padding: 0 16px;\n\n  @media (max-width: $screen-s) {\n    padding: 0;\n  }\n\n  &.show {\n    display: flex;\n  }\n\n  &.hide {\n    display: none;\n  }\n}\n\n@mixin modal-header {\n  display: flex;\n  padding-bottom: var(--sdds-spacing-element-8);\n  position: sticky;\n  top: 0;\n  background-color: var(--sdds-modal-background);\n  z-index: 1;\n\n  &::before {\n    content: ' ';\n    position: absolute;\n    height: 16px;\n    top: -16px;\n    width: 100%;\n    background-color: var(--sdds-modal-background);\n  }\n}\n\n@mixin modal-headline {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-headline-05);\n  letter-spacing: var(--sdds-headline-05-ls);\n  margin: 0;\n  flex: 1;\n}\n\n@mixin modal-body {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-body-01);\n  letter-spacing: var(--sdds-body-01-ls);\n  padding-bottom: 40px;\n  overflow-y: visible;\n  padding-right: 16px;\n  @include modal-scroll-inner;\n\n  @media (min-width: $screen-l) {\n    padding-right: 64px;\n  }\n}\n\n/* MODAL STYLING */\n\n.sdds-modal {\n  @include sdds-box-sizing;\n\n  background-color: var(--sdds-modal-background);\n  margin: auto;\n  position: relative;\n  border-radius: 4px;\n  padding: 16px;\n  max-height: 85vh;\n  overflow-y: auto;\n\n  @include modal-scroll-outer;\n\n  &__actions-sticky {\n    overflow: hidden;\n\n    .sdds-modal-body {\n      font: var(--sdds-body-01);\n      letter-spacing: var(--sdds-body-01-ls);\n      padding-bottom: 96px;\n      margin: 0 -16px 0 0;\n      max-height: calc(85vh - 36px);\n      overflow-y: auto;\n    }\n\n    .sdds-modal-actions {\n      position: absolute;\n      bottom: -1px;\n      left: 0;\n      right: 0;\n      background-color: var(--sdds-modal-background);\n      padding: var(--sdds-spacing-element-16);\n      display: flex;\n      gap: 16px;\n    }\n  }\n\n  &__actions-static {\n    .sdds-modal-actions {\n      background-color: var(--sdds-modal-background);\n      display: flex;\n      gap: 16px;\n    }\n  }\n}\n\n//Width of modals in different breakpoints\n@each $screen, $modals in $modals {\n  @media (min-width: $screen) {\n    @each $modal, $value in $modals {\n      .sdds-modal-#{$modal} {\n        width: $value;\n      }\n    }\n  }\n}\n\n@media (max-width: $screen-s) {\n  .sdds-modal-md,\n  .sdds-modal-lg,\n  .sdds-modal-sm {\n    height: 100%;\n\n    slot[name='sdds-modal-actions']::slotted(*) {\n      display: flex;\n    }\n  }\n}\n\n/* MODAL SUBELEMENTS */\n\n.sdds-modal-header {\n  @include modal-header;\n}\n\n.sdds-modal-headline {\n  @include modal-headline;\n\n  color: var(--sdds-modal-text);\n}\n\n.sdds-modal-body {\n  @include modal-body;\n}\n\n.sdds-modal-backdrop {\n  @include sdds-box-sizing;\n  @include modal-host;\n}\n\nbutton.sdds-modal-close {\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  appearance: unset;\n}\n\n.sdds-modal-close {\n  display: inline-block;\n  height: auto;\n  color: var(--sdds-modal-icon);\n  cursor: pointer;\n\n  &:focus {\n    @include sdds-focus-state;\n  }\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n}\n\n//web component with nested svg\n.sdds-modal-close-btn {\n  display: inline-block;\n  height: auto;\n  background-repeat: no-repeat;\n  cursor: pointer;\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n\n  svg {\n    fill: var(--sdds-modal-icon);\n  }\n}\n\n.sdds-modal-overflow {\n  overflow: hidden;\n}\n\n/* WEB COMPONENT STUFF */\n\n:host {\n  @include modal-host;\n\n  .sdds-modal-close {\n    border: none;\n    background-color: transparent;\n  }\n\n  .sdds-modal-close-btn {\n    border: none;\n    background-color: transparent;\n  }\n}\n\n:host(.show) {\n  display: flex;\n}\n\n:host(.hide) {\n  display: none;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  Element,\n  Method,\n  State,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  @Element() host: HTMLElement;\n\n  /** Disables closing modal on clicking on overlay area. */\n  @Prop() prevent: boolean = false;\n\n  /** Size of modal  */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /** Sticky or Static Actions  */\n  @Prop() actions: 'sticky' | 'static' = 'static';\n\n  /** CSS selector for the element that will show the modal. */\n  @Prop() selector: string;\n\n  /** Element that will show the modal (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Controls whether the modal is shown or not. If this is set hiding and showing\n   * will be decided by this prop and will need to be controlled from the outside. */\n  @Prop() show: boolean;\n\n  // State that keeps track of show/closed state for the modal.\n  @State() isShown: boolean = false;\n\n  /** Shows the modal.  */\n  @Method()\n  async showModal() {\n    this.handleShow();\n  }\n\n  /** Closes the modal. */\n  @Method()\n  async closeModal() {\n    this.handleClose();\n  }\n\n  /** Emitts when the modal is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<any>;\n\n  connectedCallback() {\n    if (this.show !== null) {\n      this.isShown = this.show;\n    }\n    this.setDissmissButtons();\n    this.setShowButton();\n  }\n\n  /** Emits a close event and then close the modal if it is not prevented. */\n  handleClose = (event?) => {\n    const closeEvent = this.sddsClose.emit(event);\n    if (!closeEvent.defaultPrevented) {\n      this.isShown = false;\n    }\n  };\n\n  handleShow = () => {\n    this.isShown = true;\n  };\n\n  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */\n  handleOverlayClick(event) {\n    const targetList = event.composedPath();\n    const target = targetList[0];\n    if (\n      target.classList[0] === 'sdds-modal-close' ||\n      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)\n    ) {\n      this.handleClose(event);\n    }\n  }\n\n  /** Adds an event listener to the reference element that shows/closes the modal. */\n  initializeReferenceElement = (referenceEl) => {\n    if (referenceEl) {\n      referenceEl.addEventListener('click', (event) => {\n        event.stopPropagation();\n        if (this.isShown) {\n          this.handleClose(event);\n        } else {\n          this.handleShow();\n        }\n      });\n    }\n  };\n\n  /** Check if there is a referenceElement or selector and adds event listener to them if so. */\n  setShowButton = () => {\n    if (this.selector || this.referenceEl) {\n      const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n      if (referenceEl) {\n        this.initializeReferenceElement(referenceEl);\n      }\n    }\n  };\n\n  /** Adds an event listener to the dismiss buttons that closes the modal. */\n  setDissmissButtons() {\n    this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {\n      dismissButton.addEventListener('click', (event) => {\n        this.handleClose(event);\n      });\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          this.handleOverlayClick(event);\n        }}\n        class={`sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}`}\n      >\n        <div\n          class={`sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${\n            this.size ? `sdds-modal-${this.size}` : ''\n          } `}\n        >\n          <div class=\"sdds-modal-header\">\n            <slot name=\"sdds-modal-headline\"></slot>\n            <button class=\"sdds-modal-close\" aria-label=\"close\" onClick={() => this.handleClose()}>\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n\n          <div class=\"sdds-modal-body\">\n            <slot name=\"sdds-modal-body\"></slot>\n          </div>\n\n          <div class=\"sdds-modal-actions\">\n            <slot name=\"sdds-modal-actions\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-modal.entry.js","mappings":"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","names":[],"sources":["./src/components/modal/modal.scss?tag=sdds-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import 'modal-vars';\n@import '../../mixins/box-sizing';\n@import '../../mixins/focus-state';\n\n//TODO: Find a way to create a mixin in spacings that can be used for screen size in rem\n//Media rules doesn't calculate correct with using rem\n// Screen breakpoints\n$screen-s: 320px; //320px\n$screen-md: 672px; // 672px\n$screen-l: 1056px; //1056px\n$screen-xl: 1312px; //1312px\n$screen-xxl: 1584px; //1584px\n\n$modals: (\n  $screen-s: (\n    xs: 100%,\n    sm: 100%,\n    md: 100%,\n    lg: 100%,\n  ),\n  $screen-md: (\n    xs: 75%,\n    sm: 62.5%,\n    md: 75%,\n    lg: 100%,\n  ),\n  $screen-l: (\n    xs: 31.25%,\n    sm: 43.75%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xl: (\n    xs: 31.25%,\n    sm: 37.5%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xxl: (\n    xs: 25%,\n    sm: 37.5%,\n    md: 50%,\n    lg: 75%,\n  ),\n);\n\n/* MIXINS */\n\n@mixin modal-scroll-inner {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n  }\n}\n\n@mixin modal-scroll-outer {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n    border-radius: 0 1em 1em 0;\n  }\n}\n\n@mixin modal-host {\n  left: 0;\n  top: 0;\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  z-index: z(modal);\n  background-color: var(--sdds-modal-backdrop);\n  padding: 0 16px;\n\n  @media (max-width: $screen-s) {\n    padding: 0;\n  }\n\n  &.show {\n    display: flex;\n  }\n\n  &.hide {\n    display: none;\n  }\n}\n\n@mixin modal-header {\n  display: flex;\n  padding-bottom: var(--sdds-spacing-element-8);\n  position: sticky;\n  top: 0;\n  background-color: var(--sdds-modal-background);\n  z-index: 1;\n\n  &::before {\n    content: ' ';\n    position: absolute;\n    height: 16px;\n    top: -16px;\n    width: 100%;\n    background-color: var(--sdds-modal-background);\n  }\n}\n\n@mixin modal-headline {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-headline-05);\n  letter-spacing: var(--sdds-headline-05-ls);\n  margin: 0;\n  flex: 1;\n}\n\n@mixin modal-body {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-body-01);\n  letter-spacing: var(--sdds-body-01-ls);\n  padding-bottom: 40px;\n  overflow-y: visible;\n  padding-right: 16px;\n  @include modal-scroll-inner;\n\n  @media (min-width: $screen-l) {\n    padding-right: 64px;\n  }\n}\n\n/* MODAL STYLING */\n\n.sdds-modal {\n  @include sdds-box-sizing;\n\n  background-color: var(--sdds-modal-background);\n  margin: auto;\n  position: relative;\n  border-radius: 4px;\n  padding: 16px;\n  max-height: 85vh;\n  overflow-y: auto;\n\n  @include modal-scroll-outer;\n\n  &__actions-sticky {\n    overflow: hidden;\n\n    .sdds-modal-body {\n      font: var(--sdds-body-01);\n      letter-spacing: var(--sdds-body-01-ls);\n      padding-bottom: 96px;\n      margin: 0 -16px 0 0;\n      max-height: calc(85vh - 36px);\n      overflow-y: auto;\n    }\n\n    .sdds-modal-actions {\n      position: absolute;\n      bottom: -1px;\n      left: 0;\n      right: 0;\n      background-color: var(--sdds-modal-background);\n      padding: var(--sdds-spacing-element-16);\n      display: flex;\n      gap: 16px;\n    }\n  }\n\n  &__actions-static {\n    .sdds-modal-actions {\n      background-color: var(--sdds-modal-background);\n      display: flex;\n      gap: 16px;\n    }\n  }\n}\n\n//Width of modals in different breakpoints\n@each $screen, $modals in $modals {\n  @media (min-width: $screen) {\n    @each $modal, $value in $modals {\n      .sdds-modal-#{$modal} {\n        width: $value;\n      }\n    }\n  }\n}\n\n@media (max-width: $screen-s) {\n  .sdds-modal-md,\n  .sdds-modal-lg,\n  .sdds-modal-sm {\n    height: 100%;\n\n    slot[name='sdds-modal-actions']::slotted(*) {\n      display: flex;\n    }\n  }\n}\n\n/* MODAL SUBELEMENTS */\n\n.sdds-modal-header {\n  @include modal-header;\n}\n\n.sdds-modal-headline {\n  @include modal-headline;\n\n  color: var(--sdds-modal-text);\n}\n\n.sdds-modal-body {\n  @include modal-body;\n}\n\n.sdds-modal-backdrop {\n  @include sdds-box-sizing;\n  @include modal-host;\n}\n\nbutton.sdds-modal-close {\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  appearance: unset;\n}\n\n.sdds-modal-close {\n  display: inline-block;\n  height: auto;\n  color: var(--sdds-modal-icon);\n  cursor: pointer;\n\n  &:focus {\n    @include sdds-focus-state;\n  }\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n}\n\n//web component with nested svg\n.sdds-modal-close-btn {\n  display: inline-block;\n  height: auto;\n  background-repeat: no-repeat;\n  cursor: pointer;\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n\n  svg {\n    fill: var(--sdds-modal-icon);\n  }\n}\n\n.sdds-modal-overflow {\n  overflow: hidden;\n}\n\n/* WEB COMPONENT STUFF */\n\n:host {\n  @include modal-host;\n\n  .sdds-modal-close {\n    border: none;\n    background-color: transparent;\n  }\n\n  .sdds-modal-close-btn {\n    border: none;\n    background-color: transparent;\n  }\n}\n\n:host(.show) {\n  display: flex;\n}\n\n:host(.hide) {\n  display: none;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  Element,\n  Method,\n  State,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  @Element() host: HTMLElement;\n\n  /** Disables closing modal on clicking on overlay area. */\n  @Prop() prevent: boolean = false;\n\n  /** Size of modal  */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /** Sticky or Static Actions  */\n  @Prop() actions: 'sticky' | 'static' = 'static';\n\n  /** CSS selector for the element that will show the modal. */\n  @Prop() selector: string;\n\n  /** Element that will show the modal (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Controls whether the modal is shown or not. If this is set hiding and showing\n   * will be decided by this prop and will need to be controlled from the outside. */\n  @Prop() show: boolean;\n\n  // State that keeps track of show/closed state for the modal.\n  @State() isShown: boolean = false;\n\n  /** Shows the modal.  */\n  @Method()\n  async showModal() {\n    this.handleShow();\n  }\n\n  /** Closes the modal. */\n  @Method()\n  async closeModal() {\n    this.handleClose();\n  }\n\n  /** Emitts when the modal is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<any>;\n\n  connectedCallback() {\n    if (this.show !== null) {\n      this.isShown = this.show;\n    }\n    this.setDissmissButtons();\n    this.setShowButton();\n  }\n\n  /** Emits a close event and then close the modal if it is not prevented. */\n  handleClose = (event?) => {\n    const closeEvent = this.sddsClose.emit(event);\n    if (!closeEvent.defaultPrevented) {\n      this.isShown = false;\n    }\n  };\n\n  handleShow = () => {\n    this.isShown = true;\n  };\n\n  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */\n  handleOverlayClick(event) {\n    const targetList = event.composedPath();\n    const target = targetList[0];\n    if (\n      target.classList[0] === 'sdds-modal-close' ||\n      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)\n    ) {\n      this.handleClose(event);\n    }\n  }\n\n  /** Adds an event listener to the reference element that shows/closes the modal. */\n  initializeReferenceElement = (referenceEl) => {\n    if (referenceEl) {\n      referenceEl.addEventListener('click', (event) => {\n        if (this.isShown) {\n          this.handleClose(event);\n        } else {\n          this.handleShow();\n        }\n      });\n    }\n  };\n\n  /** Check if there is a referenceElement or selector and adds event listener to them if so. */\n  setShowButton = () => {\n    if (this.selector || this.referenceEl) {\n      const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n      if (referenceEl) {\n        this.initializeReferenceElement(referenceEl);\n      }\n    }\n  };\n\n  /** Adds an event listener to the dismiss buttons that closes the modal. */\n  setDissmissButtons() {\n    this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {\n      dismissButton.addEventListener('click', (event) => {\n        this.handleClose(event);\n      });\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          this.handleOverlayClick(event);\n        }}\n        class={`sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}`}\n      >\n        <div\n          class={`sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${\n            this.size ? `sdds-modal-${this.size}` : ''\n          } `}\n        >\n          <div class=\"sdds-modal-header\">\n            <slot name=\"sdds-modal-headline\"></slot>\n            <button class=\"sdds-modal-close\" aria-label=\"close\" onClick={() => this.handleClose()}>\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n\n          <div class=\"sdds-modal-body\">\n            <slot name=\"sdds-modal-body\"></slot>\n          </div>\n\n          <div class=\"sdds-modal-actions\">\n            <slot name=\"sdds-modal-actions\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-navigation-tab.entry.js

@@ -0,0 +1,24 @@
+import { r as registerInstance, h, H as Host } from './index-2d8c4bc9.js';
+
+const sddsNavigationTabCss = ":host{box-sizing:border-box;z-index:200;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;margin:26px 4px}:host ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .navigation-tab-item{position:relative;margin-right:32px}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:\" \";position:absolute;bottom:-26px;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 0s;z-index:1}:host .selected ::slotted(*){color:var(--sdds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}:host .disabled{color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}:host .disabled ::slotted(*){opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
+
+const SddsNavigationTab = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.disabled = false;
+    this.selected = false;
+  }
+  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */
+  async setSelected(selected) {
+    this.selected = selected;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("div", { class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
+  }
+};
+SddsNavigationTab.style = sddsNavigationTabCss;
+
+export { SddsNavigationTab as sdds_navigation_tab };
+
+//# sourceMappingURL=sdds-navigation-tab.entry.js.map

package/dist/esm/sdds-navigation-tab.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-navigation-tab.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,w1CAAw1C;;MCOx2C,iBAAiB;;;oBAEA,KAAK;oBAEJ,KAAK;;;EAIlC,MAAM,WAAW,CAAC,QAAiB;IACjC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;GAC1B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,WACE,KAAK,EAAE,wBAAwB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;aAC3D,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAEpC,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/tabs/navigation-tabs/navigation-tab/sdds-navigation-tab.scss?tag=sdds-navigation-tab&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tab/sdds-navigation-tab.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/z-index';\n@import '../../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  z-index: z(tab);\n  display: block;\n\n  ::slotted(*) {\n    all: unset;\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-navigation-tabs-tab-color);\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out 0s;\n    white-space: nowrap;\n    background-color: transparent;\n    border: 0;\n    width: 100%;\n    margin: 26px 4px;\n  }\n\n  ::slotted(*:focus-visible) {\n    @include sdds-focus-state;\n  }\n\n  .navigation-tab-item {\n    position: relative;\n    margin-right: 32px;\n\n    &:hover {\n      cursor: pointer;\n\n      &::after {\n        width: 100%;\n      }\n    }\n  }\n\n  .navigation-tab-item::after {\n    content: ' ';\n    position: absolute;\n    bottom: -26px;\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-navigation-tabs-tab-indicator-background-hover);\n    transition: width 0.15s ease-in-out 0s;\n    z-index: 1;\n  }\n\n  .selected {\n    ::slotted(*) {\n      color: var(--sdds-navigation-tabs-tab-color-selected);\n    }\n\n    &::after {\n      width: 100%;\n      background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);\n    }\n  }\n\n  .disabled {\n    color: var(--sdds-navigation-tabs-tab-color-disabled);\n    pointer-events: none;\n\n    ::slotted(*) {\n      opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);\n    }\n  }\n}\n\n:host(.first) {\n  margin-left: 32px;\n}\n\n:host(.last) {\n  margin-right: 32px;\n}\n","import { Component, Host, h, Prop, State, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tab',\n  styleUrl: 'sdds-navigation-tab.scss',\n  shadow: true,\n})\nexport class SddsNavigationTab {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  @State() selected: boolean = false;\n\n  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setSelected(selected: boolean) {\n    this.selected = selected;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <div\n          class={`navigation-tab-item  ${this.selected ? 'selected' : ''}\n           ${this.disabled ? 'disabled' : ''}`}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,139 +1,140 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fdfb114c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
 
 const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--sdds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--sdds-inline-tabs-horizontal-divider-background);opacity:var(--sdds-inline-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:201}:host .scroll-left-button{left:0;z-index:201}:host .scroll-right-button,:host .scroll-left-button{color:var(--sdds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--sdds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--sdds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--sdds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--sdds-folder-tabs-scroll-btn-color)}";
 
-const NavigationTabs = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sddsChange = createEvent(this, "sddsChange", 7);
-    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.modeVariant = 'primary';
-    this.showLeftScroll = false;
-    this.showRightScroll = false;
-    this.selectedTab = undefined;
-  }
-  /** Selects a tab based on tabindex, will not select a disabled tab. */
-  async selectTab(tabIndex) {
-    if (!this.children[tabIndex].disabled) {
-      this.children.forEach((element) => element.removeAttribute('selected'));
-      this.children = this.children.map((element, index) => {
-        if (index === tabIndex) {
-          element.setAttribute('selected', '');
-          this.selectedTab = {
-            tab: element.innerText,
-            tabIndex: index,
-          };
-        }
-        return element;
-      });
-    }
-    return {
-      selectedTab: this.selectedTab.tab,
-      selectedTabIndex: this.selectedTab.tabIndex,
-    };
-  }
-  handleSelectedTabChange() {
-    this.host.setAttribute('selected-tab', this.selectedTab.tab);
-    this.host.setAttribute('selected-tab-index', `${this.selectedTab.tabIndex}`);
-    this.sddsChange.emit({
-      selectedTab: this.selectedTab,
-    });
-  }
-  connectedCallback() {
-    this.children = Array.from(this.host.children);
-    this.children = this.children.map((item, index) => {
-      item.addEventListener('click', () => {
-        if (!item.disabled) {
-          this.children.forEach((element) => element.removeAttribute('selected'));
-          item.setAttribute('selected', '');
-          this.selectedTab = {
-            tab: item.innerText,
-            tabIndex: index,
-          };
-        }
-      });
-      if (index === 0) {
-        item.classList.add('first');
-      }
-      if (index === this.children.length - 1) {
-        item.classList.add('last');
-      }
-      if (item.selected) {
-        this.selectedTab = {
-          tab: item.innerText,
-          tabIndex: index,
-        };
-      }
-      return item;
-    });
-    this.children = Array.from(this.host.children);
-    this.children[0].classList.add('first');
-    this.children[this.children.length - 1].classList.add('last');
-  }
-  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);
-  }
-  scrollRight() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
-    this.evaluateScrollButtons();
-  }
-  scrollLeft() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
-    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 ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { role: "list", class: "wrapper", ref: (el) => {
-        this.navWrapperElement = el;
-      } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("sdds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("sdds-icon", { name: "chevron_right", size: "20px" })))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "selectedTab": ["handleSelectedTabChange"]
-  }; }
-};
+const NavigationTabs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sddsChange = createEvent(this, "sddsChange", 7);
+    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.addResizeObserver = () => {
+      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.addEventListenerToTabs = () => {
+      this.children = Array.from(this.host.children);
+      this.children = this.children.map((item, index) => {
+        item.addEventListener('click', () => {
+          const sddsChangeEvent = this.sddsChange.emit({
+            selectedTabIndex: this.children.indexOf(item)
+          });
+          if (!sddsChangeEvent.defaultPrevented) {
+            if (!item.disabled) {
+              this.children.forEach((element) => element.setSelected(false));
+              item.setSelected(true);
+              this.selectedIndex = index;
+              this.sddsChange.emit({
+                selectedTabIndex: this.selectedIndex,
+              });
+            }
+          }
+        });
+        return item;
+      });
+    };
+    this.componentDidLoad = () => {
+      if (this.selectedIndex === undefined) {
+        this.addEventListenerToTabs();
+        this.children[this.defaultSelectedIndex].setSelected(true);
+        this.selectedIndex = this.defaultSelectedIndex;
+        this.sddsChange.emit({
+          selectedTabIndex: this.selectedIndex,
+        });
+      }
+      else {
+        this.children[this.selectedIndex].setSelected(true);
+        this.sddsChange.emit({
+          selectedTabIndex: this.selectedIndex,
+        });
+      }
+    };
+    this.modeVariant = 'primary';
+    this.defaultSelectedIndex = 0;
+    this.selectedIndex = undefined;
+    this.showLeftScroll = false;
+    this.showRightScroll = false;
+  }
+  /** Sets the passed tabindex as the selected tab. */
+  async selectTab(tabIndex) {
+    if (!this.children[tabIndex].disabled) {
+      this.children.forEach((element) => element.setSelected(false));
+      this.children = this.children.map((element, index) => {
+        if (index === tabIndex) {
+          element.setSelected(true);
+          this.selectedIndex = tabIndex;
+        }
+        return element;
+      });
+    }
+    return {
+      selectedTabIndex: this.selectedIndex,
+    };
+  }
+  scrollRight() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
+    this.evaluateScrollButtons();
+  }
+  scrollLeft() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
+    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;
+    }
+  }
+  connectedCallback() {
+    this.children = Array.from(this.host.children);
+    this.children[0].classList.add('first');
+    this.children[this.children.length - 1].classList.add('last');
+  }
+  componentDidRender() {
+    this.addResizeObserver();
+  }
+  render() {
+    return (h(Host, { role: "list", class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
+        this.navWrapperElement = el;
+      } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("sdds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("sdds-icon", { name: "chevron_right", size: "20px" })))));
+  }
+  get host() { return getElement(this); }
+};
 NavigationTabs.style = navigationTabsCss;
 
 export { NavigationTabs as sdds_navigation_tabs };