@duetds/components 8.0.6 → 8.1.0

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

@@ -1,741 +1,745 @@
 /*!
  * Built with Duet Design System
  */
-import { h, Host } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { parsePossibleJSON } from "../../utils/string-utils";
 function isOptionGroup(item) {
-  return "options" in item;
+    return "options" in item;
 }
 function findOptionByValue(items, value) {
-  for (var i = 0; i < items.length; i++) {
-    let item = items[i];
-    if (isOptionGroup(item)) {
-      item = findOptionByValue(item.options, value);
-    }
-    if (item && item.value === value) {
-      return item;
+    for (var i = 0; i < items.length; i++) {
+        let item = items[i];
+        if (isOptionGroup(item)) {
+            item = findOptionByValue(item.options, value);
+        }
+        if (item && item.value === value) {
+            return item;
+        }
     }
-  }
 }
 export class DuetSelect {
-  constructor() {
+    constructor() {
+        /**
+         * Own Properties
+         */
+        this.selectId = createID("DuetSelect");
+        this.errorId = createID("DuetError");
+        this.labelId = createID("DuetLabel");
+        this.topCaptionId = createID("DuetCaptionTop");
+        this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
+        /**
+         * Component event handling.
+         */
+        this.onClick = (ev) => {
+            ev.stopPropagation();
+        };
+        this.onChange = () => {
+            this.value = this.nativeSelect.value;
+            this.duetChange.emit({
+                value: this.value,
+                component: "duet-select",
+            });
+        };
+        this.onBlur = (ev) => {
+            this.duetBlur.emit({
+                originalEvent: ev,
+                value: this.value,
+                component: "duet-select",
+            });
+        };
+        this.onFocus = (ev) => {
+            this.duetFocus.emit({
+                originalEvent: ev,
+                value: this.value,
+                component: "duet-select",
+            });
+        };
+        this.getDescribedBy = () => {
+            const describedBy = [];
+            if (this.isCaptionVisible && this.topCaptionId) {
+                describedBy.push(this.topCaptionId);
+            }
+            if (this.accessibleDescribedBy) {
+                describedBy.push(this.accessibleDescribedBy);
+            }
+            if (this.error) {
+                describedBy.push(this.errorId);
+            }
+            return describedBy.length > 0 ? describedBy.join(" ") : null;
+        };
+        this.processedItems = null;
+        this.variation = "default";
+        this.accessibleActiveDescendant = undefined;
+        this.accessibleDescribedBy = undefined;
+        this.margin = "auto";
+        this.accessibleControls = undefined;
+        this.accessibleOwns = undefined;
+        this.error = "";
+        this.accessibleLiveError = "polite";
+        this.expand = false;
+        this.value = undefined;
+        this.theme = "";
+        this.labelHidden = false;
+        this.identifier = undefined;
+        this.name = undefined;
+        this.placeholder = "";
+        this.caption = undefined;
+        this.echoPlaceholder = false;
+        this.items = undefined;
+        this.disabled = false;
+        this.required = false;
+        this.label = "label";
+        this.role = undefined;
+        this.tooltip = "";
+        this.tooltipDirection = "auto";
+    }
+    valueChanged() {
+        if (this.nativeSelect) {
+            this.nativeSelect.value = this.value;
+        }
+        this.isCaptionVisible = !!this.caption;
+    }
     /**
-     * Own Properties
+     * Component lifecycle events.
      */
-    this.selectId = createID("DuetSelect");
-    this.errorId = createID("DuetError");
-    this.labelId = createID("DuetLabel");
-    this.topCaptionId = createID("DuetCaptionTop");
-    this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.isCaptionVisible = !!this.caption;
+        this.refresh();
+    }
     /**
-     * Component event handling.
+     * Sets focus on the specified `duet-select`. Use this method instead of the global
+     * `select.focus()`.
      */
-    this.onClick = (ev) => {
-      ev.stopPropagation();
-    };
-    this.onChange = () => {
-      this.value = this.nativeSelect.value;
-      this.duetChange.emit({
-        value: this.value,
-        component: "duet-select",
-      });
-    };
-    this.onBlur = (ev) => {
-      this.duetBlur.emit({
-        originalEvent: ev,
-        value: this.value,
-        component: "duet-select",
-      });
-    };
-    this.onFocus = (ev) => {
-      this.duetFocus.emit({
-        originalEvent: ev,
-        value: this.value,
-        component: "duet-select",
-      });
-    };
-    this.getDescribedBy = () => {
-      const describedBy = [];
-      if (this.isCaptionVisible && this.topCaptionId) {
-        describedBy.push(this.topCaptionId);
-      }
-      if (this.accessibleDescribedBy) {
-        describedBy.push(this.accessibleDescribedBy);
-      }
-      if (this.error) {
-        describedBy.push(this.errorId);
-      }
-      return describedBy.length > 0 ? describedBy.join(" ") : null;
-    };
-    this.processedItems = null;
-    this.variation = "default";
-    this.accessibleActiveDescendant = undefined;
-    this.accessibleDescribedBy = undefined;
-    this.margin = "auto";
-    this.accessibleControls = undefined;
-    this.accessibleOwns = undefined;
-    this.error = "";
-    this.accessibleLiveError = "polite";
-    this.expand = false;
-    this.value = undefined;
-    this.theme = "";
-    this.labelHidden = false;
-    this.identifier = undefined;
-    this.name = undefined;
-    this.placeholder = "";
-    this.caption = undefined;
-    this.echoPlaceholder = false;
-    this.items = undefined;
-    this.disabled = false;
-    this.required = false;
-    this.label = "label";
-    this.role = undefined;
-    this.tooltip = "";
-    this.tooltipDirection = "auto";
-  }
-  valueChanged() {
-    if (this.nativeSelect) {
-      this.nativeSelect.value = this.value;
-    }
-    this.isCaptionVisible = !!this.caption;
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-    this.isCaptionVisible = !!this.caption;
-    this.refresh();
-  }
-  /**
-   * Sets focus on the specified `duet-select`. Use this method instead of the global
-   * `select.focus()`.
-   */
-  async setFocus(options) {
-    if (this.nativeSelect) {
-      this.nativeSelect.focus(options);
+    async setFocus(options) {
+        if (this.nativeSelect) {
+            this.nativeSelect.focus(options);
+        }
     }
-  }
-  /**
-   * Local methods.
-   */
-  async refresh() {
-    this.processedItems = parsePossibleJSON(this.items);
-  }
-  getSelectedItemLabel() {
-    let item;
-    if (this.processedItems) {
-      item = findOptionByValue(this.processedItems, this.value);
+    /**
+     * Local methods.
+     */
+    async refresh() {
+        this.processedItems = parsePossibleJSON(this.items);
     }
-    return item ? item.label : this.placeholder || "";
-  }
-  renderOption(option) {
-    return (h("option", { "aria-label": option.ariaLabel, value: option.value, key: option.value, selected: this.value === option.value, disabled: option.disabled }, option.label));
-  }
-  renderOptionGroup(group) {
-    return (h("optgroup", { key: group.label, label: group.label, disabled: group.disabled }, group.options.map(option => this.renderOption(option))));
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const identifier = this.identifier || this.selectId;
-    return (h(Host, { onClick: this.onClick, class: {
-        "duet-m-0": this.margin === "none",
-        "duet-expand": this.expand,
-        [`duet-select-variation-${this.variation}`]: true,
-      } }, h("div", { class: {
-        "duet-select-container": true,
-        "duet-label-hidden": this.labelHidden,
-        "duet-theme-turva": this.theme === "turva",
-        [`duet-select-variation-${this.variation}`]: true,
-        "duet-input-top-caption-shown": this.isCaptionVisible,
-        "has-error": !!this.error,
-      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !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": true,
-        [`duet-select-variation-${this.variation}`]: true,
-      }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (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" })))) || (h("duet-icon", { theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
-  }
-  static get is() { return "duet-select"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["duet-select.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["duet-select.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "variation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetSelectVariation",
-          "resolved": "\"compact\" | \"default\" | \"tiny\"",
-          "references": {
-            "DuetSelectVariation": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
-              "id": "src/components/duet-select/duet-select.tsx::DuetSelectVariation"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variation of dropdown. Tiny is used for small numbers / tiny option ranges. Compact works well with adjacent buttons,\nlike with compact pagination."
-        },
-        "attribute": "variation",
-        "reflect": false,
-        "defaultValue": "\"default\""
-      },
-      "accessibleActiveDescendant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id of a related component\u2019s visually focused element."
-        },
-        "attribute": "accessible-active-descendant",
-        "reflect": false
-      },
-      "accessibleDescribedBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id of a component that describes the input."
-        },
-        "attribute": "accessible-described-by",
-        "reflect": false
-      },
-      "margin": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetMargin",
-          "resolved": "\"auto\" | \"none\"",
-          "references": {
-            "DuetMargin": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetMargin"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls the margin of the component."
-        },
-        "attribute": "margin",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      },
-      "accessibleControls": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Use this prop to add an aria-controls attribute. Use the attribute to indicate\nthe id of a component controlled by this component."
-        },
-        "attribute": "accessible-controls",
-        "reflect": false
-      },
-      "accessibleOwns": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id of a component owned by the select."
-        },
-        "attribute": "accessible-owns",
-        "reflect": false
-      },
-      "error": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Display the select in error state along with an error message."
-        },
-        "attribute": "error",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "accessibleLiveError": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"off\" | \"polite\" | \"assertive\"",
-          "resolved": "\"assertive\" | \"off\" | \"polite\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The aria-live attribute for the error message. When the input is validated on blur, use \"off\", as using \"polite\" or \"assertive\"\nmakes the screen reader read the error message twice. When the input is validated on submit, use \"polite\", as \"off\" would leave\nthe messages unread by screen readers. Use \"assertive\" only in those rare cases when \"polite\" would leave the error message\nunread by screen readers."
-        },
-        "attribute": "accessible-live-error",
-        "reflect": false,
-        "defaultValue": "\"polite\""
-      },
-      "expand": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Expands the input to fill 100% of the container width."
-        },
-        "attribute": "expand",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The selected value of the select"
-        },
-        "attribute": "value",
-        "reflect": true
-      },
-      "theme": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetTheme",
-          "resolved": "\"\" | \"default\" | \"turva\"",
-          "references": {
-            "DuetTheme": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTheme"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Theme of the select."
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "labelHidden": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Visually hide the label, but still show it to screen readers."
-        },
-        "attribute": "label-hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Adds a unique identifier for the select."
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name of the select."
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Hint text to display."
-        },
-        "attribute": "placeholder",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "caption": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Caption (underneath label) that can be set as a way of adding extra information"
-        },
-        "attribute": "caption",
-        "reflect": false
-      },
-      "echoPlaceholder": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),\nsettings this to true will \"echo\" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)"
-        },
-        "attribute": "echo-placeholder",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "items": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | DuetSelectItems",
-          "resolved": "(DuetSelectOption | DuetSelectOptionGroup)[] | string",
-          "references": {
-            "DuetSelectItems": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
-              "id": "src/components/duet-select/duet-select.tsx::DuetSelectItems"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "An array of items to choose from"
-        },
-        "attribute": "items",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Makes the select component disabled. This prevents users from being able\nto interact with the select, and conveys its inactive state to assistive\ntechnologies."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set whether the input is required or not. Please note that this is necessary for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set \u201Cnovalidate\u201D attribute to your form element to prevent\nbrowser from displaying its own validation errors."
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label for the select."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "\"label\""
-      },
-      "role": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | null",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Defines a specific role attribute for the select."
-        },
-        "attribute": "role",
-        "reflect": false
-      },
-      "tooltip": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Tooltip to display next to the label of the input."
-        },
-        "attribute": "tooltip",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "tooltipDirection": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetTooltipDirection",
-          "resolved": "\"auto\" | \"left\" | \"right\"",
-          "references": {
-            "DuetTooltipDirection": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTooltipDirection"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
-        },
-        "attribute": "tooltip-direction",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "processedItems": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "duetChange",
-        "name": "duetChange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Callback for when the value changed."
-        },
-        "complexType": {
-          "original": "DuetSelectEvent",
-          "resolved": "{ originalEvent?: Event; component: \"duet-select\"; value: string; }",
-          "references": {
-            "DuetSelectEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
-              "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
-            }
-          }
-        }
-      }, {
-        "method": "duetFocus",
-        "name": "duetFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the select has focus."
-        },
-        "complexType": {
-          "original": "DuetSelectEvent",
-          "resolved": "{ originalEvent?: Event; component: \"duet-select\"; value: string; }",
-          "references": {
-            "DuetSelectEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
-              "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
-            }
-          }
+    getSelectedItemLabel() {
+        let item;
+        if (this.processedItems) {
+            item = findOptionByValue(this.processedItems, this.value);
         }
-      }, {
-        "method": "duetBlur",
-        "name": "duetBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the select loses focus."
-        },
-        "complexType": {
-          "original": "DuetSelectEvent",
-          "resolved": "{ originalEvent?: Event; component: \"duet-select\"; value: string; }",
-          "references": {
-            "DuetSelectEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
-              "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
-            }
-          }
+        return item ? item.label : this.placeholder || "";
+    }
+    renderOption(option) {
+        return (h("option", { "aria-label": option.ariaLabel, value: option.value, key: option.value, selected: this.value === option.value, disabled: option.disabled }, option.label));
+    }
+    renderOptionGroup(group) {
+        return (h("optgroup", { key: group.label, label: group.label, disabled: group.disabled }, group.options.map(option => this.renderOption(option))));
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        if (Build.isServer) {
+            return;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        const identifier = this.identifier || this.selectId;
+        return (h(Host, { onClick: this.onClick, class: {
+                "duet-m-0": this.margin === "none",
+                "duet-expand": this.expand,
+                [`duet-select-variation-${this.variation}`]: true,
+            } }, h("div", { class: {
+                "duet-select-container": true,
+                "duet-label-hidden": this.labelHidden,
+                "duet-theme-turva": this.theme === "turva",
+                [`duet-select-variation-${this.variation}`]: true,
+                "duet-input-top-caption-shown": this.isCaptionVisible,
+                "has-error": !!this.error,
+            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !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": true,
+                [`duet-select-variation-${this.variation}`]: true,
+            }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (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" })))) || (h("duet-icon", { theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+    }
+    static get is() { return "duet-select"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetSelectVariation",
+                    "resolved": "\"compact\" | \"default\" | \"tiny\"",
+                    "references": {
+                        "DuetSelectVariation": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+                            "id": "src/components/duet-select/duet-select.tsx::DuetSelectVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variation of dropdown. Tiny is used for small numbers / tiny option ranges. Compact works well with adjacent buttons,\nlike with compact pagination."
+                },
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "accessibleActiveDescendant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a related component\u2019s visually focused element."
+                },
+                "attribute": "accessible-active-descendant",
+                "reflect": false
+            },
+            "accessibleDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component that describes the input."
+                },
+                "attribute": "accessible-described-by",
+                "reflect": false
+            },
+            "margin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetMargin",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetMargin": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the margin of the component."
+                },
+                "attribute": "margin",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "accessibleControls": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this prop to add an aria-controls attribute. Use the attribute to indicate\nthe id of a component controlled by this component."
+                },
+                "attribute": "accessible-controls",
+                "reflect": false
+            },
+            "accessibleOwns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component owned by the select."
+                },
+                "attribute": "accessible-owns",
+                "reflect": false
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the select in error state along with an error message."
+                },
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "accessibleLiveError": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"off\" | \"polite\" | \"assertive\"",
+                    "resolved": "\"assertive\" | \"off\" | \"polite\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The aria-live attribute for the error message. When the input is validated on blur, use \"off\", as using \"polite\" or \"assertive\"\nmakes the screen reader read the error message twice. When the input is validated on submit, use \"polite\", as \"off\" would leave\nthe messages unread by screen readers. Use \"assertive\" only in those rare cases when \"polite\" would leave the error message\nunread by screen readers."
+                },
+                "attribute": "accessible-live-error",
+                "reflect": false,
+                "defaultValue": "\"polite\""
+            },
+            "expand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Expands the input to fill 100% of the container width."
+                },
+                "attribute": "expand",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected value of the select"
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the select."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "labelHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hide the label, but still show it to screen readers."
+                },
+                "attribute": "label-hidden",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds a unique identifier for the select."
+                },
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the select."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hint text to display."
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "\"\""
             },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Caption (underneath label) that can be set as a way of adding extra information"
