@duetds/components 4.35.4 → 4.36.0

package/lib/collection/components/duet-range-stepper/duet-range-stepper.css

@@ -0,0 +1,100 @@
+*,
+*::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;
+}
+
+.duet-range-stepper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+  align-items: baseline;
+  justify-content: center;
+  min-width: 30px;
+  min-height: 30px;
+  font-weight: 600;
+  text-decoration: none;
+  border-left-width: 0;
+}
+
+.duet-range-stepper {
+  white-space: nowrap;
+}
+.duet-range-stepper 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 .duet-range-stepper button {
+  color: #171c3a;
+  background: #f5f5f7;
+}
+.duet-range-stepper button duet-icon {
+  display: block;
+}
+@media (max-width: 35.9375em) {
+  .duet-range-stepper button {
+    width: 40px;
+    height: 40px;
+  }
+}
+.duet-range-stepper button:not(:disabled):hover {
+  background: #e9ecee !important;
+}
+.duet-theme-turva .duet-range-stepper button:not(:disabled):hover {
+  background: #e9e9eb !important;
+}
+.duet-range-stepper button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 2px #0077b3;
+}
+.duet-theme-turva .duet-range-stepper button:focus {
+  box-shadow: 0 0 0 2px #171c3a;
+}
+.duet-range-stepper button:active:focus {
+  background: #dddfe1;
+  box-shadow: none;
+}
+.duet-theme-turva .duet-range-stepper button:active:focus {
+  background: #ddddde;
+}
+.duet-range-stepper button:disabled {
+  color: #909599;
+  cursor: default;
+  background: #f5f8fa;
+  opacity: 0.75;
+}
+.duet-theme-turva .duet-range-stepper button:disabled {
+  color: #747475;
+  background: #f5f5f7;
+}

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -0,0 +1,342 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, Event, h, Prop, Watch } from "@stencil/core";
+import { createID } from "../../utils/create-id";
+import { isArrowDownKey, isArrowKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isMinusKey, isPlusKey, } from "../../utils/keyboard-utils";
+import { getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+export class DuetRangeStepper {
+  constructor() {
+    this.leftBn = createID("duetRangeStepper-left");
+    this.rightBn = createID("duetRangeStepper-right");
+    /**
+     * Theme of the component.
+     */
+    this.theme = "";
+    /**
+     * Start value
+     * @default 1
+     */
+    this.stepIndex = 1;
+    /**
+     * How big is the step
+     * @default 99
+     */
+    this.stepSize = 50;
+    /**
+     * Total of
+     * @default undefined
+     */
+    this.total = 1000;
+    /**
+     * Default range stepper labels
+     */
+    this.ariaLabelsDefaults = {
+      en: {
+        next_increment: "Next range increment",
+        previous_increment: "Previous range increment",
+        x_of_y: "{0}–{1} of {2}",
+      },
+      fi: {
+        next_increment: "Seuraava välillä",
+        previous_increment: "Edellinen välillä",
+        x_of_y: "{0}–{1} / {2}",
+      },
+      sv: {
+        next_increment: "Nästa intervall",
+        previous_increment: "Föregående intervall",
+        x_of_y: "{0}–{1} av {2}",
+      },
+    };
+    /**
+     * Default pagination labels
+     */
+    this.ariaLabels = getLocaleString(this.ariaLabelsDefaults);
+    /**
+     * Used to indicate which dom element with ID this element controls
+     */
+    this.ariaControls = "";
+    this.handleClick = (e, direction) => {
+      e.preventDefault();
+      this.increment(direction);
+      this.handleStepClick(e);
+    };
+  }
+  watchStateHandler(newValue) {
+    if (newValue === 1) {
+      this.leftBnRef.setAttribute("disabled", "");
+      this.rightBnRef.focus();
+    }
+    else {
+      this.leftBnRef.removeAttribute("disabled");
+    }
+    if (newValue === this.total / this.stepSize) {
+      this.rightBnRef.setAttribute("disabled", "");
+      this.leftBnRef.focus();
+    }
+    else {
+      this.rightBnRef.removeAttribute("disabled");
+    }
+  }
+  handleStepClick(e) {
+    this.duetRangeStepUpdate.emit({
+      originalEvent: e,
+      component: "duet-range-stepper",
+      from: this.stepIndex * this.stepSize - this.stepSize,
+      to: this.stepIndex * this.stepSize,
+      index: this.stepIndex,
+    });
+  }
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  componentDidLoad() {
+    this.watchStateHandler(this.stepIndex);
+  }
+  increment(direction) {
+    const newIndex = this.stepIndex + direction;
+    if (newIndex <= 0) {
+      this.stepIndex = 1;
+    }
+    else {
+      if (newIndex * this.stepSize <= this.total) {
+        this.stepIndex = newIndex;
+      }
+      else {
+      }
+    }
+  }
+  generateStepSize() {
+    // this function uses this.stepIndex and this.range to generate a range of number like 1-100
+    // this is used to generate the step size
+    let start = (this.stepIndex - 1) * this.stepSize;
+    //easy fix for starting position
+    if (start === 0) {
+      start = 1;
+    }
+    const end = this.stepIndex * this.stepSize;
+    return this.ariaLabels.x_of_y
+      .replace("{0}", String(start))
+      .replace("{1}", String(end))
+      .replace("{2}", String(this.total));
+  }
+  //handle a11y keyboard navigation events
+  async onKeyboardDown(e) {
+    // handle a11y based keyboard navigation for left/right/up/down
+    let next = this.stepIndex;
+    let dir = 1;
+    if (isArrowLeftKey(e) || isArrowUpKey(e) || isMinusKey(e)) {
+      next--;
+      dir = -1;
+      this.leftBnRef.focus();
+    }
+    if (isArrowRightKey(e) || isArrowDownKey(e) || isPlusKey(e)) {
+      next++;
+      dir = 1;
+    }
+    if (isArrowKey(e)) {
+      if (next > 0 && next * this.stepSize <= this.total) {
+        this.handleClick(e, dir);
+      }
+      else {
+        //await this.stepperRef.focus()
+      }
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h("div", { class: {
+        "duet-range-stepper": true,
+        "duet-theme-turva": this.theme === "turva",
+      }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls },
+      h("span", { class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()),
+      h("button", { class: "duet-range-step-button duet-range-step-minus", type: "button", onClick: e => this.handleClick(e, -1), id: this.leftBn, "aria-label": this.ariaLabels.previous_increment, ref: el => (this.leftBnRef = el), part: "navigation-arrow" },
+        h("duet-icon", { name: "action-arrow-left-small", color: "currentColor", margin: "none", size: "xx-small" })),
+      h("button", { class: "duet-range-step-button duet-range-step-plus", type: "button", onClick: e => this.handleClick(e, 1), "aria-label": this.ariaLabels.next_increment, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow" },
+        h("duet-icon", { name: "action-arrow-right-small", color: "currentColor", margin: "none", size: "xx-small" }))));
+  }
+  static get is() { return "duet-range-stepper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-range-stepper.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-range-stepper.css"]
+  }; }
+  static get properties() { return {
+    "theme": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "DuetTheme",
+        "resolved": "\"\" | \"default\" | \"turva\"",
+        "references": {
+          "DuetTheme": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Theme of the component."
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "stepIndex": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "1"
+          }],
+        "text": "Start value"
+      },
+      "attribute": "step-index",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "stepSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "99"
+          }],
+        "text": "How big is the step"
+      },
+      "attribute": "step-size",
+      "reflect": false,
+      "defaultValue": "50"
+    },
+    "total": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "undefined"
+          }],
+        "text": "Total of"
+      },
+      "attribute": "total",
+      "reflect": false,
+      "defaultValue": "1000"
+    },
+    "ariaLabelsDefaults": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject",
+        "resolved": "DuetLangObject",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default range stepper labels"
+      },
+      "defaultValue": "{\n    en: {\n      next_increment: \"Next range increment\",\n      previous_increment: \"Previous range increment\",\n      x_of_y: \"{0}\u2013{1} of {2}\",\n    },\n    fi: {\n      next_increment: \"Seuraava v\u00E4lill\u00E4\",\n      previous_increment: \"Edellinen v\u00E4lill\u00E4\",\n      x_of_y: \"{0}\u2013{1} / {2}\",\n    },\n    sv: {\n      next_increment: \"N\u00E4sta intervall\",\n      previous_increment: \"F\u00F6reg\u00E5ende intervall\",\n      x_of_y: \"{0}\u2013{1} av {2}\",\n    },\n  }"
+    },
+    "ariaLabels": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Record<string, string>",
+        "resolved": "{ [x: string]: string; }",
+        "references": {
+          "Record": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default pagination labels"
+      },
+      "defaultValue": "getLocaleString(\n    this.ariaLabelsDefaults\n  )"
+    },
+    "ariaControls": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Used to indicate which dom element with ID this element controls"
+      },
+      "attribute": "accessible-controls",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "duetRangeStepUpdate",
+      "name": "duetRangeStepUpdate",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event emitted when the step heading is clicked."
+      },
+      "complexType": {
+        "original": "DuetRangeStepperUpdateEvent",
+        "resolved": "{ originalEvent: MouseEvent | KeyboardEvent; component: \"duet-range-stepper\"; from: number; to: number; index: number; }",
+        "references": {
+          "DuetRangeStepperUpdateEvent": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "stepIndex",
+      "methodName": "watchStateHandler"
+    }]; }
+}

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

