{"version":3,"file":"js/explore-by-director-list.min.js","mappings":"69BAwBA,IAAqBA,EAArB,cAA0D,IAAW,CA8BnE,aAAe,CACb,MAAM,EAvBR,eAAqB,GASrB,mBAAyB,GAUzB,6BAA0B,OAAO,QAAQ,UAAU,EACnD,kBAAuB,CAAC,EAItB,KAAK,iBAAmB,KAAK,iBAAiB,KAAK,IAAI,CACzD,CAXA,WAAW,QAAU,CACnB,MAAO,CAAC,IAAmB,GAAY,CACzC,CAWU,cAAsB,CAC9B,KAAK,cAAc,iBAAiB,IAAgB,QAAS,KAAK,gBAAgB,CACpF,CAEM,kBAAoC,gCA/D5C,MAiEI,MAAMC,EAAA,EAAM,YAAS,MAAwB,CAAE,KAAM,KAAK,KAAM,SAAU,OAAO,MAAO,CAAC,CAAC,EAE1F,KAAK,WAAaA,EAAA,EAAM,SAAS,EACjC,KAAK,SAAW,KAAK,WAAW,cAAc,KAAK,KAAK,IAAI,EAC5D,KAAK,eAAiB,KAAK,WAAW,cAAc,WAAW,KAAK,IAAI,EAEpE,KAAK,eAAiB,OACxB,KAAK,cAAgB,MAGnB,OAAK,WAAL,cAAe,UAAW,GAC5B,KAAK,aAAa,gBAAiB,MAAM,EAE3C,KAAK,UAAY,GACjB,KAAK,cAAc,oBAAoB,IAAgB,QAAS,KAAK,gBAAgB,CACvF,CAAC,CAAD,CAEA,0BAA+C,CAC7C,MAAO,CACL,cAAe,KAAc,SAC7B,kBAAmB,KAAkB,YACrC,cAAe,KAAK,MACpB,YAAa,KAAK,IACpB,CACF,CAEA,mBAAoBC,EAAYC,EAAe,CA3FjD,MA4FI,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,CArGd,QAsGI,GAAI,KAAK,UACP,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAaT,MAAMC,EAAqB,KAAK,cAAkB,KAAsB,EAAK,KAE7E,OAAO,UAAK,WAAL,cAAe,MAAM,EAAGA,CAAiB,IAAzC,cAA4C,IAAI,CAACH,EAAIC,OAAU;AAAA;AAAA;AAAA;AAAA,sBAIpDA,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,CAzIZ,MA0II,QAAI,OAAK,WAAL,cAAe,UAAW,KACrB,WAGF;AAAA;AAAA,iBAEM,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,UAAU,QAAQ,SAAU,KAAK,IAAI,CAAC;AAAA,6BAC9C,KAAK,cAAgB,KAAK,wBAA0B,IAAO;AAAA;AAAA;AAAA;AAAA,UAI9E,KAAK,SAAS,CAAC;AAAA,sBAEvB,CACF,EArIE,MADC,MAAS,CAAE,KAAM,MAAO,CAAC,GADPH,EAEnB,oBAGA,MADC,MAAS,CAAE,KAAM,MAAO,CAAC,GAJPA,EAKnB,qBAGA,MADC,MAAM,GAPYA,EAQnB,yBAGA,MADC,MAAM,GAVYA,EAWnB,wBAGA,MADC,MAAM,GAbYA,EAcnB,8BAGA,MADC,MAAM,GAhBYA,EAiBnB,6BAGA,MADC,KAAM,cAAc,GAnBFA,EAoBnB,6BApBmBA,EAArB,MADC,MAAc,kCAAkC,GAC5BA,CAA4B,C,kDCpBjD,WAHsB;AAAA;AAAA,E","sources":["webpack:///./src/js/wc/carousels/NFBExploreByDirectorCarousel.ts","webpack:///./src/sass/wc/NFBSpinnerContainer.sass"],"sourcesContent":["/**\n * Class NFBExploreByDirectorCarousel.\n *\n */\n\nimport { LitElement, html, nothing } from 'lit'\nimport { customElement, property, state, query } from 'lit/decorators.js'\n\nimport NFBCarousel, { CAROUSEL_EVENTS } from '@web-nfb/frontend-static/design-system/wc/carousel/NFBCarousel'\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 } from '@src/js/constants'\nimport { CarouselGTMAttrs } from '@src/js/wc/carousels/base/NFBNormanCarousel'\nimport normanPaths from '@src/js/helpers/paths'\n\nimport { fetchWorkListByDirector } from '@src/js/redux/directorsPageReducer'\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\n@customElement('nfb-explore-by-director-carousel')\nexport default class NFBExploreByDirectorCarousel extends LitElement {\n  @property({ type: String })\n  slug: string\n\n  @property({ type: String })\n  title: string\n\n  @state()\n  isLoading: boolean = true\n\n  @state()\n  workList: number[] | []\n\n  @state()\n  totalWorkCount: number\n\n  @state()\n  shouldSeeMore: boolean = false\n\n  @query('nfb-carousel')\n  nfbCarouselEl: NFBCarousel\n\n  static get styles () {\n    return [carouselSlotStyle, spinnerStyle]\n  }\n\n  _rootState: RootState\n  _defaultSeeMoreCardText = window.gettext('See more')\n  gtmAttribute: object = {}\n\n  constructor () {\n    super()\n    this.onCarouselVisble = this.onCarouselVisble.bind(this)\n  }\n\n  protected firstUpdated (): void {\n    this.nfbCarouselEl.addEventListener(CAROUSEL_EVENTS.VISIBLE, this.onCarouselVisble)\n  }\n\n  async onCarouselVisble () : Promise<void> {\n    // We want to load data only if carousel is visible\n    await store.dispatch(fetchWorkListByDirector({ slug: this.slug, language: window.LOCALE }))\n\n    this._rootState = store.getState()\n    this.workList = this._rootState.directorsPage.list[this.slug]\n    this.totalWorkCount = this._rootState.directorsPage.totalCount[this.slug]\n\n    if (this.totalWorkCount > DEFAULT_LIST_LENGTH) {\n      this.shouldSeeMore = true\n    }\n\n    if (this.workList?.length === 0) {\n      this.setAttribute('data-is-empty', 'true')\n    }\n    this.isLoading = false\n    this.nfbCarouselEl.removeEventListener(CAROUSEL_EVENTS.VISIBLE, this.onCarouselVisble)\n  }\n\n  getCarouselGTMAttributes () : CarouselGTMAttrs {\n    return {\n      nfb_list_type: GTM_LIST_TYPE.CAROUSEL,\n      nfb_list_category: GTM_LIST_CATEGORY.FILMOGRAPHY,\n      nfb_list_name: this.title,\n      nfb_list_id: this.slug\n    }\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\n    const maxCardsToDisplay = (this.shouldSeeMore) ? (DEFAULT_LIST_LENGTH - 1) : DEFAULT_LIST_LENGTH\n\n    return this.workList?.slice(0, maxCardsToDisplay)?.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        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.directors.replace('{slug}', this.slug)}\"\n        see-more-card-text=${this.shouldSeeMore ? 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-director-carousel': NFBExploreByDirectorCarousel\n  }\n}\n","import {css} from 'lit';\nexport const styles = css`.spinner-container {\n  min-height: 128px;\n}`;\nexport default styles;\n"],"names":["NFBExploreByDirectorCarousel","store","id","index","gtmAttrs","maxCardsToDisplay"],"sourceRoot":""}