@duetds/components 6.0.3 → 6.0.5

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

@@ -0,0 +1,241 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-1ad6b04e.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { c as createID } from './p-c1325e35.js';
+import { d as debounce } from './p-0b3f675e.js';
+import { i as isKeyboardClick } from './p-d8549efe.js';
+import { g as getLocaleString } from './p-ede854e1.js';
+import { c as capitalizeFirstLetter, g as getColorByName, s as shadeRGBColor } from './p-86faf728.js';
+import { d as defineCustomElement$2 } from './p-4f516732.js';
+import { d as defineCustomElement$1 } from './p-53a0c93d.js';
+
+const duetActionButtonCss = "*,*::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-block;margin:0 auto}button.duet-action-button{white-space:nowrap}button.duet-action-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:auto !important;padding:0 !important;margin:0 0 0 8px !important;color:#00294d;cursor:pointer;background:#f5f8fa;border-radius:50%;transition:background-color 300ms ease !important}.duet-theme-turva button.duet-action-button{color:#171c3a;background:#f5f5f7}button.duet-action-button duet-icon{display:block}@media (max-width: 35.9375em){button.duet-action-button{width:32px;height:32px}}button.duet-action-button:not(:disabled):hover{background:#e9ecee}.duet-theme-turva button.duet-action-button:not(:disabled):hover{background:#e9e9eb}button.duet-action-button:focus{outline:0;box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva button.duet-action-button:focus{box-shadow:0 0 0 2px #171c3a !important}button.duet-action-button:active:focus{background:#dddfe1 !important;box-shadow:none}.duet-theme-turva button.duet-action-button:active:focus{background:#ddddde !important}button.duet-action-button:disabled{color:#909599;cursor:default;background:#f5f8fa;opacity:0.75}.duet-theme-turva button.duet-action-button:disabled{color:#747475;background:#f5f5f7}";
+
+const DuetActionButton = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.duetActionEvent = createEvent(this, "duetActionEvent", 6);
+    this.listId = createID("duet-action-button");
+    this.numbersStore = "";
+    /**
+     * Theme of the pagination.
+     */
+    this.theme = "";
+    /**
+     * Name of the icon to display
+     */
+    this.iconName = "action-arrow-left-small";
+    /**
+     * Color of the icon to display
+     */
+    this.iconColor = "currentColor";
+    /**
+     * Size of the icon
+     */
+    this.iconSize = "xx-small";
+    /**
+     * Name of action being called
+     */
+    this.actionName = "default-action";
+    /**
+     * Name of id of action that was called being called
+     */
+    this.actionId = undefined;
+    /**
+     * Name of id of action that was called being called
+     */
+    this.actionMeta = undefined;
+    /**
+     * Disables the button
+     */
+    this.disabled = false;
+    /**
+     * Custom color to be used for the icon, as a design token entered in camelCase
+     * or kebab-case. Example: "color-primary". This property can also be set to
+     * "currentColor" which forces the icon to use the CSS text color of parent
+     * element instead. Useful when you want to control the color in stylesheet
+     * instead.
+     */
+    this.color = "";
+    /**
+     * Custom color to be used for a background, as a design token entered
+     * in camelCase or kebab-case. Using this option the icon will always be resized
+     * to $size-icon-medium on mobile viewports. Example: "color-primary".
+     */
+    this.background = "";
+    /**
+     * Title of the action button (shows as DOM tooltip when hovering)
+     * if set to true, this will try to add a best-guess title based on action-name
+     * if set to a string the string is used
+     * if set to false nothing is set
+     */
+    this.accessibleTitle = true;
+    /**
+     * Described By id
+     */
+    this.accessibleDescribedBy = undefined;
+    /**
+     * Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
+    /**
+     * Default accessible labels
+     */
+    this.accessibleLabelsDefaults = {
+      en: {
+        label: "Click to activate action",
+      },
+      fi: {
+        label: "Klikkaa toiminnon aktivointiin",
+      },
+      sv: {
+        label: "Klicka för att aktivera åtgärd",
+      },
+    };
+    /**
+     * Default accessible labels
+     */
+    this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults);
+    /**
+     * Used to indicate which dom element with ID this element controls
+     */
+    this.accessibleControls = "";
+    /**
+     * Private methods.
+     */
+    //helper to emit relevant page events
+    this.emitPageEvent = debounce(e => {
+      this.duetActionEvent.emit({
+        component: "duet-action-button",
+        originalEvent: e,
+        action: this.actionId,
+        name: this.actionName,
+        meta: this.actionMeta,
+        id: this.listId,
+      });
+    });
+  }
+  //handle a11y keyboard navigation events
+  async onKeyboardDown(e) {
+    if (isKeyboardClick(e)) {
+      this.emitPageEvent(e);
+    }
+  }
+  //return readable title for the action-button
+  getTitle() {
+    let titleString = "";
+    if (typeof this.accessibleTitle === "string") {
+      titleString = this.accessibleTitle;
+    }
+    if (this.accessibleTitle === true) {
+      titleString = capitalizeFirstLetter(`${this.actionName}`);
+    }
+    return titleString;
+  }
+  //set update current when mouse click on page number
+  async onMouseHandler(e) {
+    e.preventDefault();
+    this.duetActionEvent.emit({
+      component: "duet-action-button",
+      originalEvent: e,
+      action: this.actionName,
+      id: this.actionId,
+      meta: this.actionMeta,
+    });
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color, this.theme);
+    const backgroundColor = getColorByName(this.background, this.theme);
+    const backgroundHoverColor = backgroundColor ? shadeRGBColor(backgroundColor, -0.1) : backgroundColor;
+    const backgroundStyles = backgroundColor
+      ? `
+          button.duet-action-button {
+            background: ${backgroundColor} !important;
+          }
+          button.duet-action-button:not(:disabled):hover {
+            background: ${backgroundHoverColor} !important;
+          }
+        `
+      : "";
+    const styles = {
+      color,
+      "border-color": getColorByName(this.iconColor, this.theme),
+      "border-width": "1px",
+      "border-style": "solid",
+    };
+    return (h(Host, { onKeyDown: e => this.onKeyboardDown(e) }, h("style", { innerHTML: backgroundStyles }), h("button", { part: "button", style: styles, disabled: this.disabled, id: this.listId, class: {
+        "duet-action-button": true,
+        "duet-action-button--disabled": this.disabled,
+        [`duet-action-button--${this.theme}`]: this.theme !== "",
+      }, type: "button", onClick: e => this.onMouseHandler(e), "aria-label": this.accessibleLabels.label, "aria-labelledby": this.accessibleLabelledBy, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, "aria-details": this.accessibleDetails, "aria-controls": this.accessibleControls, title: this.getTitle() }, h("duet-icon", { part: "icon", name: this.iconName, color: this.iconColor, margin: "none", size: this.iconSize }), h("duet-visually-hidden", null, h("slot", null)))));
+  }
+  get element() { return this; }
+  static get style() { return duetActionButtonCss; }
+}, [1, "duet-action-button", {
+    "theme": [1025],
+    "iconName": [1, "icon-name"],
+    "iconColor": [1, "icon-color"],
+    "iconSize": [1, "icon-size"],
+    "actionName": [1, "action-name"],
+    "actionId": [1, "action-id"],
+    "actionMeta": [1, "action-meta"],
+    "disabled": [4],
+    "color": [513],
+    "background": [1],
+    "accessibleTitle": [8, "title"],
+    "accessibleDescribedBy": [1, "accessible-described-by"],
+    "accessibleDetails": [1, "accessible-details"],
+    "accessibleLabelledBy": [1, "accessible-labelled-by"],
+    "accessibleDescription": [1, "accessible-description"],
+    "accessibleLabelsDefaults": [16],
+    "accessibleLabels": [16],
+    "accessibleControls": [1, "accessible-controls"],
+    "numbersStore": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-action-button", "duet-icon", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-action-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetActionButton);
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DuetActionButton as D, defineCustomElement as d };

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

@@ -0,0 +1,92 @@
+/*!
+ * Built with Duet Design System
+ */
+import { c as convertHtmlQuotes } from './p-5a9d75e1.js';
+
+const localeLookUpTable = {
+  fi: "fi-FI",
+  en: "en-GB",
+  us: "en-US",
+  sv: "sv-SE",
+};
+const localeMonetarySignifierLookUpTable = {
+  fi: "€",
+  en: "£",
+  us: "$",
+  sv: "€",
+};
+const defLanguageArray = ["fi", "en", "sv"];
+const defaultLanguage = "fi";
+const getCurrentLanguage = () => {
+  return document.documentElement.lang ? document.documentElement.lang.toLowerCase() : defaultLanguage;
+};
+const isOfTypeLanguage = (keyInput) => {
+  return defLanguageArray.includes(keyInput);
+};
+const checkForLanguage = (languageString = getCurrentLanguage()) => {
+  if (isOfTypeLanguage(languageString)) {
+    return languageString;
+  }
+  else {
+    return defaultLanguage;
+  }
+};
+/**
+ * Returns the current language as a string representation (taken from html lang attribute)
+ * If language is not fi|sv|en it will default to "fi"
+ * @param {string} lang=fi - "fi" | "sv" | "en"
+ * @default {string} "fi"
+ */
+const getLanguage = (languageString = getCurrentLanguage()) => checkForLanguage(languageString);
+/**
+ * Returns the current language and locale
+ * If language is not fi|sv|en it will default to "fi"
+ * special case where lang can be ALSO be "us" in addition to other types - if user decides to override local language
+ * @param {string} lang="fi" - "fi" | "sv" | "en" | "us"
+ * @default {object} {locale: "fi-FI", money: "€"}
+ */
+const getLocale = (lang) => {
+  const returnObj = {
+    locale: localeLookUpTable[lang],
+    money: localeMonetarySignifierLookUpTable[lang],
+  };
+  if (returnObj.locale && returnObj.money) {
+    return returnObj;
+  }
+  throw new Error(`Locale for "${lang}" not found`);
+};
+/**
+ * Takes any json object that is passed and/or htmlencoded and converts it to proper json
+ */
+const sanitizeString = (string) => {
+  const argIsString = typeof string === "string";
+  if (argIsString) {
+    try {
+      return JSON.parse(convertHtmlQuotes(string));
+    }
+    catch (e) {
+      console.log("sanitizeString received a string, that didnt parse to json object", string, e);
+    }
+  }
+  return string;
+};
+/**
+ * Returns the current string / object from a given translation object
+ * If language is not fi|sv|en it will default to "fi"
+ * special case where lang can be ALSO be "us" in addition to other types - if user decides to override local language
+ * @param {object} langObject - {fi: "finnish", sv: "swedish", en: "english"} | string will get JSON.parsed
+ * @param {boolean} languageOverride = false - in case you want to override the actual language set in html tag
+ * @default {object} {locale: "fi-FI", money: "€"}
+ * @returns {(string|Object)} given example contains {fi:"something"} and language===fi this will return "something"
+ */
+const getLocaleString = (langObject, languageOverride) => {
+  const obj = sanitizeString(langObject);
+  if (languageOverride) {
+    return obj[checkForLanguage(languageOverride)];
+  }
+  else {
+    return obj[getLanguage()];
+  }
+};
+
+export { getLanguage as a, getLocale as b, getLocaleString as g, sanitizeString as s };

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

@@ -0,0 +1,65 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-1ad6b04e.js';
+
+const duetSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.duet-spacer-horizontal){display:inline-block;height:100% !important}:host(.duet-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.duet-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.duet-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.small){width:12px;min-width:12px}}:host(.duet-spacer-horizontal.medium){height:100%}:host(.duet-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.large){width:20px;min-width:20px}}:host(.duet-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.duet-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.duet-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.duet-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.duet-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.duet-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.duet-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.duet-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.duet-spacer-vertical.small){height:12px;min-height:12px}}:host(.duet-spacer-vertical.medium){width:100%}:host(.duet-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.duet-spacer-vertical.large){height:20px;min-height:20px}}:host(.duet-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.duet-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.duet-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.duet-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.duet-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.duet-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.duet-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.duet-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.duet-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.duet-spacer-xx-small){display:block}}:host(.duet-spacer-x-small){display:none}@media (max-width: 35.9375em){:host(.duet-spacer-x-small){display:block}}:host(.duet-spacer-small){display:none}@media (min-width: 36em){:host(.duet-spacer-small){display:block}}:host(.duet-spacer-medium){display:none}@media (min-width: 48em){:host(.duet-spacer-medium){display:block}}:host(.duet-spacer-large){display:none}@media (min-width: 62em){:host(.duet-spacer-large){display:block}}:host(.duet-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.duet-spacer-x-large){display:block}}:host(.duet-spacer-xx-large){display:none}@media (min-width: 76.25em){:host(.duet-spacer-xx-large){display:block}}";
+
+const DuetSpacer = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Size variation of the spacer. Can be any of the spacing tokens.
+     */
+    this.size = "medium";
+    /**
+     * Direction of the space added.
+     */
+    this.direction = "vertical";
+    /**
+     * Adjusts the breakpoint where the spacer is shown in. The functionality
+     * follows 1:1 the media queries defined in design tokens.
+     */
+    this.breakpoint = "";
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: {
+        "duet-spacer": true,
+        "duet-spacer-xx-small": this.breakpoint === "xx-small",
+        "duet-spacer-x-small": this.breakpoint === "x-small",
+        "duet-spacer-small": this.breakpoint === "small",
+        "duet-spacer-medium": this.breakpoint === "medium",
+        "duet-spacer-large": this.breakpoint === "large",
+        "duet-spacer-x-large": this.breakpoint === "x-large",
+        "duet-spacer-xx-large": this.breakpoint === "xx-large",
+        [this.size]: true,
+        [`duet-spacer-${this.direction}`]: true,
+      } }));
+  }
+  static get style() { return duetSpacerCss; }
+}, [1, "duet-spacer", {
+    "size": [1],
+    "direction": [1],
+    "breakpoint": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-spacer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-spacer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetSpacer);
+      }
+      break;
+  } });
+}
+
+export { DuetSpacer as D, defineCustomElement as d };

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

@@ -0,0 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
+var actionNewWindowSmall={"title":"action-new-window-small","tags":"arrow open new window tab external linksquare box rectangle action small","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M10.5 2a1.5 1.5 0 0 1 .14 3H3.75c-.38 0-.7.28-.74.65l-.01.1v14.5c0 .38.28.7.65.74l.1.01h14.5c.38 0 .7-.28.74-.65l.01-.1v-6.89a1.5 1.5 0 0 1 3 0v6.89A3.75 3.75 0 0 1 18.25 24H3.75A3.75 3.75 0 0 1 0 20.25V5.75A3.75 3.75 0 0 1 3.75 2zm12-2c.78 0 1.42.6 1.5 1.36V7.5a1.5 1.5 0 0 1-3 .14V5.12l-5.44 5.44a1.5 1.5 0 0 1-2.22-2l.1-.12L18.88 3H16.5A1.5 1.5 0 0 1 15 1.64V1.5c0-.78.6-1.42 1.36-1.5h.14z\"/></svg>"};
+
+export { actionNewWindowSmall as a };