@itcenteratunihelsinki/huds-lib 0.8.73 → 0.8.75

package/dist/huds-lib/hy-dropdown.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["hyDropdownCss","HyDropdown","id","label","this","defaultLabel","value","async","_dropdownOptions","jsonParserWorker","dropdownOptions","componentWillUpdate","items","el","querySelectorAll","some","item","checked","isChecked","watchPropHandler","newValue","oldValue","single","dropdownPanelCheckboxElements","getElementsByClassName","Array","from","filter","currentSingle","option","panelListener","e","isPanelOpen","detail","dropdownId","handleMultiClick","event","stopPropagation","i","closest","dataset","hasAttribute","setAttribute","currentMulti","length","removeAttribute","index","indexOf","splice","handleSingleClick","o","handleKeyDown","key","preventDefault","handlePanelToggle","focusedOptionIndex","handleOptionSingleClick","handleMultiOptionClick","emitDetails","type","data","dropdownKeyPress","emit","panelOpen","dropdownPanelToggled","handlePanelClickOutside","dropdownToggleButtonElement","querySelector","dropdownPanelElement","dropdownPanelCheckboxes","dropdownToggleButtonIconElement","target","allowedElements","includes","dropdropValueChange","dropdropMultiValueChange","handleOptionHover","render","currentLabel","currentId","currentValue","classAttributes","join","h","Host","class","dropdownLabel","htmlFor","role","onClick","onKeyDown","tabIndex","icon","size","map","onMouseEnter"],"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"],"mappings":"mHAAA,MAAMA,EAAgB,+hM,MCoBTC,EAAU,M,iRAGK,M,mBACM,K,gBACH,iB,iDAEE,M,UACR,K,mBACiC,K,iBACxB,M,eACF,M,mBACW,CAAC,CAACC,GAAI,EAAGC,MAAOC,KAAKC,aAAcC,MAAO,I,oDAG7C,C,CA2BtCC,0BACEH,KAAKI,uBAAyBC,EAAiBL,KAAKM,gB,CAGtDC,sBACE,MAAMC,EAAQR,KAAKS,GAAGC,iBAAiB,0BACvC,GAAIF,EAAO,CACT,GAAI,IAAIA,GAAOG,MAAMC,GAASA,EAAKC,SAAW,OAAO,CACnDb,KAAKc,UAAY,I,KACZ,CACLd,KAAKc,UAAY,K,GAMvBC,iBAAiBC,EAA2BC,GAC1C,IAAKjB,KAAKkB,OAAQ,OAElB,GAAIF,IAAaC,EAAU,CACzB,MAAME,EAAgCnB,KAAKS,GAAGW,uBAAuB,yBAIrEC,MAAMC,KAAKH,GAA+BI,QAAQX,IAChD,GAAIA,EAAKd,IAAMkB,EAAU,CACvBJ,EAAKC,QAAU,KACfb,KAAKwB,cAAgBxB,KAAKI,iBAAiBmB,QAAQE,GAAWA,EAAO3B,IAAMkB,IAC3E,M,CAEF,OAAO,IAAI,G,EAMjBU,cAAcC,GACZ,GAAI3B,KAAK4B,aAAeD,EAAEE,OAAOC,aAAe9B,KAAK8B,WAAY,CAC/D9B,KAAK4B,YAAc,K,EAIfG,iBAAiBC,EAAOP,GAC9BO,EAAMC,kBACN,MAAMd,EAAgCnB,KAAKS,GAAGW,uBAAuB,yBAGrEC,MAAMC,KAAKH,GAA+BI,QAAQW,IAChD,MAAMtB,EAAOsB,EAAEC,QAAQ,MACvB,GAAIvB,EAAKwB,QAAQtC,IAAM2B,EAAO3B,KAAOc,EAAKyB,aAAa,iBAAkB,CACvEzB,EAAK0B,aAAa,gBAAiB,QACnCtC,KAAKuC,aACHvC,KAAKuC,cAAgBvC,KAAKuC,aAAaC,OAAS,EAAI,IAAIxC,KAAKuC,aAAcd,GAAU,CAACA,GACxF,M,CAEF,GAAIb,EAAKwB,QAAQtC,KAAO2B,EAAO3B,IAAMc,EAAKyB,aAAa,iBAAkB,CACvEzB,EAAK6B,gBAAgB,iBACrB,GAAIzC,KAAKuC,aAAaC,OAAS,EAAG,CAChC,MAAME,EAAQ1C,KAAKuC,aAAaI,QAAQlB,GACxCzB,KAAKuC,aAAevC,KAAKuC,aAAaK,OAAOF,EAAO,E,CAEtD,M,CAEF,OAAO,IAAI,G,CAIPG,kBAAkBb,EAAOP,GAC/B,IAAKzB,KAAKkB,SAAWlB,KAAK4B,YAAa,OACvC,MAAMT,EAAgCnB,KAAKS,GAAGW,uBAAuB,yBAGrEY,EAAMC,kBAENZ,MAAMC,KAAKH,GAA+BI,QAAQW,IAChD,MAAMtB,EAAOsB,EAAEC,QAAQ,MACvB,GAAIvB,EAAKwB,QAAQtC,IAAM2B,EAAO3B,GAAI,CAChC,GAAIc,EAAKyB,aAAa,iBAAkB,CACtCzB,EAAK6B,gBAAgB,iBACrBzC,KAAKwB,cAAgB,CAAC,CAAC1B,GAAI,KAAMC,MAAOC,KAAKC,aAAcC,MAAO,OAClE,M,CAEFU,EAAK0B,aAAa,gBAAiB,QACnCtC,KAAKwB,cAAgBxB,KAAKI,iBAAiBmB,QAAQuB,GAAMA,EAAEhD,IAAM2B,EAAO3B,KACxE,M,CAEF,GAAIc,EAAKwB,QAAQtC,KAAO2B,EAAO3B,IAAMc,EAAKyB,aAAa,iBAAkB,CACvEzB,EAAK6B,gBAAgB,iBACrB,M,CAEF,OAAO,IAAI,G,CAKfM,cAAcf,GACZA,EAAMC,kBACN,OAAQD,EAAMgB,KACZ,IAAK,YACHhB,EAAMiB,iBACN,IAAKjD,KAAK4B,YAAa,CACrB5B,KAAKkD,kBAAkBlB,GACvB,M,CAEFhC,KAAKmD,oBAAsBnD,KAAKmD,mBAAqB,GAAKnD,KAAKI,iBAAiBoC,OAChF,MACF,IAAK,UACHxC,KAAKmD,oBACFnD,KAAKmD,mBAAqB,EAAInD,KAAKI,iBAAiBoC,QAAUxC,KAAKI,iBAAiBoC,OACvFR,EAAMiB,iBACN,MACF,IAAK,QACL,IAAK,IACH,IAAKjD,KAAK4B,YAAa,CACrBI,EAAMiB,iBACNjD,KAAKkD,kBAAkBlB,GACvB,M,CAEF,GAAIhC,KAAKkB,OAAQ,CACflB,KAAKoD,wBAAwBpB,EAAOhC,KAAKI,iBAAiBJ,KAAKmD,oB,KAC1D,CACLnD,KAAKqD,uBAAuBrB,EAAOhC,KAAKI,iBAAiBJ,KAAKmD,oB,CAEhE,MAAMG,EAAc,CAClBxD,GAAIE,KAAK8B,WACTyB,KAAMvD,KAAKuD,KACXC,KAAMxD,KAAKI,iBAAiBJ,KAAKmD,qBAEnCnD,KAAKyD,iBAAiBC,KAAKJ,GAC3BtB,EAAMiB,iBACN,MACF,IAAK,SACL,IAAK,MACHjD,KAAK4B,YAAc,MACnB,M,CAMEsB,kBAAkBvB,GACxBA,EAAEM,kBACFjC,KAAK4B,aAAe5B,KAAK4B,YAEzB,MAAM0B,EAAc,CAClBxB,WAAY9B,KAAK8B,WACjB6B,UAAW3D,KAAK4B,aAElB5B,KAAK4D,qBAAqBF,KAAKJ,E,CAIjCO,wBAAwBlC,GACtBA,EAAEM,kBACF,MAAM6B,EAA8B9D,KAAKS,GAAGsD,cAAc,IAAI/D,KAAK8B,cACnE,MAAMkC,EAAuBhE,KAAKS,GAAGsD,cAAc,uBACnD,MAAM5C,EAAgCnB,KAAKS,GAAGC,iBAAiB,4BAC/D,MAAMuD,EAA0BjE,KAAKS,GAAGC,iBAAiB,0BACzD,MAAMwD,EAAkClE,KAAKS,GAAGC,iBAAiB,sBAEjE,MAAMyD,OAACA,GAAUxC,EAEjB,MAAMyC,EAAkB,CACtBpE,KAAKS,GACLqD,EACAE,KACGC,EACHC,KACG/C,GAGL,GAAInB,KAAK4B,cAAgBwC,EAAgBC,SAASF,GAAS,CACzDnE,KAAK4B,YAAc,K,EAIfwB,wBAAwBpB,EAAOP,GACrCO,EAAMC,kBACNjC,KAAK6C,kBAAkBb,EAAOP,GAC9B,MAAM6B,EAAc,CAClBxD,GAAIE,KAAK8B,WACTyB,KAAMvD,KAAKuD,KACXC,KAAM/B,GAERzB,KAAKsE,oBAAoBZ,KAAKJ,E,CAGxBD,uBAAuBrB,EAAOP,GACpCO,EAAMC,kBACNjC,KAAK+B,iBAAiBC,EAAOP,GAC7B,MAAM6B,EAAc,CAClBxD,GAAIE,KAAK8B,WACTyB,KAAMvD,KAAKuD,KACXC,KAAMxD,KAAKuC,cAEbvC,KAAKuE,yBAAyBb,KAAKJ,E,CAG7BkB,kBAAkB9B,GACxB1C,KAAKmD,mBAAqBT,C,CAG5B+B,SACE,MAAO1E,MAAO2E,EAAc5E,GAAI6E,EAAWzE,MAAO0E,GAAgB5E,KAAKwB,cAAc,GACrF,MAAMqD,EAAkB,CAAC,cAAe7E,KAAKkB,OAAS,sBAAwB,IAAI4D,KAAK,KACvF,GAAI9E,KAAKkB,OAAQ,CACf,OACE6D,EAACC,EAAI,CAACC,MAAOJ,GACV7E,KAAKkF,eACJH,EAAA,SAAOE,MAAM,4BAA4BE,QAASnF,KAAK8B,YACpD9B,KAAKkF,eAGVH,EAAA,OACEjF,GAAIE,KAAK8B,WACTmD,MAAO,uBAAuBjF,KAAK4B,YAAc,UAAY,KAAI,gBAClD,GAAG5B,KAAK4B,aAAe,QAAO,gBAC/B,gBAAe,gBACf,UACdwD,KAAK,WACLC,QAAUrD,GAAUhC,KAAKkD,kBAAkBlB,GAC3CsD,UAAYtD,GAAUhC,KAAK+C,cAAcf,GAAM,aACnChC,KAAKkF,cAAa,kBACbP,EAAS,qBACNC,EAAY,aACpBD,EACZY,SAAU,GAEVR,EAAA,uBAAmB,OAAOE,MAAM,4BAA4B1B,KAAK,SAASrD,MAAOyE,IAChFD,EACDK,EAAA,WAASE,MAAM,oBAAoBO,KAAM,qBAAsBC,KAAM,GAAE,cAAc,UAEvFV,EAAA,yBACoB/E,KAAKc,UAAY,OAAS,QAC5ChB,GAAG,gBACHmF,MAAO,uBAAuBjF,KAAK4B,YAAc,YAAc,KAAI,gBACpD,IAAI5B,KAAK4B,aAAe,QACvCwD,KAAK,UAAS,kBACE,kBAEfpF,KAAKI,iBAAiBsF,KAAI,EAAE5F,KAAIC,QAAOG,SAAQwC,EAAOlC,IACrDuE,EAAA,MACE/B,IAAKlD,EAAE,UACE,GAAGA,IACZsF,KAAK,SACLH,MAAO,2BAA2BjF,KAAKI,iBAAiBoC,OAAS,IAAME,EAAQ,UAAY,yBACvF1C,KAAKmD,qBAAuBT,EAAQ,mCAAqC,KAC7E2C,QAAUrD,GAAUhC,KAAKoD,wBAAwBpB,EAAOxB,EAAMkC,IAC9DiD,aAAc,IAAM3F,KAAKwE,kBAAkB9B,IAE3CqC,EAAA,kBAAe,GAAGjF,IAAMmF,MAAM,wBAAuB,aAAa,GAAG/E,KAClEH,EACDgF,EAAA,WAASE,MAAM,0BAA0BO,KAAM,eAAgBC,KAAM,GAAE,cAAc,c,KAO5F,CACL,OACEV,EAACC,EAAI,CAACC,MAAOJ,GACXE,EAAA,UACEjF,GAAIE,KAAK8B,WACTmD,MAAO,uBAAuBjF,KAAK4B,YAAc,UAAY,KAAI,gBAClD,GAAG5B,KAAK4B,aAAe,QAAO,gBAC/B,gBAAe,gBACf,UACdwD,KAAK,WACLC,QAAUrD,GAAUhC,KAAKkD,kBAAkBlB,GAAM,aACrChC,KAAKkF,cACjB3B,KAAK,UAEJvD,KAAKkF,eAAiBlF,KAAKkF,cAC5BH,EAAA,WAASE,MAAM,oBAAoBO,KAAM,qBAAsBC,KAAM,GAAE,cAAc,UAEvFV,EAAA,yBACoB/E,KAAKc,UAAY,OAAS,QAC5ChB,GAAG,gBACHmF,MAAO,uBAAuBjF,KAAK4B,YAAc,YAAc,KAAI,gBACpD,IAAI5B,KAAK4B,aAAe,QACvCwD,KAAK,UAAS,kBACE,kBAEfpF,KAAKI,iBAAiBsF,KAAI,EAAE5F,KAAIC,QAAOG,SAAQwC,EAAOlC,IACrDuE,EAAA,MACE/B,IAAKlD,EAAE,UACE,GAAGA,IACZsF,KAAK,SACLH,MAAO,2BAA2BjF,KAAKI,iBAAiBoC,OAAS,IAAME,EAAQ,UAAY,yBACvF1C,KAAKmD,qBAAuBT,EAAQ,mCAAqC,KAC7E2C,QAAUrD,GAAUhC,KAAKqD,uBAAuBrB,EAAOxB,EAAMkC,IAC7DiD,aAAc,IAAM3F,KAAKwE,kBAAkB9B,IAE3CqC,EAAA,kBAAe,GAAGjF,IAAMmF,MAAM,wBAAuB,aAAa,GAAG/E,KAClEH,EACDgF,EAAA,WAASE,MAAM,0BAA0BO,KAAM,eAAgBC,KAAM,GAAE,cAAc,c"}

