{"version":3,"file":"js/apps-page.min.js","mappings":"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","sources":["webpack:///./src/js/wc/carousels/NFBProgrammingCarousel.ts"],"sourcesContent":["/**\n * Class NFBProgrammingCarousel.\n *\n */\n\nimport { LitElement, nothing, PropertyValues } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { html, literal } from 'lit/static-html.js'\n\nimport { ShapeVariant } from '@web-nfb/frontend-static/design-system/wc/card/NFBCard'\nimport { stringToBooleanConverter } from '@web-nfb/frontend-static/design-system/wc/_utils'\n\n// @ts-expect-error PNG import\nimport defaultBackgroundImg from '@src/img/promo-background-default.png'\n\nimport { GTM_EVENTS, GTM_LIST_CATEGORY, GTM_LIST_TYPE, DEFAULT_LIST_LENGTH, GTM_PROMO_TYPE, GTM_NOT_APPLICABLE, GTM_ITEM_TYPE } from '@src/js/constants'\nimport { GTMItemBase } from '@src/js/types/GTM'\nimport { slugify } from '@src/js/helpers/format'\nimport normanPaths from '@src/js/helpers/paths'\nimport { store } from '@src/js/redux/store'\nimport { fetchChannel } from '@src/js/redux/channelsReducer'\nimport { WorkCard, fetchWorks, selectWorkByIdList } from '@src/js/redux/worksReducer'\nimport { NFBCarouselMixin } from '@src/js/wc/carousels/base/NFBCarouselMixin'\nimport { CarouselGTMAttrs } from '@src/js/wc/carousels/base/NFBNormanCarousel'\nimport '@src/js/wc/work-page/NFBWorkPageCreator'\nimport '@src/js/wc/work-page/NFBWorkPageLegend'\n\n// @ts-expect-error Lit Sass import\nimport spinnerStyle from '@src/sass/wc/NFBSpinnerContainer.sass?lit'\n// @ts-expect-error Lit Sass import\nimport lazyLoadingCarousel from '@src/sass/wc/NFBLazyLoadingCarousel.sass?lit'\n\n@customElement('nfb-programming-carousel')\nexport default class NFBProgrammingCarousel extends NFBCarouselMixin(LitElement) {\n  @property({ type: Array, attribute: 'registry-id-list' })\n  initialRegistryIdList: number[] = []\n\n  @property({ converter: stringToBooleanConverter, attribute: 'is-dark' })\n  isDark = false\n\n  @property({ converter: stringToBooleanConverter, attribute: 'is-vertical' })\n  isVertical = false\n\n  @property({ converter: stringToBooleanConverter, attribute: 'is-clothesline' })\n  isClothesLine = false\n\n  @property({ converter: stringToBooleanConverter, attribute: 'is-promo' })\n  isPromo = false\n\n  @property({ type: String, attribute: 'channel-slug' })\n  channelSlug: string = ''\n\n  @property({ type: String, attribute: 'channel-title' })\n  channelTitle: string = ''\n\n  @property({ type: String, attribute: 'see-more-link' })\n  seeMoreLink: string = ''\n\n  @property({ type: String, attribute: 'channel-background' })\n  channelBackground: string = ''\n\n  @property({ type: String, attribute: 'channel-description' })\n  channelDescription: string = ''\n\n  @property({ type: String, attribute: 'position' })\n  position: string\n\n  @state()\n  _registryIds: number[]\n\n  @state()\n  _defaultListLength: number = DEFAULT_LIST_LENGTH\n\n  @state()\n  _worksList: WorkCard[] | []\n\n  _defaultSeeMoreCardText = window.gettext('See more')\n  _defaultImage = defaultBackgroundImg\n\n  static get styles () {\n    return [\n      spinnerStyle,\n      lazyLoadingCarousel\n    ]\n  }\n\n  protected firstUpdated (changedProperties: PropertyValues): void {\n    if (!this.isDark) this._defaultListLength = 12\n    super.firstUpdated(changedProperties)\n  }\n\n  async loadCarouselData (): Promise<void> {\n    if (this.initialRegistryIdList.length) {\n      this._registryIds = this.initialRegistryIdList\n      await store.dispatch(fetchWorks({\n        idList: this.initialRegistryIdList,\n        subset: 'nfb/published'\n      }))\n    } else {\n      this._registryIds = await store.dispatch(fetchChannel({ slug: this.channelSlug, per_page: DEFAULT_LIST_LENGTH + 1 })).unwrap()\n    }\n    this._worksList = selectWorkByIdList(store.getState().works, this._registryIds) ?? []\n  }\n\n  getCarouselGTMAttributes () : CarouselGTMAttrs {\n    const nfb_detail = this.channelBackground ? GTM_PROMO_TYPE.SMALL : this.isVertical ? GTM_PROMO_TYPE.VERTICAL : GTM_PROMO_TYPE.NOT_APPLICABLE\n    return {\n      nfb_list_type: GTM_LIST_TYPE.CAROUSEL,\n      nfb_list_category: GTM_LIST_CATEGORY.PROGRAMMING,\n      nfb_list_name: this.channelTitle,\n      nfb_list_id: `carousel-${this.channelSlug}`,\n      nfb_detail\n    }\n  }\n\n  buildGTMAttributes (title: string, index: number) {\n    const gtmAttrs = {\n      ...this.getCarouselGTMAttributes(),\n      event: GTM_EVENTS.SELECT_WORK,\n      nfb_version_title: title,\n      nfb_position: (index + 1).toString()\n    }\n    return JSON.stringify(gtmAttrs)\n  }\n\n  getItemGTMAttributes (): GTMItemBase {\n    return {\n      ...this.getCarouselGTMAttributes(),\n      nfb_list_id: this.channelSlug,\n      nfb_item_title: this.channelTitle,\n      nfb_item_type: GTM_ITEM_TYPE.LIST,\n      nfb_content_category: GTM_NOT_APPLICABLE,\n      nfb_position: this.position\n    } as GTMItemBase\n  }\n\n  shouldShowSeeMoreCard () {\n    if (this._worksList?.length > this._defaultListLength) {\n      this._defaultListLength = this._defaultListLength - 1\n      return true\n    }\n\n    return false\n  }\n\n  getCard (work: WorkCard, index: number) {\n    let thumbnailPath = work.thumbnail\n    if (this.isVertical) {\n      thumbnailPath = work.jacket ?? ''\n    }\n\n    return html`\n      <li\n        slot=\"card\"\n        class=\"nfb-card nfb-carousel__card ${this.isDark ? 'nfb-carousel__card--dark' : ''} carousel-cards-fade-in\"\n        id=\"${this.channelTitle}-${work.title}-${index}\"\n        data-index=\"${index}\"\n      >\n        ${this.isDark && !this.isVertical\n          ? html`\n          <nfb-animated-hover-card\n            data-ui-el=\"carousel-card\"\n            carousel-slug=\"${this.channelSlug}\"\n            registry-id=\"${work.id}\"\n            thumbnail-path=\"${thumbnailPath}\"\n            href=\"${normanPaths[work.category].replace('{slug}', work.slug)}\"\n            is-dark=\"true\"\n            card-type=\"carousel\"\n            bookmark-button-type=\"add\"\n            gtm-attributes=\"${this.buildGTMAttributes(work.title, index)}\"\n          ></nfb-animated-hover-card>`\n          : html`\n          <nfb-display-work-card\n            data-ui-el=\"carousel-card\"\n            carousel-slug=\"${this.channelSlug}\"\n            registry-id=\"${work.id}\"\n            thumbnail-path=\"${thumbnailPath}\"\n            href=\"${normanPaths[work.category].replace('{slug}', work.slug)}\"\n            is-dark=\"${this.isDark ? 'true' : nothing}\"\n            card-type=\"carousel\"\n            bookmark-button-type=\"add\"\n            shape-variant=\"${this.isVertical ? ShapeVariant.vertical : nothing}\"\n            secondary-variant=\"${this.isClothesLine ? 'no-border' : nothing}\"\n            gtm-attributes=\"${this.buildGTMAttributes(work.title, index)}\"\n          ></nfb-display-work-card>`}\n      </li>\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._worksList?.slice(0, this._defaultListLength)?.map((work, index) => this.getCard(work, index))\n  }\n\n  getBgSrc (width: number) {\n    if (!this.channelBackground) {\n      return this._defaultImage\n    }\n\n    return window.THUMBNAIL_PATTERN\n      .replace('{width}', String(width))\n      .replace('{height}', '')\n      .replace('{path}', this.channelBackground)\n  }\n\n  render () {\n    const carouselId = this.channelTitle ? `${slugify(this.channelTitle)}-carousel` : nothing\n\n    const elementTag = this.isDark\n      ? literal`nfb-carousel`\n      : literal`nfb-boxed-carousel`\n\n    if (this._registryIds?.length === 0) {\n      return nothing\n    }\n\n    const carousel = html`\n      <${elementTag}\n        data-is-loaded=\"${this._isLoading ? nothing : true}\"\n        title=\"${this.channelTitle}\"\n        id=\"${carouselId}\"\n        data-cy=\"${carouselId}\"\n        skip-list=\"${window.gettext('Skip This List')}\"\n        aria-label-previous=\"${window.gettext('See previous')} ${this.channelTitle}\"\n        aria-label-next=\"${window.gettext('See next')} ${this.channelTitle}\"\n        gtm-attributes=\"${JSON.stringify(this.getCarouselGTMAttributes())}\"\n        see-more-link=\"${this.seeMoreLink}\"\n        see-more-card-text=${this.shouldShowSeeMoreCard() ? this._defaultSeeMoreCardText : nothing}\n        is-dark=\"${this.isDark ? 'true' : nothing}\"\n        is-rounded=\"${this.isDark ? 'true' : nothing}\"\n        is-clothesline=\"${this.isDark ? 'true' : nothing}\"\n        align-nav-to-thumbnail=\"${this.isDark ? 'true' : 'false'}\"\n        is-vertical=\"${this.isVertical ? 'true' : nothing}\"\n        description=\"${this.channelDescription ?? nothing}\"\n      >\n        ${this.getCards()}\n      </${elementTag}>`\n\n    return this.isPromo\n      ? html`<div class=\"nfb-programming-carousel__background\">\n          <img\n            class=\"nfb-programming-carousel__bg-img\"\n            src=\"${this.getBgSrc(2560)}\"\n            srcset=\"${this.getBgSrc(800)} 800w, ${this.getBgSrc(1280)} 1280w, ${this.getBgSrc(1920)} 1920w\"\n            sizes=\"100vw\"\n            alt=\"\"\n            aria-hidden=\"true\"\n          />${carousel}</div>`\n      : carousel\n  }\n}\n"],"names":["NFBProgrammingCarousel","NFBCarouselMixin","changedProperties","store","nfb_detail","title","index","gtmAttrs","work","thumbnailPath","width","carouselId","elementTag","carousel"],"sourceRoot":""}