@duetds/components 6.0.2 → 6.0.4

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

@@ -0,0 +1,432 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h as h$1, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { d as debounce } from './p-0b3f675e.js';
+import { c as isEnterKey, b as isEscapeKey, d as isTabKey, e as isArrowUpKey, f as isArrowDownKey } from './p-d8549efe.js';
+import { g as getLocaleString, a as getLanguage } from './p-ede854e1.js';
+import { p as parsePossibleJSON } from './p-5a9d75e1.js';
+import { h, F as Fragment } from './p-b9058029.js';
+import { d as defineCustomElement$3 } from './p-7739604d.js';
+import { d as defineCustomElement$2 } from './p-b08e57cf.js';
+
+const SelectSingle = ({ item, search = "", selected }) => {
+  const regEx = search !== "" ? new RegExp("(" + search.split(" ").join("|") + ")", "gi") : undefined;
+  return (h(Fragment, null,
+    selected && h("duet-icon", { class: "option-icon", name: "messaging-checked", size: "xx-small", margin: "none" }),
+    regEx ? (h("span", { class: "option-container", "aria-hidden": "true" },
+      h("span", { innerHTML: item.name.replace(regEx, '<span class="highlight">$&</span>') }))) : (item.name),
+    item.tags && h("span", { class: "option-tags" }, item.tags.join(", "))));
+};
+
+const DuetComboBoxSelect = ({ item, active, total, selected, label = undefined, clickHandler = e => {
+  e.preventDefault();
+}, keyHandler = e => {
+  e.preventDefault();
+}, search, }) => {
+  return (h("li", { class: {
+      "list-item": true,
+      option: true,
+      active: active,
+      selected: selected,
+    }, id: active ? "active_item" : "", "data-index": item.id, "aria-selected": active ? "true" : undefined, "aria-current": selected ? "true" : undefined, role: "option", "aria-label": label || `${item.name}, (${item.id + 1} of ${total})` },
+    h("a", { tabindex: "-1", onClick: e => clickHandler(e), onKeyUp: e => keyHandler(e), class: "option-link", "aria-label": label || `${item.name}, (${item.id + 1} of ${total})`, "aria-hidden": "true" },
+      h(SelectSingle, { item: item, search: search, selected: selected }))));
+};
+
+const duetComboboxCss = ".sc-duet-combobox-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;width:auto;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#00294d}.duet-combobox-list.sc-duet-combobox{position:absolute;top:calc(100% - 12px);display:none;overflow:hidden;background:white;border-radius:0 4px;box-shadow:0 2px 10px 0 rgba(0, 41, 77, 0.1)}.duet-combobox-list.open.sc-duet-combobox{z-index:700;display:block}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox{max-height:200px;padding:0.75rem 0;margin:0;overflow-y:scroll;font-weight:600;list-style:none;cursor:pointer;scroll-behavior:smooth}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox{padding:4px 0}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected){padding-left:16px}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:not(.selected) .highlight.sc-duet-combobox{text-decoration:underline}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.option.sc-duet-combobox .option-tags.sc-duet-combobox{float:right;padding-right:0.875rem;font-weight:400;color:#909599}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.option-link.sc-duet-combobox{display:block;width:100%}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.selected.sc-duet-combobox{padding-left:0;background:#cde5f1}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-icon.sc-duet-combobox{padding:0 8px 0 8px}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.selected.option.sc-duet-combobox .option-tags.sc-duet-combobox{color:#909599}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.active.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover{color:white;background:#0077b3}.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.active.sc-duet-combobox .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:focus .option-tags.sc-duet-combobox,.duet-combobox-list.sc-duet-combobox .listbox.sc-duet-combobox .list-item.sc-duet-combobox:hover .option-tags.sc-duet-combobox{color:#e1e3e6}";
+
+const DuetCombobox$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.duetChange = createEvent(this, "duetChange", 3);
+    // 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 (/^((?!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() {
+    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$1(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$1("slot", null), this.isSafari && (h$1("duet-visually-hidden", { "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, this.selectionMsg)), h$1("div", { role: "list", class: {
+        "duet-combobox-list": true,
+        open: this.listOpen,
+      }, ref: el => (this.listContainer = el) }, h$1("ul", { role: "listbox", ref: el => (this.listElement = el), id: "duet-combobox-list-element", class: "listbox" }, this.processedItems &&
+      selectElements.map((item, index) => {
+        return (h$1(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) }));
+      })))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "activeItem": ["activeItemHandler"]
+  }; }
+  static get style() { return duetComboboxCss; }
+}, [6, "duet-combobox", {
+    "accessibleLabelDefaults": [1, "accessible-label-defaults"],
+    "accessibleLabels": [16],
+    "theme": [1025],
+    "force": [4],
+    "items": [1032],
+    "formatter": [16],
+    "value": [1537],
+    "processedItems": [32],
+    "inputWidth": [32],
+    "inputValue": [32],
+    "selectionMsg": [32],
+    "listOpen": [32],
+    "selectedItems": [32],
+    "activeItem": [32],
+    "formatItem": [64]
+  }, [[4, "click", "handleDocumentClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-combobox", "duet-icon", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-combobox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetCombobox$1);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetCombobox = DuetCombobox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetCombobox, defineCustomElement };

package/lib/dist-custom-elements/duet-cookie-consent.d.ts

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

package/lib/dist-custom-elements/duet-cookie-consent.js

@@ -0,0 +1,94 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { d as defineCustomElement$6 } from './p-e294c0fb.js';
+import { d as defineCustomElement$5 } from './p-7739604d.js';
+import { d as defineCustomElement$4 } from './p-81c9b244.js';
+import { d as defineCustomElement$3 } from './p-3d987b87.js';
+import { d as defineCustomElement$2 } from './p-b08e57cf.js';
+
+const duetCookieConsentCss = "*,*::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;position:fixed;right:0;bottom:0;left:0;z-index:950;display:block;width:100%;box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}@media (min-width: 48em){:host{right:28px;bottom:28px;left:auto;width:25rem}}:host(:focus){outline:0}:host(.user-is-tabbing:focus){border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing.duet-theme-turva:focus){box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-cookie-consent{padding:20px;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;color:white !important;background-color:rgba(0, 21, 39, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent{background:rgba(0, 21, 39, 0.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.duet-cookie-consent.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";background-color:rgba(12, 14, 29, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent.duet-theme-turva{background:rgba(12, 14, 29, 0.8)}}@media (min-width: 48em){.duet-cookie-consent{padding:20px;border-radius:4px}}.duet-cookie-consent-content{display:flex;align-items:center;max-width:1110px;margin:0 auto}.duet-cookie-consent-content .expand{flex:1}::slotted(a){font-weight:600;color:white !important;text-decoration:underline;white-space:nowrap}::slotted(a[target=_blank]){padding-right:16px;background:url(\"data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjUgMmExLjUgMS41IDAgMDEuMTQgM0gzLjc1Yy0uMzggMC0uNy4yOC0uNzQuNjVsLS4wMS4xdjE0LjVjMCAuMzguMjguNy42NS43NGwuMS4wMWgxNC41Yy4zOCAwIC43LS4yOC43NC0uNjVsLjAxLS4xdi02Ljg5YTEuNSAxLjUgMCAwMTMgMHY2Ljg5QTMuNzUgMy43NSAwIDAxMTguMjUgMjRIMy43NUEzLjc1IDMuNzUgMCAwMTAgMjAuMjVWNS43NUEzLjc1IDMuNzUgMCAwMTMuNzUgMnptMTItMmMuNzggMCAxLjQyLjYgMS41IDEuMzZWNy41YTEuNSAxLjUgMCAwMS0zIC4xNFY1LjEybC01LjQ0IDUuNDRhMS41IDEuNSAwIDAxLTIuMjItMmwuMS0uMTJMMTguODggM0gxNi41QTEuNSAxLjUgMCAwMTE1IDEuNjRWMS41YzAtLjc4LjYtMS40MiAxLjM2LTEuNWguMTR6Ii8+PC9zdmc+\") no-repeat right 50%;background-size:12px 10px}::slotted(a:focus){outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva ::slotted(a:focus){outline:0;box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
+
+const DuetCookieConsent$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.duetCookieConsent = createEvent(this, "duetCookieConsent", 7);
+    /**
+     * Adds accessible label for the cookie consent ok button.
+     */
+    this.accessibleLabel = "Hyväksyn evästeiden käytön";
+    /**
+     * Theme of the cookie consent banner.
+     */
+    this.theme = "";
+    this.handleClick = e => {
+      e.preventDefault();
+      this.duetCookieConsent.emit({ component: "duet-cookie-consent" });
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function.
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { tabindex: "0" }, h("div", { class: { "duet-cookie-consent": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { class: "duet-cookie-consent-content" }, h("div", { class: "expand" }, h("slot", null)), h("duet-spacer", { size: "large", direction: "horizontal" }), h("div", null, h("duet-button", { variation: "negative", size: "small", onClick: this.handleClick, margin: "none", "aria-label": this.accessibleLabel, theme: this.theme }, "OK"))))));
+  }
+  get element() { return this; }
+  static get style() { return duetCookieConsentCss; }
+}, [1, "duet-cookie-consent", {
+    "accessibleLabel": [1, "accessible-label"],
+    "theme": [1025]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-cookie-consent", "duet-button", "duet-icon", "duet-spacer", "duet-spinner", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-cookie-consent":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetCookieConsent$1);
+      }
+      break;
+    case "duet-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "duet-spacer":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetCookieConsent = DuetCookieConsent$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetCookieConsent, defineCustomElement };

package/lib/dist-custom-elements/duet-date-picker.d.ts

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