@itcenteratunihelsinki/huds-lib 0.8.40 → 0.8.42

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

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop, State, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import { CtaLinkVariants } from '../../utils/utils';
 let scrollTimeout = null;
 let checkTimeout = null;
@@ -7,6 +7,8 @@ export class HyEvents {
   constructor() {
     this.styleGrid = false;
     this.showMore = false;
+    this.viewAllUrl = undefined;
+    this.viewAllLabel = undefined;
     this.scrollLeftLabel = 'Scroll list to left';
     this.scrollRightLabel = 'Scroll list to right';
     this.scrollable = true;
@@ -76,138 +78,140 @@ export class HyEvents {
   render() {
     const classAttributes = ['hy-events', this.styleGrid ? 'hy-events--grid' : ''].join(' ');
     const footerClasses = ['hy-events__footer', this.styleGrid ? 'hy-events__footer--grid' : ''].join(' ');
-    return (h("div", { class: "hy-events--wrapper" },
-      h("div", { class: classAttributes },
-        h("slot", null)),
-      h("div", { class: footerClasses },
-        this.scrollable && this.styleGrid && (h("div", { class: "hy-events__scroll-buttons" },
-          h("button", { type: "button", class: "hy-events__scroll-left", "aria-label": this.scrollLeftLabel },
-            h("hy-icon", { icon: "hy-icon-caret-left", size: 16 })),
-          h("button", { type: "button", class: "hy-events__scroll-right", "aria-label": this.scrollRightLabel },
-            h("hy-icon", { icon: "hy-icon-caret-right", size: 16 })))),
-        this.showMore && this.viewAllLabel && this.viewAllUrl && (h("hy-cta-link", { "link-content": this.viewAllLabel, "sc-label": this.viewAllLabel, url: this.viewAllUrl, variant: CtaLinkVariants.linkList })))));
+    return (h("div", { class: "hy-events--wrapper" }, h("div", { class: classAttributes }, h("slot", null)), h("div", { class: footerClasses }, this.scrollable && this.styleGrid && (h("div", { class: "hy-events__scroll-buttons" }, h("button", { type: "button", class: "hy-events__scroll-left", "aria-label": this.scrollLeftLabel }, h("hy-icon", { icon: "hy-icon-caret-left", size: 16 })), h("button", { type: "button", class: "hy-events__scroll-right", "aria-label": this.scrollRightLabel }, h("hy-icon", { icon: "hy-icon-caret-right", size: 16 })))), this.showMore && this.viewAllLabel && this.viewAllUrl && (h("hy-cta-link", { "link-content": this.viewAllLabel, "sc-label": this.viewAllLabel, url: this.viewAllUrl, variant: CtaLinkVariants.linkList })))));
   }
   static get is() { return "hy-events"; }
-  static get originalStyleUrls() { return {
-    "$": ["hy-events.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["hy-events.css"]
-  }; }
-  static get properties() { return {
-    "styleGrid": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "style-grid",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "showMore": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show-more",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "viewAllUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "view-all-url",
-      "reflect": false
-    },
-    "viewAllLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["hy-events.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-events.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "styleGrid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "style-grid",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "view-all-label",
-      "reflect": false
-    },
-    "scrollLeftLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "showMore": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-more",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "viewAllUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "view-all-url",
+        "reflect": false
       },
-      "attribute": "scroll-left-label",
-      "reflect": false,
-      "defaultValue": "'Scroll list to left'"
-    },
-    "scrollRightLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "viewAllLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "view-all-label",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "scrollLeftLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "scroll-left-label",
+        "reflect": false,
+        "defaultValue": "'Scroll list to left'"
       },
-      "attribute": "scroll-right-label",
-      "reflect": false,
-      "defaultValue": "'Scroll list to right'"
-    }
-  }; }
-  static get states() { return {
-    "scrollable": {}
-  }; }
+      "scrollRightLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "scroll-right-label",
+        "reflect": false,
+        "defaultValue": "'Scroll list to right'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "scrollable": {}
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "viewAllUrl",
-      "methodName": "watchUrlHandler"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "viewAllUrl",
+        "methodName": "watchUrlHandler"
+      }];
+  }
 }