package/dist/huds-lib/hy-event-item.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["hyEventItemCss","HyEventItem","componentDidLoad","link","this","el","styleGrid","clientHeight","isLong","render","containerClasses","join","h","href","url","class","target","dateShort","icon","size","eventTitle","dateLong","location","type","readMoreLabel"],"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"],"mappings":"sDAAA,MAAMA,EAAiB,y4P,MCOVC,EAAW,M,yEAGa,G,eACP,G,cACD,G,cACA,G,sDAGE,M,mBACG,Y,YAEL,K,CAE3BC,mBACE,MAAMC,EAAOC,KAAKC,GAClB,GAAID,KAAKE,UAAW,CAClB,GAAIH,EAAKI,aAAe,IAAK,CAC3BH,KAAKI,OAAS,I,GAKpBC,SACE,MAAMC,EAAmB,CACvB,kBACAN,KAAKE,UAAY,wBAA0B,wBAC3CF,KAAKI,OAAS,UAAY,IAC1BG,KAAK,KAEP,OACEC,EAAA,KAAGC,KAAMT,KAAKU,IAAKC,MAAOL,EAAkBM,OAAO,UACjDJ,EAAA,OAAKG,MAAM,8BACTH,EAAA,OAAKG,MAAM,kCACTH,EAAA,QAAMG,MAAM,gCAAgCX,KAAKa,WAChDb,KAAKI,QACJI,EAAA,QAAMG,MAAM,2BACVH,EAAA,WAASM,KAAK,qBAAqBC,KAAM,OAI/CP,EAAA,OAAKG,MAAM,4BACTH,EAAA,OAAKG,MAAM,0BAA0BX,KAAKgB,YAC1CR,EAAA,OAAKG,MAAM,yBACRX,KAAKiB,UACJT,EAAA,OAAKG,MAAM,2DACTH,EAAA,WAASM,KAAK,iBAAiBC,KAAM,KACpCf,KAAKiB,UAGTjB,KAAKkB,UACJV,EAAA,OAAKG,MAAM,yDACTH,EAAA,WAASM,KAAK,mBAAmBC,KAAM,KACtCf,KAAKkB,UAGTlB,KAAKmB,MACJX,EAAA,OAAKG,MAAM,qDACTH,EAAA,WAASM,KAAK,iBAAiBC,KAAM,KACpCf,KAAKmB,MAGVX,EAAA,QAAMG,MAAM,8BAA8BX,KAAKoB,iBAGnDZ,EAAA,QAAMG,MAAM,4BAA2B,cAAa,QAClDH,EAAA,WAASM,KAAK,sBAAsBC,KAAM,O"}

