@itcenteratunihelsinki/huds-lib 0.8.73 → 0.8.74

package/components/hy-event-item.js

@@ -1,75 +1,74 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './index3.js';
 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 HyEventItemStyle0 = hyEventItemCss;
 
-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;
-      }
+const HyEventItem$1 = /*@__PURE__*/ proxyCustomElement(class HyEventItem extends H {
+    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;
     }
-  }
-  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; }
+    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", { key: '24ba3a83d0921efa8cb6b82e8b19fd4abc1ec833', href: this.url, class: containerClasses, target: "_blank" }, h("div", { key: 'a8432e313b9785b1c65c51236fb8b02b5693f3a1', class: "hy-events__item--container" }, h("div", { key: '210b0e57a3021fe1aad6aea1f81e7bc19a75ea2b', class: "hy-events__item__top-container" }, h("span", { key: '3a7afa35c70c3caf164850ec708786095376df18', class: "hy-events__item__date--short" }, this.dateShort), this.isLong && (h("span", { key: 'f9f40d1897c9ec24a1f9f2c76861daa47b97fe07', class: "hy-events__item--toggle" }, h("hy-icon", { key: 'bf35702e93828bf426a5a08913096458af719d76', icon: "hy-icon-caret-down", size: 10 })))), h("div", { key: '44b9330e04876d71f3a7ae8a090fa50ce5aea613', class: "hy-events__item__details" }, h("div", { key: '4af298202dcf3e8dd90cd0446bc4d1443882c9a0', class: "hy-events__item__title" }, this.eventTitle), h("div", { key: '2818b2788fe8d6cc1c01befaf75f10ab4b20ad1d', class: "hy-events__item__meta" }, this.dateLong && (h("div", { key: '4b5baea42b31bdcbe5cd51247913c12c23068e5d', class: "hy-events__item__meta--item hy-events__item__date--long" }, h("hy-icon", { key: '2f2c11262377506e27914e0d34316d300707983e', icon: "hy-icon-events", size: 18 }), this.dateLong)), this.location && (h("div", { key: 'e151bc9f486a704d03712719f3b3159e0ddd3cf8', class: "hy-events__item__meta--item hy-events__item__location" }, h("hy-icon", { key: 'e45ee3c237f7e762d31f138548ccdc1f6721228b', icon: "hy-icon-location", size: 18 }), this.location)), this.type && (h("div", { key: '8a7bb89836044539e6463d6988134ce20ca3bf2b', class: "hy-events__item__meta--item hy-events__item__type" }, h("hy-icon", { key: '81c5a8076940c993bf4b19b64bb58e162e4cd4a2', icon: "hy-icon-people", size: 18 }), this.type)), h("span", { key: '5dcd5cbd95c037bf1f371e762cd2de1e73f9b997', class: "hy-events__item__read-more" }, this.readMoreLabel))), h("span", { key: '485b475c970e7b5e9fcd308d078fa7b6b6aaf232', class: "hy-events__item__url-icon", "aria-hidden": "true" }, h("hy-icon", { key: '9f5b2c612601f0146f1f68499311456777c8c178', icon: "hy-icon-arrow-right", size: 18 })))));
+    }
+    get el() { return this; }
+    static get style() { return HyEventItemStyle0; }
 }, [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]
-  }]);
+        "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;
-  } });
+    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 };
-
-//# sourceMappingURL=hy-event-item.js.map

package/components/hy-events.d.ts

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

package/components/hy-events.js

@@ -1,133 +1,134 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './index3.js';
 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)}";
+const HyEventsStyle0 = hyEventsCss;
 
 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);
-      });
+const HyEvents$1 = /*@__PURE__*/ proxyCustomElement(class HyEvents extends H {
+    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;
     }
-  }
-  watchUrlHandler(newValue, oldValue) {
-    if (oldValue !== newValue) {
-      this.viewAllUrl = newValue;
+    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);
+            });
+        }
     }
