@duetds/components 5.0.5 → 5.1.2

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

@@ -0,0 +1,592 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Build, Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch, } from "@stencil/core";
+import { debounce } from "../../utils/js-utils";
+import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
+import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { parsePossibleJSON } from "../../utils/string-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { DuetComboBoxSelect } from "./duet-combobox-select";
+export class DuetCombobox {
+  constructor() {
+    // Safari doesnt properly support aria-activedecendatn, the code associated with this bool is a workaround for that,
+    // this should be removed when Safari fixes the issue
+    // see: https://a11ysupport.io/tests/apg__aria-1-2-combobox-with-list-autocomplete-example#assertion-aria-aria-activedescendant_attribute-convey_value-aria-combobox_role-vo_macos-safari
+    this.isSafari = false;
+    this.resizeObserver = new ResizeObserver(debounce(entries => {
+      var _a, _b;
+      // otherwise, something is wrong, expecting 1 element only
+      if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
+        const currentWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
+        this.listContainer.style.width = `${currentWidth + 1}px`;
+        // this.listElement.style.width = `${currentWidth + 1}px`
+      }
+    }, 100));
+    this.processedItems = null;
+    this.inputWidth = 0;
+    this.inputValue = "";
+    this.selectionMsg = "";
+    this.listOpen = false;
+    // the selected item is based upon the DuetComboboxItem.id value
+    this.selectedItems = new Set();
+    // the activeItem number is based upon the array.index of the array stored in processedItems
+    this.activeItem = undefined;
+    /**
+     * Placeholder defaults
+     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+     */
+    this.accessibleLabelDefaults = {
+      en: {
+        heading: "Select:",
+        item: "{name}, ({current} of {total})",
+        itemFiltered: "{name}, ({current} of {total}, {hiddenItems} filtered)",
+      },
+      fi: {
+        heading: "Valitse:",
+        item: "{name}, ({current}/{total})",
+        itemFiltered: "{name}, ({current}/{total}, {hiddenItems} suodatettu)",
+      },
+      sv: {
+        heading: "Välj:",
+        item: "{name}, ({current} av {total})",
+        itemFiltered: "{name}, ({current} av {total}, {hiddenItems} filtrerade)",
+      },
+    };
+    /**
+     * Hint text to display before the user types into the date picker input.
+     * @default   {
+     * heading: "Valitse:",
+     * item: "{0}, ({1}/{2})",
+     * itemFiltered: "{0}, ({1}/{2} - {3} suodatettu"
+     * }
+     */
+    this.accessibleLabels = getLocaleString(parsePossibleJSON(this.accessibleLabelDefaults), getLanguage());
+    /**
+     * Theme of the combobox.
+     */
+    this.theme = "";
+    /**
+     * Force the user to make a selection (typing things in the input field will only be used for list search)
+     */
+    this.force = false;
+    /**
+     * A hook to overwrite how the values are displayed in the input field after a User select an item
+     * @example (item) => `${item.name} (${item.value})`
+     * @default undefined
+     */
+    this.formatter = (item) => item && item.name ? item.name : "";
+  }
+  activeItemHandler(state) {
+    this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? `active_item` : "";
+  }
+  handleDocumentClick(e) {
+    //we want to remove all user text if they have NOT selected from the dropdown
+    const path = e.composedPath();
+    const isClickOutside = path.every(el => el !== this.element);
+    if (isClickOutside) {
+      this.updateInputText(true);
+      this.listOpen = false;
+    }
+  }
+  /**
+   * Exposes a formatter function to format the item value displayed after a user selects an item
+   * @param item: DuetComboboxItem
+   */
+  async formatItem(item) {
+    return this.formatter(item);
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  connectedCallback() {
+    if (Build.isServer) {
+      return;
+    }
+    if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+      this.isSafari = true;
+    }
+    this.items = this.processedItems = parsePossibleJSON(this.items);
+    this.input = this.element.querySelector("duet-input");
+    this.input.addEventListener("duetChange", this.updateInputValue.bind(this));
+    this.input.addEventListener("click", () => {
+      this.inputValue.length ? (this.listOpen = true) : (this.listOpen = false);
+    });
+    this.element.addEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
+    //add correct aria attributes to the input element
+    this.input.accessibleAutocomplete = "list";
+    this.input.accessibleControls = "duet-combobox-list-element";
+  }
+  disconnectedCallback() {
+    if (Build.isServer) {
+      return;
+    }
+    this.input.removeEventListener("duetChange", this.updateInputValue.bind(this));
+    this.input.removeEventListener("click", () => this.inputValue.length ? (this.listOpen = true) : (this.listOpen = false));
+    this.element.removeEventListener("keydown", this.handleInputKeyDownEvent.bind(this));
+    this.listElement.removeEventListener("click", e => {
+      e.stopPropagation();
+    });
+    this.resizeObserver.disconnect();
+  }
+  componentDidLoad() {
+    // observe resize events to dynamically adjust size of dropdown area
+    this.resizeObserver.observe(this.input);
+    this.listElement.addEventListener("click", e => {
+      e.stopPropagation();
+    });
+  }
+  /**
+   * Updates the input text based on the selected/clicked items.
+   * @param event - event
+   *'param item: DuetComboboxItem - the item that was selected
+   */
+  onListClick(e, item) {
+    e.preventDefault();
+    // update selected item with id
+    this.updateSelectedItems(item.id);
+    this.listOpen = false;
+    return this.listOpen;
+  }
+  /**
+   * Helper function that checks inputs in the field, compares it with the item list and returns true when inputvalue matches selectedItem id
+   * TODO: this should be disabled in multiple mode
+   */
+  shouldListBeFiltered() {
+    if (this.selectedItems.size && this.input.value === this.inputValue) {
+      const item = this.items.filter(item => this.selectedItems.has(item.id));
+      return !(this.formatter(item).toLowerCase() === this.input.value.toLowerCase());
+    }
+    return true;
+  }
+  /**
+   * Helper function that return correct collection depending on filter status returend by shouldListBeFiltered
+   */
+  returnFilteredOrNonFiltered() {
+    return this.processedItems
+      ? this.shouldListBeFiltered()
+        ? this.getFilteredItems()
+        : this.sortFilteredItems(this.processedItems)
+      : [];
+  }
+  /**
+   * Updates the selected items based on the item id.
+   * @param id
+   * @private
+   */
+  async updateSelectedItems(id) {
+    // for a multiple scenario wrap this in an if/else and just don't clear here
+    this.selectedItems.clear();
+    if (this.selectedItems) {
+      if (this.selectedItems.has(id)) {
+        this.selectedItems.delete(id);
+      }
+      else {
+        this.selectedItems.add(id);
+      }
+    }
+    await this.updateInputText();
+  }
+  /**
+   * Updates the input text based on the selected/clicked items.
+   * @param bool -override to clear if invoked by "click outside"
+   */
+  async updateInputText(isBlurred = false) {
+    const item = this.selectedItems.size === 0 ? [] : this.items.filter(item => this.selectedItems.has(item.id));
+    if (this.selectedItems.size === 1) {
+      this.input.value = ""; // set value to empty so that cursor position follows accordingly
+      this.input.value = await this.formatItem(item[0]);
+      this.input.scrollLeft = this.input.scrollWidth;
+      this.activeItem = undefined;
+      this.value = await this.formatItem(item[0]);
+      this.duetChange.emit({
+        value: item[0].value,
+        item: item[0],
+        component: "duet-combobox",
+      });
+    }
+    else if (isBlurred && this.selectedItems.size === 0) {
+      //if nothing is selected and a user clicks outside, we want the input field to clearly illustrate that nothing was selected
+      if (this.force) {
+        this.inputValue = "";
+        this.input.value = "";
+      }
+      this.activeItem = undefined;
+    }
+    this.listOpen = false;
+  }
+  updateInputValue(e) {
+    var _a;
+    this.inputValue = e.detail.value;
+    this.listOpen = String(this.inputValue).length > 0 && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+  }
+  handleInputKeyDownEvent(e) {
+    //if selection is made, close the list and update internal and external values
+    // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
+    // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
+    this.input.accessibleActiveDescendant = undefined;
+    if (isEnterKey(e)) {
+      e.preventDefault();
+      this.selectActiveItem();
+      this.listOpen = false;
+      return;
+    }
+    //tabbing out or escaping, restore initial state
+    if (isEscapeKey(e) || isTabKey(e)) {
+      this.updateInputText(true);
+      this.listOpen = false;
+      return;
+    }
+    //handle arrow up/down navigation
+    let nextActiveItem = this.activeItem;
+    if (isArrowUpKey(e)) {
+      e.preventDefault();
+      nextActiveItem = this.activeItem - 1;
+    }
+    else if (isArrowDownKey(e)) {
+      e.preventDefault();
+      nextActiveItem = this.listOpen ? this.activeItem + 1 : this.activeItem;
+      this.listOpen = true;
+    }
+    if (isArrowDownKey(e) || isArrowUpKey(e)) {
+      const listItems = this.shouldListBeFiltered() ? this.getFilteredItems() : this.processedItems;
+      if (nextActiveItem < 0 || !nextActiveItem) {
+        nextActiveItem = 0;
+      }
+      if (nextActiveItem >= listItems.length) {
+        nextActiveItem = listItems.length - 1;
+      }
+      // this should be set to undefined on everything BUT up/down arrow according to the aria 1.1 specs
+      // https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
+      this.input.accessibleActiveDescendant = "active_item";
+      this.activeItem = nextActiveItem;
+      this.scrollToActive();
+    }
+    this.announceActive();
+    return;
+  }
+  selectActiveItem() {
+    if (this.activeItem === undefined) {
+      return;
+    }
+    const filteredItem = this.returnFilteredOrNonFiltered();
+    const item = filteredItem[this.activeItem];
+    this.updateSelectedItems(item.id);
+  }
+  announceActive(items) {
+    if (!items) {
+      items = this.returnFilteredOrNonFiltered();
+    }
+    if (this.activeItem === undefined || this.activeItem === -1) {
+      return;
+    }
+    const item = items[this.activeItem];
+    this.selectionMsg = this.formatLabel(item, items.length, this.items.length);
+  }
+  //function that scrolls to the li element with the class "active"
+  scrollToActive() {
+    const activeElement = this.listElement.querySelector(".active");
+    if (activeElement) {
+      activeElement.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  }
+  formatLabel(item, length, itemsLength) {
+    if (!item || itemsLength === undefined) {
+      return "";
+    }
+    const labelString = length === itemsLength ? this.accessibleLabels.item : this.accessibleLabels.itemFiltered;
+    return labelString
+      .replace("{name}", String(item.name))
+      .replace("{current}", String(this.activeItem + 1))
+      .replace("{total}", String(length))
+      .replace("{hiddenItems}", String(itemsLength - length));
+  }
+  /**
+   * Filter the items based on the input value
+   */
+  getFilteredItems() {
+    // filter items based on user inputs
+    const filteredItems = this.processedItems.filter(item => 
+    // filter by name and value
+    // if value contains inputvalue
+    String(item.value).toLowerCase().includes(this.inputValue.toLowerCase()) ||
+      // if name contains input value
+      String(item.name).toLowerCase().includes(this.inputValue.toLowerCase()) ||
+      // if the item is selected
+      this.selectedItems.has(item.id));
+    return this.sortFilteredItems(filteredItems);
+  }
+  /**
+   * Sort the return from getFilteredItems so that any item with and item.id that matches this.selectedItems is placed first
+   */
+  sortFilteredItems(items) {
+    if (items.length > 0) {
+      items
+        .filter(item => this.selectedItems.has(item.id))
+        .forEach(item => {
+        const index = items.indexOf(item);
+        items.splice(index, 1);
+        items.unshift(item);
+      });
+    }
+    return items;
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const selectElements = this.returnFilteredOrNonFiltered();
+    return (h(Host, { role: "combobox", "aria-expanded": this.listOpen ? "true" : "false", "aria-owns": this.listOpen ? "duet-combobox-list-element" : undefined, "aria-haspopup": "listbox", class: {
+        "duet-combobox": true,
+        [`duet-theme-${this.theme}`]: true,
+      } },
+      h("slot", null),
+      this.isSafari && (h("duet-visually-hidden", { "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, this.selectionMsg)),
+      h("div", { role: "list", class: {
+          "duet-combobox-list": true,
+          open: this.listOpen,
+        }, ref: el => (this.listContainer = el) },
+        h("ul", { role: "listbox", ref: el => (this.listElement = el), id: "duet-combobox-list-element", class: "listbox" }, this.processedItems &&
+          selectElements.map((item, index) => {
+            return (h(DuetComboBoxSelect, { item: item, active: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, total: selectElements.length, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, this.returnFilteredOrNonFiltered().length, this.items.length) }));
+          })))));
+  }
+  static get is() { return "duet-combobox"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-combobox.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-combobox.css"]
+  }; }
+  static get properties() { return {
+    "accessibleLabelDefaults": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }"
+          }],
+        "text": "Placeholder defaults"
+      },
+      "attribute": "accessible-label-defaults",
+      "reflect": false,
+      "defaultValue": "{\n    en: {\n      heading: \"Select:\",\n      item: \"{name}, ({current} of {total})\",\n      itemFiltered: \"{name}, ({current} of {total}, {hiddenItems} filtered)\",\n    },\n    fi: {\n      heading: \"Valitse:\",\n      item: \"{name}, ({current}/{total})\",\n      itemFiltered: \"{name}, ({current}/{total}, {hiddenItems} suodatettu)\",\n    },\n    sv: {\n      heading: \"V\u00E4lj:\",\n      item: \"{name}, ({current} av {total})\",\n      itemFiltered: \"{name}, ({current} av {total}, {hiddenItems} filtrerade)\",\n    },\n  }"
+    },
+    "accessibleLabels": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Record<string, string>",
+        "resolved": "{ [x: string]: string; }",
+        "references": {
+          "Record": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{\nheading: \"Valitse:\",\nitem: \"{0}, ({1}/{2})\",\nitemFiltered: \"{0}, ({1}/{2} - {3} suodatettu\"\n}"
+          }],
+        "text": "Hint text to display before the user types into the date picker input."
+      },
+      "defaultValue": "getLocaleString(\n    parsePossibleJSON(this.accessibleLabelDefaults),\n    getLanguage()\n  )"
+    },
+    "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 combobox."
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "force": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Force the user to make a selection (typing things in the input field will only be used for list search)"
+      },
+      "attribute": "force",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "items": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Array of item objects."
+      },
+      "attribute": "items",
+      "reflect": false
+    },
+    "formatter": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(item: DuetComboboxItem) => string",
+        "resolved": "(item: DuetComboboxItem) => string",
+        "references": {
+          "DuetComboboxItem": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "example",
+            "text": "(item) => `${item.name} (${item.value})`"
+          }, {
+            "name": "default",
+            "text": "undefined"
+          }],
+        "text": "A hook to overwrite how the values are displayed in the input field after a User select an item"
+      },
+      "defaultValue": "(item: DuetComboboxItem) =>\n    item && item.name ? item.name : \"\""
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Object containing selected item/s"
+      },
+      "attribute": "value",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "processedItems": {},
+    "inputWidth": {},
+    "inputValue": {},
+    "selectionMsg": {},
+    "listOpen": {},
+    "selectedItems": {},
+    "activeItem": {}
+  }; }
+  static get events() { return [{
+      "method": "duetChange",
+      "name": "duetChange",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when a keyboard input occurred."
+      },
+      "complexType": {
+        "original": "DuetComboboxEvent",
+        "resolved": "{ originalEvent?: Event; component: \"duet-combobox\"; value: any; item: DuetComboboxItem; }",
+        "references": {
+          "DuetComboboxEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "formatItem": {
+      "complexType": {
+        "signature": "(item: DuetComboboxItem) => Promise<string>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "item : DuetComboboxItem"
+              }],
+            "text": ": DuetComboboxItem"
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "DuetComboboxItem": {
+            "location": "local"
+          }
+        },
+        "return": "Promise<string>"
+      },
+      "docs": {
+        "text": "Exposes a formatter function to format the item value displayed after a user selects an item",
+        "tags": [{
+            "name": "param",
+            "text": "item : DuetComboboxItem"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "activeItem",
+      "methodName": "activeItemHandler"
+    }]; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "handleDocumentClick",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -19,6 +19,10 @@ const createEvent = (ev, data) => ({
   data,
   originalEvent: ev,
 });
+/**
+ * @part top - piercing selector for styling the top part of the footer
+ * @part menu - piercing selector for styling the menu section of the footer
+ */
 export class DuetFooter {
   constructor() {
     /**
@@ -117,7 +121,7 @@ export class DuetFooter {
         "duet-footer-simple": this.variation === "simple",
       } },
       h("div", { class: "duet-footer-wrapper" },
-        h("div", { class: "duet-footer-top" },
+        h("div", { class: "duet-footer-top", part: "top" },
           this.variation !== "simple" && (h("duet-logo", { href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })),
           this.processedItems &&
             this.variation !== "simple" &&
@@ -129,7 +133,7 @@ export class DuetFooter {
                 ", ",
                 this.accessibleLabelExternal),
               h("div", { class: "duet-footer-arrow" }, item.external ? (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })) : (h("duet-icon", { icon: arrowRightIcon.svg, size: "auto", margin: "none", color: "currentColor" }))))))),
-        h("p", { class: "duet-footer-menu" },
+        h("p", { class: "duet-footer-menu", part: "menu" },
           h("span", { class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`),
           this.processedMenu && (h(Fragment, null,
             h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/"),

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

@@ -838,11 +838,23 @@ button {
     transition: 300ms ease;
     transform: scale(0.85) translateZ(0) translateY(-20px);
   }
+  .duet-header-dropdown .duet-header-dropdown-content.duet-header-session-items {
+    right: 0%;
+    left: auto;
+    min-width: 225px;
+  }
+  .duet-header-dropdown .duet-header-dropdown-content.duet-header-session-items .duet-header-session-label {
+    padding: 0 20px;
+    font-weight: 600;
+  }
 }
 @media (min-width: 64.0625em) {
   .duet-header-dropdown .duet-header-dropdown-content {
     min-width: 170px;
   }
+  .duet-header-dropdown .duet-header-dropdown-content.duet-header-session-items {
+    min-width: 225px;
+  }
 }
 .duet-header-dropdown .duet-header-dropdown-content.active {
   display: block;
@@ -1105,6 +1117,9 @@ button {
 .duet-header-multi-level-desktop-utils > :last-child::before {
   display: none;
 }
+.duet-header-multi-level-desktop-utils > :last-child.duet-header-dropdown .duet-header-button::before {
+  display: none;
+}
 .duet-header-multi-level-desktop-utils .duet-header-dropdown {
   z-index: 400;
 }