@carbon/ibmdotcom-web-components 1.26.0-rc.1 → 1.26.0-rc.3

package/es/components/carousel/carousel.d.ts

@@ -10,7 +10,7 @@ import { LitElement } from 'lit-element';
 import 'wicg-inert';
 declare const DDSCarousel_base: {
     new (...args: any[]): {
-        _handles: Set<import("@carbon/carbon-web-components/es/globals/internal/handle").default>;
+        _handles: Set<import("@carbon/web-components/es/globals/internal/handle").default>;
         connectedCallback(): void;
         disconnectedCallback(): void;
         accessKey: string;
@@ -65,6 +65,9 @@ declare const DDSCarousel_base: {
         closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
         closest<E extends Element = Element>(selectors: string): E | null;
         getAttribute(qualifiedName: string): string | null;
+        /**
+         * The page size that is explicitly set.
+         */
         getAttributeNS(namespace: string | null, localName: string): string | null;
         getAttributeNames(): string[];
         getAttributeNode(qualifiedName: string): Attr | null;
@@ -316,6 +319,9 @@ declare const DDSCarousel_base: {
         blur(): void;
         focus(options?: FocusOptions | undefined): void;
     };
+    /**
+     * The name of the custom event fired when the video title is updated
+     */
     _hostListeners: {
         [listenerName: string]: {
             [type: string]: {
@@ -332,6 +338,9 @@ declare const DDSCarousel_base: {
         disconnectedCallback(): void;
         transposeAttributes(linkNodeArg?: any, altAttributesArg?: any): void;
         _cleanAndCreateMutationObserver({ create }?: {
+            /**
+             * Array to hold the card-cta-footer elements within child items.
+             */
             create?: boolean | undefined;
         }): void;
         accessKey: string;

package/es/components/carousel/carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/carousel/carousel.ts"],"names":[],"mappings":"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","file":"carousel.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport {\n  html,\n  property,\n  state,\n  query,\n  customElement,\n  LitElement,\n} from 'lit-element';\nimport 'wicg-inert';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport ifNonNull from '@carbon/carbon-web-components/es/globals/directives/if-non-null.js';\nimport CaretLeft20 from '@carbon/carbon-web-components/es/icons/caret--left/20.js';\nimport CaretRight20 from '@carbon/carbon-web-components/es/icons/caret--right/20.js';\nimport HostListener from '@carbon/carbon-web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/carbon-web-components/es/globals/mixins/host-listener.js';\nimport { selectorTabbable } from '@carbon/carbon-web-components/es/globals/settings.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport sameHeight from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/sameHeight/sameHeight';\nimport styles from './carousel.scss';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport DDSExpressiveModal from '../expressive-modal/expressive-modal';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\nconst MAX_GESTURE_DURATION = 300; // max time allowed to do swipe\nconst MIN_DISTANCE_TRAVELLED = 75; // min distance traveled to be considered swipe\nconst headingBottomMargin = 64; // tag constants used for same height calculations\n\n/**\n * Carousel.\n *\n * @element dds-carousel\n * @csspart prev-button The button to go to the previous page.\n * @csspart next-button The button to go to the next page.\n */\n@customElement(`${ddsPrefix}-carousel`)\nclass DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {\n  /**\n   * The scrolling contents node.\n   */\n  @query(`.${prefix}--carousel__scroll-contents`)\n  private _contentsNode?: HTMLElement;\n\n  /**\n   * The width of the scroll contents area node, excluding one of overflowed contents.\n   */\n  @state()\n  private _contentsBaseWidth = 0;\n\n  /**\n   * The gap width between each card.\n   */\n  @state()\n  private _gap = 0;\n\n  /**\n   * Array to hold the card-heading elements within child items.\n   */\n  private _childItems: any[] = [];\n\n  /**\n   * Array to hold the card-heading elements within child items.\n   */\n  private _childItemHeadings: any[] = [];\n\n  /**\n   * Array to hold the card-eyebrow elements within child items.\n   */\n  private _childItemEyebrows: any[] = [];\n\n  /**\n   * Array to hold the tag-group elements within child items.\n   */\n  private _childItemTagGroup: any[] = [];\n\n  /**\n   * Array to hold the paragraph elements within child items.\n   */\n  private _childItemParagraphs: any[] = [];\n\n  /**\n   * Array to hold the card-cta-footer elements within child items.\n   */\n  private _childItemFooters: any[] = [];\n\n  /**\n   * The observer for the resize of the scroll container.\n   */\n  private _observerResizeContainer: any | null = null; // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n\n  /**\n   * The observer for the resize of the viewport.\n   */\n  private _observerResizeRoot: any | null = null; // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n\n  /**\n   * The page size that is explicitly set.\n   */\n  @state()\n  private _pageSize?: number;\n\n  /**\n   * The page size that is automatically calculated upon viewport size\n   * via `--dds--carousel--page-size` CSS custom property.\n   * If `page-size` attribute is set, this value is ignored.\n   */\n  @state()\n  private _pageSizeAuto = 1;\n\n  /**\n   * The default slot.\n   */\n  @query('slot:not([name])')\n  private _slotNode?: HTMLSlotElement;\n\n  /**\n   * The number of total items.\n   */\n  @state()\n  private _total = 0;\n\n  /**\n   * Initial touch position (used to detect swipe gesture)\n   */\n  @state()\n  private _startPos = 0;\n\n  /**\n   * Initial touch time (used to detect swipe gesture)\n   */\n  @state()\n  private _startTime = 0;\n\n  /**\n   * Cleans-up and creats the resize observer for the scrolling container.\n   *\n   * @param [options] The options.\n   * @param [options.create] `true` to create the new resize observer.\n   */\n  private _cleanAndCreateObserverResize({ create }: { create?: boolean } = {}) {\n    const { _contentsNode: contentsNode } = this;\n    if (contentsNode) {\n      if (this._observerResizeContainer) {\n        this._observerResizeContainer.disconnect();\n        this._observerResizeContainer = null;\n      }\n      if (this._observerResizeRoot) {\n        this._observerResizeRoot.disconnect();\n        this._observerResizeRoot = null;\n      }\n      if (create) {\n        // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n        // @ts-ignore\n        this._observerResizeRoot = new ResizeObserver(this._observeResizeRoot);\n        this._observerResizeRoot.observe(this.ownerDocument!.documentElement);\n        // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n        // @ts-ignore\n        this._observerResizeContainer = new ResizeObserver(\n          this._observeResizeContainer\n        );\n        this._observerResizeContainer.observe(contentsNode);\n      }\n    }\n  }\n\n  /**\n   * Stops the container from scrolling when focusing on a card outside of the viewport.\n   *\n   * @param event The event.\n   */\n  // eslint-disable-next-line class-methods-use-this\n  private _handleScrollFocus({ target }: Event) {\n    (target as HTMLElement).scrollTo(0, 0);\n  }\n\n  /**\n   * Handles card focus throughout pages.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocus = async ({ target }: FocusEvent) => {\n    const containsCurrent =\n      target !== this && this.contains(target as HTMLElement);\n    let currentItemIndex = 0;\n    Array.from(this.children).forEach((carouselItem, index) => {\n      if (carouselItem.contains(target as HTMLElement)) {\n        currentItemIndex = index;\n      }\n    });\n\n    // Calculates proper page to display if focus is outside the current page\n    if (\n      containsCurrent &&\n      (currentItemIndex < this.start ||\n        currentItemIndex >= this.start + this.pageSize)\n    ) {\n      // The `currentIndex` floored by `pageSize`\n      const nextStart =\n        Math.floor(currentItemIndex / this.pageSize) * this.pageSize;\n      const pageOffset = this.start % this.pageSize;\n\n      // Ensures the page moves by `this.pageSize` in either direction\n      this.start = nextStart + pageOffset;\n    }\n  };\n\n  /**\n   * Handles card with video heading and applies the set same height function.\n   *\n   * @param event The event.\n   */\n  @HostListener(`document:eventVideoTitleUpdated`)\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleVideoTitleUpdate = async (event: FocusEvent) => {\n    if (event) {\n      this._setSameHeight();\n    }\n  };\n\n  /**\n   * Handles `click` event on the next button.\n   */\n  private _handleClickNextButton() {\n    const { pageSize, start, _total: total } = this;\n    this.start = Math.min(start + pageSize, total - 1);\n  }\n\n  /**\n   * Handles `click` event on the prev button.\n   */\n  private _handleClickPrevButton() {\n    const { pageSize, start } = this;\n    this.start = Math.max(start - pageSize, 0);\n  }\n\n  /**\n   * Handles `touchstart` event.\n   */\n  private _handleTouchStartEvent(event: TouchEvent) {\n    this._startPos = event.touches[0].clientX;\n    this._startTime = new Date().getTime();\n  }\n\n  /**\n   * Handles `touchend` event.\n   */\n  private _handleTouchEndEvent(event: TouchEvent) {\n    const { _startPos, _startTime } = this;\n    const { pageSize, start, _total: total } = this;\n\n    const distTravelled = event.changedTouches[0].clientX - _startPos; // distance travelled\n    const elapsedTime = new Date().getTime() - _startTime; // elapsed time\n\n    if (\n      elapsedTime <= MAX_GESTURE_DURATION &&\n      Math.abs(distTravelled) >= MIN_DISTANCE_TRAVELLED\n    ) {\n      if (distTravelled < 0) {\n        this.start = Math.min(start + pageSize, total - 1);\n      } else {\n        this.start = Math.max(start - pageSize, 0);\n      }\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    const { name } = slot;\n    if (!name) {\n      this._total = slot\n        .assignedNodes()\n        .filter((node) => node.nodeType === Node.ELEMENT_NODE).length;\n    }\n    this._updateGap();\n\n    this._childItems = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((node) => node instanceof HTMLElement);\n\n    // retrieve item heading, eyebrows, and footers to set same height\n    if (this._childItems) {\n      this._childItems\n        .filter((elem) =>\n          (elem as HTMLElement).matches !== undefined\n            ? (elem as HTMLElement).matches(\n                (this.constructor as typeof DDSCarousel).selectorItem\n              ) ||\n              (elem as HTMLElement).matches(\n                (this.constructor as typeof DDSCarousel)\n                  .selectorItemVideoCTAContainer\n              )\n            : false\n        )\n        .forEach((e) => {\n          this._childItemEyebrows.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemEyebrow\n            )\n          );\n          this._childItemParagraphs.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemParagraph\n            )\n          );\n          this._childItemTagGroup.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemTagGroup\n            )\n          );\n          this._childItemHeadings.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemHeading\n            )\n          );\n\n          this._childItemHeadings.push(\n            (e as HTMLElement)\n              .querySelector(\n                (this.constructor as typeof DDSCarousel).selectorItemCardCTA\n              )\n              ?.shadowRoot?.querySelector(\n                (this.constructor as typeof DDSCarousel).selectorItemHeading\n              )\n          );\n\n          this._childItemHeadings = this._childItemHeadings.filter(\n            (heading) => heading\n          );\n\n          this._childItemFooters.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemFooter\n            )\n          );\n        });\n    }\n  }\n\n  /**\n   * The observer for the resize of the scroll container.\n   */\n  private _observeResizeContainer = (records) => {\n    const { contentRect } = records[records.length - 1];\n    const { width: contentsBaseWidth } = contentRect;\n    this._contentsBaseWidth = contentsBaseWidth;\n    this._updateGap();\n  };\n\n  /**\n   * The observer for the resize of the viewport.\n   */\n  private _observeResizeRoot = () => {\n    const { customPropertyPageSize } = this.constructor as typeof DDSCarousel;\n    const { _contentsNode: contentsNode } = this;\n    const { defaultView: w } = this.ownerDocument!;\n    this._pageSizeAuto = Number(\n      w!\n        .getComputedStyle(contentsNode!)\n        .getPropertyValue(customPropertyPageSize)\n    );\n    this._setSameHeight();\n  };\n\n  /**\n   * @returns Page status text.\n   */\n  private _renderStatus() {\n    const { start, pageSize, formatStatus, _total: total } = this;\n    // Copes with the condition where `start % pageSize` is non-zero\n    const pagesBefore = Math.ceil(start / pageSize);\n    const pagesSince = Math.ceil((total - start) / pageSize);\n    return formatStatus({\n      currentPage: Math.ceil(start / pageSize) + 1,\n      pages: pagesBefore + pagesSince,\n    });\n  }\n\n  private _setSameHeight = () => {\n    // check if items are not null before using sameHeight\n\n    sameHeight(\n      this._childItemEyebrows.filter((item) => item !== null),\n      'sm'\n    );\n    sameHeight(\n      this._childItemHeadings.filter((item) => item !== null),\n      'sm'\n    );\n    sameHeight(\n      this._childItemParagraphs.filter((item) => item !== null),\n      'sm'\n    );\n    sameHeight(\n      this._childItemFooters.filter((item) => item !== null),\n      'sm'\n    );\n\n    let tagGroupHeight: number = 0;\n\n    // get tallest height of tag groups\n    this._childItemTagGroup.forEach((item) => {\n      if (item) {\n        const groupHeight = (item as HTMLElement).offsetHeight;\n        if (groupHeight > tagGroupHeight) {\n          tagGroupHeight = groupHeight;\n        }\n      }\n    });\n\n    this._childItemHeadings.forEach((e) => {\n      // add tag group height to heading to the cards lacking tag group\n      if (\n        e &&\n        !e.nextElementSibling?.matches(\n          (this.constructor as typeof DDSCarousel).selectorItemTagGroup\n        )\n      ) {\n        e.style.marginBottom = `${tagGroupHeight + headingBottomMargin}px`;\n      }\n    });\n  };\n\n  /**\n   * Calculates the width between cards.\n   */\n  private _updateGap() {\n    const { _contentsNode: contentsNode, _slotNode: slotNode } = this;\n    const elems = slotNode!\n      .assignedNodes()\n      .filter((node) => node.nodeType === Node.ELEMENT_NODE);\n    this._gap =\n      elems.length <= 1\n        ? 0\n        : (contentsNode!.scrollWidth -\n            elems.reduce(\n              (acc, elem) => acc + ((elem as HTMLElement).offsetWidth ?? 0),\n              0\n            )) /\n          (elems.length - 1);\n  }\n\n  get focusableElements() {\n    const { selectorTabbable: selectorTabbableForCarousel } = this\n      .constructor as typeof DDSExpressiveModal;\n    return [\n      ...Array.from(\n        (this.shadowRoot?.querySelectorAll(\n          selectorTabbableForCarousel\n        ) as NodeListOf<HTMLElement>) || []\n      ),\n      ...Array.from(\n        this.querySelectorAll(\n          selectorTabbableForCarousel\n        ) as NodeListOf<HTMLElement>\n      ),\n    ];\n  }\n\n  /**\n   * The formatter for the pagination status. Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatStatus = ({ currentPage, pages }) => `${currentPage} / ${pages}`;\n\n  /**\n   * Number of items per page.\n   * If `--dds--carousel--page-size` CSS custom property is set to `<div class=\"bx--carousel__scroll-container\">`\n   * or its ancestor (e.g. the host `<dds-carousel>`), this is set automatically from `--dds--carousel--page-size`.\n   */\n  @property({ type: Number, attribute: 'page-size' })\n  get pageSize() {\n    const { _pageSize: pageSize, _pageSizeAuto: pageSizeAuto } = this;\n    return pageSize ?? pageSizeAuto;\n  }\n\n  set pageSize(value: number) {\n    this._pageSize = value;\n    // Don't call `.requestUpdate()` here given we track updates via `_pageSize` and `_pageSizeAuto`\n  }\n\n  /**\n   * The assistive text for the button to go to next page.\n   */\n  @property({ attribute: 'next-button-text' })\n  nextButtonText = 'Next page';\n\n  /**\n   * The assistive text for the button to go to previous page.\n   */\n  @property({ attribute: 'prev-button-text' })\n  prevButtonText = 'Previous page';\n\n  /**\n   * The current zero-based index of the left-most card.\n   */\n  @property({ type: Number })\n  start = 0;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._cleanAndCreateObserverResize({ create: true });\n\n    const containingModal = this.closest(\n      `${ddsPrefix}-expressive-modal`\n    ) as DDSExpressiveModal;\n    if (containingModal) {\n      containingModal.hasFocusableElements.push(this);\n      this.setAttribute('in-modal', '');\n\n      setTimeout(() => {\n        containingModal.modalBody!.style.overflow = 'hidden';\n        containingModal.modalBody!.style.width = 'var(--modal-vw)';\n      }, 0);\n    }\n  }\n\n  disconnectedCallback() {\n    this._cleanAndCreateObserverResize();\n    super.disconnectedCallback();\n  }\n\n  firstUpdated() {\n    this._cleanAndCreateObserverResize({ create: true });\n  }\n\n  protected updated(changedProperties) {\n    if (changedProperties.has('start')) {\n      const { _childItems: childItems, start, pageSize } = this;\n\n      childItems.forEach((item) => {\n        const index = childItems.indexOf(item);\n        if (index < start || index > start + pageSize - 1) {\n          item.inert = true;\n        } else {\n          item.inert = false;\n        }\n      });\n    }\n  }\n\n  render() {\n    const { customPropertyPageSize } = this.constructor as typeof DDSCarousel;\n    const {\n      nextButtonText,\n      pageSize,\n      prevButtonText,\n      start,\n      _contentsBaseWidth: contentsBaseWidth,\n      _gap: gap,\n      _pageSize: pageSizeExplicit,\n      _total: total,\n      _handleClickNextButton: handleClickNextButton,\n      _handleClickPrevButton: handleClickPrevButton,\n      _handleScrollFocus: handleScrollFocus,\n      _handleSlotChange: handleSlotChange,\n      _handleTouchStartEvent: handleTouchStartEvent,\n      _handleTouchEndEvent: handleTouchEndEvent,\n    } = this;\n    // Copes with the condition where `start % pageSize` is non-zero\n    const pagesBefore = Math.ceil(start / pageSize);\n    const pagesSince = Math.ceil((total - start) / pageSize);\n    // Use another div from the host `<dds-carousel>` to reflect private state\n    return html`\n      <div\n        class=\"${prefix}--carousel__scroll-container\"\n        @scroll=\"${handleScrollFocus}\"\n        @touchstart=\"${handleTouchStartEvent}\"\n        @touchend=\"${handleTouchEndEvent}\"\n        style=\"${ifNonNull(\n          pageSizeExplicit == null\n            ? null\n            : `${customPropertyPageSize}: ${pageSizeExplicit}`\n        )}\"\n      >\n        <div\n          class=\"${prefix}--carousel__scroll-contents\"\n          style=\"left:${(-start * (contentsBaseWidth + gap)) / pageSize}px\"\n        >\n          <slot @slotchange=\"${handleSlotChange}\"></slot>\n        </div>\n      </div>\n      <div class=\"${prefix}--carousel__navigation\">\n        <button\n          part=\"prev-button\"\n          class=\"${prefix}--btn ${prefix}--btn--secondary ${prefix}--btn--icon-only ${prefix}--carousel__navigation__btn\"\n          ?disabled=\"${pagesBefore === 0}\"\n          @click=\"${handleClickPrevButton}\"\n          aria-label=\"${ifDefined(prevButtonText)}\"\n          title=\"${ifDefined(prevButtonText)}\"\n        >\n          ${CaretLeft20()}\n        </button>\n        ${this._renderStatus()}\n        <button\n          part=\"next-button\"\n          class=\"${prefix}--btn ${prefix}--btn--secondary ${prefix}--btn--icon-only ${prefix}--carousel__navigation__btn\"\n          ?disabled=\"${pagesSince <= 1}\"\n          @click=\"${handleClickNextButton}\"\n          aria-label=\"${ifDefined(nextButtonText)}\"\n          title=\"${ifDefined(nextButtonText)}\"\n        >\n          ${CaretRight20()}\n        </button>\n      </div>\n    `;\n  }\n\n  /**\n   * The CSS custom property name for the live page size.\n   * If the CSS custom property is set to `<div class=\"bx--carousel__scroll-container\">`\n   * or its ancestor (e.g. the host `<dds-carousel>`), this is set automatically from the CSS custom property.\n   */\n  static get customPropertyPageSize() {\n    return `--${ddsPrefix}--carousel--page-size`;\n  }\n\n  /**\n   * The name of the custom event fired when the video title is updated\n   */\n  static get eventVideoTitleUpdated() {\n    return `${ddsPrefix}-card-cta-video-title-updated`;\n  }\n\n  /**\n   * The selector for the card component\n   */\n  static get selectorItem() {\n    return `${ddsPrefix}-card`;\n  }\n\n  /**\n   * The selector for the card cta\n   */\n  static get selectorItemCardCTA() {\n    return `${ddsPrefix}-card-cta`;\n  }\n\n  /**\n   * The selector for the video cta container\n   */\n  static get selectorItemVideoCTAContainer() {\n    return `${ddsPrefix}-video-cta-container`;\n  }\n\n  /**\n   * A selector that will return the card item's eyebrow\n   */\n  static get selectorItemEyebrow() {\n    return `${ddsPrefix}-card-eyebrow`;\n  }\n\n  /**\n   * A selector that will return the card item's tag group\n   */\n  static get selectorItemTagGroup() {\n    return `${ddsPrefix}-tag-group`;\n  }\n\n  /**\n   * A selector that will return the card item's tag group\n   */\n  static get selectorItemParagraph() {\n    return `p`;\n  }\n\n  /**\n   * A selector that will return the card item's heading\n   */\n  static get selectorItemHeading() {\n    return `${ddsPrefix}-card-heading`;\n  }\n\n  /**\n   * A selector that will return the card item's footer\n   */\n  static get selectorItemFooter() {\n    return `${ddsPrefix}-card-cta-footer`;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--carousel`;\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return `\n      ${selectorTabbable}\n    `;\n  }\n\n  static styles = styles;\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSCarousel;\n"]}
+{"version":3,"sources":["components/carousel/carousel.ts"],"names":[],"mappings":"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","file":"carousel.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport {\n  html,\n  property,\n  state,\n  query,\n  customElement,\n  LitElement,\n} from 'lit-element';\nimport 'wicg-inert';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport ifNonNull from '@carbon/web-components/es/globals/directives/if-non-null.js';\nimport CaretLeft20 from '@carbon/web-components/es/icons/caret--left/20.js';\nimport CaretRight20 from '@carbon/web-components/es/icons/caret--right/20.js';\nimport HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport sameHeight from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/sameHeight/sameHeight';\nimport styles from './carousel.scss';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport DDSExpressiveModal from '../expressive-modal/expressive-modal';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\nconst MAX_GESTURE_DURATION = 300; // max time allowed to do swipe\nconst MIN_DISTANCE_TRAVELLED = 75; // min distance traveled to be considered swipe\nconst headingBottomMargin = 64; // tag constants used for same height calculations\n\n/**\n * Carousel.\n *\n * @element dds-carousel\n * @csspart prev-button The button to go to the previous page.\n * @csspart next-button The button to go to the next page.\n */\n@customElement(`${ddsPrefix}-carousel`)\nclass DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {\n  /**\n   * The scrolling contents node.\n   */\n  @query(`.${prefix}--carousel__scroll-contents`)\n  private _contentsNode?: HTMLElement;\n\n  /**\n   * The width of the scroll contents area node, excluding one of overflowed contents.\n   */\n  @state()\n  private _contentsBaseWidth = 0;\n\n  /**\n   * The gap width between each card.\n   */\n  @state()\n  private _gap = 0;\n\n  /**\n   * Array to hold the card-heading elements within child items.\n   */\n  private _childItems: any[] = [];\n\n  /**\n   * Array to hold the card-heading elements within child items.\n   */\n  private _childItemHeadings: any[] = [];\n\n  /**\n   * Array to hold the card-eyebrow elements within child items.\n   */\n  private _childItemEyebrows: any[] = [];\n\n  /**\n   * Array to hold the tag-group elements within child items.\n   */\n  private _childItemTagGroup: any[] = [];\n\n  /**\n   * Array to hold the paragraph elements within child items.\n   */\n  private _childItemParagraphs: any[] = [];\n\n  /**\n   * Array to hold the card-cta-footer elements within child items.\n   */\n  private _childItemFooters: any[] = [];\n\n  /**\n   * The observer for the resize of the scroll container.\n   */\n  private _observerResizeContainer: any | null = null; // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n\n  /**\n   * The observer for the resize of the viewport.\n   */\n  private _observerResizeRoot: any | null = null; // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n\n  /**\n   * The page size that is explicitly set.\n   */\n  @state()\n  private _pageSize?: number;\n\n  /**\n   * The page size that is automatically calculated upon viewport size\n   * via `--dds--carousel--page-size` CSS custom property.\n   * If `page-size` attribute is set, this value is ignored.\n   */\n  @state()\n  private _pageSizeAuto = 1;\n\n  /**\n   * The default slot.\n   */\n  @query('slot:not([name])')\n  private _slotNode?: HTMLSlotElement;\n\n  /**\n   * The number of total items.\n   */\n  @state()\n  private _total = 0;\n\n  /**\n   * Initial touch position (used to detect swipe gesture)\n   */\n  @state()\n  private _startPos = 0;\n\n  /**\n   * Initial touch time (used to detect swipe gesture)\n   */\n  @state()\n  private _startTime = 0;\n\n  /**\n   * Cleans-up and creats the resize observer for the scrolling container.\n   *\n   * @param [options] The options.\n   * @param [options.create] `true` to create the new resize observer.\n   */\n  private _cleanAndCreateObserverResize({ create }: { create?: boolean } = {}) {\n    const { _contentsNode: contentsNode } = this;\n    if (contentsNode) {\n      if (this._observerResizeContainer) {\n        this._observerResizeContainer.disconnect();\n        this._observerResizeContainer = null;\n      }\n      if (this._observerResizeRoot) {\n        this._observerResizeRoot.disconnect();\n        this._observerResizeRoot = null;\n      }\n      if (create) {\n        // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n        // @ts-ignore\n        this._observerResizeRoot = new ResizeObserver(this._observeResizeRoot);\n        this._observerResizeRoot.observe(this.ownerDocument!.documentElement);\n        // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n        // @ts-ignore\n        this._observerResizeContainer = new ResizeObserver(\n          this._observeResizeContainer\n        );\n        this._observerResizeContainer.observe(contentsNode);\n      }\n    }\n  }\n\n  /**\n   * Stops the container from scrolling when focusing on a card outside of the viewport.\n   *\n   * @param event The event.\n   */\n  // eslint-disable-next-line class-methods-use-this\n  private _handleScrollFocus({ target }: Event) {\n    (target as HTMLElement).scrollTo(0, 0);\n  }\n\n  /**\n   * Handles card focus throughout pages.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocus = async ({ target }: FocusEvent) => {\n    const containsCurrent =\n      target !== this && this.contains(target as HTMLElement);\n    let currentItemIndex = 0;\n    Array.from(this.children).forEach((carouselItem, index) => {\n      if (carouselItem.contains(target as HTMLElement)) {\n        currentItemIndex = index;\n      }\n    });\n\n    // Calculates proper page to display if focus is outside the current page\n    if (\n      containsCurrent &&\n      (currentItemIndex < this.start ||\n        currentItemIndex >= this.start + this.pageSize)\n    ) {\n      // The `currentIndex` floored by `pageSize`\n      const nextStart =\n        Math.floor(currentItemIndex / this.pageSize) * this.pageSize;\n      const pageOffset = this.start % this.pageSize;\n\n      // Ensures the page moves by `this.pageSize` in either direction\n      this.start = nextStart + pageOffset;\n    }\n  };\n\n  /**\n   * Handles card with video heading and applies the set same height function.\n   *\n   * @param event The event.\n   */\n  @HostListener(`document:eventVideoTitleUpdated`)\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleVideoTitleUpdate = async (event: FocusEvent) => {\n    if (event) {\n      this._setSameHeight();\n    }\n  };\n\n  /**\n   * Handles `click` event on the next button.\n   */\n  private _handleClickNextButton() {\n    const { pageSize, start, _total: total } = this;\n    this.start = Math.min(start + pageSize, total - 1);\n  }\n\n  /**\n   * Handles `click` event on the prev button.\n   */\n  private _handleClickPrevButton() {\n    const { pageSize, start } = this;\n    this.start = Math.max(start - pageSize, 0);\n  }\n\n  /**\n   * Handles `touchstart` event.\n   */\n  private _handleTouchStartEvent(event: TouchEvent) {\n    this._startPos = event.touches[0].clientX;\n    this._startTime = new Date().getTime();\n  }\n\n  /**\n   * Handles `touchend` event.\n   */\n  private _handleTouchEndEvent(event: TouchEvent) {\n    const { _startPos, _startTime } = this;\n    const { pageSize, start, _total: total } = this;\n\n    const distTravelled = event.changedTouches[0].clientX - _startPos; // distance travelled\n    const elapsedTime = new Date().getTime() - _startTime; // elapsed time\n\n    if (\n      elapsedTime <= MAX_GESTURE_DURATION &&\n      Math.abs(distTravelled) >= MIN_DISTANCE_TRAVELLED\n    ) {\n      if (distTravelled < 0) {\n        this.start = Math.min(start + pageSize, total - 1);\n      } else {\n        this.start = Math.max(start - pageSize, 0);\n      }\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    const { name } = slot;\n    if (!name) {\n      this._total = slot\n        .assignedNodes()\n        .filter((node) => node.nodeType === Node.ELEMENT_NODE).length;\n    }\n    this._updateGap();\n\n    this._childItems = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((node) => node instanceof HTMLElement);\n\n    // retrieve item heading, eyebrows, and footers to set same height\n    if (this._childItems) {\n      this._childItems\n        .filter((elem) =>\n          (elem as HTMLElement).matches !== undefined\n            ? (elem as HTMLElement).matches(\n                (this.constructor as typeof DDSCarousel).selectorItem\n              ) ||\n              (elem as HTMLElement).matches(\n                (this.constructor as typeof DDSCarousel)\n                  .selectorItemVideoCTAContainer\n              )\n            : false\n        )\n        .forEach((e) => {\n          this._childItemEyebrows.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemEyebrow\n            )\n          );\n          this._childItemParagraphs.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemParagraph\n            )\n          );\n          this._childItemTagGroup.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemTagGroup\n            )\n          );\n          this._childItemHeadings.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemHeading\n            )\n          );\n\n          this._childItemHeadings.push(\n            (e as HTMLElement)\n              .querySelector(\n                (this.constructor as typeof DDSCarousel).selectorItemCardCTA\n              )\n              ?.shadowRoot?.querySelector(\n                (this.constructor as typeof DDSCarousel).selectorItemHeading\n              )\n          );\n\n          this._childItemHeadings = this._childItemHeadings.filter(\n            (heading) => heading\n          );\n\n          this._childItemFooters.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemFooter\n            )\n          );\n        });\n    }\n  }\n\n  /**\n   * The observer for the resize of the scroll container.\n   */\n  private _observeResizeContainer = (records) => {\n    const { contentRect } = records[records.length - 1];\n    const { width: contentsBaseWidth } = contentRect;\n    this._contentsBaseWidth = contentsBaseWidth;\n    this._updateGap();\n  };\n\n  /**\n   * The observer for the resize of the viewport.\n   */\n  private _observeResizeRoot = () => {\n    const { customPropertyPageSize } = this.constructor as typeof DDSCarousel;\n    const { _contentsNode: contentsNode } = this;\n    const { defaultView: w } = this.ownerDocument!;\n    this._pageSizeAuto = Number(\n      w!\n        .getComputedStyle(contentsNode!)\n        .getPropertyValue(customPropertyPageSize)\n    );\n    this._setSameHeight();\n  };\n\n  /**\n   * @returns Page status text.\n   */\n  private _renderStatus() {\n    const { start, pageSize, formatStatus, _total: total } = this;\n    // Copes with the condition where `start % pageSize` is non-zero\n    const pagesBefore = Math.ceil(start / pageSize);\n    const pagesSince = Math.ceil((total - start) / pageSize);\n    return formatStatus({\n      currentPage: Math.ceil(start / pageSize) + 1,\n      pages: pagesBefore + pagesSince,\n    });\n  }\n\n  private _setSameHeight = () => {\n    // check if items are not null before using sameHeight\n\n    sameHeight(\n      this._childItemEyebrows.filter((item) => item !== null),\n      'sm'\n    );\n    sameHeight(\n      this._childItemHeadings.filter((item) => item !== null),\n      'sm'\n    );\n    sameHeight(\n      this._childItemParagraphs.filter((item) => item !== null),\n      'sm'\n    );\n    sameHeight(\n      this._childItemFooters.filter((item) => item !== null),\n      'sm'\n    );\n\n    let tagGroupHeight: number = 0;\n\n    // get tallest height of tag groups\n    this._childItemTagGroup.forEach((item) => {\n      if (item) {\n        const groupHeight = (item as HTMLElement).offsetHeight;\n        if (groupHeight > tagGroupHeight) {\n          tagGroupHeight = groupHeight;\n        }\n      }\n    });\n\n    this._childItemHeadings.forEach((e) => {\n      // add tag group height to heading to the cards lacking tag group\n      if (\n        e &&\n        !e.nextElementSibling?.matches(\n          (this.constructor as typeof DDSCarousel).selectorItemTagGroup\n        )\n      ) {\n        e.style.marginBottom = `${tagGroupHeight + headingBottomMargin}px`;\n      }\n    });\n  };\n\n  /**\n   * Calculates the width between cards.\n   */\n  private _updateGap() {\n    const { _contentsNode: contentsNode, _slotNode: slotNode } = this;\n    const elems = slotNode!\n      .assignedNodes()\n      .filter((node) => node.nodeType === Node.ELEMENT_NODE);\n    this._gap =\n      elems.length <= 1\n        ? 0\n        : (contentsNode!.scrollWidth -\n            elems.reduce(\n              (acc, elem) => acc + ((elem as HTMLElement).offsetWidth ?? 0),\n              0\n            )) /\n          (elems.length - 1);\n  }\n\n  get focusableElements() {\n    const { selectorTabbable: selectorTabbableForCarousel } = this\n      .constructor as typeof DDSExpressiveModal;\n    return [\n      ...Array.from(\n        (this.shadowRoot?.querySelectorAll(\n          selectorTabbableForCarousel\n        ) as NodeListOf<HTMLElement>) || []\n      ),\n      ...Array.from(\n        this.querySelectorAll(\n          selectorTabbableForCarousel\n        ) as NodeListOf<HTMLElement>\n      ),\n    ];\n  }\n\n  /**\n   * The formatter for the pagination status. Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatStatus = ({ currentPage, pages }) => `${currentPage} / ${pages}`;\n\n  /**\n   * Number of items per page.\n   * If `--dds--carousel--page-size` CSS custom property is set to `<div class=\"bx--carousel__scroll-container\">`\n   * or its ancestor (e.g. the host `<dds-carousel>`), this is set automatically from `--dds--carousel--page-size`.\n   */\n  @property({ type: Number, attribute: 'page-size' })\n  get pageSize() {\n    const { _pageSize: pageSize, _pageSizeAuto: pageSizeAuto } = this;\n    return pageSize ?? pageSizeAuto;\n  }\n\n  set pageSize(value: number) {\n    this._pageSize = value;\n    // Don't call `.requestUpdate()` here given we track updates via `_pageSize` and `_pageSizeAuto`\n  }\n\n  /**\n   * The assistive text for the button to go to next page.\n   */\n  @property({ attribute: 'next-button-text' })\n  nextButtonText = 'Next page';\n\n  /**\n   * The assistive text for the button to go to previous page.\n   */\n  @property({ attribute: 'prev-button-text' })\n  prevButtonText = 'Previous page';\n\n  /**\n   * The current zero-based index of the left-most card.\n   */\n  @property({ type: Number })\n  start = 0;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._cleanAndCreateObserverResize({ create: true });\n\n    const containingModal = this.closest(\n      `${ddsPrefix}-expressive-modal`\n    ) as DDSExpressiveModal;\n    if (containingModal) {\n      containingModal.hasFocusableElements.push(this);\n      this.setAttribute('in-modal', '');\n\n      setTimeout(() => {\n        containingModal.modalBody!.style.overflow = 'hidden';\n        containingModal.modalBody!.style.width = 'var(--modal-vw)';\n      }, 0);\n    }\n  }\n\n  disconnectedCallback() {\n    this._cleanAndCreateObserverResize();\n    super.disconnectedCallback();\n  }\n\n  firstUpdated() {\n    this._cleanAndCreateObserverResize({ create: true });\n  }\n\n  protected updated(changedProperties) {\n    if (changedProperties.has('start')) {\n      const { _childItems: childItems, start, pageSize } = this;\n\n      childItems.forEach((item) => {\n        const index = childItems.indexOf(item);\n        if (index < start || index > start + pageSize - 1) {\n          item.inert = true;\n        } else {\n          item.inert = false;\n        }\n      });\n    }\n  }\n\n  render() {\n    const { customPropertyPageSize } = this.constructor as typeof DDSCarousel;\n    const {\n      nextButtonText,\n      pageSize,\n      prevButtonText,\n      start,\n      _contentsBaseWidth: contentsBaseWidth,\n      _gap: gap,\n      _pageSize: pageSizeExplicit,\n      _total: total,\n      _handleClickNextButton: handleClickNextButton,\n      _handleClickPrevButton: handleClickPrevButton,\n      _handleScrollFocus: handleScrollFocus,\n      _handleSlotChange: handleSlotChange,\n      _handleTouchStartEvent: handleTouchStartEvent,\n      _handleTouchEndEvent: handleTouchEndEvent,\n    } = this;\n    // Copes with the condition where `start % pageSize` is non-zero\n    const pagesBefore = Math.ceil(start / pageSize);\n    const pagesSince = Math.ceil((total - start) / pageSize);\n    // Use another div from the host `<dds-carousel>` to reflect private state\n    return html`\n      <div\n        class=\"${prefix}--carousel__scroll-container\"\n        @scroll=\"${handleScrollFocus}\"\n        @touchstart=\"${handleTouchStartEvent}\"\n        @touchend=\"${handleTouchEndEvent}\"\n        style=\"${ifNonNull(\n          pageSizeExplicit == null\n            ? null\n            : `${customPropertyPageSize}: ${pageSizeExplicit}`\n        )}\"\n      >\n        <div\n          class=\"${prefix}--carousel__scroll-contents\"\n          style=\"left:${(-start * (contentsBaseWidth + gap)) / pageSize}px\"\n        >\n          <slot @slotchange=\"${handleSlotChange}\"></slot>\n        </div>\n      </div>\n      <div class=\"${prefix}--carousel__navigation\">\n        <button\n          part=\"prev-button\"\n          class=\"${prefix}--btn ${prefix}--btn--secondary ${prefix}--btn--icon-only ${prefix}--carousel__navigation__btn\"\n          ?disabled=\"${pagesBefore === 0}\"\n          @click=\"${handleClickPrevButton}\"\n          aria-label=\"${ifDefined(prevButtonText)}\"\n          title=\"${ifDefined(prevButtonText)}\"\n        >\n          ${CaretLeft20()}\n        </button>\n        ${this._renderStatus()}\n        <button\n          part=\"next-button\"\n          class=\"${prefix}--btn ${prefix}--btn--secondary ${prefix}--btn--icon-only ${prefix}--carousel__navigation__btn\"\n          ?disabled=\"${pagesSince <= 1}\"\n          @click=\"${handleClickNextButton}\"\n          aria-label=\"${ifDefined(nextButtonText)}\"\n          title=\"${ifDefined(nextButtonText)}\"\n        >\n          ${CaretRight20()}\n        </button>\n      </div>\n    `;\n  }\n\n  /**\n   * The CSS custom property name for the live page size.\n   * If the CSS custom property is set to `<div class=\"bx--carousel__scroll-container\">`\n   * or its ancestor (e.g. the host `<dds-carousel>`), this is set automatically from the CSS custom property.\n   */\n  static get customPropertyPageSize() {\n    return `--${ddsPrefix}--carousel--page-size`;\n  }\n\n  /**\n   * The name of the custom event fired when the video title is updated\n   */\n  static get eventVideoTitleUpdated() {\n    return `${ddsPrefix}-card-cta-video-title-updated`;\n  }\n\n  /**\n   * The selector for the card component\n   */\n  static get selectorItem() {\n    return `${ddsPrefix}-card`;\n  }\n\n  /**\n   * The selector for the card cta\n   */\n  static get selectorItemCardCTA() {\n    return `${ddsPrefix}-card-cta`;\n  }\n\n  /**\n   * The selector for the video cta container\n   */\n  static get selectorItemVideoCTAContainer() {\n    return `${ddsPrefix}-video-cta-container`;\n  }\n\n  /**\n   * A selector that will return the card item's eyebrow\n   */\n  static get selectorItemEyebrow() {\n    return `${ddsPrefix}-card-eyebrow`;\n  }\n\n  /**\n   * A selector that will return the card item's tag group\n   */\n  static get selectorItemTagGroup() {\n    return `${ddsPrefix}-tag-group`;\n  }\n\n  /**\n   * A selector that will return the card item's tag group\n   */\n  static get selectorItemParagraph() {\n    return `p`;\n  }\n\n  /**\n   * A selector that will return the card item's heading\n   */\n  static get selectorItemHeading() {\n    return `${ddsPrefix}-card-heading`;\n  }\n\n  /**\n   * A selector that will return the card item's footer\n   */\n  static get selectorItemFooter() {\n    return `${ddsPrefix}-card-cta-footer`;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--carousel`;\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return `\n      ${selectorTabbable}\n    `;\n  }\n\n  static styles = styles;\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSCarousel;\n"]}

package/es/components/carousel/carousel.js

@@ -16,12 +16,12 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { html, property, state, query, customElement, LitElement } from 'lit-element';
 import 'wicg-inert';
 import settings from 'carbon-components/es/globals/js/settings.js';
-import ifNonNull from '@carbon/carbon-web-components/es/globals/directives/if-non-null.js';
-import CaretLeft20 from '@carbon/carbon-web-components/es/icons/caret--left/20.js';
-import CaretRight20 from '@carbon/carbon-web-components/es/icons/caret--right/20.js';
-import HostListener from '@carbon/carbon-web-components/es/globals/decorators/host-listener.js';
-import HostListenerMixin from '@carbon/carbon-web-components/es/globals/mixins/host-listener.js';
-import { selectorTabbable as _selectorTabbable } from '@carbon/carbon-web-components/es/globals/settings.js';
+import ifNonNull from '@carbon/web-components/es/globals/directives/if-non-null.js';
+import CaretLeft20 from '@carbon/web-components/es/icons/caret--left/20.js';
+import CaretRight20 from '@carbon/web-components/es/icons/caret--right/20.js';
+import HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';
+import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
+import { selectorTabbable as _selectorTabbable } from '@carbon/web-components/es/globals/settings.js';
 import ddsSettings from "../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js";
 import sameHeight from "../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/sameHeight/sameHeight.js";
 import styles from "././carousel.css.js";

package/es/components/carousel/carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","names":["ifDefined","html","property","state","query","customElement","LitElement","settings","ifNonNull","CaretLeft20","CaretRight20","HostListener","HostListenerMixin","selectorTabbable","ddsSettings","sameHeight","styles","StableSelectorMixin","prefix","stablePrefix","ddsPrefix","MAX_GESTURE_DURATION","MIN_DISTANCE_TRAVELLED","headingBottomMargin","DDSCarousel","create","_contentsNode","contentsNode","_observerResizeContainer","disconnect","_observerResizeRoot","ResizeObserver","_observeResizeRoot","observe","ownerDocument","documentElement","_observeResizeContainer","target","scrollTo","containsCurrent","contains","currentItemIndex","Array","from","children","forEach","carouselItem","index","start","pageSize","nextStart","Math","floor","pageOffset","event","_setSameHeight","_total","total","min","max","_startPos","touches","clientX","_startTime","Date","getTime","distTravelled","changedTouches","elapsedTime","abs","slot","name","assignedNodes","filter","node","nodeType","Node","ELEMENT_NODE","length","_updateGap","_childItems","HTMLElement","elem","matches","undefined","constructor","selectorItem","selectorItemVideoCTAContainer","e","_childItemEyebrows","push","querySelector","selectorItemEyebrow","_childItemParagraphs","selectorItemParagraph","_childItemTagGroup","selectorItemTagGroup","_childItemHeadings","selectorItemHeading","selectorItemCardCTA","shadowRoot","heading","_childItemFooters","selectorItemFooter","records","contentRect","width","contentsBaseWidth","_contentsBaseWidth","customPropertyPageSize","defaultView","w","_pageSizeAuto","Number","getComputedStyle","getPropertyValue","formatStatus","pagesBefore","ceil","pagesSince","currentPage","pages","item","tagGroupHeight","groupHeight","offsetHeight","nextElementSibling","style","marginBottom","_slotNode","slotNode","elems","_gap","scrollWidth","reduce","acc","offsetWidth","selectorTabbableForCarousel","querySelectorAll","attribute","type","_pageSize","pageSizeAuto","value","_cleanAndCreateObserverResize","containingModal","closest","hasFocusableElements","setAttribute","setTimeout","modalBody","overflow","changedProperties","has","childItems","indexOf","inert","nextButtonText","prevButtonText","gap","pageSizeExplicit","_handleClickNextButton","handleClickNextButton","_handleClickPrevButton","handleClickPrevButton","_handleScrollFocus","handleScrollFocus","_handleSlotChange","handleSlotChange","_handleTouchStartEvent","handleTouchStartEvent","_handleTouchEndEvent","handleTouchEndEvent","_renderStatus"],"sources":["components/carousel/carousel.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport {\n  html,\n  property,\n  state,\n  query,\n  customElement,\n  LitElement,\n} from 'lit-element';\nimport 'wicg-inert';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport ifNonNull from '@carbon/carbon-web-components/es/globals/directives/if-non-null.js';\nimport CaretLeft20 from '@carbon/carbon-web-components/es/icons/caret--left/20.js';\nimport CaretRight20 from '@carbon/carbon-web-components/es/icons/caret--right/20.js';\nimport HostListener from '@carbon/carbon-web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/carbon-web-components/es/globals/mixins/host-listener.js';\nimport { selectorTabbable } from '@carbon/carbon-web-components/es/globals/settings.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport sameHeight from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/sameHeight/sameHeight';\nimport styles from './carousel.scss';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport DDSExpressiveModal from '../expressive-modal/expressive-modal';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\nconst MAX_GESTURE_DURATION = 300; // max time allowed to do swipe\nconst MIN_DISTANCE_TRAVELLED = 75; // min distance traveled to be considered swipe\nconst headingBottomMargin = 64; // tag constants used for same height calculations\n\n/**\n * Carousel.\n *\n * @element dds-carousel\n * @csspart prev-button The button to go to the previous page.\n * @csspart next-button The button to go to the next page.\n */\n@customElement(`${ddsPrefix}-carousel`)\nclass DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {\n  /**\n   * The scrolling contents node.\n   */\n  @query(`.${prefix}--carousel__scroll-contents`)\n  private _contentsNode?: HTMLElement;\n\n  /**\n   * The width of the scroll contents area node, excluding one of overflowed contents.\n   */\n  @state()\n  private _contentsBaseWidth = 0;\n\n  /**\n   * The gap width between each card.\n   */\n  @state()\n  private _gap = 0;\n\n  /**\n   * Array to hold the card-heading elements within child items.\n   */\n  private _childItems: any[] = [];\n\n  /**\n   * Array to hold the card-heading elements within child items.\n   */\n  private _childItemHeadings: any[] = [];\n\n  /**\n   * Array to hold the card-eyebrow elements within child items.\n   */\n  private _childItemEyebrows: any[] = [];\n\n  /**\n   * Array to hold the tag-group elements within child items.\n   */\n  private _childItemTagGroup: any[] = [];\n\n  /**\n   * Array to hold the paragraph elements within child items.\n   */\n  private _childItemParagraphs: any[] = [];\n\n  /**\n   * Array to hold the card-cta-footer elements within child items.\n   */\n  private _childItemFooters: any[] = [];\n\n  /**\n   * The observer for the resize of the scroll container.\n   */\n  private _observerResizeContainer: any | null = null; // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n\n  /**\n   * The observer for the resize of the viewport.\n   */\n  private _observerResizeRoot: any | null = null; // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n\n  /**\n   * The page size that is explicitly set.\n   */\n  @state()\n  private _pageSize?: number;\n\n  /**\n   * The page size that is automatically calculated upon viewport size\n   * via `--dds--carousel--page-size` CSS custom property.\n   * If `page-size` attribute is set, this value is ignored.\n   */\n  @state()\n  private _pageSizeAuto = 1;\n\n  /**\n   * The default slot.\n   */\n  @query('slot:not([name])')\n  private _slotNode?: HTMLSlotElement;\n\n  /**\n   * The number of total items.\n   */\n  @state()\n  private _total = 0;\n\n  /**\n   * Initial touch position (used to detect swipe gesture)\n   */\n  @state()\n  private _startPos = 0;\n\n  /**\n   * Initial touch time (used to detect swipe gesture)\n   */\n  @state()\n  private _startTime = 0;\n\n  /**\n   * Cleans-up and creats the resize observer for the scrolling container.\n   *\n   * @param [options] The options.\n   * @param [options.create] `true` to create the new resize observer.\n   */\n  private _cleanAndCreateObserverResize({ create }: { create?: boolean } = {}) {\n    const { _contentsNode: contentsNode } = this;\n    if (contentsNode) {\n      if (this._observerResizeContainer) {\n        this._observerResizeContainer.disconnect();\n        this._observerResizeContainer = null;\n      }\n      if (this._observerResizeRoot) {\n        this._observerResizeRoot.disconnect();\n        this._observerResizeRoot = null;\n      }\n      if (create) {\n        // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n        // @ts-ignore\n        this._observerResizeRoot = new ResizeObserver(this._observeResizeRoot);\n        this._observerResizeRoot.observe(this.ownerDocument!.documentElement);\n        // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n        // @ts-ignore\n        this._observerResizeContainer = new ResizeObserver(\n          this._observeResizeContainer\n        );\n        this._observerResizeContainer.observe(contentsNode);\n      }\n    }\n  }\n\n  /**\n   * Stops the container from scrolling when focusing on a card outside of the viewport.\n   *\n   * @param event The event.\n   */\n  // eslint-disable-next-line class-methods-use-this\n  private _handleScrollFocus({ target }: Event) {\n    (target as HTMLElement).scrollTo(0, 0);\n  }\n\n  /**\n   * Handles card focus throughout pages.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocus = async ({ target }: FocusEvent) => {\n    const containsCurrent =\n      target !== this && this.contains(target as HTMLElement);\n    let currentItemIndex = 0;\n    Array.from(this.children).forEach((carouselItem, index) => {\n      if (carouselItem.contains(target as HTMLElement)) {\n        currentItemIndex = index;\n      }\n    });\n\n    // Calculates proper page to display if focus is outside the current page\n    if (\n      containsCurrent &&\n      (currentItemIndex < this.start ||\n        currentItemIndex >= this.start + this.pageSize)\n    ) {\n      // The `currentIndex` floored by `pageSize`\n      const nextStart =\n        Math.floor(currentItemIndex / this.pageSize) * this.pageSize;\n      const pageOffset = this.start % this.pageSize;\n\n      // Ensures the page moves by `this.pageSize` in either direction\n      this.start = nextStart + pageOffset;\n    }\n  };\n\n  /**\n   * Handles card with video heading and applies the set same height function.\n   *\n   * @param event The event.\n   */\n  @HostListener(`document:eventVideoTitleUpdated`)\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleVideoTitleUpdate = async (event: FocusEvent) => {\n    if (event) {\n      this._setSameHeight();\n    }\n  };\n\n  /**\n   * Handles `click` event on the next button.\n   */\n  private _handleClickNextButton() {\n    const { pageSize, start, _total: total } = this;\n    this.start = Math.min(start + pageSize, total - 1);\n  }\n\n  /**\n   * Handles `click` event on the prev button.\n   */\n  private _handleClickPrevButton() {\n    const { pageSize, start } = this;\n    this.start = Math.max(start - pageSize, 0);\n  }\n\n  /**\n   * Handles `touchstart` event.\n   */\n  private _handleTouchStartEvent(event: TouchEvent) {\n    this._startPos = event.touches[0].clientX;\n    this._startTime = new Date().getTime();\n  }\n\n  /**\n   * Handles `touchend` event.\n   */\n  private _handleTouchEndEvent(event: TouchEvent) {\n    const { _startPos, _startTime } = this;\n    const { pageSize, start, _total: total } = this;\n\n    const distTravelled = event.changedTouches[0].clientX - _startPos; // distance travelled\n    const elapsedTime = new Date().getTime() - _startTime; // elapsed time\n\n    if (\n      elapsedTime <= MAX_GESTURE_DURATION &&\n      Math.abs(distTravelled) >= MIN_DISTANCE_TRAVELLED\n    ) {\n      if (distTravelled < 0) {\n        this.start = Math.min(start + pageSize, total - 1);\n      } else {\n        this.start = Math.max(start - pageSize, 0);\n      }\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    const { name } = slot;\n    if (!name) {\n      this._total = slot\n        .assignedNodes()\n        .filter((node) => node.nodeType === Node.ELEMENT_NODE).length;\n    }\n    this._updateGap();\n\n    this._childItems = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((node) => node instanceof HTMLElement);\n\n    // retrieve item heading, eyebrows, and footers to set same height\n    if (this._childItems) {\n      this._childItems\n        .filter((elem) =>\n          (elem as HTMLElement).matches !== undefined\n            ? (elem as HTMLElement).matches(\n                (this.constructor as typeof DDSCarousel).selectorItem\n              ) ||\n              (elem as HTMLElement).matches(\n                (this.constructor as typeof DDSCarousel)\n                  .selectorItemVideoCTAContainer\n              )\n            : false\n        )\n        .forEach((e) => {\n          this._childItemEyebrows.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemEyebrow\n            )\n          );\n          this._childItemParagraphs.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemParagraph\n            )\n          );\n          this._childItemTagGroup.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemTagGroup\n            )\n          );\n          this._childItemHeadings.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemHeading\n            )\n          );\n\n          this._childItemHeadings.push(\n            (e as HTMLElement)\n              .querySelector(\n                (this.constructor as typeof DDSCarousel).selectorItemCardCTA\n              )\n              ?.shadowRoot?.querySelector(\n                (this.constructor as typeof DDSCarousel).selectorItemHeading\n              )\n          );\n\n          this._childItemHeadings = this._childItemHeadings.filter(\n            (heading) => heading\n          );\n\n          this._childItemFooters.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemFooter\n            )\n          );\n        });\n    }\n  }\n\n  /**\n   * The observer for the resize of the scroll container.\n   */\n  private _observeResizeContainer = (records) => {\n    const { contentRect } = records[records.length - 1];\n    const { width: contentsBaseWidth } = contentRect;\n    this._contentsBaseWidth = contentsBaseWidth;\n    this._updateGap();\n  };\n\n  /**\n   * The observer for the resize of the viewport.\n   */\n  private _observeResizeRoot = () => {\n    const { customPropertyPageSize } = this.constructor as typeof DDSCarousel;\n    const { _contentsNode: contentsNode } = this;\n    const { defaultView: w } = this.ownerDocument!;\n    this._pageSizeAuto = Number(\n      w!\n        .getComputedStyle(contentsNode!)\n        .getPropertyValue(customPropertyPageSize)\n    );\n    this._setSameHeight();\n  };\n\n  /**\n   * @returns Page status text.\n   */\n  private _renderStatus() {\n    const { start, pageSize, formatStatus, _total: total } = this;\n    // Copes with the condition where `start % pageSize` is non-zero\n    const pagesBefore = Math.ceil(start / pageSize);\n    const pagesSince = Math.ceil((total - start) / pageSize);\n    return formatStatus({\n      currentPage: Math.ceil(start / pageSize) + 1,\n      pages: pagesBefore + pagesSince,\n    });\n  }\n\n  private _setSameHeight = () => {\n    // check if items are not null before using sameHeight\n\n    sameHeight(\n      this._childItemEyebrows.filter((item) => item !== null),\n      'sm'\n    );\n    sameHeight(\n      this._childItemHeadings.filter((item) => item !== null),\n      'sm'\n    );\n    sameHeight(\n      this._childItemParagraphs.filter((item) => item !== null),\n      'sm'\n    );\n    sameHeight(\n      this._childItemFooters.filter((item) => item !== null),\n      'sm'\n    );\n\n    let tagGroupHeight: number = 0;\n\n    // get tallest height of tag groups\n    this._childItemTagGroup.forEach((item) => {\n      if (item) {\n        const groupHeight = (item as HTMLElement).offsetHeight;\n        if (groupHeight > tagGroupHeight) {\n          tagGroupHeight = groupHeight;\n        }\n      }\n    });\n\n    this._childItemHeadings.forEach((e) => {\n      // add tag group height to heading to the cards lacking tag group\n      if (\n        e &&\n        !e.nextElementSibling?.matches(\n          (this.constructor as typeof DDSCarousel).selectorItemTagGroup\n        )\n      ) {\n        e.style.marginBottom = `${tagGroupHeight + headingBottomMargin}px`;\n      }\n    });\n  };\n\n  /**\n   * Calculates the width between cards.\n   */\n  private _updateGap() {\n    const { _contentsNode: contentsNode, _slotNode: slotNode } = this;\n    const elems = slotNode!\n      .assignedNodes()\n      .filter((node) => node.nodeType === Node.ELEMENT_NODE);\n    this._gap =\n      elems.length <= 1\n        ? 0\n        : (contentsNode!.scrollWidth -\n            elems.reduce(\n              (acc, elem) => acc + ((elem as HTMLElement).offsetWidth ?? 0),\n              0\n            )) /\n          (elems.length - 1);\n  }\n\n  get focusableElements() {\n    const { selectorTabbable: selectorTabbableForCarousel } = this\n      .constructor as typeof DDSExpressiveModal;\n    return [\n      ...Array.from(\n        (this.shadowRoot?.querySelectorAll(\n          selectorTabbableForCarousel\n        ) as NodeListOf<HTMLElement>) || []\n      ),\n      ...Array.from(\n        this.querySelectorAll(\n          selectorTabbableForCarousel\n        ) as NodeListOf<HTMLElement>\n      ),\n    ];\n  }\n\n  /**\n   * The formatter for the pagination status. Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatStatus = ({ currentPage, pages }) => `${currentPage} / ${pages}`;\n\n  /**\n   * Number of items per page.\n   * If `--dds--carousel--page-size` CSS custom property is set to `<div class=\"bx--carousel__scroll-container\">`\n   * or its ancestor (e.g. the host `<dds-carousel>`), this is set automatically from `--dds--carousel--page-size`.\n   */\n  @property({ type: Number, attribute: 'page-size' })\n  get pageSize() {\n    const { _pageSize: pageSize, _pageSizeAuto: pageSizeAuto } = this;\n    return pageSize ?? pageSizeAuto;\n  }\n\n  set pageSize(value: number) {\n    this._pageSize = value;\n    // Don't call `.requestUpdate()` here given we track updates via `_pageSize` and `_pageSizeAuto`\n  }\n\n  /**\n   * The assistive text for the button to go to next page.\n   */\n  @property({ attribute: 'next-button-text' })\n  nextButtonText = 'Next page';\n\n  /**\n   * The assistive text for the button to go to previous page.\n   */\n  @property({ attribute: 'prev-button-text' })\n  prevButtonText = 'Previous page';\n\n  /**\n   * The current zero-based index of the left-most card.\n   */\n  @property({ type: Number })\n  start = 0;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._cleanAndCreateObserverResize({ create: true });\n\n    const containingModal = this.closest(\n      `${ddsPrefix}-expressive-modal`\n    ) as DDSExpressiveModal;\n    if (containingModal) {\n      containingModal.hasFocusableElements.push(this);\n      this.setAttribute('in-modal', '');\n\n      setTimeout(() => {\n        containingModal.modalBody!.style.overflow = 'hidden';\n        containingModal.modalBody!.style.width = 'var(--modal-vw)';\n      }, 0);\n    }\n  }\n\n  disconnectedCallback() {\n    this._cleanAndCreateObserverResize();\n    super.disconnectedCallback();\n  }\n\n  firstUpdated() {\n    this._cleanAndCreateObserverResize({ create: true });\n  }\n\n  protected updated(changedProperties) {\n    if (changedProperties.has('start')) {\n      const { _childItems: childItems, start, pageSize } = this;\n\n      childItems.forEach((item) => {\n        const index = childItems.indexOf(item);\n        if (index < start || index > start + pageSize - 1) {\n          item.inert = true;\n        } else {\n          item.inert = false;\n        }\n      });\n    }\n  }\n\n  render() {\n    const { customPropertyPageSize } = this.constructor as typeof DDSCarousel;\n    const {\n      nextButtonText,\n      pageSize,\n      prevButtonText,\n      start,\n      _contentsBaseWidth: contentsBaseWidth,\n      _gap: gap,\n      _pageSize: pageSizeExplicit,\n      _total: total,\n      _handleClickNextButton: handleClickNextButton,\n      _handleClickPrevButton: handleClickPrevButton,\n      _handleScrollFocus: handleScrollFocus,\n      _handleSlotChange: handleSlotChange,\n      _handleTouchStartEvent: handleTouchStartEvent,\n      _handleTouchEndEvent: handleTouchEndEvent,\n    } = this;\n    // Copes with the condition where `start % pageSize` is non-zero\n    const pagesBefore = Math.ceil(start / pageSize);\n    const pagesSince = Math.ceil((total - start) / pageSize);\n    // Use another div from the host `<dds-carousel>` to reflect private state\n    return html`\n      <div\n        class=\"${prefix}--carousel__scroll-container\"\n        @scroll=\"${handleScrollFocus}\"\n        @touchstart=\"${handleTouchStartEvent}\"\n        @touchend=\"${handleTouchEndEvent}\"\n        style=\"${ifNonNull(\n          pageSizeExplicit == null\n            ? null\n            : `${customPropertyPageSize}: ${pageSizeExplicit}`\n        )}\"\n      >\n        <div\n          class=\"${prefix}--carousel__scroll-contents\"\n          style=\"left:${(-start * (contentsBaseWidth + gap)) / pageSize}px\"\n        >\n          <slot @slotchange=\"${handleSlotChange}\"></slot>\n        </div>\n      </div>\n      <div class=\"${prefix}--carousel__navigation\">\n        <button\n          part=\"prev-button\"\n          class=\"${prefix}--btn ${prefix}--btn--secondary ${prefix}--btn--icon-only ${prefix}--carousel__navigation__btn\"\n          ?disabled=\"${pagesBefore === 0}\"\n          @click=\"${handleClickPrevButton}\"\n          aria-label=\"${ifDefined(prevButtonText)}\"\n          title=\"${ifDefined(prevButtonText)}\"\n        >\n          ${CaretLeft20()}\n        </button>\n        ${this._renderStatus()}\n        <button\n          part=\"next-button\"\n          class=\"${prefix}--btn ${prefix}--btn--secondary ${prefix}--btn--icon-only ${prefix}--carousel__navigation__btn\"\n          ?disabled=\"${pagesSince <= 1}\"\n          @click=\"${handleClickNextButton}\"\n          aria-label=\"${ifDefined(nextButtonText)}\"\n          title=\"${ifDefined(nextButtonText)}\"\n        >\n          ${CaretRight20()}\n        </button>\n      </div>\n    `;\n  }\n\n  /**\n   * The CSS custom property name for the live page size.\n   * If the CSS custom property is set to `<div class=\"bx--carousel__scroll-container\">`\n   * or its ancestor (e.g. the host `<dds-carousel>`), this is set automatically from the CSS custom property.\n   */\n  static get customPropertyPageSize() {\n    return `--${ddsPrefix}--carousel--page-size`;\n  }\n\n  /**\n   * The name of the custom event fired when the video title is updated\n   */\n  static get eventVideoTitleUpdated() {\n    return `${ddsPrefix}-card-cta-video-title-updated`;\n  }\n\n  /**\n   * The selector for the card component\n   */\n  static get selectorItem() {\n    return `${ddsPrefix}-card`;\n  }\n\n  /**\n   * The selector for the card cta\n   */\n  static get selectorItemCardCTA() {\n    return `${ddsPrefix}-card-cta`;\n  }\n\n  /**\n   * The selector for the video cta container\n   */\n  static get selectorItemVideoCTAContainer() {\n    return `${ddsPrefix}-video-cta-container`;\n  }\n\n  /**\n   * A selector that will return the card item's eyebrow\n   */\n  static get selectorItemEyebrow() {\n    return `${ddsPrefix}-card-eyebrow`;\n  }\n\n  /**\n   * A selector that will return the card item's tag group\n   */\n  static get selectorItemTagGroup() {\n    return `${ddsPrefix}-tag-group`;\n  }\n\n  /**\n   * A selector that will return the card item's tag group\n   */\n  static get selectorItemParagraph() {\n    return `p`;\n  }\n\n  /**\n   * A selector that will return the card item's heading\n   */\n  static get selectorItemHeading() {\n    return `${ddsPrefix}-card-heading`;\n  }\n\n  /**\n   * A selector that will return the card item's footer\n   */\n  static get selectorItemFooter() {\n    return `${ddsPrefix}-card-cta-footer`;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--carousel`;\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return `\n      ${selectorTabbable}\n    `;\n  }\n\n  static styles = styles;\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSCarousel;\n"],"mappings":"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"}
+{"version":3,"file":"carousel.js","names":["ifDefined","html","property","state","query","customElement","LitElement","settings","ifNonNull","CaretLeft20","CaretRight20","HostListener","HostListenerMixin","selectorTabbable","ddsSettings","sameHeight","styles","StableSelectorMixin","prefix","stablePrefix","ddsPrefix","MAX_GESTURE_DURATION","MIN_DISTANCE_TRAVELLED","headingBottomMargin","DDSCarousel","create","_contentsNode","contentsNode","_observerResizeContainer","disconnect","_observerResizeRoot","ResizeObserver","_observeResizeRoot","observe","ownerDocument","documentElement","_observeResizeContainer","target","scrollTo","containsCurrent","contains","currentItemIndex","Array","from","children","forEach","carouselItem","index","start","pageSize","nextStart","Math","floor","pageOffset","event","_setSameHeight","_total","total","min","max","_startPos","touches","clientX","_startTime","Date","getTime","distTravelled","changedTouches","elapsedTime","abs","slot","name","assignedNodes","filter","node","nodeType","Node","ELEMENT_NODE","length","_updateGap","_childItems","HTMLElement","elem","matches","undefined","constructor","selectorItem","selectorItemVideoCTAContainer","e","_childItemEyebrows","push","querySelector","selectorItemEyebrow","_childItemParagraphs","selectorItemParagraph","_childItemTagGroup","selectorItemTagGroup","_childItemHeadings","selectorItemHeading","selectorItemCardCTA","shadowRoot","heading","_childItemFooters","selectorItemFooter","records","contentRect","width","contentsBaseWidth","_contentsBaseWidth","customPropertyPageSize","defaultView","w","_pageSizeAuto","Number","getComputedStyle","getPropertyValue","formatStatus","pagesBefore","ceil","pagesSince","currentPage","pages","item","tagGroupHeight","groupHeight","offsetHeight","nextElementSibling","style","marginBottom","_slotNode","slotNode","elems","_gap","scrollWidth","reduce","acc","offsetWidth","selectorTabbableForCarousel","querySelectorAll","attribute","type","_pageSize","pageSizeAuto","value","_cleanAndCreateObserverResize","containingModal","closest","hasFocusableElements","setAttribute","setTimeout","modalBody","overflow","changedProperties","has","childItems","indexOf","inert","nextButtonText","prevButtonText","gap","pageSizeExplicit","_handleClickNextButton","handleClickNextButton","_handleClickPrevButton","handleClickPrevButton","_handleScrollFocus","handleScrollFocus","_handleSlotChange","handleSlotChange","_handleTouchStartEvent","handleTouchStartEvent","_handleTouchEndEvent","handleTouchEndEvent","_renderStatus"],"sources":["components/carousel/carousel.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport {\n  html,\n  property,\n  state,\n  query,\n  customElement,\n  LitElement,\n} from 'lit-element';\nimport 'wicg-inert';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport ifNonNull from '@carbon/web-components/es/globals/directives/if-non-null.js';\nimport CaretLeft20 from '@carbon/web-components/es/icons/caret--left/20.js';\nimport CaretRight20 from '@carbon/web-components/es/icons/caret--right/20.js';\nimport HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport sameHeight from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/sameHeight/sameHeight';\nimport styles from './carousel.scss';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport DDSExpressiveModal from '../expressive-modal/expressive-modal';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\nconst MAX_GESTURE_DURATION = 300; // max time allowed to do swipe\nconst MIN_DISTANCE_TRAVELLED = 75; // min distance traveled to be considered swipe\nconst headingBottomMargin = 64; // tag constants used for same height calculations\n\n/**\n * Carousel.\n *\n * @element dds-carousel\n * @csspart prev-button The button to go to the previous page.\n * @csspart next-button The button to go to the next page.\n */\n@customElement(`${ddsPrefix}-carousel`)\nclass DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {\n  /**\n   * The scrolling contents node.\n   */\n  @query(`.${prefix}--carousel__scroll-contents`)\n  private _contentsNode?: HTMLElement;\n\n  /**\n   * The width of the scroll contents area node, excluding one of overflowed contents.\n   */\n  @state()\n  private _contentsBaseWidth = 0;\n\n  /**\n   * The gap width between each card.\n   */\n  @state()\n  private _gap = 0;\n\n  /**\n   * Array to hold the card-heading elements within child items.\n   */\n  private _childItems: any[] = [];\n\n  /**\n   * Array to hold the card-heading elements within child items.\n   */\n  private _childItemHeadings: any[] = [];\n\n  /**\n   * Array to hold the card-eyebrow elements within child items.\n   */\n  private _childItemEyebrows: any[] = [];\n\n  /**\n   * Array to hold the tag-group elements within child items.\n   */\n  private _childItemTagGroup: any[] = [];\n\n  /**\n   * Array to hold the paragraph elements within child items.\n   */\n  private _childItemParagraphs: any[] = [];\n\n  /**\n   * Array to hold the card-cta-footer elements within child items.\n   */\n  private _childItemFooters: any[] = [];\n\n  /**\n   * The observer for the resize of the scroll container.\n   */\n  private _observerResizeContainer: any | null = null; // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n\n  /**\n   * The observer for the resize of the viewport.\n   */\n  private _observerResizeRoot: any | null = null; // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n\n  /**\n   * The page size that is explicitly set.\n   */\n  @state()\n  private _pageSize?: number;\n\n  /**\n   * The page size that is automatically calculated upon viewport size\n   * via `--dds--carousel--page-size` CSS custom property.\n   * If `page-size` attribute is set, this value is ignored.\n   */\n  @state()\n  private _pageSizeAuto = 1;\n\n  /**\n   * The default slot.\n   */\n  @query('slot:not([name])')\n  private _slotNode?: HTMLSlotElement;\n\n  /**\n   * The number of total items.\n   */\n  @state()\n  private _total = 0;\n\n  /**\n   * Initial touch position (used to detect swipe gesture)\n   */\n  @state()\n  private _startPos = 0;\n\n  /**\n   * Initial touch time (used to detect swipe gesture)\n   */\n  @state()\n  private _startTime = 0;\n\n  /**\n   * Cleans-up and creats the resize observer for the scrolling container.\n   *\n   * @param [options] The options.\n   * @param [options.create] `true` to create the new resize observer.\n   */\n  private _cleanAndCreateObserverResize({ create }: { create?: boolean } = {}) {\n    const { _contentsNode: contentsNode } = this;\n    if (contentsNode) {\n      if (this._observerResizeContainer) {\n        this._observerResizeContainer.disconnect();\n        this._observerResizeContainer = null;\n      }\n      if (this._observerResizeRoot) {\n        this._observerResizeRoot.disconnect();\n        this._observerResizeRoot = null;\n      }\n      if (create) {\n        // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n        // @ts-ignore\n        this._observerResizeRoot = new ResizeObserver(this._observeResizeRoot);\n        this._observerResizeRoot.observe(this.ownerDocument!.documentElement);\n        // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n        // @ts-ignore\n        this._observerResizeContainer = new ResizeObserver(\n          this._observeResizeContainer\n        );\n        this._observerResizeContainer.observe(contentsNode);\n      }\n    }\n  }\n\n  /**\n   * Stops the container from scrolling when focusing on a card outside of the viewport.\n   *\n   * @param event The event.\n   */\n  // eslint-disable-next-line class-methods-use-this\n  private _handleScrollFocus({ target }: Event) {\n    (target as HTMLElement).scrollTo(0, 0);\n  }\n\n  /**\n   * Handles card focus throughout pages.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocus = async ({ target }: FocusEvent) => {\n    const containsCurrent =\n      target !== this && this.contains(target as HTMLElement);\n    let currentItemIndex = 0;\n    Array.from(this.children).forEach((carouselItem, index) => {\n      if (carouselItem.contains(target as HTMLElement)) {\n        currentItemIndex = index;\n      }\n    });\n\n    // Calculates proper page to display if focus is outside the current page\n    if (\n      containsCurrent &&\n      (currentItemIndex < this.start ||\n        currentItemIndex >= this.start + this.pageSize)\n    ) {\n      // The `currentIndex` floored by `pageSize`\n      const nextStart =\n        Math.floor(currentItemIndex / this.pageSize) * this.pageSize;\n      const pageOffset = this.start % this.pageSize;\n\n      // Ensures the page moves by `this.pageSize` in either direction\n      this.start = nextStart + pageOffset;\n    }\n  };\n\n  /**\n   * Handles card with video heading and applies the set same height function.\n   *\n   * @param event The event.\n   */\n  @HostListener(`document:eventVideoTitleUpdated`)\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleVideoTitleUpdate = async (event: FocusEvent) => {\n    if (event) {\n      this._setSameHeight();\n    }\n  };\n\n  /**\n   * Handles `click` event on the next button.\n   */\n  private _handleClickNextButton() {\n    const { pageSize, start, _total: total } = this;\n    this.start = Math.min(start + pageSize, total - 1);\n  }\n\n  /**\n   * Handles `click` event on the prev button.\n   */\n  private _handleClickPrevButton() {\n    const { pageSize, start } = this;\n    this.start = Math.max(start - pageSize, 0);\n  }\n\n  /**\n   * Handles `touchstart` event.\n   */\n  private _handleTouchStartEvent(event: TouchEvent) {\n    this._startPos = event.touches[0].clientX;\n    this._startTime = new Date().getTime();\n  }\n\n  /**\n   * Handles `touchend` event.\n   */\n  private _handleTouchEndEvent(event: TouchEvent) {\n    const { _startPos, _startTime } = this;\n    const { pageSize, start, _total: total } = this;\n\n    const distTravelled = event.changedTouches[0].clientX - _startPos; // distance travelled\n    const elapsedTime = new Date().getTime() - _startTime; // elapsed time\n\n    if (\n      elapsedTime <= MAX_GESTURE_DURATION &&\n      Math.abs(distTravelled) >= MIN_DISTANCE_TRAVELLED\n    ) {\n      if (distTravelled < 0) {\n        this.start = Math.min(start + pageSize, total - 1);\n      } else {\n        this.start = Math.max(start - pageSize, 0);\n      }\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    const { name } = slot;\n    if (!name) {\n      this._total = slot\n        .assignedNodes()\n        .filter((node) => node.nodeType === Node.ELEMENT_NODE).length;\n    }\n    this._updateGap();\n\n    this._childItems = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((node) => node instanceof HTMLElement);\n\n    // retrieve item heading, eyebrows, and footers to set same height\n    if (this._childItems) {\n      this._childItems\n        .filter((elem) =>\n          (elem as HTMLElement).matches !== undefined\n            ? (elem as HTMLElement).matches(\n                (this.constructor as typeof DDSCarousel).selectorItem\n              ) ||\n              (elem as HTMLElement).matches(\n                (this.constructor as typeof DDSCarousel)\n                  .selectorItemVideoCTAContainer\n              )\n            : false\n        )\n        .forEach((e) => {\n          this._childItemEyebrows.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemEyebrow\n            )\n          );\n          this._childItemParagraphs.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemParagraph\n            )\n          );\n          this._childItemTagGroup.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemTagGroup\n            )\n          );\n          this._childItemHeadings.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemHeading\n            )\n          );\n\n          this._childItemHeadings.push(\n            (e as HTMLElement)\n              .querySelector(\n                (this.constructor as typeof DDSCarousel).selectorItemCardCTA\n              )\n              ?.shadowRoot?.querySelector(\n                (this.constructor as typeof DDSCarousel).selectorItemHeading\n              )\n          );\n\n          this._childItemHeadings = this._childItemHeadings.filter(\n            (heading) => heading\n          );\n\n          this._childItemFooters.push(\n            (e as HTMLElement).querySelector(\n              (this.constructor as typeof DDSCarousel).selectorItemFooter\n            )\n          );\n        });\n    }\n  }\n\n  /**\n   * The observer for the resize of the scroll container.\n   */\n  private _observeResizeContainer = (records) => {\n    const { contentRect } = records[records.length - 1];\n    const { width: contentsBaseWidth } = contentRect;\n    this._contentsBaseWidth = contentsBaseWidth;\n    this._updateGap();\n  };\n\n  /**\n   * The observer for the resize of the viewport.\n   */\n  private _observeResizeRoot = () => {\n    const { customPropertyPageSize } = this.constructor as typeof DDSCarousel;\n    const { _contentsNode: contentsNode } = this;\n    const { defaultView: w } = this.ownerDocument!;\n    this._pageSizeAuto = Number(\n      w!\n        .getComputedStyle(contentsNode!)\n        .getPropertyValue(customPropertyPageSize)\n    );\n    this._setSameHeight();\n  };\n\n  /**\n   * @returns Page status text.\n   */\n  private _renderStatus() {\n    const { start, pageSize, formatStatus, _total: total } = this;\n    // Copes with the condition where `start % pageSize` is non-zero\n    const pagesBefore = Math.ceil(start / pageSize);\n    const pagesSince = Math.ceil((total - start) / pageSize);\n    return formatStatus({\n      currentPage: Math.ceil(start / pageSize) + 1,\n      pages: pagesBefore + pagesSince,\n    });\n  }\n\n  private _setSameHeight = () => {\n    // check if items are not null before using sameHeight\n\n    sameHeight(\n      this._childItemEyebrows.filter((item) => item !== null),\n      'sm'\n    );\n    sameHeight(\n      this._childItemHeadings.filter((item) => item !== null),\n      'sm'\n    );\n    sameHeight(\n      this._childItemParagraphs.filter((item) => item !== null),\n      'sm'\n    );\n    sameHeight(\n      this._childItemFooters.filter((item) => item !== null),\n      'sm'\n    );\n\n    let tagGroupHeight: number = 0;\n\n    // get tallest height of tag groups\n    this._childItemTagGroup.forEach((item) => {\n      if (item) {\n        const groupHeight = (item as HTMLElement).offsetHeight;\n        if (groupHeight > tagGroupHeight) {\n          tagGroupHeight = groupHeight;\n        }\n      }\n    });\n\n    this._childItemHeadings.forEach((e) => {\n      // add tag group height to heading to the cards lacking tag group\n      if (\n        e &&\n        !e.nextElementSibling?.matches(\n          (this.constructor as typeof DDSCarousel).selectorItemTagGroup\n        )\n      ) {\n        e.style.marginBottom = `${tagGroupHeight + headingBottomMargin}px`;\n      }\n    });\n  };\n\n  /**\n   * Calculates the width between cards.\n   */\n  private _updateGap() {\n    const { _contentsNode: contentsNode, _slotNode: slotNode } = this;\n    const elems = slotNode!\n      .assignedNodes()\n      .filter((node) => node.nodeType === Node.ELEMENT_NODE);\n    this._gap =\n      elems.length <= 1\n        ? 0\n        : (contentsNode!.scrollWidth -\n            elems.reduce(\n              (acc, elem) => acc + ((elem as HTMLElement).offsetWidth ?? 0),\n              0\n            )) /\n          (elems.length - 1);\n  }\n\n  get focusableElements() {\n    const { selectorTabbable: selectorTabbableForCarousel } = this\n      .constructor as typeof DDSExpressiveModal;\n    return [\n      ...Array.from(\n        (this.shadowRoot?.querySelectorAll(\n          selectorTabbableForCarousel\n        ) as NodeListOf<HTMLElement>) || []\n      ),\n      ...Array.from(\n        this.querySelectorAll(\n          selectorTabbableForCarousel\n        ) as NodeListOf<HTMLElement>\n      ),\n    ];\n  }\n\n  /**\n   * The formatter for the pagination status. Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatStatus = ({ currentPage, pages }) => `${currentPage} / ${pages}`;\n\n  /**\n   * Number of items per page.\n   * If `--dds--carousel--page-size` CSS custom property is set to `<div class=\"bx--carousel__scroll-container\">`\n   * or its ancestor (e.g. the host `<dds-carousel>`), this is set automatically from `--dds--carousel--page-size`.\n   */\n  @property({ type: Number, attribute: 'page-size' })\n  get pageSize() {\n    const { _pageSize: pageSize, _pageSizeAuto: pageSizeAuto } = this;\n    return pageSize ?? pageSizeAuto;\n  }\n\n  set pageSize(value: number) {\n    this._pageSize = value;\n    // Don't call `.requestUpdate()` here given we track updates via `_pageSize` and `_pageSizeAuto`\n  }\n\n  /**\n   * The assistive text for the button to go to next page.\n   */\n  @property({ attribute: 'next-button-text' })\n  nextButtonText = 'Next page';\n\n  /**\n   * The assistive text for the button to go to previous page.\n   */\n  @property({ attribute: 'prev-button-text' })\n  prevButtonText = 'Previous page';\n\n  /**\n   * The current zero-based index of the left-most card.\n   */\n  @property({ type: Number })\n  start = 0;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._cleanAndCreateObserverResize({ create: true });\n\n    const containingModal = this.closest(\n      `${ddsPrefix}-expressive-modal`\n    ) as DDSExpressiveModal;\n    if (containingModal) {\n      containingModal.hasFocusableElements.push(this);\n      this.setAttribute('in-modal', '');\n\n      setTimeout(() => {\n        containingModal.modalBody!.style.overflow = 'hidden';\n        containingModal.modalBody!.style.width = 'var(--modal-vw)';\n      }, 0);\n    }\n  }\n\n  disconnectedCallback() {\n    this._cleanAndCreateObserverResize();\n    super.disconnectedCallback();\n  }\n\n  firstUpdated() {\n    this._cleanAndCreateObserverResize({ create: true });\n  }\n\n  protected updated(changedProperties) {\n    if (changedProperties.has('start')) {\n      const { _childItems: childItems, start, pageSize } = this;\n\n      childItems.forEach((item) => {\n        const index = childItems.indexOf(item);\n        if (index < start || index > start + pageSize - 1) {\n          item.inert = true;\n        } else {\n          item.inert = false;\n        }\n      });\n    }\n  }\n\n  render() {\n    const { customPropertyPageSize } = this.constructor as typeof DDSCarousel;\n    const {\n      nextButtonText,\n      pageSize,\n      prevButtonText,\n      start,\n      _contentsBaseWidth: contentsBaseWidth,\n      _gap: gap,\n      _pageSize: pageSizeExplicit,\n      _total: total,\n      _handleClickNextButton: handleClickNextButton,\n      _handleClickPrevButton: handleClickPrevButton,\n      _handleScrollFocus: handleScrollFocus,\n      _handleSlotChange: handleSlotChange,\n      _handleTouchStartEvent: handleTouchStartEvent,\n      _handleTouchEndEvent: handleTouchEndEvent,\n    } = this;\n    // Copes with the condition where `start % pageSize` is non-zero\n    const pagesBefore = Math.ceil(start / pageSize);\n    const pagesSince = Math.ceil((total - start) / pageSize);\n    // Use another div from the host `<dds-carousel>` to reflect private state\n    return html`\n      <div\n        class=\"${prefix}--carousel__scroll-container\"\n        @scroll=\"${handleScrollFocus}\"\n        @touchstart=\"${handleTouchStartEvent}\"\n        @touchend=\"${handleTouchEndEvent}\"\n        style=\"${ifNonNull(\n          pageSizeExplicit == null\n            ? null\n            : `${customPropertyPageSize}: ${pageSizeExplicit}`\n        )}\"\n      >\n        <div\n          class=\"${prefix}--carousel__scroll-contents\"\n          style=\"left:${(-start * (contentsBaseWidth + gap)) / pageSize}px\"\n        >\n          <slot @slotchange=\"${handleSlotChange}\"></slot>\n        </div>\n      </div>\n      <div class=\"${prefix}--carousel__navigation\">\n        <button\n          part=\"prev-button\"\n          class=\"${prefix}--btn ${prefix}--btn--secondary ${prefix}--btn--icon-only ${prefix}--carousel__navigation__btn\"\n          ?disabled=\"${pagesBefore === 0}\"\n          @click=\"${handleClickPrevButton}\"\n          aria-label=\"${ifDefined(prevButtonText)}\"\n          title=\"${ifDefined(prevButtonText)}\"\n        >\n          ${CaretLeft20()}\n        </button>\n        ${this._renderStatus()}\n        <button\n          part=\"next-button\"\n          class=\"${prefix}--btn ${prefix}--btn--secondary ${prefix}--btn--icon-only ${prefix}--carousel__navigation__btn\"\n          ?disabled=\"${pagesSince <= 1}\"\n          @click=\"${handleClickNextButton}\"\n          aria-label=\"${ifDefined(nextButtonText)}\"\n          title=\"${ifDefined(nextButtonText)}\"\n        >\n          ${CaretRight20()}\n        </button>\n      </div>\n    `;\n  }\n\n  /**\n   * The CSS custom property name for the live page size.\n   * If the CSS custom property is set to `<div class=\"bx--carousel__scroll-container\">`\n   * or its ancestor (e.g. the host `<dds-carousel>`), this is set automatically from the CSS custom property.\n   */\n  static get customPropertyPageSize() {\n    return `--${ddsPrefix}--carousel--page-size`;\n  }\n\n  /**\n   * The name of the custom event fired when the video title is updated\n   */\n  static get eventVideoTitleUpdated() {\n    return `${ddsPrefix}-card-cta-video-title-updated`;\n  }\n\n  /**\n   * The selector for the card component\n   */\n  static get selectorItem() {\n    return `${ddsPrefix}-card`;\n  }\n\n  /**\n   * The selector for the card cta\n   */\n  static get selectorItemCardCTA() {\n    return `${ddsPrefix}-card-cta`;\n  }\n\n  /**\n   * The selector for the video cta container\n   */\n  static get selectorItemVideoCTAContainer() {\n    return `${ddsPrefix}-video-cta-container`;\n  }\n\n  /**\n   * A selector that will return the card item's eyebrow\n   */\n  static get selectorItemEyebrow() {\n    return `${ddsPrefix}-card-eyebrow`;\n  }\n\n  /**\n   * A selector that will return the card item's tag group\n   */\n  static get selectorItemTagGroup() {\n    return `${ddsPrefix}-tag-group`;\n  }\n\n  /**\n   * A selector that will return the card item's tag group\n   */\n  static get selectorItemParagraph() {\n    return `p`;\n  }\n\n  /**\n   * A selector that will return the card item's heading\n   */\n  static get selectorItemHeading() {\n    return `${ddsPrefix}-card-heading`;\n  }\n\n  /**\n   * A selector that will return the card item's footer\n   */\n  static get selectorItemFooter() {\n    return `${ddsPrefix}-card-cta-footer`;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--carousel`;\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return `\n      ${selectorTabbable}\n    `;\n  }\n\n  static styles = styles;\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSCarousel;\n"],"mappings":"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"}

package/es/components/content-item-horizontal/content-item-horizontal-media.d.ts

@@ -11,7 +11,7 @@ import DDSContentItem from '../content-item/content-item';
 import { MEDIA_ALIGN } from './defs';
 declare const DDSContentItemHorizontalMedia_base: {
     new (...args: any[]): {
-        _handles: Set<import("@carbon/carbon-web-components/es/globals/internal/handle").default>;
+        _handles: Set<import("@carbon/web-components/es/globals/internal/handle").default>;
         connectedCallback(): void;
         disconnectedCallback(): void;
         accessKey: string;
@@ -24,11 +24,7 @@ declare const DDSContentItemHorizontalMedia_base: {
         innerText: string;
         lang: string;
         readonly offsetHeight: number;
-        readonly offsetLeft: number; /**
-         * A component to present content in a horizontal orientation with media.
-         *
-         * @element dds-content-item-horizontal-media
-         */
+        readonly offsetLeft: number;
         readonly offsetParent: Element | null;
         readonly offsetTop: number;
         readonly offsetWidth: number;
@@ -36,9 +32,7 @@ declare const DDSContentItemHorizontalMedia_base: {
         spellcheck: boolean;
         title: string;
         translate: boolean;
-        attachInternals(): ElementInternals; /**
-         * Defines the alignment of the media: `left` or `right`
-         */
+        attachInternals(): ElementInternals;
         click(): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;

package/es/components/content-item-horizontal/content-item-horizontal-media.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/content-item-horizontal/content-item-horizontal-media.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAKL,cAAc,EACf,MAAM,aAAa,CAAC;AAMrB,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAG1D,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;qCAOrC;;;;WAIG;;;;;;;;6CAGD;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AATL;;;;GAIG;AACH,cACM,6BAA8B,SAAQ,kCAAiC;IAC3E;;OAEG;IAEH,KAAK,cAAqB;IAE1B;;OAEG;IAEH,YAAY,EAAE,OAAO,CAAkC;IAIvD,OAAO,CAAC,mBAAmB,CAEzB;IAEF;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,cAAc,GAAG,MAAM,GAAG,IAAI;IAU1D;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,cAAc,GAAG,MAAM,GAAG,IAAI;IAkB1D,MAAM;IAWN,MAAM,KAAK,cAAc,WAExB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAGD,eAAe,6BAA6B,CAAC","file":"content-item-horizontal-media.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  customElement,\n  html,\n  state,\n  property,\n  TemplateResult,\n} from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport { baseFontSize, breakpoints } from '@carbon/layout';\nimport HostListener from '@carbon/carbon-web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/carbon-web-components/es/globals/mixins/host-listener.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport DDSContentItem from '../content-item/content-item';\nimport styles from './content-item-horizontal-media.scss';\n\nimport { MEDIA_ALIGN } from './defs';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\nconst breakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;\n\n/**\n * A component to present content in a horizontal orientation with media.\n *\n * @element dds-content-item-horizontal-media\n */\n@customElement(`${ddsPrefix}-content-item-horizontal-media`)\nclass DDSContentItemHorizontalMedia extends HostListenerMixin(DDSContentItem) {\n  /**\n   * Defines the alignment of the media: `left` or `right`\n   */\n  @property({ reflect: true })\n  align = MEDIA_ALIGN.RIGHT;\n\n  /**\n   * Identifies whether the window width is below the breakpoint or not.\n   */\n  @state()\n  _isOneColumn: boolean = window.innerWidth < breakpoint;\n\n  @HostListener('window:resize')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleWindowResize = (): void => {\n    this._isOneColumn = window.innerWidth < breakpoint;\n  };\n\n  /**\n   * @returns The text column content.\n   */\n  protected _renderTextCol(): TemplateResult | string | void {\n    return html`\n      <div class=\"${prefix}--content-item-horizontal__col\">\n        <slot name=\"eyebrow\" @slotchange=\"${this._handleSlotChange}\"></slot>\n        <slot name=\"heading\"></slot>\n        ${this._renderBody()} ${this._renderFooter()}\n      </div>\n    `;\n  }\n\n  /**\n   * @returns The component content in the appropriate tabbing order.\n   */\n  protected _renderContent(): TemplateResult | string | void {\n    const alignedRight = this._isOneColumn || this.align === MEDIA_ALIGN.RIGHT;\n\n    return alignedRight\n      ? html`\n          ${this._renderTextCol()}\n          <div class=\"${prefix}--content-item-horizontal__col\">\n            <slot name=\"media\" @slotchange=\"${this._handleSlotChange}\"></slot>\n          </div>\n        `\n      : html`\n          <div class=\"${prefix}--content-item-horizontal__col\">\n            <slot name=\"media\" @slotchange=\"${this._handleSlotChange}\"></slot>\n          </div>\n          ${this._renderTextCol()}\n        `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"${prefix}--content-item-horizontal__row ${prefix}--content-item-horizontal-media__align-${this\n          .align}\"\n      >\n        ${this._renderContent()}\n      </div>\n    `;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--content-item-horizontal-media`;\n  }\n\n  static styles = styles;\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSContentItemHorizontalMedia;\n"]}
+{"version":3,"sources":["components/content-item-horizontal/content-item-horizontal-media.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAKL,cAAc,EACf,MAAM,aAAa,CAAC;AAMrB,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAG1D,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOrC;;;;GAIG;AACH,cACM,6BAA8B,SAAQ,kCAAiC;IAC3E;;OAEG;IAEH,KAAK,cAAqB;IAE1B;;OAEG;IAEH,YAAY,EAAE,OAAO,CAAkC;IAIvD,OAAO,CAAC,mBAAmB,CAEzB;IAEF;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,cAAc,GAAG,MAAM,GAAG,IAAI;IAU1D;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,cAAc,GAAG,MAAM,GAAG,IAAI;IAkB1D,MAAM;IAWN,MAAM,KAAK,cAAc,WAExB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAGD,eAAe,6BAA6B,CAAC","file":"content-item-horizontal-media.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  customElement,\n  html,\n  state,\n  property,\n  TemplateResult,\n} from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport { baseFontSize, breakpoints } from '@carbon/layout';\nimport HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport DDSContentItem from '../content-item/content-item';\nimport styles from './content-item-horizontal-media.scss';\n\nimport { MEDIA_ALIGN } from './defs';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\nconst breakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;\n\n/**\n * A component to present content in a horizontal orientation with media.\n *\n * @element dds-content-item-horizontal-media\n */\n@customElement(`${ddsPrefix}-content-item-horizontal-media`)\nclass DDSContentItemHorizontalMedia extends HostListenerMixin(DDSContentItem) {\n  /**\n   * Defines the alignment of the media: `left` or `right`\n   */\n  @property({ reflect: true })\n  align = MEDIA_ALIGN.RIGHT;\n\n  /**\n   * Identifies whether the window width is below the breakpoint or not.\n   */\n  @state()\n  _isOneColumn: boolean = window.innerWidth < breakpoint;\n\n  @HostListener('window:resize')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleWindowResize = (): void => {\n    this._isOneColumn = window.innerWidth < breakpoint;\n  };\n\n  /**\n   * @returns The text column content.\n   */\n  protected _renderTextCol(): TemplateResult | string | void {\n    return html`\n      <div class=\"${prefix}--content-item-horizontal__col\">\n        <slot name=\"eyebrow\" @slotchange=\"${this._handleSlotChange}\"></slot>\n        <slot name=\"heading\"></slot>\n        ${this._renderBody()} ${this._renderFooter()}\n      </div>\n    `;\n  }\n\n  /**\n   * @returns The component content in the appropriate tabbing order.\n   */\n  protected _renderContent(): TemplateResult | string | void {\n    const alignedRight = this._isOneColumn || this.align === MEDIA_ALIGN.RIGHT;\n\n    return alignedRight\n      ? html`\n          ${this._renderTextCol()}\n          <div class=\"${prefix}--content-item-horizontal__col\">\n            <slot name=\"media\" @slotchange=\"${this._handleSlotChange}\"></slot>\n          </div>\n        `\n      : html`\n          <div class=\"${prefix}--content-item-horizontal__col\">\n            <slot name=\"media\" @slotchange=\"${this._handleSlotChange}\"></slot>\n          </div>\n          ${this._renderTextCol()}\n        `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"${prefix}--content-item-horizontal__row ${prefix}--content-item-horizontal-media__align-${this\n          .align}\"\n      >\n        ${this._renderContent()}\n      </div>\n    `;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--content-item-horizontal-media`;\n  }\n\n  static styles = styles;\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSContentItemHorizontalMedia;\n"]}

package/es/components/content-item-horizontal/content-item-horizontal-media.js

@@ -16,8 +16,8 @@ let _ = t => t,
 import { customElement, html, state, property } from 'lit-element';
 import settings from 'carbon-components/es/globals/js/settings.js';
 import { baseFontSize, breakpoints } from '@carbon/layout';
-import HostListener from '@carbon/carbon-web-components/es/globals/decorators/host-listener.js';
-import HostListenerMixin from '@carbon/carbon-web-components/es/globals/mixins/host-listener.js';
+import HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';
+import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
 import ddsSettings from "../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js";
 import DDSContentItem from "../content-item/content-item.js";
 import styles from "././content-item-horizontal-media.css.js";

package/es/components/content-item-horizontal/content-item-horizontal-media.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-item-horizontal-media.js","names":["customElement","html","state","property","settings","baseFontSize","breakpoints","HostListener","HostListenerMixin","ddsSettings","DDSContentItem","styles","MEDIA_ALIGN","prefix","stablePrefix","ddsPrefix","breakpoint","parseFloat","lg","width","DDSContentItemHorizontalMedia","reflect","RIGHT","window","innerWidth","_isOneColumn","_handleSlotChange","_renderBody","_renderFooter","alignedRight","align","_renderTextCol","_renderContent"],"sources":["components/content-item-horizontal/content-item-horizontal-media.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  customElement,\n  html,\n  state,\n  property,\n  TemplateResult,\n} from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport { baseFontSize, breakpoints } from '@carbon/layout';\nimport HostListener from '@carbon/carbon-web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/carbon-web-components/es/globals/mixins/host-listener.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport DDSContentItem from '../content-item/content-item';\nimport styles from './content-item-horizontal-media.scss';\n\nimport { MEDIA_ALIGN } from './defs';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\nconst breakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;\n\n/**\n * A component to present content in a horizontal orientation with media.\n *\n * @element dds-content-item-horizontal-media\n */\n@customElement(`${ddsPrefix}-content-item-horizontal-media`)\nclass DDSContentItemHorizontalMedia extends HostListenerMixin(DDSContentItem) {\n  /**\n   * Defines the alignment of the media: `left` or `right`\n   */\n  @property({ reflect: true })\n  align = MEDIA_ALIGN.RIGHT;\n\n  /**\n   * Identifies whether the window width is below the breakpoint or not.\n   */\n  @state()\n  _isOneColumn: boolean = window.innerWidth < breakpoint;\n\n  @HostListener('window:resize')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleWindowResize = (): void => {\n    this._isOneColumn = window.innerWidth < breakpoint;\n  };\n\n  /**\n   * @returns The text column content.\n   */\n  protected _renderTextCol(): TemplateResult | string | void {\n    return html`\n      <div class=\"${prefix}--content-item-horizontal__col\">\n        <slot name=\"eyebrow\" @slotchange=\"${this._handleSlotChange}\"></slot>\n        <slot name=\"heading\"></slot>\n        ${this._renderBody()} ${this._renderFooter()}\n      </div>\n    `;\n  }\n\n  /**\n   * @returns The component content in the appropriate tabbing order.\n   */\n  protected _renderContent(): TemplateResult | string | void {\n    const alignedRight = this._isOneColumn || this.align === MEDIA_ALIGN.RIGHT;\n\n    return alignedRight\n      ? html`\n          ${this._renderTextCol()}\n          <div class=\"${prefix}--content-item-horizontal__col\">\n            <slot name=\"media\" @slotchange=\"${this._handleSlotChange}\"></slot>\n          </div>\n        `\n      : html`\n          <div class=\"${prefix}--content-item-horizontal__col\">\n            <slot name=\"media\" @slotchange=\"${this._handleSlotChange}\"></slot>\n          </div>\n          ${this._renderTextCol()}\n        `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"${prefix}--content-item-horizontal__row ${prefix}--content-item-horizontal-media__align-${this\n          .align}\"\n      >\n        ${this._renderContent()}\n      </div>\n    `;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--content-item-horizontal-media`;\n  }\n\n  static styles = styles;\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSContentItemHorizontalMedia;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,aAAa,EACbC,IAAI,EACJC,KAAK,EACLC,QAAQ,QAEH,aAAa;AACpB,OAAOC,QAAQ,MAAM,6CAA6C;AAClE,SAASC,YAAY,EAAEC,WAAW,QAAQ,gBAAgB;AAC1D,OAAOC,YAAY,MAAM,sEAAsE;AAC/F,OAAOC,iBAAiB,MAAM,kEAAkE;AAChG,OAAOC,WAAW,MAAM,kFAA+E;AACvG,OAAOC,cAAc,MAAM,iCAA8B;AACzD,OAAOC,MAAM,MAAM,0CAAsC;AAEzD,SAASC,WAAW,QAAQ,WAAQ;AAEpC,MAAM;EAAEC;AAAO,CAAC,GAAGT,QAAQ;AAC3B,MAAM;EAAEU,YAAY,EAAEC;AAAU,CAAC,GAAGN,WAAW;AAE/C,MAAMO,UAAU,GAAGC,UAAU,CAACX,WAAW,CAACY,EAAE,CAACC,KAAK,CAAC,GAAGd,YAAY;;AAElE;AACA;AACA;AACA;AACA;AAJA,IAMMe,6BAA6B,cADlCpB,aAAa,CAAE,GAAEe,SAAU,gCAA+B,CAAC;EAA5D,MACMK,6BAA6B,4BAA2C;IAAA;MAAA;MAAA;IAAA;EAqE9E;EAAC;IAAA,GArEKA,6BAA6B;IAAA;MAAA;MAAA,aAIhCjB,QAAQ,CAAC;QAAEkB,OAAO,EAAE;MAAK,CAAC,CAAC;MAAA;MAAA;QAAA,OACpBT,WAAW,CAACU,KAAK;MAAA;IAAA;MAAA;MAAA,aAKxBpB,KAAK,EAAE;MAAA;MAAA;QAAA,OACgBqB,MAAM,CAACC,UAAU,GAAGR,UAAU;MAAA;IAAA;MAAA;MAAA,aAErDT,YAAY,CAAC,eAAe,CAAC;MAAA;MAAA;QAAA,OAEA,MAAY;UACxC,IAAI,CAACkB,YAAY,GAAGF,MAAM,CAACC,UAAU,GAAGR,UAAU;QACpD,CAAC;MAAA;IAAA;MAAA;MAAA;MAAA;MAhBD;AACF;AACA;;MAIE;AACF;AACA;;MAUE;AACF;AACA;MACE,0BAA2D;QACzD,OAAOf,IAAI,cAAC;AAChB,oBAAkB,CAAS;AAC3B,4CAA0C,CAAyB;AACnE;AACA,UAAQ,CAAqB,IAAC,CAAuB;AACrD;AACA,KAAI,GALgBY,MAAM,EACkB,IAAI,CAACa,iBAAiB,EAExD,IAAI,CAACC,WAAW,EAAE,EAAI,IAAI,CAACC,aAAa,EAAE;MAGlD;;MAEA;AACF;AACA;IAFE;MAAA;MAAA;MAAA,OAGA,0BAA2D;QACzD,MAAMC,YAAY,GAAG,IAAI,CAACJ,YAAY,IAAI,IAAI,CAACK,KAAK,KAAKlB,WAAW,CAACU,KAAK;QAE1E,OAAOO,YAAY,GACf5B,IAAI,gBAAC;AACb,YAAU,CAAwB;AAClC,wBAAsB,CAAS;AAC/B,8CAA4C,CAAyB;AACrE;AACA,SAAQ,GAJI,IAAI,CAAC8B,cAAc,EAAE,EACTlB,MAAM,EACgB,IAAI,CAACa,iBAAiB,IAG5DzB,IAAI,gBAAC;AACb,wBAAsB,CAAS;AAC/B,8CAA4C,CAAyB;AACrE;AACA,YAAU,CAAwB;AAClC,SAAQ,GAJgBY,MAAM,EACgB,IAAI,CAACa,iBAAiB,EAExD,IAAI,CAACK,cAAc,EAAE,CACxB;MACP;IAAC;MAAA;MAAA;MAAA,OAED,kBAAS;QACP,OAAO9B,IAAI,gBAAC;AAChB;AACA,iBAAe,CAAS,kCAA+B,CAAS,0CAAuC,CACtF;AACjB;AACA,UAAQ,CAAwB;AAChC;AACA,KAAI,GALaY,MAAM,EAAkCA,MAAM,EAA0C,IAAI,CAClGiB,KAAK,EAEN,IAAI,CAACE,cAAc,EAAE;MAG7B;IAAC;MAAA;MAAA;MAAA;MAAA,OAED,0BAA4B;QAC1B,OAAQ,GAAEjB,SAAU,iCAAgC;MACtD;IAAC;MAAA;MAAA;MAAA;MAAA;QAAA,OAEeJ,MAAM;MAAA;IAAA;EAAA;AAAA,GApEoBH,iBAAiB,CAACE,cAAc,CAAC,GAuE7E;AACA,eAAeU,6BAA6B"}
+{"version":3,"file":"content-item-horizontal-media.js","names":["customElement","html","state","property","settings","baseFontSize","breakpoints","HostListener","HostListenerMixin","ddsSettings","DDSContentItem","styles","MEDIA_ALIGN","prefix","stablePrefix","ddsPrefix","breakpoint","parseFloat","lg","width","DDSContentItemHorizontalMedia","reflect","RIGHT","window","innerWidth","_isOneColumn","_handleSlotChange","_renderBody","_renderFooter","alignedRight","align","_renderTextCol","_renderContent"],"sources":["components/content-item-horizontal/content-item-horizontal-media.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  customElement,\n  html,\n  state,\n  property,\n  TemplateResult,\n} from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport { baseFontSize, breakpoints } from '@carbon/layout';\nimport HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';\nimport HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport DDSContentItem from '../content-item/content-item';\nimport styles from './content-item-horizontal-media.scss';\n\nimport { MEDIA_ALIGN } from './defs';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\nconst breakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;\n\n/**\n * A component to present content in a horizontal orientation with media.\n *\n * @element dds-content-item-horizontal-media\n */\n@customElement(`${ddsPrefix}-content-item-horizontal-media`)\nclass DDSContentItemHorizontalMedia extends HostListenerMixin(DDSContentItem) {\n  /**\n   * Defines the alignment of the media: `left` or `right`\n   */\n  @property({ reflect: true })\n  align = MEDIA_ALIGN.RIGHT;\n\n  /**\n   * Identifies whether the window width is below the breakpoint or not.\n   */\n  @state()\n  _isOneColumn: boolean = window.innerWidth < breakpoint;\n\n  @HostListener('window:resize')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleWindowResize = (): void => {\n    this._isOneColumn = window.innerWidth < breakpoint;\n  };\n\n  /**\n   * @returns The text column content.\n   */\n  protected _renderTextCol(): TemplateResult | string | void {\n    return html`\n      <div class=\"${prefix}--content-item-horizontal__col\">\n        <slot name=\"eyebrow\" @slotchange=\"${this._handleSlotChange}\"></slot>\n        <slot name=\"heading\"></slot>\n        ${this._renderBody()} ${this._renderFooter()}\n      </div>\n    `;\n  }\n\n  /**\n   * @returns The component content in the appropriate tabbing order.\n   */\n  protected _renderContent(): TemplateResult | string | void {\n    const alignedRight = this._isOneColumn || this.align === MEDIA_ALIGN.RIGHT;\n\n    return alignedRight\n      ? html`\n          ${this._renderTextCol()}\n          <div class=\"${prefix}--content-item-horizontal__col\">\n            <slot name=\"media\" @slotchange=\"${this._handleSlotChange}\"></slot>\n          </div>\n        `\n      : html`\n          <div class=\"${prefix}--content-item-horizontal__col\">\n            <slot name=\"media\" @slotchange=\"${this._handleSlotChange}\"></slot>\n          </div>\n          ${this._renderTextCol()}\n        `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"${prefix}--content-item-horizontal__row ${prefix}--content-item-horizontal-media__align-${this\n          .align}\"\n      >\n        ${this._renderContent()}\n      </div>\n    `;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--content-item-horizontal-media`;\n  }\n\n  static styles = styles;\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSContentItemHorizontalMedia;\n"],"mappings":"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"}

package/es/components/cta/card-cta.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/cta/card-cta.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,EAEL,mBAAmB,EACpB,MAAM,mFAAmF,CAAC;AAE3F,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,CAAC;AAI1B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAGlC,OAAO,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKpB;;;;GAIG;AACH,cACM,UAAW,SAAQ,eAAgC;IACvD,SAAS,CAAC,cAAc;IA0BxB,SAAS,CAAC,YAAY;IA0BtB;;OAEG;IAEH,OAAO,WAAoB;IAE3B;;;OAGG;IAEH,kBAAkB,MAAsB;IAExC;;;OAGG;IAEH,mBAAmB,CAAC,EAAE,OAAO,mBAAmB,CAAC;IAEjD;;OAEG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IAEH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IAEH,SAAS,CAAC,EAAE,EAAE,CAAC;IAEf;;OAEG;IAEH,QAAQ,UAAS;IAEjB,OAAO,CAAC,iBAAiB,KAAA;IAoDzB,MAAM,KAAK,cAAc,WAExB;IAED;;OAEG;IACH,MAAM,KAAK,sBAAsB,WAEhC;IAED;;OAEG;IACH,MAAM,KAAK,cAAc,WAExB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAGD,eAAe,UAAU,CAAC","file":"card-cta.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, property, customElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport ifNonNull from '@carbon/carbon-web-components/es/globals/directives/if-non-null.js';\nimport PlayVideo from '@carbon/ibmdotcom-styles/icons/svg/play-video.svg';\nimport {\n  formatVideoCaption,\n  formatVideoDuration,\n} from '@carbon/ibmdotcom-utilities/es/utilities/formatVideoCaption/formatVideoCaption.js';\nimport KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayer/KalturaPlayer';\nimport DDSCard from '../card/card';\nimport '../card/card-heading';\nimport './card-cta-image';\nimport CTAMixin from '../../component-mixins/cta/cta';\nimport VideoCTAMixin from '../../component-mixins/cta/video';\nimport DDSCardCTAFooter from './card-cta-footer';\nimport './card-cta-footer';\nimport { CTA_TYPE } from './defs';\nimport styles from './cta.scss';\n\nexport { CTA_TYPE };\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/**\n * Card CTA.\n *\n * @element dds-card-cta\n */\n@customElement(`${ddsPrefix}-card-cta`)\nclass DDSCardCTA extends VideoCTAMixin(CTAMixin(DDSCard)) {\n  protected _renderHeading() {\n    const {\n      ctaType,\n      videoName,\n      formatVideoCaption: formatVideoCaptionInEffect,\n    } = this;\n    if (ctaType !== CTA_TYPE.VIDEO) {\n      return super._renderHeading();\n    }\n    const caption = formatVideoCaptionInEffect({ name: videoName });\n\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof DDSCardCTA).eventVideoTitleUpdated,\n        {\n          bubbles: true,\n          composed: true,\n        }\n      )\n    );\n    return html`\n      <slot name=\"heading\"></slot\n      ><dds-card-heading>${caption}</dds-card-heading>\n    `;\n  }\n\n  protected _renderImage() {\n    const {\n      ctaType,\n      videoName,\n      videoThumbnailUrl,\n      thumbnail,\n      _hasImage: hasImage,\n      noPoster,\n    } = this;\n    const image =\n      hasImage || ctaType !== CTA_TYPE.VIDEO || noPoster\n        ? undefined\n        : html`\n            <dds-card-cta-image\n              class=\"${prefix}--card__video-thumbnail\"\n              alt=\"${ifNonNull(videoName)}\"\n              default-src=\"${ifNonNull(thumbnail || videoThumbnailUrl)}\"\n            >\n              ${PlayVideo({ slot: 'icon' })}\n            </dds-card-cta-image>\n          `;\n    return html`\n      <slot name=\"image\" @slotchange=\"${this._handleSlotChange}\"></slot>${image}\n    `;\n  }\n\n  /**\n   * The CTA type.\n   */\n  @property({ reflect: true, attribute: 'cta-type' })\n  ctaType = CTA_TYPE.REGULAR;\n\n  /**\n   * The formatter for the video caption, composed with the video name and the video duration.\n   * Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatVideoCaption = formatVideoCaption;\n\n  /**\n   * The formatter for the video duration.\n   * Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatVideoDuration?: typeof formatVideoDuration;\n\n  /**\n   * The video duration.\n   */\n  @property({ type: Number, attribute: 'video-duration' })\n  videoDuration?: number;\n\n  /**\n   * The video name.\n   */\n  @property({ attribute: 'video-name' })\n  videoName?: string;\n\n  /**\n   * The custom video description.\n   */\n  @property({ attribute: 'video-description' })\n  videoDescription?: string;\n\n  /**\n   * The video thumbnail URL.\n   */\n  @property({ attribute: 'video-thumbnail-url' })\n  videoThumbnailUrl?: string;\n\n  /**\n   * Optional custom video thumbnail\n   */\n  @property({ reflect: true, attribute: 'thumbnail' })\n  thumbnail?: '';\n\n  /**\n   * Set `true` if Poster Video Image should not be shown.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-poster' })\n  noPoster = false;\n\n  updated(changedProperties) {\n    super.updated(changedProperties);\n    const footer = this.querySelector(\n      (this.constructor as typeof DDSCardCTA).selectorFooter\n    );\n    if (\n      changedProperties.has('ctaType') ||\n      changedProperties.has('formatCaption') ||\n      changedProperties.has('formatDuration') ||\n      changedProperties.has('videoDuration') ||\n      changedProperties.has('videoName')\n    ) {\n      const {\n        ctaType,\n        videoDuration,\n        videoName,\n        videoDescription,\n        formatVideoCaption: formatVideoCaptionInEffect,\n        formatVideoDuration: formatVideoDurationInEffect,\n      } = this;\n      const headingText = this.querySelector(\n        `${ddsPrefix}-card-heading`\n      )?.textContent;\n      const copyText = this.textContent;\n      if (footer) {\n        const ariaTitle = videoName || headingText || copyText;\n        let ariaDuration = '';\n        if (videoDuration !== undefined) {\n          ariaDuration = `, DURATION ${KalturaPlayerAPI.getMediaDurationFormatted(\n            videoDuration,\n            false\n          )}`;\n        }\n        (\n          footer as DDSCardCTAFooter\n        ).altAriaLabel = `${ariaTitle}${ariaDuration}`;\n        (footer as DDSCardCTAFooter).ctaType = ctaType;\n        (footer as DDSCardCTAFooter).videoDuration = videoDuration;\n        (footer as DDSCardCTAFooter).videoName = videoName;\n        (footer as DDSCardCTAFooter).videoDescription = videoDescription;\n        if (formatVideoCaptionInEffect) {\n          (footer as DDSCardCTAFooter).formatVideoCaption =\n            formatVideoCaptionInEffect;\n        }\n        if (formatVideoDurationInEffect) {\n          (footer as DDSCardCTAFooter).formatVideoDuration =\n            formatVideoDurationInEffect;\n        }\n      }\n    }\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--card-cta`;\n  }\n\n  /**\n   * The name of the custom event fired when the video title is updated\n   */\n  static get eventVideoTitleUpdated() {\n    return `${ddsPrefix}-card-cta-video-title-updated`;\n  }\n\n  /**\n   * A selector that will return the child footer.\n   */\n  static get selectorFooter() {\n    return `${ddsPrefix}-card-cta-footer`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSCardCTA;\n"]}
+{"version":3,"sources":["components/cta/card-cta.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,EAEL,mBAAmB,EACpB,MAAM,mFAAmF,CAAC;AAE3F,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,CAAC;AAI1B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAGlC,OAAO,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKpB;;;;GAIG;AACH,cACM,UAAW,SAAQ,eAAgC;IACvD,SAAS,CAAC,cAAc;IA0BxB,SAAS,CAAC,YAAY;IA0BtB;;OAEG;IAEH,OAAO,WAAoB;IAE3B;;;OAGG;IAEH,kBAAkB,MAAsB;IAExC;;;OAGG;IAEH,mBAAmB,CAAC,EAAE,OAAO,mBAAmB,CAAC;IAEjD;;OAEG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IAEH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IAEH,SAAS,CAAC,EAAE,EAAE,CAAC;IAEf;;OAEG;IAEH,QAAQ,UAAS;IAEjB,OAAO,CAAC,iBAAiB,KAAA;IAoDzB,MAAM,KAAK,cAAc,WAExB;IAED;;OAEG;IACH,MAAM,KAAK,sBAAsB,WAEhC;IAED;;OAEG;IACH,MAAM,KAAK,cAAc,WAExB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAGD,eAAe,UAAU,CAAC","file":"card-cta.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, property, customElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport ifNonNull from '@carbon/web-components/es/globals/directives/if-non-null.js';\nimport PlayVideo from '@carbon/ibmdotcom-styles/icons/svg/play-video.svg';\nimport {\n  formatVideoCaption,\n  formatVideoDuration,\n} from '@carbon/ibmdotcom-utilities/es/utilities/formatVideoCaption/formatVideoCaption.js';\nimport KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayer/KalturaPlayer';\nimport DDSCard from '../card/card';\nimport '../card/card-heading';\nimport './card-cta-image';\nimport CTAMixin from '../../component-mixins/cta/cta';\nimport VideoCTAMixin from '../../component-mixins/cta/video';\nimport DDSCardCTAFooter from './card-cta-footer';\nimport './card-cta-footer';\nimport { CTA_TYPE } from './defs';\nimport styles from './cta.scss';\n\nexport { CTA_TYPE };\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/**\n * Card CTA.\n *\n * @element dds-card-cta\n */\n@customElement(`${ddsPrefix}-card-cta`)\nclass DDSCardCTA extends VideoCTAMixin(CTAMixin(DDSCard)) {\n  protected _renderHeading() {\n    const {\n      ctaType,\n      videoName,\n      formatVideoCaption: formatVideoCaptionInEffect,\n    } = this;\n    if (ctaType !== CTA_TYPE.VIDEO) {\n      return super._renderHeading();\n    }\n    const caption = formatVideoCaptionInEffect({ name: videoName });\n\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof DDSCardCTA).eventVideoTitleUpdated,\n        {\n          bubbles: true,\n          composed: true,\n        }\n      )\n    );\n    return html`\n      <slot name=\"heading\"></slot\n      ><dds-card-heading>${caption}</dds-card-heading>\n    `;\n  }\n\n  protected _renderImage() {\n    const {\n      ctaType,\n      videoName,\n      videoThumbnailUrl,\n      thumbnail,\n      _hasImage: hasImage,\n      noPoster,\n    } = this;\n    const image =\n      hasImage || ctaType !== CTA_TYPE.VIDEO || noPoster\n        ? undefined\n        : html`\n            <dds-card-cta-image\n              class=\"${prefix}--card__video-thumbnail\"\n              alt=\"${ifNonNull(videoName)}\"\n              default-src=\"${ifNonNull(thumbnail || videoThumbnailUrl)}\"\n            >\n              ${PlayVideo({ slot: 'icon' })}\n            </dds-card-cta-image>\n          `;\n    return html`\n      <slot name=\"image\" @slotchange=\"${this._handleSlotChange}\"></slot>${image}\n    `;\n  }\n\n  /**\n   * The CTA type.\n   */\n  @property({ reflect: true, attribute: 'cta-type' })\n  ctaType = CTA_TYPE.REGULAR;\n\n  /**\n   * The formatter for the video caption, composed with the video name and the video duration.\n   * Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatVideoCaption = formatVideoCaption;\n\n  /**\n   * The formatter for the video duration.\n   * Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatVideoDuration?: typeof formatVideoDuration;\n\n  /**\n   * The video duration.\n   */\n  @property({ type: Number, attribute: 'video-duration' })\n  videoDuration?: number;\n\n  /**\n   * The video name.\n   */\n  @property({ attribute: 'video-name' })\n  videoName?: string;\n\n  /**\n   * The custom video description.\n   */\n  @property({ attribute: 'video-description' })\n  videoDescription?: string;\n\n  /**\n   * The video thumbnail URL.\n   */\n  @property({ attribute: 'video-thumbnail-url' })\n  videoThumbnailUrl?: string;\n\n  /**\n   * Optional custom video thumbnail\n   */\n  @property({ reflect: true, attribute: 'thumbnail' })\n  thumbnail?: '';\n\n  /**\n   * Set `true` if Poster Video Image should not be shown.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-poster' })\n  noPoster = false;\n\n  updated(changedProperties) {\n    super.updated(changedProperties);\n    const footer = this.querySelector(\n      (this.constructor as typeof DDSCardCTA).selectorFooter\n    );\n    if (\n      changedProperties.has('ctaType') ||\n      changedProperties.has('formatCaption') ||\n      changedProperties.has('formatDuration') ||\n      changedProperties.has('videoDuration') ||\n      changedProperties.has('videoName')\n    ) {\n      const {\n        ctaType,\n        videoDuration,\n        videoName,\n        videoDescription,\n        formatVideoCaption: formatVideoCaptionInEffect,\n        formatVideoDuration: formatVideoDurationInEffect,\n      } = this;\n      const headingText = this.querySelector(\n        `${ddsPrefix}-card-heading`\n      )?.textContent;\n      const copyText = this.textContent;\n      if (footer) {\n        const ariaTitle = videoName || headingText || copyText;\n        let ariaDuration = '';\n        if (videoDuration !== undefined) {\n          ariaDuration = `, DURATION ${KalturaPlayerAPI.getMediaDurationFormatted(\n            videoDuration,\n            false\n          )}`;\n        }\n        (\n          footer as DDSCardCTAFooter\n        ).altAriaLabel = `${ariaTitle}${ariaDuration}`;\n        (footer as DDSCardCTAFooter).ctaType = ctaType;\n        (footer as DDSCardCTAFooter).videoDuration = videoDuration;\n        (footer as DDSCardCTAFooter).videoName = videoName;\n        (footer as DDSCardCTAFooter).videoDescription = videoDescription;\n        if (formatVideoCaptionInEffect) {\n          (footer as DDSCardCTAFooter).formatVideoCaption =\n            formatVideoCaptionInEffect;\n        }\n        if (formatVideoDurationInEffect) {\n          (footer as DDSCardCTAFooter).formatVideoDuration =\n            formatVideoDurationInEffect;\n        }\n      }\n    }\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--card-cta`;\n  }\n\n  /**\n   * The name of the custom event fired when the video title is updated\n   */\n  static get eventVideoTitleUpdated() {\n    return `${ddsPrefix}-card-cta-video-title-updated`;\n  }\n\n  /**\n   * A selector that will return the child footer.\n   */\n  static get selectorFooter() {\n    return `${ddsPrefix}-card-cta-footer`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSCardCTA;\n"]}

package/es/components/cta/card-cta.js

@@ -17,7 +17,7 @@ let _ = t => t,
 import { html, property, customElement } from 'lit-element';
 import settings from 'carbon-components/es/globals/js/settings.js';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import ifNonNull from '@carbon/carbon-web-components/es/globals/directives/if-non-null.js';
+import ifNonNull from '@carbon/web-components/es/globals/directives/if-non-null.js';
 import PlayVideo from "../../icons/play-video.js";
 import { formatVideoCaption } from '@carbon/ibmdotcom-utilities/es/utilities/formatVideoCaption/formatVideoCaption.js';
 import KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayer/KalturaPlayer';