{"version":3,"file":"js/explore-by-films-educational-subject.min.js","mappings":"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","sources":["webpack:///./src/js/helpers/page/common/error.ts","webpack:///./src/sass/sections/explore-by/educational-subject-list.sass","webpack:///./src/js/wc/explore-by/educational-subject/NFBEducationalSubjectList.ts","webpack:///./src/js/wc/explore-by/educational-subject/NFBEducationalSubjectFilter.ts","webpack:///./src/js/wc/explore-by/educational-subject/NFBEducationalSubjectTitle.ts"],"sourcesContent":["import { html } from 'lit/static-html.js'\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js'\n\nexport const getNoResultFoundMessage = (isDark: boolean) => {\n  return html`\n    <div data-cy=\"no-result-error\" class=\"nfb-error-message ${isDark ? 'nfb-error-message--dark' : ''}\">\n      <p>${window.pgettext('No result found error message', 'Sorry, none of our films matched your search criteria.')}</p>\n      <ul>\n          <li>${window.pgettext('No result found error message', 'Please check to make sure you checked off the correct filters at the top of the page.')}</li>\n          <li>${window.pgettext('No result found error message', 'Try a more general search.')}</li>\n      </ul>\n      <p>${window.pgettext('No result found error message', 'Not all films from our collection are available online.')}</p>\n      <p>\n        ${window.pgettext('No result found error message', 'It’s possible that the film you’re searching for is not on NFB.ca.')}\n        <br/>\n        ${unsafeHTML(window.interpolate(window.pgettext('No result found error message', 'Please consult the <a href=\"%s\">complete NFB Collection.</a>'), [window.gettext('https://collection.nfb.ca/')]))}\n      </p>\n    </div>`\n}\n","import {css} from 'lit';\nexport const styles = css`nfb-work-page-legend::part(container) {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\nnfb-see-more {\n  min-height: 300px;\n}\n\n.nfb-grid-list__container {\n  min-height: 300px;\n}\n\n.nfb-grid-list__container .nfb-error-message {\n  --nfb-error-message-link-color: #1C7A3E;\n  padding-top: 16px;\n}\n\n.nfb-grid-list__container .nfb-error-message a {\n  color: var(--nfb-error-message-link-color);\n}\n\n.nfb-grid-list__container .nfb-error-message a:focus-visible {\n  outline: none;\n  text-decoration-thickness: 4px;\n}\n\n.nfb-grid-list__container .nfb-error-message--dark {\n  --nfb-error-message-link-color: #05EE80;\n}`;\nexport default styles;\n","/**\n * Class NFBEducationalSubjectList\n */\n\nimport { LitElement, nothing, PropertyValues } from 'lit'\nimport { html } from 'lit/static-html.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { classMap } from 'lit-html/directives/class-map.js'\n\nimport { GTM_LIST_CATEGORY, GTM_LIST_TYPE, GTM_EVENTS } from '@src/js/constants'\nimport { getAvailabilityStatusForWork, WorkAvailabilityStatus } from '@src/js/helpers/availability'\nimport { getRestriction, getAvailabilityMessage, cardShouldBeDisabled, getNFBAddToMyListButton } from '@src/js/helpers/element/card'\nimport { getNoResultFoundMessage } from '@src/js/helpers/page/common/error'\nimport { formatDuration } from '@src/js/helpers/format'\nimport normanPaths from '@src/js/helpers/paths'\nimport { DEFAULT_FILTER, setCurrentPage, setFilter } from '@src/js/redux/educationalSubjectPageReducer'\nimport { fetchFilms, GetFilmsParams, resetFilmList } from '@src/js/redux/filmsReducer'\nimport { store, RootState } from '@src/js/redux/store'\nimport { WorkCard } from '@src/js/redux/worksReducer'\n\nimport { stringToBooleanConverter } from '@web-nfb/frontend-static/design-system/wc/_utils'\n\n// @ts-expect-error Lit Sass import\nimport cardStyleSlot from '@web-nfb/frontend-static/design-system/wc/card/NFBCardSlot.sass?lit'\n// @ts-expect-error Lit Sass import\nimport gridListStyle from '@web-nfb/frontend-static/design-system/sass/layout/grid-list.sass?lit'\n// @ts-expect-error Lit Sass import\nimport styles from '@src/sass/sections/explore-by/educational-subject-list.sass?lit'\n\n@customElement('nfb-educational-subject-list')\nexport default class NFBEducationalSubjectList extends LitElement {\n  @property({ converter: stringToBooleanConverter, attribute: 'is-dark' })\n  isDark = false\n\n  @property({ type: String, attribute: 'selected-subject' })\n  selectedSubject = ''\n\n  @property({ type: String, attribute: 'selected-sub-subject' })\n  selectedSubSubject = ''\n\n  @property({ type: Number, attribute: 'age-min' })\n  ageMin = DEFAULT_FILTER.age_min\n\n  @property({ type: Number, attribute: 'age-max' })\n  ageMax = DEFAULT_FILTER.age_max\n\n  @property({ type: String, attribute: 'language' })\n  language = ''\n\n  @state()\n  filmList: WorkCard[] = []\n\n  @state()\n  thumbnailPattern: string | null = null\n\n  @state()\n  subjectParam: string = ''\n\n  @state()\n  showSeeMore = false\n\n  @state()\n  seeMoreLoading = false\n\n  @state()\n  _isLoaded: boolean = false\n\n  @state()\n  selectedLanguage: string = window.LOCALE\n\n  @state()\n  errorMessage: string | null = null\n\n  @state()\n  availabilityStatus: WorkAvailabilityStatus = WorkAvailabilityStatus.PUBLIC\n\n  _rootState: RootState\n\n  static get styles () {\n    return [cardStyleSlot, gridListStyle, styles]\n  }\n\n  constructor () {\n    super()\n    this.onStateChanged = this.onStateChanged.bind(this)\n    store.subscribe(this.onStateChanged)\n  }\n\n  async firstUpdated () {\n    this.subjectParam = `${this.selectedSubject}/${this.selectedSubSubject}`\n\n    document.addEventListener('nfbselect:valuehaschanged', (event) => {\n      event.preventDefault()\n      this.updateURL()\n    })\n\n    document.addEventListener('nfbslider:minvaluechange', (event: any) => {\n      event.preventDefault()\n      this.ageMin = event.detail\n      this.updateURL()\n    })\n\n    document.addEventListener('nfbslider:maxvaluechange', (event: any) => {\n      event.preventDefault()\n      this.ageMax = event.detail\n      this.updateURL()\n    })\n  }\n\n  async updated (_changedProperties: PropertyValues) {\n    if ((_changedProperties.has('language') && this.language) || (_changedProperties.has('ageMin') && this.ageMin) || (_changedProperties.has('ageMax') && this.ageMax)) {\n      this._isLoaded = false\n\n      store.dispatch(resetFilmList())\n      store.dispatch(setCurrentPage(1))\n\n      await this.handleFetchFilms()\n\n      store.dispatch(setFilter({\n        language: this.selectedLanguage,\n        age_min: this.ageMin,\n        age_max: this.ageMax\n      }))\n\n      const { films } = store.getState()\n      this.filmList = films.list ?? []\n      if (!this.thumbnailPattern) this.thumbnailPattern = films.thumbnailPattern\n      this.errorMessage = films.apiError\n\n      this._isLoaded = true\n    }\n  }\n\n  updateURL = (): void => {\n    const options: HTMLElement[] = Array.from(document.querySelector('nfb-educational-subject-filter')?.shadowRoot?.querySelector('nfb-select-legacy')?.shadowRoot?.querySelector('[data-ui-el=\"nfb-form-select-trigger\"]')?.querySelectorAll('[role=\"option\"]') ?? [])\n\n    const selectedValue = (options.find((o) => o.dataset.uiSelected === 'true') as HTMLSelectElement).dataset.value as string\n\n    this.language = this.selectedLanguage = selectedValue\n\n    const searchParams = new URLSearchParams(window.location.search)\n\n    searchParams.set('language', selectedValue)\n    searchParams.set('age_level_min', this.ageMin.toString())\n    searchParams.set('age_level_max', this.ageMax.toString())\n    window.history.replaceState(null, '', `?${searchParams.toString()}`)\n  }\n\n  async handleFetchFilms (page: number | undefined = undefined) {\n    if (this.language === 'all') this.selectedLanguage = ''\n    else this.selectedLanguage = this.language\n\n    const params: GetFilmsParams = {\n      subject_category: 'education',\n      language: this.selectedLanguage,\n      subject: this.subjectParam,\n      sort: 'title',\n      ...(page ? { page } : {}),\n      ...(this.ageMin ? { age_level_min: this.ageMin } : {}),\n      ...(this.ageMax ? { age_level_max: this.ageMax } : {})\n\n    }\n    await store.dispatch(fetchFilms(params))\n  }\n\n  onStateChanged () {\n    this._rootState = store.getState()\n\n    if (store.getState().films.status === 'succeeded') {\n      const { films } = this._rootState\n      this.filmList = films?.list ?? []\n\n      if (this.filmList.length < films.countFilms!) {\n        this.showSeeMore = true\n      } else {\n        this.showSeeMore = false\n      }\n    }\n  }\n\n  getClasses (availabilityStatus: WorkAvailabilityStatus) {\n    return {\n      'nfb-bookmarks--inactive': cardShouldBeDisabled(availabilityStatus)\n    }\n  }\n\n  getGTMAttributes (film: WorkCard, index: number): string {\n    const gtmAttribute = {\n      nfb_position: (index + 1).toString(),\n      event: GTM_EVENTS.SELECT_WORK,\n      nfb_version_title: film.title,\n      nfb_list_name: `${window.pgettext('Educational subject list GTM nfb_list_name', 'Subject')}: ${this.selectedSubject}, ${this.selectedSubSubject}`,\n      nfb_list_type: GTM_LIST_TYPE.GRID,\n      nfb_list_category: GTM_LIST_CATEGORY.EXPLORE,\n      nfb_list_id: `${window.pgettext('Educational subject list GTM nfb_list_id', 'subject')}_${this.selectedSubject}_${this.selectedSubSubject}`\n    }\n\n    return JSON.stringify({\n      ...gtmAttribute,\n      nfb_version_title: film?.title\n    })\n  }\n\n  getFilmLegend (film: WorkCard) {\n    return html`\n      ${film.directors?.length\n    ? html`<nfb-work-page-creator\n        creators=\"${JSON.stringify(film.directors)}\"\n        is-unavailable=\"${cardShouldBeDisabled(this.availabilityStatus)}\"\n        is-dark=\"${this.isDark ?? nothing}\"\n      ></nfb-work-page-creator>`\n    : nothing}\n      <div class=\"nfb-legend\">\n        <nfb-work-page-legend \n          year=\"${film.year}\"\n          running-time=\"${formatDuration(film.duration)}\"\n        >\n        </nfb-work-page-legend>\n      </div>\n    `\n  }\n\n  getFilmCard (film: WorkCard, index: number) {\n    const availabilityStatus = getAvailabilityStatusForWork(film)\n    const href = normanPaths.film.replace('{slug}', film.slug)\n    const cardId = `card-${film?.id}`\n\n    return html`\n      <nfb-card\n        part=\"nfb-card\"\n        data-ui-el=\"${cardId}\"\n        class=\"${classMap(this.getClasses(availabilityStatus))}\"\n        title=\"${film.title}\"\n        is-unavailable=\"${cardShouldBeDisabled(availabilityStatus)}\"\n        href=\"${href}\"\n        default-thumbnail=\"${window.FALLBACK_THUMBNAIL_PATTERN.replace('{path}', window.FALLBACK_THUMBNAIL_PATH)}\"\n        thumbnail-path=\"${film.thumbnail}\"\n        thumbnail-url-pattern=\"${this.thumbnailPattern}\"\n        gtm-attributes=\"${this.getGTMAttributes(film, index) ?? nothing}\"\n        is-dark=\"${this.isDark ?? nothing}\"\n        hover-icon-name=\"ctrl-play\"\n      >\n        <div slot=\"legend\">\n          ${getRestriction(film, availabilityStatus, this.isDark, this._rootState.user)}\n          ${getAvailabilityMessage(availabilityStatus, film, this.isDark)}\n          ${this.getFilmLegend(film)}\n        </div>\n        ${getNFBAddToMyListButton(film.id, film.title, this.isDark)}\n      </nfb-card>\n    `\n  }\n\n  getSeeMoreCard () {\n    if (!this.filmList?.length || !this.showSeeMore) return nothing\n\n    return html`\n      <nfb-see-more\n        .seeMoreClick=\"${this.seeMoreButtonClick}\"\n        data-ui-el=\"carousel-card\"\n        text=\"${window.gettext('See more')}\"\n      ></nfb-see-more>\n    `\n  }\n\n  seeMoreButtonClick = async () => {\n    this.seeMoreLoading = true\n    const nextPage = store.getState().educationalSubjectPage.currentPage + 1\n    store.dispatch(setCurrentPage(nextPage))\n\n    await this.handleFetchFilms(store.getState().educationalSubjectPage.currentPage)\n    this.seeMoreLoading = false\n  }\n\n  render () {\n    if (this.errorMessage) {\n      return html`\n        <div class=\"nfb-grid-list__container\" data-cy=\"error-message\">\n        ${this.errorMessage}\n        </div>\n      `\n    }\n    return html`\n      <div class=\"nfb-grid-list__container\">\n        ${this._isLoaded ? nothing : html`<nfb-spinner is-loading=\"true\" size=\"sm\"></nfb-spinner>`}\n        ${this.filmList && this.filmList.length === 0 && this._isLoaded ? getNoResultFoundMessage(this.isDark) : nothing}\n        <div class=\"nfb-grid-list\">\n          ${this.filmList && this._isLoaded ? repeat(this.filmList, film => film.id, (film, index) => this.getFilmCard(film, index)) : nothing}\n          ${this.getSeeMoreCard()}\n        </div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nfb-educational-subject-list': NFBEducationalSubjectList\n  }\n}\n","/* ==========================================================================\n  NFBEducationalSubjectFilter Web Component\n  ========================================================================== */\n\nimport { LitElement, nothing, css } from 'lit'\nimport { html } from 'lit/static-html.js'\nimport { customElement, property, state, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport isEqual from 'lodash/isEqual'\n\nimport { LANGUAGE_FILTER_OPTIONS } from '@src/js/constants'\nimport { store } from '@src/js/redux/store'\nimport { stringToBooleanConverter } from '@web-nfb/frontend-static/design-system/wc/_utils'\n\nimport { WorkCard } from '@src/js/redux/worksReducer'\nimport { setFilter, DEFAULT_FILTER } from '@src/js/redux/educationalSubjectPageReducer'\n\n// @ts-expect-error Lit Sass import\nimport style from '@web-nfb/frontend-static/design-system/sass/elements/select.sass?lit'\n// @ts-expect-error Lit Sass import\nimport filterStyle from '@web-nfb/frontend-static/design-system/sass/elements/filters.sass?lit'\nimport NFBSlider from '@web-nfb/frontend-static/design-system/wc/slider/NFBSlider'\nimport NFBSelectLegacy from '@web-nfb/frontend-static/design-system/wc/filters/NFBSelectLegacy'\n\n@customElement('nfb-educational-subject-filter')\nexport default class NFBEducationalSubjectFilter extends LitElement {\n  @property({ converter: stringToBooleanConverter, attribute: 'is-dark' })\n  isDark = false\n\n  @property({ type: String, attribute: 'language' })\n  language = ''\n\n  @state()\n  list: WorkCard[] | null\n\n  @state()\n  ageRange: {min?: number, max?: number} = { min: DEFAULT_FILTER.age_min, max: DEFAULT_FILTER.age_max }\n\n  @state()\n  filterValues = DEFAULT_FILTER\n\n  @query('nfb-slider')\n  _nfbSlider!: NFBSlider\n\n  @query('nfb-select-legacy')\n  _nfbSelect!: NFBSelectLegacy\n\n  selectList: {name: string, slug: string}[]\n  minLabel: string\n\n  static styles = [style, filterStyle, css`\n    nfb-select-legacy {\n      z-index: 3;\n    }\n\n    `]\n\n  getClasses (): Record<string, boolean> {\n    return {\n      'nfb-form': true,\n      'nfb-filters': true,\n      'nfb-form--dark': this.isDark,\n      'nfb-filters--dark': this.isDark\n    }\n  }\n\n  constructor () {\n    super()\n    this.minLabel = window.pgettext('Educational subject filters', 'years old')\n    this.onStateChanged = this.onStateChanged.bind(this)\n    this.clearFilter = this.clearFilter.bind(this)\n\n    store.subscribe(this.onStateChanged)\n  }\n\n  onStateChanged () {\n    const updatedFilters = store.getState().educationalSubjectPage.filter\n\n    if (!isEqual(this.filterValues, updatedFilters)) {\n      this.ageRange = {\n        min: updatedFilters.age_min,\n        max: updatedFilters.age_max\n      }\n      this.filterValues = updatedFilters\n    }\n  }\n\n  async connectedCallback () {\n    super.connectedCallback()\n\n    this.selectList = LANGUAGE_FILTER_OPTIONS\n  }\n\n  clearFilter (): void {\n    store.dispatch(setFilter(DEFAULT_FILTER))\n\n    const options: HTMLElement[] = Array.from(this._nfbSelect?.shadowRoot?.querySelector('[data-ui-el=\"nfb-form-select-trigger\"]')?.querySelectorAll('[role=\"option\"]') ?? [])\n    const selectedValue = (options.find((o) => o.dataset.value === DEFAULT_FILTER.language) as HTMLSelectElement)\n\n    this._nfbSelect.selectOption(selectedValue)\n\n    this._nfbSlider.handleEndKnobControl(DEFAULT_FILTER.age_min, DEFAULT_FILTER.age_max)\n    this._nfbSlider.dispatchMaxValueChange()\n\n    this._nfbSlider.handleStartKnobControl(DEFAULT_FILTER.age_min, DEFAULT_FILTER.age_max)\n    this._nfbSlider.dispatchMinValueChange()\n  }\n\n  render () {\n    if (this.ageRange) {\n      return html`\n        <div class=\"${classMap(this.getClasses())}\">\n          <nfb-select-legacy\n            input-id=\"explore-by-educational-subject-language\"\n            list-id=\"explore-by-educational-subject-language\"\n            option-list=\"${JSON.stringify(this.selectList)}\"\n            is-compact=\"true\"\n            is-dark=\"${this.isDark}\"\n            selected-value=\"${this.language}\"\n          >\n          </nfb-select-legacy>\n          <nfb-slider\n            slider-min=\"${DEFAULT_FILTER.age_min}\"\n            slider-max=\"${DEFAULT_FILTER.age_max}\"\n            knob-start=\"${this.ageRange?.min}\"\n            min-label=\"${this.minLabel}\"\n            max-label=\"${this.ageRange?.max === DEFAULT_FILTER.age_max ? '+' : this.minLabel}\"\n            knob-end=\"${this.ageRange?.max}\"\n            input-length-max=\"2\"\n            input-length-min=\"1\"\n            slider-id=\"age\"\n            is-dark=\"${this.isDark || nothing}\"\n          >\n          </nfb-slider>\n  ${!isEqual(this.filterValues, DEFAULT_FILTER)\n    ? html`\n    <nfb-button\n      text=\"${window.pgettext('Educational subject filters', 'Clear')}\"\n      secondary-variant=\"discreet\"\n      @click=\"${this.clearFilter}\"\n    >\n    </nfb-button>`\n    : nothing}\n      </div>`\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nfb-educational-subject-filter': NFBEducationalSubjectFilter\n  }\n}\n","import { LitElement, nothing } from 'lit'\nimport { html } from 'lit/static-html.js'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { store } from '@src/js/redux/store'\n\n// @ts-expect-error Lit Sass import\nimport pageStyles from '@web-nfb/frontend-static/design-system/sass/elements/page.sass?lit'\n\n@customElement('nfb-educational-subject-title')\nexport default class NFBEducationalSubjectTitle extends LitElement {\n  @property({ type: String, attribute: 'subject' })\n  subject = ''\n\n  @state()\n  filmTotal: number | null\n\n  static styles = [pageStyles]\n\n  constructor () {\n    super()\n    this.onStateChanged = this.onStateChanged.bind(this)\n    store.subscribe(this.onStateChanged)\n  }\n\n  onStateChanged () {\n    this.filmTotal = store.getState().films.countFilms\n  }\n\n  render () {\n    return html`\n      <div class=\"nfb-page__title\">\n        <h1>${this.subject}<span> ${this.filmTotal ? `(${this.filmTotal})` : nothing}</span></h1>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nfb-educational-subject-title': NFBEducationalSubjectTitle\n  }\n}\n"],"names":["getNoResultFoundMessage","isDark","NFBEducationalSubjectList","selectedValue","o","searchParams","nextPage","store","event","_changedProperties","films","page","params","availabilityStatus","card","film","index","gtmAttribute","format","href","cardId","repeat","NFBEducationalSubjectFilter","updatedFilters","NFBEducationalSubjectTitle"],"sourceRoot":""}