@itcenteratunihelsinki/huds-lib 0.8.40 → 0.8.42

package/dist/cjs/hy-event-item.cjs.entry.js

@@ -2,17 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-dfc917d9.js');
+const index = require('./index-25bd964b.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}}";
 
-let HyEventItem = class {
+const HyEventItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    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;
@@ -38,3 +41,5 @@ let HyEventItem = class {
 HyEventItem.style = hyEventItemCss;
 
 exports.hy_event_item = HyEventItem;
+
+//# sourceMappingURL=hy-event-item.cjs.entry.js.map

package/dist/cjs/hy-event-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-event-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,04PAA04P;;MCOp5P,WAAW;;;;4BAGa,EAAE;qBACT,EAAE;oBACH,EAAE;oBACF,EAAE;;;qBAGA,KAAK;yBACF,WAAW;kBAEhB,KAAK;;EAEhC,gBAAgB;IACd,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC;IACrB,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,IAAI,CAAC,YAAY,GAAG,GAAG,EAAE;QAC3B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;OACpB;KACF;GACF;EAED,MAAM;IACJ,MAAM,gBAAgB,GAAG;MACvB,iBAAiB;MACjB,IAAI,CAAC,SAAS,GAAG,uBAAuB,GAAG,uBAAuB;MAClE,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,EAAE;KAC7B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,QACEA,eAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAC,QAAQ,IACzDA,iBAAK,KAAK,EAAC,4BAA4B,IACrCA,iBAAK,KAAK,EAAC,gCAAgC,IACzCA,kBAAM,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,SAAS,CAAQ,EACjE,IAAI,CAAC,MAAM,KACVA,kBAAM,KAAK,EAAC,yBAAyB,IACnCA,qBAAS,IAAI,EAAC,oBAAoB,EAAC,IAAI,EAAE,EAAE,GAAY,CAClD,CACR,CACG,EACNA,iBAAK,KAAK,EAAC,0BAA0B,IACnCA,iBAAK,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,UAAU,CAAO,EAC3DA,iBAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,QAAQ,KACZA,iBAAK,KAAK,EAAC,yDAAyD,IAClEA,qBAAS,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAE,EAAE,GAAY,EAClD,IAAI,CAAC,QAAQ,CACV,CACP,EACA,IAAI,CAAC,QAAQ,KACZA,iBAAK,KAAK,EAAC,uDAAuD,IAChEA,qBAAS,IAAI,EAAC,kBAAkB,EAAC,IAAI,EAAE,EAAE,GAAY,EACpD,IAAI,CAAC,QAAQ,CACV,CACP,EACA,IAAI,CAAC,IAAI,KACRA,iBAAK,KAAK,EAAC,mDAAmD,IAC5DA,qBAAS,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAE,EAAE,GAAY,EAClD,IAAI,CAAC,IAAI,CACN,CACP,EACDA,kBAAM,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,aAAa,CAAQ,CAChE,CACF,EACNA,kBAAM,KAAK,EAAC,2BAA2B,iBAAa,MAAM,IACxDA,qBAAS,IAAI,EAAC,qBAAqB,EAAC,IAAI,EAAE,EAAE,GAAY,CACnD,CACH,CACJ,EACJ;GACH;;;;;;;","names":["h"],"sources":["./src/components/hy-event-item/hy-event-item.scss?tag=hy-event-item","./src/components/hy-event-item/hy-event-item.tsx"],"sourcesContent":[".hy-events__item {\n  display: flex;\n  border: 1px solid #d8d8d8;\n  padding: 13px 16px;\n  position: relative;\n  text-decoration: none;\n  flex-direction: column;\n  white-space: initial;\n  margin-bottom: 1rem;\n\n  @include breakpoint($medium) {\n    flex-direction: row;\n    padding: 47px;\n    margin-bottom: 1.75rem;\n  }\n\n  &:not(.hy-events__item--grid) .hy-events__item--container {\n    @include breakpoint($medium) {\n      display: flex;\n    }\n  }\n\n  &:hover {\n    .hy-events__item__title {\n      color: var(--brand-main);\n      text-decoration: underline;\n    }\n\n    .hy-events__item__date--short,\n    .hy-events__item__url-icon {\n      background-color: var(--brand-main-active);\n    }\n  }\n\n  &__title {\n    @include font-size(18px, 24px);\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 6;\n    color: var(--grayscale-black);\n    display: -webkit-box;\n    font-family: var(--main-font-family);\n    font-weight: 700;\n    letter-spacing: -0.36px;\n    line-clamp: 6;\n    margin-bottom: 16px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    @include breakpoint($medium) {\n      @include font-size(22px, 28px);\n\n      font-weight: 700;\n      font-size: 22px;\n      line-height: 28px;\n      letter-spacing: -0.44px;\n      margin-bottom: 14px;\n    }\n  }\n\n  &__details {\n    font-family: var(--main-font-family);\n    font-style: normal;\n    font-weight: 400;\n    font-size: 17px;\n    line-height: 26px;\n    color: var(--grayscale-black);\n  }\n\n  &__meta {\n    display: flex;\n    flex-direction: column;\n\n    @include breakpoint($medium) {\n      flex-direction: row;\n    }\n\n    &--item {\n      @include font-size(15px, 22px);\n      align-items: flex-start;\n      display: flex;\n      flex-direction: row;\n      margin-right: 0px;\n      margin-bottom: 9px;\n      font-family: var(--main-font-family);\n      font-weight: 400;\n      word-break: break-word;\n\n      @include breakpoint($medium) {\n        @include font-size(17px, 26px);\n        align-items: flex-start;\n        margin-right: 35px;\n        margin-bottom: 0;\n        font-weight: 400;\n      }\n\n      svg {\n        width: 20px;\n        height: 20px;\n        margin-right: 9px;\n        margin-top: 2px;\n\n        @include breakpoint($medium) {\n          margin-top: 1px;\n        }\n      }\n    }\n  }\n\n  &__date--short {\n    @include font-size(15px, 18px);\n    display: flex;\n    color: var(--grayscale-white);\n    background: var(--brand-main-light);\n    font-family: var(--main-font-family);\n    font-style: normal;\n    font-weight: 700;\n    padding: 6px 8px;\n    width: fit-content;\n    text-align: center;\n    letter-spacing: -0.28125px;\n    text-decoration: none;\n    margin-bottom: 20px;\n    margin-right: 0;\n\n    @include breakpoint($medium) {\n      @include font-size(17px, 20px);\n      letter-spacing: -0.31875px;\n      padding: 0;\n      height: 68px;\n      width: 68px;\n      justify-content: center;\n      align-items: center;\n      margin-right: 47px;\n      margin-bottom: 0;\n    }\n  }\n\n  &__url-icon {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    background: var(--brand-main-light);\n    color: var(--grayscale-white);\n    width: 32px;\n    height: 32px;\n    bottom: 16px;\n    right: -9px;\n    z-index: 1;\n\n    @include breakpoint($medium) {\n      display: flex;\n    }\n\n    svg {\n      fill: currentColor;\n    }\n  }\n\n  &__read-more {\n    @include font-size(15px, 18px);\n    color: var(--brand-main-light);\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    letter-spacing: -0.28125px;\n    margin-top: 10px;\n\n    @include breakpoint($medium) {\n      display: none;\n    }\n  }\n\n  &--grid {\n    padding: 1rem;\n    flex-direction: column;\n    min-width: 280px;\n    max-width: 100%;\n    min-height: 255px;\n    position: relative;\n    margin-bottom: 0;\n\n    @include breakpoint($medium) {\n      max-width: 280px;\n      padding: 1rem 1rem 0 1rem;\n    }\n\n    &.is-long {\n      max-height: 100%;\n\n      @include breakpoint($medium) {\n        max-height: 255px;\n      }\n\n      &::after {\n        display: none;\n        content: '';\n        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 36px;\n\n        @include breakpoint($medium) {\n          display: block;\n        }\n      }\n\n      .hy-events__item--container {\n        overflow: visible;\n\n        @include breakpoint($medium) {\n          overflow: hidden;\n        }\n      }\n\n      &:hover,\n      &:focus {\n        @include breakpoint($medium) {\n          border: 0;\n        }\n\n        &::after,\n        .hy-events__item--toggle {\n          display: none;\n        }\n\n        .hy-events__item--container {\n          @include breakpoint($medium) {\n            background-color: white;\n            border: 1px solid #d8d8d8;\n            padding: 16px 16px;\n            position: absolute;\n            top: 0;\n            left: 0;\n            min-height: 255px;\n            overflow: visible;\n          }\n        }\n      }\n    }\n\n    .hy-events__item__title {\n      @include font-size(18px, 24px);\n      letter-spacing: -0.36px;\n    }\n\n    .hy-events__item--toggle {\n      display: none;\n      align-items: center;\n      justify-content: center;\n      background: #d7d7d7;\n      border-radius: 50%;\n      position: absolute;\n      top: 16px;\n      right: 16px;\n      width: 24px;\n      height: 24px;\n\n      @include breakpoint($medium) {\n        display: flex;\n      }\n    }\n\n    .hy-events__item__meta {\n      flex-direction: column;\n      gap: 9px;\n\n      &--item {\n        @include font-size(15px, 22px);\n      }\n    }\n\n    .hy-events__item__date--short {\n      padding: 6px;\n\n      @include breakpoint($medium) {\n        @include font-size(15px, 18px);\n        width: fit-content;\n        height: auto;\n        font-weight: 700;\n        letter-spacing: -0.28125px;\n        margin-bottom: 18px;\n      }\n    }\n  }\n}\n","import {Component, Element, h, Prop, State} from '@stencil/core';\n\n@Component({\n  tag: 'hy-event-item',\n  styleUrl: 'hy-event-item.scss',\n  shadow: false,\n})\nexport class HyEventItem {\n  @Element() el: HTMLElement;\n  @Prop() eventTitle?: string;\n  @Prop() eventDescription: string = '';\n  @Prop() dateShort: string = '';\n  @Prop() dateLong: string = '';\n  @Prop() location: string = '';\n  @Prop() type: string;\n  @Prop() url: string;\n  @Prop() styleGrid: boolean = false;\n  @Prop() readMoreLabel: string = 'Read more';\n\n  @State() isLong: boolean = false;\n\n  componentDidLoad() {\n    const link = this.el;\n    if (this.styleGrid) {\n      if (link.clientHeight > 255) {\n        this.isLong = true;\n      }\n    }\n  }\n\n  render() {\n    const containerClasses = [\n      'hy-events__item',\n      this.styleGrid ? 'hy-events__item--grid' : 'hy-events__item--list',\n      this.isLong ? 'is-long' : '',\n    ].join(' ');\n\n    return (\n      <a href={this.url} class={containerClasses} target=\"_blank\">\n        <div class=\"hy-events__item--container\">\n          <div class=\"hy-events__item__top-container\">\n            <span class=\"hy-events__item__date--short\">{this.dateShort}</span>\n            {this.isLong && (\n              <span class=\"hy-events__item--toggle\">\n                <hy-icon icon=\"hy-icon-caret-down\" size={10}></hy-icon>\n              </span>\n            )}\n          </div>\n          <div class=\"hy-events__item__details\">\n            <div class=\"hy-events__item__title\">{this.eventTitle}</div>\n            <div class=\"hy-events__item__meta\">\n              {this.dateLong && (\n                <div class=\"hy-events__item__meta--item hy-events__item__date--long\">\n                  <hy-icon icon=\"hy-icon-events\" size={18}></hy-icon>\n                  {this.dateLong}\n                </div>\n              )}\n              {this.location && (\n                <div class=\"hy-events__item__meta--item hy-events__item__location\">\n                  <hy-icon icon=\"hy-icon-location\" size={18}></hy-icon>\n                  {this.location}\n                </div>\n              )}\n              {this.type && (\n                <div class=\"hy-events__item__meta--item hy-events__item__type\">\n                  <hy-icon icon=\"hy-icon-people\" size={18}></hy-icon>\n                  {this.type}\n                </div>\n              )}\n              <span class=\"hy-events__item__read-more\">{this.readMoreLabel}</span>\n            </div>\n          </div>\n          <span class=\"hy-events__item__url-icon\" aria-hidden=\"true\">\n            <hy-icon icon=\"hy-icon-arrow-right\" size={18}></hy-icon>\n          </span>\n        </div>\n      </a>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/hy-events.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-dfc917d9.js');
+const index = require('./index-25bd964b.js');
 const utils = require('./utils-14d5aa6f.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)}";
@@ -10,11 +10,13 @@ const hyEventsCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--bran
 let scrollTimeout = null;
 let checkTimeout = null;
 let itemWidth = 280 + 24;
-let HyEvents = class {
+const HyEvents = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     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;
@@ -94,3 +96,5 @@ let HyEvents = class {
 HyEvents.style = hyEventsCss;
 
 exports.hy_events = HyEvents;
+
+//# sourceMappingURL=hy-events.cjs.entry.js.map

package/dist/cjs/hy-events.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-events.entry.cjs.js","mappings":"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","names":["h","CtaLinkVariants"],"sources":["./src/components/hy-events/hy-events.scss?tag=hy-events","./src/components/hy-events/hy-events.tsx"],"sourcesContent":["hy-events {\n  &.no-events {\n    .hy-events__no-result-container {\n      font-family: var(--main-font-family);\n    }\n\n    .hy-events--wrapper .hy-events--grid {\n      padding-bottom: 0;\n    }\n\n    .hy-events__footer {\n      display: none;\n    }\n  }\n}\n\n.hy-events--wrapper {\n  .hy-events {\n    display: flex;\n    flex-direction: column;\n\n    &--grid {\n      flex-direction: column;\n      gap: 1.5rem;\n      overflow-x: hidden;\n      white-space: nowrap;\n      scrollbar-width: none;\n\n      @include breakpoint($medium) {\n        padding-bottom: 14rem;\n      }\n\n      .hy-events__content {\n        display: flex;\n        flex-direction: column;\n        gap: 24px;\n        order: -1;\n\n        @include breakpoint($medium) {\n          flex-direction: row;\n        }\n      }\n    }\n  }\n\n  .hy-events__footer {\n    align-items: flex-end;\n    display: flex;\n    flex-direction: row-reverse;\n    justify-content: space-between;\n    margin-bottom: 2rem;\n\n    &--grid {\n      flex-direction: row;\n      margin-top: 1.5rem;\n\n      @include breakpoint($medium) {\n        margin-top: -9.5rem;\n      }\n    }\n  }\n\n  .hy-events__scroll-buttons {\n    display: none;\n    margin-top: 2rem;\n\n    @include breakpoint($medium) {\n      display: flex;\n    }\n\n    button {\n      border: none;\n      background: none;\n      padding: 0.5rem;\n\n      &:hover {\n        cursor: pointer;\n\n        svg {\n          scale: 1.1;\n        }\n      }\n\n      &.is-hidden {\n        display: none;\n      }\n\n      &.is-disabled {\n        pointer-events: none;\n\n        svg {\n          fill: var(--link-disabled);\n        }\n      }\n    }\n  }\n}\n","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"],"version":3}