@itcenteratunihelsinki/huds-lib 0.8.72 → 0.8.74

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

@@ -1 +0,0 @@
-{"file":"hy-dropdown.entry.cjs.js","mappings":"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","names":["jsonParserWorker","h","Host","index"],"sources":["./src/components/hy-dropdown/hy-dropdown.scss?tag=hy-dropdown","./src/components/hy-dropdown/hy-dropdown.tsx"],"sourcesContent":[".hy-dropdown {\n  display: inline-block;\n  min-width: 100%;\n  position: relative;\n\n  @include breakpoint($narrow) {\n    min-width: 48.3%;\n  }\n\n  @include breakpoint($extrawide) {\n    min-width: 23.03%;\n  }\n\n  label.hy-dropdown__button-label {\n    @include font-size(16px, 20px);\n    @include font-weight($bold);\n\n    display: block;\n    font-family: var(--main-font-family);\n    letter-spacing: -0.32px;\n    margin-bottom: 8px;\n  }\n\n  &--single {\n    .hy-dropdown__panel {\n      width: max-content;\n      max-width: 330px;\n      min-width: 100%;\n    }\n  }\n\n  .hy-dropdown__hidden-input {\n    display: none;\n    height: 0;\n    font-size: 0;\n  }\n}\n\n.hy-dropdown__toggle {\n  @include font-size(14px, 24px);\n  align-items: center;\n  background-color: var(--grayscale-white);\n  border-radius: 0;\n  border: 1px solid var(--grayscale-medium-dark);\n  color: var(--link-blue);\n  display: inline-flex;\n  font-family: var(--main-font-family);\n  font-weight: $semibold;\n  min-height: 40px;\n  height: auto;\n  justify-content: space-between;\n  letter-spacing: normal;\n  padding: 0 0 0 16px;\n  text-align: left;\n  max-width: 280px;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 24px);\n    min-height: 44px;\n  }\n\n  @include breakpoint($extrawide) {\n    min-height: 48px;\n  }\n\n  &:hover {\n    border-color: var(--brand-main-light);\n    cursor: pointer;\n  }\n\n  &:focus {\n    border-color: var(--brand-main-light);\n    border-style: solid inset solid solid;\n    border-width: 2px;\n    outline: 0;\n    text-indent: -1px; // Text stays in place.\n  }\n\n  svg {\n    pointer-events: none;\n  }\n\n  &.is-open {\n    .hy-dropdown__icon {\n      background-color: var(--brand-main-light);\n      transform: rotate(180deg);\n\n      &::before {\n        display: none;\n      }\n\n      svg {\n        fill: var(--grayscale-white);\n      }\n    }\n  }\n}\n\n.hy-dropdown__icon {\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  height: 40px;\n  justify-content: center;\n  margin: 0 0 0 16px;\n  position: relative;\n  width: 40px;\n\n  &::before {\n    //border-left: 1px dashed var(--grayscale-medium-dark);\n    //Line weight 0,5 px; Line color #979797\n    border-left: 0.5px solid var(--grayscale-medium-dark);\n    content: \"\";\n    display: inline-block;\n    height: 65%;\n    left: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  @include breakpoint($narrow) {\n    height: 44px;\n    width: 44px;\n  }\n\n  @include breakpoint($extrawide) {\n    height: 48px;\n    width: 48px;\n  }\n\n  svg {\n    fill: var(--link-blue);\n\n    @include breakpoint($narrow) {\n      height: 16px;\n      width: 16px;\n    }\n  }\n}\n\n.hy-dropdown__panel {\n  background-color: var(--grayscale-white);\n  box-shadow: 0 10px 20px 0 rgba(0, 49, 70, 0.2);\n  list-style: none;\n  margin: 0;\n  padding: 6px;\n  position: absolute;\n  width: 100%;\n  z-index: 11;\n\n  &.is-hidden {\n    display: none;\n    visibility: hidden;\n  }\n}\n\n.hy-dropdown__panel-item {\n  @include font-size(14px, 24px);\n  align-items: center;\n  background-color: var(--grayscale-white);\n  border-radius: 0;\n  border: 1px solid var(--grayscale-medium-dark);\n  color: var(--link-blue);\n  display: inline-flex;\n  font-family: var(--main-font-family);\n  font-weight: $semibold;\n  min-height: 40px;\n  justify-content: space-between;\n  letter-spacing: normal;\n  position: relative;\n  padding: 0;\n  text-align: left;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 24px);\n  }\n\n  &:not(.is-last) {\n    margin-bottom: 6px;\n  }\n\n  &[aria-selected=\"true\"] .hy-dropdown__checkbox {\n    border-color: var(--grayscale-black);\n    border-style: solid inset solid solid;\n    border-width: 2px;\n    color: var(--grayscale-black);\n    outline: 0;\n    text-indent: -1px; // Text stays in place.\n\n    .hy-dropdown__label-icon {\n      display: inline-flex !important;\n      visibility: visible;\n    }\n  }\n\n  &--focused {\n    cursor: pointer;\n    border-color: var(--brand-main-light);\n    border-style: solid inset solid solid;\n    border-width: 2px;\n    outline: 0;\n    text-indent: -1px; // Text stays in place.\n  }\n}\n\n.hy-dropdown__label-icon {\n  align-items: center;\n  display: none !important;\n  flex-shrink: 0;\n  height: 40px;\n  justify-content: center;\n  position: relative;\n  visibility: hidden;\n  width: 40px;\n}\n\n.hy-dropdown__checkbox {\n  display: flex;\n  align-items: center;\n  min-height: 40px;\n  height: 100%;\n  margin: 0;\n  padding: 0 16px;\n  width: 100%;\n  z-index: 10;\n\n  &:hover {\n    cursor: pointer;\n    border-color: var(--brand-main-active);\n  }\n\n  &:focus-within {\n    & {\n      border-color: var(--brand-main-light);\n      border-style: solid inset solid solid;\n      border-width: 2px;\n      outline: 0;\n      text-indent: -1px; // Text stays in place.\n    }\n  }\n}\n","import {Component, Element, Host, Listen, Event, EventEmitter, h, State, Prop, Watch} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\nexport interface IDropdownItem {\n  id: string | number;\n  label: string;\n  value: string | number;\n}\n\nexport interface DefaultValue {\n  id: string | number;\n  label: string;\n  value: string | number;\n}\n\n@Component({\n  tag: \"hy-dropdown\",\n  styleUrl: \"hy-dropdown.scss\",\n  shadow: false,\n})\nexport class HyDropdown {\n  private _dropdownOptions: IDropdownItem[];\n  @Element() el: HTMLElement;\n  @Prop() single: boolean = false;\n  @Prop() dropdownLabel: string = null;\n  @Prop() dropdownId: string = \"dropdownToggle\";\n  @Prop() dropdownOptions: IDropdownItem[] | string;\n  @Prop() defaultLabel: string = \"All\";\n  @Prop() type: string = null;\n  @Prop({mutable: true}) defaultOption: string | number = null;\n  @State() isPanelOpen: boolean = false;\n  @State() isChecked: boolean = false;\n  @State() currentSingle: DefaultValue[] = [{id: 0, label: this.defaultLabel, value: 0}];\n  @State() currentMulti: IDropdownItem[];\n\n  @State() focusedOptionIndex: number = 0;\n\n  @Event({\n    eventName: `dropdownPanelToggled`,\n    composed: true,\n    bubbles: true,\n  })\n  dropdownPanelToggled: EventEmitter;\n\n  @Event({\n    eventName: `dropdownValueChanged`,\n    composed: true,\n  })\n  dropdropValueChange: EventEmitter;\n\n  @Event({\n    eventName: `dropdownMultiValueChanged`,\n    composed: true,\n  })\n  dropdropMultiValueChange: EventEmitter;\n\n  @Event({\n    eventName: `dropdownKeyPress`,\n    composed: true,\n  })\n  dropdownKeyPress: EventEmitter;\n\n  async componentWillLoad() {\n    this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);\n  }\n\n  componentWillUpdate() {\n    const items = this.el.querySelectorAll(\".hy-dropdown__checkbox\") as any;\n    if (items) {\n      if ([...items].some((item) => item.checked == true)) {\n        this.isChecked = true;\n      } else {\n        this.isChecked = false;\n      }\n    }\n  }\n\n  @Watch(\"defaultOption\")\n  watchPropHandler(newValue: string | number, oldValue: string | number) {\n    if (!this.single) return;\n\n    if (newValue !== oldValue) {\n      const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n        HTMLInputElement\n      >;\n\n      Array.from(dropdownPanelCheckboxElements).filter((item) => {\n        if (item.id == newValue) {\n          item.checked = true;\n          this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue) as any;\n          return;\n        }\n        return null;\n      });\n    }\n  }\n\n  @Listen(\"dropdownPanelToggled\", {target: \"window\"})\n  panelListener(e) {\n    if (this.isPanelOpen && e.detail.dropdownId !== this.dropdownId) {\n      this.isPanelOpen = false;\n    }\n  }\n\n  private handleMultiClick(event, option) {\n    event.stopPropagation();\n    const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n      HTMLInputElement\n    >;\n    Array.from(dropdownPanelCheckboxElements).filter((i) => {\n      const item = i.closest(\"li\");\n      if (item.dataset.id == option.id && !item.hasAttribute(\"aria-selected\")) {\n        item.setAttribute(\"aria-selected\", \"true\");\n        this.currentMulti =\n          this.currentMulti && this.currentMulti.length > 0 ? [...this.currentMulti, option] : [option];\n        return;\n      }\n      if (item.dataset.id === option.id && item.hasAttribute(\"aria-selected\")) {\n        item.removeAttribute(\"aria-selected\");\n        if (this.currentMulti.length > 0) {\n          const index = this.currentMulti.indexOf(option);\n          this.currentMulti = this.currentMulti.splice(index, 1);\n        }\n        return;\n      }\n      return null;\n    });\n  }\n\n  private handleSingleClick(event, option) {\n    if (!this.single || !this.isPanelOpen) return;\n    const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n      HTMLInputElement\n    >;\n    event.stopPropagation();\n\n    Array.from(dropdownPanelCheckboxElements).filter((i) => {\n      const item = i.closest(\"li\");\n      if (item.dataset.id == option.id) {\n        if (item.hasAttribute(\"aria-selected\")) {\n          item.removeAttribute(\"aria-selected\");\n          this.currentSingle = [{id: null, label: this.defaultLabel, value: null}];\n          return;\n        }\n        item.setAttribute(\"aria-selected\", \"true\");\n        this.currentSingle = this._dropdownOptions.filter((o) => o.id == option.id) as any;\n        return;\n      }\n      if (item.dataset.id !== option.id && item.hasAttribute(\"aria-selected\")) {\n        item.removeAttribute(\"aria-selected\");\n        return;\n      }\n      return null;\n    });\n  }\n\n  @Listen(\"keydown\", {capture: false})\n  handleKeyDown(event: KeyboardEvent) {\n    event.stopPropagation();\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        if (!this.isPanelOpen) {\n          this.handlePanelToggle(event);\n          return;\n        }\n        this.focusedOptionIndex = (this.focusedOptionIndex + 1) % this._dropdownOptions.length;\n        break;\n      case \"ArrowUp\":\n        this.focusedOptionIndex =\n          (this.focusedOptionIndex - 1 + this._dropdownOptions.length) % this._dropdownOptions.length;\n        event.preventDefault();\n        break;\n      case \"Enter\":\n      case \" \":\n        if (!this.isPanelOpen) {\n          event.preventDefault();\n          this.handlePanelToggle(event);\n          return;\n        }\n        if (this.single) {\n          this.handleOptionSingleClick(event, this._dropdownOptions[this.focusedOptionIndex]);\n        } else {\n          this.handleMultiOptionClick(event, this._dropdownOptions[this.focusedOptionIndex]);\n        }\n        const emitDetails = {\n          id: this.dropdownId,\n          type: this.type,\n          data: this._dropdownOptions[this.focusedOptionIndex],\n        };\n        this.dropdownKeyPress.emit(emitDetails);\n        event.preventDefault();\n        break;\n      case \"Escape\":\n      case \"Tab\":\n        this.isPanelOpen = false;\n        break;\n      default:\n        break;\n    }\n  }\n\n  private handlePanelToggle(e) {\n    e.stopPropagation();\n    this.isPanelOpen = !this.isPanelOpen;\n\n    const emitDetails = {\n      dropdownId: this.dropdownId,\n      panelOpen: this.isPanelOpen,\n    };\n    this.dropdownPanelToggled.emit(emitDetails);\n  }\n\n  @Listen(\"click\", {target: \"window\"})\n  handlePanelClickOutside(e) {\n    e.stopPropagation();\n    const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`) as HTMLButtonElement;\n    const dropdownPanelElement = this.el.querySelector(\".hy-dropdown__panel\") as HTMLElement;\n    const dropdownPanelCheckboxElements = this.el.querySelectorAll(\".hy-dropdown__panel-item\");\n    const dropdownPanelCheckboxes = this.el.querySelectorAll(\".hy-dropdown__checkbox\");\n    const dropdownToggleButtonIconElement = this.el.querySelectorAll(\".hy-dropdown__icon\");\n\n    const {target} = e;\n\n    const allowedElements = [\n      this.el,\n      dropdownToggleButtonElement,\n      dropdownPanelElement,\n      ...dropdownPanelCheckboxes,\n      dropdownToggleButtonIconElement,\n      ...dropdownPanelCheckboxElements, // Spread (\"copy\") items to allowedElement array.\n    ];\n\n    if (this.isPanelOpen && !allowedElements.includes(target)) {\n      this.isPanelOpen = false;\n    }\n  }\n\n  private handleOptionSingleClick(event, option) {\n    event.stopPropagation();\n    this.handleSingleClick(event, option);\n    const emitDetails = {\n      id: this.dropdownId,\n      type: this.type,\n      data: option,\n    };\n    this.dropdropValueChange.emit(emitDetails);\n  }\n\n  private handleMultiOptionClick(event, option) {\n    event.stopPropagation();\n    this.handleMultiClick(event, option);\n    const emitDetails = {\n      id: this.dropdownId,\n      type: this.type,\n      data: this.currentMulti,\n    };\n    this.dropdropMultiValueChange.emit(emitDetails);\n  }\n\n  private handleOptionHover(index) {\n    this.focusedOptionIndex = index;\n  }\n\n  render() {\n    const {label: currentLabel, id: currentId, value: currentValue} = this.currentSingle[0];\n    const classAttributes = [\"hy-dropdown\", this.single ? \"hy-dropdown--single\" : \"\"].join(\" \");\n    if (this.single) {\n      return (\n        <Host class={classAttributes}>\n          {this.dropdownLabel && (\n            <label class=\"hy-dropdown__button-label\" htmlFor={this.dropdownId}>\n              {this.dropdownLabel}\n            </label>\n          )}\n          <div\n            id={this.dropdownId}\n            class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n            aria-expanded={`${this.isPanelOpen || false}`}\n            aria-controls=\"dropdownPanel\"\n            aria-haspopup=\"listbox\"\n            role=\"combobox\"\n            onClick={(event) => this.handlePanelToggle(event)}\n            onKeyDown={(event) => this.handleKeyDown(event)}\n            aria-label={this.dropdownLabel}\n            data-current-id={currentId}\n            data-current-value={currentValue}\n            data-value={currentId}\n            tabIndex={0}\n          >\n            <input aria-hidden=\"true\" class=\"hy-dropdown__hidden-input\" type=\"hidden\" value={currentId}></input>\n            {currentLabel}\n            <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n          </div>\n          <ul\n            checkbox-checked={this.isChecked ? \"true\" : \"false\"}\n            id=\"dropdownPanel\"\n            class={`hy-dropdown__panel ${!this.isPanelOpen ? \"is-hidden\" : \"\"}`}\n            aria-expanded={`${!this.isPanelOpen || false}`}\n            role=\"listbox\"\n            aria-labelledby=\"dropdownToggle\"\n          >\n            {this._dropdownOptions.map(({id, label, value}, index, items) => (\n              <li\n                key={id}\n                data-id={`${id}`}\n                role=\"option\"\n                class={`hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? \"is-last\" : \"\"}\n                  ${this.focusedOptionIndex === index ? \"hy-dropdown__panel-item--focused\" : \"\"}`}\n                onClick={(event) => this.handleOptionSingleClick(event, items[index])}\n                onMouseEnter={() => this.handleOptionHover(index)}\n              >\n                <span data-id={`${id}`} class=\"hy-dropdown__checkbox\" data-value={`${value}`}>\n                  {label}\n                  <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n                </span>\n              </li>\n            ))}\n          </ul>\n        </Host>\n      );\n    } else {\n      return (\n        <Host class={classAttributes}>\n          <button\n            id={this.dropdownId}\n            class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n            aria-expanded={`${this.isPanelOpen || false}`}\n            aria-controls=\"dropdownPanel\"\n            aria-haspopup=\"listbox\"\n            role=\"combobox\"\n            onClick={(event) => this.handlePanelToggle(event)}\n            aria-label={this.dropdownLabel}\n            type=\"button\"\n          >\n            {this.dropdownLabel && this.dropdownLabel}\n            <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n          </button>\n          <ul\n            checkbox-checked={this.isChecked ? \"true\" : \"false\"}\n            id=\"dropdownPanel\"\n            class={`hy-dropdown__panel ${!this.isPanelOpen ? \"is-hidden\" : \"\"}`}\n            aria-expanded={`${!this.isPanelOpen || false}`}\n            role=\"listbox\"\n            aria-labelledby=\"dropdownToggle\"\n          >\n            {this._dropdownOptions.map(({id, label, value}, index, items) => (\n              <li\n                key={id}\n                data-id={`${id}`}\n                role=\"option\"\n                class={`hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? \"is-last\" : \"\"}\n                  ${this.focusedOptionIndex === index ? \"hy-dropdown__panel-item--focused\" : \"\"}`}\n                onClick={(event) => this.handleMultiOptionClick(event, items[index])}\n                onMouseEnter={() => this.handleOptionHover(index)}\n              >\n                <span data-id={`${id}`} class=\"hy-dropdown__checkbox\" data-value={`${value}`}>\n                  {label}\n                  <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n                </span>\n              </li>\n            ))}\n          </ul>\n        </Host>\n      );\n    }\n  }\n}\n"],"version":3}

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}

