{"version":3,"file":"js/explore-by-child-subject-page.min.js","mappings":"q+BAyBA,IAAqBA,EAArB,gBAA8DC,EAAA,GAAiB,IAAU,CAAE,CAA3F,kCAkBE,6BAA0B,OAAO,QAAQ,UAAU,EACnD,kBAAuB,CAAC,EANxB,WAAW,QAAU,CACnB,MAAO,CAAC,IAAmB,IAAc,GAAmB,CAC9D,CAMM,kBAAoC,gCA9C5C,MA+CI,MAAMC,EAAU,GAAG,KAAK,UAAU,IAAI,KAAK,IAAI,GAE/C,MAAMC,EAAA,EAAM,YAAS,MAA2B,CAAE,KAAMD,EAAS,SAAU,OAAO,MAAO,CAAC,CAAC,EAC3F,KAAK,WAAaC,EAAA,EAAM,SAAS,EACjC,KAAK,SAAW,KAAK,WAAW,iBAAiB,KAAKD,CAAO,IAEzD,OAAK,WAAL,cAAe,UAAW,GAC5B,KAAK,aAAa,gBAAiB,MAAM,CAE7C,CAAC,CAAD,CAEA,0BAA+C,CAC7C,MAAO,CACL,cAAe,KAAc,SAC7B,kBAAmB,KAAkB,SACrC,cAAe,KAAK,MACpB,YAAa,GAAG,KAAK,UAAU,IAAI,KAAK,IAAI,GAC5C,WAAY,KAAe,cAC7B,CACF,CAEA,uBAAyB,CApE3B,MAqEI,QAAI,OAAK,WAAL,cAAe,QAAS,EAK9B,CAEA,mBAAoBE,EAAYC,EAAe,CA5EjD,MA6EI,MAAMC,EAAW,OACZ,KAAK,yBAAyB,CAAC,EADnB,CAEf,MAAO,KAAW,YAClB,mBAAmB,WAAe,KAAK,WAAW,MAAOF,CAAE,IAAxC,cAA2C,MAC9D,cAAeC,EAAQ,GAAG,SAAS,CACrC,CAAC,EACD,OAAO,KAAK,UAAUC,CAAQ,CAChC,CAEA,UAAY,CAtFd,QAuFI,OAAI,KAAK,cACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAYF,UAAK,WAAL,cAAe,MAAM,EAAI,EAAuB,IAAhD,cAAoD,IAAI,CAACF,EAAIC,OAAU;AAAA;AAAA;AAAA;AAAA,sBAI5DA,CAAK;AAAA;AAAA;AAAA;AAAA,2BAIA,KAAK,IAAI;AAAA,yBACXD,CAAE;AAAA;AAAA;AAAA;AAAA,4BAIC,KAAK,mBAAmBA,EAAIC,CAAK,CAAC;AAAA;AAAA;AAAA,MAI5D,CAEA,QAAU,CAvHZ,MAwHI,QAAI,OAAK,WAAL,cAAe,UAAW,KACrB,WAGF;AAAA;AAAA,0BAEe,KAAK,WAAa,KAAU,EAAI;AAAA,iBACzC,KAAK,KAAK;AAAA,cACb,KAAK,IAAI;AAAA,qBACF,OAAO,QAAQ,gBAAgB,CAAC;AAAA,+BACtB,OAAO,QAAQ,cAAc,CAAC,IAAI,KAAK,KAAK;AAAA,2BAChD,OAAO,QAAQ,UAAU,CAAC,IAAI,KAAK,KAAK;AAAA,0BACzC,KAAK,UAAU,KAAK,yBAAyB,CAAC,CAAC;AAAA;AAAA,yBAEhD,IAAY,sBAAsB,QAAQ,kBAAmB,KAAK,UAAU,EAAE,QAAQ,iBAAkB,KAAK,IAAI,CAAC;AAAA,6BAC9G,KAAK,sBAAsB,EAAI,KAAK,wBAA0B,IAAO;AAAA;AAAA;AAAA;AAAA,UAIxF,KAAK,SAAS,CAAC;AAAA,sBAEvB,CACF,EAnHE,MADC,MAAS,CAAE,KAAM,MAAO,CAAC,GADPL,EAEnB,oBAGA,MADC,MAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,CAAC,GAJjCA,EAKnB,0BAGA,MADC,MAAS,CAAE,KAAM,MAAO,CAAC,GAPPA,EAQnB,qBAGA,MADC,MAAM,GAVYA,EAWnB,wBAXmBA,EAArB,MADC,MAAc,uCAAuC,GACjCA,CAAgC,C","sources":["webpack:///./src/js/wc/carousels/NFBExploreByChildSubjectCarousel.ts"],"sourcesContent":["/**\n * Class NFBExploreByChildSubjectCarousel.\n *\n */\n\nimport { LitElement, html, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { store, RootState } from '@src/js/redux/store'\nimport { selectWorkById } from '@src/js/redux/worksReducer'\nimport { GTM_EVENTS, GTM_LIST_CATEGORY, GTM_LIST_TYPE, DEFAULT_LIST_LENGTH, GTM_PROMO_TYPE } from '@src/js/constants'\nimport { NFBCarouselMixin } from '@src/js/wc/carousels/base/NFBCarouselMixin'\nimport { CarouselGTMAttrs } from '@src/js/wc/carousels/base/NFBNormanCarousel'\nimport normanPaths from '@src/js/helpers/paths'\n\nimport { fetchExploreByChildSubject } from '@src/js/redux/exploreBySubjectReducer'\n\n// @ts-expect-error Lit Sass import\nimport carouselSlotStyle from '@web-nfb/frontend-static/design-system/wc/carousel/NFBCarouselSlot.sass?lit'\n// @ts-expect-error Lit Sass import\nimport spinnerStyle from '@src/sass/wc/NFBSpinnerContainer.sass?lit'\n// @ts-expect-error Lit Sass import\nimport lazyLoadingCarousel from '@src/sass/wc/NFBLazyLoadingCarousel.sass?lit'\n\n@customElement('nfb-explore-by-child-subject-carousel')\nexport default class NFBExploreByChildSubjectCarousel extends NFBCarouselMixin(LitElement) {\n  @property({ type: String })\n  slug: string\n\n  @property({ type: String, attribute: 'parent-slug' })\n  parentSlug: string\n\n  @property({ type: String })\n  title: string\n\n  @state()\n  workList: number[] | []\n\n  static get styles () {\n    return [carouselSlotStyle, spinnerStyle, lazyLoadingCarousel]\n  }\n\n  _rootState: RootState\n  _defaultSeeMoreCardText = window.gettext('See more')\n  gtmAttribute: object = {}\n\n  async loadCarouselData () : Promise<void> {\n    const urlSlug = `${this.parentSlug}/${this.slug}`\n    // We want to load data only if carousel is visible\n    await store.dispatch(fetchExploreByChildSubject({ slug: urlSlug, language: window.LOCALE }))\n    this._rootState = store.getState()\n    this.workList = this._rootState.exploreBySubject.list[urlSlug]\n\n    if (this.workList?.length === 0) {\n      this.setAttribute('data-is-empty', 'true')\n    }\n  }\n\n  getCarouselGTMAttributes () : CarouselGTMAttrs {\n    return {\n      nfb_list_type: GTM_LIST_TYPE.CAROUSEL,\n      nfb_list_category: GTM_LIST_CATEGORY.SUBJECTS,\n      nfb_list_name: this.title,\n      nfb_list_id: `${this.parentSlug}_${this.slug}`,\n      nfb_detail: GTM_PROMO_TYPE.NOT_APPLICABLE\n    }\n  }\n\n  shouldShowSeeMoreCard () {\n    if (this.workList?.length > DEFAULT_LIST_LENGTH) {\n      return true\n    }\n\n    return false\n  }\n\n  buildGTMAttributes (id: number, index: number) {\n    const gtmAttrs = {\n      ...this.getCarouselGTMAttributes(),\n      event: GTM_EVENTS.SELECT_WORK,\n      nfb_version_title: selectWorkById(this._rootState.works, id)?.title,\n      nfb_position: (index + 1).toString()\n    }\n    return JSON.stringify(gtmAttrs)\n  }\n\n  getCards () {\n    if (this._isLoading) {\n      return html`\n        <li\n          slot=\"card\"\n        >\n          <div class=\"spinner-container\">\n            <nfb-spinner\n              is-loading=\"true\"\n            ></nfb-spinner>\n          </div>\n        </li>\n      `\n    }\n    return this.workList?.slice(0, (DEFAULT_LIST_LENGTH - 1))?.map((id, index) => html`\n      <li\n        slot=\"card\"\n        class=\"nfb-card nfb-carousel__card nfb-carousel__card--dark\"\n        data-index=\"${index}\"\n      >\n        <nfb-animated-hover-card\n          data-ui-el=\"carousel-card\"\n          carousel-slug=\"${this.slug}-carousel\"\n          registry-id=\"${id}\"\n          is-dark=\"true\"\n          card-type=\"carousel\"\n          bookmark-button-type=\"add\"\n          gtm-attributes=\"${this.buildGTMAttributes(id, index)}\"\n        ></nfb-animated-hover-card>\n      </li>\n    `)\n  }\n\n  render () {\n    if (this.workList?.length === 0) {\n      return html``\n    }\n\n    return html`\n      <nfb-carousel\n        data-is-loaded=\"${this._isLoading ? nothing : true}\"\n        title=\"${this.title}\"\n        id=\"${this.slug}-carousel\"\n        skip-list=\"${window.gettext('Skip This List')}\"\n        aria-label-previous=\"${window.gettext('See previous')} ${this.title}\"\n        aria-label-next=\"${window.gettext('See next')} ${this.title}\"\n        gtm-attributes=\"${JSON.stringify(this.getCarouselGTMAttributes())}\"\n        is-dark=\"true\"\n        see-more-link=\"${normanPaths.exploreByChildSubject.replace('{parentSubject}', this.parentSlug).replace('{childSubject}', this.slug)}\"\n        see-more-card-text=${this.shouldShowSeeMoreCard() ? this._defaultSeeMoreCardText : nothing}\n        is-rounded=\"true\"\n        is-clothesline=\"true\"\n      >\n        ${this.getCards()}\n      </nfb-carousel>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nfb-explore-by-child-subject-carousel': NFBExploreByChildSubjectCarousel\n  }\n}\n"],"names":["NFBExploreByChildSubjectCarousel","NFBCarouselMixin","urlSlug","store","id","index","gtmAttrs"],"sourceRoot":""}