@itcenteratunihelsinki/huds-lib 0.8.41 → 0.8.42

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,167 @@ 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
+      }];
+  }
 }
+//# sourceMappingURL=hy-dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hy-dropdown.js","sourceRoot":"","sources":["../../../src/components/hy-dropdown/hy-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Host, h, State, Listen, Prop, Watch} from '@stencil/core';\nimport {jsonParserWorker} from '../../global/globalScript';\n\nexport interface IDropdownItem {\n  id: string | number;\n  label: string;\n  value: string | number;\n}\n\nexport interface DefaultValue {\n  id: string | number;\n  label: string;\n  value: string | number;\n}\n\n@Component({\n  tag: 'hy-dropdown',\n  styleUrl: 'hy-dropdown.scss',\n  shadow: false,\n})\nexport class HyDropdown {\n  private _dropdownOptions: IDropdownItem[];\n  @Element() el: HTMLElement;\n  @Prop() single: boolean = false;\n  @Prop() dropdownLabel: string = null;\n  @Prop() dropdownId: string = 'dropdownToggle';\n  @Prop() dropdownOptions: IDropdownItem[] | string;\n  @Prop() defaultLabel: string = 'All';\n  @Prop({mutable: true}) defaultOption: string | number = null;\n  @State() isPanelOpen: boolean = false;\n  @State() isChecked: boolean = false;\n  @State() currentSingle: DefaultValue[] = [{id: 0, label: this.defaultLabel, value: 0}];\n\n  async componentWillLoad() {\n    this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);\n  }\n\n  componentWillUpdate() {\n    const items = this.el.querySelectorAll('.hy-dropdown__checkbox') as any;\n    if (items) {\n      if ([...items].some((item) => item.checked == true)) {\n        this.isChecked = true;\n      } else {\n        this.isChecked = false;\n      }\n    }\n  }\n\n  @Watch('defaultOption')\n  watchPropHandler(newValue: string | number, oldValue: string | number) {\n    if (!this.single) return;\n\n    if (newValue !== oldValue) {\n      const dropdownPanelCheckboxElements = this.el.getElementsByClassName('hy-dropdown__checkbox') as HTMLCollectionOf<\n        HTMLInputElement\n      >;\n\n      Array.from(dropdownPanelCheckboxElements).filter((item) => {\n        if (item.id == newValue) {\n          item.checked = true;\n          this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue) as any;\n          return;\n        }\n        return null;\n      });\n    }\n  }\n\n  handlePanelToggle() {\n    this.isPanelOpen = !this.isPanelOpen;\n  }\n\n  @Listen('click', {target: 'window'})\n  handleClick(event) {\n    const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`) as HTMLButtonElement;\n    const dropdownPanelElement = this.el.querySelector('.hy-dropdown__panel') as HTMLElement;\n    const dropdownPanelCheckboxElements = this.el.querySelectorAll('.hy-dropdown__checkbox');\n    const dropdownToggleButtonIconElement = this.el.querySelector('.hy-dropdown__icon') as HTMLElement;\n\n    const {target} = event;\n\n    const allowedElements = [\n      dropdownToggleButtonElement,\n      dropdownPanelElement,\n      dropdownToggleButtonIconElement,\n      ...dropdownPanelCheckboxElements, // Spread (\"copy\") items to allowedElement array.\n    ];\n\n    if (this.isPanelOpen && !allowedElements.includes(target)) {\n      this.isPanelOpen = false;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen('click', {capture: true})\n  handleSingleClick(event) {\n    if (!this.single || !this.isPanelOpen) return;\n    const dropdownPanelCheckboxElements = this.el.getElementsByClassName('hy-dropdown__checkbox') as HTMLCollectionOf<\n      HTMLInputElement\n    >;\n    const allowedElements = [...dropdownPanelCheckboxElements];\n    const {target} = event;\n    if (!allowedElements.includes(target)) return;\n    Array.from(dropdownPanelCheckboxElements).filter((item) => {\n      if (item.id == target.id) {\n        if (!item.checked) {\n          this.currentSingle = [{id: null, label: this.defaultLabel, value: null}];\n          return;\n        }\n        this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id) as any;\n        return;\n      }\n      if (item.id !== target.id && item.checked) {\n        item.checked = false;\n        return;\n      }\n      return null;\n    });\n\n    event.stopPropagation();\n  }\n\n  render() {\n    const {label: currentLabel, id: currentId, value: currentValue} = this.currentSingle[0];\n    const classAttributes = ['hy-dropdown', this.single ? 'hy-dropdown--single' : ''].join(' ');\n\n    if (this.single) {\n      return (\n        <Host class={classAttributes}>\n          {this.dropdownLabel && (\n            <label class=\"hy-dropdown__button-label\" htmlFor={this.dropdownId}>\n              {this.dropdownLabel}\n            </label>\n          )}\n          <button\n            id={this.dropdownId}\n            class={`hy-dropdown__toggle ${this.isPanelOpen ? 'is-open' : ''}`}\n            aria-expanded={`${this.isPanelOpen || false}`}\n            aria-haspopup=\"true\"\n            aria-controls=\"dropdownPanel\"\n            onClick={() => this.handlePanelToggle()}\n            aria-label={`${!this.isPanelOpen ? 'Open' : 'Close'} dropdown`}\n            data-current-id={currentId}\n            data-current-value={currentValue}\n            value={currentId}\n            type=\"button\"\n          >\n            {currentLabel}\n            <hy-icon class=\"hy-dropdown__icon\" icon={'hy-icon-caret-down'} size={14} aria-hidden=\"true\" />\n          </button>\n          <hy-dropdown-panel checkbox-checked={this.isChecked ? 'true' : 'false'} is-hidden={!this.isPanelOpen}>\n            {this._dropdownOptions.map(({id, label, value}, index) => (\n              <hy-dropdown-panel-item\n                dropdown-item-id={id}\n                dropdown-item-label={label}\n                dropdown-item-value={value}\n                is-last={this._dropdownOptions.length - 1 === index}\n              />\n            ))}\n          </hy-dropdown-panel>\n        </Host>\n      );\n    } else {\n      return (\n        <Host class={classAttributes}>\n          <button\n            id={this.dropdownId}\n            class={`hy-dropdown__toggle ${this.isPanelOpen ? 'is-open' : ''}`}\n            aria-expanded={`${this.isPanelOpen || false}`}\n            aria-haspopup=\"true\"\n            aria-controls=\"dropdownPanel\"\n            onClick={() => this.handlePanelToggle()}\n            aria-label={`${!this.isPanelOpen ? 'Open' : 'Close'} dropdown`}\n            type=\"button\"\n          >\n            {this.dropdownLabel && this.dropdownLabel}\n            <hy-icon class=\"hy-dropdown__icon\" icon={'hy-icon-caret-down'} size={14} aria-hidden=\"true\" />\n          </button>\n          <hy-dropdown-panel checkbox-checked={this.isChecked ? 'true' : 'false'} is-hidden={!this.isPanelOpen}>\n            {this._dropdownOptions.map(({id, label, value}, index) => (\n              <hy-dropdown-panel-item\n                dropdown-item-id={id}\n                dropdown-item-label={label}\n                dropdown-item-value={value}\n                is-last={this._dropdownOptions.length - 1 === index}\n              />\n            ))}\n          </hy-dropdown-panel>\n        </Host>\n      );\n    }\n  }\n}\n"]}

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

