@scania/tegel 0.0.51 → 0.0.61

package/dist/components/sdds-modal.js

@@ -3,121 +3,120 @@ import { d as defineCustomElement$2 } from './icon.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    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 this; }
-  static get style() { return modalCss; }
-}, [1, "sdds-modal", {
-    "prevent": [4],
-    "size": [1],
-    "actions": [1],
-    "selector": [1],
-    "referenceEl": [16],
-    "show": [4],
-    "isShown": [32],
-    "showModal": [64],
-    "closeModal": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-modal", "sdds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-modal":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Modal);
-      }
-      break;
-    case "sdds-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get style() { return modalCss; }
+}, [1, "sdds-modal", {
+    "prevent": [4],
+    "size": [1],
+    "actions": [1],
+    "selector": [1],
+    "referenceEl": [16],
+    "show": [4],
+    "isShown": [32],
+    "showModal": [64],
+    "closeModal": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-modal", "sdds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Modal);
+      }
+      break;
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
 
 const SddsModal = Modal;

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

@@ -1 +1 @@
-{"file":"sdds-modal.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.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/components/sdds-navigation-tab.d.ts

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

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

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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))));
+  }
+  static get style() { return sddsNavigationTabCss; }
+}, [1, "sdds-navigation-tab", {
+    "disabled": [4],
+    "selected": [32],
+    "setSelected": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-navigation-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-navigation-tab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsNavigationTab$1);
+      }
+      break;
+  } });
+}
+
+const SddsNavigationTab = SddsNavigationTab$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsNavigationTab, defineCustomElement };
+
+//# sourceMappingURL=sdds-navigation-tab.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-navigation-tab.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,w1CAAw1C;;MCOx2CA,mBAAiB;;;;;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":["SddsNavigationTab"],"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}