@duetds/components 6.0.7 → 6.2.0

package/lib/collection/components/duet-multiselect/duet-multiselect.js

@@ -0,0 +1,607 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+import { createID } from "../../utils/create-id";
+import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey, } from "../../utils/keyboard-utils";
+import { getLocaleString } from "../../utils/language-utils";
+import { parsePossibleJSON } from "../../utils/string-utils";
+function toggleInArray(arr, item) {
+  return arr.includes(item) ? arr.filter(i => i !== item) : [...arr, item];
+}
+export class DuetMultiselect {
+  constructor() {
+    /**
+     * 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)))));
+  }
+  static get is() { return "duet-multiselect"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-multiselect.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-multiselect.css"]
+  }; }
+  static get properties() { return {
+    "margin": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetMargin",
+        "resolved": "\"auto\" | \"none\"",
+        "references": {
+          "DuetMargin": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Controls the margin of the component."
+      },
+      "attribute": "margin",
+      "reflect": false,
+      "defaultValue": "\"auto\""
+    },
+    "error": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Display the select in error state along with an error message."
+      },
+      "attribute": "error",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "expand": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Expands the input to fill 100% of the container width."
+      },
+      "attribute": "expand",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "DuetMultiselectItem[]",
+        "resolved": "DuetMultiselectItem[]",
+        "references": {
+          "DuetMultiselectItem": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Value of multiselect"
+      },
+      "defaultValue": "[]"
+    },
+    "theme": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "DuetTheme",
+        "resolved": "\"\" | \"default\" | \"turva\"",
+        "references": {
+          "DuetTheme": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Theme of the select."
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "labelHidden": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Visually hide the label, but still show it to screen readers."
+      },
+      "attribute": "label-hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "identifier": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Adds a unique identifier for the select."
+      },
+      "attribute": "identifier",
+      "reflect": false,
+      "defaultValue": "createID(\"DuetMultiselect\")"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Hint text to display."
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "caption": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Caption (underneath label) that can be set as a way of adding extra information"
+      },
+      "attribute": "caption",
+      "reflect": false
+    },
+    "items": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | DuetMultiselectItem[]",
+        "resolved": "DuetMultiselectItem[] | string",
+        "references": {
+          "DuetMultiselectItem": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An array of items to choose from"
+      },
+      "attribute": "items",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Makes the select component disabled. This prevents users from being able\nto interact with the select, and conveys its inactive state to assistive\ntechnologies."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label for the select."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "\"label\""
+    },
+    "tooltip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tooltip to display next to the label of the input."
+      },
+      "attribute": "tooltip",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "tooltipDirection": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetTooltipDirection",
+        "resolved": "\"auto\" | \"left\" | \"right\"",
+        "references": {
+          "DuetTooltipDirection": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
+      },
+      "attribute": "tooltip-direction",
+      "reflect": false,
+      "defaultValue": "\"auto\""
+    }
+  }; }
+  static get states() { return {
+    "processedItems": {},
+    "checkboxesVisible": {},
+    "activeDescendant": {}
+  }; }
+  static get events() { return [{
+      "method": "duetChange",
+      "name": "duetChange",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Callback for when the value changed."
+      },
+      "complexType": {
+        "original": "DuetMultiselectEvent",
+        "resolved": "{ originalEvent?: Event; component: \"duet-multiselect\"; value: DuetMultiselectItem[]; }",
+        "references": {
+          "DuetMultiselectEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "duetFocus",
+      "name": "duetFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the select has focus."
+      },
+      "complexType": {
+        "original": "DuetMultiselectEvent",
+        "resolved": "{ originalEvent?: Event; component: \"duet-multiselect\"; value: DuetMultiselectItem[]; }",
+        "references": {
+          "DuetMultiselectEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "duetBlur",
+      "name": "duetBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the select loses focus."
+      },
+      "complexType": {
+        "original": "DuetMultiselectEvent",
+        "resolved": "{ originalEvent?: Event; component: \"duet-multiselect\"; value: DuetMultiselectItem[]; }",
+        "references": {
+          "DuetMultiselectEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "(options?: FocusOptions) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "FocusOptions": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets focus on the specified `duet-multiselect`. Use this method instead of the global\n`multiselect.focus()`.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "items",
+      "methodName": "refresh"
+    }]; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "handleFocus",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/lib/collection/components/duet-nav/duet-nav.css

@@ -0,0 +1,24 @@
+*,
+*::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%;
+}