+//# sourceMappingURL=hy-events.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hy-events.js","sourceRoot":"","sources":["../../../src/components/hy-events/hy-events.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, h, Prop, State, Watch} from '@stencil/core';\nimport {CtaLinkVariants} from '../../utils/utils';\n\nlet scrollTimeout = null;\nlet checkTimeout = null;\nlet itemWidth = 280 + 24;\n\n@Component({\n  tag: 'hy-events',\n  styleUrl: 'hy-events.scss',\n  shadow: false,\n})\nexport class HyEvents {\n  @Element() el: HTMLElement;\n\n  @Prop() styleGrid: boolean = false;\n  @Prop() showMore: boolean = false;\n  @Prop() viewAllUrl: string;\n  @Prop() viewAllLabel: string;\n  @Prop() scrollLeftLabel: string = 'Scroll list to left';\n  @Prop() scrollRightLabel: string = 'Scroll list to right';\n\n  @State() scrollable: boolean = true;\n\n  componentDidLoad() {\n    const itemList = this.el;\n    const content = document.querySelector('.hy-events');\n    const scrollLeft = itemList.querySelector('.hy-events__scroll-left');\n    const scrollRight = itemList.querySelector('.hy-events__scroll-right');\n\n    //this.checkScrollHidden(content, scrollLeft, scrollRight);\n\n    if (this.styleGrid) {\n      content.addEventListener(\n        'scroll',\n        () => {\n          scrollTimeout = setTimeout(() => {\n            window.clearTimeout(scrollTimeout);\n          }, 250);\n        },\n        false\n      );\n\n      scrollLeft.addEventListener('click', (e) => {\n        e.preventDefault();\n        scrollLeft.classList.add('is-disabled');\n        content.scrollBy({\n          top: 0,\n          left: -itemWidth,\n          behavior: 'smooth',\n        });\n        checkTimeout = window.setTimeout(() => {\n          window.clearTimeout(checkTimeout);\n          //this.checkScrollHidden(content, scrollLeft, scrollRight);\n          scrollLeft.classList.remove('is-disabled');\n        }, 250);\n      });\n\n      scrollRight.addEventListener('click', (e) => {\n        e.preventDefault();\n        scrollRight.classList.add('is-disabled');\n        content.scrollBy({\n          top: 0,\n          left: +itemWidth,\n          behavior: 'smooth',\n        });\n        checkTimeout = window.setTimeout(() => {\n          window.clearTimeout(checkTimeout);\n          //this.checkScrollHidden(content, scrollLeft, scrollRight);\n          scrollRight.classList.remove('is-disabled');\n        }, 250);\n      });\n    }\n  }\n\n  @Watch('viewAllUrl')\n  watchUrlHandler(newValue, oldValue) {\n    if (oldValue !== newValue) {\n      this.viewAllUrl = newValue;\n    }\n  }\n\n  checkScrollHidden(list, leftButton, rightButton) {\n    const itemList = list.querySelector('.hy-events__content');\n\n    if (list.scrollLeft === 0) {\n      leftButton.classList.add('is-hidden');\n    } else {\n      leftButton.classList.remove('is-hidden');\n    }\n\n    if (list.scrollLeft + list.clientWidth >= itemList.scrollWidth - 1) {\n      rightButton.classList.add('is-hidden');\n    } else {\n      rightButton.classList.remove('is-hidden');\n    }\n  }\n\n  render() {\n    const classAttributes = ['hy-events', this.styleGrid ? 'hy-events--grid' : ''].join(' ');\n    const footerClasses = ['hy-events__footer', this.styleGrid ? 'hy-events__footer--grid' : ''].join(' ');\n\n    return (\n      <div class=\"hy-events--wrapper\">\n        <div class={classAttributes}>\n          <slot></slot>\n        </div>\n        <div class={footerClasses}>\n          {this.scrollable && this.styleGrid && (\n            <div class=\"hy-events__scroll-buttons\">\n              <button type=\"button\" class=\"hy-events__scroll-left\" aria-label={this.scrollLeftLabel}>\n                <hy-icon icon=\"hy-icon-caret-left\" size={16}></hy-icon>\n              </button>\n              <button type=\"button\" class=\"hy-events__scroll-right\" aria-label={this.scrollRightLabel}>\n                <hy-icon icon=\"hy-icon-caret-right\" size={16}></hy-icon>\n              </button>\n            </div>\n          )}\n          {this.showMore && this.viewAllLabel && this.viewAllUrl && (\n            <hy-cta-link\n              link-content={this.viewAllLabel}\n              sc-label={this.viewAllLabel}\n              url={this.viewAllUrl}\n              variant={CtaLinkVariants.linkList}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/hy-filter-group/hy-filter-group.item.js