+                },
+                "attribute": "caption",
+                "reflect": false
+            },
+            "echoPlaceholder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),\nsettings this to true will \"echo\" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)"
+                },
+                "attribute": "echo-placeholder",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | DuetSelectItems",
+                    "resolved": "(DuetSelectOption | DuetSelectOptionGroup)[] | string",
+                    "references": {
+                        "DuetSelectItems": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+                            "id": "src/components/duet-select/duet-select.tsx::DuetSelectItems"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of items to choose from"
+                },
+                "attribute": "items",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the select component disabled. This prevents users from being able\nto interact with the select, and conveys its inactive state to assistive\ntechnologies."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set whether the input is required or not. Please note that this is necessary for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set \u201Cnovalidate\u201D attribute to your form element to prevent\nbrowser from displaying its own validation errors."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the select."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "\"label\""
+            },
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines a specific role attribute for the select."
+                },
+                "attribute": "role",
+                "reflect": false
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip to display next to the label of the input."
+                },
+                "attribute": "tooltip",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "tooltipDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetTooltipDirection",
+                    "resolved": "\"auto\" | \"left\" | \"right\"",
+                    "references": {
+                        "DuetTooltipDirection": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTooltipDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
+                },
+                "attribute": "tooltip-direction",
+                "reflect": false,
+                "defaultValue": "\"auto\""
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the specified `duet-select`. Use this method instead of the global\n`select.focus()`.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "valueChanged"
-      }, {
-        "propName": "items",
-        "methodName": "refresh"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "processedItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "duetChange",
+                "name": "duetChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback for when the value changed."
+                },
+                "complexType": {
+                    "original": "DuetSelectEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-select\"; value: string; }",
+                    "references": {
+                        "DuetSelectEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+                            "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetFocus",
+                "name": "duetFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select has focus."
+                },
+                "complexType": {
+                    "original": "DuetSelectEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-select\"; value: string; }",
+                    "references": {
+                        "DuetSelectEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+                            "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetBlur",
+                "name": "duetBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select loses focus."
+                },
+                "complexType": {
+                    "original": "DuetSelectEvent",
+                    "resolved": "{ originalEvent?: Event; component: \"duet-select\"; value: string; }",
+                    "references": {
+                        "DuetSelectEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+                            "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the specified `duet-select`. Use this method instead of the global\n`select.focus()`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "items",
+                "methodName": "refresh"
+            }];
+    }
 }