@duetds/components 6.0.3 → 6.0.5

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

@@ -0,0 +1,114 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h } from './p-1ad6b04e.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-53a0c93d.js';
+
+const duetNotificationCss = "*,*::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:block;width:100%}.duet-notification{display:block;padding:16px;color:#00294d;cursor:pointer;border-bottom:1px solid #e1e3e6;transition:300ms ease}:host(:last-of-type) .duet-notification{border-bottom:0}.duet-notification.duet-theme-turva{color:#171c3a;border-bottom-color:#e4e4e6}.duet-notification.duet-notification-highlight{font-weight:600;background:#f3f9fc}.duet-notification.duet-notification-highlight.duet-theme-turva{background:#fcf3f4}@media (min-width: 62em){.duet-notification:hover{background:#f3f9fc}.duet-notification:hover.duet-theme-turva{background:#fcf3f4}}.duet-notification a{text-decoration:none}.duet-notification a:focus{outline:0}:host(.user-is-tabbing) .duet-notification:focus-within{z-index:1;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-notification-container{position:relative;display:flex}.duet-notification-badge-container{position:relative;width:16px}.duet-notification-badge{position:absolute;top:6px;left:-2px;width:8px;height:8px;background:#0077b3;border-radius:50%}.duet-theme-turva .duet-notification-badge{background:#c60c30}.duet-notification-content{flex:1}.duet-notification-date{position:absolute;top:2px;right:0;width:96px;font-size:0.75rem;font-weight:600;line-height:1.25;color:#657787;text-align:right;text-transform:uppercase}@media (max-width: 35.9375em){.duet-notification-date{width:auto}}.duet-theme-turva .duet-notification-date{color:#444445}::slotted(duet-heading){padding-right:80px !important}::slotted(duet-paragraph){margin-bottom:2px !important}";
+
+const DuetNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * The currently active language.
+     * Used for announcing unread notifications to screen readers.
+     * @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();
+    /**
+     * Property to change accessibleLabelUnread defaults on the component.
+     * normally you would handle these strings on an application level and override @accessibleLabelUnread when needed
+     */
+    this.accessibleLabelUnreadDefaults = {
+      en: "Unread",
+      fi: "Lukematon",
+      sv: "Oläst",
+    };
+    /**
+     * Adds accessible label for tooltip that is shown over unread counter
+     * @default { en: "Unread", fi: "Lukematon", sv: "Oläst" }
+     */
+    this.accessibleLabelUnread = getLocaleString(this.accessibleLabelUnreadDefaults, this.language);
+    /**
+     * The url to open on notification click.
+     */
+    this.url = "#";
+    /**
+     * The date of the notification.
+     */
+    this.date = "";
+    /**
+     * Should the notification be visually highlighted?
+     */
+    this.highlight = false;
+    /**
+     * Should the link open in a new window?
+     */
+    this.external = false;
+    /**
+     * Theme of the notification.
+     */
+    this.theme = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * Move focus to the notification's link element.
+   * Use this method instead of the native `focus()` method.
+   * @param options
+   */
+  async setFocus(options) {
+    this.linkElement.focus(options);
+  }
+  render() {
+    return (h("div", { role: "listitem", class: {
+        "duet-notification": true,
+        "duet-notification-highlight": this.highlight,
+        "duet-theme-turva": this.theme === "turva",
+      } }, h("a", { ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { class: "duet-notification-container" }, h("div", { class: "duet-notification-badge-container" }, this.highlight && (h("div", { class: "duet-notification-badge" }, h("duet-visually-hidden", null, this.accessibleLabelUnread, ":")))), h("div", { class: "duet-notification-content" }, h("slot", null)), h("div", { class: "duet-notification-date" }, this.date)))));
+  }
+  get element() { return this; }
+  static get style() { return duetNotificationCss; }
+}, [1, "duet-notification", {
+    "language": [1],
+    "accessibleLabelUnreadDefaults": [16],
+    "accessibleLabelUnread": [1, "accessible-label-unread"],
+    "url": [1],
+    "date": [1],
+    "highlight": [4],
+    "external": [4],
+    "theme": [1025],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-notification", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-notification":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetNotification$1);
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetNotification = DuetNotification$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetNotification, defineCustomElement };

