{"version":3,"file":"js/explore-by-subject-film-list-page.min.js","mappings":"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","sources":["webpack:///./src/js/wc/explore-by/subject/NFBExploreBySubjectFilmList.ts","webpack:///./src/sass/wc/NFBExploreByPages.sass"],"sourcesContent":["/**\n * Class NFBExploreBySubjectFilmList.\n *\n */\n\nimport { LitElement, html, nothing, PropertyValues } 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_GRID_LIST_LENGTH, ERROR_MESSAGE } from '@src/js/constants'\nimport { GTMSelectWork } from '@src/js/types/GTM'\nimport { setCurrentOpenCard } from '@src/js/redux/animatedHoverCardReducer'\nimport { bookmarkButtonType } from '@src/js/wc/cards/NFBDisplayWorkCard'\n\nimport { fetchExploreByChildSubject, setCurrentPage, resetList } from '@src/js/redux/exploreBySubjectReducer'\n\n// @ts-expect-error Lit Sass import\nimport style from '@src/sass/wc/NFBExploreByPages.sass?lit'\n// @ts-expect-error Lit Sass import\nimport gridListStyles from '@web-nfb/frontend-static/design-system/sass/layout/grid-list.sass?lit'\n\n@customElement('nfb-explore-by-subject-film-list')\nexport default class NFBExploreBySubjectFilmList extends LitElement {\n  @property({ type: String })\n  language = ''\n\n  @property({ type: String })\n  title: string\n\n  @property({ type: String, attribute: 'parent-slug' })\n  parentSlug = ''\n\n  @property({ type: String })\n  slug: string\n\n  @state()\n  isLoading: boolean = true\n\n  @state()\n  workIdList: number[] | null\n\n  @state()\n  showSeeMore = false\n\n  @state()\n  seeMoreLoading = false\n\n  @state()\n  errorMessage: string | null = null\n\n  static get styles () {\n    return [gridListStyles, style]\n  }\n\n  _rootState: RootState\n  _defaultSeeMoreCardText = window.gettext('See more')\n  _urlPath = ''\n  gtmAttribute: object = {}\n\n  constructor () {\n    super()\n    this.onStateChanged = this.onStateChanged.bind(this)\n    store.subscribe(this.onStateChanged)\n  }\n\n  protected firstUpdated (): void {\n    this._urlPath = `${this.parentSlug}/${this.slug}`\n    document.addEventListener('nfbselect:valuehaschanged', (event) => {\n      event.preventDefault()\n      this.updateURL()\n    })\n  }\n\n  async updated (_changedProperties: PropertyValues) {\n    if (_changedProperties.has('language') && this.language) {\n      this.isLoading = true\n      if (this.language === 'all') this.language = ''\n\n      store.dispatch(resetList(this._urlPath))\n      await store.dispatch(fetchExploreByChildSubject({\n        slug: this._urlPath,\n        size: DEFAULT_GRID_LIST_LENGTH,\n        language: this.language\n      }))\n\n      this._rootState = store.getState()\n      this.workIdList = this._rootState.exploreBySubject.list[this._urlPath]\n      this.errorMessage = this._rootState.exploreBySubject.apiError\n      store.dispatch(setCurrentOpenCard(null))\n      store.dispatch(setCurrentPage(1))\n      this.isLoading = false\n    }\n  }\n\n  updateURL = (): void => {\n    const options: HTMLElement[] = Array.from(document.querySelector('[data-ui-el=\"nfb-form-select-trigger\"]')?.querySelectorAll('[role=\"option\"]') ?? [])\n    const selectedValue = options.find((o) => o.dataset.uiSelected === 'true')\n    this.language = selectedValue?.dataset.value ?? ''\n\n    const searchParams = new URLSearchParams(window.location.search)\n    searchParams.set('language', this.language)\n    window.history.replaceState(null, '', `?${searchParams.toString()}`)\n  }\n\n  onStateChanged () {\n    this._rootState = store.getState()\n\n    if (store.getState().works.status === 'succeeded') {\n      const { exploreBySubject } = this._rootState\n\n      this.workIdList = exploreBySubject?.list[this._urlPath]\n\n      if (this.workIdList.length < exploreBySubject.totalCount[this._urlPath]!) {\n        this.showSeeMore = true\n      } else {\n        this.showSeeMore = false\n      }\n    }\n  }\n\n  shouldShowSeeMoreCard () {\n    if (!this.workIdList?.length || !this.showSeeMore) return nothing\n\n    return html`\n      <nfb-see-more\n        is-loading=\"${this.seeMoreLoading}\"\n        data-ui-el=\"carousel-card\"\n        .seeMoreClick=\"${this.loadMoreButtonClick}\"\n        text=\"${window.pgettext('User Profile', 'Load More')}\"\n        is-dark=\"true\"\n        is-rounded=\"true\"\n      ></nfb-see-more>`\n  }\n\n  buildGTMAttributes (id: number, index: number) {\n    const gtmAttrs: GTMSelectWork = {\n      nfb_list_type: GTM_LIST_TYPE.GRID,\n      nfb_list_category: GTM_LIST_CATEGORY.SUBJECTS,\n      nfb_list_name: this.title,\n      nfb_list_id: `${this.parentSlug}_${this.slug}`,\n      event: GTM_EVENTS.SELECT_WORK,\n      nfb_version_title: selectWorkById(this._rootState.works, id)?.title,\n      nfb_position: (index + 1).toString()\n    }\n\n    return JSON.stringify(gtmAttrs)\n  }\n\n  loadMoreButtonClick = async () => {\n    this.seeMoreLoading = true\n    const nextPage = store.getState().exploreBySubject.currentPage + 1\n    store.dispatch(setCurrentPage(nextPage))\n    await store.dispatch(fetchExploreByChildSubject({\n      slug: this._urlPath,\n      size: DEFAULT_GRID_LIST_LENGTH,\n      language: this.language,\n      page: nextPage\n    }))\n    this.seeMoreLoading = false\n  }\n\n  render () {\n    if (this.errorMessage) {\n      return html`\n        <div class=\"nfb-error\" data-cy=\"error-message\">\n        ${this.errorMessage}\n        </div>\n      `\n    } else if (this.workIdList?.length === 0 && !this.isLoading) {\n      return html`<span data-cy=\"no-result-error\" class=\"nfb-error\">${ERROR_MESSAGE.NO_RESULT}</span>`\n    }\n\n    if (this.isLoading) {\n      return html`<nfb-spinner is-loading=\"true\" size=\"sm\"></nfb-spinner>`\n    }\n\n    return html`\n      <div class=\"nfb-grid-list nfb-grid-list--dark\">\n    ${this.workIdList?.map((id, index) => {\n    return html`\n      <nfb-animated-hover-card\n        registry-id=\"${id}\"\n        bookmark-button-type=\"${bookmarkButtonType.add}\"\n        is-dark=\"true\"\n        gtm-attributes=\"${this.buildGTMAttributes(id, index)}\"\n      >\n      </nfb-animated-hover-card>\n      `\n  })}\n    ${this.shouldShowSeeMoreCard()}\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nfb-explore-by-subject-film-list': NFBExploreBySubjectFilmList\n  }\n}\n","import {css} from 'lit';\nexport const styles = css`nfb-see-more::part(card) {\n  aspect-ratio: 16/9;\n  height: fit-content;\n  padding-bottom: 0;\n}\n\n.nfb-error {\n  color: #fff;\n}`;\nexport default styles;\n"],"names":["NFBExploreBySubjectFilmList","selectedValue","o","searchParams","nextPage","store","event","_changedProperties","exploreBySubject","id","index","gtmAttrs"],"sourceRoot":""}