package/dist/huds-lib/hy-events.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["hyEventsCss","scrollTimeout","checkTimeout","itemWidth","HyEvents","componentDidLoad","itemList","this","el","content","document","querySelector","scrollLeft","scrollRight","styleGrid","addEventListener","setTimeout","window","clearTimeout","e","preventDefault","classList","add","scrollBy","top","left","behavior","remove","watchUrlHandler","newValue","oldValue","viewAllUrl","checkScrollHidden","list","leftButton","rightButton","clientWidth","scrollWidth","render","classAttributes","join","footerClasses","h","class","scrollable","type","scrollLeftLabel","icon","size","scrollRightLabel","showMore","viewAllLabel","url","variant","CtaLinkVariants","linkList"],"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"],"mappings":"8FAAA,MAAMA,EAAc,gmHCGpB,IAAIC,EAAgB,KACpB,IAAIC,EAAe,KACnB,IAAIC,EAAY,IAAM,G,MAOTC,EAAQ,M,wCAGU,M,cACD,M,2EAGM,sB,sBACC,uB,gBAEJ,I,CAE/BC,mBACE,MAAMC,EAAWC,KAAKC,GACtB,MAAMC,EAAUC,SAASC,cAAc,cACvC,MAAMC,EAAaN,EAASK,cAAc,2BAC1C,MAAME,EAAcP,EAASK,cAAc,4BAI3C,GAAIJ,KAAKO,UAAW,CAClBL,EAAQM,iBACN,UACA,KACEd,EAAgBe,YAAW,KACzBC,OAAOC,aAAajB,EAAc,GACjC,IAAI,GAET,OAGFW,EAAWG,iBAAiB,SAAUI,IACpCA,EAAEC,iBACFR,EAAWS,UAAUC,IAAI,eACzBb,EAAQc,SAAS,CACfC,IAAK,EACLC,MAAOtB,EACPuB,SAAU,WAEZxB,EAAee,OAAOD,YAAW,KAC/BC,OAAOC,aAAahB,GAEpBU,EAAWS,UAAUM,OAAO,cAAc,GACzC,IAAI,IAGTd,EAAYE,iBAAiB,SAAUI,IACrCA,EAAEC,iBACFP,EAAYQ,UAAUC,IAAI,eAC1Bb,EAAQc,SAAS,CACfC,IAAK,EACLC,MAAOtB,EACPuB,SAAU,WAEZxB,EAAee,OAAOD,YAAW,KAC/BC,OAAOC,aAAahB,GAEpBW,EAAYQ,UAAUM,OAAO,cAAc,GAC1C,IAAI,G,EAMbC,gBAAgBC,EAAUC,GACxB,GAAIA,IAAaD,EAAU,CACzBtB,KAAKwB,WAAaF,C,EAItBG,kBAAkBC,EAAMC,EAAYC,GAClC,MAAM7B,EAAW2B,EAAKtB,cAAc,uBAEpC,GAAIsB,EAAKrB,aAAe,EAAG,CACzBsB,EAAWb,UAAUC,IAAI,Y,KACpB,CACLY,EAAWb,UAAUM,OAAO,Y,CAG9B,GAAIM,EAAKrB,WAAaqB,EAAKG,aAAe9B,EAAS+B,YAAc,EAAG,CAClEF,EAAYd,UAAUC,IAAI,Y,KACrB,CACLa,EAAYd,UAAUM,OAAO,Y,EAIjCW,SACE,MAAMC,EAAkB,CAAC,YAAahC,KAAKO,UAAY,kBAAoB,IAAI0B,KAAK,KACpF,MAAMC,EAAgB,CAAC,oBAAqBlC,KAAKO,UAAY,0BAA4B,IAAI0B,KAAK,KAElG,OACEE,EAAA,OAAKC,MAAM,sBACTD,EAAA,OAAKC,MAAOJ,GACVG,EAAA,cAEFA,EAAA,OAAKC,MAAOF,GACTlC,KAAKqC,YAAcrC,KAAKO,WACvB4B,EAAA,OAAKC,MAAM,6BACTD,EAAA,UAAQG,KAAK,SAASF,MAAM,yBAAwB,aAAapC,KAAKuC,iBACpEJ,EAAA,WAASK,KAAK,qBAAqBC,KAAM,MAE3CN,EAAA,UAAQG,KAAK,SAASF,MAAM,0BAAyB,aAAapC,KAAK0C,kBACrEP,EAAA,WAASK,KAAK,sBAAsBC,KAAM,OAI/CzC,KAAK2C,UAAY3C,KAAK4C,cAAgB5C,KAAKwB,YAC1CW,EAAA,8BACgBnC,KAAK4C,aAAY,WACrB5C,KAAK4C,aACfC,IAAK7C,KAAKwB,WACVsB,QAASC,EAAgBC,Y"}

