@scania/tegel 0.0.8 → 0.0.10

package/dist/components/tds-navigation-tabs.js

@@ -0,0 +1,171 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-inline-tabs-horizontal-divider-background);opacity:var(--tds-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(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-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(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
+
+const TdsNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTabs extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.tdsChange = createEvent(this, "tdsChange", 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('tds-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', () => {
+          if (!item.disabled) {
+            const tdsChangeEvent = this.tdsChange.emit({
+              selectedTabIndex: this.children.indexOf(item),
+            });
+            if (!tdsChangeEvent.defaultPrevented) {
+              this.children.forEach((element) => element.setSelected(false));
+              item.setSelected(true);
+              this.selectedIndex = index;
+              this.tdsChange.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.tdsChange.emit({
+          selectedTabIndex: this.selectedIndex,
+        });
+      }
+      else {
+        this.children[this.selectedIndex].setSelected(true);
+        this.tdsChange.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 ? `tds-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("tds-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("tds-icon", { name: "chevron_right", size: "20px" })))));
+  }
+  get host() { return this; }
+  static get style() { return navigationTabsCss; }
+}, [1, "tds-navigation-tabs", {
+    "modeVariant": [1, "mode-variant"],
+    "defaultSelectedIndex": [2, "default-selected-index"],
+    "selectedIndex": [514, "selected-index"],
+    "showLeftScroll": [32],
+    "showRightScroll": [32],
+    "selectTab": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-navigation-tabs", "tds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-navigation-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsNavigationTabs$1);
+      }
+      break;
+    case "tds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TdsNavigationTabs = TdsNavigationTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsNavigationTabs, defineCustomElement };

package/dist/components/tds-popover-canvas.d.ts

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

package/dist/components/tds-popover-canvas.js

@@ -0,0 +1,6 @@
+import { T as TdsPopoverCanvas$1, d as defineCustomElement$1 } from './popover-canvas.js';
+
+const TdsPopoverCanvas = TdsPopoverCanvas$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsPopoverCanvas, defineCustomElement };

package/dist/components/tds-popover-menu.d.ts

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

package/dist/components/tds-popover-menu.js

@@ -0,0 +1,109 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as createPopper } from './popper.js';
+
+const popoverMenuCss = ":host{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--tds-popover-menu-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;display:none;z-index:800}:host *{box-sizing:border-box}:host(.tds-popover-menu-show){opacity:1;display:block}";
+
+const TdsPopoverMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMenu extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selector = '';
+    this.referenceEl = undefined;
+    this.show = false;
+    this.placement = 'auto';
+    this.offsetSkidding = 0;
+    this.offsetDistance = 8;
+    this.renderedShowValue = false;
+    this.popperInstance = undefined;
+    this.target = undefined;
+  }
+  handleOutsideClick() {
+    if (this.show) {
+      this.show = false;
+    }
+  }
+  componentDidLoad() {
+    var _a;
+    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+    this.renderedShowValue = this.show;
+    this.popperInstance = createPopper(this.target, this.popoverMenuElement, {
+      strategy: 'fixed',
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [this.offsetSkidding, this.offsetDistance],
+          },
+        },
+      ],
+    });
+    const showMenu = () => {
+      this.show = true;
+    };
+    const hideMenu = () => {
+      this.show = false;
+    };
+    this.target.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+      if (this.show) {
+        hideMenu();
+      }
+      else {
+        showMenu();
+      }
+    });
+    this.popoverMenuElement.addEventListener('mousemove', (event) => {
+      event.stopPropagation();
+    });
+    this.popoverMenuElement.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+    });
+  }
+  componentDidRender() {
+    if (this.show && !this.renderedShowValue) {
+      // Here we update the popper position since its position is wrong
+      // before it is rendered.
+      this.popperInstance.update();
+    }
+    this.renderedShowValue = this.show;
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  render() {
+    return (h(Host, { class: `tds-popover-menu ${this.show ? 'tds-popover-menu-show' : ''}` }, h("slot", null)));
+  }
+  get popoverMenuElement() { return this; }
+  static get style() { return popoverMenuCss; }
+}, [1, "tds-popover-menu", {
+    "selector": [1],
+    "referenceEl": [16],
+    "show": [4],
+    "placement": [1],
+    "offsetSkidding": [2, "offset-skidding"],
+    "offsetDistance": [2, "offset-distance"],
+    "renderedShowValue": [32],
+    "popperInstance": [32],
+    "target": [32]
+  }, [[9, "mousedown", "handleOutsideClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-popover-menu"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-popover-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsPopoverMenu$1);
+      }
+      break;
+  } });
+}
+
+const TdsPopoverMenu = TdsPopoverMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsPopoverMenu, defineCustomElement };

package/dist/components/tds-radio-button.d.ts

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

package/dist/components/tds-radio-button.js

@@ -0,0 +1,54 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { g as generateUniqueId } from './utils.js';
+
+const radioButtonCss = ".sc-tds-radio-button:root,.tds-mode-light.sc-tds-radio-button{--tds-radio-button-color:var(--tds-grey-958);--tds-radio-button-interaction-01:var(--tds-blue-800);--tds-radio-button-interaction-02:var(--tds-white);--tds-radio-button-background-hover:var(--tds-blue-800);--tds-radio-button-background-focus:var(--tds-blue-800);--tds-radio-button-disabled:var(--tds-grey-600);--tds-radio-button-border-color-disabled-after:var(--tds-grey-500);--tds-radio-button-color-disabled-after:var(--tds-grey-700);--tds-radio-button-color-disabled-before:var(--tds-grey-700)}.tds-mode-dark.sc-tds-radio-button{--tds-radio-button-color:var(--tds-white);--tds-radio-button-interaction-01:var(--tds-white);--tds-radio-button-interaction-02:var(--tds-grey-958);--tds-radio-button-background-hover:var(--tds-white);--tds-radio-button-background-focus:var(--tds-white);--tds-radio-button-disabled:var(--tds-grey-600);--tds-radio-button-border-color-disabled-after:var(--tds-grey-700);--tds-radio-button-color-disabled-after:var(--tds-grey-700)}.tds-radio-button.sc-tds-radio-button{box-sizing:border-box;display:flex;align-items:center;margin-left:-4px;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-radio-button-color)}.tds-radio-button.sc-tds-radio-button *.sc-tds-radio-button{box-sizing:border-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button{appearance:none;outline:none;margin:0;border:0;width:24px;height:24px;border-radius:50%;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button+label.sc-tds-radio-button{padding:var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) var(--tds-spacing-element-4);cursor:pointer}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::after{content:\"\";position:absolute;border-radius:50%;box-sizing:border-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::before{width:24px;height:24px;left:0;top:0}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::after{border:1px solid var(--tds-radio-button-interaction-01);background-color:var(--tds-radio-button-interaction-02);width:16px;height:16px;left:4px;top:4px}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:hover::before{background-color:var(--tds-radio-button-background-hover);opacity:0.12}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:focus::before{background-color:var(--tds-radio-button-background-focus);opacity:0.24;animation:rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button{cursor:not-allowed}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled::after,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button::after{border-color:var(--tds-radio-button-border-color-disabled-after);background-color:var(--tds-radio-button-interaction-02)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled+label.sc-tds-radio-button,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button+label.sc-tds-radio-button{color:var(--tds-radio-button-disabled);cursor:not-allowed}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button:hover::before{display:none;opacity:1}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked::after{border:4px solid var(--tds-radio-button-interaction-01)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid var(--tds-radio-button-color-disabled-before);box-sizing:content-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled::after,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled::after{border:4px solid var(--tds-radio-button-interaction-02);background-color:var(--tds-radio-button-color-disabled-after);left:5px;top:5px}@keyframes rb-focus{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:0.24}}";
+
+const TdsRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsRadioButton extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.tdsChange = createEvent(this, "tdsChange", 6);
+    this.handleChange = () => {
+      this.tdsChange.emit({
+        radioId: this.radioId,
+        value: this.value,
+      });
+    };
+    this.name = undefined;
+    this.value = undefined;
+    this.radioId = generateUniqueId();
+    this.checked = false;
+    this.required = false;
+    this.disabled = false;
+  }
+  render() {
+    return (h("div", { class: "tds-radio-button" }, h("input", { class: "tds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
+  }
+  get host() { return this; }
+  static get style() { return radioButtonCss; }
+}, [6, "tds-radio-button", {
+    "name": [1],
+    "value": [1],
+    "radioId": [1, "radio-id"],
+    "checked": [516],
+    "required": [4],
+    "disabled": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-radio-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-radio-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsRadioButton$1);
+      }
+      break;
+  } });
+}
+
+const TdsRadioButton = TdsRadioButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsRadioButton, defineCustomElement };

package/dist/components/tds-side-menu-close-button.d.ts

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

package/dist/components/tds-side-menu-close-button.js

@@ -0,0 +1,42 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as inheritAriaAttributes } from './utils.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const sideMenuCloseButtonCss = ":host{opacity:0;transition:opacity 0.15s ease}:host button{height:64px;width:100%;text-align:left;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host button:hover{cursor:pointer;background-color:var(--tds-sidebar-item-state-hover)}:host button:focus-visible{cursor:pointer;border:1px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}";
+
+const TdsSideMenuCloseButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuCloseButton extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("button", Object.assign({}, buttonProps), h("tds-icon", { name: "cross", size: "20px" }))));
+  }
+  get host() { return this; }
+  static get style() { return sideMenuCloseButtonCss; }
+}, [1, "tds-side-menu-close-button"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-side-menu-close-button", "tds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-side-menu-close-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsSideMenuCloseButton$1);
+      }
+      break;
+    case "tds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TdsSideMenuCloseButton = TdsSideMenuCloseButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsSideMenuCloseButton, defineCustomElement };

package/dist/components/tds-side-menu-collapse-button.d.ts

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

package/dist/components/tds-side-menu-collapse-button.js

@@ -0,0 +1,73 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './side-menu-item.js';
+
+const sideMenuCollapseButtonCss = ":host{position:sticky;bottom:0;display:none;height:68px;border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .icon{transform:rotateZ(90deg);transition:all 0.2s ease-in-out;width:20px;height:20px}:host .state-collapsed .icon{transform:translateX(-50%) rotateZ(90deg) rotateX(180deg);color:var(--tds-sidebar-side-menu-single-item-color);margin-left:0;position:absolute;left:50%}@media (min-width: 992px){:host{display:block}}";
+
+const TdsSideMenuCollapseButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuCollapseButton extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.tdsCollapse = createEvent(this, "tdsCollapse", 3);
+    this.internalTdsCollapse = createEvent(this, "internalTdsCollapse", 6);
+    this.handleClick = () => {
+      /** Emit a public event that the user can prevent. */
+      const tdsCollapseEvent = this.tdsCollapse.emit({
+        collapsed: !this.collapsed,
+      });
+      /** If the public event was not prevented. */
+      if (!tdsCollapseEvent.defaultPrevented) {
+        /** Emit internal event that is listened to by other side-menu components */
+        this.collapsed = !this.collapsed;
+        this.internalTdsCollapse.emit({
+          collapsed: this.collapsed,
+        });
+      }
+    };
+    this.collapsed = false;
+  }
+  collapseSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('tds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+  }
+  render() {
+    return (h(Host, { role: "button", tabindex: "0", onClick: () => {
+        this.handleClick();
+      } }, h("div", { class: {
+        'wrapper': true,
+        'state-collapsed': this.collapsed,
+      } }, h("tds-side-menu-item", { class: {
+        button: true,
+      } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), h("slot", null))))));
+  }
+  get host() { return this; }
+  static get style() { return sideMenuCollapseButtonCss; }
+}, [1, "tds-side-menu-collapse-button", {
+    "collapsed": [32]
+  }, [[16, "internalTdsSideMenuPropChange", "collapseSideMenuEventHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-side-menu-collapse-button", "tds-side-menu-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-side-menu-collapse-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsSideMenuCollapseButton$1);
+      }
+      break;
+    case "tds-side-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TdsSideMenuCollapseButton = TdsSideMenuCollapseButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsSideMenuCollapseButton, defineCustomElement };

package/dist/components/tds-side-menu-dropdown-list-item.d.ts

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

package/dist/components/tds-side-menu-dropdown-list-item.js

@@ -0,0 +1,63 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sideMenuDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:48px;width:100%}:host .component{height:100%;width:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--tds-nav-item-border-color);display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-header-nav-item-dropdown-opened-background);color:var(--tds-header-nav-item-dropdown-opened-color);border:none}:host .component ::slotted(a:hover),:host .component ::slotted(button:hover){background-color:var(--tds-header-nav-item-dropdown-opened-background-hover);cursor:pointer}:host .component ::slotted(a:active),:host .component ::slotted(button:active){background-color:var(--tds-header-nav-item-dropdown-opened-background-active) !important;cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component.component-selected ::slotted(a),:host .component.component-selected ::slotted(button){border-left:4px solid var(--tds-nav-item-border-color-active);padding-left:20px;background-color:var(--tds-header-nav-item-dropdown-opened-background-selected)}:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button){padding-left:56px}";
+
+const TdsSideMenuDropdownListItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuDropdownListItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selected = false;
+    this.dropdownHasIcon = false;
+    this.collapsed = false;
+  }
+  collapseSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('tds-side-menu');
+  }
+  componentDidLoad() {
+    var _a;
+    const dropdownEl = this.host.closest('tds-side-menu-dropdown');
+    const dropdownBtnIconSlotEl = dropdownEl.shadowRoot.querySelector('slot[name="button-icon"]');
+    const btnIconSlottedEls = dropdownBtnIconSlotEl.assignedElements();
+    const hasBtnIcon = (btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls.length) > 0;
+    const btnIconIsUserImage = ((_a = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'tds-side-menu-user-image';
+    if (hasBtnIcon && !btnIconIsUserImage) {
+      this.dropdownHasIcon = true;
+    }
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("div", { class: {
+        'component': true,
+        'component-selected': this.selected,
+        'component-dropdown-has-icon': this.dropdownHasIcon,
+        'component-collapsed': this.collapsed,
+      } }, h("slot", null))));
+  }
+  get host() { return this; }
+  static get style() { return sideMenuDropdownListItemCss; }
+}, [1, "tds-side-menu-dropdown-list-item", {
+    "selected": [4],
+    "dropdownHasIcon": [32],
+    "collapsed": [32]
+  }, [[16, "internalTdsSideMenuPropChange", "collapseSideMenuEventHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-side-menu-dropdown-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-side-menu-dropdown-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsSideMenuDropdownListItem$1);
+      }
+      break;
+  } });
+}
+
+const TdsSideMenuDropdownListItem = TdsSideMenuDropdownListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsSideMenuDropdownListItem, defineCustomElement };

package/dist/components/tds-side-menu-dropdown-list.d.ts

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

package/dist/components/tds-side-menu-dropdown-list.js

@@ -0,0 +1,45 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sideMenuDropdownListCss = ":host{display:block;width:190px}:host [role=list]{padding:0;margin:0;list-style:none;border-radius:none;background-color:var(--tds-header-app-launcher-menu-bg)}:host .state-collapsed ::slotted(*){border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}";
+
+const TdsSideMenuDropdownList$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuDropdownList extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.collapsed = false;
+  }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('tds-side-menu');
+  }
+  render() {
+    return (h(Host, { role: "list" }, h("div", { class: {
+        'state-collapsed': this.collapsed,
+      } }, h("slot", null))));
+  }
+  get host() { return this; }
+  static get style() { return sideMenuDropdownListCss; }
+}, [1, "tds-side-menu-dropdown-list", {
+    "collapsed": [32]
+  }, [[16, "internalTdsSideMenuPropChange", "collapsedSideMenuEventHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-side-menu-dropdown-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-side-menu-dropdown-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsSideMenuDropdownList$1);
+      }
+      break;
+  } });
+}
+
+const TdsSideMenuDropdownList = TdsSideMenuDropdownList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsSideMenuDropdownList, defineCustomElement };