@@ -1,85 +1,87 @@
-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
+      }
+    };
+  }
 }
+//# sourceMappingURL=hy-dropdown.panel.item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hy-dropdown.panel.item.js","sourceRoot":"","sources":["../../../src/components/hy-dropdown/hy-dropdown.panel.item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAMjD,MAAM,OAAO,mBAAmB;;kBACH,KAAK;;;;;EAKhC,MAAM;IACJ,OAAO,CACL,UAAI,KAAK,EAAE,2BAA2B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE;MAClE,aACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,uBAAuB,EAC7B,EAAE,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAC5B,KAAK,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAClC;MACF,aAAO,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE;QAChE,IAAI,CAAC,iBAAiB;QACvB,eAAS,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,EAAE,iBAAc,MAAM,GAAG,CACxF,CACL,CACN,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Prop} from '@stencil/core';\n\n@Component({\n  tag: 'hy-dropdown-panel-item',\n  shadow: false,\n})\nexport class HyDropdownPanelItem {\n  @Prop() isLast?: boolean = false;\n  @Prop() dropdownItemId: string | number;\n  @Prop() dropdownItemValue: string | number;\n  @Prop() dropdownItemLabel: string;\n\n  render() {\n    return (\n      <li class={`hy-dropdown__panel-item ${this.isLast ? 'is-last' : ''}`}>\n        <input\n          type=\"checkbox\"\n          class=\"hy-dropdown__checkbox\"\n          id={`${this.dropdownItemId}`}\n          value={`${this.dropdownItemValue}`}\n        />\n        <label class=\"hy-dropdown__label\" htmlFor={`${this.dropdownItemId}`}>\n          {this.dropdownItemLabel}\n          <hy-icon class=\"hy-dropdown__label-icon\" icon={'hy-icon-done'} size={14} aria-hidden=\"true\" />\n        </label>\n      </li>\n    );\n  }\n}\n"]}

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

@@ -1,27 +1,32 @@
-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
+      }
+    };
+  }
 }
+//# sourceMappingURL=hy-dropdown.panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hy-dropdown.panel.js","sourceRoot":"","sources":["../../../src/components/hy-dropdown/hy-dropdown.panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAMjD,MAAM,OAAO,eAAe;;;;EAG1B,MAAM;IACJ,OAAO,CACL,UACE,EAAE,EAAC,eAAe,EAClB,KAAK,EAAE,sBAAsB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,iBAClD,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK,EAAE,EACxC,IAAI,EAAC,QAAQ,qBACG,gBAAgB;MAEhC,eAAQ,CACL,CACN,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Prop} from '@stencil/core';\n\n@Component({\n  tag: 'hy-dropdown-panel',\n  shadow: false,\n})\nexport class HyDropdownPanel {\n  @Prop() isHidden: boolean;\n\n  render() {\n    return (\n      <ul\n        id=\"dropdownPanel\"\n        class={`hy-dropdown__panel ${this.isHidden ? 'is-hidden' : ''}`}\n        aria-hidden={`${this.isHidden || false}`}\n        role=\"region\"\n        aria-labelledby=\"dropdownToggle\"\n      >\n        <slot />\n      </ul>\n    );\n  }\n}\n"]}