{"version":3,"file":"js/education-playlists-page.min.js","mappings":"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","sources":["webpack:///./src/sass/wc/NFBPlaylistCarousel.sass","webpack:///./src/js/wc/carousels/NFBPlaylistCarousel.ts","webpack:///./src/sass/wc/NFBPlaylistCard.sass","webpack:///./src/js/wc/cards/NFBPlaylistCard.ts"],"sourcesContent":["import {css} from 'lit';\nexport const styles = css`.spinner-container {\n  min-height: 128px;\n}\n\nnfb-boxed-carousel::part(carousel) {\n  --nfb-carousel-background-color: #F5F4F4;\n}`;\nexport default styles;\n","/**\n * Class NFBPlaylistCarousel.\n *\n */\n\nimport { LitElement, html, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { store } from '@src/js/redux/store'\nimport { fetchPlaylistTab, PlaylistTab, selectBySlug } from '@src/js/redux/playlistTabsReducer'\nimport { GTM_LIST_CATEGORY, GTM_LIST_TYPE } from '@src/js/constants'\nimport { CarouselGTMAttrs } from '@src/js/wc/carousels/base/NFBNormanCarousel'\nimport { NFBCarouselMixin } from '@src/js/wc/carousels/base/NFBCarouselMixin'\n\n// @ts-expect-error Lit Sass import\nimport boxedCarouselSlotStyle from '@web-nfb/frontend-static/design-system/wc/carousel/boxedCarousel/NFBBoxedCarouselSlot.sass?lit'\n// @ts-expect-error Lit Sass import\nimport style from '@src/sass/wc/NFBPlaylistCarousel.sass?lit'\n// @ts-expect-error Lit Sass import\nimport lazyLoadingCarousel from '@src/sass/wc/NFBLazyLoadingCarousel.sass?lit'\n\n@customElement('nfb-playlist-carousel')\nexport default class NFBPlaylistCarousel extends NFBCarouselMixin(LitElement) {\n  @property({ type: String })\n  slug: string\n\n  @property({ type: String })\n  title: string\n\n  @state()\n  playlistTab: PlaylistTab | null\n\n  @state()\n  thumbnailPattern: string\n\n  static get styles () {\n    return [boxedCarouselSlotStyle, style, lazyLoadingCarousel]\n  }\n\n  async loadCarouselData () : Promise<void> {\n    // We want to load data only if carousel is visible\n    await store.dispatch(fetchPlaylistTab(this.slug))\n    const state = store.getState().playlistTabs\n    this.playlistTab = selectBySlug(state, this.slug)\n    this.thumbnailPattern = state.thumbnailPattern\n  }\n\n  getGTMAttributes () : CarouselGTMAttrs {\n    return {\n      nfb_list_type: GTM_LIST_TYPE.CAROUSEL,\n      nfb_list_category: GTM_LIST_CATEGORY.PROGRAMMING,\n      nfb_list_name: this.title,\n      nfb_list_id: this.slug\n    }\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.playlistTab?.items.map((item, i) => html`\n      <li\n        slot=\"card\"\n        class=\"nfb-card nfb-carousel__card\"\n        data-index=\"${i}\"\n      >\n        <nfb-playlist-card\n          data-ui-el=\"carousel-card\"\n          index=\"${i}\"\n          slug=\"${item.slug}\"\n          title=\"${item.title}\"\n          description=\"${item.description}\"\n          thumbnail-mode=\"${item.thumbnail_mode}\"\n          thumbnail-list=\"${JSON.stringify(item.thumbnails)}\"\n          thumbnail-pattern=\"${this.thumbnailPattern}\"\n        ></nfb-playlist-card>\n      </li>\n    `)\n  }\n\n  render () {\n    return html`\n      <nfb-boxed-carousel\n        data-is-loaded=\"${this._isLoading ? nothing : true}\"\n        title=\"${this.title}\"\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.getGTMAttributes())}\"\n      >\n        ${this.getCards()}\n      </nfb-boxed-carousel>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nfb-playlist-carousel': NFBPlaylistCarousel\n  }\n}\n","import {css} from 'lit';\nexport const styles = css`._nfb--is-link-hover:hover {\n  cursor: pointer;\n  color: #263ea6 !important;\n  color: var(--nfb-link--hover-color) !important;\n}\n\n._nfb--is-link {\n  cursor: pointer;\n  color: #263ea6 !important;\n  color: var(--nfb-link--hover-color) !important;\n}\n\n._nfb--is-inactive {\n  pointer-events: none !important;\n  color: #c0bfbe !important;\n  user-select: none !important;\n}\n\n._nfb--is-inactive * {\n  pointer-events: none !important;\n  color: #c0bfbe !important;\n  user-select: none !important;\n}\n\n._nfb--is-inactive img {\n  opacity: 50% !important;\n}\n\n._nfb--is-top-index {\n  z-index: 105 !important;\n}\n\n._nfb--is-high-index {\n  z-index: 99 !important;\n}\n\n._nfb--is-medium-index {\n  z-index: 60 !important;\n}\n\n._nfb--is-low-index {\n  z-index: 40 !important;\n}\n\n._nfb--is-bottom-index {\n  z-index: 20 !important;\n}\n\n._nfb--is-caret {\n  display: inline-block;\n  vertical-align: middle;\n  width: 0;\n  height: 0;\n  margin-left: 2px;\n  border-top: 4px dashed;\n  border-right: 4px solid rgba(0, 0, 0, 0);\n  border-left: 4px solid rgba(0, 0, 0, 0);\n}\n\n._nfb--has-fading-edges--right {\n  position: relative;\n}\n\n._nfb--has-fading-edges--right:after {\n  content: \"\";\n  pointer-events: none;\n  height: 100%;\n  width: 15%;\n  position: absolute;\n  background-color: #fff;\n  mask-image: linear-gradient(to right, transparent 15%, white 85%);\n  -webkit-mask-image: linear-gradient(to right, transparent 15%, white 85%);\n  right: -5px;\n  top: 0;\n}\n\n._nfb--has-fading-edges--left {\n  position: relative;\n}\n\n._nfb--has-fading-edges--left:before {\n  content: \"\";\n  pointer-events: none;\n  height: 100%;\n  width: 15%;\n  position: absolute;\n  background-color: #fff;\n  mask-image: linear-gradient(to left, transparent 15%, white 85%);\n  -webkit-mask-image: linear-gradient(to left, transparent 15%, white 85%);\n  left: -5px;\n  top: 0;\n}\n\n._nfb--has-hidden-scrollbar {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n._nfb--has-hidden-scrollbar::-webkit-scrollbar {\n  display: none;\n  width: 0 !important;\n}\n\n:root {\n  --clamped-max-lines: 3;\n}\n\n._nfb--has-clamped-text, .nfb-card__description {\n  display: -webkit-box !important;\n  -webkit-line-clamp: var(--clamped-max-lines);\n  -webkit-box-orient: vertical;\n  overflow: hidden !important;\n  word-break: normal !important;\n}\n\n._nfb--has-truncated-text {\n  white-space: nowrap !important;\n  overflow: hidden !important;\n  text-overflow: ellipsis;\n}\n\n._nfb--has-top-horizontal-line {\n  position: relative;\n  display: block;\n}\n\n._nfb--has-top-horizontal-line:before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1.5rem;\n  height: 4px;\n  background-color: #000;\n  content: \"\";\n}\n\n._nfb--has-bottom-horizontal-line {\n  position: relative;\n  display: block;\n}\n\n._nfb--has-bottom-horizontal-line:after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 1.5rem;\n  height: 4px;\n  background-color: #000;\n  content: \"\";\n}\n\n._nfb--has-red-horizontal-lines:before, ._nfb--has-red-horizontal-lines::after {\n  background-color: #db3934;\n}\n\n._nfb--has-blue-horizontal-lines:before, ._nfb--has-blue-horizontal-lines::after {\n  background-color: #263ea6;\n}\n\n._nfb--has-blue-400-horizontal-lines:before, ._nfb--has-blue-400-horizontal-lines::after {\n  background-color: #0085ca;\n}\n\n._nfb--has-blue-700-horizontal-lines:before, ._nfb--has-blue-700-horizontal-lines::after {\n  background-color: #003a58;\n}\n\n._nfb--has-orange-horizontal-lines:before, ._nfb--has-orange-horizontal-lines::after {\n  background-color: #ff5c39;\n}\n\n._nfb--has-yellow-horizontal-lines:before, ._nfb--has-yellow-horizontal-lines::after {\n  background-color: #fbd31e;\n}\n\n._nfb--has-green-horizontal-lines:before, ._nfb--has-green-horizontal-lines::after {\n  background-color: #c3d91c;\n}\n\n._nfb--has-turquoise-horizontal-lines:before, ._nfb--has-turquoise-horizontal-lines::after {\n  background-color: #2bc0b3;\n}\n\n._nfb--has-violet-horizontal-lines:before, ._nfb--has-violet-horizontal-lines::after {\n  background-color: #862899;\n}\n\n._nfb--has-purple-horizontal-lines:before, ._nfb--has-purple-horizontal-lines::after {\n  background-color: #862899;\n}\n\n._nfb--has-pink-horizontal-lines:before, ._nfb--has-pink-horizontal-lines::after {\n  background-color: #f13c6d;\n}\n\n._nfb--has-red-background {\n  background-color: #db3934;\n}\n\n._nfb--has-blue-background {\n  background-color: #263ea6;\n}\n\n._nfb--has-blue-400-background {\n  background-color: #0085ca;\n}\n\n._nfb--has-blue-700-background {\n  background-color: #003a58;\n}\n\n._nfb--has-orange-background {\n  background-color: #ff5c39;\n}\n\n._nfb--has-yellow-background {\n  background-color: #fbd31e;\n}\n\n._nfb--has-green-background {\n  background-color: #c3d91c;\n}\n\n._nfb--has-turquoise-background {\n  background-color: #2bc0b3;\n}\n\n._nfb--has-violet-background {\n  background-color: #862899;\n}\n\n._nfb--has-purple-background {\n  background-color: #862899;\n}\n\n._nfb--has-pink-background {\n  background-color: #f13c6d;\n}\n\n._nfb--has-rounded-corners {\n  border-radius: 6px;\n  overflow: hidden;\n}\n\n.nfb-card__description {\n  display: block;\n  --clamped-max-lines: 4;\n}\n\n.nfb-card__thumbnail-container {\n  aspect-ratio: 16/9;\n  position: relative;\n}\n\n.nfb-card__thumbnail-grid-container {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: 1fr 1fr;\n  gap: 4px;\n  aspect-ratio: 16/9;\n}\n\n.nfb-card__thumbnail {\n  object-fit: cover;\n  overflow: hidden;\n  position: relative;\n}\n\n.nfb-card__thumbnail-icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 48px;\n  height: 48px;\n  border-radius: 999px;\n  background-color: #000;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  box-sizing: content-box;\n  transition: opacity 0.15s ease-out;\n}\n\n.nfb-card__thumbnail-icon::part(icon) {\n  font-size: 1.5rem;\n  color: #fff;\n}\n\n@media (hover: hover) {\n  .nfb-card:hover .nfb-card__thumbnail-container:not(._nfb--is-inactive) .nfb-card__thumbnail-icon {\n    opacity: 1;\n  }\n  .nfb-card:hover .nfb-card__thumbnail-container:not(._nfb--is-inactive) .nfb-card__thumbnail {\n    opacity: 0.25;\n  }\n}`;\nexport default styles;\n","/**\n * Class NFBPlaylistCard.\n *\n * To be displayed in NFBPlaylistCarousel\n */\n\nimport { LitElement, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport normanPaths from '@src/js/helpers/paths'\nimport { stripTags } from '@src/js/helpers/format'\nimport type NFBCard from '@web-nfb/frontend-static/design-system/wc/card/NFBCard'\n\n// @ts-expect-error Lit Sass import\nimport style from '@src/sass/wc/NFBPlaylistCard.sass?lit'\nimport { GTM_EVENTS } from '@src/js/constants'\n\nconst THUMBNAIL_MODE = {\n  SINGLE: 'single',\n  MULTIPLE: '4UP'\n}\n\n@customElement('nfb-playlist-card')\nexport default class NFBPlaylistCard extends LitElement {\n  @property({ type: Number })\n  index: number\n\n  @property({ type: String })\n  slug: string\n\n  @property({ type: String })\n  title: string\n\n  @property({ type: String })\n  description: string\n\n  @property({ type: String })\n  url: string\n\n  @property({ type: String, attribute: 'thumbnail-mode' })\n  thumbnailMode: string\n\n  @property({ type: Array, attribute: 'thumbnail-list' })\n  thumbnailList: string[]\n\n  @property({ type: String, attribute: 'thumbnail-pattern' })\n  thumbnailPattern: string = window.THUMBNAIL_PATTERN\n\n  static get styles () {\n    return [style]\n  }\n\n  getGTMAttributes () {\n    return JSON.stringify({\n      nfb_position: this.index,\n      event: GTM_EVENTS.SELECT_WORK,\n      nfb_version_title: this.title,\n      nfb_list_name: this.title,\n      nfb_list_type: 'carousel',\n      nfb_list_category: 'programming',\n      nfb_list_id: `edu-playlist-carousel-${this.slug}`\n    })\n  }\n\n  getThumbnail () {\n    switch (this.thumbnailMode) {\n    case THUMBNAIL_MODE.MULTIPLE:\n      return html`\n        <div class=\"nfb-card__thumbnail-grid-container\">\n          ${this.thumbnailList?.map(thumb => html`\n          <nfb-thumbnail\n            class=\"nfb-card__thumbnail\"\n            aria-hidden=\"true\"\n            title=\"${this.title}\"\n            path=\"${thumb}\"\n            url-pattern=\"${this.thumbnailPattern}\"\n            sizes=\"(max-width: 380px) 25vw, (max-width: 767px) 15vw, 10vw\"\n            show-loader=\"false\"\n          ></nfb-thumbnail>\n          `)}\n        </div>`\n\n    case THUMBNAIL_MODE.SINGLE:\n      return html`\n        <nfb-thumbnail\n          class=\"nfb-card__thumbnail\"\n          aria-hidden=\"true\"\n          title=\"${this.title}\"\n          path=\"${this.thumbnailList[0] ? this.thumbnailList[0] : nothing}\"\n          url-pattern=\"${this.thumbnailPattern}\"\n          sizes=\"(max-width: 380px) 49vw, (max-width: 767px) 31vw, 22vw\"\n        ></nfb-thumbnail>`\n    }\n  }\n\n  getIsInert (): boolean {\n    return (this.shadowRoot?.querySelector('nfb-carousel-card') as NFBCard)?.getIsInert()\n  }\n\n  getCardElement (): HTMLElement {\n    return (this.shadowRoot?.querySelector('nfb-carousel-card') as NFBCard) ?? false\n  }\n\n  render () {\n    return html`\n      <nfb-carousel-card\n        class=\"nfb-card\"\n        title=\"${this.title}\"\n        href=\"${normanPaths.playlist.replace('{slug}', this.slug)}\"\n        gtm-attributes=\"${this.getGTMAttributes()}\"\n        options=\"${JSON.stringify({ defaultNumberOfCards: 3.8 })}\"\n      >\n        <div slot=\"thumbnail\">\n          <div\n            class=\"nfb-card__thumbnail-container\" \n            data-ui-el=\"nfb-card-thumbnail-container\"\n          >\n            ${this.getThumbnail()}\n            <nfb-icon class=\"nfb-card__thumbnail-icon\" name=\"play-only\"></nfb-icon>\n          </div>\n        </div>\n        <div slot=\"description\">\n          <div class=\"nfb-card__description\">\n            <span class=\"_nfb--has-clamped-text\">\n              ${stripTags(this.description)}\n            </span>\n          </div>\n        </div>\n      </nfb-carousel-card>\n      `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nfb-playlist-card': NFBPlaylistCard\n  }\n}\n"],"names":["NFBPlaylistCarousel","NFBCarouselMixin","store","state","item","i","THUMBNAIL_MODE","NFBPlaylistCard","thumb"],"sourceRoot":""}