@@ -1,48 +1,51 @@
-import { Component, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 import { ColorVariant } from '../../utils/utils';
 export class HyFilterGroupItem {
+  constructor() {
+    this.filterGroupItemId = undefined;
+    this.filterGroupItemLabel = undefined;
+  }
   render() {
-    return (h("li", { class: "hy-filter-group__filter" },
-      h("button", { type: "button", class: "hy-filter-group__button", "aria-label": `Deselect ${this.filterGroupItemLabel}` },
-        this.filterGroupItemLabel,
-        h("hy-icon", { class: "hy-filter-group__button-icon", icon: 'hy-icon-remove', size: 10, "aria-hidden": "true", fill: ColorVariant.grey_dark })),
-      h("slot", null)));
+    return (h("li", { class: "hy-filter-group__filter" }, h("button", { type: "button", class: "hy-filter-group__button", "aria-label": `Deselect ${this.filterGroupItemLabel}` }, this.filterGroupItemLabel, h("hy-icon", { class: "hy-filter-group__button-icon", icon: 'hy-icon-remove', size: 10, "aria-hidden": "true", fill: ColorVariant.grey_dark })), h("slot", null)));
   }
   static get is() { return "hy-filter-group-item"; }
-  static get properties() { return {
-    "filterGroupItemId": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "string | number",
-        "resolved": "number | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "filter-group-item-id",
-      "reflect": false
-    },
-    "filterGroupItemLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get properties() {
+    return {
+      "filterGroupItemId": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | number",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filter-group-item-id",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "filter-group-item-label",
-      "reflect": false
-    }
-  }; }
+      "filterGroupItemLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filter-group-item-label",
+        "reflect": false
+      }
+    };
+  }
 }
+//# sourceMappingURL=hy-filter-group.item.js.map