-  }
-  checkScrollHidden(list, leftButton, rightButton) {
-    const itemList = list.querySelector(".hy-events__content");
-    if (list.scrollLeft === 0) {
-      leftButton.classList.add("is-hidden");
+    watchUrlHandler(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            this.viewAllUrl = newValue;
+        }
     }
-    else {
-      leftButton.classList.remove("is-hidden");
+    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");
+        }
     }
-    if (list.scrollLeft + list.clientWidth >= itemList.scrollWidth - 1) {
-      rightButton.classList.add("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", { key: '1236158132037dd66603976cd847d9d0664b2f68', class: "hy-events--wrapper" }, h("div", { key: 'fcdc284c051a866eb405b404802bec31b3caa52e', class: classAttributes }, h("slot", { key: 'edac498a414e5a603695de9d617d41bfe8db5929' })), h("div", { key: '215c08aa84672310330a4dd8d19e71e6acd51294', class: footerClasses }, this.scrollable && this.styleGrid && (h("div", { key: 'a3f28cffe5db8c87ec905cbe4fad782becd057b1', class: "hy-events__scroll-buttons" }, h("button", { key: '6b59914c7a6cdbf7df96c6915e16f46ee2841bb8', type: "button", class: "hy-events__scroll-left", "aria-label": this.scrollLeftLabel }, h("hy-icon", { key: 'eae6ca497a7903d3c9fd782d9e587842557f35a0', icon: "hy-icon-caret-left", size: 16 })), h("button", { key: '74a77395fe6c3a258b546125a4b6d262c1931fd8', type: "button", class: "hy-events__scroll-right", "aria-label": this.scrollRightLabel }, h("hy-icon", { key: '5fa859970a8b3e5872d0c55e5188f10a0a185fb8', icon: "hy-icon-caret-right", size: 16 })))), this.showMore && this.viewAllLabel && this.viewAllUrl && (h("hy-cta-link", { key: 'b9b929391510d390cae1b42e4ebceaf79f148842', "link-content": this.viewAllLabel, "sc-label": this.viewAllLabel, url: this.viewAllUrl, variant: CtaLinkVariants.linkList })))));
     }
-    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; }
+    get el() { return this; }
+    static get watchers() { return {
+        "viewAllUrl": ["watchUrlHandler"]
+    }; }
+    static get style() { return HyEventsStyle0; }
 }, [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]
-  }]);
+        "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]
+    }, undefined, {
+        "viewAllUrl": ["watchUrlHandler"]
+    }]);
 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;
-  } });
+    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 };
-
-//# sourceMappingURL=hy-events.js.map

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

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

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

@@ -4,5 +4,3 @@ const HyFilterGroupItem = HyFilterGroupItem$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { HyFilterGroupItem, defineCustomElement };
-
-//# sourceMappingURL=hy-filter-group-item.js.map

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

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

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

@@ -1,40 +1,38 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './index3.js';
 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)));
-  }
+const HyFilterGroupItem = /*@__PURE__*/ proxyCustomElement(class HyFilterGroupItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.filterGroupItemId = undefined;
+        this.filterGroupItemLabel = undefined;
+    }
+    render() {
+        return (h("li", { key: '3d4e1ee5c9eafdff323df5942c1574483ae5cdfa', class: "hy-filter-group__filter" }, h("button", { key: 'b26dcbebbe21e6c7794dc875b3267c05fcc9b418', type: "button", class: "hy-filter-group__button", "aria-label": `Deselect ${this.filterGroupItemLabel}` }, this.filterGroupItemLabel, h("hy-icon", { key: 'fa22c314b2d38609a49bdc8088a3040b53060ad5', class: "hy-filter-group__button-icon", icon: "hy-icon-remove", size: 10, "aria-hidden": "true", fill: ColorVariant.grey_dark })), h("slot", { key: '4d174ced20e271800018e8dad559a5352e781ecc' })));
+    }
 }, [4, "hy-filter-group-item", {
-    "filterGroupItemId": [8, "filter-group-item-id"],
-    "filterGroupItemLabel": [1, "filter-group-item-label"]
-  }]);
+        "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;
-  } });
+    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 };
-
-//# sourceMappingURL=hy-filter-group.item.js.map