@@ -39,6 +39,13 @@
     width: 100% !important;
   }
 }
+:host.duet-select-variation-tiny {
+  position: relative;
+  top: -2px;
+  width: 72px;
+  margin: 0 !important;
+  vertical-align: baseline;
+}
 
 :host(.duet-m-0) {
   margin: 0 !important;
@@ -76,6 +83,9 @@ duet-tooltip {
   position: relative;
   width: 100%;
 }
+.duet-select-container.duet-select-variation-tiny {
+  width: 72px;
+}
 
 .duet-select-wrapper {
   position: relative;
@@ -89,6 +99,10 @@ duet-tooltip {
 .duet-theme-turva .duet-select-wrapper {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
+.duet-select-variation-tiny .duet-select-wrapper {
+  width: 81px;
+  padding: 0 !important;
+}
 .duet-select-wrapper::after {
   content: "  ";
 }
@@ -226,6 +240,18 @@ duet-tooltip {
 .duet-theme-turva .duet-select svg {
   color: #171c3a;
 }
+.duet-select-variation-tiny .duet-select {
+  width: 72px;
+  min-width: inherit;
+  padding: 0 !important;
+  margin-bottom: -4px;
+  overflow: visible;
+  font-weight: 600;
+  text-align: center;
+}
+.duet-select-variation-tiny .duet-select duet-icon {
+  padding-left: 10px;
+}
 
 .duet-select-help {
   display: block;

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

@@ -34,6 +34,10 @@ export class DuetSelect {
      * Inlined decorator, alphabetical order.
      */
     this.processedItems = null;
+    /**
+     * Variation of dropdown. -tiny is used for small numbers / tiny option ranges.
+     */
+    this.variation = "default";
     /**
      * Controls the margin of the component.
      */
@@ -165,11 +169,16 @@ export class DuetSelect {
    */
   render() {
     const identifier = this.identifier || this.selectId;
-    return (h(Host, { onClick: this.onClick, class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } },
+    return (h(Host, { onClick: this.onClick, class: {
+        "duet-m-0": this.margin === "none",
+        "duet-expand": this.expand,
+        "duet-select-variation-tiny": this.variation === "tiny",
+      } },
       h("div", { class: {
           "duet-select-container": true,
           "duet-label-hidden": this.labelHidden,
           "duet-theme-turva": this.theme === "turva",
+          "duet-select-variation-tiny": this.variation === "tiny",
           "duet-input-top-caption-shown": this.isCaptionVisible,
           "has-error": !!this.error,
         } },
@@ -183,10 +192,14 @@ export class DuetSelect {
             !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
               return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
             }))),
-          h("div", { class: "duet-select", "aria-hidden": "true" },
+          h("div", { class: {
+              "duet-select": true,
+              "duet-select-variation-tiny": this.variation === "tiny",
+            }, "aria-hidden": "true" },
             h("span", { key: this.value }, this.getSelectedItemLabel()),
-            h("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-              h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))),
+            this.variation !== "tiny" && (h("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+              h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))),
+            this.variation === "tiny" && (h("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xx-small" })))),
         h("span", { class: "duet-select-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
   }
   static get is() { return "duet-select"; }
@@ -198,6 +211,28 @@ export class DuetSelect {
     "$": ["duet-select.css"]
   }; }
   static get properties() { return {
+    "variation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetSelectVariation",
+        "resolved": "\"default\" | \"tiny\"",
+        "references": {
+          "DuetSelectVariation": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Variation of dropdown. -tiny is used for small numbers / tiny option ranges."
+      },
+      "attribute": "variation",
+      "reflect": false,
+      "defaultValue": "\"default\""
+    },
     "accessibleActiveDescendant": {
       "type": "string",
       "mutable": false,

package/lib/collection/utils/fixture-utils.js

@@ -99,14 +99,10 @@ export const fixtureTests = (componentFixtures, minHeight) => {
       const html = componentFixtures.fixtures[fixtureName];
       it(`${fixtureName} renders correctly with Turva theme`, async () => {
         const page = await createPage(htmlFragment(html, "turva", minHeight));
-        // Configure the navigation timeout
-        await page.setDefaultNavigationTimeout(0);
         expect(await page.screenshot()).toMatchImageSnapshot();
       });
       it(`${fixtureName} renders correctly with Lahitapiola theme`, async () => {
         const page = await createPage(htmlFragment(html, "default", minHeight));
-        // Configure the navigation timeout
-        await page.setDefaultNavigationTimeout(0);
         expect(await page.screenshot()).toMatchImageSnapshot();
       });
     });

package/lib/collection/utils/keyboard-utils.js

@@ -5,10 +5,14 @@ export const isArrowLeftKey = (e) => e.keyCode === 37;
 export const isArrowUpKey = (e) => e.keyCode === 38;
 export const isArrowRightKey = (e) => e.keyCode === 39;
 export const isArrowDownKey = (e) => e.keyCode === 40;
+export const isArrowKey = (e) => isArrowDownKey(e) || isArrowRightKey(e) || isArrowUpKey(e) || isArrowLeftKey(e);
 export const isEscapeKey = (e) => e.key === "Escape" || e.key === "Esc" || e.keyCode === 27;
 export const isTabKey = (e) => e.key === "Tab" || e.keyCode === 9;
 export const isBackspaceKey = (e) => e.keyCode === 8;
 export const isSpaceKey = (e) => e.key === "Space" || e.keyCode === 32;
+export const isPlusKey = (e) => e.key === "+" || e.keyCode === 43;
+export const isMinusKey = (e) => e.key === "-" || e.keyCode === 45;
 export const isQuestionKey = (e) => e.key === "?";
 export const isEnterKey = (e) => e.key === "Enter" || e.keyCode === 13;
 export const isKeyboardClick = (e) => isEnterKey(e) || isSpaceKey(e);
+export const isNumber = (e) => (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105);

package/lib/collection/utils/test-utils.js

@@ -7,7 +7,8 @@ export async function createPage(optionsOrHtml) {
   const page = (await newE2EPage());
   const viewport = Object.assign({ height: page.viewport().height }, { width: options.viewportWidth });
   await page.setViewport(viewport);
-  await page.setContent(options.html, { waitUntil: "networkidle0" });
+  await page.setDefaultNavigationTimeout(0);
+  await page.setContent(options.html, { waitUntil: "networkidle2" });
   await page.waitForTimeout(250);
   await page.evaluateHandle(() => document.fonts.ready);
   // monkey patch screenshot function to add some extra features

package/lib/custom-elements-bundle/index.d.ts

@@ -224,6 +224,12 @@ export const DuetNumberInput: {
   new (): DuetNumberInput;
 };
 
+interface DuetPagination extends Components.DuetPagination, HTMLElement {}
+export const DuetPagination: {
+  prototype: DuetPagination;
+  new (): DuetPagination;
+};
+
 interface DuetParagraph extends Components.DuetParagraph, HTMLElement {}
 export const DuetParagraph: {
   prototype: DuetParagraph;
@@ -254,6 +260,12 @@ export const DuetRangeSlider: {
   new (): DuetRangeSlider;
 };
 
+interface DuetRangeStepper extends Components.DuetRangeStepper, HTMLElement {}
+export const DuetRangeStepper: {
+  prototype: DuetRangeStepper;
+  new (): DuetRangeStepper;
+};
+
 interface DuetScrollable extends Components.DuetScrollable, HTMLElement {}
 export const DuetScrollable: {
   prototype: DuetScrollable;