@duetds/components 6.0.7 → 6.2.0

package/lib/dist-custom-elements/duet-menu-bar-menu.d.ts

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

package/lib/dist-custom-elements/duet-menu-bar-menu.js

@@ -0,0 +1,83 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-f25401f4.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+
+const duetMenuBarMenuCss = "*,*::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;height:100%}.duet-menu-bar-menu{height:100%}.duet-menu-bar-menu button{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;min-height:5rem;padding:0 12px;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.25;color:#00294d;text-align:center;text-decoration:none;cursor:pointer}@media (min-width: 62em){.duet-menu-bar-menu button{padding:0 20px}}@media (min-width: 64.0625em){.duet-menu-bar-menu button{padding:0 28px}}.duet-menu-bar-menu button:hover{color:#0077b3}.duet-menu-bar-menu button.active{color:#0077b3}.duet-theme-turva .duet-menu-bar-menu button.active{color:#c60c30}.duet-menu-bar-menu button.active::after{position:absolute;top:auto;bottom:2px;left:0;display:block;width:100%;height:2px;content:\"\";background:#0077b3;transition:300ms ease;transform:translateY(2px)}.duet-theme-turva .duet-menu-bar-menu button.active::after{background:#c60c30}.duet-menu-bar-menu .items{position:absolute;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:4rem;color:#00294d;background:#f3f9fc;border-bottom:1px solid #cde5f1;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset}.duet-menu-bar-menu .items.hidden{display:none}.duet-menu-bar-menu.duet-theme-turva 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}.duet-menu-bar-menu.duet-theme-turva button:hover{color:#c60c30}.duet-menu-bar-menu.duet-theme-turva button.active{color:#c60c30}.duet-menu-bar-menu.duet-theme-turva button.active::after{background:#c60c30}.duet-menu-bar-menu.duet-theme-turva .items{background:#f5f5f7}";
+
+const DuetMenuBarMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.duetMenuBarMenuEvent = createEvent(this, "duetMenuBarMenuEvent", 7);
+    /**
+     * Theme.
+     */
+    this.theme = "";
+    /**
+     * Active
+     */
+    this.active = false;
+    /**
+     * Open
+     */
+    this.open = false;
+    this.toggleMenu = (e) => {
+      const toggle = !this.open;
+      this.open = toggle;
+      this.duetMenuBarMenuEvent.emit({
+        originalEvent: e,
+        data: { element: this.element, open: this.open },
+        component: "duet-menu-bar-menu",
+      });
+    };
+    this.onClick = (e) => {
+      this.toggleMenu(e);
+      e.stopImmediatePropagation();
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null, h("div", { class: { "duet-menu-bar-menu": true, "duet-theme-turva": this.theme === "turva", active: this.active } }, h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+        active: this.active || this.open,
+      }, onClick: this.onClick }, h("slot", { name: "label" })), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+        items: true,
+        hidden: !this.open,
+      } }, h("slot", null)))));
+  }
+  get element() { return this; }
+  static get style() { return duetMenuBarMenuCss; }
+}, [1, "duet-menu-bar-menu", {
+    "theme": [1025],
+    "active": [1028],
+    "open": [1540]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-menu-bar-menu"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-menu-bar-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetMenuBarMenu$1);
+      }
+      break;
+  } });
+}
+
+const DuetMenuBarMenu = DuetMenuBarMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetMenuBarMenu, defineCustomElement };

package/lib/dist-custom-elements/duet-menu-bar.d.ts

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

package/lib/dist-custom-elements/duet-menu-bar.js

