@itcenteratunihelsinki/huds-lib 0.8.42 → 0.8.44

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

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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}