@duetds/components 6.0.2 → 6.0.4

package/lib/dist-custom-elements/p-4717744e.js

@@ -0,0 +1,110 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, F as Fragment, b as Host } from './p-3fc2d124.js';
+import { a as actionNewWindowSmall } from './p-f11208c3.js';
+import { D as DuetStringsExternalDefaults } from './p-76f00bd5.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { a as getLanguage, g as getLocaleString } from './p-ede854e1.js';
+import { d as defineCustomElement$2 } from './p-7739604d.js';
+import { d as defineCustomElement$1 } from './p-b08e57cf.js';
+
+const duetLinkCss = "*,*::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;display:inline}.duet-link{display:inline;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:400;color:#0077b3;text-decoration:underline;border-radius:4px;transition:300ms ease}.duet-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-link:focus,.duet-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-link.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\";color:#c60c30}.duet-link:hover{color:#004d80;text-decoration:none}.duet-link:hover.duet-theme-turva{color:#940925}.duet-link:active{opacity:0.75;transition:none}.duet-link-external{margin-left:4px}";
+
+const DuetLink = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * The currently active language. This setting changes the external link
+     * accessible label to match the chosen language.
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
+     */
+    this.language = getLanguage();
+    /**
+     * Defaults for accessibleLabelExternal
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+    /**
+     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+    /**
+     * Theme of the button.
+     */
+    this.theme = "";
+    /**
+     * A destination to link to, rendered in the href attribute of a link.
+     */
+    this.url = "#";
+    /**
+     * Forces URL to open in a new browser tab. Used together with URL prop.
+     */
+    this.external = false;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * Sets focus on the specified `duet-link`. Use this method instead of the global
+   * `link.focus()`.
+   */
+  async setFocus(options) {
+    this.nativeLink.focus(options);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null, h("a", { href: this.url, class: {
+        "duet-link": true,
+        "duet-link-is-external": this.external,
+        "duet-theme-turva": this.theme === "turva",
+      }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, h("slot", null), this.external && (h(Fragment, null, h("duet-visually-hidden", null, this.accessibleLabelExternal), h("span", { class: "duet-link-external" }, h("duet-icon", { icon: actionNewWindowSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))))));
+  }
+  static get delegatesFocus() { return true; }
+  static get style() { return duetLinkCss; }
+}, [17, "duet-link", {
+    "accessibleLabel": [1, "accessible-label"],
+    "language": [1025],
+    "accessibleLabelExternalDefaults": [1, "accessible-label-external-default"],
+    "accessibleLabelExternal": [1, "accessible-label-external"],
+    "identifier": [1],
+    "theme": [1025],
+    "url": [513],
+    "external": [4],
+    "setFocus": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-link", "duet-icon", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetLink);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetLink as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-4ebf1618.js

@@ -0,0 +1,13 @@
+/*!
+ * Built with Duet Design System
+ */
+const inheritGlobalTheme = (component) => {
+  // this minor change enables duet-theme-XXXXX instead of just duet-theme-turva
+  const classList = Array.from(document.documentElement.classList).join(" ") || "";
+  const theme = /(duet-theme-)([a-z]*)/gis.exec(classList);
+  if (theme && theme[1] === "duet-theme-") {
+    component.theme = theme[2] === "default" ? "" : theme[2];
+  }
+};
+
+export { inheritGlobalTheme as i };

package/lib/dist-custom-elements/p-56118313.js

@@ -0,0 +1,53 @@
+/*!
+ * Built with Duet Design System
+ */
+/**
+ * This function restores cursor position after changing input
+ *
+ * @example
+ * const resetCursor = storeAndResetCursor(this.input.selectionStart,this.input.selectionEnd)
+ * this.input.changeValueAndForceUpdateOfCursoPosition()
+ * resetCursor()
+ */
+function resetCursor(domElement) {
+  if (domElement && domElement.selectionStart) {
+    const start = domElement.selectionStart;
+    const end = domElement.selectionEnd;
+    return function () {
+      if (start === end) {
+        domElement.selectionStart = start;
+        domElement.selectionEnd = end;
+      }
+      else {
+        domElement.setSelectionRange(start, end);
+      }
+    };
+  }
+  return () => true;
+}
+/**
+ * Given an input and a regex, remove any characters from the input's value
+ * which match the regex, *whilst* maintaining cursor position.
+ *
+ * In effect, this prevent users from entering specific characters.
+ *
+ * @example
+ * input.value = "foo123"
+ * cleanValue(input, /[^0-9]/g)
+ * input.value === "123"
+ */
+function cleanValue(input, regex) {
+  const value = input.value;
+  const cursor = input.selectionStart;
+  const beforeCursor = value.slice(0, cursor);
+  const afterCursor = value.slice(cursor, value.length);
+  const filteredBeforeCursor = beforeCursor.replace(regex, "");
+  const filterAfterCursor = afterCursor.replace(regex, "");
+  const newValue = filteredBeforeCursor + filterAfterCursor;
+  const newCursor = filteredBeforeCursor.length;
+  input.value = newValue;
+  input.selectionStart = input.selectionEnd = newCursor;
+  return newValue;
+}
+
+export { cleanValue as c, resetCursor as r };

package/lib/dist-custom-elements/p-565779f5.js

@@ -0,0 +1,199 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.js';
+import { m as media_query_large, a as media_query_medium, b as media_query_small } from './p-02305a1e.js';
+import { w as watchForOptions, a as watchForElement } from './p-12721178.js';
+
+const duetGridCss = ".sc-duet-grid-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;width:100%;max-width:100%;height:auto}@media (min-width: 36em){.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 48em){.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:row !important}}@media (min-width: 64.0625em){.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:row !important}}.duet-grid-wrap.sc-duet-grid-h{flex-wrap:wrap !important}.duet-no-stacking.sc-duet-grid-h{flex-direction:row !important}.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 36em){.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 48em){.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}@media (min-width: 64.0625em){.duet-grid-direction-vertical.duet-grid-breakpoint-x-large.sc-duet-grid-h{flex-direction:column !important}}.duet-grid-align-top.duet-no-stacking.sc-duet-grid-h{align-items:flex-start !important}.duet-grid-align-bottom.duet-no-stacking.sc-duet-grid-h{align-items:flex-end !important}.duet-grid-align-center.duet-no-stacking.sc-duet-grid-h{align-items:center !important}.duet-grid-align-stretch.duet-no-stacking.sc-duet-grid-h{align-items:stretch !important}.duet-grid-align-baseline.duet-no-stacking.sc-duet-grid-h{align-items:baseline !important}@media (min-width: 36em){.duet-grid-align-top.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 36em){.duet-grid-align-bottom.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 36em){.duet-grid-align-center.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:center !important}}@media (min-width: 36em){.duet-grid-align-stretch.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 36em){.duet-grid-align-baseline.duet-grid-breakpoint-small.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 48em){.duet-grid-align-top.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 48em){.duet-grid-align-bottom.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 48em){.duet-grid-align-center.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:center !important}}@media (min-width: 48em){.duet-grid-align-stretch.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 48em){.duet-grid-align-baseline.duet-grid-breakpoint-medium.sc-duet-grid-h{align-items:baseline !important}}@media (min-width: 64.0625em){.duet-grid-align-top.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-start !important}}@media (min-width: 64.0625em){.duet-grid-align-bottom.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:flex-end !important}}@media (min-width: 64.0625em){.duet-grid-align-center.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:center !important}}@media (min-width: 64.0625em){.duet-grid-align-stretch.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:stretch !important}}@media (min-width: 64.0625em){.duet-grid-align-baseline.duet-grid-breakpoint-x-large.sc-duet-grid-h{align-items:baseline !important}}.duet-grid-distribution-left.sc-duet-grid-h{justify-content:flex-start !important}.duet-grid-distribution-right.sc-duet-grid-h{justify-content:flex-end !important}.duet-grid-distribution-center.sc-duet-grid-h{justify-content:center !important}.duet-grid-distribution-between.sc-duet-grid-h{justify-content:space-between !important}.duet-grid-distribution-around.sc-duet-grid-h{justify-content:space-around !important}.duet-grid-distribution-evenly.sc-duet-grid-h{justify-content:space-evenly !important}@media (max-width: 35.9375em){.duet-grid-mobile-left.sc-duet-grid-h{align-items:flex-start !important;justify-content:flex-start !important;text-align:left !important}}@media (max-width: 35.9375em){.duet-grid-mobile-center.sc-duet-grid-h{align-items:center !important;justify-content:center !important;text-align:center !important}.duet-grid-mobile-center.sc-duet-grid-h *.sc-duet-grid{text-align:center !important}}@media (max-width: 35.9375em){.duet-grid-mobile-right.sc-duet-grid-h{align-items:flex-end !important;justify-content:flex-end !important;text-align:right !important}.duet-grid-mobile-right.sc-duet-grid-h *.sc-duet-grid{text-align:right !important}}";
+
+function isGridItem(element) {
+  return element.tagName.toLowerCase() === "duet-grid-item";
+}
+const DuetGrid = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.mql = [
+      window.matchMedia(media_query_large.replace(/'/g, "")),
+      window.matchMedia(media_query_medium.replace(/'/g, "")),
+      window.matchMedia(media_query_small.replace(/'/g, "")),
+    ];
+    this.distributeFormElement = false;
+    /**
+     * Enable or disable the automatic responsive behaviour of the grid component.
+     * Setting this option to "true" makes sure that contents are stacked vertically
+     * on mobile (575px and under).
+     */
+    this.responsive = false;
+    /**
+     * Switch the breakpoint used to trigger the content stacking. These match to
+     * similar media query tokens: $media-query-small and $media-query-medium.
+     */
+    this.breakpoint = "small";
+    /**
+     * Direction of the grid items.
+     */
+    this.direction = "horizontal";
+    /**
+     * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
+     * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
+     * so that they align even when displaying errors.
+     */
+    this.alignment = "top";
+    /**
+     * Adjusts the horizontal distribution of the grid items.
+     */
+    this.distribution = "default";
+    /**
+     * Adjusts the horizontal alignment of the grid items on mobile (575px and under).
+     */
+    this.mobile = "";
+  }
+  /**
+   * Private functions
+   */
+  /**
+   * Returns the element height including margins
+   * @param element - element
+   * @returns {number}
+   */
+  outerHeight(element) {
+    const height = element.offsetHeight, style = window.getComputedStyle(element);
+    return ["top", "bottom"]
+      .map(side => parseInt(style[`margin-${side}`]))
+      .reduce((total, side) => total + side, height);
+  }
+  /**
+   * Component lifecycle events.
+   */
+  async connectedCallback() {
+    const el = this.element;
+    this.distributeFormElement = this.alignment === "form_distribute";
+    this.mutationO = watchForOptions(el, "duet-grid-item", () => {
+      this.updateGridItems();
+    });
+    // the next two functions are used to watch for changes in the grid items, and are process intensive - so only run when needed
+    if (this.distributeFormElement) {
+      this.mutation1 = watchForElement(el, "duet-input", () => {
+        this.updateGridItemsWithInputFields();
+      });
+      // listen for potential mediaquery changes and reset layout
+      for (let i = 0; i < this.mql.length; i++) {
+        // addEventListener is not available in Stencil hydrate
+        if (this.mql[i].addEventListener) {
+          this.mql[i].addEventListener("change", this.updateGridItemsWithInputFields.bind(this));
+        }
+      }
+    }
+    this.updateGridItems();
+  }
+  disconnectedCallback() {
+    if (this.mutationO) {
+      this.mutationO.disconnect();
+      this.mutationO = undefined;
+    }
+    if (this.mutation1) {
+      this.mutation1.disconnect();
+      this.mutation1 = undefined;
+    }
+    // listen for potential mediaquery changes and reset layout
+    for (let i = 0; i < this.mql.length; i++) {
+      // addEventListener is not available in Stencil hydrate
+      if (this.mql[i].removeEventListener) {
+        this.mql[i].removeEventListener("change", this.updateGridItemsWithInputFields.bind(this));
+      }
+    }
+  }
+  /**
+   * Local methods
+   */
+  async updateGridItems() {
+    const items = Array.from(this.element.children).filter(isGridItem);
+    items.forEach(item => {
+      item.responsive = this.responsive;
+      item.breakpoint = this.breakpoint;
+    });
+  }
+  async updateGridItemsWithInputFields() {
+    const items = Array.from(this.element.children).filter(isGridItem);
+    // if layout changes to columns instead of row, remove all padding
+    const hasColumnLayout = window ? window.getComputedStyle(this.element).flexDirection === "column" : false;
+    let maxHeight = 0;
+    const sizes = [];
+    items.forEach(item => {
+      const inputErrorDom = item.querySelector("span.duet-input-error");
+      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
+      sizes.push(height);
+    });
+    maxHeight = Math.max(...sizes);
+    items.forEach(item => {
+      const inputErrorDom = item.querySelector("span.duet-input-error");
+      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
+      if (height < maxHeight && !hasColumnLayout) {
+        item.setAttribute("style", `padding-bottom: ${maxHeight - height}px;`);
+      }
+      else if (height === maxHeight || hasColumnLayout) {
+        item.setAttribute("style", `padding-bottom: 0px;`);
+      }
+    });
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: {
+        "duet-grid": true,
+        "duet-no-stacking": !this.responsive,
+        "duet-grid-align-top": this.alignment === "top",
+        "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form_distribute",
+        "duet-grid-align-center": this.alignment === "center",
+        "duet-grid-align-stretch": this.alignment === "stretch",
+        "duet-grid-align-baseline": this.alignment === "baseline",
+        "duet-grid-distribution-left": this.distribution === "left",
+        "duet-grid-distribution-right": this.distribution === "right",
+        "duet-grid-distribution-center": this.distribution === "center",
+        "duet-grid-distribution-between": this.distribution === "space-between",
+        "duet-grid-distribution-around": this.distribution === "space-around",
+        "duet-grid-distribution-evenly": this.distribution === "space-evenly",
+        "duet-grid-mobile-left": this.mobile === "left",
+        "duet-grid-mobile-center": this.mobile === "center",
+        "duet-grid-mobile-right": this.mobile === "right",
+        "duet-grid-direction-horizontal": this.direction === "horizontal",
+        "duet-grid-direction-vertical": this.direction === "vertical",
+        "duet-grid-breakpoint-small": this.breakpoint === "small",
+        "duet-grid-breakpoint-medium": this.breakpoint === "medium",
+        "duet-grid-breakpoint-x-large": this.breakpoint === "x-large",
+      } }));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "responsive": ["updateGridItems"],
+    "breakpoint": ["updateGridItems"]
+  }; }
+  static get style() { return duetGridCss; }
+}, [2, "duet-grid", {
+    "responsive": [4],
+    "breakpoint": [1],
+    "direction": [1],
+    "alignment": [1],
+    "distribution": [1],
+    "mobile": [1],
+    "distributeFormElement": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-grid"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-grid":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetGrid);
+      }
+      break;
+  } });
+}
+
+export { DuetGrid as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-5a9d75e1.js

@@ -0,0 +1,55 @@
+/*!
+ * Built with Duet Design System
+ */
+function isObject(maybeObj) {
+  return Object.prototype.toString.call(maybeObj) === "[object Object]";
+}
+const parsePossibleJSON = (maybeJSON) => {
+  if (Array.isArray(maybeJSON) || isObject(maybeJSON)) {
+    return maybeJSON;
+  }
+  if (typeof maybeJSON === "string") {
+    try {
+      return JSON.parse(maybeJSON);
+    }
+    catch (e) {
+      console.warn(e);
+      try {
+        return JSON.parse(convertHtmlQuotes(maybeJSON));
+      }
+      catch (e) {
+        console.warn(e);
+      }
+    }
+  }
+  // undefined is not a type in JSON,
+  // so we use it here to signal invalid input
+  return undefined;
+};
+/**
+ * Format string, via simplistic sprintf equivalent
+ * @example String.format('{0} is super, but {1} is best! {{0}}', 'Duet', 'Coffee'); -> "Duet is super, but Coffee ist best! {0}"
+ *
+ */
+// @ts-ignore
+if (!String.format) {
+  // @ts-ignore
+  String.format = function (format) {
+    var args = Array.prototype.slice.call(arguments, 1);
+    return format.replace(/\{\{|\}\}|\{(\d+)\}/g, function (curlyBrack, index) {
+      return curlyBrack == "{{" ? "{" : curlyBrack == "}}" ? "}" : args[index];
+    });
+  };
+}
+const MATCH_DISALLOWED_CHARS = /[^a-z0-9áéíóúñüöäå \.,_-]/gim;
+function sanitizeString(string) {
+  return string.replace(MATCH_DISALLOWED_CHARS, "").trim();
+}
+const convertHtmlQuotes = string => {
+  if (typeof string === "string") {
+    return string.replace(/"/g, '"').replace(/'/g, '"');
+  }
+  return string;
+};
+
+export { convertHtmlQuotes as c, parsePossibleJSON as p, sanitizeString as s };