@itcenteratunihelsinki/huds-lib 0.8.42 → 0.8.44

package/components/hy-dropdown.js

@@ -0,0 +1,155 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { j as jsonParserWorker } from './globalScript.js';
+import { d as defineCustomElement$4 } from './hy-dropdown.panel.js';
+import { d as defineCustomElement$3 } from './hy-dropdown.panel.item.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const hyDropdownCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-dropdown{display:inline-block;min-width:100%;position:relative}@media (min-width: 30rem){.hy-dropdown{min-width:48.3%}}@media (min-width: 75.0625rem){.hy-dropdown{min-width:23.03%}}.hy-dropdown label.hy-dropdown__button-label{font-size:1rem;line-height:20px;font-weight:700;display:block;font-family:var(--main-font-family);letter-spacing:-0.32px;margin-bottom:8px}.hy-dropdown--single .hy-dropdown__panel{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:330px;min-width:100%}.hy-dropdown__toggle{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;height:auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 0 0 16px;text-align:left;max-width:280px;width:100%}@media (min-width: 30rem){.hy-dropdown__toggle{font-size:1rem;line-height:24px;min-height:44px}}@media (min-width: 75.0625rem){.hy-dropdown__toggle{min-height:48px}}.hy-dropdown__toggle:hover{border-color:var(--brand-main-light);cursor:pointer}.hy-dropdown__toggle:focus{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}.hy-dropdown__toggle svg{pointer-events:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon{background-color:var(--brand-main-light);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-dropdown__toggle.is-open .hy-dropdown__icon::before{display:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon svg{fill:var(--grayscale-white)}.hy-dropdown__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 0 0 16px;position:relative;width:40px}.hy-dropdown__icon::before{border-left:0.5px solid var(--grayscale-medium-dark);content:\"\";display:inline-block;height:65%;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width: 30rem){.hy-dropdown__icon{height:44px;width:44px}}@media (min-width: 75.0625rem){.hy-dropdown__icon{height:48px;width:48px}}.hy-dropdown__icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-dropdown__icon svg{height:16px;width:16px}}.hy-dropdown__panel{background-color:var(--grayscale-white);-webkit-box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);list-style:none;margin:0;padding:6px;position:absolute;width:100%;z-index:11}.hy-dropdown__panel.is-hidden{display:none;visibility:hidden}.hy-dropdown__panel-item{position:relative}.hy-dropdown__panel-item:not(.is-last){margin-bottom:6px}.hy-dropdown__label{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 16px;text-align:left;width:100%}@media (min-width: 30rem){.hy-dropdown__label{font-size:1rem;line-height:24px}}.hy-dropdown__label-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none !important;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;visibility:hidden;width:40px}.hy-dropdown__checkbox{height:100%;margin:0;opacity:0;position:absolute;width:100%;z-index:10}.hy-dropdown__checkbox:checked+label{border-color:var(--grayscale-black);border-style:solid inset solid solid;border-width:2px;color:var(--grayscale-black);outline:0;text-indent:-1px}.hy-dropdown__checkbox:checked+label .hy-dropdown__label-icon{display:-webkit-inline-box !important;display:-ms-inline-flexbox !important;display:inline-flex !important;visibility:visible}.hy-dropdown__checkbox:hover{cursor:pointer}.hy-dropdown__checkbox:hover+label{border-color:var(--brand-main-light)}.hy-dropdown__checkbox:focus+label{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}";
+
+const HyDropdown$1 = /*@__PURE__*/ proxyCustomElement(class HyDropdown extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.single = false;
+    this.dropdownLabel = null;
+    this.dropdownId = "dropdownToggle";
+    this.dropdownOptions = undefined;
+    this.defaultLabel = "All";
+    this.defaultOption = null;
+    this.isPanelOpen = false;
+    this.isChecked = false;
+    this.currentSingle = [{ id: 0, label: this.defaultLabel, value: 0 }];
+  }
+  async componentWillLoad() {
+    this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);
+  }
+  componentWillUpdate() {
+    const items = this.el.querySelectorAll(".hy-dropdown__checkbox");
+    if (items) {
+      if ([...items].some((item) => item.checked == true)) {
+        this.isChecked = true;
+      }
+      else {
+        this.isChecked = false;
+      }
+    }
+  }
+  watchPropHandler(newValue, oldValue) {
+    if (!this.single)
+      return;
+    if (newValue !== oldValue) {
+      const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
+      Array.from(dropdownPanelCheckboxElements).filter((item) => {
+        if (item.id == newValue) {
+          item.checked = true;
+          this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue);
+          return;
+        }
+        return null;
+      });
+    }
+  }
+  handlePanelToggle() {
+    this.isPanelOpen = !this.isPanelOpen;
+  }
+  handleClick(event) {
+    const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`);
+    const dropdownPanelElement = this.el.querySelector(".hy-dropdown__panel");
+    const dropdownPanelCheckboxElements = this.el.querySelectorAll(".hy-dropdown__checkbox");
+    const dropdownToggleButtonIconElement = this.el.querySelector(".hy-dropdown__icon");
+    const { target } = event;
+    const allowedElements = [
+      dropdownToggleButtonElement,
+      dropdownPanelElement,
+      dropdownToggleButtonIconElement,
+      ...dropdownPanelCheckboxElements, // Spread ("copy") items to allowedElement array.
+    ];
+    if (this.isPanelOpen && !allowedElements.includes(target)) {
+      this.isPanelOpen = false;
+    }
+    event.stopPropagation();
+  }
+  handleSingleClick(event) {
+    if (!this.single || !this.isPanelOpen)
+      return;
+    const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
+    const allowedElements = [...dropdownPanelCheckboxElements];
+    const { target } = event;
+    if (!allowedElements.includes(target))
+      return;
+    Array.from(dropdownPanelCheckboxElements).filter((item) => {
+      if (item.id == target.id) {
+        if (!item.checked) {
+          this.currentSingle = [{ id: null, label: this.defaultLabel, value: null }];
+          return;
+        }
+        this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id);
+        return;
+      }
+      if (item.id !== target.id && item.checked) {
+        item.checked = false;
+        return;
+      }
+      return null;
+    });
+    event.stopPropagation();
+  }
+  render() {
+    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 }))))));
+    }
+    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 }))))));
+    }
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "defaultOption": ["watchPropHandler"]
+  }; }
+  static get style() { return hyDropdownCss; }
+}, [0, "hy-dropdown", {
+    "single": [4],
+    "dropdownLabel": [1, "dropdown-label"],
+    "dropdownId": [1, "dropdown-id"],
+    "dropdownOptions": [1, "dropdown-options"],
+    "defaultLabel": [1, "default-label"],
+    "defaultOption": [1032, "default-option"],
+    "isPanelOpen": [32],
+    "isChecked": [32],
+    "currentSingle": [32]
+  }, [[8, "click", "handleClick"], [2, "click", "handleSingleClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-dropdown", "hy-dropdown-panel", "hy-dropdown-panel-item", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyDropdown$1);
+      }
+      break;
+    case "hy-dropdown-panel":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "hy-dropdown-panel-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyDropdown = HyDropdown$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyDropdown, defineCustomElement };

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

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const HyDropdownPanelItem = /*@__PURE__*/ proxyCustomElement(class HyDropdownPanelItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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" }))));
+  }
+}, [0, "hy-dropdown-panel-item", {
+    "isLast": [4, "is-last"],
+    "dropdownItemId": [8, "dropdown-item-id"],
+    "dropdownItemValue": [8, "dropdown-item-value"],
+    "dropdownItemLabel": [1, "dropdown-item-label"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-dropdown-panel-item", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-dropdown-panel-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyDropdownPanelItem);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { HyDropdownPanelItem as H, defineCustomElement as d };

package/components/hy-dropdown.panel.js

@@ -0,0 +1,29 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const HyDropdownPanel = /*@__PURE__*/ proxyCustomElement(class HyDropdownPanel extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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)));
+  }
+}, [4, "hy-dropdown-panel", {
+    "isHidden": [4, "is-hidden"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-dropdown-panel"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-dropdown-panel":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyDropdownPanel);
+      }
+      break;
+  } });
+}
+
+export { HyDropdownPanel as H, defineCustomElement as d };

package/components/hy-event-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyEventItem extends Components.HyEventItem, HTMLElement {}
+export const HyEventItem: {
+  prototype: HyEventItem;
+  new (): HyEventItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-event-item.js

@@ -0,0 +1,73 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const hyEventItemCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-events__item{display:-webkit-box;display:-ms-flexbox;display:flex;border:1px solid #d8d8d8;padding:13px 16px;position:relative;text-decoration:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;white-space:initial;margin-bottom:1rem}@media (min-width: 48rem){.hy-events__item{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:47px;margin-bottom:1.75rem}}@media (min-width: 48rem){.hy-events__item:not(.hy-events__item--grid) .hy-events__item--container{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events__item:hover .hy-events__item__title{color:var(--brand-main);text-decoration:underline}.hy-events__item:hover .hy-events__item__date--short,.hy-events__item:hover .hy-events__item__url-icon{background-color:var(--brand-main-active)}.hy-events__item__title{font-size:1.125rem;line-height:24px;-webkit-box-orient:vertical;-webkit-line-clamp:6;color:var(--grayscale-black);display:-webkit-box;font-family:var(--main-font-family);font-weight:700;letter-spacing:-0.36px;line-clamp:6;margin-bottom:16px;overflow:hidden;text-overflow:ellipsis}@media (min-width: 48rem){.hy-events__item__title{font-size:1.375rem;line-height:28px;font-weight:700;font-size:22px;line-height:28px;letter-spacing:-0.44px;margin-bottom:14px}}.hy-events__item__details{font-family:var(--main-font-family);font-style:normal;font-weight:400;font-size:17px;line-height:26px;color:var(--grayscale-black)}.hy-events__item__meta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 48rem){.hy-events__item__meta{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-events__item__meta--item{font-size:0.9375rem;line-height:22px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-right:0px;margin-bottom:9px;font-family:var(--main-font-family);font-weight:400;word-break:break-word}@media (min-width: 48rem){.hy-events__item__meta--item{font-size:1.0625rem;line-height:26px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin-right:35px;margin-bottom:0;font-weight:400}}.hy-events__item__meta--item svg{width:20px;height:20px;margin-right:9px;margin-top:2px}@media (min-width: 48rem){.hy-events__item__meta--item svg{margin-top:1px}}.hy-events__item__date--short{font-size:0.9375rem;line-height:18px;display:-webkit-box;display:-ms-flexbox;display:flex;color:var(--grayscale-white);background:var(--brand-main-light);font-family:var(--main-font-family);font-style:normal;font-weight:700;padding:6px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;text-align:center;letter-spacing:-0.28125px;text-decoration:none;margin-bottom:20px;margin-right:0}@media (min-width: 48rem){.hy-events__item__date--short{font-size:1.0625rem;line-height:20px;letter-spacing:-0.31875px;padding:0;height:68px;width:68px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:47px;margin-bottom:0}}.hy-events__item__url-icon{display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;background:var(--brand-main-light);color:var(--grayscale-white);width:32px;height:32px;bottom:16px;right:-9px;z-index:1}@media (min-width: 48rem){.hy-events__item__url-icon{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events__item__url-icon svg{fill:currentColor}.hy-events__item__read-more{font-size:0.9375rem;line-height:18px;color:var(--brand-main-light);font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;letter-spacing:-0.28125px;margin-top:10px}@media (min-width: 48rem){.hy-events__item__read-more{display:none}}.hy-events__item--grid{padding:1rem;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:280px;max-width:100%;min-height:255px;position:relative;margin-bottom:0}@media (min-width: 48rem){.hy-events__item--grid{max-width:280px;padding:1rem 1rem 0 1rem}}.hy-events__item--grid.is-long{max-height:100%}@media (min-width: 48rem){.hy-events__item--grid.is-long{max-height:255px}}.hy-events__item--grid.is-long::after{display:none;content:\"\";background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#ffffff));background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);position:absolute;bottom:0;left:0;width:100%;height:36px}@media (min-width: 48rem){.hy-events__item--grid.is-long::after{display:block}}.hy-events__item--grid.is-long .hy-events__item--container{overflow:visible}@media (min-width: 48rem){.hy-events__item--grid.is-long .hy-events__item--container{overflow:hidden}}@media (min-width: 48rem){.hy-events__item--grid.is-long:hover,.hy-events__item--grid.is-long:focus{border:0}}.hy-events__item--grid.is-long:hover::after,.hy-events__item--grid.is-long:hover .hy-events__item--toggle,.hy-events__item--grid.is-long:focus::after,.hy-events__item--grid.is-long:focus .hy-events__item--toggle{display:none}@media (min-width: 48rem){.hy-events__item--grid.is-long:hover .hy-events__item--container,.hy-events__item--grid.is-long:focus .hy-events__item--container{background-color:white;border:1px solid #d8d8d8;padding:16px 16px;position:absolute;top:0;left:0;min-height:255px;overflow:visible}}.hy-events__item--grid .hy-events__item__title{font-size:1.125rem;line-height:24px;letter-spacing:-0.36px}.hy-events__item--grid .hy-events__item--toggle{display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#d7d7d7;border-radius:50%;position:absolute;top:16px;right:16px;width:24px;height:24px}@media (min-width: 48rem){.hy-events__item--grid .hy-events__item--toggle{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events__item--grid .hy-events__item__meta{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:9px}.hy-events__item--grid .hy-events__item__meta--item{font-size:0.9375rem;line-height:22px}.hy-events__item--grid .hy-events__item__date--short{padding:6px}@media (min-width: 48rem){.hy-events__item--grid .hy-events__item__date--short{font-size:0.9375rem;line-height:18px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:auto;font-weight:700;letter-spacing:-0.28125px;margin-bottom:18px}}";
+
+const HyEventItem$1 = /*@__PURE__*/ proxyCustomElement(class HyEventItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.eventTitle = undefined;
+    this.eventDescription = "";
+    this.dateShort = "";
+    this.dateLong = "";
+    this.location = "";
+    this.type = undefined;
+    this.url = undefined;
+    this.styleGrid = false;
+    this.readMoreLabel = "Read more";
+    this.isLong = false;
+  }
+  componentDidLoad() {
+    const link = this.el;
+    if (this.styleGrid) {
+      if (link.clientHeight > 255) {
+        this.isLong = true;
+      }
+    }
+  }
+  render() {
+    const containerClasses = [
+      "hy-events__item",
+      this.styleGrid ? "hy-events__item--grid" : "hy-events__item--list",
+      this.isLong ? "is-long" : "",
+    ].join(" ");
+    return (h("a", { href: this.url, class: containerClasses, target: "_blank" }, h("div", { class: "hy-events__item--container" }, h("div", { class: "hy-events__item__top-container" }, h("span", { class: "hy-events__item__date--short" }, this.dateShort), this.isLong && (h("span", { class: "hy-events__item--toggle" }, h("hy-icon", { icon: "hy-icon-caret-down", size: 10 })))), h("div", { class: "hy-events__item__details" }, h("div", { class: "hy-events__item__title" }, this.eventTitle), h("div", { class: "hy-events__item__meta" }, this.dateLong && (h("div", { class: "hy-events__item__meta--item hy-events__item__date--long" }, h("hy-icon", { icon: "hy-icon-events", size: 18 }), this.dateLong)), this.location && (h("div", { class: "hy-events__item__meta--item hy-events__item__location" }, h("hy-icon", { icon: "hy-icon-location", size: 18 }), this.location)), this.type && (h("div", { class: "hy-events__item__meta--item hy-events__item__type" }, h("hy-icon", { icon: "hy-icon-people", size: 18 }), this.type)), h("span", { class: "hy-events__item__read-more" }, this.readMoreLabel))), h("span", { class: "hy-events__item__url-icon", "aria-hidden": "true" }, h("hy-icon", { icon: "hy-icon-arrow-right", size: 18 })))));
+  }
+  get el() { return this; }
+  static get style() { return hyEventItemCss; }
+}, [0, "hy-event-item", {
+    "eventTitle": [1, "event-title"],
+    "eventDescription": [1, "event-description"],
+    "dateShort": [1, "date-short"],
+    "dateLong": [1, "date-long"],
+    "location": [1],
+    "type": [1],
+    "url": [1],
+    "styleGrid": [4, "style-grid"],
+    "readMoreLabel": [1, "read-more-label"],
+    "isLong": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-event-item", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-event-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyEventItem$1);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyEventItem = HyEventItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyEventItem, defineCustomElement };

package/components/hy-events.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyEvents extends Components.HyEvents, HTMLElement {}
+export const HyEvents: {
+  prototype: HyEvents;
+  new (): HyEvents;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-events.js

@@ -0,0 +1,131 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { C as CtaLinkVariants } from './utils.js';
+import { d as defineCustomElement$3 } from './cta-link.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const hyEventsCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}hy-events.no-events .hy-events__no-result-container{font-family:var(--main-font-family)}hy-events.no-events .hy-events--wrapper .hy-events--grid{padding-bottom:0}hy-events.no-events .hy-events__footer{display:none}.hy-events--wrapper .hy-events{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-events--wrapper .hy-events--grid{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:1.5rem;overflow-x:hidden;white-space:nowrap;scrollbar-width:none}@media (min-width: 48rem){.hy-events--wrapper .hy-events--grid{padding-bottom:14rem}}.hy-events--wrapper .hy-events--grid .hy-events__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:24px;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}@media (min-width: 48rem){.hy-events--wrapper .hy-events--grid .hy-events__content{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-events--wrapper .hy-events__footer{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:2rem}.hy-events--wrapper .hy-events__footer--grid{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-top:1.5rem}@media (min-width: 48rem){.hy-events--wrapper .hy-events__footer--grid{margin-top:-9.5rem}}.hy-events--wrapper .hy-events__scroll-buttons{display:none;margin-top:2rem}@media (min-width: 48rem){.hy-events--wrapper .hy-events__scroll-buttons{display:-webkit-box;display:-ms-flexbox;display:flex}}.hy-events--wrapper .hy-events__scroll-buttons button{border:none;background:none;padding:0.5rem}.hy-events--wrapper .hy-events__scroll-buttons button:hover{cursor:pointer}.hy-events--wrapper .hy-events__scroll-buttons button:hover svg{scale:1.1}.hy-events--wrapper .hy-events__scroll-buttons button.is-hidden{display:none}.hy-events--wrapper .hy-events__scroll-buttons button.is-disabled{pointer-events:none}.hy-events--wrapper .hy-events__scroll-buttons button.is-disabled svg{fill:var(--link-disabled)}";
+
+let scrollTimeout = null;
+let checkTimeout = null;
+let itemWidth = 280 + 24;
+const HyEvents$1 = /*@__PURE__*/ proxyCustomElement(class HyEvents extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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;
+  }
+  componentDidLoad() {
+    const itemList = this.el;
+    const content = document.querySelector(".hy-events");
+    const scrollLeft = itemList.querySelector(".hy-events__scroll-left");
+    const scrollRight = itemList.querySelector(".hy-events__scroll-right");
+    //this.checkScrollHidden(content, scrollLeft, scrollRight);
+    if (this.styleGrid) {
+      content.addEventListener("scroll", () => {
+        scrollTimeout = setTimeout(() => {
+          window.clearTimeout(scrollTimeout);
+        }, 250);
+      }, false);
+      scrollLeft.addEventListener("click", (e) => {
+        e.preventDefault();
+        scrollLeft.classList.add("is-disabled");
+        content.scrollBy({
+          top: 0,
+          left: -itemWidth,
+          behavior: "smooth",
+        });
+        checkTimeout = window.setTimeout(() => {
+          window.clearTimeout(checkTimeout);
+          //this.checkScrollHidden(content, scrollLeft, scrollRight);
+          scrollLeft.classList.remove("is-disabled");
+        }, 250);
+      });
+      scrollRight.addEventListener("click", (e) => {
+        e.preventDefault();
+        scrollRight.classList.add("is-disabled");
+        content.scrollBy({
+          top: 0,
+          left: +itemWidth,
+          behavior: "smooth",
+        });
+        checkTimeout = window.setTimeout(() => {
+          window.clearTimeout(checkTimeout);
+          //this.checkScrollHidden(content, scrollLeft, scrollRight);
+          scrollRight.classList.remove("is-disabled");
+        }, 250);
+      });
+    }
+  }
+  watchUrlHandler(newValue, oldValue) {
+    if (oldValue !== newValue) {
+      this.viewAllUrl = newValue;
+    }
+  }
+  checkScrollHidden(list, leftButton, rightButton) {
+    const itemList = list.querySelector(".hy-events__content");
+    if (list.scrollLeft === 0) {
+      leftButton.classList.add("is-hidden");
+    }
+    else {
+      leftButton.classList.remove("is-hidden");
+    }
+    if (list.scrollLeft + list.clientWidth >= itemList.scrollWidth - 1) {
+      rightButton.classList.add("is-hidden");
+    }
+    else {
+      rightButton.classList.remove("is-hidden");
+    }
+  }
+  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 })))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "viewAllUrl": ["watchUrlHandler"]
+  }; }
+  static get style() { return hyEventsCss; }
+}, [4, "hy-events", {
+    "styleGrid": [4, "style-grid"],
+    "showMore": [4, "show-more"],
+    "viewAllUrl": [1, "view-all-url"],
+    "viewAllLabel": [1, "view-all-label"],
+    "scrollLeftLabel": [1, "scroll-left-label"],
+    "scrollRightLabel": [1, "scroll-right-label"],
+    "scrollable": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-events", "hy-cta-link", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-events":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyEvents$1);
+      }
+      break;
+    case "hy-cta-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyEvents = HyEvents$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyEvents, defineCustomElement };

package/components/hy-filter-group-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyFilterGroupItem extends Components.HyFilterGroupItem, HTMLElement {}
+export const HyFilterGroupItem: {
+  prototype: HyFilterGroupItem;
+  new (): HyFilterGroupItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { H as HyFilterGroupItem$1, d as defineCustomElement$1 } from './hy-filter-group.item.js';
+
+const HyFilterGroupItem = HyFilterGroupItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyFilterGroupItem, defineCustomElement };

package/components/hy-filter-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyFilterGroup extends Components.HyFilterGroup, HTMLElement {}
+export const HyFilterGroup: {
+  prototype: HyFilterGroup;
+  new (): HyFilterGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { e as ColorVariant } from './utils.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const HyFilterGroupItem = /*@__PURE__*/ proxyCustomElement(class HyFilterGroupItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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)));
+  }
+}, [4, "hy-filter-group-item", {
+    "filterGroupItemId": [8, "filter-group-item-id"],
+    "filterGroupItemLabel": [1, "filter-group-item-label"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-filter-group-item", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-filter-group-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyFilterGroupItem);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { HyFilterGroupItem as H, defineCustomElement as d };

package/components/hy-filter-group.js

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './hy-filter-group.item.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const hyFilterGroupCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-filter-group{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:16px}.hy-filter-group__listing{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:0;padding:0}.hy-filter-group__label{font-size:0.75rem;line-height:16px;border-radius:2px;color:var(--grayscale-dark);font-family:var(--main-font-family);font-weight:normal;letter-spacing:-0.2px;margin:8px 4px 8px 0;padding:4px 0}@media (min-width: 30rem){.hy-filter-group__label{font-size:0.875rem;line-height:16px;letter-spacing:-0.3px;padding:6px 0}}.hy-filter-group__button{font-size:0.75rem;line-height:16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-background-box);border-radius:2px;border:0;color:var(--grayscale-dark);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:normal;letter-spacing:-0.2px;margin:8px 4px;padding:4px 6px}@media (min-width: 30rem){.hy-filter-group__button{font-size:0.875rem;line-height:16px;letter-spacing:-0.3px;padding:6px 8px}}.hy-filter-group__button:hover{cursor:pointer}.hy-filter-group__button-icon{margin-left:6px}@media (min-width: 30rem){.hy-filter-group__button-icon{margin-left:8px}}.hy-filter-group__button-icon svg{pointer-events:none}@media (min-width: 30rem){.hy-filter-group__button-icon svg{height:12px;width:12px}}.hy-filter-group__divider{font-size:0.75rem;line-height:16px;color:var(--grayscale-dark);font-family:var(--main-font-family);margin:4px 6px}@media (min-width: 30rem){.hy-filter-group__divider{font-size:0.875rem;line-height:16px;letter-spacing:-0.3px}}";
+
+const HyFilterGroup$1 = /*@__PURE__*/ proxyCustomElement(class HyFilterGroup extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.filterGroupLabel = undefined;
+    this.filterGroupFilters = undefined;
+  }
+  arrayDataWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._filterGroupFilters = JSON.parse(newValue);
+    }
+    else {
+      this._filterGroupFilters = newValue;
+    }
+  }
+  componentWillLoad() {
+    this.arrayDataWatcher(this.filterGroupFilters);
+  }
+  // TODO: Finish handleFilterDeselect functionality with real data.
+  handleFilterDeselect(id) {
+    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) }))))));
+  }
+  static get watchers() { return {
+    "filterGroupFilters": ["arrayDataWatcher"]
+  }; }
+  static get style() { return hyFilterGroupCss; }
+}, [0, "hy-filter-group", {
+    "filterGroupLabel": [1, "filter-group-label"],
+    "filterGroupFilters": [1, "filter-group-filters"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-filter-group", "hy-filter-group-item", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-filter-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyFilterGroup$1);
+      }
+      break;
+    case "hy-filter-group-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyFilterGroup = HyFilterGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyFilterGroup, defineCustomElement };

package/components/hy-filter-list-type.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyFilterListType extends Components.HyFilterListType, HTMLElement {}
+export const HyFilterListType: {
+  prototype: HyFilterListType;
+  new (): HyFilterListType;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;