@@ -0,0 +1,99 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-f25401f4.js';
+import { m as media_query_large, c as media_query_xx_large } from './p-c4d8cad0.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { d as defineCustomElement$2 } from './p-3b984f00.js';
+
+const duetMenuBarCss = "*,*::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;width:100%}.duet-menu-bar{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;height:5rem;padding:0 28px;background:white;border-top:1px solid #e1e3e6;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1)}.duet-menu-bar>*{display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar>:first-child{flex-basis:0;flex-grow:1;justify-content:flex-start}.duet-menu-bar>:last-child{flex-basis:0;flex-grow:1;justify-content:flex-end}.duet-menu-bar ::slotted(*){display:flex;align-items:center;justify-content:center;height:100%}.duet-menu-bar.duet-theme-turva{background:white}";
+
+const DuetMenuBar$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Own Properties.
+     */
+    this.mql = [
+      window.matchMedia(media_query_large.replace(/'/g, "")),
+      window.matchMedia(media_query_xx_large.replace(/'/g, "")),
+    ];
+    this.boundMqlFunctions = [];
+    this.logoSize = "large";
+    /**
+     * Theme.
+     */
+    this.theme = "";
+    this.changeLogoSize = () => {
+      if (this.mql[1].matches) {
+        this.logoSize = "large";
+      }
+      else {
+        this.logoSize = "medium";
+      }
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  connectedCallback() {
+    this.changeLogoSize();
+    for (let i = 0; i < this.mql.length; i++) {
+      // addEventListener is not available in Stencil hydrate
+      if (this.mql[i].addEventListener) {
+        const bound = this.changeLogoSize.bind(this);
+        this.mql[i].addEventListener("change", bound);
+        this.boundMqlFunctions[i] = bound;
+      }
+    }
+  }
+  disconnectedCallback() {
+    for (let i = 0; i < this.mql.length; i++) {
+      // removeEventListener is not available in Stencil hydrate
+      if (this.mql[i].removeEventListener) {
+        this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
+      }
+    }
+    this.boundMqlFunctions = [];
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null, h("div", { class: { "duet-menu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" }, h("duet-logo", { size: this.logoSize, margin: "none" }), h("slot", { name: "center" }), h("slot", { name: "right" }))));
+  }
+  get element() { return this; }
+  static get style() { return duetMenuBarCss; }
+}, [1, "duet-menu-bar", {
+    "theme": [1025],
+    "logoSize": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-menu-bar", "duet-logo"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-menu-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetMenuBar$1);
+      }
+      break;
+    case "duet-logo":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetMenuBar = DuetMenuBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetMenuBar, defineCustomElement };

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

@@ -1,19 +1,19 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-1940df2f.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-f25401f4.js';
 import { d as disableBodyScroll, e as enableBodyScroll } from './p-bd779757.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { f as focusElement, F as FocusGuard } from './p-0b8f16f1.js';
 import { b as isEscapeKey } from './p-d8549efe.js';
 import { a as getLanguage, g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$7 } from './p-0a3b3fbb.js';
-import { d as defineCustomElement$6 } from './p-c36d9eb5.js';
-import { d as defineCustomElement$5 } from './p-565c7b5e.js';
-import { d as defineCustomElement$4 } from './p-dfb36895.js';
-import { d as defineCustomElement$3 } from './p-76a78894.js';
-import { d as defineCustomElement$2 } from './p-b7f5c755.js';
+import { d as defineCustomElement$7 } from './p-936e320e.js';
+import { d as defineCustomElement$6 } from './p-fd6ca85a.js';
+import { d as defineCustomElement$5 } from './p-914d8914.js';
+import { d as defineCustomElement$4 } from './p-c0cc3992.js';
+import { d as defineCustomElement$3 } from './p-990a00b7.js';
+import { d as defineCustomElement$2 } from './p-b715c813.js';
 
 const duetModalCss = "*,*::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}.duet-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;max-height:100vh;overflow-y:auto;visibility:hidden;background:rgba(0, 41, 77, 0.85);opacity:0;transition:300ms ease;transition-delay:200ms}.duet-modal-overlay.duet-theme-turva{background:rgba(23, 28, 58, 0.85)}.duet-modal-overlay.duet-modal-active{visibility:visible;opacity:1;transition:300ms ease;transition-delay:0s}.duet-modal-overlay.duet-disable-transitions{transition:none}::slotted(img){width:100%}.duet-modal-inner{display:flex;align-items:center;width:100%;min-height:100%;padding:20px 16px}@media (min-width: 36em){.duet-modal-inner{padding:48px 16px}}@media (max-width: 35.9375em){.duet-modal-inner.duet-modal-large{padding-right:0;padding-left:0}}.duet-modal{position:relative;width:100%;max-width:686px;margin:auto;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:400;font-variant-numeric:tabular-nums;line-height:1.5;color:#00294d;background:white;border-radius:4px;opacity:0;transition:300ms ease;transition-delay:0ms;transform:scale(0.96)}.duet-theme-turva .duet-modal{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}.duet-modal-active .duet-modal{opacity:1;transition:300ms ease;transition-delay:200ms;transform:none}.duet-disable-transitions .duet-modal{transition:none}.duet-modal.small{max-width:545px}.duet-modal.large{max-width:100%}@media (min-width: 36em){.duet-modal.large{max-width:1110px}}.duet-modal:focus{outline:0}.duet-modal-body{width:100%;padding:36px 28px}.duet-modal-body.duet-modal-gutter-small{padding:36px 20px}.duet-modal-body.duet-modal-gutter-large{padding:48px 36px}@media (max-width: 22.5em){.duet-modal-body{padding:36px 20px}.duet-modal-body.duet-modal-gutter-large{padding:48px 28px}}@media (max-width: 35.9375em){.duet-modal-body{padding:36px 20px}.duet-modal-body.duet-modal-gutter-large{padding:48px 36px}}@media (min-width: 36em){.duet-modal-body{padding:36px}.duet-modal-body.duet-modal-gutter-large{padding:28px 72px}}@media (min-width: 48em){.duet-modal-body{padding:36px 72px}.duet-modal-body.duet-modal-gutter-large{padding:36px 72px}}@media (min-width: 76.25em){.duet-modal-body{padding:36px 48px 48px}.duet-modal-body.duet-modal-gutter-large{padding:48px 94px}.small .duet-modal-body{padding:36px 48px}}.duet-modal-header{text-align:center}.duet-modal-close{position:absolute;top:12px;right:12px}.duet-modal-heading{width:100%;padding-right:60px;overflow:hidden;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:1.25rem;font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25;color:#00294d;text-decoration:none;text-overflow:ellipsis;letter-spacing:-0.01rem;white-space:nowrap}.duet-modal-heading.duet-p-0{padding:0 !important}.duet-modal-heading.duet-m-0{margin:0 !important}";
 

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

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

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

@@ -0,0 +1,302 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-f25401f4.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { b as isEscapeKey, d as isTabKey, c as isEnterKey, h as isArrowLeftKey, e as isArrowUpKey, j as isArrowRightKey, f as isArrowDownKey } from './p-d8549efe.js';
+import { g as getLocaleString } from './p-ede854e1.js';
+import { p as parsePossibleJSON } from './p-5a9d75e1.js';
+import { d as defineCustomElement$8 } from './p-bd7fbd74.js';
+import { d as defineCustomElement$7 } from './p-c62a4b7f.js';
+import { d as defineCustomElement$6 } from './p-936569fb.js';
+import { d as defineCustomElement$5 } from './p-914d8914.js';
+import { d as defineCustomElement$4 } from './p-b8a94f80.js';
+import { d as defineCustomElement$3 } from './p-809d88d4.js';
+import { d as defineCustomElement$2 } from './p-b715c813.js';
+
+const duetMultiselectCss = "*,*::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;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;max-width:100%;vertical-align:bottom}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}:host.duet-expand{width:100% !important}}:host(.duet-m-0){margin:0 !important}.duet-multiselect-tooltip{position:absolute;top:12px;right:0}@media (min-width: 48em){.duet-multiselect-tooltip{position:relative;top:4px;right:auto}}.duet-multiselect-placeholder{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:white}.duet-multiselect-container{position:relative;width:100%}.duet-multiselect-wrapper{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.25}.duet-theme-turva .duet-multiselect-wrapper{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-multiselect{display:flex;gap:12px;align-items:center;justify-content:flex-start;width:100%;min-width:8rem;padding:12px 14px !important;overflow:hidden;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;font-variant-numeric:tabular-nums;line-height:1.5;color:#00294d;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;background:white;border:1px solid #909599;border-radius:4px;transition:150ms ease}.duet-multiselect:hover{border-color:#909599;box-shadow:0 0 0 1px #909599}.duet-theme-turva .duet-multiselect:hover{border-color:#747475;box-shadow:0 0 0 1px #747475}.has-error .duet-multiselect:hover{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-multiselect:hover{box-shadow:0 0 0 1px #e02a0d}.duet-multiselect:focus,.duet-multiselect.duet-multiselect-active{border-color:#0077b3;outline:0;box-shadow:0 0 0 1px #0077b3;transition:none}.duet-theme-turva .duet-multiselect:focus,.duet-theme-turva .duet-multiselect.duet-multiselect-active{border-color:#171c3a;box-shadow:0 0 0 1px #171c3a}.has-error .duet-multiselect:focus,.has-error .duet-multiselect.duet-multiselect-active{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-multiselect:focus,.duet-theme-turva.has-error .duet-multiselect.duet-multiselect-active{box-shadow:0 0 0 1px #e02a0d}.duet-multiselect[disabled]{color:#00294d !important;cursor:default !important;background:#f5f8fa !important;border-color:#f5f8fa !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:#00294d !important}.duet-theme-turva .duet-multiselect[disabled]{color:#171c3a !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important;-webkit-text-fill-color:#171c3a !important}.duet-multiselect>:first-child{flex:1}.duet-multiselect .duet-multiselect-badge{position:absolute;right:3rem}.has-error .duet-multiselect{border-color:#de2362 !important}.has-error .duet-multiselect .duet-multiselect-icon{color:#de2362 !important}.duet-theme-turva.has-error .duet-multiselect{border-color:#e02a0d !important}.duet-theme-turva.has-error .duet-multiselect .duet-multiselect-icon{color:#e02a0d !important}.duet-theme-turva .duet-multiselect{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:#747475}.duet-multiselect svg{width:20px;height:20px;color:#00294d;pointer-events:none}.duet-theme-turva .duet-multiselect svg{color:#171c3a}.duet-multiselect svg.duet-multiselect-icon--rotate{transform:rotate(180deg)}.duet-multiselect-checkboxes{position:absolute;z-index:700;width:100%;padding:16px;margin:8px 0 0;visibility:hidden;background:white;border:1px solid #e1e3e6;border-radius:4px;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right}.duet-theme-turva .duet-multiselect-checkboxes{background:white;border-color:#e4e4e6;box-shadow:0 4px 10px 0 rgba(23, 28, 58, 0.15)}.duet-multiselect-checkboxes.duet-multiselect-checkboxes-active{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}.duet-multiselect-help{display:block;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:0.875rem;font-weight:400;line-height:1.25;color:#657787;border-radius:4px}.duet-multiselect-help span{display:block;margin-top:8px}.duet-theme-turva .duet-multiselect-help{color:#747475}.has-error .duet-multiselect-help{color:#de2362}.duet-theme-turva.has-error .duet-multiselect-help{color:#e02a0d}.duet-label-hidden duet-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+
+function toggleInArray(arr, item) {
+  return arr.includes(item) ? arr.filter(i => i !== item) : [...arr, item];
+}
+const DuetMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.duetChange = createEvent(this, "duetChange", 3);
+    this.duetFocus = createEvent(this, "duetFocus", 7);
+    this.duetBlur = createEvent(this, "duetBlur", 7);
+    /**
+     * Own Properties
+     */
+    this.errorId = createID("DuetError");
+    this.labelId = createID("DuetLabel");
+    this.topCaptionId = createID("DuetCaptionTop");
+    this.selectedLangObject = {
+      en: "selected",
+      fi: "valittu",
+      sv: "vald",
+    };
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    this.processedItems = [];
+    this.checkboxesVisible = false;
+    this.activeDescendant = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Display the select in error state along with an error message.
+     */
+    this.error = "";
+    /**
+     * Expands the input to fill 100% of the container width.
+     */
+    this.expand = false;
+    /**
+     * Value of multiselect
+     */
+    this.value = [];
+    /**
+     * Theme of the select.
+     */
+    this.theme = "";
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * Adds a unique identifier for the select.
+     */
+    this.identifier = createID("DuetMultiselect");
+    /**
+     * Hint text to display.
+     */
+    this.placeholder = "";
+    /**
+     * Makes the select component disabled. This prevents users from being able
+     * to interact with the select, and conveys its inactive state to assistive
+     * technologies.
+     */
+    this.disabled = false;
+    /**
+     * Label for the select.
+     */
+    this.label = "label";
+    /**
+     * Tooltip to display next to the label of the input.
+     */
+    this.tooltip = "";
+    /**
+     * With direction setting you can force the tooltip to always open towards left
+     * or right instead of automatically determining the direction.
+     */
+    this.tooltipDirection = "auto";
+    /**
+     * Component event handling.
+     */
+    this.onChange = (ev) => {
+      this.duetChange.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-multiselect",
+      });
+    };
+    this.onBlur = (ev) => {
+      this.duetBlur.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-multiselect",
+      });
+    };
+    this.onFocus = (ev) => {
+      this.duetFocus.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-multiselect",
+      });
+    };
+    this.onMultiselectKeyDown = (e) => {
+      if (isEscapeKey(e) || isTabKey(e)) {
+        if (this.checkboxesVisible) {
+          this.checkboxesVisible = false;
+          this.multiselectElement.focus();
+          e.preventDefault();
+        }
+      }
+    };
+    this.onMultiselectInputKeyDown = (e) => {
+      if (isEnterKey(e)) {
+        e.preventDefault();
+        this.toggleCheckboxes();
+        setTimeout(() => {
+          if (this.checkboxesVisible) {
+            const firstOption = this.element.shadowRoot.querySelector(`#${this.getOptionIdentifier(0)}`);
+            if (firstOption) {
+              firstOption.focus();
+            }
+          }
+        }, 200);
+      }
+    };
+    this.onCheckboxKeyDown = (e, key) => {
+      let nextOption;
+      if (isArrowLeftKey(e) || isArrowUpKey(e)) {
+        nextOption = this.element.shadowRoot.querySelector(`#${this.getOptionIdentifier(key - 1)}`);
+      }
+      else if (isArrowRightKey(e) || isArrowDownKey(e)) {
+        nextOption = this.element.shadowRoot.querySelector(`#${this.getOptionIdentifier(key + 1)}`);
+      }
+      if (nextOption) {
+        nextOption.focus();
+        e.preventDefault();
+        this.activeDescendant = nextOption.id;
+      }
+    };
+    this.toggleCheckboxes = () => {
+      this.checkboxesVisible = !this.checkboxesVisible;
+    };
+    this.toggleCheckbox = (e, item) => {
+      this.value = toggleInArray(this.value, item);
+      this.onChange(e);
+    };
+    this.getOptionIdentifier = (key) => {
+      return `${this.identifier}-option-${key}`;
+    };
+  }
+  handleFocus(e) {
+    const isClickOutside = e.composedPath().every(node => node !== this.element);
+    if (isClickOutside) {
+      this.checkboxesVisible = false;
+    }
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.isCaptionVisible = !!this.caption;
+    this.refresh();
+  }
+  /**
+   * Sets focus on the specified `duet-multiselect`. Use this method instead of the global
+   * `multiselect.focus()`.
+   */
+  async setFocus(options) {
+    if (this.multiselectElement) {
+      this.multiselectElement.focus(options);
+    }
+  }
+  /**
+   * Local methods.
+   */
+  async refresh() {
+    this.processedItems = parsePossibleJSON(this.items);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const selectedTranslation = getLocaleString(this.selectedLangObject);
+    return (h(Host, { class: {
+        "duet-m-0": this.margin === "none",
+        "duet-expand": this.expand,
+      } }, h("div", { class: {
+        "duet-multiselect-container": true,
+        "duet-label-hidden": this.labelHidden,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-input-top-caption-shown": this.isCaptionVisible,
+        "has-error": !!this.error,
+      }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes` }, this.placeholder), this.value && this.value.length > 0 && (h("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", selectedTranslation, h("duet-visually-hidden", null, ", ", this.value.map(item => item.label).join(", ")))), h("svg", { role: "img", class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+        "duet-multiselect-checkboxes": true,
+        "duet-multiselect-checkboxes-active": this.checkboxesVisible,
+      }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, this.processedItems &&
+      this.processedItems.map((item, key) => {
+        var _a, _b;
+        return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
+      }))), h("span", { class: "duet-multiselect-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "items": ["refresh"]
+  }; }
+  static get style() { return duetMultiselectCss; }
+}, [1, "duet-multiselect", {
+    "margin": [1],
+    "error": [1],
+    "expand": [4],
+    "value": [1040],
+    "theme": [1025],
+    "labelHidden": [4, "label-hidden"],
+    "identifier": [1],
+    "placeholder": [1],
+    "caption": [1],
+    "items": [1],
+    "disabled": [516],
+    "label": [1],
+    "tooltip": [1],
+    "tooltipDirection": [1, "tooltip-direction"],
+    "processedItems": [32],
+    "checkboxesVisible": [32],
+    "activeDescendant": [32],
+    "setFocus": [64]
+  }, [[8, "click", "handleFocus"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-multiselect", "duet-badge", "duet-caption", "duet-checkbox", "duet-icon", "duet-label", "duet-tooltip", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-multiselect":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetMultiselect$1);
+      }
+      break;
+    case "duet-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "duet-caption":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "duet-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "duet-label":
+      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 DuetMultiselect = DuetMultiselect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetMultiselect, defineCustomElement };

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

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