package/dist/collection/components/hy-filter-group/hy-filter-group.item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-filter-group.item.js","sourceRoot":"","sources":["../../../src/components/hy-filter-group/hy-filter-group.item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAM/C,MAAM,OAAO,iBAAiB;;;;;EAI5B,MAAM;IACJ,OAAO,CACL,UAAI,KAAK,EAAC,yBAAyB;MACjC,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,yBAAyB,gBAAa,YAAY,IAAI,CAAC,oBAAoB,EAAE;QACtG,IAAI,CAAC,oBAAoB;QAC1B,eACE,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAE,gBAAgB,EACtB,IAAI,EAAE,EAAE,iBACI,MAAM,EAClB,IAAI,EAAE,YAAY,CAAC,SAAS,GAC5B,CACK;MACT,eAAQ,CACL,CACN,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Prop} from '@stencil/core';\nimport {ColorVariant} from '../../utils/utils';\n\n@Component({\n  tag: 'hy-filter-group-item',\n  shadow: false,\n})\nexport class HyFilterGroupItem {\n  @Prop() filterGroupItemId: string | number;\n  @Prop() filterGroupItemLabel: string;\n\n  render() {\n    return (\n      <li class=\"hy-filter-group__filter\">\n        <button type=\"button\" class=\"hy-filter-group__button\" aria-label={`Deselect ${this.filterGroupItemLabel}`}>\n          {this.filterGroupItemLabel}\n          <hy-icon\n            class=\"hy-filter-group__button-icon\"\n            icon={'hy-icon-remove'}\n            size={10}\n            aria-hidden=\"true\"\n            fill={ColorVariant.grey_dark}\n          />\n        </button>\n        <slot />\n      </li>\n    );\n  }\n}\n"]}

package/dist/collection/components/hy-filter-group/hy-filter-group.js

@@ -1,5 +1,9 @@
-import { Component, Host, h, Prop, Watch } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 export class HyFilterGroup {
+  constructor() {
+    this.filterGroupLabel = undefined;
+    this.filterGroupFilters = undefined;
+  }
   arrayDataWatcher(newValue) {
     if (typeof newValue === 'string') {
       this._filterGroupFilters = JSON.parse(newValue);
@@ -16,61 +20,67 @@ export class HyFilterGroup {
     console.log(id);
   }
   render() {
-    return (h(Host, { class: "hy-filter-group" },
-      h("ul", { class: "hy-filter-group__listing" },
-        h("li", null,
-          h("h3", { class: "hy-filter-group__label" }, this.filterGroupLabel)),
-        this._filterGroupFilters.map(({ id, label }) => (h("hy-filter-group-item", { "filter-group-item-id": id, "filter-group-item-label": label, onClick: () => this.handleFilterDeselect(id) }))))));
+    return (h(Host, { class: "hy-filter-group" }, h("ul", { class: "hy-filter-group__listing" }, h("li", null, h("h3", { class: "hy-filter-group__label" }, this.filterGroupLabel)), this._filterGroupFilters.map(({ id, label }) => (h("hy-filter-group-item", { "filter-group-item-id": id, "filter-group-item-label": label, onClick: () => this.handleFilterDeselect(id) }))))));
   }
   static get is() { return "hy-filter-group"; }
-  static get originalStyleUrls() { return {
-    "$": ["hy-filter-group.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["hy-filter-group.css"]
-  }; }
-  static get properties() { return {
-    "filterGroupLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["hy-filter-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-filter-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "filterGroupLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filter-group-label",
+        "reflect": false
       },
-      "attribute": "filter-group-label",
-      "reflect": false
-    },
-    "filterGroupFilters": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "IFilterGroupFilter[] | string",
-        "resolved": "IFilterGroupFilter[] | string",
-        "references": {
-          "IFilterGroupFilter": {
-            "location": "local"
+      "filterGroupFilters": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IFilterGroupFilter[] | string",
+          "resolved": "IFilterGroupFilter[] | string",
+          "references": {
+            "IFilterGroupFilter": {
+              "location": "local",
+              "path": "/builds/julkiset-sivut/design-system-lib/src/components/hy-filter-group/hy-filter-group.tsx"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "filter-group-filters",
-      "reflect": false
-    }
-  }; }
-  static get watchers() { return [{
-      "propName": "filterGroupFilters",
-      "methodName": "arrayDataWatcher"
-    }]; }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filter-group-filters",
+        "reflect": false
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "filterGroupFilters",
+        "methodName": "arrayDataWatcher"
+      }];
+  }
 }
+//# sourceMappingURL=hy-filter-group.js.map

package/dist/collection/components/hy-filter-group/hy-filter-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-filter-group.js","sourceRoot":"","sources":["../../../src/components/hy-filter-group/hy-filter-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAY9D,MAAM,OAAO,aAAa;;;;;EAMxB,gBAAgB,CAAC,QAAuC;IACtD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACjD;SAAM;MACL,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC;KACrC;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;EACjD,CAAC;EAED,kEAAkE;EAClE,oBAAoB,CAAC,EAAE;IACrB,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;EAClB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB;MAC3B,UAAI,KAAK,EAAC,0BAA0B;QAClC;UACE,UAAI,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,gBAAgB,CAAM,CAC5D;QACJ,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,EAAC,EAAE,EAAE,KAAK,EAAC,EAAE,EAAE,CAAC,CAC7C,oDACwB,EAAE,6BACC,KAAK,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,GACtB,CACzB,CAAC,CACC,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, h, Prop, Watch} from '@stencil/core';\n\nexport interface IFilterGroupFilter {\n  id: string | number;\n  label: string;\n}\n\n@Component({\n  tag: 'hy-filter-group',\n  styleUrl: 'hy-filter-group.scss',\n  shadow: false,\n})\nexport class HyFilterGroup {\n  private _filterGroupFilters: IFilterGroupFilter[];\n  @Prop() filterGroupLabel: string;\n  @Prop() filterGroupFilters: IFilterGroupFilter[] | string;\n\n  @Watch('filterGroupFilters')\n  arrayDataWatcher(newValue: IFilterGroupFilter[] | string) {\n    if (typeof newValue === 'string') {\n      this._filterGroupFilters = JSON.parse(newValue);\n    } else {\n      this._filterGroupFilters = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    this.arrayDataWatcher(this.filterGroupFilters);\n  }\n\n  // TODO: Finish handleFilterDeselect functionality with real data.\n  handleFilterDeselect(id) {\n    console.log(id);\n  }\n\n  render() {\n    return (\n      <Host class=\"hy-filter-group\">\n        <ul class=\"hy-filter-group__listing\">\n          <li>\n            <h3 class=\"hy-filter-group__label\">{this.filterGroupLabel}</h3>\n          </li>\n          {this._filterGroupFilters.map(({id, label}) => (\n            <hy-filter-group-item\n              filter-group-item-id={id}\n              filter-group-item-label={label}\n              onClick={() => this.handleFilterDeselect(id)}\n            ></hy-filter-group-item>\n          ))}\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}