package/dist/huds-lib/hy-filter-group_6.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["hyFilterGroupCss","HyFilterGroup","arrayDataWatcher","newValue","this","_filterGroupFilters","JSON","parse","componentWillLoad","filterGroupFilters","handleFilterDeselect","id","console","log","render","h","Host","class","filterGroupLabel","map","label","onClick","HyFilterGroupItem","type","filterGroupItemLabel","icon","size","fill","ColorVariant","grey_dark","hyFilterListTypeCss","HyFilterListType","filterLabel","filterValue","ListStyleVariants","list","grid","hyFilterVisibilityToolCss","HyFilterVisibilityTool","filterVisibilityToolType","HyFilterVisibilityToolReset","HyFilterVisibilityToolToggle"],"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"],"mappings":"qGAAA,MAAMA,EAAmB,i+F,MCYZC,EAAa,M,2FAMxBC,iBAAiBC,GACf,UAAWA,IAAa,SAAU,CAChCC,KAAKC,oBAAsBC,KAAKC,MAAMJ,E,KACjC,CACLC,KAAKC,oBAAsBF,C,EAI/BK,oBACEJ,KAAKF,iBAAiBE,KAAKK,mB,CAI7BC,qBAAqBC,GACnBC,QAAQC,IAAIF,E,CAGdG,SACE,OACEC,EAACC,EAAI,CAACC,MAAM,mBACVF,EAAA,MAAIE,MAAM,4BACRF,EAAA,UACEA,EAAA,MAAIE,MAAM,0BAA0Bb,KAAKc,mBAE1Cd,KAAKC,oBAAoBc,KAAI,EAAER,KAAIS,WAClCL,EAAA,+CACwBJ,EAAE,0BACCS,EACzBC,QAAS,IAAMjB,KAAKM,qBAAqBC,Q,yFCvC1CW,EAAiB,M,8FAI5BR,SACE,OACEC,EAAA,MAAIE,MAAM,2BACRF,EAAA,UAAQQ,KAAK,SAASN,MAAM,0BAAyB,aAAa,YAAYb,KAAKoB,wBAChFpB,KAAKoB,qBACNT,EAAA,WACEE,MAAM,+BACNQ,KAAM,iBACNC,KAAM,GAAE,cACI,OACZC,KAAMC,EAAaC,aAGvBd,EAAA,a,GCxBR,MAAMe,EAAsB,6iF,MCQfC,EAAgB,M,+EAI3BjB,SACE,OACEC,EAAA,OAAKE,MAAM,wBACTF,EAAA,YAAOX,KAAK4B,aACZjB,EAAA,UACEQ,KAAK,SACLN,MAAO,CACL,iBAAkB,KAClB,6BAA8B,KAC9B,YAAab,KAAK6B,aAAeC,EAAkBC,MACpD,aACW,GAAG/B,KAAK4B,qBAEpBjB,EAAA,WAASE,MAAM,+BAA+BQ,KAAM,0BAA2BC,KAAM,GAAE,cAAc,UAEvGX,EAAA,UACEQ,KAAK,SACLN,MAAO,CACL,iBAAkB,KAClB,6BAA8B,KAC9B,YAAab,KAAK6B,aAAeC,EAAkBE,MACpD,aACW,GAAGhC,KAAK4B,qBAEpBjB,EAAA,WAASE,MAAM,+BAA+BQ,KAAM,0BAA2BC,KAAM,GAAE,cAAc,U,aCpC/G,MAAMW,EAA4B,mpE,MCOrBC,EAAsB,M,iEAGjCxB,SACE,OAAQV,KAAKmC,0BACX,IAAK,SACH,OACExB,EAACC,EAAI,KACHD,EAAA,0CAIN,IAAK,QACH,OACEA,EAACC,EAAI,KACHD,EAAA,yC,mBChBCyB,EAA2B,M,yBACtC1B,SACE,OACEC,EAAA,UAAQE,MAAM,6DAA6DM,KAAK,UAC9ER,EAAA,WAASE,MAAM,kCAAkCQ,KAAM,iBAAkBC,KAAM,GAAE,cAAc,SAAS,gB,SCJnGe,EAA4B,M,yBACvC3B,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,UAAQE,MAAM,iEAAiEM,KAAK,UAClFR,EAAA,WAASE,MAAM,kCAAkCQ,KAAM,eAAgBC,KAAM,GAAE,cAAc,SAAS,qBAGxGX,EAAA,UAAQE,MAAM,iEAAiEM,KAAK,UAClFR,EAAA,WAASE,MAAM,kCAAkCQ,KAAM,gBAAiBC,KAAM,GAAE,cAAc,SAAS,qB"}

package/dist/huds-lib/hy-general-list_2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["hyGeneralListCss","HyGeneralList","GeneralListTypes","list","async","this","_dataItems","jsonParserWorker","dataItems","hyMainDiv","el","closest","classList","contains","hasSidebar","newValue","oldValue","render","classAttributes","type","join","listData","Object","values","truncate","str","n","length","substr","h","Host","class","map","item","target","blank","url","description","truncateDescription","truncateLimit","id","imageAlt","imageUrl","title","label","subLabel","tag","date","mb","hyGeneralListItemCss","HyGeneralListItem","listStyle","contentClassAttributes","imageClassAttributes","sidebarClass","titleClassAttributes","descriptionClassAttributes","aspectRatioWidth","aspectRatioHeight","aspect","aspectRatio","href","style","loading","disableLazy","alt","src","itemTitle"],"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"],"mappings":"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"}