package/lib/dist-custom-elements/duet-number-input.d.ts

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

package/lib/dist-custom-elements/duet-number-input.js

@@ -0,0 +1,516 @@
+/*!
+ * 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 { j as isArrowRightKey, e as isArrowUpKey, f as isArrowDownKey, h as isArrowLeftKey, k as isBackspaceKey } from './p-d8549efe.js';
+import { a as getLanguage, b as getLocale, g as getLocaleString } from './p-ede854e1.js';
+import { d as defineCustomElement$7 } from './p-92012dcc.js';
+import { d as defineCustomElement$6 } from './p-4f516732.js';
+import { d as defineCustomElement$5 } from './p-8f69f7ca.js';
+import { d as defineCustomElement$4 } from './p-fb6be4e4.js';
+import { d as defineCustomElement$3 } from './p-f1d0dca7.js';
+import { d as defineCustomElement$2 } from './p-53a0c93d.js';
+
+var actionAdd={"title":"action-add","tags":"action add plus","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M12 24a.75.75 0 0 1-.75-.75v-10.5H.75a.75.75 0 0 1 0-1.5h10.5V.75a.75.75 0 0 1 1.5 0v10.5h10.5a.75.75 0 0 1 0 1.5h-10.5v10.5A.75.75 0 0 1 12 24z\"/></svg>"};
+
+var actionSubtract={"title":"action-subtract","tags":"action subtract minus remove delete cancel","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.75 12.788a.75.75 0 0 1 0-1.5h22.5a.75.75 0 0 1 0 1.5z\"/></svg>"};
+
+/**
+ *  function that takes a string value or number and looks for any character resembling a minus,
+ *  it will then replace it with a hypen-minus and return the parseFloat value of that string
+ *  it will string / number cast the value to a number and return that number
+ *  known issues: if a negative number is indicated with other characters than a "minus like" character, it will throw
+ *  - an example is that some locales use (number) as an indicator for negative values instead of -number
+ */
+function SafeParseFloat(value, locale) {
+  let results;
+  if (typeof value === "string") {
+    //the minuses are NOT the same characters, they differ in unicode for some languages
+    // "‐", "−", "–", and "—"
+    let convertedMinus = value.replace("−", "-").replace("‐", "-").replace("−", "-").replace("–", "-").replace("—", "-");
+    if (locale) {
+      convertedMinus = ConvertToEnUS(convertedMinus, locale, false);
+    }
+    // replace all possible spaces from the string
+    convertedMinus = convertedMinus.replace(/\s+/g, "");
+    convertedMinus = convertedMinus.replace(/(?!^-?\d*\.{0,1}\d+$)/g, "");
+    /*
+    example: https://regex101.com/r/np7FqS/1
+      /(?!^-?\d*\.{0,1}\d+$)/g
+      Negative Lookahead (?!^-?\d*\.{0,1}\d+$)
+      Assert that the Regex below does not match
+      ^ asserts position at start of a line
+      - matches the character - with index 4510 (2D16 or 558) literally (case sensitive)
+      ? matches the previous token between zero and one times, as many times as possible, giving back as needed (greedy)
+      \d matches a digit (equivalent to [0-9])
+      * matches the previous token between zero and unlimited times, as many times as possible, giving back as needed (greedy)
+      \. matches the character . with index 4610 (2E16 or 568) literally (case sensitive)
+      {0,1} matches the previous token between zero and one times, as many times as possible, giving back as needed (greedy)
+      \d matches a digit (equivalent to [0-9])
+      + matches the previous token between one and unlimited times, as many times as possible, giving back as needed (greedy)
+      $ asserts position at the end of a line
+      Global pattern flags
+      g modifier: global. All matches (don't return after first match)
+      m modifier: multi line. Causes ^ and $ to match the begin/end of each line (not only begin/end of string)
+    */
+    results = parseFloat(convertedMinus);
+  }
+  if (typeof value === "number") {
+    results = parseFloat(String(value));
+  }
+  if (!isNaN(Number(results))) {
+    return Number(results);
+  }
+  if (value === null || value === undefined) {
+    return null;
+  }
+  throw new Error("Invalid value passed to SafeParseFloat");
+}
+// string conversion function that takes a locale and coverts decimal indicator to en-US indicator
+// and takes the thousand separator for the given locale and transforms that to the en-US separator
+function ConvertToEnUS(value, locale, replaceThousands = false) {
+  let replacedValue;
+  const localeSeparator = new Intl.NumberFormat(locale).format(1 / 2).replace(/[0-9]/g, "");
+  const enUSSeparator = new Intl.NumberFormat("en-US").format(1 / 2).replace(/[0-9]/g, "");
+  const thousandSeparator = new Intl.NumberFormat(locale).format(1000).replace(/[0-9]/g, "");
+  const enUSThousandSeparator = new Intl.NumberFormat("en-US").format(1000).replace(/[0-9]/g, "");
+  // double conversions to avoid ,->. and .->, at the same time resulting in a double conversion
+  replacedValue = value.replace(localeSeparator, "DECIMALSEPARATOR");
+  if (replaceThousands) {
+    replacedValue = replacedValue.replace(thousandSeparator, "THOUSANDSEPARATOR");
+  }
+  else {
+    replacedValue = replacedValue.replace(thousandSeparator, "");
+  }
+  replacedValue = replacedValue.replace("DECIMALSEPARATOR", enUSSeparator);
+  replacedValue = replacedValue.replace("THOUSANDSEPARATOR", enUSThousandSeparator);
+  return replacedValue;
+}
+const roundTo = (val, multiple) => Math.round(val / multiple) * multiple;
+const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
+
+const duetNumberInputCss = "*.sc-duet-number-input,*.sc-duet-number-input::after,*.sc-duet-number-input::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-number-input-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;line-height:1.25;text-align:left;vertical-align:bottom}.sc-duet-number-input-h:last-child,.sc-duet-number-input-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-number-input-h{width:calc(50% - 16px - 3px)}}.duet-expand.sc-duet-number-input-h{width:100% !important}.duet-m-0.sc-duet-number-input-h{margin:0 !important}.duet-number-container.sc-duet-number-input{position:relative;width:100%}.duet-number-buttons.sc-duet-number-input{-webkit-user-select:none;user-select:none;position:absolute;top:1px;right:1px;z-index:200;width:96px;height:calc(100% - 2px)}.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input{position:relative;display:inline-flex;align-items:center;justify-content:center;width:50%;height:100%;text-align:center;cursor:pointer;background:transparent;-webkit-appearance:none;appearance:none}.duet-number-buttons.sc-duet-number-input .duet-number-button[aria-disabled=true].sc-duet-number-input,.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:disabled{pointer-events:none}.duet-number-buttons.sc-duet-number-input .duet-number-button[aria-disabled=true].sc-duet-number-input duet-icon.sc-duet-number-input,.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:disabled duet-icon.sc-duet-number-input{opacity:0.4}.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:active duet-icon.sc-duet-number-input{transform:translateY(1px)}.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:focus{outline:0}.user-is-tabbing.sc-duet-number-input-h .duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:focus{z-index:2;box-shadow:0 0 0 2px #0077b3}.duet-theme-turva .user-is-tabbing.sc-duet-number-input-h .duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:focus{box-shadow:0 0 0 2px #171c3a}.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:first-of-type{border-left:1px solid #cfd2d4}.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:first-of-type::before{position:absolute;top:0;left:-6px;width:6px;height:100%;content:\"\";background:linear-gradient(to left, rgba(207, 210, 212, 0.2) 0%, rgba(207, 210, 212, 0.2) 1px, rgba(207, 210, 212, 0.1) 1px, rgba(207, 210, 212, 0) 100%)}.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}.duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:last-of-type::before{position:absolute;top:20%;left:0;width:1px;height:60%;content:\"\";background:#e1e3e6}.duet-theme-turva.sc-duet-number-input-h .duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:first-of-type::before{background:linear-gradient(to left, rgba(207, 207, 209, 0.2) 0%, rgba(207, 207, 209, 0.2) 1px, rgba(207, 207, 209, 0.1) 1px, rgba(207, 207, 209, 0) 100%)}.duet-theme-turva.sc-duet-number-input-h .duet-number-buttons.sc-duet-number-input .duet-number-button.sc-duet-number-input:last-of-type::before{background:#e4e4e6}";
+
+const DuetNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.duetChange = createEvent(this, "duetChange", 3);
+    this.duetInput = createEvent(this, "duetInput", 3);
+    this.duetBlur = createEvent(this, "duetBlur", 7);
+    this.duetFocus = createEvent(this, "duetFocus", 7);
+    this.inputId = createID("DuetInput");
+    /**
+     * The currently active language. This setting changes the accessible labels 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();
+    /**
+     * Locale used to format the entered value.
+     */
+    this.locale = getLocale(this.language).locale;
+    /**
+     * Unit for the number input.
+     */
+    this.unit = getLocale(this.language).money;
+    /**
+     * 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;
+    /**
+     * Defaults for accessibleLive
+     * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
+     */
+    this.accessibleLiveDefaults = {
+      fi: "{current} euroa valittuna",
+      en: "{current} euros selected",
+      sv: "{current} euro valt",
+    };
+    /**
+     * Format of message used to announce current amount when switching between amounts.
+     * The string {current} is replaced with the current amount.
+     * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
+     */
+    this.accessibleLive = getLocaleString(this.accessibleLiveDefaults, this.language);
+    /**
+     * Disables the aria-live messaging used internally in this component. This could be useful when you want to use custom aria-live messages instead.
+     */
+    this.accessibleLiveEnabled = true;
+    /**
+     * Defaults for accessibleAdd
+     * @default {fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet"}
+     */
+    this.accessibleAddDefaults = {
+      fi: "Lisää summaan",
+      en: "Add to the amount",
+      sv: "Lägg till beloppet",
+    };
+    /**
+     * Accessible label for the add button that is read for screen reader users.
+     * @default {fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet"}
+     */
+    this.accessibleAdd = getLocaleString(this.accessibleAddDefaults, this.language);
+    /**
+     * Defaults for accessibleSubtract
+     * @default {fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet"}
+     */
+    this.accessibleSubtractDefaults = {
+      fi: "Vähennä summasta",
+      en: "Subtract from the amount",
+      sv: "Dra från beloppet",
+    };
+    /**
+     * Accessible label for the subtract button that is read for screen reader users.
+     * @default {fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet"}
+     */
+    this.accessibleSubtract = getLocaleString(this.accessibleSubtractDefaults, this.language);
+    /**
+     * Theme of the input.
+     */
+    this.theme = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Expands the input to fill 100% of the container width.
+     */
+    this.expand = false;
+    /**
+     * Minimum value.
+     */
+    this.min = 0;
+    /**
+     * Defaults for Label
+     * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+     */
+    this.labelDefaults = {
+      fi: "Nimilappu",
+      en: "Label",
+      sv: "Etikett",
+    };
+    /**
+     * Label for the number input.
+     * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+     */
+    this.label = getLocaleString(this.labelDefaults, this.language);
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * Maximum value.
+     */
+    this.max = 1000000;
+    /**
+     * Display the input in error state along with an error message.
+     */
+    this.error = "";
+    /**
+     * Tooltip to display next to the label of the input.
+     */
+    this.tooltip = "";
+    /**
+     * Step amount.
+     */
+    this.step = 5000;
+    /**
+     * Controls whether or not value gets rounded to the nearest
+     * multiple of a step on blur. Set to "false" to disable this behaviour.
+     */
+    this.rounding = true;
+    /**
+     * Makes the number input component disabled. This prevents users from being able to
+     * interact with the input, and conveys its inactive state to assistive technologies.
+     */
+    this.disabled = false;
+    /**
+     * Set whether the input is required or not. Please note that this is required for
+     * accessible inputs when the user is required to fill them. When using this property
+     * you need to also set “novalidate” attribute to your form element to prevent
+     * browser from displaying its own validation errors.
+     */
+    this.required = false;
+    /**
+     * Component event handling.
+     */
+    this.handleFocus = () => {
+      // This state is saved on focus so we can compare on blur to it.
+      this.focusedValue = this.value;
+    };
+    this.handleKeyDown = (ev) => {
+      if (isArrowRightKey(ev) || isArrowUpKey(ev)) {
+        this.add(ev);
+      }
+      else if (isArrowDownKey(ev) || isArrowLeftKey(ev)) {
+        this.subtract(ev);
+      }
+      else if (isBackspaceKey(ev)) {
+        this.clearValue();
+      }
+    };
+    this.handleChange = (ev) => {
+      const input = ev.target;
+      if (input && input.value) {
+        let value = SafeParseFloat(input.value, this.locale);
+        // Make sure that everything works if the user clears the input and
+        // starts typing non-numeric characters.
+        if (isNaN(value) || value == null) {
+          value = this.min || 0;
+        }
+        this.setValue(value);
+        this.duetInput.emit({
+          component: "duet-number-input",
+          originalEvent: ev,
+          value: SafeParseFloat(this.value, this.locale).toString(),
+          valueAsNumber: value,
+        });
+      }
+      else {
+        this.duetInput.emit({
+          component: "duet-number-input",
+          originalEvent: ev,
+          value: null,
+          valueAsNumber: null,
+        });
+      }
+    };
+    this.handleBlur = (ev) => {
+      const input = ev.target;
+      if (!input) {
+        return;
+      }
+      if (input.value) {
+        // On blur we want to make sure that the user input is between the min and max values,
+        // and also round it up or down to the nearest step.
+        let value = SafeParseFloat(input.value, this.locale);
+        if (this.rounding) {
+          value = roundTo(value, this.step);
+        }
+        value = clamp(value, this.min, this.max);
+        if (value !== SafeParseFloat(this.value, this.locale) ||
+          value !== SafeParseFloat(this.focusedValue, this.locale)) {
+          this.setValue(value);
+          this.emitChange(ev);
+        }
+      }
+      this.duetChange.emit({
+        originalEvent: ev,
+        value: null,
+        valueAsNumber: null,
+        component: "duet-number-input",
+      });
+    };
+    /**
+     * Local methods.
+     */
+    this.emitChange = (ev) => {
+      const currentValue = SafeParseFloat(this.value, this.locale);
+      this.duetChange.emit({
+        originalEvent: ev,
+        value: currentValue.toString(),
+        valueAsNumber: currentValue,
+        component: "duet-number-input",
+      });
+    };
+    this.localizeValue = (value) => {
+      // Returns a localized string that can be used as input value.
+      return value.toLocaleString(this.locale);
+    };
+    this.setValue = (value) => {
+      // Set the localized prop value.
+      this.value = this.localizeValue(value);
+      // Finally also set the visible input value and unit.
+      this.duetInputElement.value = `${this.value} ${this.unit}`;
+    };
+    this.add = (ev) => {
+      // If this was called via a html button, prevent the default functionality
+      // to not trigger submit accidentally when used inside a form.
+      if (ev) {
+        ev.preventDefault();
+      }
+      const cleanedValue = SafeParseFloat(this.value, this.locale);
+      // Only fire change event when necessary
+      if (cleanedValue === this.max) {
+        return;
+      }
+      // in cases where no value set, incrementing should go to min
+      let newValue = cleanedValue == null ? this.min : cleanedValue + this.step;
+      // handle cases where value is not multiple of step
+      // e.g. if someone enters 199, with a step of 100, add should go to 200
+      // and if someone enters 101, add should also go to 200
+      if (newValue % this.step !== 0) {
+        const adjustment = newValue % this.step;
+        newValue -= adjustment;
+      }
+      const clampedValue = clamp(newValue, this.min, this.max);
+      this.value = this.localizeValue(clampedValue);
+      this.emitChange(ev);
+    };
+    this.subtract = (ev) => {
+      // If this was called via a html button, prevent the default functionality
+      // to not trigger submit accidentally when used inside a form.
+      if (ev) {
+        ev.preventDefault();
+      }
+      const currentValue = SafeParseFloat(this.value, this.locale);
+      // Only fire change event when necessary.
+      if (currentValue === this.min) {
+        return;
+      }
+      let newValue = currentValue - this.step;
+      // handle cases where value is not multiple of step
+      // if someone enters 199, with a step of 100, subtract should go to 100
+      // and if someone enters 101, subtract should also go to 100
+      if (newValue % this.step !== 0) {
+        const adjustment = this.step - (newValue % this.step);
+        newValue += adjustment;
+      }
+      newValue = clamp(newValue, this.min, this.max);
+      this.value = this.localizeValue(newValue);
+      this.emitChange(ev);
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    // Format the number value to a localeString initially.
+    if (this.value) {
+      this.value = this.localizeValue(SafeParseFloat(this.value, this.locale));
+    }
+  }
+  /**
+   * Sets focus on the specified `duet-number-input`. Use this method instead of the global
+   * `input.focus()`.
+   */
+  async setFocus(options) {
+    this.duetInputElement.setFocus(options);
+  }
+  clearValue() {
+    this.value = null;
+    this.duetInputElement.value = "";
+  }
+  formatAnnouncement() {
+    const current = SafeParseFloat(this.value, this.locale);
+    if (current == null) {
+      return "";
+    }
+    return this.accessibleLive.replace("{current}", current.toString(10));
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const identifier = this.identifier || this.inputId;
+    const maxlength = `${this.localizeValue(this.max)} ${this.unit}`.length;
+    const cleanedValue = SafeParseFloat(this.value, this.locale);
+    return (h(Host, { class: {
+        "duet-theme-turva": this.theme === "turva",
+        "duet-expand": this.expand,
+        "duet-m-0": this.margin === "none",
+      } }, h("div", { class: "duet-number-container" }, h("duet-input", { ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("div", { class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", null, this.accessibleSubtract, " ", this.step), h("duet-icon", { icon: actionSubtract.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", null, this.accessibleAdd, " ", this.step), h("duet-icon", { icon: actionAdd.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+  }
+  get element() { return this; }
+  static get style() { return duetNumberInputCss; }
+}, [2, "duet-number-input", {
+    "language": [1025],
+    "locale": [1],
+    "unit": [1],
+    "accessibleActiveDescendant": [1, "accessible-active-descendant"],
+    "accessibleControls": [1, "accessible-controls"],
+    "accessibleDetails": [1, "accessible-details"],
+    "accessibleLabelledBy": [1, "accessible-labelled-by"],
+    "accessibleDescription": [1, "accessible-description"],
+    "accessibleOwns": [1, "accessible-owns"],
+    "accessibleDescribedBy": [1, "accessible-described-by"],
+    "accessibleLiveDefaults": [1, "accessible-live-default"],
+    "accessibleLive": [1, "accessible-live"],
+    "accessibleLiveEnabled": [4, "accessible-live-enabled"],
+    "accessibleAddDefaults": [1, "accessible-add-default"],
+    "accessibleAdd": [1, "accessible-add"],
+    "accessibleSubtractDefaults": [1, "accessible-subtract-defaults"],
+    "accessibleSubtract": [1, "accessible-subtract"],
+    "theme": [1025],
+    "margin": [1],
+    "expand": [4],
+    "identifier": [1],
+    "min": [2],
+    "labelDefaults": [1, "label-default"],
+    "label": [1],
+    "labelHidden": [4, "label-hidden"],
+    "max": [2],
+    "name": [1],
+    "error": [1],
+    "tooltip": [1],
+    "step": [2],
+    "rounding": [4],
+    "role": [1],
+    "disabled": [516],
+    "required": [4],
+    "value": [1025],
+    "focusedValue": [32],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-number-input", "duet-caption", "duet-icon", "duet-input", "duet-label", "duet-tooltip", "duet-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-number-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetNumberInput$1);
+      }
+      break;
+    case "duet-caption":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "duet-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "duet-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DuetNumberInput = DuetNumberInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetNumberInput, defineCustomElement };

package/lib/dist-custom-elements/duet-pagination.d.ts

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