package/dist/cjs/hy-filter-group_6.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"hy-filter-group.hy-filter-group-item.hy-filter-list-type.hy-filter-visibility-tool.hy-filter-visibility-tool-reset.hy-filter-visibility-tool-toggle.entry.cjs.js","mappings":"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","names":["h","Host","ColorVariant","ListStyleVariants"],"sources":["./src/components/hy-filter-group/hy-filter-group.scss?tag=hy-filter-group","./src/components/hy-filter-group/hy-filter-group.tsx","./src/components/hy-filter-group/hy-filter-group.item.tsx","./src/components/hy-filter-list-type/hy-filter-list-type.scss?tag=hy-filter-list-type","./src/components/hy-filter-list-type/hy-filter-list-type.tsx","./src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.scss?tag=hy-filter-visibility-tool","./src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.tsx","./src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.reset.tsx","./src/components/hy-filter-visibility-tool/hy-filter-visibility-tool.reset.toggle.tsx"],"sourcesContent":[".hy-filter-group {\n  align-items: center;\n  display: inline-flex;\n  flex-wrap: wrap;\n  margin-right: 16px;\n}\n\n.hy-filter-group__listing {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.hy-filter-group__label {\n  @include font-size(12px, 16px);\n  border-radius: 2px;\n  color: var(--grayscale-dark);\n  font-family: var(--main-font-family);\n  font-weight: normal;\n  letter-spacing: -0.2px;\n  margin: 8px 4px 8px 0;\n  padding: 4px 0;\n\n  @include breakpoint($narrow) {\n    @include font-size(14px, 16px);\n    letter-spacing: -0.3px;\n    padding: 6px 0;\n  }\n}\n\n.hy-filter-group__button {\n  @include font-size(12px, 16px);\n  align-items: center;\n  background-color: var(--grayscale-background-box);\n  border-radius: 2px;\n  border: 0;\n  color: var(--grayscale-dark);\n  display: inline-flex;\n  font-family: var(--main-font-family);\n  font-weight: normal;\n  letter-spacing: -0.2px;\n  margin: 8px 4px;\n  padding: 4px 6px;\n\n  @include breakpoint($narrow) {\n    @include font-size(14px, 16px);\n    letter-spacing: -0.3px;\n    padding: 6px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n}\n\n.hy-filter-group__button-icon {\n  margin-left: 6px;\n\n  @include breakpoint($narrow) {\n    margin-left: 8px;\n  }\n\n  svg {\n    pointer-events: none;\n\n    @include breakpoint($narrow) {\n      height: 12px;\n      width: 12px;\n    }\n  }\n}\n\n.hy-filter-group__divider {\n  @include font-size(12px, 16px);\n  color: var(--grayscale-dark);\n  font-family: var(--main-font-family);\n  margin: 4px 6px;\n\n  @include breakpoint($narrow) {\n    @include font-size(14px, 16px);\n    letter-spacing: -0.3px;\n  }\n}\n","import {Component, Host, h, Prop, Watch} from \"@stencil/core\";\n\nexport interface IFilterGroupFilter {\n  id: string | number;\n  label: string;\n}\n\n@Component({\n  tag: \"hy-filter-group\",\n  styleUrl: \"hy-filter-group.scss\",\n  shadow: false,\n})\nexport class HyFilterGroup {\n  private _filterGroupFilters: IFilterGroupFilter[];\n  @Prop() filterGroupLabel: string;\n  @Prop() filterGroupFilters: IFilterGroupFilter[] | string;\n\n  @Watch(\"filterGroupFilters\")\n  arrayDataWatcher(newValue: IFilterGroupFilter[] | string) {\n    if (typeof newValue === \"string\") {\n      this._filterGroupFilters = JSON.parse(newValue);\n    } else {\n      this._filterGroupFilters = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    this.arrayDataWatcher(this.filterGroupFilters);\n  }\n\n  // TODO: Finish handleFilterDeselect functionality with real data.\n  handleFilterDeselect(id) {\n    console.log(id);\n  }\n\n  render() {\n    return (\n      <Host class=\"hy-filter-group\">\n        <ul class=\"hy-filter-group__listing\">\n          <li>\n            <h3 class=\"hy-filter-group__label\">{this.filterGroupLabel}</h3>\n          </li>\n          {this._filterGroupFilters.map(({id, label}) => (\n            <hy-filter-group-item\n              filter-group-item-id={id}\n              filter-group-item-label={label}\n              onClick={() => this.handleFilterDeselect(id)}\n            ></hy-filter-group-item>\n          ))}\n        </ul>\n      </Host>\n    );\n  }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {ColorVariant} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-filter-group-item\",\n  shadow: false,\n})\nexport class HyFilterGroupItem {\n  @Prop() filterGroupItemId: string | number;\n  @Prop() filterGroupItemLabel: string;\n\n  render() {\n    return (\n      <li class=\"hy-filter-group__filter\">\n        <button type=\"button\" class=\"hy-filter-group__button\" aria-label={`Deselect ${this.filterGroupItemLabel}`}>\n          {this.filterGroupItemLabel}\n          <hy-icon\n            class=\"hy-filter-group__button-icon\"\n            icon={\"hy-icon-remove\"}\n            size={10}\n            aria-hidden=\"true\"\n            fill={ColorVariant.grey_dark}\n          />\n        </button>\n        <slot />\n      </li>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.hy-filter__list-type {\n  display: none;\n\n  @include breakpoint($wide) {\n    display: flex;\n    align-items: center;\n    font-family: var(--main-font-family);\n  }\n\n  span {\n    @include breakpoint($wide) {\n      @include font-size(14px, 18px);\n      @include font-weight($semibold);\n      color: var(--grayscale-black);\n      letter-spacing: -0.5px;\n      text-align: right;\n    }\n    @include breakpoint($xlarge) {\n      @include font-size(16px, 20px);\n    }\n  }\n\n  &__list {\n    background: var(--grayscale-background-box);\n    border: none;\n    margin: 0 8px;\n    padding: 10px;\n\n    svg {\n      background-color: var(--grayscale-background-box);\n      fill: var(--brand-main-light);\n    }\n    &.is-active {\n      background: white;\n      border: black 1px solid;\n\n      svg {\n        background-color: var(--grayscale-white);\n        fill: var(--grayscale-black);\n      }\n    }\n  }\n  &__list:hover {\n    cursor: pointer;\n  }\n\n  &__grid {\n    background: var(--grayscale-background-box);\n    border: none;\n    padding: 10px;\n\n    svg {\n      background-color: var(--grayscale-background-box);\n      fill: var(--brand-main-light);\n    }\n\n    &.is-active {\n      background: white;\n      border: black 1px solid;\n\n      svg {\n        background-color: var(--grayscale-white);\n        fill: var(--grayscale-black);\n      }\n    }\n  }\n\n  &__grid:hover {\n    cursor: pointer;\n  }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {ListStyleVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-filter-list-type\",\n  styleUrl: \"hy-filter-list-type.scss\",\n  shadow: false,\n})\nexport class HyFilterListType {\n  @Prop() filterLabel?: string;\n  @Prop() filterValue?: string;\n\n  render() {\n    return (\n      <div class=\"hy-filter__list-type\">\n        <span>{this.filterLabel}</span>\n        <button\n          type=\"button\"\n          class={{\n            \"hy-filter-item\": true,\n            \"hy-filter__list-type__list\": true,\n            \"is-active\": this.filterValue == ListStyleVariants.list,\n          }}\n          aria-label={`${this.filterLabel}--list`}\n        >\n          <hy-icon class=\"hy-filter-group__button-icon\" icon={\"hy-icon-list-style-list\"} size={16} aria-hidden=\"true\" />\n        </button>\n        <button\n          type=\"button\"\n          class={{\n            \"hy-filter-item\": true,\n            \"hy-filter__list-type__grid\": true,\n            \"is-active\": this.filterValue == ListStyleVariants.grid,\n          }}\n          aria-label={`${this.filterLabel}--grid`}\n        >\n          <hy-icon class=\"hy-filter-group__button-icon\" icon={\"hy-icon-list-style-grid\"} size={16} aria-hidden=\"true\" />\n        </button>\n      </div>\n    );\n  }\n}\n",".hy-filter-visibility-tool {\n  @include font-size(14px, 20px);\n  align-items: center;\n  background-color: transparent;\n  border: 0;\n  color: var(--link-blue);\n  display: inline-flex;\n  font-family: var(--main-font-family);\n  font-weight: $semibold;\n  letter-spacing: -0.35px;\n  padding: 0;\n  margin-right: 1rem;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 20px);\n    letter-spacing: -0.5px;\n  }\n\n  &:hover {\n    color: var(--brand-main);\n    cursor: pointer;\n\n    svg {\n      fill: var(--brand-main);\n    }\n  }\n\n  &:focus {\n    color: var(--brand-main);\n    outline-offset: 1px;\n    outline: 2px solid var(--brand-main);\n\n    svg {\n      fill: var(--brand-main);\n    }\n  }\n}\n\n.hy-filter-visibility-tool__icon {\n  flex-shrink: 0;\n  margin-right: 6px;\n\n  svg {\n    fill: var(--link-blue);\n\n    @include breakpoint($narrow) {\n      height: 16px;\n      width: 16px;\n    }\n  }\n}\n","import {Component, Host, h, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-filter-visibility-tool\",\n  styleUrl: \"hy-filter-visibility-tool.scss\",\n  shadow: false,\n})\nexport class HyFilterVisibilityTool {\n  @Prop() filterVisibilityToolType: \"toggle\" | \"reset\";\n\n  render() {\n    switch (this.filterVisibilityToolType) {\n      case \"toggle\":\n        return (\n          <Host>\n            <hy-filter-visibility-tool-toggle />\n          </Host>\n        );\n\n      case \"reset\":\n        return (\n          <Host>\n            <hy-filter-visibility-tool-reset />\n          </Host>\n        );\n    }\n  }\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-filter-visibility-tool-reset\",\n  shadow: false,\n})\nexport class HyFilterVisibilityToolReset {\n  render() {\n    return (\n      <button class=\"hy-filter-visibility-tool hy-filter-visibility-tool--reset\" type=\"button\">\n        <hy-icon class=\"hy-filter-visibility-tool__icon\" icon={\"hy-icon-remove\"} size={14} aria-hidden=\"true\" />\n        Reset filters\n      </button>\n    );\n  }\n}\n","import {Component, h, Host} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-filter-visibility-tool-toggle\",\n  shadow: false,\n})\nexport class HyFilterVisibilityToolToggle {\n  render() {\n    return (\n      <Host>\n        <button class=\"hy-filter-visibility-tool hy-filter-visibility-tool--show-more\" type=\"button\">\n          <hy-icon class=\"hy-filter-visibility-tool__icon\" icon={\"hy-icon-plus\"} size={12} aria-hidden=\"true\" />\n          Show more filters\n        </button>\n        <button class=\"hy-filter-visibility-tool hy-filter-visibility-tool--show-less\" type=\"button\">\n          <hy-icon class=\"hy-filter-visibility-tool__icon\" icon={\"hy-icon-minus\"} size={12} aria-hidden=\"true\" />\n          Show less filters\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/hy-general-list_2.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"hy-general-list.hy-general-list-item.entry.cjs.js","mappings":"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","names":["GeneralListTypes","jsonParserWorker","h","Host"],"sources":["./src/components/hy-general-list/hy-general-list.scss?tag=hy-general-list","./src/components/hy-general-list/hy-general-list.tsx","./src/components/hy-general-list-item/hy-general-list-item.scss?tag=hy-general-list-item","./src/components/hy-general-list-item/hy-general-list-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-general-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  &--style-grid {\n    display: flex;\n    display: grid;\n    gap: 32px 0;\n\n    @media screen and (min-width: 768px) {\n      grid-template-columns: repeat(2, 1fr);\n      gap: 32px 24px;\n    }\n\n    @media screen and (min-width: 1024px) {\n      grid-template-columns: repeat(3, 1fr);\n    }\n\n    @media screen and (min-width: 1920px) {\n      gap: 32px;\n    }\n\n    li {\n      background-color: var(--grayscale-background-box);\n      width: 100%;\n      height: auto;\n    }\n  }\n}\n","export interface ListItemValue {\n  description: string;\n  id: string;\n  imageAlt: string;\n  imageUrl: string;\n  label: string;\n  subLabel: string;\n  date: string;\n  tag: string;\n  title: string;\n  type: string;\n  url: string;\n  target: boolean;\n}\n\nimport {Component, Element, h, Prop, State, Host, Watch} from \"@stencil/core\";\nimport {GeneralListTypes} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n  tag: \"hy-general-list\",\n  styleUrl: \"hy-general-list.scss\",\n  shadow: false,\n})\nexport class HyGeneralList {\n  @Prop() type: GeneralListTypes = GeneralListTypes.list;\n  @Prop() blank: boolean = true;\n  @Prop() dataItems: ListItemValue[] | string;\n  @Prop() truncateDescription: boolean = true;\n  @Prop() truncateLimit: number = 140;\n  private _dataItems: ListItemValue[];\n  @Element() el: HTMLElement;\n  @State() hasSidebar: boolean = false;\n\n  async componentWillLoad() {\n    this._dataItems = await jsonParserWorker(this.dataItems);\n\n    const hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.hasSidebar = true;\n      }\n    }\n  }\n\n  @Watch(\"dataItems\")\n  async watchPropHandler(newValue: string | number, oldValue: string | number) {\n    if (newValue !== oldValue) {\n      this._dataItems = await jsonParserWorker(this.dataItems);\n    }\n  }\n\n  render() {\n    const classAttributes = [\n      \"hy-general-list\",\n      this.hasSidebar ? \"hy-general-list--with-sidebar\" : \"\",\n      `hy-general-list--style-${this.type}`,\n    ].join(\" \");\n\n    let listData = this._dataItems;\n    if (typeof this._dataItems === \"object\") {\n      listData = Object.values(this._dataItems);\n    }\n\n    function truncate(str, n) {\n      return str.length > n ? str.substr(0, n - 1) + \"...\" : str;\n    }\n\n    return (\n      <Host>\n        <ul class={classAttributes}>\n          {listData &&\n            listData.map((item) => (\n              <li>\n                <hy-general-list-item\n                  has-sidebar={this.hasSidebar}\n                  target={this.blank}\n                  data-location={item.url}\n                  description={\n                    this.truncateDescription ? truncate(item.description, this.truncateLimit) : item.description\n                  }\n                  id={item.id}\n                  imageAlt={item.imageAlt}\n                  imageUrl={item.imageUrl}\n                  item-title={item.title}\n                  label={item.label}\n                  sub-label={item.subLabel}\n                  tag={item.tag}\n                  date={item.date}\n                  type={item.type}\n                  url={item.url}\n                  list-style={this.type}\n                ></hy-general-list-item>\n              </li>\n            ))}\n        </ul>\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n  height: 100%;\n}\n\n.hy-general-list-item {\n  font-family: var(--main-font-family);\n  margin-bottom: 1rem;\n  height: 100%;\n\n  &--style-grid {\n    .hy-general-list-item__link {\n      height: 100%;\n\n      @include breakpoint($narrow) {\n        flex-direction: column;\n      }\n    }\n\n    .hy-general-list-item__image-container {\n      border: 1px solid var(--grayscale-light);\n      max-width: 100%;\n\n      @include breakpoint(max-width 479px) {\n        display: flex;\n      }\n    }\n\n    .hy-general-list-item__text-container {\n      @include breakpoint($wide) {\n        padding: 12px 12px 32px 12px;\n      }\n      @include breakpoint($extrawide) {\n        padding: 12px 12px 32px 12px;\n      }\n    }\n  }\n}\n\n.hy-genenral-list-item__meta {\n  @include font-size(12px, 14px);\n  @include font-weight($semibold);\n  color: var(--grayscale-dark);\n  font-family: var(--main-font-family);\n  letter-spacing: -0.1px;\n  text-transform: uppercase;\n  margin: 9px 0;\n\n  &__date {\n    @include font-weight($regular);\n    margin-left: 4px;\n  }\n}\n\n.hy-general-list-item__link {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  text-decoration: none;\n\n  @include breakpoint($narrow) {\n    flex-direction: row;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:hover,\n  &:focus {\n    .hy-general-list-item__type span {\n      background-color: var(--brand-main);\n    }\n\n    .hy-general-list-item__title {\n      color: var(--brand-main);\n      text-decoration: underline;\n    }\n  }\n}\n\n.hy-general-list-item__image-container {\n  display: flex;\n  justify-content: stretch;\n  margin: 0;\n  position: relative;\n  width: 100%;\n\n  @include breakpoint(max-width 479px) {\n    display: none;\n  }\n\n  @include breakpoint($narrow) {\n    max-width: 35.7%;\n  }\n\n  @include breakpoint($wide) {\n    max-width: 23.13%;\n  }\n\n  @include breakpoint($extrawide) {\n    max-width: 23.03%;\n  }\n\n  &:before {\n    content: \"\";\n    display: block;\n    padding-top: var(--aspectRatio);\n  }\n\n  img {\n    bottom: 0;\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 100%;\n  }\n}\n\n.hy-general-list-item__image {\n  background-color: #ececec;\n  width: 100%;\n  height: 100%;\n}\n\n.hy-general-list-item__type {\n  background-color: var(--grayscale-background-box);\n  padding-top: 16px;\n  z-index: 10;\n\n  @include breakpoint($narrow) {\n    background-color: transparent;\n    left: -8px;\n    padding-top: 0;\n    position: absolute;\n    top: 16px;\n  }\n\n  &__major {\n    @include font-size(12px, 14px);\n    @include font-weight($bold);\n    background-color: var(--grayscale-black);\n    color: var(--grayscale-white);\n    letter-spacing: -0.1px;\n    padding: 5px 8px;\n    text-transform: uppercase;\n    align-self: baseline;\n    margin-left: -8px;\n\n    @include breakpoint($narrow) {\n      margin-left: 0;\n    }\n  }\n\n  &__sub {\n    @include font-size(12px, 14px);\n    background-color: var(--grayscale-black);\n    color: var(--grayscale-white);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.1px;\n    padding: 5px 8px;\n    margin-left: -8px;\n  }\n}\n\n.hy-general-list-item__text-container {\n  background-color: var(--grayscale-background-box);\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding: 16px 12px;\n\n  @include breakpoint($wide) {\n    padding: 14px 32px 24px 24px;\n  }\n\n  @include breakpoint($extrawide) {\n    padding: 20px 104px 32px 32px;\n  }\n}\n\n.hy-general-list-item__title {\n  @include font-size(18px, 22px);\n  @include font-weight($bold);\n  color: var(--brand-main-nearly-black);\n  letter-spacing: -0.45px;\n  margin-bottom: 8px;\n  margin-top: 0;\n  text-wrap: balance;\n\n  @include breakpoint($xlarge) {\n    @include font-size(20px, 24px);\n    letter-spacing: -0.5px;\n  }\n\n  &__large {\n    @include breakpoint($extrawide) {\n      @include font-size(20px, 24px);\n      letter-spacing: -0.5px;\n    }\n  }\n}\n\n.hy-general-list-item__description {\n  @include font-size(15px, 20px);\n  color: var(--grayscale-dark);\n  display: none;\n  letter-spacing: -0.09px;\n  margin: 0;\n\n  @include breakpoint($narrow) {\n    @include font-size(14px, 18px);\n    display: block;\n    letter-spacing: -0.08px;\n  }\n\n  @include breakpoint($xlarge) {\n    @include font-size(14px, 20px);\n  }\n\n  &__large {\n    @include breakpoint($extrawide) {\n      @include font-size(14px, 20px);\n    }\n  }\n}\n","import {Component, Element, h, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-general-list-item\",\n  styleUrl: \"hy-general-list-item.scss\",\n  shadow: false,\n})\nexport class HyGeneralListItem {\n  @Prop() hasSidebar: boolean = true;\n  @Prop() description?: string;\n  @Prop() imageAlt: string = \"\";\n  @Prop() imageUrl: string = null;\n  @Prop() disableLazy: boolean = false;\n  @Prop() itemTitle?: string;\n  @Prop() label?: string;\n  @Prop() subLabel: string = \"\";\n  @Prop() date: string = \"\";\n  @Prop() tag: string = \"\";\n  @Prop() type?: string;\n  @Prop() url?: string;\n  @Prop() listStyle?: string;\n  @Prop() target: boolean = true;\n\n  @Element() el: HTMLElement;\n\n  render() {\n    const classAttributes = [\"hy-general-list-item\", `hy-general-list-item--style-${this.listStyle}`].join(\" \");\n    const contentClassAttributes = [\"hy-general-list-item__text-container\"].join(\" \");\n    const imageClassAttributes = [\"hy-general-list-item__image-container\"].join(\" \");\n\n    const sidebarClass = this.hasSidebar ? \"common\" : \"large\";\n    const titleClassAttributes = [\"hy-general-list-item__title\", `hy-general-list-item__title__${sidebarClass}`].join(\n      \" \"\n    );\n    const descriptionClassAttributes = [\n      \"hy-general-list-item__description\",\n      `hy-general-list-item__description__${sidebarClass}`,\n    ].join(\" \");\n\n    const aspectRatioWidth = 16;\n    const aspectRatioHeight = 10;\n    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n    const aspectRatio = {\n      \"--aspectRatio\": `${aspect}%` as \"aspectRatio\",\n    };\n\n    return (\n      <article class={classAttributes}>\n        <a class=\"hy-general-list-item__link\" href={this.url} target={this.target ? \"_blank\" : \"_self\"}>\n          {this.type && (\n            <div class=\"hy-general-list-item__type\">\n              <span class=\"hy-general-list-item__type__major\">{this.label}</span>\n              <span class=\"hy-general-list-item__type__sub\">{this.subLabel}</span>\n            </div>\n          )}\n          {this.imageUrl && (\n            <figure class={imageClassAttributes} style={aspectRatio}>\n              <img\n                loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                alt={this.imageAlt}\n                class=\"hy-general-list-item__image\"\n                src={this.imageUrl}\n              />\n            </figure>\n          )}\n          <div class={contentClassAttributes}>\n            {(this.tag || this.date) && (\n              <span class=\"hy-genenral-list-item__meta\">\n                {this.tag}\n                <span class=\"hy-genenral-list-item__meta__date\">\n                  {this.tag && \"|\"} {this.date}\n                </span>\n              </span>\n            )}\n            <h3 class={titleClassAttributes}>{this.itemTitle}</h3>\n            <p class={descriptionClassAttributes}>{this.description}</p>\n          </div>\n        </a>\n      </article>\n    );\n  }\n}\n"],"version":3}