{"version":3,"file":"js/explore-by-subject-hub.min.js","mappings":"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","sources":["webpack:///./src/sass/wc/NFBSubjectHighlightCard.sass","webpack:///./src/sass/elements/corner-brackets.sass","webpack:///./src/js/wc/explore-by/subject/NFBSubjectHighlightCard.ts","webpack:///./src/sass/wc/NFBExploreBySubjectHub.sass","webpack:///./src/js/wc/explore-by/subject/NFBExploreBySubjectHub.ts"],"sourcesContent":["import {css} from 'lit';\nexport const styles = css`.nfb-subject-highlight-card {\n  display: flex;\n  width: 100%;\n  aspect-ratio: 171/104;\n  align-items: stretch;\n  justify-content: stretch;\n  position: relative;\n  text-decoration: none;\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n@media screen and (min-width: 990px), print {\n  .nfb-subject-highlight-card {\n    aspect-ratio: 316/104;\n  }\n}\n.nfb-subject-highlight-card nfb-thumbnail {\n  position: absolute;\n  z-index: -1;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.nfb-subject-highlight-card nfb-thumbnail::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: #000000;\n  opacity: 0.5;\n}\n\n.nfb-subject-highlight-card span {\n  font-family: \"Elza Round\", Georgia, serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-style: normal;\n  font-weight: 600;\n  font-size: 1.125rem;\n  line-height: 1.25rem;\n  color: var(--nfb-page-text-color);\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  transition: color 0.35s;\n  margin: 8px;\n  padding: 8px;\n}\n\n@media screen and (max-width: 990px), print {\n  .nfb-subject-highlight-card span {\n    font-family: \"Elza Round\", Georgia, serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n    font-style: normal;\n    font-weight: 600;\n    font-size: 1rem;\n    line-height: 1.25rem;\n    color: var(--nfb-page-text-color);\n  }\n}\n.nfb-subject-highlight-card:hover span, .nfb-subject-highlight-card:focus-visible span {\n  color: #05EE80;\n}\n\n.nfb-subject-highlight-card:focus-visible {\n  outline: solid 2px #05EE80;\n}`;\nexport default styles;\n","import {css} from 'lit';\nexport const styles = css`.nfb-corner-brackets {\n  --nfb-corner-brackets-width: 15px;\n  --nfb-corner-brackets-color: #D4D3D6;\n  --nfb-corner-brackets-thickness: 2px;\n  position: relative;\n}\n\n.nfb-corner-brackets::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(to right, var(--nfb-corner-brackets-color) var(--nfb-corner-brackets-thickness), transparent var(--nfb-corner-brackets-thickness)) 0 0, linear-gradient(to right, var(--nfb-corner-brackets-color) var(--nfb-corner-brackets-thickness), transparent var(--nfb-corner-brackets-thickness)) 0 100%, linear-gradient(to left, var(--nfb-corner-brackets-color) var(--nfb-corner-brackets-thickness), transparent var(--nfb-corner-brackets-thickness)) 100% 0, linear-gradient(to left, var(--nfb-corner-brackets-color) var(--nfb-corner-brackets-thickness), transparent var(--nfb-corner-brackets-thickness)) 100% 100%, linear-gradient(to bottom, var(--nfb-corner-brackets-color) var(--nfb-corner-brackets-thickness), transparent var(--nfb-corner-brackets-thickness)) 0 0, linear-gradient(to bottom, var(--nfb-corner-brackets-color) var(--nfb-corner-brackets-thickness), transparent var(--nfb-corner-brackets-thickness)) 100% 0, linear-gradient(to top, var(--nfb-corner-brackets-color) var(--nfb-corner-brackets-thickness), transparent var(--nfb-corner-brackets-thickness)) 0 100%, linear-gradient(to top, var(--nfb-corner-brackets-color) var(--nfb-corner-brackets-thickness), transparent var(--nfb-corner-brackets-thickness)) 100% 100%;\n  background-repeat: no-repeat;\n  background-size: var(--nfb-corner-brackets-width) var(--nfb-corner-brackets-width);\n  opacity: 0.1;\n  transition: opacity 0.35s;\n}\n\na:has(.nfb-corner-brackets):hover .nfb-corner-brackets::after, a:has(.nfb-corner-brackets):focus-visible .nfb-corner-brackets::after {\n  opacity: 1;\n}`;\nexport default styles;\n","import { LitElement, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport normanPaths from '@src/js/helpers/paths'\n\n// @ts-expect-error Lit Sass import\nimport styles from '@src/sass/wc/NFBSubjectHighlightCard.sass?lit'\n// @ts-expect-error Lit Sass import\nimport cornerStyles from '@src/sass/elements/corner-brackets.sass?lit'\n\n@customElement('nfb-subject-highlight-card')\nexport class NFBSubjectHighlightCard extends LitElement {\n  static styles = [styles, cornerStyles]\n\n  @property({ type: String })\n  title: string = ''\n\n  @property({ type: String })\n  slug: string = ''\n\n  @property({ type: String, attribute: 'thumbnail-path' })\n  thumbnailPath: string = ''\n\n  @property({ type: String, attribute: 'thumbnail-pattern' })\n  thumbnailPattern: string = ''\n\n  _defaultThumbnailURL = window.FALLBACK_THUMBNAIL_PATTERN\n    .replace('{path}', 'nfb_tube_static/medias/images/placeholder_16x9.png')\n    .replace('{width}', '1280')\n    .replace('{height}', '0')\n\n  render () {\n    return html`\n      <a \n        href=\"${normanPaths.exploreBySubject.replace('{parentSubject}', this.slug)}\"\n        class=\"nfb-subject-highlight-card\"\n      >\n        <span class=\"nfb-corner-brackets\">${this.title}</span>\n        <nfb-thumbnail\n          show-loader=\"false\"\n          path=\"${this.thumbnailPath}\"\n          url-pattern=\"${this.thumbnailPattern}\"\n          default-url=\"${this._defaultThumbnailURL}\"\n          sizes=\"(max-width: 640px) calc(50vw - 6rem), (max-width: 900px) calc(33vw - 7rem), calc(25vw - 9rem)\"\n        ></nfb-thumbnail>\n      </a>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nfb-subject-highlight-card': NFBSubjectHighlightCard\n  }\n}\n","import {css} from 'lit';\nexport const styles = css`.nfb-grid-list {\n  --nb-columns: 3;\n  display: grid;\n  grid-gap: 1rem;\n  grid-template-columns: repeat(var(--nb-columns), minmax(0, 1fr));\n  grid-auto-rows: 1fr;\n}\n\n@media screen and (max-width: 990px), print {\n  .nfb-grid-list {\n    --nb-columns: 2;\n  }\n}\n@media screen and (max-width: 768px), print {\n  .nfb-grid-list {\n    --nb-columns: 1;\n  }\n}\n.nfb-grid-list.nfb-grid-list--dark {\n  --nb-columns: 5;\n}\n\n@media screen and (max-width: 1440px), print {\n  .nfb-grid-list.nfb-grid-list--dark {\n    --nb-columns: 4;\n  }\n}\n@media screen and (max-width: 990px), print {\n  .nfb-grid-list.nfb-grid-list--dark {\n    --nb-columns: 3;\n  }\n}\n@media screen and (max-width: 640px), print {\n  .nfb-grid-list.nfb-grid-list--dark {\n    --nb-columns: 2;\n  }\n}\n.spinner-container {\n  position: relative;\n  min-height: 48px;\n}\n\na {\n  color: var(--nfb-page-link-color);\n}\n\n.nfb-grid-list {\n  --nb-columns: 4;\n}\n\n@media screen and (max-width: 990px), print {\n  .nfb-grid-list {\n    --nb-columns: 3;\n  }\n}\n@media screen and (max-width: 640px), print {\n  .nfb-grid-list {\n    --nb-columns: 2;\n  }\n}\n.nfb-grid-list + .nfb-listing {\n  margin-top: 4rem;\n}\n\n.nfb-listing ul {\n  padding-left: 0;\n}\n\n.nfb-listing ul a {\n  text-decoration: none;\n}\n\n.nfb-listing ul a:focus-visible {\n  outline: none;\n  text-decoration: underline;\n  color: var(--nfb-listing-link-hover);\n}`;\nexport default styles;\n","import { LitElement, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js'\nimport { Unsubscribe } from '@reduxjs/toolkit'\n\nimport { store } from '@src/js/redux/store'\nimport {\n  fetchSubjectList,\n  selectHighlight,\n  selectNotHighlight,\n  SubjectInfo\n} from '@src/js/redux/subjectsReducer'\nimport normanPaths from '@src/js/helpers/paths'\n\nimport '@src/js/wc/explore-by/subject/NFBSubjectHighlightCard'\n\n// @ts-expect-error Lit Sass import\nimport listingStyles from '@web-nfb/frontend-static/design-system/sass/elements/listing.sass?lit'\n\n// @ts-expect-error Lit Sass import\nimport styles from '@src/sass/wc/NFBExploreBySubjectHub.sass?lit'\n\n@customElement('nfb-explore-by-subject-hub')\nexport class NFBExploreBySubjectHub extends LitElement {\n  static styles = [listingStyles, styles]\n\n  @state()\n  _loading: boolean = true\n\n  @state()\n  _error: boolean = false\n\n  @state()\n  _highlightList: SubjectInfo[] | undefined\n\n  @state()\n  _thumbnailPattern: string = window.THUMBNAIL_PATTERN\n\n  @state()\n  _notHighlightList: SubjectInfo[] | undefined\n\n  _unsubscribe: Unsubscribe\n\n  constructor () {\n    super()\n    this.stateChanged = this.stateChanged.bind(this)\n  }\n\n  connectedCallback (): void {\n    super.connectedCallback()\n    this._unsubscribe = store.subscribe(this.stateChanged)\n\n    store.dispatch(\n      fetchSubjectList({\n        category_type: 'general',\n        size: 100\n      })\n    )\n  }\n\n  disconnectedCallback (): void {\n    super.disconnectedCallback()\n    this._unsubscribe?.()\n  }\n\n  stateChanged (): void {\n    const subjectsState = store.getState().subjects\n    if (subjectsState.status === 'succeeded' && subjectsState.list) {\n      this._unsubscribe()\n      this._highlightList = selectHighlight(subjectsState)\n      this._thumbnailPattern = subjectsState.thumbnailPattern\n      this._notHighlightList = selectNotHighlight(subjectsState)\n      this._loading = false\n    } else if (subjectsState.status === 'failed') {\n      this._unsubscribe()\n      this._loading = false\n      this._error = true\n    }\n  }\n\n  renderHighlightGrid () {\n    return html`\n      <div class=\"nfb-grid-list\">\n        ${this._highlightList?.map(subject => html`\n          <nfb-subject-highlight-card\n            title=\"${subject.short_name ?? subject.name}\"\n            slug=\"${subject.slug}\"\n            thumbnail-path=\"${subject.image ?? ''}\"\n            thumbnail-pattern=\"${this._thumbnailPattern}\"\n          >\n          </nfb-subject-highlight-card>`\n        )}\n      </div>`\n  }\n\n  renderListing () {\n    return html`\n      <div class=\"nfb-listing nfb-listing--dark\">\n        <ul>\n          ${this._notHighlightList?.map(subject => html`\n            <li>\n              <a\n                title=\"${subject.name}\"\n                href=\"${normanPaths.exploreBySubject.replace('{parentSubject}', subject.slug)}\"\n              >\n                ${subject.name}\n              </a>\n            </li>`\n          )}\n        </ul>\n      </div>`\n  }\n\n  render () {\n    if (this._loading) {\n      return html`\n        <div class=\"spinner-container\">\n          <nfb-spinner is-loading=\"true\"></nfb-spinner>\n        </div>`\n    }\n\n    if (this._error) {\n      return html`\n        <div class=\"nfb-error-message\">\n          ${unsafeHTML(\n            window.interpolate(\n              window.pgettext(\n                'Explore subject hub',\n                'An error occurred while fetching the subjects.<br/>Please try again or <a href=\"%s\">contact us</a> if the error persists.'\n              ),\n              [window.gettext('https://help.nfb.ca/contact-the-nfb/')]\n            )\n          )}\n        </div>\n      `\n    }\n\n    return html`\n      ${this.renderHighlightGrid()}\n      ${this.renderListing()}\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nfb-explore-by-subject-hub': NFBExploreBySubjectHub\n  }\n}\n"],"names":["NFBSubjectHighlightCard","NFBExploreBySubjectHub","store","subjectsState","subject","_a"],"sourceRoot":""}