@itcenteratunihelsinki/huds-lib 0.8.41 → 0.8.43

package/dist/collection/components/hy-dropdown/hy-dropdown.js

@@ -1,10 +1,11 @@
-import { Component, Element, Host, h, State, Listen, Prop, Watch } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import { jsonParserWorker } from '../../global/globalScript';
 export class HyDropdown {
   constructor() {
     this.single = false;
     this.dropdownLabel = null;
     this.dropdownId = 'dropdownToggle';
+    this.dropdownOptions = undefined;
     this.defaultLabel = 'All';
     this.defaultOption = null;
     this.isPanelOpen = false;
@@ -89,162 +90,166 @@ export class HyDropdown {
     const { label: currentLabel, id: currentId, value: currentValue } = this.currentSingle[0];
     const classAttributes = ['hy-dropdown', this.single ? 'hy-dropdown--single' : ''].join(' ');
     if (this.single) {
-      return (h(Host, { class: classAttributes },
-        this.dropdownLabel && (h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)),
-        h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? 'is-open' : ''}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-haspopup": "true", "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": `${!this.isPanelOpen ? 'Open' : 'Close'} dropdown`, "data-current-id": currentId, "data-current-value": currentValue, value: currentId, type: "button" },
-          currentLabel,
-          h("hy-icon", { class: "hy-dropdown__icon", icon: 'hy-icon-caret-down', size: 14, "aria-hidden": "true" })),
-        h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? 'true' : 'false', "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
+      return (h(Host, { class: classAttributes }, this.dropdownLabel && (h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? 'is-open' : ''}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-haspopup": "true", "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": `${!this.isPanelOpen ? 'Open' : 'Close'} dropdown`, "data-current-id": currentId, "data-current-value": currentValue, value: currentId, type: "button" }, currentLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: 'hy-icon-caret-down', size: 14, "aria-hidden": "true" })), h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? 'true' : 'false', "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
     }
     else {
-      return (h(Host, { class: classAttributes },
-        h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? 'is-open' : ''}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-haspopup": "true", "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": `${!this.isPanelOpen ? 'Open' : 'Close'} dropdown`, type: "button" },
-          this.dropdownLabel && this.dropdownLabel,
-          h("hy-icon", { class: "hy-dropdown__icon", icon: 'hy-icon-caret-down', size: 14, "aria-hidden": "true" })),
-        h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? 'true' : 'false', "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
+      return (h(Host, { class: classAttributes }, h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? 'is-open' : ''}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-haspopup": "true", "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": `${!this.isPanelOpen ? 'Open' : 'Close'} dropdown`, type: "button" }, this.dropdownLabel && this.dropdownLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: 'hy-icon-caret-down', size: 14, "aria-hidden": "true" })), h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? 'true' : 'false', "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
     }
   }
   static get is() { return "hy-dropdown"; }
-  static get originalStyleUrls() { return {
-    "$": ["hy-dropdown.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["hy-dropdown.css"]
-  }; }
-  static get properties() { return {
-    "single": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "single",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "dropdownLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["hy-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "single": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "single",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "dropdown-label",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "dropdownId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "dropdownLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "dropdown-label",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "dropdownId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "dropdown-id",
+        "reflect": false,
+        "defaultValue": "'dropdownToggle'"
       },
-      "attribute": "dropdown-id",
-      "reflect": false,
-      "defaultValue": "'dropdownToggle'"
-    },
-    "dropdownOptions": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "IDropdownItem[] | string",
-        "resolved": "IDropdownItem[] | string",
-        "references": {
-          "IDropdownItem": {
-            "location": "local"
+      "dropdownOptions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IDropdownItem[] | string",
+          "resolved": "IDropdownItem[] | string",
+          "references": {
+            "IDropdownItem": {
+              "location": "local",
+              "path": "/builds/julkiset-sivut/design-system-lib/src/components/hy-dropdown/hy-dropdown.tsx"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "dropdown-options",
-      "reflect": false
-    },
-    "defaultLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "dropdown-options",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "defaultLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-label",
+        "reflect": false,
+        "defaultValue": "'All'"
       },
-      "attribute": "default-label",
-      "reflect": false,
-      "defaultValue": "'All'"
-    },
-    "defaultOption": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "string | number",
-        "resolved": "number | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "default-option",
-      "reflect": false,
-      "defaultValue": "null"
-    }
-  }; }
-  static get states() { return {
-    "isPanelOpen": {},
-    "isChecked": {},
-    "currentSingle": {}
-  }; }
+      "defaultOption": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "string | number",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-option",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isPanelOpen": {},
+      "isChecked": {},
+      "currentSingle": {}
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "defaultOption",
-      "methodName": "watchPropHandler"
-    }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "handleClick",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "handleSingleClick",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "defaultOption",
+        "methodName": "watchPropHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleClick",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "handleSingleClick",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/hy-dropdown/hy-dropdown.panel.item.js

@@ -1,85 +1,86 @@
-import { Component, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 export class HyDropdownPanelItem {
   constructor() {
     this.isLast = false;
+    this.dropdownItemId = undefined;
+    this.dropdownItemValue = undefined;
+    this.dropdownItemLabel = undefined;
   }
   render() {
-    return (h("li", { class: `hy-dropdown__panel-item ${this.isLast ? 'is-last' : ''}` },
-      h("input", { type: "checkbox", class: "hy-dropdown__checkbox", id: `${this.dropdownItemId}`, value: `${this.dropdownItemValue}` }),
-      h("label", { class: "hy-dropdown__label", htmlFor: `${this.dropdownItemId}` },
-        this.dropdownItemLabel,
-        h("hy-icon", { class: "hy-dropdown__label-icon", icon: 'hy-icon-done', size: 14, "aria-hidden": "true" }))));
+    return (h("li", { class: `hy-dropdown__panel-item ${this.isLast ? 'is-last' : ''}` }, h("input", { type: "checkbox", class: "hy-dropdown__checkbox", id: `${this.dropdownItemId}`, value: `${this.dropdownItemValue}` }), h("label", { class: "hy-dropdown__label", htmlFor: `${this.dropdownItemId}` }, this.dropdownItemLabel, h("hy-icon", { class: "hy-dropdown__label-icon", icon: 'hy-icon-done', size: 14, "aria-hidden": "true" }))));
   }
   static get is() { return "hy-dropdown-panel-item"; }
-  static get properties() { return {
-    "isLast": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get properties() {
+    return {
+      "isLast": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-last",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "dropdownItemId": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | number",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "dropdown-item-id",
+        "reflect": false
       },
-      "attribute": "is-last",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "dropdownItemId": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "string | number",
-        "resolved": "number | string",
-        "references": {}
+      "dropdownItemValue": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | number",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "dropdown-item-value",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "dropdown-item-id",
-      "reflect": false
-    },
-    "dropdownItemValue": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "string | number",
-        "resolved": "number | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "dropdown-item-value",
-      "reflect": false
-    },
-    "dropdownItemLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "dropdown-item-label",
-      "reflect": false
-    }
-  }; }
+      "dropdownItemLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "dropdown-item-label",
+        "reflect": false
+      }
+    };
+  }
 }

package/dist/collection/components/hy-dropdown/hy-dropdown.panel.js

@@ -1,27 +1,31 @@
-import { Component, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 export class HyDropdownPanel {
+  constructor() {
+    this.isHidden = undefined;
+  }
   render() {
-    return (h("ul", { id: "dropdownPanel", class: `hy-dropdown__panel ${this.isHidden ? 'is-hidden' : ''}`, "aria-hidden": `${this.isHidden || false}`, role: "region", "aria-labelledby": "dropdownToggle" },
-      h("slot", null)));
+    return (h("ul", { id: "dropdownPanel", class: `hy-dropdown__panel ${this.isHidden ? 'is-hidden' : ''}`, "aria-hidden": `${this.isHidden || false}`, role: "region", "aria-labelledby": "dropdownToggle" }, h("slot", null)));
   }
   static get is() { return "hy-dropdown-panel"; }
-  static get properties() { return {
-    "isHidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-hidden",
-      "reflect": false
-    }
-  }; }
+  static get properties() {
+    return {
+      "isHidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-hidden",
+        "reflect": false
+      }
+    };
+  }
 }