{"version":3,"file":"js/playlists-home.min.js","mappings":"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","sources":["webpack:///./src/js/sections/playlists/playlists-home.ts","webpack:///./src/sass/wc/NFBPlaylistCard.sass","webpack:///./src/js/wc/cards/NFBPlaylistCard.ts"],"sourcesContent":["import HorizontalNavManager from '@web-nfb/frontend-static/design-system/script/elements/HorizontalNavManager'\nimport '@src/js/wc/cards/NFBPlaylistCard'\n\ndeclare global {\n interface Window {\n CURRENT_PLAYLIST: string\n }\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n let currentPlaylist = window.CURRENT_PLAYLIST\n\n const horizontalNav = new HorizontalNavManager()\n horizontalNav.init()\n\n const hidePlaylist = (slug: string) => {\n document.getElementById(slug)?.removeAttribute('data-ui-active')\n }\n\n const showPlaylist = (slug: string) => {\n const el = document.getElementById(slug)\n if (el) {\n el.setAttribute('data-ui-active', 'true')\n currentPlaylist = slug\n history.pushState(true, '', `#${slug}`)\n }\n }\n\n horizontalNav.navElements.forEach(navElement => {\n navElement.htmlElement.addEventListener('click', e => {\n e.preventDefault()\n const anchor = e.currentTarget as HTMLAnchorElement\n const slug = anchor.dataset.uiPlaylistSlug\n if (currentPlaylist) {\n hidePlaylist(currentPlaylist)\n }\n if (slug) {\n showPlaylist(slug)\n }\n })\n })\n\n const hashSlug = window.location.hash?.substring(1)\n if (hashSlug) {\n const link = document.querySelector(`[data-ui-el=\"horizontal-nav-element\"][data-ui-playlist-slug=\"${hashSlug}\"]`) as HTMLAnchorElement\n if (link) {\n link.click()\n }\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 \n ${this.thumbnailList?.map(thumb => html`\n \n `)}\n
`\n\n case THUMBNAIL_MODE.SINGLE:\n return html`\n `\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 \n \n
\n ${this.getThumbnail()}\n \n \n
\n \n ${stripTags(this.description)}\n \n
\n