@duetds/components 6.0.3 → 6.0.5

package/lib/dist-custom-elements/duet-tab-group.js

@@ -0,0 +1,301 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-1ad6b04e.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { h as isArrowLeftKey, e as isArrowUpKey, j as isArrowRightKey, f as isArrowDownKey } from './p-d8549efe.js';
+import { a as getLanguage, g as getLocaleString } from './p-ede854e1.js';
+import { d as defineCustomElement$8 } from './p-92012dcc.js';
+import { d as defineCustomElement$7 } from './p-4f516732.js';
+import { d as defineCustomElement$6 } from './p-fb6be4e4.js';
+import { d as defineCustomElement$5 } from './p-2bb345c0.js';
+import { d as defineCustomElement$4 } from './p-21887c28.js';
+import { d as defineCustomElement$3 } from './p-f1d0dca7.js';
+import { d as defineCustomElement$2 } from './p-53a0c93d.js';
+
+const duetTabGroupCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;display:block;width:100%}.duet-tab-group-tabs{margin-bottom:28px !important;display:block;width:100%;max-width:100%;padding-top:2px;list-style:none}.duet-tab-group-tabs.duet-m-0{margin:0 !important}.duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden{display:none}@media (min-width: 36em){.duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden{display:block}}.duet-tab-variation-plain .duet-tab-group-tabs{border-bottom:1px solid #e1e3e6}.duet-theme-turva.duet-tab-variation-plain .duet-tab-group-tabs{border-bottom-color:#e4e4e6}@media (min-width: 36em){duet-select{display:none !important}}.duet-tab-button{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:20px;margin-top:-2px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.1;color:#00294d;text-align:left;text-decoration:none;cursor:pointer;background:white;border:2px solid #e1e3e6;border-radius:0;transition:150ms ease}.duet-tab-button.duet-p-0{padding:0 !important}.duet-tab-button.duet-m-0{margin:0 !important}.duet-theme-turva .duet-tab-button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a;border-color:#e4e4e6}.duet-tab-button.duet-p-0{padding:0 !important}@media (min-width: 36em){.duet-tab-button{display:inline-block;width:auto;margin-left:-2px;border-right:2px solid #e1e3e6;border-radius:0}}.duet-tab-button:hover{z-index:200;border-color:#909599}.duet-theme-turva .duet-tab-button:hover{border-color:#747475}.duet-tab-button:active{opacity:0.75;transition:none}.duet-tab-button.selected{z-index:201;color:white;background:#00294d;border-color:#00294d;outline:0;box-shadow:none !important}.duet-theme-turva .duet-tab-button.selected{color:white;background-color:#171c3a;border-color:#171c3a}.duet-tab-button:focus{z-index:200;outline:0}:host(.user-is-tabbing) .duet-tab-button:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}:host(.user-is-tabbing) .duet-theme-turva .duet-tab-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tab-button:first-child{border-top-left-radius:4px;border-top-right-radius:4px}@media (min-width: 36em){.duet-tab-button:first-child{border-top-right-radius:0;border-bottom-left-radius:4px}}.duet-tab-button:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}@media (min-width: 36em){.duet-tab-button:last-child{border-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}}.duet-tab-variation-plain .duet-tab-button{display:inline-block;width:auto;padding-right:0;padding-left:0;border:0;border-radius:0;transition:none}.duet-tab-variation-plain .duet-tab-button+.duet-tab-button{margin-left:36px}.duet-tab-variation-plain .duet-tab-button.selected{color:#0077b3;background:white;border-bottom:3px solid #0077b3}.duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected{color:#c60c30;border-bottom-color:#c60c30}.duet-tab-group-content{position:relative;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:#00294d;text-align:left}.duet-theme-turva .duet-tab-group-content{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}";
+
+const DuetTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.duetChange = createEvent(this, "duetChange", 3);
+    this.duetTabChange = createEvent(this, "duetTabChange", 7);
+    this.id = createID("DuetTabGroup");
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    this.tabs = [];
+    this.selected = 0;
+    /**
+     * Theme of the component.
+     */
+    this.theme = "";
+    /**
+     * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens),
+     * if this is a number instead of true it will be used as "amount of items to scroll"
+     */
+    this.scrolls = false;
+    /**
+     * Whether the tab-group collapses to a select dropwdown in minor breakpoints
+     */
+    this.collapses = true;
+    /**
+     * Aria label for the entire tab-group
+     */
+    this.accessibleLabel = undefined;
+    /**
+     * Style variation of the tab group.
+     */
+    this.variation = "default";
+    /**
+     * The currently active language. This setting changes the accessible labels to match the
+     * chosen language.
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
+     */
+    this.language = getLanguage();
+    /**
+     * Defaults for Label
+     * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
+     */
+    this.labelDefaults = {
+      fi: "Valitse",
+      en: "Choose",
+      sv: "Välj",
+    };
+    /**
+     * Label for the select element which gets shown on mobile.
+     * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
+     */
+    this.label = getLocaleString(this.labelDefaults, this.language);
+    /**
+     * Determines whether the label for the select element shown on mobile is visually hidden.
+     */
+    this.labelHidden = true;
+    /**
+     * Optional identifier to add to buttons in the tab group
+     */
+    this.identifier = this.id;
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Controls the padding of the component.
+     */
+    this.padding = "auto";
+    /**
+     * Component event handling.
+     */
+    this.handleKeyDown = ev => {
+      let button;
+      if (isArrowLeftKey(ev) || isArrowUpKey(ev)) {
+        button = ev.target.previousElementSibling;
+      }
+      else if (isArrowRightKey(ev) || isArrowDownKey(ev)) {
+        button = ev.target.nextElementSibling;
+      }
+      if (button) {
+        ev.preventDefault();
+        button.click();
+        button.focus();
+      }
+    };
+    this.renderTab = () => {
+      const renderedTabs = this.tabs.map((element, index) => {
+        return (h("button", { role: "tab", id: this.getButtonId(index), "aria-controls": this.getTabId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: index === 0 ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
+            "duet-p-0": this.padding === "none",
+            "duet-tab-button": true,
+            selected: element.selected,
+          }, onClick: () => this.openTab(index), onKeyDown: ev => this.handleKeyDown(ev) }, element.label));
+      });
+      if (this.scrolls) {
+        return (h("duet-scrollable", { selected: this.selected, identifier: this.identifier }, renderedTabs));
+      }
+      return renderedTabs;
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  async connectedCallback() {
+    if (typeof MutationObserver !== "undefined") {
+      this.mutationO = new MutationObserver(() => {
+        this.updateTabs();
+      });
+      this.mutationO.observe(this.element, {
+        attributes: true,
+        attributeFilter: ["label"],
+        childList: true,
+        characterData: true,
+        subtree: true,
+      });
+    }
+    await this.updateTabs();
+  }
+  disconnectedCallback() {
+    if (this.mutationO) {
+      this.mutationO.disconnect();
+      this.mutationO = undefined;
+    }
+  }
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * This method allows you to open any of the tabs by calling the method and
+   * passing the index of the tab. Please note that index starts from zero.
+   */
+  async openTab(tabIndex) {
+    if (tabIndex >= this.tabs.length) {
+      throw new Error(`[duet-tabs] Index ${tabIndex} is out of bounds of tabs length`);
+    }
+    this.selected = tabIndex;
+    this.tabs.forEach((tab, i) => {
+      tab.selected = i === tabIndex;
+    });
+    const event = {
+      value: tabIndex,
+      component: "duet-tab-group",
+    };
+    this.duetChange.emit(event);
+    this.duetTabChange.emit(event);
+  }
+  /**
+   * This method used to refresh the contents of the tab group
+   * but is now deprecated as this is done automatically.
+   * @deprecated
+   */
+  async refresh() {
+    console.log("[duet-tabs] Refresh method is deprecated and will be removed in the future version.");
+  }
+  /**
+   * Local methods.
+   */
+  getTabs() {
+    const allTabs = Array.from(this.element.querySelectorAll("duet-tab"));
+    const localTabs = allTabs.filter(tab => tab.closest("duet-tab-group") === this.element);
+    if (localTabs.length === 0) {
+      throw new Error("[duet-tabs] Must have at least one tab");
+    }
+    // filter out any nested tabs
+    return localTabs;
+  }
+  getButtonId(index) {
+    return `${this.id}-button-${index}`;
+  }
+  getTabId(index) {
+    return `${this.id}-tab-${index}`;
+  }
+  getAccessibleDescription(index) {
+    const description = this.tabs[index].getAttribute("accessible-description") || null;
+    return description;
+  }
+  async updateTabs() {
+    this.tabs = this.getTabs();
+    this.tabs.forEach((tab, index) => {
+      tab.id = this.getTabId(index);
+      tab.setAttribute("aria-labelledby", this.getButtonId(index));
+      if (tab.selected) {
+        this.selected = index;
+      }
+    });
+    return;
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h("div", { class: {
+        "duet-tab-group": true,
+        "duet-theme-turva": this.theme === "turva",
+        [`duet-tab-variation-${this.variation}`]: true,
+        "duet-tab-group-scrolls": this.scrolls,
+        "duet-tab-group-collapses": this.collapses,
+      }, "aria-label": this.accessibleLabel }, this.tabs.length > 3 && this.collapses && (h("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.openTab(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
+        return { label: tab.label, value: index.toString() };
+      }) })), h("div", { role: "tablist", class: {
+        "duet-m-0": this.margin === "none",
+        "duet-tab-group-tabs": true,
+        "duet-tab-group-hidden": this.tabs.length > 3,
+        "duet-tab-group-collapses": this.collapses,
+      } }, this.renderTab()), h("div", { role: "tabpanel", tabindex: "0", class: { "duet-tab-group-content": true, "duet-m-0": this.margin === "none" } }, h("slot", null))));
+  }
+  get element() { return this; }
+  static get style() { return duetTabGroupCss; }
+}, [1, "duet-tab-group", {
+    "theme": [1025],
+    "scrolls": [4],
+    "collapses": [4],
+    "accessibleLabel": [1, "accessible-label"],
+    "variation": [1],
+    "language": [1025],
+    "labelDefaults": [1, "label-default"],
+    "label": [1],
+    "labelHidden": [4, "label-hidden"],
+    "identifier": [1],
+    "margin": [1],
+    "padding": [1],
+    "tabs": [32],
+    "selected": [32],
+    "openTab": [64],
+    "refresh": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-tab-group", "duet-caption", "duet-icon", "duet-label", "duet-scrollable", "duet-select", "duet-tooltip", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-tab-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetTabGroup$1);
+      }
+      break;
+    case "duet-caption":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "duet-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "duet-scrollable":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "duet-select":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetTabGroup = DuetTabGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetTabGroup, defineCustomElement };

package/lib/dist-custom-elements/duet-tab.d.ts

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

package/lib/dist-custom-elements/duet-tab.js

@@ -0,0 +1,59 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h } from './p-1ad6b04e.js';
+import { g as getLocaleString } from './p-ede854e1.js';
+
+const duetTabCss = ".sc-duet-tab-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-tab.sc-duet-tab{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:none;width:100%}.duet-tab.selected.sc-duet-tab{display:block}";
+
+const DuetTab$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Defaults for AccessibleLabel
+     * @default null
+     */
+    this.accessibleDescriptionDefault = null;
+    /**
+     * String for AccessibleLabel
+     * @default null
+     */
+    this.accessibleDescription = this.accessibleDescriptionDefault
+      ? getLocaleString(this.accessibleDescriptionDefault)
+      : null;
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    {
+      return (h("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected }, "aria-description": this.accessibleDescription }, h("slot", null)));
+    }
+  }
+  static get style() { return duetTabCss; }
+}, [6, "duet-tab", {
+    "label": [513],
+    "selected": [516],
+    "accessibleDescriptionDefault": [1, "accessible-description-defaults"],
+    "accessibleDescription": [1, "accessible-description"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-tab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetTab$1);
+      }
+      break;
+  } });
+}
+
+const DuetTab = DuetTab$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetTab, defineCustomElement };

package/lib/dist-custom-elements/duet-table.d.ts

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

package/lib/dist-custom-elements/duet-table.js

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+import { D as DuetTable$1, d as defineCustomElement$1 } from './p-0ce83b83.js';
+
+const DuetTable = DuetTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetTable, defineCustomElement };

package/lib/dist-custom-elements/duet-textarea.d.ts

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